#productCategoriesContainer {
      padding: 20px;
      background-color: #0a0a1a; /* Dark background */
      color: #fff;
  }

  .category-title {
      font-size: 1.5rem;
      margin-bottom: 10px;
      font-weight: bold;
      color: #00ffff; /* Neon cyan for category headings */
  }

  .product-row {
      display: flex;
      overflow-x: auto;
      gap: 15px;
      padding: 10px 0;
      scrollbar-width: thin;
      scrollbar-color: #00ffff transparent;
  }

  .product-row::-webkit-scrollbar {
      height: 8px;
  }

  .product-row::-webkit-scrollbar-thumb {
      background-color: #00ffff;
      border-radius: 10px;
  }

  .product-row::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.1);
  }

  /* Product Card */
  .product-card {
      min-width: 260px;
      background: rgba(18, 18, 36, 0.9);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      position: relative;
      cursor: pointer;
  }

  .product-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
  }

  /* Product Image */
  .product-image img {
      width: 100%;
      height: 160px;
      object-fit: cover;
      background: #121228;
  }

  /* Product Info */
  .product-info {
      padding: 12px;
      color: white;
      font-family: "Montserrat", sans-serif;
  }

  .product-name {
      font-size: 1rem;
      font-weight: 600;
      margin: 5px 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #fff;
  }

  .product-price {
      font-size: 1rem;
      color: #00ffcc;
      font-weight: bold;
      margin: 5px 0;
  }

  .product-compatibility {
      font-size: 0.85rem;
      color: #bbb;
      margin-top: 5px;
  }

  .product-compatibility strong {
      color: #00d8d8;
  }

  .product-features {
      font-size: 0.8rem;
      color: white;
      height: 40px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }

  /* Product Actions */
  .product-actions {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      background: rgba(0, 0, 0, 0.6);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .product-actions button {
      padding: 6px 12px;
      font-size: 0.85rem;
      cursor: pointer;
      border: none;
      border-radius: 6px;
      transition: background 0.3s ease, transform 0.2s ease;
      font-weight: bold;
  }

  .product-actions button:hover {
      transform: translateY(-2px);
  }

  .btn-add-cart {
      background: olivedrab;
      color: #fff;
  }

  .btn-add-cart:hover {
      background: #1e7e34;
  }

  .btn-view-details {
      background: #007bff;
      color: #fff;
  }

  .btn-view-details:hover {
      background: #0056b3;
  }


  .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
      padding: 20px;
  }

  .product-card {
      background: black;
      border: 1px solid #ddd;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      transition: transform 0.3s ease;
  }

  .product-card:hover {
      transform: translateY(-5px);
  }

  .product-image img {
      width: 100%;
      height: 180px;
      object-fit: cover;
  }

  .product-info {
      padding: 10px;
  }

  .product-name {
      font-size: 1.1rem;
      margin: 5px 0;
      font-weight: 600;
      color: white;
  }

  .product-price {
      font-size: 1rem;
      color: #007bff;
      margin: 5px 0;
  }

  .product-compatibility {
      font-size: 0.85rem;
      color: #555;
      margin: 5px 0;
  }

  .spec-value {
      color: wheat; /* bright white */
       /* optional neon glow effect */
  }


  .product-features {
      font-size: 0.8rem;
      color: #666;
      height: 40px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }

  .product-actions {
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: black;
  }

  .product-actions button {
      padding: 6px 10px;
      font-size: 0.85rem;
      cursor: pointer;
      border: none;
      border-radius: 5px;
      transition: background 0.2s ease;
  }

  .btn-add-cart {
      background: #28a745;
      color: #fff;
  }

  .btn-add-cart:hover {
      background: #218838;
  }

  .btn-view-details {
      background: #007bff;
      color: #fff;
  }

  .btn-view-details:hover {
      background: #0056b3;
  }

      /* Category Filter Styles */
      .category-filters {
          display: flex;
          align-items: center;
          gap: 15px;
          flex-wrap: wrap;
      }

      .category-filter-link {
          padding: 8px 15px;
          background: var(--deep-space, #0a0a1a);
          color: var(--star-white, #fff);
          text-decoration: none;
          border-radius: 6px;
          font-weight: 500;
          transition: all 0.3s ease;
          white-space: nowrap;
      }

      .category-filter-link:hover {
          background: var(--nebula-purple, #8a2be2);
          transform: translateY(-2px);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }

      /* More Categories Dropdown */
      .more-categories {
          position: relative;
          display: inline-block;
      }

      .more-btn {
          padding: 8px 15px;
          background: var(--neon-cyan, #00ffff);
          color: var(--deep-space, #0a0a1a);
          border: none;
          border-radius: 6px;
          cursor: pointer;
          font-weight: 600;
          display: flex;
          align-items: center;
          gap: 5px;
      }

      .more-btn:hover {
          background: #00d8d8;
      }

      .more-btn i {
          font-size: 14px;

          border-style: solid;
          transition: transform 0.3s ease;
          margin-top: 22px;
          align-self: center;
      }

      .more-dropdown {
          position: absolute;
          top: 100%;
          left: 0;
          background: var(--frosted-glass, rgba(18, 18, 36, 0.8));
          backdrop-filter: blur(10px);
          min-width: 200px;
          border-radius: 8px;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
          z-index: 100;
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.3s ease;
          opacity: 0;
      }

      .more-dropdown.active {
          max-height: 300px;
          opacity: 1;
          padding: 10px 0;
          overflow-y: auto;
          margin-top: 5px;
      }

      .more-dropdown a {
          display: block;
          padding: 10px 15px;
          color: var(--star-white, #fff);
          text-decoration: none;
          transition: background 0.2s ease;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }

      .more-dropdown a:last-child {
          border-bottom: none;
      }

      .more-dropdown a:hover {
          background: rgba(138, 43, 226, 0.3);
      }

      /* Categories Modal */
      .categories-modal {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.7);
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 1000;
          opacity: 0;
          visibility: hidden;
          transition: all 0.3s ease;
      }

      .categories-modal.active {
          opacity: 1;
          visibility: visible;
      }

      .categories-content {
          background: var(--frosted-glass, rgba(18, 18, 36, 0.9));
          backdrop-filter: blur(15px);
          border-radius: 12px;
          max-width: 800px;
          width: 90%;
          max-height: 80vh;
          overflow-y: auto;
          padding: 25px;
          border: 1px solid rgba(255, 255, 255, 0.1);
          position: relative;
      }

      .categories-close {
          position: absolute;
          top: 15px;
          right: 15px;
          font-size: 24px;
          color: var(--star-white, #fff);
          cursor: pointer;
          transition: color 0.2s ease;
      }

      .categories-close:hover {
          color: var(--neon-cyan, #00ffff);
      }

      .categories-title {
          margin-top: 0;
          margin-bottom: 20px;
          color: var(--neon-cyan, #00ffff);
          text-align: center;
          font-size: 1.8rem;
      }

      .categories-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
          gap: 15px;
      }

      .categories-grid a {
          padding: 15px;
          background: rgba(255, 255, 255, 0.05);
          border-radius: 8px;
          text-align: center;
          color: var(--star-white, #fff);
          text-decoration: none;
          transition: all 0.3s ease;
      }

      .categories-grid a:hover {
          background: var(--nebula-purple, #8a2be2);
          transform: translateY(-3px);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      }

      .filters-wrapper {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 15px; /* Space between top categories and "More Categories" */
          margin-bottom: 15px; /* Add some bottom margin if needed */
      }






          /* -------------------------------
           CSS Variables & Global Styles
           ------------------------------- */
          :root {
              --primary-color: #3b82f6;
              --secondary-color: #14b8a6;
              --dark-bg: #0f172a;
              --text-color: #f1f5f9;
              --card-bg: rgba(15, 23, 42, 0.9);
              --transition: all 0.3s ease;
              --light-bg: #171717;
              --footer-bg: #0f172a;
              --footer-text: #cbd5e1;
          }

          * {
              margin: 0;
              padding: 0;
              box-sizing: border-box;
          }

          html {
              scroll-behavior: smooth;
              font-size: 16px;
          }

          /* Dark-theme globals, scoped to body.legacy-dark.
           *
           * These used to apply to every `body`, on every page that loads this file — and
           * all of those pages are light `body.apple-ui` pages. The result was two themes
           * fighting: unified_theme.css had to !important its way over a dark background,
           * light body text and blue headings on every paint, and anything it missed (the
           * orange .view-button, the #111 footer) leaked through as mismatched colour.
           *
           * Only uploadProduct.html opts in, purely to preserve its existing appearance.
           * The rest of this file's component styles — the auth modal in particular — are
           * still needed everywhere and are deliberately left unscoped.
           */
          body {
              font-family: "Montserrat", sans-serif;
              line-height: 1.6;
          }

          body.legacy-dark {
              color: var(--text-color);
              background: #000 url("../assets/pictures/hero-bg.webp")
                  center center / cover no-repeat fixed;
          }

          a {
              text-decoration: none;
              color: inherit;
              transition: all var(--transition-speed) ease;
          }

          ul {
              list-style: none;
              margin: 0;
              padding: 0;
          }

          /* -------------------------------
           Headings & Text
           ------------------------------- */
          h1,
          h2,
          h3,
          h4,
          h5,
          h6 {
              line-height: 1.3;
              margin-bottom: 1rem;
          }

          p {
              margin-bottom: 1rem;
          }

          /* Colour only under the opted-in dark theme; see the note on body above. */
          body.legacy-dark h1,
          body.legacy-dark h2,
          body.legacy-dark h3,
          body.legacy-dark h4,
          body.legacy-dark h5,
          body.legacy-dark h6 {
              color: var(--primary-color);
          }

          body.legacy-dark p {
              color: var(--text-color);
          }

          /* -------------------------------
           Section Containers & Titles
           ------------------------------- */
          .section-container {
              max-width: 1200px;
              margin: 0 auto;
              padding: 4rem 2rem;
              background: transparent;
          }

          .section-title {
              font-size: 2.5rem;
              text-align: center;
              color: var(--primary-color);
              margin-bottom: 2.5rem;
              position: relative;
              font-weight: 700;
          }

          .section-title:after {
              content: "";
              position: absolute;
              bottom: -10px;
              left: 50%;
              transform: translateX(-50%);
              width: 80px;
              height: 4px;
              background: var(--secondary-color);
              border-radius: 2px;
          }

          /* -------------------------------
           Navbar
           ------------------------------- */
          .navbar {
              background-color: #111;
              padding: 0.75rem 1rem;
              display: flex;
              align-items: center;
              justify-content: space-between;
              z-index: 9999;
              position: relative;
          }

          .navbar a {
              color: #fff;
              text-decoration: none;
              font-weight: 500;
          }

          .navbar-brand a {
              font-size: 1.2rem;
              font-weight: 700;
              margin-right: 1rem;
          }

          .navbar-toggle {
              display: none;
              flex-direction: column;
              background: transparent;
              border: none;
              cursor: pointer;
          }

          .navbar-toggle .bar {
              height: 3px;
              width: 25px;
              background-color: #fff;
              margin: 4px 0;
              transition: 0.4s;
          }

          .navbar-links {
              list-style: none;
              display: flex;
              align-items: center;
              margin: 0;
              transition: max-height 0.4s ease-out;
          }

          .navbar-links li {
              margin: 0 0.5rem;
          }

          .navbar-links a {
              padding: 0.5rem 0.75rem;
              transition: background 0.2s;
          }

          .navbar-links a:hover {
              background-color: #333;
              border-radius: 4px;
          }

          @media (max-width: 768px) {
              .navbar-toggle {
                  display: flex;
              }
              .navbar-links {
                  position: absolute;
                  top: 4rem;
                  left: 0;
                  right: 0;
                  background-color: #111;
                  flex-direction: column;
                  max-height: 0;
                  overflow: hidden;
                  z-index: 9999;
              }
              .navbar-links li {
                  width: 100%;
                  text-align: center;
                  margin: 0;
                  border-bottom: 1px solid #333;
              }
              .navbar-links a {
                  display: block;
                  padding: 1rem;
              }
              .navbar-links.show {
                  max-height: 500px;
              }
          }
          .modal {
              background: #fff;
              color: #333;
              max-width: 400px;
              width: 90%;
              padding: 1.5rem;
              border-radius: 4px;
              position: relative;
          }

          .modal-overlay {
              position: fixed;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: rgba(0, 0, 0, 0.7);
              display: none; /* hidden by default */
              justify-content: center;
              align-items: center;
              z-index: 9999;
          }

          .close-modal {
              position: absolute;
              right: 1rem;
              top: 1rem;
              cursor: pointer;
              font-weight: bold;
          }
          .auth-tabs {
              display: flex;
              border-bottom: 1px solid #eee;
              margin-bottom: 1rem;
          }
          .auth-tabs span {
              flex: 1;
              text-align: center;
              padding: 0.5rem 0;
              cursor: pointer;
              font-weight: 500;
          }
          .auth-tabs span.active {
              border-bottom: 2px solid #333;
          }
          .auth-forms .form-content {
              display: none;
          }
          .auth-forms .form-content.active {
              display: block;
          }
          .auth-forms form input,
          .auth-forms form textarea {
              width: 100%;
              margin-bottom: 1rem;
              padding: 0.5rem;
              box-sizing: border-box;
          }
          .auth-forms form button {
              width: 100%;
              padding: 0.75rem;
              border: none;
              background: #1f73b7;
              color: #fff;
              border-radius: 4px;
              cursor: pointer;
          }

          /* Show overlay when triggered via JS */
          .modal-overlay.show {
              display: flex;
          }
          /* -------------------------------
           Hero Section
           ------------------------------- */
          .hero-section {
              min-height: 90vh;
              display: flex;
              align-items: center;
              background:
                  linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
                  url("../assets/pictures/hero-bg.webp") center/cover
                      fixed;
          }

          .hero-content {
              max-width: 1200px;
              margin: 0 auto;
              text-align: center;
              padding: 2rem;
              background-color: transparent;
              backdrop-filter: none;
              position: relative;
              z-index: 2;
          }

          .hero-content h1 {
              font-size: 3.5rem;
              margin-bottom: 1.5rem;
              color: #ffffff;
              font-weight: 700;
              text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
          }

          .hero-content p {
              font-size: 1.5rem;
              margin-bottom: 2.5rem;
              color: var(--text-color);
          }

          .cta-button {
              display: inline-block;
              padding: 1.2rem 2.5rem;
              background-color: var(--secondary-color);
              color: #fff;
              border-radius: 8px;
              font-weight: 600;
              transition: all var(--transition-speed) ease;
              text-transform: uppercase;
              letter-spacing: 1px;
              box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          }

          .cta-button:hover {
              background-color: var(--primary-color);
              color: #000;
              transform: translateY(-3px);
              box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
          }

          /* -------------------------------
           Hardware Grid & Cards
           ------------------------------- */
          .comparison-chart,
          .pdf-section {
              margin-top: 2rem;
              margin-bottom: 3rem;
          }

          .hardware-grid {
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
              gap: 1.5rem;
              padding: 1rem 0;
          }

          .hardware-item {
              background: var(--card-bg);
              border-radius: 12px;
              padding: 1.5rem;
              transition: var(--transition);
              border: 1px solid rgba(255, 255, 255, 0.1);
          }

          .hardware-item h3 {
              margin-bottom: 1rem;
              color: var(--primary-color);
              font-size: 1.5rem;
          }

          .hardware-item h4 {
              font-size: 1.3rem;
              margin-bottom: 1rem;
              color: var(--primary-color);
          }

          .hardware-item:hover {
              transform: translateY(-5px);
              box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
          }

          /* -------------------------------
           Spec Cards & Product Specs
           ------------------------------- */
          .spec-card {
              background: var(--card-bg);
              backdrop-filter: blur(8px);
              border-radius: 16px;
              padding: 2.5rem;
              box-shadow: var(--card-shadow);
              transition:
                  transform var(--transition-speed) ease,
                  box-shadow var(--transition-speed) ease;
              margin-bottom: 3rem;
          }

          .spec-card:hover {
              transform: translateY(-5px);
              box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
          }

          .spec-card h3 {
              font-size: 1.8rem;
              margin-bottom: 1rem;
              color: var(--primary-color);
          }

          .price-badge {
              background: var(--accent-color);
              color: #fff;
              padding: 0.7rem 1.5rem;
              border-radius: 50px;
              font-weight: 600;
              display: inline-block;
              margin: 1rem 0 1.5rem;
              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          }

          /* -------------------------------
           Feature Lists
           ------------------------------- */
          .feature-list {
              list-style: none;
              padding: 0;
              margin: 0;
              text-align: left;
          }

          .feature-list li {
              padding: 0.5rem 0;
              border-bottom: 1px solid rgba(255, 255, 255, 0.1);
              display: flex;
              align-items: center;
              gap: 0.8rem;
              font-size: 1rem;
          }

          .feature-list li:before {
              content: "✓";
              color: var(--accent-color);
              font-weight: bold;
          }

          .feature-list li:last-child {
              border-bottom: none;
          }

          /* -------------------------------
           Comparison Table
           ------------------------------- */
          .comparison-table {
              width: 100%;
              background: var(--card-bg);
              border-radius: 1rem;
              margin: 2.5rem 0;
              box-shadow: var(--card-shadow);
              overflow-x: auto;
          }

          /* Scoped to the opt-in dark theme. As a bare `table` selector this painted
             --card-bg (near-opaque #0f172a) behind every table on the site, including the
             light policy tables, whose cells are transparent with dark grey text — so the
             refund and privacy tables rendered as dark text on a dark block. Same failure
             as the old bare `body` rule above: a dark-theme global leaking onto light
             pages. Layout properties stay unscoped so table structure is unaffected. */
          table {
              width: 100%;
              border-collapse: collapse;
          }

          body.legacy-dark table {
              background: var(--card-bg);
              backdrop-filter: blur(8px);
              border-radius: 12px;
              overflow: hidden;
          }

          .table-header {
              display: grid;
              grid-template-columns: repeat(5, minmax(150px, 1fr));
              background: rgba(59, 130, 246, 0.1);
              padding: 1rem;
              font-weight: 600;
              min-width: 800px;
          }

          .table-row {
              display: grid;
              grid-template-columns: repeat(5, minmax(150px, 1fr));
              padding: 1rem;
              border-bottom: 1px solid rgba(255, 255, 255, 0.1);
              min-width: 800px;
          }

          th,
          td {
              padding: 1.2rem 1.5rem;
              text-align: left;
              border-bottom: 1px solid rgba(255, 255, 255, 0.1);
              font-size: 1rem;
              color: var(--text-color);
          }

          th {
              background-color: rgba(255, 255, 255, 0.1);
              color: #fff;
              font-weight: 600;
              white-space: nowrap;
          }

          tr:nth-child(even) {
              background-color: rgba(255, 255, 255, 0.04);
          }

          tr:last-child td {
              border-bottom: none;
          }

          /* -------------------------------
           Benefits Grid
           ------------------------------- */
          .benefits-grid {
              display: grid;
              gap: 2.5rem;
              grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
              padding: 2rem 0;
          }

          .benefit-item {
              text-align: center;
              padding: 2.5rem 1.5rem;
              background: var(--card-bg);
              backdrop-filter: blur(8px);
              border-radius: 16px;
              box-shadow: var(--card-shadow);
              transition: transform var(--transition-speed) ease;
          }

          .benefit-item:hover {
              transform: translateY(-8px);
          }

          .benefit-item img {
              width: 80px;
              height: 80px;
              margin-bottom: 1.5rem;
              border-radius: 50%;
              object-fit: cover;
              box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
              padding: 10px;
              background: #f8fafc;
          }

          .benefit-item h3 {
              font-size: 1.5rem;
              margin-bottom: 1rem;
              color: var(--primary-color);
          }

          /* -------------------------------
           PDF Section
           ------------------------------- */
          .pdf-section {
              max-width: 1000px;
              margin: 0 auto;
              padding: 3rem 2rem;
              text-align: left;
              background: var(--card-bg);
              backdrop-filter: blur(8px);
              border-radius: 12px;
              box-shadow: var(--card-shadow);
          }

          .pdf-section h3 {
              color: var(--primary-color);
              margin-top: 2.5rem;
              font-size: 1.8rem;
              border-bottom: 2px solid rgba(255, 255, 255, 0.1);
              padding-bottom: 0.5rem;
          }

          .pdf-subtitle {
              font-size: 1.5rem;
              color: var(--primary-color);
              margin-top: 2rem;
              margin-bottom: 1rem;
          }

          .pdf-section ul {
              list-style: disc;
              margin-left: 2rem;
              margin-bottom: 1.5rem;
          }

          .pdf-section ul li {
              margin-bottom: 0.8rem;
              position: relative;
          }

          .pdf-section p {
              margin-bottom: 1.5rem;
              line-height: 1.8;
          }

          /* -------------------------------
           Footer
           ------------------------------- */
          /* Colour is scoped to the opt-in dark theme for the same reason as the `table`
             rule above. Unscoped, this painted #ccc footer text and links on the light
             footer of every page that loads this sheet — around 1.6:1 against #f8fafc,
             so the footer links were effectively invisible sitewide. unified_theme.css
             recolours `.site-footer` but has no rule for `.footer-links a`, which is why
             the links stayed washed out while the copyright line looked fine. */
          .site-footer {
              text-align: center;
              padding: 1.5rem 1rem;
              margin-top: 2rem;
          }

          body.legacy-dark .site-footer {
              background: #111;
              color: #ccc;
          }

          .footer-content {
              max-width: 1000px;
              margin: 0 auto;
          }

          .footer-links {
              list-style: none;
              display: flex;
              justify-content: center;
              gap: 1rem;
              margin: 1rem 0 0;
              padding: 0;
          }

          .footer-links li {
              margin: 0;
          }

          .footer-links a {
              text-decoration: none;
              font-size: 0.9rem;
          }

          body.legacy-dark .footer-links a {
              color: #ccc;
          }

          .footer-links a:hover {
              text-decoration: underline;
          }

          /* -------------------------------
           Intersection Observer Animations
           ------------------------------- */
          @keyframes fadeInUp {
              from {
                  opacity: 0;
                  transform: translateY(30px);
              }
              to {
                  opacity: 1;
                  transform: translateY(0);
              }
          }

          .animated-heading {
              opacity: 0;
              transform: translateY(30px);
              animation: fadeInUp 0.8s forwards;
          }

          /* -------------------------------
           Icon & Additional Layout Fixes
           ------------------------------- */
          .tech-partners {
              display: flex;
              justify-content: center;
              gap: 2rem;
              margin-top: 1rem;
              padding: 1.5rem;

              /* Slightly brighter border */
              box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Added shadow for depth */
          }

          .partner-logo {
              width: 200px;
              height: 100px;
              object-fit: contain;
              opacity: 0.9;
              transition: all 0.3s ease;
              filter: brightness(0.9) contrast(1.2); /* Adjusted for better visibility */
          }

          .partner-logo:hover {
              opacity: 1;
              transform: scale(1.05);
              filter: brightness(1) contrast(1.3); /* Enhanced on hover */
          }

          .product-header {
              display: flex;
              align-items: center;
              gap: 1rem;
              margin-bottom: 1.5rem;
          }

          .product-icon {
              width: 40px;
              height: 40px;
              object-fit: contain;
              padding: 8px;
              background: rgba(255, 255, 255, 0.1);
              border-radius: 8px;
          }

          .specs {
              display: flex;
              flex-wrap: wrap;
              gap: 0.5rem;
              margin-bottom: 1.5rem;
          }

          .spec-badge {
              display: inline-flex;
              align-items: center;
              gap: 0.5rem;
              padding: 0.5rem 1rem;
              background: rgba(255, 255, 255, 0.05);
              border-radius: 20px;
              font-size: 0.9rem;
          }

          .spec-badge img {
              width: 20px;
              height: 20px;
              object-fit: contain;
          }

          /* -------------------------------
           Media Queries
           ------------------------------- */
          @media (max-width: 768px) {
              .product-header {
                  flex-direction: column;
                  text-align: center;
                  gap: 0.5rem;
              }
              .product-icon {
                  width: 35px;
                  height: 35px;
              }
              .hardware-grid {
                  grid-template-columns: 1fr;
              }
              .spec-badge {
                  font-size: 0.85rem;
                  padding: 0.4rem 0.8rem;
              }
              .spec-badge img {
                  width: 18px;
                  height: 18px;
              }
              .tech-partners {
                  gap: 1rem;
                  padding: 1rem;
              }

              .partner-logo {
                  width: 60px;
                  height: 30px;
              }
          }

          @media (max-width: 992px) {
              .hero-content h1 {
                  font-size: 2.8rem;
              }
              .hero-content p {
                  font-size: 1.3rem;
              }
              .hardware-grid,
              .benefits-grid {
                  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                  gap: 1.5rem;
              }
              .spec-card {
                  padding: 2rem;
              }
          }

          @media (max-width: 1200px) {
              .section-container {
                  padding: 3rem 1.5rem;
              }
              .section-title {
                  font-size: 2.2rem;
              }
          }

          @media (max-width: 576px) {
              .hero-content h1 {
                  font-size: 2.2rem;
              }
              .hero-content p {
                  font-size: 1.1rem;
                  margin-bottom: 1.5rem;
              }
              .cta-button {
                  padding: 0.8rem 1.5rem;
                  font-size: 0.9rem;
              }
              .hardware-item,
              .benefit-item,
              .spec-card {
                  padding: 1.5rem;
              }
              th,
              td {
                  padding: 0.8rem;
                  font-size: 0.9rem;
              }
          }



              /* Additional CSS for merged section */
              .spec-icon {
                  width: 20px;
                  height: 20px;
                  margin-right: 8px;
                  vertical-align: middle;
              }

              .os-support {
                  margin-top: 1.5rem;
                  padding-top: 1rem;
                  border-top: 1px solid rgba(255, 255, 255, 0.1);
                  text-align: center;
              }

              .os-logo {
                  width: 32px;
                  height: 32px;
                  margin: 0 8px;
                  opacity: 0.8;
                  transition: all 0.3s ease;
                  filter: grayscale(0.3);
              }

              .os-logo:hover {
                  opacity: 1;
                  filter: grayscale(0);
                  transform: translateY(-2px);
              }

              .product-header {
                  position: relative;
                  padding-bottom: 1rem;
                  margin-bottom: 1.5rem;
                  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
              }

              .price-badge {
                  position: absolute;
                  top: 0;
                  right: 0;
                  background: var(--secondary-color);
                  padding: 0.5rem 1.2rem;
                  border-radius: 20px;
                  font-size: 0.9rem;
              }

              .feature-list li {
                  padding: 0.8rem 0;
                  display: flex;
                  align-items: center;
              }

              html,
              body {
                  overflow-x: hidden;
              }

              img,
              iframe,
              table {
                  max-width: 100%;
                  height: auto;
              }

              .comparison-table {
                  overflow-x: auto;
                  -webkit-overflow-scrolling: touch;
              }

              .comparison-table {
                  overflow-x: auto;
                  -webkit-overflow-scrolling: touch;
                  margin: 1rem 0;
              }
              .comparison-table table {
                  width: 100%;
                  min-width: 600px; /* Ensures columns display properly on small screens */
                  border-collapse: collapse;
              }
              .comparison-table th,
              .comparison-table td {
                  padding: 0.8rem;
                  text-align: left;
                  border: 1px solid #444;
              }
              .comparison-table th {
                  background: var(--dark-bg);
                  color: var(--text-color);
              }

#signup-otp-modal.modal-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

#signup-otp-modal.modal-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

#signup-otp-modal .otp-shell {
    transform: translateX(36px) scale(0.98);
    opacity: 0;
    transition: transform 240ms ease, opacity 220ms ease;
}

#signup-otp-modal.show .otp-shell {
    transform: translateX(0) scale(1);
    opacity: 1;
}

/* -----------------------------------------
   Auth modal (email-first flow, Apple-like look)
------------------------------------------ */
body.modal-open {
    overflow: hidden;
}

#auth-modal.modal-overlay {
    position: fixed;
    inset: 0;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 14px;
    overflow: hidden;
    background: transparent;
}

#auth-modal.modal-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.18) 0%, rgba(240, 243, 248, 0.08) 35%, rgba(15, 23, 42, 0.3) 100%),
      rgba(12, 18, 29, 0.32);
    backdrop-filter: blur(10px) saturate(1.04);
    z-index: 0;
}

#auth-modal.modal-overlay.show {
    display: flex;
}

#auth-modal .auth-shell {
    position: relative;
    z-index: 1;
    width: min(700px, 95vw);
    max-height: calc(100dvh - 28px);
    overflow: hidden;
    margin: 0 auto;
    padding: 20px 22px 16px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: linear-gradient(170deg, rgba(255, 255, 255, 0.74), rgba(247, 248, 251, 0.68));
    box-shadow:
      0 22px 58px rgba(15, 23, 42, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px) saturate(1.05);
    color: #1d1d1f;
}

#auth-modal .close-modal {
    position: absolute;
    top: 14px;
    right: 14px;
    /* The visible circle stays 32px; the tappable box is padded out to 44px so the
       control is not a thumb-sized miss on a phone. */
    width: 32px;
    height: 32px;
    box-sizing: content-box;
    padding: 6px;
    margin: -6px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 20px;
    color: #5f6571;
    transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

#auth-modal .close-modal:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #111827;
    transform: scale(1.05);
}

#auth-modal .auth-header {
    padding-right: 34px;
    margin-bottom: 8px;
}

#auth-modal .auth-title {
    margin: 0;
    font-size: 1.34rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

#auth-modal .auth-subtitle {
    margin: 6px 0 0;
    font-size: 0.85rem;
    line-height: 1.35;
    color: #636a76;
}

