* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --primary-blue: #0066FF;
            --primary-purple: #6366F1;
            --success-green: #10B981;
            --warning-orange: #F59E0B;
            --error-red: #EF4444;
            --gray-50: #F9FAFB;
            --gray-100: #F3F4F6;
            --gray-200: #E5E7EB;
            --gray-300: #D1D5DB;
            --gray-400: #9CA3AF;
            --gray-500: #6B7280;
            --gray-600: #4B5563;
            --gray-700: #374151;
            --gray-800: #1F2937;
            --gray-900: #111827;
            --white: #FFFFFF;
            --primary-color: #0066FF;
            --text-primary: #111827;
            --text-secondary: #6B7280;
            --background-secondary: #F3F4F6;
            --border-color: #E5E7EB;
            --gradient-primary: linear-gradient(135deg, #0066FF 0%, #6366F1 100%);
            --gradient-secondary: linear-gradient(135deg, #10B981 0%, #059669 100%);
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }
        
        body {
            line-height: 1.6;
            color: var(--gray-800);
            background: var(--white);
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
        }
        
        /* Header */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: #000;                  /* solid black */
            border-bottom: 1px solid #222;     /* subtle divider (optional) */
            z-index: 1000;
            transition: all 0.3s ease;
        }
        
        .header.scrolled {
            background: #000 !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); /* optional subtle shadow */
        }
        .nav {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 2rem;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 24px;
            font-weight: 800;
            color: var(--primary-blue);
            text-decoration: none;
        }
        
        .logo-icon {
            width: 40px;
            height: 40px;
            background: var(--gradient-primary);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
        
        .nav-links {
            display: flex;
            list-style: none;
            gap: 2rem;
        }
        
        .nav-link {
            text-decoration: none;
            color: #fff;
            font-weight: 500;
            transition: color 0.3s ease;
        }
        
        .nav-link:hover {
          color: gold !important; /* optional hover to match logo */
        }
        .nav-cta {
            display: flex;
            gap: 1rem;
        }
        
        .btn {
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            cursor: pointer;
            border: none;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        
        .btn-primary {
            background: var(--gradient-primary);
            color: white;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 102, 255, 0.3);
        }
        
        .btn-secondary {
            background: transparent;
            color: var(--primary-blue);
            border: 2px solid var(--primary-blue);
        }
        
        .btn-secondary:hover {
            background: var(--primary-blue);
            color: white;
        }
        
        /* Mobile Menu */
        .mobile-menu-btn {
            display: none;
            flex-direction: column;
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px;
        }
        
        .mobile-menu-btn span {
            width: 25px;
            height: 3px;
            background: var(--gray-700);
            margin: 3px 0;
            transition: 0.3s;
        }
        
        .hero {
            /* Remove background image from hero - it will show through from bg-office-wrap */
            background: none ! important;
            padding: 120px 2rem 80px;
            text-align: center;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
        }
        .hero-content {
            position: relative;
            z-index: 2;
            border-radius: 24px;
            padding: 60px 40px;
            margin: 0 auto;
            max-width: 1000px;
        }
        
        .hero-badge {
            display: inline-block;
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.4);
            padding: 8px 16px;
            border-radius: 50px;
            color: white;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 2rem;
            animation: fadeInUp 0.8s ease;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        }
        
        .hero-title {
            font-size: clamp(2.25rem, 5vw, 3.75rem);
            font-weight: 800;
            color: #ffffff ! important;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            margin-bottom: 1.5rem;
            line-height: 1.15;
            animation: fadeInUp 0.8s ease 0.2s both;
        }
        
        .hero-subtitle {
            font-size: 1.3rem;
            color: rgba(255, 255, 255, 0.95) !important;
            text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
            margin-bottom: 2rem;
            max-width: 750px;
            margin-left: auto;
            line-height: 1.8;
            margin-right: auto;
            animation: fadeInUp 0.8s ease 0.4s both;
        }
        
        .hero-cta {
            display: flex;
            gap: 1rem;
            justify-content: center;
            margin-bottom: 3rem;
            animation: fadeInUp 0.8s ease 0.6s both;
            flex-wrap: wrap;
        }
        
        .btn-hero {
            padding: 1rem 2rem;
            font-size: 16px;
            font-weight: 700;
        }
        
        .btn-white {
            background: white;
            color: var(--primary-blue);
        }
        
        .btn-white:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        }
        
        .btn-outline {
            background: transparent;
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.5);
        }
        
        .btn-outline:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: white;
        }
        
        .hero-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);    /* 4 across on desktop */
            gap: 2rem;
            max-width: 800px;
            margin: 0 auto;
            animation: fadeInUp 0.8s ease 0.8s both;
        }
        @media (max-width: 900px) {
            .hero-stats { grid-template-columns: repeat(2, 1fr); }   /* 2x2 on tablet */
        }
        @media (max-width: 480px) {
            .hero-stats { grid-template-columns: 1fr; }              /* stacked on mobile */
        }
        
        .stat-item {
            color: white;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 16px;
            padding: 20px 15px;
            transition: all 0.3s ease;
        }
        .stat-item:hover {
            background: rgba(255, 255, 255, 0.15);
            transform: translateY(-5px);
        }

        
        
        .stat-number {
            font-size: 2.5rem;
            font-weight: 800;
            display: block;
            text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        }

        
        .stat-label {
            font-size: 0.9rem;
            opacity: 0.9;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        }
        
        /* Problem Section */
        .problem {
            padding: 80px 2rem;
            background: var(--gray-50);
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .section-header {
            text-align: center;
            margin-bottom: 4rem;
        }
        
        .section-badge {
            display: inline-block;
            background: var(--primary-blue);
            color: white;
            padding: 6px 16px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 1rem;
        }
        
.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 1rem;
}
        
