/* ==========================================================================
   Global Reset & Base
   ========================================================================== */

   *,
   *::before,
   *::after {
     box-sizing: border-box;
   }
   
   html {
     scroll-behavior: smooth;
   }
   
   body {
     margin: 0;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
       sans-serif;
     color: #0f172a;
     background-color: #f9fafb;
     line-height: 1.6;
   }
   
   /* RTL base */
   html[dir="rtl"] body,
   body[dir="rtl"] {
     direction: rtl;
     font-family: "Tajawal", system-ui, -apple-system, BlinkMacSystemFont,
       "Segoe UI", sans-serif;
   }
   
   img {
     max-width: 100%;
     display: block;
   }
   
   a {
     color: inherit;
     text-decoration: none;
   }
   
   a:hover {
     text-decoration: underline;
   }
   
   /* ==========================================================================
      Design Tokens
      ========================================================================== */
   
   :root {
     --bg: #f9fafb;
     --bg-muted: #edf2f7;
     --bg-accent: #020617;
     --fg: #0f172a;
     --fg-muted: #4b5563;
   
     --accent: #0ea5e9;
     --accent-strong: #06b6d4;
     --accent-soft: rgba(14, 165, 233, 0.12);
   
     --border: #e5e7eb;
     --border-strong: #1f2937;
   
     --radius-lg: 18px;
     --radius-md: 12px;
     --radius-pill: 999px;
   
     --shadow-soft: 0 16px 50px rgba(15, 23, 42, 0.12);
     --shadow-strong: 0 26px 80px rgba(15, 23, 42, 0.38);
   
     --max-width: 1120px;
   
     --header-height: 64px;
   }
   
   /* ==========================================================================
      Layout Helpers
      ========================================================================== */
   
   .container {
     width: 100%;
     max-width: var(--max-width);
     margin: 0 auto;
     padding: 0 16px;
   }
   
   .section {
     padding: 72px 0;
   }
   
   .section-muted {
     background-color: var(--bg-muted);
   }
   
   .section-accent {
     background: radial-gradient(circle at top left, #0ea5e9 0, #0f172a 45%, #020617 100%);
     color: #f9fafb;
   }
   
   /* ==========================================================================
      Typography / Section headings
      ========================================================================== */
   
   .section-header {
     max-width: 640px;
     margin-bottom: 32px;
   }
   
   .section-label {
     text-transform: uppercase;
     letter-spacing: 0.16em;
     font-size: 0.7rem;
     color: #6b7280;
     margin-bottom: 8px;
   }
   
   .section-header h2 {
     margin: 0 0 6px;
     font-size: 1.7rem;
   }
   
   .section-subtitle {
     margin: 0;
     color: var(--fg-muted);
   }
   
   /* Generic text helpers */
   .text-muted {
     color: var(--fg-muted);
   }
   
   .text-center {
     text-align: center;
   }
   
   /* ==========================================================================
      Header + Navigation (LTR + RTL, mobile burger)
      ========================================================================== */
   
   .site-header {
     position: sticky;
     top: 0;
     z-index: 40;
     background: rgba(249, 250, 251, 0.96);
     backdrop-filter: blur(12px);
     border-bottom: 1px solid rgba(226, 232, 240, 0.9);
   }
   
   .header-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 8px 0;
   }
   
   .logo {
     display: flex;
     align-items: center;
     gap: 8px;
     font-weight: 600;
   }
   
   .logo img {
     max-height: 40px;
     height: auto;
   }
   
   /* Desktop nav */
   
   .site-nav {
     display: flex;
   }
   
   .site-nav ul {
     display: flex;
     align-items: center;
     gap: 20px;
     list-style: none;
     margin: 0;
     padding: 0;
     font-size: 0.95rem;
   }
   
   .site-nav a {
     color: #111827;
     font-weight: 500;
   }
   
   .site-nav a:hover {
     color: var(--accent);
     text-decoration: none;
   }
   
   .lang-switch {
     font-size: 0.8rem;
     opacity: 0.9;
   }
   
   /* Burger button */
   
   .nav-toggle {
     display: none;
     background: none;
     border: none;
     padding: 8px;
     cursor: pointer;
   }
   
   .nav-toggle-bar {
     width: 24px;
     height: 2.5px;
     background-color: #111827;
     display: block;
     margin: 2px 0;
     border-radius: 999px;
     transition: transform 0.25s ease, opacity 0.25s ease;
   }
   
   /* Burger animation when active (JS adds .active) */
   
   .nav-toggle.active .nav-toggle-bar:nth-child(1) {
     transform: translateY(6px) rotate(45deg);
   }
   .nav-toggle.active .nav-toggle-bar:nth-child(2) {
     opacity: 0;
   }
   .nav-toggle.active .nav-toggle-bar:nth-child(3) {
     transform: translateY(-6px) rotate(-45deg);
   }
   
   /* Mobile nav */
   
   @media (max-width: 900px) {
     .nav-toggle {
       display: inline-flex;
       flex-direction: column;
     }
   
     .site-nav {
       position: fixed;
       inset: var(--header-height) 0 0 0;
       background: #020617;
       display: none;
       z-index: 39;
     }
   
     .site-nav.open {
       display: block;
     }
   
     .site-nav ul {
       flex-direction: column;
       align-items: flex-start;
       gap: 16px;
       background: #810781;
        padding: 21px;
     }
   
     .site-nav a {
       color: #e5e7eb;
       font-size: 1.05rem;
     }
   
     .lang-switch {
       padding-top: 8px;
     }
   
     body.menu-open {
       overflow: hidden;
     }
   }
   
   /* RTL header tweaks */
  
   
   /* ==========================================================================
      Buttons
      ========================================================================== */
   
   .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: var(--radius-pill);
     padding: 10px 18px;
     font-weight: 500;
     border: 1px solid transparent;
     cursor: pointer;
     text-decoration: none;
     white-space: nowrap;
   }
   
   .btn-primary {
     background: linear-gradient(135deg, #0ea5e9, #38bdf8);
     color: #0f172a;
     box-shadow: var(--shadow-soft);
   }
   
   .btn-primary:hover {
     filter: brightness(1.07);
     text-decoration: none;
   }
   
   .btn-ghost {
     background-color: #ffffff;
     border-color: #e5e7eb;
     color: #111827;
   }
   
   .btn-ghost:hover {
     background-color: #f3f4f6;
     text-decoration: none;
   }
   
   .btn-small {
     padding: 6px 14px;
     font-size: 0.9rem;
   }
   
   .btn-full {
     width: 100%;
   }
   
   /* ==========================================================================
      Hero (homepage)
      ========================================================================== */
   
   .hero {
     padding-top: calc(var(--header-height) + 40px);
     padding-bottom: 72px;
   }
   
   .hero-grid {
     display: grid;
     grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
     gap: 40px;
     align-items: flex-start;
   }
   
   .hero-content h1 {
     font-size: clamp(2.2rem, 4vw, 2.8rem);
     margin-bottom: 12px;
   }
   
   .hero-subtitle {
     color: var(--fg-muted);
     max-width: 580px;
   }
   
   .hero-cta {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
     margin: 20px 0;
   }
   
   .hero-meta {
     display: flex;
     flex-wrap: wrap;
     gap: 16px;
     margin-top: 24px;
     font-size: 0.85rem;
   }
   
   .hero-meta > div {
     padding: 8px 12px;
     border-radius: var(--radius-pill);
     background-color: #ffffff;
     border: 1px solid #e5e7eb;
   }
   
   .stat-label {
     display: block;
     text-transform: uppercase;
     letter-spacing: 0.12em;
     font-size: 0.7rem;
     color: #6b7280;
   }
   
   .stat-value {
     font-weight: 600;
     color: #111827;
   }
   
   /* Hero visual panel */
   
   .hero-panel {
     display: flex;
     flex-direction: column;
     gap: 16px;
   }
   
   /* device + tags + orbs */
   .hero-visual {
     background: radial-gradient(circle at top left, rgba(14, 165, 233, 0.3), transparent 55%),
                 radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.25), transparent 60%);
     border-radius: 18px;
     padding: 14px;
     position: relative;
     overflow: hidden;
   }
   
   .hero-device {
     position: relative;
     background: #020617;
     border-radius: 18px;
     padding: 10px;
     box-shadow: 0 16px 45px rgba(15, 23, 42, 0.75);
     border: 1px solid rgba(148, 163, 184, 0.25);
   }
   
   .hero-device img {
     border-radius: 12px;
     width: 100%;
   }
   
   /* Floating tags on hero image */
   
   .hero-tag {
     position: absolute;
     left: 14px;
     right: 14px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 6px;
     padding: 8px 10px;
     border-radius: 999px;
     background: linear-gradient(90deg, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.85));
     border: 1px solid rgba(148, 163, 184, 0.5);
     font-size: 0.75rem;
   }
   
   .hero-tag-top {
     top: 10px;
   }
   
   .hero-tag-bottom {
     bottom: 10px;
   }
   
   .hero-tag-label {
     color: #e5e7eb;
     font-weight: 600;
   }
   
   .hero-tag-pill {
     color: #9ca3af;
   }
   
   /* Floating orbs */
   
   .hero-orb {
     position: absolute;
     width: 70px;
     height: 70px;
     border-radius: 999px;
     background: radial-gradient(circle, rgba(56, 189, 248, 0.9), transparent 65%);
     opacity: 0.45;
     filter: blur(1px);
     animation: float 10s ease-in-out infinite;
   }
   
   .hero-orb-1 {
     top: -20px;
     right: -10px;
   }
   
   .hero-orb-2 {
     bottom: -25px;
     left: -20px;
     animation-delay: -4s;
   }
   
   @keyframes float {
     0%,
     100% {
       transform: translate3d(0, 0, 0);
     }
     50% {
       transform: translate3d(6px, -8px, 0);
     }
   }
   
   /* Trust strip */
   
   .trust {
     padding: 36px 0;
   }
   
   .trust-logos {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
   }
   
   .trust-pill {
     padding: 6px 14px;
     border-radius: var(--radius-pill);
     border: 1px dashed #cbd5f5;
     font-size: 0.85rem;
     color: #4b5563;
     background-color: #ffffff;
   }
   
   /* ==========================================================================
      Generic cards & grids (services, solutions, cases, articles)
      ========================================================================== */
   
   .grid {
     display: grid;
     gap: 24px;
   }
   
   .services-grid,
   .solutions-grid,
   .cases-grid,
   .articles-grid {
     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   }
   
   .card {
     background-color: #ffffff;
     border-radius: var(--radius-lg);
     padding: 20px 18px;
     border: 1px solid #e5e7eb;
     box-shadow: 0 10px 35px rgba(15, 23, 42, 0.04);
     transition: transform 0.2s ease, box-shadow 0.2s ease;
   }
   
   .card:hover {
     transform: translateY(-3px);
     box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14);
   }
   
   .card h3 {
     margin-top: 0;
     margin-bottom: 8px;
     font-size: 1.1rem;
   }
   
   .card p {
     margin-top: 0;
     margin-bottom: 10px;
     color: var(--fg-muted);
   }
   
   .badge {
     display: inline-flex;
     padding: 2px 10px;
     border-radius: var(--radius-pill);
     background-color: var(--accent-soft);
     color: #0369a1;
     font-size: 0.75rem;
     font-weight: 500;
   }
   
   .text-link {
     color: var(--accent);
     font-weight: 500;
   }
   
   /* Icon/thumb */
   .service-icon,
   .case-thumb,
   .article-thumb {
     width: 80px;
     height: 80px;
     object-fit: cover;
     border-radius: 20px;
     margin-bottom: 10px;
     background-color: #0f172a;
   }
   
   /* Article meta */
   .article-meta {
     font-size: 0.8rem;
     color: #6b7280;
     margin-bottom: 6px;
   }
   
   /* ==========================================================================
      Page Hero (internal pages: services, solutions, about, articles, etc.)
      ========================================================================== */
   
   .page-hero {
     padding-top: calc(var(--header-height) + 32px);
     padding-bottom: 32px;
   }
   
   .page-hero h1 {
     margin: 0 0 8px;
     font-size: 2rem;
   }
   
   .page-hero p {
     margin: 0;
     max-width: 640px;
     color: var(--fg-muted);
   }
   
   /* Page-specific helper (not required but handy) */
   
   .page-services .page-hero,
   .page-solutions .page-hero,
   .page-cases .page-hero,
   .page-articles .page-hero,
   .page-about .page-hero {
     text-align: center;
   }
   
   /* ==========================================================================
      About / Team / Process (future enhancements)
      ========================================================================== */
   
   /* About split grid */
   
   .about-grid {
     display: grid;
     grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
     gap: 32px;
   }
   
   /* Timeline */
   
   .timeline {
     list-style: none;
     padding: 0;
     margin: 0 0 16px;
     border-left: 1px solid #cbd5e1;
   }
   
   .timeline li {
     position: relative;
     padding-left: 16px;
     margin-bottom: 12px;
   }
   
   .timeline-year {
     font-size: 0.8rem;
     color: #64748b;
     text-transform: uppercase;
     letter-spacing: 0.12em;
     display: block;
   }
   
   .timeline li::before {
     content: "";
     position: absolute;
     left: -5px;
     top: 10px;
     width: 9px;
     height: 9px;
     border-radius: 50%;
     background: linear-gradient(135deg, #0ea5e9, #38bdf8);
   }
   
   /* Team grid (for the “50–100 people” showcase) */
   
   .team-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
     gap: 18px;
   }
   
   .team-card {
     background: #ffffff;
     border-radius: var(--radius-md);
     border: 1px solid #e5e7eb;
     padding: 14px 14px 16px;
     text-align: center;
   }
   
   .team-avatar {
     width: 64px;
     height: 64px;
     border-radius: 999px;
     margin: 0 auto 8px;
     background: #0f172a;
     overflow: hidden;
   }
   
   .team-role {
     font-size: 0.85rem;
     color: #64748b;
   }
   
   /* Tech stack pills */
   
   .tech-stack {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin-top: 10px;
   }
   
   .tech-pill {
     font-size: 0.75rem;
     padding: 4px 10px;
     border-radius: var(--radius-pill);
     background: #eff6ff;
     color: #1d4ed8;
     border: 1px solid #bfdbfe;
   }
   
   /* Process steps */
   
   .process-steps {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
     gap: 18px;
   }
   
   .process-step {
     background: #ffffff;
     border-radius: var(--radius-md);
     border: 1px solid #e5e7eb;
     padding: 16px 14px;
   }
   
   .process-step-title {
     font-weight: 600;
     margin-bottom: 6px;
   }
   
   /* ==========================================================================
      Contact page
      ========================================================================== */
   
   .contact-grid {
     display: grid;
     grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
     gap: 32px;
     align-items: flex-start;
   }
   
   .contact-left p {
     margin-bottom: 8px;
   }
   
   .values-list {
     list-style: none;
     padding: 0;
     margin: 16px 0;
   }
   
   .values-list li {
     padding-left: 18px;
     position: relative;
     margin-bottom: 6px;
     color: var(--fg-muted);
     font-size: 0.95rem;
   }
   
   .values-list li::before {
     content: "•";
     position: absolute;
     left: 4px;
     top: 0;
     color: var(--accent);
   }
   
   html[dir="rtl"] .values-list li {
     padding-left: 0;
     padding-right: 18px;
   }
   html[dir="rtl"] .values-list li::before {
     left: auto;
     right: 4px;
   }
   
   /* WhatsApp box */
   
   .whatsapp-box {
     background: #024c29;
     border-radius: var(--radius-md);
     padding: 12px 14px;
     border: 1px solid #6ee7b7;
     font-size: 0.95rem;
   }
   
   .whatsapp-title {
     font-weight: 600;
     margin-bottom: 2px;
   }
   
   /* Contact form */
   
   .contact-form {
     background-color: rgba(15, 23, 42, 0.97);
     padding: 20px 18px;
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-strong);
   }
   
   .contact-form label {
     display: block;
     font-size: 0.9rem;
     margin-bottom: 3px;
     color: #e5e7eb;
   }
   
   .contact-form input,
   .contact-form select,
   .contact-form textarea {
     width: 100%;
     border-radius: 10px;
     border: 1px solid #1f2937;
     padding: 8px 10px;
     background-color: #020617;
     color: #e5e7eb;
     font-size: 0.9rem;
   }
   
   .contact-form input::placeholder,
   .contact-form textarea::placeholder {
     color: #6b7280;
   }
   
   .form-row {
     margin-bottom: 10px;
   }
   
   .checkbox-row label {
     display: flex;
     align-items: flex-start;
     gap: 6px;
     font-size: 0.8rem;
     color: #cbd5f5;
   }
   
   .contact-form input[type="checkbox"] {
     margin-top: 2px;
   }
   
   .form-note {
     font-size: 0.8rem;
     color: #cbd5f5;
     margin-top: 6px;
   }
   
   /* ==========================================================================
      Search Page (real keyword search UI)
      ========================================================================== */
   
   .search-main {
     padding: 72px 0;
   }
   
   .search-title {
     font-size: 32px;
     font-weight: 700;
     margin-bottom: 5px;
   }
   
   .search-subtitle {
     margin-bottom: 25px;
     color: #666;
   }
   
   /* Search Box */
   
   .search-wrapper {
     position: relative;
     width: 100%;
     max-width: 550px;
     margin: 0 auto 30px auto;
   }
   
   .search-wrapper input {
     width: 100%;
     padding: 16px 48px 16px 18px;
     font-size: 18px;
     border: 1.5px solid #ddd;
     border-radius: 12px;
     transition: all 0.25s ease;
     background: #fff;
   }
   
   .search-wrapper input:focus {
     border-color: #0d6efd;
     box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15);
     outline: none;
   }
   
   .search-icon {
     position: absolute;
     right: 16px;
     top: 50%;
     transform: translateY(-50%);
     color: #888;
   }
   
   /* Results */
   
   .search-results {
     max-width: 700px;
     margin: 0 auto;
     background: #fff;
     border-radius: 12px;
     padding: 0;
     box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
     overflow: hidden;
     animation: fadeIn 0.35s ease;
   }
   
   .search-category {
     padding: 12px 18px;
     font-size: 13px;
     text-transform: uppercase;
     letter-spacing: 0.06em;
     font-weight: 700;
     color: #0d6efd;
     background: #f1f7ff;
   }
   
   .result-item {
     padding: 18px 22px;
     border-bottom: 1px solid #eee;
     transition: background 0.25s ease;
   }
   
   .result-item:hover {
     background: #f9f9f9;
   }
   
   .result-title {
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 6px;
   }
   
   .result-snippet {
     line-height: 1.6;
     color: #555;
     font-size: 15px;
   }
   
   mark {
     background: #fff3cd;
     padding: 0 2px;
     border-radius: 4px;
   }
   
   /* Empty / loading */
   
   .no-results {
     padding: 25px;
     text-align: center;
     color: #777;
     font-style: italic;
   }
   
   .loading {
     padding: 12px;
     text-align: center;
     color: #aaa;
   }
   
   /* ==========================================================================
      Footer
      ========================================================================== */
   
   .site-footer {
     background-color: #020617;
     color: #9ca3af;
     padding-top: 32px;
     margin-top: 32px;
   }
   
   .footer-inner {
     display: flex;
     justify-content: space-between;
     gap: 32px;
     padding-bottom: 16px;
   }
   
   .footer-col h4 {
     margin-top: 0;
     margin-bottom: 8px;
     color: #e5e7eb;
     font-size: 0.95rem;
   }
   
   .footer-links {
     list-style: none;
     padding: 0;
     margin: 0;
     font-size: 0.85rem;
   }
   
   .footer-links li {
     margin-bottom: 4px;
   }
   
   .footer-links a {
     color: #9ca3af;
   }
   
   .footer-links a:hover {
     color: #e5e7eb;
     text-decoration: none;
   }
   
   /* Bottom strip */
   
   .footer-bottom {
     border-top: 1px solid #1f2937;
     margin-top: 16px;
     padding: 10px 0;
     font-size: 0.8rem;
   }
   
   .footer-bottom-inner {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
   
   /* ==========================================================================
      Floating WhatsApp button
      ========================================================================== */
   
   .whatsapp-float {
     position: fixed;
     bottom: 22px;
     right: 22px;
     width: 56px;
     height: 56px;
     border-radius: 50%;
     background: #25d366;
     color: #ffffff;
     font-size: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
     text-decoration: none;
     z-index: 60;
   }
   
   /* RTL position */
   
   html[dir="rtl"] .whatsapp-float {
     right: auto;
     left: 22px;
   }
   
   /* ==========================================================================
      404 page
      ========================================================================== */
   
   .error-page {
     min-height: calc(100vh - var(--header-height));
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 40px 16px;
     text-align: center;
   }
   
   .error-page img {
     max-width: 260px;
     margin-bottom: 24px;
   }
   
   .error-page h1 {
     margin-bottom: 8px;
   }
   
   .error-page p {
     max-width: 420px;
     margin: 0 auto 16px;
     color: var(--fg-muted);
   }
   
   /* ==========================================================================
      Reveal-on-scroll animation
      ========================================================================== */
   
   /* Default: visible (for users with JS disabled) */
   .reveal {
     opacity: 1;
     transform: none;
     transition: all 0.8s ease-out;
     will-change: opacity, transform;
   }
   
   /* When JS marks body as reveal-ready, we enable animated state */
   body.reveal-ready .reveal {
     opacity: 0;
     transform: translateY(30px);
   }
   
   /* When element becomes visible via IntersectionObserver */
   .reveal-visible {
     opacity: 1 !important;
     transform: translateY(0) !important;
   }
   
   /* Slight stagger for cards */
   .services-grid .card.reveal,
   .cases-grid .card.reveal,
   .articles-grid .card.reveal {
     transition-delay: 0.08s;
   }
   .services-grid .card.reveal:nth-child(2),
   .cases-grid .card.reveal:nth-child(2),
   .articles-grid .card.reveal:nth-child(2) {
     transition-delay: 0.16s;
   }
   .services-grid .card.reveal:nth-child(3),
   .cases-grid .card.reveal:nth-child(3),
   .articles-grid .card.reveal:nth-child(3) {
     transition-delay: 0.24s;
   }
   
   /* ==========================================================================
      Utilities & Media Queries
      ========================================================================== */
   
   @keyframes fadeIn {
     from {
       opacity: 0;
       transform: translateY(10px);
     }
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }
   
   /* Tablet / mobile stacking */
   
   @media (max-width: 900px) {
     .hero-grid,
     .about-grid,
     .contact-grid,
     .footer-inner {
       grid-template-columns: minmax(0, 1fr);
       display: grid;
     }
   
     .section {
       padding: 56px 0;
     }
   
     .hero {
       padding-top: calc(var(--header-height) + 24px);
     }
   }
   
   /* Footer stack on small screens */
   
   @media (max-width: 640px) {
     .footer-bottom-inner {
       flex-direction: column;
       align-items: flex-start;
       gap: 6px;
     }
   }
   
   /* ======== NAV OVERLAY ======== */
#nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease;
  z-index: 9997;
}

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