#auth-modal .auth-progress {
    display: flex;
    gap: 8px;
    margin: 8px 0 10px;
}

#auth-modal .auth-progress .step {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #6b7280;
    background: #eef1f6;
    border: 1px solid #e1e7f0;
    transition: all 180ms ease;
}

#auth-modal .auth-progress .step.active {
    color: #0b5cab;
    background: #e9f2ff;
    border-color: #b8d7ff;
}

#auth-modal .auth-action-loading {
    display: none;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    padding: 8px 10px;
    border-radius: 12px;
    background: #edf4ff;
    color: #20538a;
    font-size: 0.84rem;
}

#auth-modal .auth-action-loading.show {
    display: flex;
}

#auth-modal .inline-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(32, 83, 138, 0.25);
    border-top-color: #20538a;
    border-radius: 50%;
    animation: authSpin 0.75s linear infinite;
}

#auth-modal .auth-stage-wrap {
    position: relative;
    border: 1px solid rgba(205, 214, 228, 0.78);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.56);
    padding: 14px 14px 12px;
    overflow: hidden;
}

#auth-modal .form-content {
    /* Override global .form-content absolute positioning from legacy styles. */
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: none;
    animation: authStageIn 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

#auth-modal .form-content.active {
    display: block !important;
}

@keyframes authSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes authStageIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#auth-modal .form-group.compact {
    margin-bottom: 12px;
}