.section-subtitle {
    font-size: 1.2rem;
    color: rgba(255,255,255,.72);
    max-width: 640px;
    margin: 0 auto;
}
        
        .problems-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }
        
        .problem-card {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            padding: 2rem;
            border-radius: 16px;
            box-shadow: none;
            border: 1px solid rgba(255, 140, 0, 0.45);
            transition: transform 0.3s ease;
        }
        
        .problem-card:hover {
            transform: translateY(-5px);
        }
        
        .problem-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--error-red), #DC2626);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-bottom: 1.5rem;
        }
        
        .problem-title {
            font-size: 1.3rem;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 1rem;
        }
        .problem-desc {
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.7;
        }
        
        /* Solution Section */
        .solution {
            padding: 80px 2rem;
            background: white;
        }
        
        .solution-hero {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            margin-bottom: 5rem;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .solution-content h2 {
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 800;
            color: var(--gray-900);
            margin-bottom: 1.5rem;
            text-align: center;
        }
        
        .solution-content p {
            font-size: 1.2rem;
            color: var(--gray-600);
            margin-bottom: 2rem;
        }
        
        .solution-visual {
            background: var(--gradient-primary);
            border-radius: 20px;
            padding: 3rem;
            text-align: center;
            color: white;
            position: relative;
            overflow: hidden;
        }
        
        .solution-visual::before {
            content: '🤖📞🎯';
            font-size: 4rem;
            display: block;
            margin-bottom: 1rem;
        }
        
        .solution-visual h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }
        
        /* Features Grid */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
        }
        
        .feature-card {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            padding: 2.5rem;
            border-radius: 16px;
            box-shadow: none;
            border: 1px solid rgba(255, 140, 0, 0.45);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-primary);
        }
        
        .feature-card:hover {
            transform: translateY(-8px);
            border-color: rgba(255, 140, 0, 0.85);
            box-shadow: 0 8px 30px rgba(255, 140, 0, 0.2);
        }
        
        .feature-icon {
            width: 70px;
            height: 70px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            margin-bottom: 1.5rem;
        }
        
        .feature-title {
            font-size: 1.4rem;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 1rem;
        }

        .feature-desc {
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.7;
            margin-bottom: 1.5rem;
        }
        
        .feature-benefits {
            list-style: none;
        }
        
        .feature-benefits li {
            color: rgba(255, 255, 255, 0.85);
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
        
        .feature-benefits li::before {
            content: '✓';
            margin-right: 8px;
            font-weight: bold;
        }
        
        /* Pricing Section */
        .pricing {
            padding: 80px 2rem;
            background: var(--gray-50);
        }
        
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }
        
        .pricing-card {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: 20px;
            padding: 2.5rem;
            box-shadow: none;
            border: 1px solid rgba(255, 140, 0, 0.45);
            transition: all 0.3s ease;
            position: relative;
        }
        
        .pricing-card.featured {
            border-color: rgba(255, 140, 0, 0.85);
            transform: scale(1.05);
            box-shadow: 0 8px 30px rgba(255, 140, 0, 0.2);
        }
        
        .pricing-card.featured::before {
            content: '🔥 MOST POPULAR';
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--primary-blue);
            color: white;
            padding: 6px 16px;
            border-radius: 50px;
            font-size: 12px;
            font-weight: 700;
        }
        
        .plan-name {
            font-size: 1.4rem;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 0.5rem;
        }
        
        .plan-price {
            font-size: 3rem;
            font-weight: 900;
            color: var(--primary-blue);
            margin-bottom: 0.5rem;
        }
        
        .plan-price .currency {
            font-size: 1.5rem;
        }
        
        .plan-period {
            color: rgba(255, 255, 255, 0.65);
            margin-bottom: 2rem;
        }
        .plan-features {
            list-style: none;
            margin-bottom: 2rem;
        }
        
        .plan-features li {
            padding: 0.75rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            color: rgba(255, 255, 255, 0.85);
        }
        
        .plan-features li::before {
            content: '✓';
            color: var(--success-green);
            font-weight: bold;
            margin-right: 12px;
            width: 16px;
        }
        
        .plan-cta {
            width: 100%;
            padding: 1rem;
            font-size: 16px;
            font-weight: 700;
        }
        
        /* Testimonials */
        .testimonials {
            padding: 80px 2rem;
            background: white;
        }
        
        .testimonials-grid {
                    display: flex;
                    gap: 2rem;
                    overflow-x: auto;
                    scroll-snap-type: x mandatory;
                    -webkit-overflow-scrolling: touch;
                    padding-bottom: 20px;
                    scrollbar-width: thin;
                    scrollbar-color: rgba(255,255,255,0.3) transparent;
                }

                .testimonials-grid::-webkit-scrollbar {
                    height: 8px;
                }

                .testimonials-grid::-webkit-scrollbar-track {
                    background: rgba(255,255,255,0.1);
                    border-radius: 4px;
                }

                .testimonials-grid::-webkit-scrollbar-thumb {
                    background: rgba(255,255,255,0.3);
                    border-radius: 4px;
                }

                .testimonials-grid::-webkit-scrollbar-thumb:hover {
                    background: rgba(255,255,255,0.5);
                }

                .testimonial {
                    min-width: 350px;
                    max-width: 400px;
                    flex-shrink: 0;
                    scroll-snap-align: start;
                }

                .reviews-cta {
                    text-align: center;
                    margin-top: 3rem;
                }
        
        .testimonial {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 140, 0, 0.45);
            border-radius: 16px;
            padding: 2rem;
            position: relative;
        }
        
        .testimonial::before {
            content: '"';
            font-size: 4rem;
            color: var(--primary-blue);
            position: absolute;
            top: 1rem;
            left: 2rem;
            line-height: 1;
        }
        
        .testimonial-content {
            margin-top: 2rem;
            font-style: italic;
            color: rgba(255, 255, 255, 0.85);
            margin-bottom: 2rem;
        }

        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .author-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--gradient-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }
        
        .author-info h4 {
            font-weight: 600;
            color: #ffffff;
        }

        .author-info p {
            color: rgba(255, 255, 255, 0.65);
            font-size: 0.9rem;
        }
        
        .cta {
            padding: 80px 2rem;
            background: transparent;           /* no solid/gradient background */
            text-align: center;
            color: white;                      /* keep white text on top of photo */
            border-top: 1px solid rgba(255, 255, 255, 0.2);   /* optional */
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);/* optional */
        }
        
        .cta h2 {
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 800;
            margin-bottom: 1rem;
        }
        
        .cta p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }
        
        .cta-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        /* Footer */
        .footer {
            background: var(--gray-900);
            color: white;
            padding: 60px 2rem 20px;
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 3rem;
            margin-bottom: 3rem;
        }

        .footer-brand h3 {
            font-size: 1.5rem;
            font-weight: 800;
            margin-bottom: 1rem;
            color: var(--primary-blue);
        }

        .footer-brand p {
            color: var(--gray-400);
            margin-bottom: 2rem;
            line-height: 1.6;
        }

        .footer-section h4 {
            font-weight: 600;
            margin-bottom: 1rem;
            color: white;
        }

        .footer-section a {
            color: var(--gray-400);
            text-decoration: none;
            display: block;
            margin-bottom: 0.5rem;
            transition: color 0.3s ease;
        }

        .footer-section a:hover {
            color: var(--primary-blue);
        }

        /* Centered Support Links */
        .footer-support {
            border-top: 1px solid var(--gray-700);
            padding: 2rem 0 1rem 0;
            text-align: center;
        }

        .support-links {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 3rem;
            margin-bottom: 2rem;
        }

        .support-links a {
            color: white;
            text-decoration: underline;
            text-underline-offset: 4px;
            text-decoration-thickness: 1px;
            font-weight: 500;
            transition: all 0.3s ease;
            white-space: nowrap;
        }

        .support-links a:hover {
            color: var(--primary-blue);
            text-decoration-color: var(--primary-blue);
        }

        .footer-bottom {
            text-align: center;
            color: var(--gray-500);
            font-size: 0.9rem;
            padding-top: 1rem;
            border-top: 1px solid var(--gray-800);
        }
        /* Mobile responsive fixes */
        @media (max-width: 768px) {
          .bg-office-wrap {
            background-attachment: scroll !important;
            background-image: image-set(
              url('../assets/team-connect-main-office-mobile-900x1600.avif') type('image/avif'),
              url('../assets/team-connect-main-office.webp') type('image/webp')
            ) !important;
            background-size: cover !important;
            background-position: center 20% !important;
          }

          .bg-office-wrap::before {
            background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5)) !important;
          }

          .bg-office-wrap .benefit-item,
          .bg-office-wrap .number-card,
          .bg-office-wrap .diversion-option,
          .bg-office-wrap .feature-card,
          .bg-office-wrap .problem-card,
          .bg-office-wrap .pricing-card,
          .bg-office-wrap .testimonial,
          .bg-office-wrap .addon-card,
          .bg-office-wrap .staff-card,
          .bg-office-wrap .department-card,
          .bg-office-wrap .feature-item,
          .bg-office-wrap .staff-cta,
          .bg-office-wrap .stat-card,
          .bg-office-wrap .summary-stat,
          .bg-office-wrap .number-example {
            background: rgba(255, 255, 255, 0.70) !important;
            backdrop-filter: blur(10px) saturate(110%);
            -webkit-backdrop-filter: blur(10px) saturate(110%);
          }
        }        /* Mobile Footer */
        @media (max-width: 768px) {
            .footer-content {
                grid-template-columns: 1fr;
                text-align: center;
                gap: 2rem;
            }
            
            .support-links {
                flex-direction: column;
                gap: 1.5rem;
            }
        }
        
        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            .nav-links,
            .nav-cta {
                display: none !important;
            }
            
            .mobile-menu-btn {
                display: flex;
            }
            .burger-menu {
                display: block;
            }
            
            .hero-cta {
                flex-direction: column;
                align-items: center;
            }
            
            .solution-hero {
                grid-template-columns: 1fr;
                text-align: center;
            }
            
            .footer-content {
                grid-template-columns: 1fr;
                text-align: center;
            }
        }
        
        /* Loading Animation */
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid #f3f3f3;
            border-top: 2px solid var(--primary-blue);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        /* Fixed CSS - BURGER ON THE RIGHT */
        .burger-menu {
            position: fixed;
            top: calc(env(safe-area-inset-top) + 20px);
            right: 20px;
            z-index: 1001;
            background: var(--white);
            border: 1px solid var(--gray-200);
            border-radius: 12px;
            padding: 12px;
            cursor: pointer;
            box-shadow: var(--shadow-md);
            transition: transform 0.2s ease;
            display: block; /* <— always show */
        }

        .burger-menu:hover {
            transform: scale(1.1);
        }

        .burger-icon {
            width: 24px;
            height: 24px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .burger-line {
            width: 100%;
            height: 3px;
            background: var(--gray-700);
            border-radius: 2px;
            transition: all 0.3s ease;
        }

        .burger-menu.active .burger-line:nth-child(1) {
            transform: rotate(45deg) translate(5px, 5px);
        }

        .burger-menu.active .burger-line:nth-child(2) {
            opacity: 0;
        }

        .burger-menu.active .burger-line:nth-child(3) {
            transform: rotate(-45deg) translate(7px, -6px);
        }

        /* Navigation Sidebar */
        .nav-sidebar {
            position: fixed;
            top: 0;
            right: -300px;
            width: 300px;
            height: 100vh;
            background: var(--white);
            border-left: 1px solid var(--gray-200);
            z-index: 1000;
            transition: right 0.3s ease;
            
            /* ✅ ENHANCED SCROLL HANDLING */
            overflow-y: auto ! important;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
            scrollbar-width: thin; /* Firefox */
            scrollbar-color: var(--gray-400) transparent; /* Firefox */
            
            padding-top: calc(env(safe-area-inset-top) + 20px);
            box-shadow: var(--shadow-xl);
        }
        /* ✅ CUSTOM SCROLLBAR FOR BURGER MENU */
        .nav-sidebar::-webkit-scrollbar {
            width: 6px;
        }

        .nav-sidebar::-webkit-scrollbar-track {
            background: transparent;
        }

        .nav-sidebar::-webkit-scrollbar-thumb {
            background: var(--gray-400);
            border-radius: 3px;
        }

        .nav-sidebar::-webkit-scrollbar-thumb:hover {
            background: var(--gray-500);
        }
        

        .nav-sidebar.active {
            right: 0; /* CHANGED: left to right */
        }

        .nav-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .nav-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .nav-header {
            padding: 20px;
            border-bottom: 1px solid var(--gray-200);
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .nav-logo {
            width: 40px;
            height: 40px;
            background: var(--gradient-primary);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            color: white;
            font-size: 16px;
        }

        .nav-title {
            font-size: 1.2em;
            font-weight: 600;
            color: var(--gray-900);
        }

        .nav-section {
            padding: 20px 0;
            border-bottom: 1px solid var(--gray-200);
        }

        .nav-section:last-child {
            border-bottom: none;
        }

        .nav-section-title {
            padding: 0 20px 12px 20px;
            font-size: 0.8em;
            color: var(--gray-500);
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        .nav-item {
            display: flex;
            align-items: center;
            padding: 12px 20px;
            color: var(--gray-700);
            text-decoration: none;
            transition: background-color 0.2s ease;
            cursor: pointer;
        }

        .nav-item:hover {
            background: var(--gray-50);
            color: var(--primary-blue);
        }

        .nav-item.active {
            background: rgba(0, 102, 255, 0.1);
            color: var(--primary-blue);
            border-left: 3px solid var(--primary-blue); /* CHANGED: border-right to border-left */
        }

        .nav-item-icon {
            font-size: 1.2em;
            margin-right: 12px;
            width: 24px;
            text-align: center;
        }

        .nav-item-text {
            font-weight: 500;
        }
        /* Enhanced Pricing Styles */
        .pricing-card {
            position: relative;
            overflow: visible;
        }

        .plan-ribbon {
            position: absolute;
            top: -10px;
            left: 20px;
            background: linear-gradient(45deg, #FF6B6B, #FF8E53);
            color: white;
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 0.8em;
            font-weight: 600;
            box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
        }

        .plan-ribbon.popular {
            background: linear-gradient(45deg, #667eea, #764ba2);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }

        .plan-ribbon.enterprise {
            background: linear-gradient(45deg, #f093fb, #f5576c);
            box-shadow: 0 4px 12px rgba(240, 147, 251, 0.4);
        }

        .plan-highlight {
            text-align: center;
            margin: 20px 0;
        }

        .highlight-badge {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 12px 24px;
            border-radius: 25px;
            font-weight: 700;
            font-size: 1.1em;
            display: inline-block;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }

        .highlight-badge.premium {
            background: linear-gradient(135deg, #f093fb, #f5576c);
            box-shadow: 0 4px 15px rgba(240, 147, 251, 0.3);
        }

        .highlight-badge.enterprise {
            background: linear-gradient(135deg, #ffecd2, #fcb69f);
            color: #333;
            box-shadow: 0 4px 15px rgba(255, 236, 210, 0.4);
        }

        .plan-note {
            text-align: center;
            font-size: 0.85em;
            color: var(--text-secondary);
            margin-top: 15px;
            font-style: italic;
        }

        /* Pricing Add-ons */
        .pricing-addons {
            margin-top: 60px;
            text-align: center;
        }

        .pricing-addons h3 {
            font-size: 2em;
            margin-bottom: 30px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .addons-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            max-width: 800px;
            margin: 0 auto;
        }

        .addon-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .addon-icon {
            font-size: 3em;
            margin-bottom: 15px;
        }

        .addon-card h4 {
            font-size: 1.5em;
            margin-bottom: 10px;
            color: var(--primary-color);
        }

        .addon-options {
            margin-top: 20px;
        }

        .addon-option {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background: var(--background-secondary);
            border-radius: 12px;
            margin-bottom: 10px;
            border: 2px solid transparent;
            transition: all 0.3s ease;
        }

        .addon-option:hover {
            border-color: var(--primary-color);
            transform: translateY(-2px);
        }

        .option-amount {
            font-weight: 600;
            color: var(--text-primary);
        }

        .option-price {
            font-size: 1.2em;
            font-weight: 700;
            color: var(--primary-color);
        }

        /* AI Staff Section */
        .ai-staff {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 100px 0;
            position: relative;
            overflow: hidden;
        }

        .ai-staff::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
            pointer-events: none;
        }

        .ai-staff .container {
            position: relative;
            z-index: 1;
        }

        .ai-staff .section-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .ai-staff .section-title {
            color: white;
            font-size: 3.5em;
            margin-bottom: 20px;
        }

        .ai-staff .section-subtitle {
            color: rgba(255, 255, 255, 0.9);
            font-size: 1.3em;
            max-width: 800px;
            margin: 0 auto;
        }

        /* Staff Stats */
        .staff-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            margin-bottom: 80px;
        }
        @media (max-width: 900px) {
            .staff-stats { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 480px) {
            .staff-stats { grid-template-columns: 1fr; }
        }
        .stat-card {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 30px;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        }

        .stat-card .stat-icon {
            font-size: 3em;
            margin-bottom: 15px;
        }

        .stat-card .stat-number {
            font-size: 2.5em;
            font-weight: 800;
            display: block;
            margin-bottom: 10px;
        }

        .stat-card .stat-label {
            font-size: 1.1em;
            opacity: 0.9;
        }

        /* Featured Staff */
        .featured-staff {
            margin-bottom: 80px;
        }

        .staff-section-title {
            text-align: center;
            font-size: 2.5em;
            margin-bottom: 40px;
            color: white;
        }

        .staff-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .staff-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-radius: 24px;
            padding: 30px;
            text-align: center;
            position: relative;
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .staff-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        }

        .staff-card.premium {
            border: 2px solid #f093fb;
            background: linear-gradient(135deg, rgba(240, 147, 251, 0.1), rgba(245, 87, 108, 0.05));
        }

        .staff-badge {
            position: absolute;
            top: -10px;
            right: 20px;
            background: linear-gradient(45deg, #f093fb, #f5576c);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.8em;
            font-weight: 600;
            box-shadow: 0 4px 12px rgba(240, 147, 251, 0.3);
        }

        .staff-photo {
            margin-bottom: 20px;
        }

        .staff-photo img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 4px solid rgba(102, 126, 234, 0.3);
            object-fit: cover;
        }

        .staff-info {
            color: var(--text-primary);
        }

        .staff-name {
            font-size: 1.4em;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .staff-title {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 15px;
        }

        .staff-specialties {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
            margin-bottom: 20px;
        }

        .specialty {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 0.8em;
            font-weight: 600;
        }

        .staff-stats-mini {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
        }

        .mini-stat {
            text-align: center;
        }

        .mini-number {
            display: block;
            font-size: 1.2em;
            font-weight: 700;
            color: var(--primary-color);
        }

        .mini-label {
            font-size: 0.8em;
            color: var(--text-secondary);
        }

        /* Staff Departments */
        .staff-departments {
            margin-bottom: 80px;
        }

        .departments-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 20px;
            box-sizing: border-box;
        }
        
        @media (max-width: 900px) {
            .departments-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 600px) {
            .departments-grid { grid-template-columns: 1fr; }
        }

        .department-card {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 30px;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }

        .department-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        }

        .department-card.premium {
            border: 2px solid rgba(240, 147, 251, 0.5);
            background: rgba(240, 147, 251, 0.1);
        }

        .dept-icon {
            font-size: 3em;
            margin-bottom: 20px;
        }

        .dept-name {
            font-size: 1.3em;
            font-weight: 700;
            margin-bottom: 15px;
            color: white;
        }

        .dept-desc {
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 20px;
            line-height: 1.5;
        }

        .dept-stats {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            gap: 10px;
        }

        .dept-stat {
            background: rgba(255, 255, 255, 0.2);
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.9em;
            font-weight: 600;
        }

        /* Staff Features */
        .staff-features {
            margin-bottom: 80px;
        }

        .features-list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 20px;
            box-sizing: border-box;
        }
        @media (max-width: 900px) {
            .features-list { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 600px) {
            .features-list { grid-template-columns: 1fr; }
        }

        .feature-item {
            display: flex;
            align-items: flex-start;
            gap: 20px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 25px;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .feature-item .feature-icon {
            font-size: 2.5em;
            flex-shrink: 0;
        }

        .feature-content h4 {
            font-size: 1.2em;
            font-weight: 700;
            margin-bottom: 8px;
            color: white;
        }

        .feature-content p {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.5;
        }

        /* Staff CTA */
        .staff-cta {
            text-align: center;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border-radius: 24px;
            padding: 60px 40px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .staff-cta h3 {
            font-size: 2.5em;
            margin-bottom: 20px;
            color: white;
        }

        .staff-cta p {
            font-size: 1.2em;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 40px;
        }
        /* Enhanced Add-ons Styling */
        .pricing-addons {
            margin-top: 80px;
            padding-top: 60px;
            border-top: 2px solid rgba(102, 126, 234, 0.2);
        }

        .addons-header {
            text-align: center;
            margin-bottom: 50px;
        }

        .addons-header h3 {
            font-size: 2.5em;
            margin-bottom: 15px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .addons-header p {
            font-size: 1.2em;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 20px;
        }

        .usage-display {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 15px 30px;
            border-radius: 25px;
            display: inline-block;
            font-weight: 600;
            margin-top: 15px;
        }

        /* Voice Add-ons Grid */
        .voice-addons {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }

        /* Minutes Add-ons Grid */
        .minutes-addons {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Numbers Add-ons Grid */
        .numbers-addons {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }

        /* Enhanced Addon Cards */
        .addon-card {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: 20px;
            padding: 30px;
            box-shadow: none;
            border: 1px solid rgba(255, 140, 0, 0.45);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .addon-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 30px rgba(255, 140, 0, 0.2);
            border-color: rgba(255, 140, 0, 0.85);
        }

        .addon-card.popular {
            border-color: rgba(255, 140, 0, 0.6);
            background: rgba(255, 255, 255, 0.08);
        }

        .addon-card.value {
            border-color: rgba(255, 140, 0, 0.6);
            background: rgba(255, 255, 255, 0.08);
        }

        .addon-card.enterprise {
            border-color: rgba(255, 140, 0, 0.6);
            background: rgba(255, 255, 255, 0.08);
        }

        /* Addon Ribbons */
        .addon-ribbon {
            position: absolute;
            top: 15px;
            right: -35px;
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            padding: 8px 40px;
            font-size: 0.8em;
            font-weight: 600;
            transform: rotate(45deg);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        }

        .addon-card.value .addon-ribbon {
            background: linear-gradient(45deg, #f093fb, #f5576c);
        }

        .addon-card.enterprise .addon-ribbon {
            background: linear-gradient(45deg, #ffecd2, #fcb69f);
            color: #333;
        }

        /* Addon Headers */
        .addon-header {
            text-align: center;
            margin-bottom: 15px;
        }

        .addon-header h4 {
            font-size: 1.4em;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 10px;
        }

        .addon-price {
            font-size: 2.2em;
            font-weight: 800;
            color: var(--primary-color);
            margin-bottom: 5px;
        }

        .addon-subtitle {
            color: rgba(255, 255, 255, 0.75);
            font-size: 1em;
            margin-bottom: 20px;
            text-align: center;
        }

        /* Savings Badge */
        .savings-badge {
            background: linear-gradient(45deg, #34C759, #30A14E);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.9em;
            font-weight: 600;
            text-align: center;
            margin-bottom: 20px;
            box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3);
        }

        /* Addon Features */
        .addon-features {
            list-style: none;
            padding: 0;
            margin-bottom: 25px;
        }

        .addon-features li {
            padding: 8px 0;
            color: rgba(255, 255, 255, 0.85);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            font-size: 0.95em;
        }

        .addon-features li:last-child {
            border-bottom: none;
        }

        /* Addon Buttons */
        .addon-btn {
            width: 100%;
            padding: 14px 20px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 1em;
            transition: all 0.2s ease;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }

        .addon-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        /* Addon Info */
        .addon-info {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 140, 0, 0.45);
            border-radius: 16px;
            padding: 25px;
            margin-top: 40px;
        }

        .addon-info p {
            margin-bottom: 15px;
            color: rgba(255, 255, 255, 0.85);
            font-size: 0.95em;
            line-height: 1.6;
        }

        .addon-info p:last-child {
            margin-bottom: 0;
        }

        /* Enhanced Animations */
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .addon-card.popular:hover {
            animation: pulse 2s infinite;
        }

        /* Special Effects */
        .addon-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }

        .addon-card:hover::before {
            left: 100%;
        }

        .staff-intro {
            text-align: center;
            font-size: 1.1em;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 40px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Carousel Container */
        .staff-carousel-container {
            position: relative;
            margin-bottom: 40px;
            padding: 0 60px;
        }

        .staff-carousel {
            display: flex;
            gap: 30px;
            overflow-x: auto;
            scroll-behavior: smooth;
            padding: 20px 0;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE and Edge */
        }

        .staff-carousel::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }

        /* Update staff-card for carousel */
        .staff-carousel .staff-card {
            flex: 0 0 280px; /* Fixed width for consistent carousel */
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-radius: 24px;
            padding: 30px;
            text-align: center;
            position: relative;
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.2);
            height: 420px; /* Fixed height for consistency */
        }

        .staff-carousel .staff-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        }

        /* Carousel Navigation Buttons */
        .carousel-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 24px;
            font-weight: bold;
            color: var(--primary-color);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            z-index: 10;
        }

        .carousel-btn:hover {
            background: rgba(255, 255, 255, 1);
            transform: translateY(-50%) scale(1.1);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        }

        .carousel-btn-prev {
            left: 10px;
        }

        .carousel-btn-next {
            right: 10px;
        }

        /* Carousel Indicators */
        .carousel-indicators {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 40px;
        }

        .indicator-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .indicator-dot.active {
            background: rgba(255, 255, 255, 0.8);
            transform: scale(1.2);
        }

        /* Staff Summary */
        .staff-summary {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        .summary-stat {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 25px;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .summary-number {
            display: block;
            font-size: 2.5em;
            font-weight: 800;
            color: white;
            margin-bottom: 10px;
        }

        .summary-label {
            color: rgba(255, 255, 255, 0.9);
            font-size: 1em;
            font-weight: 500;
        }

        /* Enhanced Staff Badges */
        .staff-badge {
            position: absolute;
            top: -10px;
            right: 20px;
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.8em;
            font-weight: 600;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .staff-card.premium .staff-badge {
            background: linear-gradient(45deg, #f093fb, #f5576c);
        }

        .staff-card:not(.premium) .staff-badge {
            background: linear-gradient(45deg, #667eea, #764ba2);
        }

        /* Enhanced Addon Button Styles - COMPLETE FIX */
        .addon-btn {
            width: 100%;
            padding: 14px 20px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 1em;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            text-align: center;
            cursor: pointer;
            border: 2px solid transparent;
            position: relative;
            overflow: hidden;
            /* FORCE VISIBILITY */
            background: #0066FF !important;
            color: white !important;
            box-shadow: 0 4px 12px rgba(0, 102, 255, 0.2);
        }

        /* Primary addon buttons */
        .btn-primary.addon-btn,
        .addon-btn.btn-primary {
            background: var(--gradient-primary) !important;
            color: white !important;
            border: 2px solid var(--primary-blue);
        }

        .btn-primary.addon-btn:hover,
        .addon-btn.btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 102, 255, 0.4) !important;
            background: linear-gradient(135deg, #0052CC 0%, #5048E5 100%) !important;
        }

        /* Outline addon buttons */
        .btn-outline.addon-btn,
        .addon-btn.btn-outline {
            background: white !important;
            color: var(--primary-blue) !important;
            border: 2px solid var(--primary-blue) !important;
            box-shadow: 0 4px 12px rgba(0, 102, 255, 0.1);
        }

        .btn-outline.addon-btn:hover,
        .addon-btn.btn-outline:hover {
            background: var(--primary-blue) !important;
            color: white !important;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 102, 255, 0.3) !important;
        }

        /* Secondary addon buttons */
        .btn-secondary.addon-btn,
        .addon-btn.btn-secondary {
            background: var(--gray-100) !important;
            color: var(--gray-800) !important;
            border: 2px solid var(--gray-300);
        }

        .btn-secondary.addon-btn:hover,
        .addon-btn.btn-secondary:hover {
            background: var(--gray-200) !important;
            border-color: var(--gray-400);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
        }

        /* Force button text visibility */
        .addon-btn,
        .addon-btn * {
            color: inherit !important;
            text-decoration: none !important;
        }

        /* Fix for specific addon button containers */
        .voice-addons .addon-btn,
        .minutes-addons .addon-btn,
        .numbers-addons .addon-btn {
            background: var(--primary-blue) !important;
            color: white !important;
            border: 2px solid var(--primary-blue) !important;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: none;
        }

        /* Hover states for all addon buttons */
        .voice-addons .addon-btn:hover,
        .minutes-addons .addon-btn:hover,
        .numbers-addons .addon-btn:hover {
            background: #0052CC !important;
            color: white !important;
            transform: translateY(-3px) !important;
            box-shadow: 0 12px 30px rgba(0, 102, 255, 0.4) !important;
        }

        /* Special styling for popular buttons */
        .addon-card.popular .addon-btn {
            background: var(--gradient-primary) !important;
            color: white !important;
            border: 2px solid #667eea !important;
            font-weight: 700;
        }

        .addon-card.popular .addon-btn:hover {
            background: linear-gradient(135deg, #5048E5 0%, #6366F1 100%) !important;
            box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4) !important;
        }

        /* Fix for value buttons */
        .addon-card.value .addon-btn {
            background: linear-gradient(135deg, #f093fb, #f5576c) !important;
            color: white !important;
            border: 2px solid #f093fb !important;
        }

        .addon-card.value .addon-btn:hover {
            background: linear-gradient(135deg, #e084fc, #f4476b) !important;
            box-shadow: 0 15px 35px rgba(240, 147, 251, 0.4) !important;
        }

        /* Enterprise buttons */
        .addon-card.enterprise .addon-btn {
            background: linear-gradient(135deg, #ffecd2, #fcb69f) !important;
            color: #333 !important;
            border: 2px solid #ffecd2 !important;
            font-weight: 700;
        }

        .addon-card.enterprise .addon-btn:hover {
            background: linear-gradient(135deg, #ffd9a0, #fab890) !important;
            color: #222 !important;
            box-shadow: 0 15px 35px rgba(255, 236, 210, 0.4) !important;
        }

        /* Button loading states */
        .addon-btn.loading {
            opacity: 0.7;
            cursor: not-allowed;
            pointer-events: none;
        }

        .addon-btn.loading::after {
            content: '';
            width: 16px;
            height: 16px;
            border: 2px solid transparent;
            border-top: 2px solid currentColor;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            display: inline-block;
            margin-left: 8px;
        }

        /* Focus states for accessibility */
        .addon-btn:focus {
            outline: 3px solid rgba(0, 102, 255, 0.3);
            outline-offset: 2px;
        }
        /* =========================
           MANCHESTER NUMBERS SECTION
           ========================= */
        .manchester-numbers {
            padding: 80px 0;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            position: relative;
            overflow: hidden;
        }

        .manchester-numbers::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
        }

        .manchester-numbers .container {
            position: relative;
            z-index: 2;
        }

        /* Manchester Benefits */
        .manchester-benefits {
            margin: 60px 0;
        }

        .benefit-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-top: 40px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .benefit-item {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            padding: 20px 15px;
            border-radius: 16px;
            text-align: center;
            box-shadow: none;
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 140, 0, 0.45);
            min-height: 200px;
        }

        .benefit-item h4 {
            font-size: 1.1em;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 10px;
        }

        .benefit-item p {
            color: rgba(255, 255, 255, 0.75);
            line-height: 1.5;
            font-size: 0.9em;
        }
        .benefit-item:hover {
            transform: translateY(-5px);
            border-color: rgba(255, 140, 0, 0.85);
            box-shadow: 0 8px 30px rgba(255, 140, 0, 0.2);
        }

        .benefit-icon {
            font-size: 2.5em; /* Smaller icon */
            margin-bottom: 15px; /* Reduced margin */
            display: block;
        }

        .benefit-icon {
            font-size: 3em;
            margin-bottom: 20px;
            display: block;
        }


        /* Number Options */
        .number-options {
            margin: 60px 0;
        }

        .options-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

        .number-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-radius: 24px;
            padding: 40px 30px;
            box-shadow: var(--shadow-heavy);
            transition: all 0.3s ease;
            position: relative;
            border: 2px solid transparent;
        }

        .number-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        }

        .number-card.premium {
            border-color: var(--premium-color);
            background: linear-gradient(135deg, rgba(107, 70, 193, 0.1), rgba(255, 255, 255, 0.95));
        }

        .number-card.bundle {
            border-color: var(--success-color);
            background: linear-gradient(135deg, rgba(52, 199, 89, 0.1), rgba(255, 255, 255, 0.95));
        }

        .number-ribbon {
            position: absolute;
            top: -10px;
            right: 20px;
            background: var(--premium-color);
            color: white;
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 0.8em;
            font-weight: 700;
            box-shadow: var(--shadow-medium);
        }

        .number-ribbon.popular {
            background: linear-gradient(45deg, #FF6B6B, #FF8E53);
        }

        .number-ribbon.value {
            background: var(--success-color);
        }

        .number-header {
            text-align: center;
            margin-bottom: 25px;
        }

        .number-header h4 {
            font-size: 1.4em;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 15px;
        }

        .number-price {
            font-size: 2.5em;
            font-weight: 800;
            color: var(--premium-color);
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: 5px;
        }

        .number-price span {
            font-size: 0.4em;
            color: rgba(255,255,255,0.65);
            font-weight: 500;
        }

        .number-example {
            background: rgba(255,255,255,0.1);
            padding: 15px;
            border-radius: 12px;
            text-align: center;
            font-size: 1.3em;
            font-weight: 700;
            color: #ffffff;
            margin: 20px 0;
            font-family: 'Courier New', monospace;
            letter-spacing: 1px;
        }

        .number-features {
            list-style: none;
            margin: 25px 0;
        }

        .number-features li {
            padding: 8px 0;
            color: rgba(255,255,255,0.85);
            font-size: 0.95em;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .number-btn {
            width: 100%;
            padding: 16px 24px;
            font-weight: 600;
            font-size: 1em;
            border-radius: 12px;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }

        .diversion-options {
            margin: 60px 0;
            padding: 50px;
            border-radius: 24px;
        }

        .diversion-options h3 {
            text-align: center;
            font-size: 2em;
            font-weight: 700;
            color: white;
            margin-bottom: 40px;
        }

        .diversion-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
        }
        @media (max-width: 1024px) {
            .diversion-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 600px) {
            .diversion-grid { grid-template-columns: 1fr; }
        }
        .diversion-option {
            background: rgba(255, 255, 255, 0.08);
            padding: 30px;
            border-radius: 16px;
            text-align: center;
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.12);
        }

        .diversion-option:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-medium);
            border-color: var(--primary-color);
        }

        .option-icon {
            font-size: 2.5em;
            margin-bottom: 20px;
            display: block;
        }

        .diversion-option h4 {
            font-size: 1.2em;
            font-weight: 700;
            color: white;
            margin-bottom: 15px;
        }

        .diversion-option p {
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.5;
            font-size: 0.95em;
        }

        .manchester-cta {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 140, 0, 0.45);
            border-radius: 24px;
            padding: 40px 30px;
            text-align: center;
            max-width: 700px;
            margin: 60px auto 0;
        }
        .manchester-cta h3 {
            font-size: 2.2em;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 20px;
        }

        .manchester-cta p {
            font-size: 1.2em;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 40px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .cta-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }
        /* Add these styles to your existing CSS */

        .number-card.business {
            border: 2px solid #3498db;
            background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%);
        }

        .number-card.business .number-ribbon {
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
        }

        .number-card.enterprise {
            border: 2px solid #9b59b6;
            background: linear-gradient(135deg, #f8f9fa 0%, #f3e5f5 100%);
            box-shadow: 0 8px 25px rgba(155, 89, 182, 0.2);
        }

        .number-card.enterprise .number-ribbon {
            background: linear-gradient(135deg, #9b59b6, #8e44ad);
            color: white;
            font-weight: 600;
        }

        .number-card.enterprise .number-header h4 {
            color: #8e44ad;
            font-weight: 600;
        }

        .number-card.business .number-header h4 {
            color: #2980b9;
            font-weight: 600;
        }
        .bg-office-wrap {
          /* keep desktop styles as-is, but stop applying the background on the element
             so iOS can use a fixed pseudo-element instead */
          background: none !important;
          position: relative;
          isolation: isolate;
        }

        .bg-office-wrap::before {
          content: "";
          position: fixed !important;
          inset: 0 !important;
          z-index: -1;
          /* if you already set a gradient earlier, that's fine — this keeps it fixed */
        }
        .bg-office-wrap::after {
          content: "";
          position: fixed;
          inset: 0;
          z-index: -2;
          background: url('../assets/team-connect-main-office.webp') center top / cover no-repeat;
          will-change: transform;
        }
        .bg-office-wrap .solution .solution-content h2 {
          color: #ffffff !important;
          text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
        }
        .bg-office-wrap .solution .solution-content p {
          color: rgba(255, 255, 255, 0.92) !important;
          text-shadow: 0 1px 6px rgba(0, 0, 0, 0.30);
        }
        /* Make section backgrounds transparent within the wrapper so photo shows through */
        .bg-office-wrap .manchester-numbers,
        .bg-office-wrap .problem,
        .bg-office-wrap .solution,
        .bg-office-wrap .pricing,
        .bg-office-wrap .testimonials,
        .bg-office-wrap .ai-staff {
          background: transparent !important;
        }

        /* Remove any previous section-specific overlays within the wrapper */
        .bg-office-wrap .manchester-numbers::before {
          content: none !important;
        }

        /* Ensure content sits above overlay */
        .bg-office-wrap .container {
          position: relative;
          z-index: 1;
        }

        /* Headings readable on photo */
        .bg-office-wrap .section-title {
          color: #ffffff;
          text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
        }
        .bg-office-wrap .section-subtitle {
          color: rgba(255, 255, 255, 0.9);
          text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        }
        .bg-office-wrap .section-badge {
          background: rgba(0, 102, 255, 0.85);
          border: 1px solid rgba(255, 255, 255, 0.2);
        }

        /* Glassmorphism for all cards so the image shows through */
        .bg-office-wrap .benefit-item,
        .bg-office-wrap .number-card,
        .bg-office-wrap .diversion-option,
        .bg-office-wrap .manchester-cta,
        .bg-office-wrap .feature-card,
        .bg-office-wrap .problem-card,
        .bg-office-wrap .pricing-card,
        .bg-office-wrap .testimonial,
        .bg-office-wrap .addon-card,
        .bg-office-wrap .staff-card,
        .bg-office-wrap .department-card,
        .bg-office-wrap .feature-item,
        .bg-office-wrap .staff-cta,
        .bg-office-wrap .stat-card,
        .bg-office-wrap .summary-stat,
        .bg-office-wrap .number-example {
          background: rgba(255, 255, 255, 0.08) !important;
          border: 1px solid rgba(255, 140, 0, 0.45) !important;
          backdrop-filter: blur(12px) saturate(120%);
          -webkit-backdrop-filter: blur(12px) saturate(120%);
          color: #ffffff;
          box-shadow: none;
        }

        /* Badges/ribbons still pop over glass */
        .bg-office-wrap .number-ribbon,
        .bg-office-wrap .plan-ribbon,
        .bg-office-wrap .addon-ribbon {
          box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
        }
        .logo-img {
          height: 40px;      /* keeps logo same height as old icon */
          width: auto;
          border-radius: 6px; /* optional, matches style */
          display: block;
        }
        /* Dropdown menu adjustments */
        .dropdown-menu {
          display: none;
          position: absolute;
          background: #fff;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          list-style: none;
          margin: 0;
          padding: 0;
          min-width: 180px;
          z-index: 1000;

          /* ✅ force it to stay within viewport */
          right: 0;       /* aligns dropdown to the right edge of parent */
          left: auto;     /* cancels default left alignment */
          max-width: 95vw; /* prevents overflow on very small screens */
          overflow-wrap: break-word;
        }

        .dropdown-menu li {
          border-bottom: 1px solid #eee;
        }

        .dropdown-menu li a {
          display: block;
          padding: 10px 15px;
          color: #333;
          text-decoration: none;
          white-space: nowrap; /* stops awkward wrapping */
        }

        .dropdown-menu li a:hover {
          background: #f5f5f5;
        }

        .dropdown:hover .dropdown-menu {
          display: block;
        }
        /* Footer social links */
        .social-links {
          margin-top: 1rem;
          display: flex;
          gap: 12px;
          align-items: center;
          flex-wrap: wrap;
        }

        .social-link {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 38px;
          height: 38px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.08);
          border: 1px solid rgba(255, 255, 255, 0.15);
          transition: all 0.2s ease;
        }

        .social-link:hover {
          background: rgba(255, 255, 255, 0.14);
          border-color: var(--primary-blue);
          transform: translateY(-2px);
          box-shadow: 0 6px 16px rgba(0,0,0,0.25);
        }

        .social-icon {
          width: 20px;
          height: 20px;
          display: block;
        }
        /* Search icon button — sits left of the burger */
        .search-btn {
            position: fixed;
            top: calc(env(safe-area-inset-top) + 20px);
            right: 72px;
            z-index: 1001;
            background: transparent;
            border: none;
            padding: 12px;
            cursor: pointer;
            transition: transform 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
        }
        .search-btn:hover { transform: scale(1.1); }
        .search-btn svg { width: 24px; height: 24px; stroke: var(--gray-700); fill: none; stroke-width: 2.5; stroke-linecap: round; }
        /* Case Studies */
        .case-studies-home{padding:80px 2rem;background:transparent}
        .cs-stagger{display:flex;flex-direction:column;gap:48px;max-width:1100px;margin:0 auto}
        .cs-stagger-item{display:flex;align-items:center;gap:40px;text-decoration:none;background:rgba(255,255,255,.06);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,140,0,.35);border-radius:20px;overflow:hidden;transition:all .35s ease;cursor:pointer}
        .cs-stagger-item:hover{border-color:rgba(255,140,0,.8);transform:translateY(-4px);box-shadow:0 12px 40px rgba(255,140,0,.15)}
        .cs-stagger-item:nth-child(even){flex-direction:row-reverse}
        .cs-stagger-img{width:340px;min-height:240px;flex-shrink:0;overflow:hidden}
        .cs-stagger-img img{width:100%;height:100%;min-height:240px;object-fit:cover;display:block;transition:transform .5s ease}
        .cs-stagger-item:hover .cs-stagger-img img{transform:scale(1.05)}
        .cs-stagger-body{padding:32px 32px 32px 0;flex:1}
        .cs-stagger-item:nth-child(even) .cs-stagger-body{padding:32px 0 32px 32px}
        .cs-stagger-industry{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--primary-blue);margin-bottom:8px}
        .cs-stagger-title{font-size:1.35rem;font-weight:800;color:#fff;line-height:1.3;margin-bottom:12px}
        .cs-stagger-desc{font-size:.92rem;color:rgba(255,255,255,.65);line-height:1.7;margin-bottom:20px}
        .cs-stagger-stats{display:flex;gap:20px;flex-wrap:wrap}
        .cs-stat-pill{background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.3);color:#34d399;padding:6px 14px;border-radius:50px;font-size:.82rem;font-weight:700}
        .cs-stagger-arrow{color:rgba(255,255,255,.3);font-size:1.3rem;transition:color .3s ease,transform .3s ease;flex-shrink:0;padding-right:24px}
        .cs-stagger-item:nth-child(even) .cs-stagger-arrow{padding-right:0;padding-left:24px}
        .cs-stagger-item:hover .cs-stagger-arrow{color:rgba(255,140,0,.9);transform:translateX(4px)}
        .cs-view-all{text-align:center;margin-top:48px}
        @media(max-width:768px){
        .cs-stagger-item,.cs-stagger-item:nth-child(even){flex-direction:column}
        .cs-stagger-img{width:100%;min-height:200px;max-height:220px}
        .cs-stagger-body,.cs-stagger-item:nth-child(even) .cs-stagger-body{padding:24px}
        .cs-stagger-arrow{display:none}
        .cs-stagger-title{font-size:1.15rem}
        }
         
        /* Blog */
        .blog-home{padding:80px 2rem;background:transparent}
        .blog-scroll-wrapper{position:relative;max-width:1200px;margin:0 auto}
        .blog-scroll{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:16px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
        .blog-scroll::-webkit-scrollbar{height:6px}
        .blog-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:3px}
        .blog-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px}
        .blog-scroll::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.35)}
        .blog-scroll-card{min-width:320px;max-width:340px;flex-shrink:0;scroll-snap-align:start;background:rgba(255,255,255,.06);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,140,0,.35);border-radius:16px;padding:28px;display:flex;flex-direction:column;text-decoration:none;transition:all .35s ease;cursor:pointer}
        .blog-scroll-card:hover{border-color:rgba(255,140,0,.8);transform:translateY(-4px);box-shadow:0 8px 30px rgba(255,140,0,.15)}
        .blog-scroll-tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--primary-blue);margin-bottom:12px}
        .blog-scroll-title{font-size:1.1rem;font-weight:700;color:#fff;line-height:1.35;margin-bottom:12px}
        .blog-scroll-excerpt{font-size:.88rem;color:rgba(255,255,255,.55);line-height:1.65;flex:1;margin-bottom:20px}
        .blog-scroll-meta{display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.08);padding-top:16px}
        .blog-scroll-date{font-size:.78rem;color:rgba(255,255,255,.4)}
        .blog-scroll-read{font-size:.82rem;font-weight:600;color:var(--primary-blue);transition:color .3s ease}
        .blog-scroll-card:hover .blog-scroll-read{color:#ff8c00}
        .blog-scroll-nav{display:flex;justify-content:center;gap:12px;margin-top:24px}
        .blog-scroll-btn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);font-size:18px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}
        .blog-scroll-btn:hover{background:rgba(255,140,0,.15);border-color:rgba(255,140,0,.5);color:#ff8c00}
        .blog-view-all{text-align:center;margin-top:32px}
        /* Hero image at top of each blog card */
        .blog-scroll-card {
            padding: 0;                       /* REMOVE any existing padding from the card */
            overflow: hidden;                 /* so the image rounded corners clip cleanly */
        }

        .blog-scroll-image {
            width: 100%;
            aspect-ratio: 16 / 9;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.05);   /* placeholder while image loads */
        }

        .blog-scroll-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;                /* crop instead of distort */
            display: block;
            transition: transform 0.4s ease;
        }

        .blog-scroll-card:hover .blog-scroll-image img {
            transform: scale(1.04);           /* gentle zoom on hover */
        }

        .blog-scroll-body {
            padding: 20px;                    /* the padding that USED to be on the card */
        }
        @media(max-width:768px){
        .blog-scroll-card{min-width:280px;max-width:300px;padding:22px}
        .blog-scroll-title{font-size:1rem}
        .blog-scroll-nav{display:none}
        }
        /* Standard card grids — per Mathew's standing rule:
           never repeat(auto-fit, minmax(...)). Explicit breakpoints only.
           4 cards: 4→2→1.  3 cards: 3→1.  6 cards: 3→2→1.
        */
        .card-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
        .card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
        .card-grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

        @media (max-width: 1024px) {
            .card-grid-4 { grid-template-columns: repeat(2, 1fr); }
            .card-grid-6 { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 600px) {
            .card-grid-4 { grid-template-columns: 1fr; }
            .card-grid-3 { grid-template-columns: 1fr; }
            .card-grid-6 { grid-template-columns: 1fr; }
        }
        /* Responsive Design */
        @media (max-width: 768px) {
            .manchester-numbers {
                padding: 60px 0;
            }
            .ai-staff .section-title {
                font-size: 2.5em;
            }
            .bg-office-wrap {
              min-height: auto !important;                /* remove 200vh */
              background: none !important;                /* bg now lives on ::after */
            }
            .bg-office-wrap::after {
              /* keep same framing as desktop; tweak if you want a different focal point */
              background-position: center top !important;
            }
            /* If your earlier CSS applied a different overlay here, keep it but don’t reapply background-image */
            .bg-office-wrap::before {
              /* Optional: slightly stronger overlay for readability */
              background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.45)) !important;
            }
            .staff-section-title {
                font-size: 2em;
            }
            
            .staff-grid {
                grid-template-columns: 1fr;
            }
            
            .staff-stats {
                grid-template-columns: repeat(2, 1fr);
            }
            .staff-carousel-container {
                padding: 0 20px;
            }
            .voice-addons,
            .minutes-addons,
            .numbers-addons {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .addons-header h3 {
                font-size: 2em;
            }
            
            .addon-ribbon {
                font-size: 0.7em;
                padding: 6px 30px;
            }
            
            .usage-display {
                font-size: 0.9em;
                padding: 12px 20px;
            }
            .carousel-btn {
                width: 40px;
                height: 40px;
                font-size: 18px;
            }
            
            .carousel-btn-prev {
                left: 0;
            }
            
            .carousel-btn-next {
                right: 0;
            }
            
            .staff-carousel .staff-card {
                flex: 0 0 250px;
                height: 380px;
            }
            
            .staff-summary {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            .departments-grid {
                grid-template-columns: 1fr;
            }
            
            .features-list {
                grid-template-columns: 1fr;
            }
            .benefit-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .options-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .number-card {
                padding: 30px 20px;
            }
            
            .diversion-options {
                padding: 30px 20px;
            }
            
            .diversion-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .manchester-cta {
                padding: 40px 20px;
            }
            
            .cta-buttons {
                flex-direction: column;
                align-items: center;
            }
            .addon-btn {
                padding: 16px 20px;
                font-size: 1.1em;
                font-weight: 700;
            }
            .benefit-grid {
                grid-template-columns: 1fr; /* Single column on mobile */
                gap: 15px;
            }
            
            .benefit-item {
                padding: 20px;
                min-height: auto;
            }
            .addon-btn:hover {
                transform: translateY(-1px) !important;
            }
            .cta-buttons .btn {
                width: 100%;
                max-width: 300px;
            }
        }

        @media (max-width: 480px) {
            .number-price {
                font-size: 2em;
            }
            
            .manchester-cta h3 {
                font-size: 1.8em;
            }
            
            .manchester-cta p {
                font-size: 1.1em;
            }
            .bg-office-wrap {
              min-height: auto !important;                /* remove 250vh */
            }
            .bg-office-wrap::after {
              background-position: center 15% !important; /* adjust to taste */
            }
            .dropdown-menu {
              left: 0;     /* drop from left edge on very narrow screens */
              right: auto; /* avoids squashing */
            }
        }

        /* Dark mode support (if needed) */
        @media (prefers-color-scheme: dark) {
            .btn-outline.addon-btn,
            .addon-btn.btn-outline {
                background: var(--gray-800) !important;
                color: var(--primary-blue) !important;
                border-color: var(--primary-blue) !important;
            }
        }

        /* Print styles */
        @media print {
            .addon-btn {
                background: #0066FF !important;
                color: white !important;
                border: 2px solid #0066FF !important;
            }
        }


        /* Mobile responsive for benefit cards */
        @media (max-width: 1024px) {
            .benefit-grid {
                grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
                gap: 15px;
            }
        }


        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

/* ============================================================= */
/* BUSINESS-LANDLINE ADDITIONS (devices, modules, FAQ accordion) */
/* Appended to the shared index design system. Edit once → all   */
/* pages under /business-landline/ update.                        */
/* ============================================================= */
        /* ===== AI voice-assistant section — device redesign (scoped to .di-ai) ===== */
        .di-ai .di-scenario{margin-top:3.2rem}
        .di-ai .di-tag{display:flex;align-items:center;gap:.7rem;justify-content:center;margin-bottom:1.6rem;flex-wrap:wrap;text-align:center}
        .di-ai .di-num{font-size:.72rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#0b1220;padding:.28rem .7rem;border-radius:999px;line-height:1}
        .di-ai .di-tag h3{font-size:1.3rem;font-weight:800;color:#fff}
        /* everything stacks one per row, centred */
        .di-ai .di-stack{display:flex;flex-direction:column;align-items:center;gap:1.8rem;margin-top:1.5rem}
        .di-ai .di-stack > *{width:100%}

        /* phone device */
        .di-ai .phone{margin:0 auto;background:#0b1220;border:9px solid #1c2740;border-radius:42px;position:relative;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04)}
        .di-ai .phone::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:42%;height:20px;background:#1c2740;border-radius:0 0 14px 14px;z-index:4}
        .di-ai .phone-screen{padding:32px 13px 18px}
        .di-ai .call-head{display:flex;align-items:center;gap:10px;padding:2px 6px 13px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:14px;text-align:left}
        .di-ai .call-avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;color:#0b1220;background:linear-gradient(135deg,#FACC15,#10B981)}
        .di-ai .call-name{font-weight:700;color:#fff;font-size:.92rem;line-height:1.2}
        .di-ai .call-sub{font-size:.7rem;color:rgba(255,255,255,.45);display:flex;align-items:center;gap:5px}
        .di-ai .call-sub::before{content:"";width:6px;height:6px;border-radius:50%;background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.2)}
        .di-ai .thread{display:flex;flex-direction:column;gap:9px;max-height:540px;overflow:auto;padding-right:2px}
        .di-ai .thread::-webkit-scrollbar{width:5px}
        .di-ai .thread::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}
        .di-ai .msg{max-width:84%;padding:8px 12px;border-radius:15px;font-size:.83rem;line-height:1.42;text-align:left}
        .di-ai .msg .who{display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:.6px;opacity:.55;margin-bottom:2px;font-weight:700}
        .di-ai .msg.ai{align-self:flex-start;background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.28);color:#e7fff7;border-bottom-left-radius:5px}
        .di-ai .msg.learner{align-self:flex-end;background:rgba(59,130,246,.18);border:1px solid rgba(59,130,246,.34);color:#eef4ff;border-bottom-right-radius:5px}

        /* SMS screen */
        .di-ai .sms-head{text-align:center;padding:2px 6px 12px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:14px}
        .di-ai .sms-head .call-sub{justify-content:center}
        .di-ai .sms-bubble{background:rgba(59,130,246,.9);color:#fff;padding:11px 14px;border-radius:18px;border-bottom-left-radius:5px;font-size:.83rem;line-height:1.5;box-shadow:0 4px 14px rgba(59,130,246,.3);text-align:left}
        .di-ai .sms-time{font-size:.62rem;color:rgba(255,255,255,.4);margin:6px 0 0 4px}

        /* email / browser window */
        .di-ai .window{margin:0 auto;background:#0f172a;border:1px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.35);text-align:left}
        .di-ai .window-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08)}
        .di-ai .window-bar .dot{width:11px;height:11px;border-radius:50%}
        .di-ai .dot-r{background:#ff5f57}.di-ai .dot-y{background:#febc2e}.di-ai .dot-g{background:#28c840}
        .di-ai .window-bar .addr{margin-left:8px;font-size:.72rem;color:rgba(255,255,255,.4);font-weight:600}
        .di-ai .window-body{padding:18px 20px}
        .di-ai .email-meta{font-size:.8rem;color:rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:.7rem;margin-bottom:.9rem}
        .di-ai .email-meta strong{color:#fff}
        .di-ai .email-body{font-size:.86rem;color:#dbe4f0;line-height:1.7}
        .di-ai .email-body strong{color:#fff}

        /* notification */
        .di-ai .notif{margin:0 auto;background:rgba(23,32,52,.92);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:14px 16px;box-shadow:0 14px 34px rgba(0,0,0,.4);text-align:left}
        .di-ai .notif-top{display:flex;align-items:center;gap:9px;margin-bottom:.6rem}
        .di-ai .notif-icon{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#F97316,#FACC15);display:flex;align-items:center;justify-content:center;font-size:.9rem}
        .di-ai .notif-app{font-size:.68rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.6)}
        .di-ai .notif-time{margin-left:auto;font-size:.68rem;color:rgba(255,255,255,.4)}
        .di-ai .notif-title{font-weight:800;color:#fff;font-size:.9rem;margin-bottom:.35rem}
        .di-ai .notif-body{font-size:.82rem;color:#cdd7e5;line-height:1.6}
        .di-ai .notif-body strong{color:#fff}

        /* system readout */
        .di-ai .readout{margin:0 auto;background:linear-gradient(180deg, rgba(15,23,42,.9), rgba(9,14,25,.9));border:1px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden;text-align:left}
        .di-ai .readout-head{display:flex;align-items:center;gap:8px;padding:11px 16px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08);font-size:.72rem;font-weight:800;letter-spacing:1px;text-transform:uppercase}
        .di-ai .readout-head .led{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
        .di-ai .readout-body{padding:16px 18px;font-size:.85rem;line-height:1.7;color:#dbe4f0}
        .di-ai .readout-body strong{color:#fff}
        .di-ai .readout-body .row{padding:.15rem 0}
        .di-ai .di-div{height:1px;background:rgba(255,255,255,.08);margin:.8rem 0}

        /* checklist */
        .di-ai .di-card{margin:0 auto;background:rgba(15,23,42,.72);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:1.6rem;box-shadow:0 16px 40px rgba(0,0,0,.3)}
        .di-ai .di-card-title{color:#fff;font-weight:800}
        .di-ai .checks{list-style:none;display:grid;gap:.5rem;margin:0;padding:0}
        .di-ai .checks li{display:flex;gap:.6rem;align-items:flex-start;font-size:.85rem;color:#dbe4f0;text-align:left}
        .di-ai .checks li::before{content:"✓";color:#34d399;font-weight:800;flex-shrink:0}
        .di-ai .caption{font-size:.82rem;color:rgba(255,255,255,.6);margin-top:1rem;padding:.9rem 1.1rem;background:rgba(255,255,255,.04);border-left:3px solid rgba(255,255,255,.18);border-radius:0 10px 10px 0;text-align:left}
        .di-ai .caption strong{color:#fff}

        /* system overview */
        .di-ai .di-overview{margin-top:4rem}
        .di-ai .cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:1.6rem}
        @media(max-width:820px){.di-ai .cap-grid{grid-template-columns:1fr}}
        .di-ai .cap{background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:1.3rem}
        .di-ai .cap h4{margin-bottom:.7rem;font-size:1rem}
        .di-ai .cap ul{list-style:none;display:grid;gap:.4rem;font-size:.9rem;color:#dbe4f0;margin:0;padding:0}
        .di-ai .cap li{padding-left:1rem;position:relative}
        .di-ai .cap li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.45)}
        .di-ai .di-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2rem;padding:1.6rem;background:rgba(0,0,0,.32);border:1px solid rgba(250,204,21,.22);border-radius:16px;text-align:center}
        @media(max-width:620px){.di-ai .di-stats{grid-template-columns:repeat(2,1fr)}}
        .di-ai .di-stat .n{font-size:2.3rem;font-weight:900;color:#4ADE80;line-height:1}
        .di-ai .di-stat .l{font-size:.82rem;color:rgba(255,255,255,.7);margin-top:.4rem}
        .di-ai .di-quote{margin-top:2rem;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:1.6rem 1.8rem}
        .di-ai .di-quote blockquote{border-left:4px solid #FACC15;padding-left:1.1rem;font-style:italic;color:#e7edf5;line-height:1.75;font-size:1.02rem}
.di-ai .di-quote .by{margin-top:.9rem;text-align:right;color:#FACC15;font-weight:700}

/* AI call-flow conversation — staggered chat (AI left, caller right) */
.di-ai .cf-convo{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.di-ai .cf-msg{display:flex;align-items:flex-end;gap:12px;max-width:82%}
.di-ai .cf-ai{align-self:flex-start;flex-direction:row}
.di-ai .cf-human{align-self:flex-end;flex-direction:row-reverse}
.di-ai .cf-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid rgba(255,255,255,.15)}
.di-ai .cf-bubble{padding:11px 15px;border-radius:16px;font-size:.9rem;line-height:1.5;text-align:left}
.di-ai .cf-ai .cf-bubble{background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.28);color:#e7fff7;border-bottom-left-radius:5px}
.di-ai .cf-human .cf-bubble{background:rgba(59,130,246,.18);border:1px solid rgba(59,130,246,.34);color:#eef4ff;border-bottom-right-radius:5px}
.di-ai .cf-who{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.6px;opacity:.55;margin-bottom:3px;font-weight:700}
/* email 'laptop' frame (wraps the already-styled .window) */
.di-ai .cf-laptop{max-width:520px;margin:0 auto}
.di-ai .cf-laptop-screen{background:#0b1220;border:10px solid #1c2740;border-bottom:none;border-radius:16px 16px 0 0;padding:14px}
.di-ai .cf-laptop-base{height:14px;background:#1c2740;border-radius:0 0 14px 14px;position:relative}
.di-ai .cf-laptop-base::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:84px;height:5px;background:rgba(255,255,255,.14);border-radius:0 0 6px 6px}
@media(max-width:600px){
.di-ai .cf-msg{max-width:92%}
.di-ai .cf-avatar{width:36px;height:36px}
}

/* ---- FAQ accordion (both class variants) ---- */
.faq-grid{max-width:820px;margin:2.5rem auto 0;display:flex;flex-direction:column}
.faq-item{border-bottom:1px solid rgba(255,255,255,.12);background:none;border-radius:0;padding:0;box-shadow:none}
.faq-question,.faq-q{font-weight:700;color:#fff;cursor:pointer;list-style:none;position:relative;padding:1.15rem 2.2rem;margin:0;text-align:center}
.faq-question::-webkit-details-marker,.faq-q::-webkit-details-marker{display:none}
.faq-question::after,.faq-q::after{content:"+";position:absolute;right:.3rem;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:400;color:#93C5FD;transition:transform .25s ease}
.faq-item[open] .faq-item[open] .faq-question::after,.faq-item[open] .faq-q::after{content:"\2212"}
.faq-answer,.faq-a{font-size:.94rem;color:#E5E7EB;line-height:1.7;padding:0 1rem 1.2rem;text-align:center}

/* ---- injected case-study / blog modules ---- */
.tc-module{max-width:1180px;margin:70px auto;padding:0 1.5rem}
.tc-head{text-align:center;max-width:760px;margin:0 auto 2.2rem}
.tc-h2{font-size:2rem;font-weight:900;color:#fff;line-height:1.15;margin:0 0 .6rem}
.tc-sub{font-size:1rem;color:rgba(255,255,255,.6);margin:0}
/* case-study grid (icon cards — work for every case study, no image needed) */
.tc-case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(max-width:900px){.tc-case-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tc-case-grid{grid-template-columns:1fr}}
.tc-case{display:flex;flex-direction:column;gap:.9rem;text-decoration:none;background:rgba(15,23,42,.72);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:1.5rem;transition:transform .3s ease,border-color .3s ease}
.tc-case:hover{transform:translateY(-4px);border-color:rgba(59,130,246,.5)}
.tc-case-head{display:flex;gap:.9rem;align-items:flex-start}
.tc-case-icon{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.tc-case-icon svg{width:22px;height:22px}
.tc-case-industry{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#93C5FD;margin-bottom:.25rem}
.tc-case-title{font-size:1.02rem;font-weight:800;color:#fff;line-height:1.3}
.tc-case-desc{font-size:.88rem;color:rgba(255,255,255,.66);line-height:1.65;margin:0;flex:1}
.tc-case-results{display:flex;flex-wrap:wrap;gap:.5rem}
.tc-tag{font-size:.72rem;font-weight:700;padding:.3rem .7rem;border-radius:999px}
.tc-tag-green{background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.3);color:#34d399}
.tc-tag-blue{background:rgba(59,130,246,.15);border:1px solid rgba(59,130,246,.3);color:#93C5FD}
.tc-tag-orange{background:rgba(249,115,22,.15);border:1px solid rgba(249,115,22,.3);color:#fdba74}
.tc-case-feats{display:flex;flex-wrap:wrap;gap:.4rem}
.tc-pill{font-size:.7rem;color:rgba(255,255,255,.6);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);padding:.25rem .6rem;border-radius:8px}
.tc-case-foot{display:flex;align-items:center;gap:.6rem;border-top:1px solid rgba(255,255,255,.08);padding-top:.9rem;margin-top:.2rem}
.tc-avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;color:#0b1220;background:linear-gradient(135deg,#93C5FD,#3B82F6)}
.tc-author{font-size:.8rem;font-weight:700;color:#fff;display:flex;flex-direction:column;line-height:1.25}
.tc-author small{font-weight:500;color:rgba(255,255,255,.5)}
.tc-more{margin-left:auto;font-size:.8rem;font-weight:700;color:#93C5FD}
/* blog horizontal scroll */
.tc-post-scroll{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:14px}
.tc-post-scroll::-webkit-scrollbar{height:6px}
.tc-post-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px}
.tc-post{min-width:320px;max-width:340px;flex-shrink:0;scroll-snap-align:start;display:flex;flex-direction:column;text-decoration:none;background:rgba(15,23,42,.72);border:1px solid rgba(255,140,0,.32);border-radius:16px;overflow:hidden;transition:transform .3s ease,border-color .3s ease}
.tc-post:hover{transform:translateY(-4px);border-color:rgba(255,140,0,.75)}
.tc-post-img{aspect-ratio:16/9;overflow:hidden;background:rgba(255,255,255,.05)}
.tc-post-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.tc-post:hover .tc-post-img img{transform:scale(1.04)}
.tc-post-body{padding:20px}
.tc-post-tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#93C5FD;margin-bottom:10px}
.tc-post-title{font-size:1.08rem;font-weight:700;color:#fff;line-height:1.35;margin:0 0 10px}
.tc-post-exc{font-size:.86rem;color:rgba(255,255,255,.55);line-height:1.6;margin:0 0 16px}
.tc-post-meta{display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.08);padding-top:14px}
.tc-post-meta span{font-size:.76rem;color:rgba(255,255,255,.4)}
.tc-post-read{font-weight:600;color:#3B82F6!important}
@media(max-width:600px){.tc-post{min-width:280px}}


/* ===== page-specific extras folded in from industry pages ===== */
.breadcrumb{
            background:rgba(0,0,0,.65);
            padding:10px 2rem;
            font-size:14px;
            color:#E5E7EB;
            margin-top:72px;
        }
.breadcrumb a{
            color:#fff;
            text-decoration:underline;
            text-underline-offset:3px;
        }
.breadcrumb a:hover{text-decoration-color:#3B82F6;}
.hero-price-row{
            display:flex;justify-content:center;gap:16px;align-items:baseline;
            margin-bottom:1rem;
            flex-wrap:wrap;
        }
.hero-price{
            font-size:2.4rem;font-weight:900;color:#93C5FD;
        }
.hero-price-note{
            font-size:.95rem;color:#E5E7EB;
        }
.hero-pills{
            display:flex;flex-wrap:wrap;gap:10px;
            justify-content:center;margin:1rem 0 1.8rem;
        }
.hero-pill{
            background:rgba(15,23,42,.9);
            border-radius:999px;
            border:1px solid rgba(148,163,184,.8);
            padding:.45rem .9rem;
            font-size:.85rem;
            color:#E5E7EB;
            text-decoration:none;
        }
.hero-pill:hover{border-color:#3B82F6;color:#60A5FA;}
.hero-guarantee{
            margin-top:.8rem;
            background:rgba(15,23,42,.9);
            border-radius:16px;
            padding:1rem 1.2rem;
            border:1px solid rgba(55,65,81,.9);
            color:#E5E7EB;
            font-size:.9rem;
        }
.accountant-authority,
        .accountant-features,
        .accountant-flow,
        .accountant-reminders,
        .accountant-comparison,
        .accountant-faq,
        .accountant-callouts,
        .vr-reviews-section{
            padding:60px 2rem;
        }
.content-grid{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
            gap:1.6rem;
            margin-top:1.7rem;
        }
.glass-card{
            background:rgba(15,23,42,.78);
            border-radius:20px;
            padding:1.9rem 1.9rem;
            border:1px solid rgba(55,65,81,.85);
            box-shadow:var(--shadow-lg);
            color:#E5E7EB;
        }
.glass-card h3{
            font-size:1.2rem;
            font-weight:800;
            color:#F9FAFB;
            margin-bottom:.55rem;
        }
.glass-card p{
            font-size:.94rem;
            line-height:1.7;
        }
.glass-list{
            list-style:none;margin-top:.6rem;
        }
.glass-list li{
            padding:.4rem 0;
            font-size:.94rem;
        }
/* Why-choose flowing pillars (#why) */
.wc-grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            max-width:1100px;
            margin:1.8rem auto 0;
            background:rgba(15,23,42,.5);
            border:1px solid rgba(55,65,81,.6);
            border-radius:22px;
            overflow:hidden;
        }
.wc-col{
            display:flex;
            flex-direction:column;
            gap:.65rem;
            padding:2rem 1.9rem;
            border-right:1px solid rgba(55,65,81,.5);
        }
.wc-col:last-child{border-right:none;}
.wc-metric{
            font-size:1.5rem;
            font-weight:900;
            line-height:1;
            letter-spacing:-.5px;
            color:#60A5FA;
        }
.wc-metric span{
            font-size:.8rem;
            font-weight:700;
            letter-spacing:0;
            color:#9CA3AF;
            margin-left:.15rem;
        }
.wc-title{
            font-size:1.12rem;
            font-weight:800;
            color:#F9FAFB;
            line-height:1.3;
            margin:0;
        }
.wc-lead{
            font-size:.9rem;
            color:#9CA3AF;
            line-height:1.6;
            margin:0;
        }
.wc-list{
            list-style:none;
            margin:.4rem 0 0;
            padding:0;
            display:flex;
            flex-direction:column;
            gap:.55rem;
        }
.wc-list li{
            position:relative;
            padding-left:1.35rem;
            font-size:.86rem;
            color:#D1D5DB;
            line-height:1.5;
        }
.wc-list li::before{
            content:"";
            position:absolute;
            left:0;
            top:.42em;
            width:.5rem;
            height:.5rem;
            border-radius:50%;
            background:#60A5FA;
            box-shadow:0 0 0 3px rgba(96,165,250,.18);
        }
.wc-list li a{color:#93C5FD;text-decoration:none;}
.wc-list li a:hover{text-decoration:underline;}
@media (max-width:900px){
            .wc-grid{grid-template-columns:1fr;}
            .wc-col{border-right:none;border-bottom:1px solid rgba(55,65,81,.5);}
            .wc-col:last-child{border-bottom:none;}
        }
/* Explore More — single-row horizontal scroller (#related) */
.related-scroll{
            display:flex;
            gap:1.6rem;
            margin-top:2rem;
            overflow-x:auto;
            scroll-snap-type:x mandatory;
            -webkit-overflow-scrolling:touch;
            padding-bottom:14px;
        }
.related-scroll::-webkit-scrollbar{height:6px;}
.related-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px;}
.related-scroll .glass-card{
            min-width:290px;
            max-width:310px;
            flex-shrink:0;
            scroll-snap-align:start;
            transition:transform .3s ease,border-color .3s ease;
        }
.related-scroll .glass-card:hover{
            transform:translateY(-4px);
            border-color:rgba(96,165,250,.5);
        }
.flow-visual{
            max-width:900px;
            margin:2rem auto 0;
        }
.flow-step{
            display:flex;
            align-items:flex-start;
            gap:1.5rem;
            margin-bottom:1.5rem;
            position:relative;
        }
.flow-step:not(:last-child)::after{
            content:'';
            position:absolute;
            left:24px;
            top:50px;
            width:2px;
            height:calc(100% - 20px);
            background:linear-gradient(to bottom,#3B82F6,rgba(59,130,246,.2));
        }
.flow-number{
            width:50px;
            height:50px;
            border-radius:50%;
            background:linear-gradient(135deg,#1E3A5F,#3B82F6);
            color:#fff;
            font-weight:900;
            font-size:1.3rem;
            display:flex;
            align-items:center;
            justify-content:center;
            flex-shrink:0;
            box-shadow:0 8px 20px rgba(37,99,235,.4);
        }
.flow-content{
            flex:1;
            background:rgba(15,23,42,.8);
            border-radius:16px;
            padding:1.4rem 1.6rem;
            border:1px solid rgba(55,65,81,.9);
        }
.flow-content h4{
            font-size:1.1rem;
            font-weight:700;
            color:#60A5FA;
            margin-bottom:.4rem;
        }
.flow-content p{
            font-size:.92rem;
            color:#E5E7EB;
            margin-bottom:.5rem;
        }
.flow-content .flow-examples{
            font-size:.85rem;
            color:#9CA3AF;
            font-style:italic;
        }
.reminder-highlight{
            background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(59,130,246,.12));
            border:2px solid rgba(16,185,129,.4);
            border-radius:20px;
            padding:2.5rem;
            margin:2rem auto;
            max-width:1000px;
        }
.reminder-highlight h3{
            font-size:1.6rem;
            font-weight:900;
            color:#10B981;
            margin-bottom:1rem;
            text-align:center;
        }
.reminder-highlight>p{
            font-size:1rem;
            color:#E5E7EB;
            max-width:700px;
            margin:0 auto 1.5rem;
            text-align:center;
            line-height:1.7;
        }
.reminder-grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:1rem;
            margin-top:1.5rem;
        }
        @media (max-width: 1024px) {
            .reminder-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 600px) {
            .reminder-grid { grid-template-columns: 1fr; }
        }
.reminder-card{
            background:rgba(15,23,42,.85);
            border-radius:14px;
            padding:1.2rem;
            border:1px solid rgba(55,65,81,.9);
            text-align:center;
        }
.reminder-card-icon{font-size:2rem;margin-bottom:.5rem;}
.reminder-card-title{font-size:.95rem;font-weight:700;color:#F9FAFB;margin-bottom:.3rem;}
.reminder-card-desc{font-size:.85rem;color:#9CA3AF;}
.reminder-cta{
            text-align:center;
            margin-top:1.5rem;
        }
.reminder-cta a{
            color:#10B981;
            font-weight:700;
            text-decoration:none;
            font-size:.95rem;
        }
.reminder-cta a:hover{text-decoration:underline;}
.comparison-grid{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
            gap:1.6rem;
            margin-top:1.7rem;
        }
.comparison-card{
            background:rgba(15,23,42,.8);
            border-radius:20px;
            padding:1.9rem;
            border:1px solid rgba(55,65,81,.9);
            box-shadow:var(--shadow-lg);
            color:#E5E7EB;
        }
.comparison-card.winner{
            border-color:#3B82F6;
            box-shadow:0 20px 50px rgba(37,99,235,.4);
        }
.comparison-card h3{font-size:1.1rem;font-weight:800;margin-bottom:.5rem;}
.comparison-list{list-style:none;margin-top:.4rem;}
.comparison-list li{
            padding:.4rem 0;
            font-size:.92rem;
        }
.faq-list{max-width:820px;margin:1.7rem auto 0;display:flex;flex-direction:column;}
.vr-reviews-wrapper{
            background:rgba(15,23,42,.85);
            border-radius:22px;
            border:1px solid rgba(55,65,81,.9);
            box-shadow:var(--shadow-lg);
            padding:1.8rem 1.4rem 1.4rem;
        }
.vr-reviews-strip{
            display:flex;
            gap:14px;
            overflow-x:auto;
            padding-bottom:8px;
            scrollbar-width:thin;
        }
.vr-reviews-strip::-webkit-scrollbar{height:6px;}
.vr-reviews-strip::-webkit-scrollbar-track{background:rgba(15,23,42,.9);}
.vr-reviews-strip::-webkit-scrollbar-thumb{background:rgba(75,85,99,.9);border-radius:999px;}
.vr-review-card{
            min-width:280px;
            max-width:320px;
            background:rgba(255,255,255,0.04);
            backdrop-filter:blur(10px);
            border-radius:18px;
            border:2px solid var(--accountant-blue);
            padding:1.2rem 1.1rem;
            flex:0 0 auto;
            transition:transform 0.3s ease, border-color 0.3s ease;
        }
.vr-review-card:hover{
            transform:translateY(-5px);
            border-color:#60A5FA;
        }
.vr-review-stars{color:#3B82F6;font-size:.9rem;margin-bottom:.4rem;}
.vr-review-quote{font-size:.9rem;color:#E5E7EB;margin-bottom:.6rem;}
.vr-review-author{font-size:.86rem;color:#9CA3AF;font-weight:600;}
.vr-review-link{display:inline-block;margin-top:.4rem;color:var(--accountant-blue);font-size:.8rem;text-decoration:underline;text-underline-offset:3px;}
.vr-review-badge-row{
            display:flex;
            justify-content:space-between;
            align-items:center;
            margin-bottom:1rem;
            flex-wrap:wrap;
            gap:.6rem;
        }
.vr-review-badge{font-size:.86rem;color:#3B82F6;font-weight:700;}
.vr-review-more{text-align:right;margin-top:0.6rem;}
.vr-review-more a{font-size:.9rem;color:#93C5FD;text-decoration:none;}
.vr-review-more a:hover{text-decoration:underline;}
@media(max-width:768px) {
  .breadcrumb{padding:10px 1rem;font-size:12px;}
}
@media(max-width:768px) {
  .accountant-authority,
            .accountant-features,
            .accountant-flow,
            .accountant-reminders,
            .accountant-comparison,
            .accountant-faq,
            .accountant-callouts,
            .vr-reviews-section{
                padding-left:1rem;padding-right:1rem;
            }
  .content-grid,
            .comparison-grid{
                grid-template-columns:1fr;
            }
  .vr-review-badge-row{
                flex-direction:column;
                align-items:flex-start;
            }
  .flow-step{flex-direction:column;gap:1rem;}
  .flow-step:not(:last-child)::after{display:none;}
  .reminder-highlight{padding:1.5rem;}
}


/* ===== shared office background for /business-landline/ pages (photo kept, de-blued) ===== */
body::after{content:"";position:fixed;inset:0;z-index:-2;background:url('../assets/team-connect-main-office.webp') center top/cover no-repeat;pointer-events:none}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(135deg,rgba(0,0,0,.55),rgba(0,0,0,.42));pointer-events:none}
.hero-badge span.flag{font-size:1.1rem}
.sh-light .section-title,.sh-light .section-subtitle{color:#fff}
.section-header{max-width:760px;margin-left:auto;margin-right:auto;padding:0 1.25rem}