:root{
      --nav-grad-a:#13283b;
      --nav-grad-b:#0e1c2a;
      --glass-bg:rgba(17,43,74,.62);
      --glass-bg-fallback:#17304a;
      --glass-stroke:rgba(255,255,255,.14);
      --ink-light:#eaf2ff;
      --ink-dim:#c7d2e1;
      --line:rgba(255,255,255,.10);
      --shadow-outer:0 30px 80px rgba(0,10,20,.35), 0 10px 28px rgba(0,10,20,.22);
      --shadow-soft:inset 0 1px 0 rgba(255,255,255,.08);
    }

    *{box-sizing:border-box}
    body{
      font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
      background:#0b0f14;
      color:#111;
    }
    .container {
        max-width: 1600px;
    }

    /* ===== NAVBAR (glass bar) ===== */
    .navbar{
      background:linear-gradient(180deg,var(--nav-grad-a),var(--nav-grad-b));
      padding:.35rem 0;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .navbar .navbar-brand,
    .navbar .nav-link,
    .navbar .navbar-toggler{color:#fff!important;}
    .navbar .navbar-brand{
      font-weight:800;
      letter-spacing:.2px;
      padding-top:.1rem;
      padding-bottom:.1rem;
    }
    .navbar .nav-link{
      font-weight:700;
      font-size:.95rem;
      padding:.44rem .62rem;
    }
    .dropdown-toggle::after{display:none!important;}
    .navbar .nav-link:hover,
    .navbar .nav-link:focus,
    .navbar .nav-link.show{
      background:rgba(255,255,255,.06);
    }

    /* Right-side icon buttons (always visible) */
    .icon-btn{
      border:1px solid rgba(255,255,255,.45);
      color:#fff;
      background:transparent;
      padding:.34rem .58rem;
      border-radius:0;
    }
    .icon-btn:hover{
      background:rgba(255,255,255,.1);
      color:#fff;
    }

    /* ===== GLASS DROPDOWNS (desktop) ===== */
    .dropdown-menu{
      background:var(--glass-bg);
      -webkit-backdrop-filter: blur(10px) saturate(125%);
              backdrop-filter: blur(10px) saturate(125%);
      background-color:var(--glass-bg-fallback); /* fallback */
      border:1px solid var(--glass-stroke);
      border-radius:0;
      color:var(--ink-light);
      padding:.6rem;
      box-shadow:var(--shadow-outer);
      margin-top:0!important;        /* flush with navbar bottom */
      top:100%!important;
      left:0!important;              /* align to trigger's left edge */
      transform:none!important;
      min-width:220px;
      position:absolute;
    }
    .dropdown-menu::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      box-shadow:var(--shadow-soft);
      border-radius:0;
    }
    .dropdown-item{
      color:var(--ink-light);
      padding:.38rem .6rem;
      font-weight:600;
    }
    .dropdown-item:hover{
      background:rgba(255,255,255,.06);
      color:#fff;
    }
    .dropdown-divider{
      border-top:1px solid var(--line);
      opacity:1;
    }

    /* ===== MEGA PANEL ===== */
    .dropdown-mega{
      min-width:clamp(580px,62vw,940px);
      padding:.85rem;
    }
    .dropdown-header{
      font-size:.78rem;
      font-weight:800;
      color:var(--ink-dim);
      text-transform:uppercase;
      letter-spacing:.6px;
      margin:.15rem 0 .4rem;
    }
    .product-card{
      display:grid;
      grid-template-columns:48px 1fr;
      gap:.6rem;
      padding:.44rem .5rem;
      border:1px solid rgba(255,255,255,.06);
      transition:background .12s ease,border-color .12s ease,transform .12s ease;
    }
    .product-card:hover{
      background:rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.14);
      transform:translateY(-1px);
    }
    .product-card img{
      width:48px;
      height:48px;
      object-fit:cover;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.08);
    }
    .product-title{
      margin:0;
      font-size:.95rem;
      font-weight:800;
      color:#fff;
    }
    .product-desc{
      margin:.08rem 0 0;
      font-size:.83rem;
      color:var(--ink-dim);
      line-height:1.25;
    }

    /* Desktop anchoring */
    @media (min-width:992px){
      .nav-item.dropdown{position:relative;}
      .nav-item .dropdown-menu{left:0;right:auto;}
    }

    /* ===== MOBILE TWEAKS ===== */
    @media (max-width:991.98px){
      /* Make dropdowns align with container padding on BOTH sides */
      .navbar .dropdown-menu{
        position:static;
        width:100%;
        min-width:0;
        margin-top:.3rem!important;
        box-shadow:none;            /* softer on mobile */
      }
      .navbar .dropdown-mega{
        min-width:0;
      }
    }

    /* Demo body content */
    .page-wrap{
      background:linear-gradient(180deg,#0b121a 0%,#0f1722 100%);
      min-height:50vh;
      color:#c7d0dc;
    }