#auth-modal .form-group label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.25;
    color: #4f5663;
}

#auth-modal input,
#auth-modal textarea,
#auth-modal select {
    width: 100%;
    border-radius: 12px;
    border: 1px solid #d5dde8;
    background: #ffffff;
    color: #1f2937;
    font-size: 0.9rem;
    padding: 9px 11px;
    outline: none;
    transition: border-color 170ms ease, box-shadow 170ms ease, transform 160ms ease;
}

/* iOS Safari zooms the page when a focused field is under 16px, and it does not zoom
   back out on blur. In a sign-in modal that leaves the whole site scaled up. */
@media (max-width: 900px) {
    #auth-modal input,
    #auth-modal textarea,
    #auth-modal select {
        font-size: 16px;
        min-height: 44px;
    }
}

#auth-modal input::placeholder,
#auth-modal textarea::placeholder {
    color: #99a2b0;
}

#auth-modal input:focus,
#auth-modal textarea:focus,
#auth-modal select:focus {
    border-color: #8ebdff;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.13);
}

#auth-modal .btn {
    width: 100%;
    margin-top: 8px;
    border-radius: 999px;
    border: 1px solid #d6deea;
    background: #f6f8fb;
    color: #1d2736;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 9px 12px;
    transition: transform 150ms ease, box-shadow 170ms ease, background 170ms ease;
}

