/* ── Base layout helpers ── */
        .flex { display: flex; }
        .items-center { align-items: center; }
        .justify-between { justify-content: space-between; }

        /* ── Buttons ── */
        .btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; font-weight: 600; font-family: 'Outfit', sans-serif; font-size: 1rem; border-radius: 32px; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); border: 1px solid transparent; white-space: nowrap; letter-spacing: 0.02em; text-decoration: none; }
        .btn-primary { background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%); color: #FFF; box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3); }
        .btn-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 25px rgba(37, 99, 235, 0.5); color: #FFF; }

        /* ── Phone link in header ── */
        .header-phone { color: #0F172A; text-decoration: none; font-weight: 600; font-size: 0.92rem; letter-spacing: -0.01em; transition: color 0.2s ease; white-space: nowrap; }
        .header-phone:hover { color: #3B82F6; }
        @media (max-width: 480px) { .header-phone { display: none; } }

        /* ── Hamburger — always visible at every breakpoint ── */
        .rr-hamburger { display: flex; flex-direction: column; justify-content: space-between; width: 28px; height: 20px; background: none; border: none; cursor: pointer; padding: 0; z-index: 2001; flex-shrink: 0; }
        .rr-hamburger span { display: block; height: 2.5px; width: 100%; background-color: #0F172A; border-radius: 3px; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); transform-origin: center; }
        .rr-hamburger.open span:nth-child(1) { transform: translateY(8.75px) rotate(45deg); }
        .rr-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
        .rr-hamburger.open span:nth-child(3) { transform: translateY(-8.75px) rotate(-45deg); }

        /* ── Full-screen nav overlay (click-outside to close) ── */
        .mobile-nav-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 2000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
        .mobile-nav-overlay.active { opacity: 1; visibility: visible; }

        /* ── Slide-in drawer ── */
        .mobile-nav-menu { position: absolute; top: 0; right: 0; transform: translateX(100%); width: 320px; max-width: 90vw; height: 100%; background: #ffffff; box-shadow: -20px 0 60px rgba(0,0,0,0.12); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; overflow: hidden; }
        .mobile-nav-overlay.active .mobile-nav-menu { transform: translateX(0); }

        /* ── Drawer internals ── */
        .nav-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px 18px; border-bottom: 1px solid rgba(0,0,0,0.07); flex-shrink: 0; }
        .nav-panel-body { flex: 1; padding: 8px 0 16px; overflow-y: auto; }
        .nav-panel-footer { padding: 16px 24px 20px; border-top: 1px solid rgba(0,0,0,0.07); flex-shrink: 0; }

        /* Section labels */
        .nav-section-label { display: block; padding: 14px 24px 4px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #94a3b8; }

        /* Nav links */
        .nav-panel-body a { display: flex; align-items: center; gap: 12px; padding: 11px 24px; font-size: 0.97rem; font-weight: 500; color: #1e293b; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; }
        .nav-panel-body a:hover { background: rgba(59,130,246,0.06); color: #3B82F6; }
        .nav-panel-body a svg { flex-shrink: 0; opacity: 0.55; }
        .nav-panel-body a:hover svg { opacity: 1; }
        .nav-panel-body a.nav-highlight { color: #3B82F6; font-weight: 600; }

        /* Demo sub-links */
        .nav-demo-link { padding-left: 52px !important; font-size: 0.88rem !important; color: #475569 !important; padding-top: 8px !important; padding-bottom: 8px !important; }
        .nav-demo-link:hover { color: #3B82F6 !important; }

        /* Close button */
        .close-menu-btn { background: none; border: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 18px; cursor: pointer; color: #64748b; transition: background 0.2s, color 0.2s; }
        .close-menu-btn:hover { background: rgba(0,0,0,0.06); color: #0F172A; }

        /* ── Suppress legacy classes ── */
        .desktop-nav { display: none !important; }
        .hidden-mobile { display: none !important; }
        .mobile-menu-toggle { display: none !important; }

        /* ── Universal Grid Helpers ── */
        .features-grid, .features-grid-sm {
            display: grid;
            width: 100%;
        }
        .features-grid {
            grid-template-columns: 1fr;
            gap: 32px;
        }
        .features-grid-sm {
            grid-template-columns: 1fr;
            gap: 24px;
        }
        @media (min-width: 768px) {
            .features-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .features-grid-sm {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        @media (min-width: 1024px) {
            .features-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }