/* ========================
       Design Tokens
       ======================== */
    :root {
      --text: #e8eefc;          /* primary text */
      --muted: #a6b3d9;         /* secondary text */
      --line: rgba(255,255,255,0.10);
      --accent: #8bdbff;        /* cyan */
      --shadow: 0 20px 50px rgba(0,0,0,0.35);
      --radius: 16px;
      --ring: 0 0 0 3px rgba(139, 219, 255, 0.33);
      --ease: cubic-bezier(.2,.7,.2,1);
    }

    @media (prefers-color-scheme: light) {
      :root {
        --text: #111827;
        --muted: #4b5563;
        --line: rgba(17,24,39,.12);
        --shadow: 0 24px 48px rgba(17,24,39,.08);
      }
    }


    .mega {
	position: fixed;
	top: 64px;
      width: auto;
      max-width: 1050px;
      right: 0px;
      background: linear-gradient(180deg, rgba(232,239,255,.98), rgba(232,239,258,.95));
      z-index: 99999;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: clamp(12px, 2vw, 18px);
      display: none; /* toggled */
    }

    .mega.open { 
	    display: block; 
	    	animation: pop 0.75s var(--ease); } 

    @keyframes pop { from { opacity: 0; } to { opacity: 1; } }

    .mega-grid-one {
      display: grid;
      grid-template-columns: 1.1fr;
      gap: clamp(10px, 2vw, 16px);
	    
    }
    .mega-grid {
      display: grid;
      grid-template-columns: 1.1fr 1fr 1fr;
      gap: clamp(10px, 2vw, 16px);
    }

    .col { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 14px; padding: clamp(10px, 2vw, 14px); }
    .col h4 { margin: 2px 0 10px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

    .link {
      display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: start;
      padding: 10px; border-radius: 12px; text-decoration: none; color: var(--text);
      border: 1px solid transparent; transition: background .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
    }
    .link:hover { background: rgba(255,255,255,.06); border-color: var(--line); }
    .link:active { transform: translateY(1px); }

    .icon {
      width: 28px; height: 28px; border-radius: 10px; display: grid; place-items: center;

      background: linear-gradient(135deg, #0c7ffb,#0c8ffd);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 6px 14px rgba(0,0,0,.25);
    }
    .icon svg { width: 16px; height: 16px; mix-blend-mode: plus-lighter; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }

    .meta { color: var(--muted); font-size: 13px; line-height: 1.35; }

    /* Dim overlay when panel or drawer open */
    .overlaymenu { position: fixed; inset: 0; background: rgba(6,10,20,.45); backdrop-filter: blur(2px); display: none; z-index: 40;
    		top: 74px;}
    .overlaymenu.show { display: block; }

    .mega h4 {
	color: #0c7ffb;
    }

    .menumobpop { display: none; 
	    text-align:left; }
    .openmobile { display:none;} 
    /* ========================
       Mobile & Responsive Tweaks
       ======================== */
    @media (max-width: 1200px) {
      .mega-grid { grid-template-columns: 1fr 1fr 1fr; }
    }

    @media (max-width: 1024px) {
      .mega-grid { grid-template-columns: 1fr 1fr; }
    }
   
    @media (max-width: 768px) {
	    .openmobile {display: block !important; }
      .nav { height: 64px; }
      .mega { position: fixed; left: 0; right: 0; top: 64px; transform: none; width: auto; border-radius: 0; border-left: none; border-right: none; }
      .mega-grid { grid-template-columns: 1fr; }
      .col { background: transparent; border: none; padding: 6px; }
      .icon { width: 24px; height: 24px; }
      .link { grid-template-columns: 24px 1fr; }
      /* Let content scroll within the panel on small screens */
      .mega { max-height: calc(100dvh - 64px); overflow: auto; -webkit-overflow-scrolling: touch; }

       .overlaymenu .show { display: none !important; }
	.overlaymenu { background-color: #FFFF00 !important; display: none !important} 

    }

    @media (max-width: 420px) {
      .brand { font-size: 18px; }
      .nav-item { padding: 10px 12px; }
      .link { padding: 8px; }
    }