#auth-modal .btn:hover {
    transform: translateY(-1px);
    background: #eef2f7;
}

#auth-modal .btn.btn-primary {
    background: linear-gradient(135deg, #0071e3 0%, #4a9cff 100%);
    border-color: #0b78e8;
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(0, 113, 227, 0.22);
}

#auth-modal .btn.btn-primary:hover {
    background: linear-gradient(135deg, #0069d6 0%, #3b90f7 100%);
}

#auth-modal .google-btn {
    background: #ffffff !important;
    color: #243041 !important;
    border: 1px solid #d5deec;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 700;
    letter-spacing: 0.1px;
}

#auth-modal .google-btn:hover {
    background: #f7f9fc !important;
}

#auth-modal .google-btn .google-icon {
    display: inline-flex;
    width: 12px;
    height: 12px;
    align-items: center;
    justify-content: center;
}

#auth-modal .google-btn .google-icon svg {
    width: 12px;
    height: 12px;
    display: block;
}

#auth-modal .forgot-details {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height 220ms ease, opacity 200ms ease, transform 200ms ease;
}

#auth-modal .forgot-details.expanded {
    max-height: 520px;
    opacity: 1;
    transform: translateY(0);
}

#auth-modal .btn.is-loading {
    opacity: 0.85;
    cursor: wait;
}

#auth-modal .status-text {
    margin-top: 8px;
    min-height: 16px;
    font-size: 0.79rem;
    padding-left: 2px;
}

#auth-modal .form-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

#auth-modal .auth-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

#auth-modal .auth-actions a {
    color: #0f6bc8;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}

#auth-modal .auth-actions a:hover {
    text-decoration: underline;
}

#auth-modal .password-strength {
    margin-bottom: 6px;
}

#auth-modal .strength-bar {
    height: 6px;
    border-radius: 999px;
    background: #e5e7eb;
    transition: background 160ms ease;
}

#auth-modal .strength-bar.weak {
    background: #f59e0b;
}

#auth-modal .strength-bar.medium {
    background: #3b82f6;
}

#auth-modal .strength-bar.strong {
    background: #10b981;
}

#auth-modal .strength-text {
    display: inline-block;
    margin-top: 3px;
    font-size: 0.74rem;
    color: #6b7280;
}

#auth-modal form {
    margin: 0;
    display: block;
}

#auth-modal #loginForm,
#auth-modal #registerForm,
#auth-modal #forgotForm,
#auth-modal #emailLookupForm {
    display: block;
}

#auth-modal #loginPrimaryBtn {
    display: block !important;
    width: 100% !important;
}

@media (max-width: 600px) {
    #auth-modal.modal-overlay {
        padding: 8px;
    }

    #auth-modal .auth-shell {
        width: 100%;
        border-radius: 18px;
        max-height: calc(100dvh - 16px);
        padding: 16px 14px 12px;
    }

    #auth-modal .auth-title {
        font-size: 1.25rem;
    }
}

              .comparison-table {
                  overflow-x: auto;
                  margin: 1rem 0;
              }
              .comparison-table table {
                  width: 100%;
                  border-collapse: collapse;
                  min-width: 500px;
              }
              .comparison-table th,
              .comparison-table td {
                  padding: 0.75rem;
                  text-align: left;
                  border: 1px solid #444;
                  font-size: 0.9rem;
              }
              .comparison-table th {
                  background: var(--dark-bg);
                  color: var(--text-color);
              }