:root{
      --navy:#192230;
      --slate:#3d474e;
      --yellow:#ffcd00;
      --charcoal:#2c2f38;
      --white:#ffffff;
      --ink:#f8fafc;
      --muted:#aeb6c2;
      --line:rgba(255,255,255,.10);
      --glass:rgba(25,34,48,.88);
      --shadow-lg:0 20px 55px rgba(9,14,22,.24), 0 8px 20px rgba(9,14,22,.16);
      --shadow-yellow:0 12px 30px rgba(255,205,0,.22);
      --radius:24px;
      --ease:cubic-bezier(.2,.8,.2,1);
    }

    *{box-sizing:border-box}
    
    
    a{text-decoration:none;color:inherit}
    button{font:inherit}

    /* ===== DESKTOP / TABLET TOP HEADER ===== */
    .site-header{
      position:fixed;
      z-index:1000;
      top:20px;
      left:0;
      right:0;
      padding:0 24px;
      pointer-events:none;
    }

    .nav-shell{
      width:min(1480px,100%);
      min-height:84px;
      margin:0 auto;
      display:grid;
      grid-template-columns:auto 1fr auto;
      align-items:center;
      gap:28px;
      padding:12px 14px 12px 20px;
      border:1px solid var(--line);
      border-radius:28px;
      background:
        linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)),
        var(--glass);
      backdrop-filter:blur(22px) saturate(145%);
      -webkit-backdrop-filter:blur(22px) saturate(145%);
      box-shadow:var(--shadow-lg);
      pointer-events:auto;
      overflow:hidden;
      position:relative;
      isolation:isolate;
    }

    .nav-shell::before{
      content:"";
      position:absolute;
      inset:0 auto auto 11%;
      width:34%;
      height:1px;
      background:linear-gradient(90deg,transparent,rgba(255,205,0,.75),transparent);
      opacity:.65;
      z-index:-1;
    }

    .brand{
      display:flex;
      align-items:center;
      min-width:0;
      padding:6px 8px;
      border-radius:18px;
      transition:transform .28s var(--ease), background .28s var(--ease);
    }
    .brand:hover{transform:translateY(-1px);background:rgba(255,255,255,.035)}
    .brand img{display:block;width:190px;max-width:100%;height:auto;object-fit:contain}

    .desktop-nav{
      justify-self:center;
      display:flex;
      align-items:center;
      gap:6px;
      padding:6px;
      border:1px solid rgba(255,255,255,.07);
      border-radius:20px;
      background:rgba(255,255,255,.035);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
    }

    .nav-link{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:44px;
      padding:0 16px;
      border-radius:15px;
      color:#d9dee5;
      font-size:13.5px;
      font-weight:700;
      letter-spacing:-.01em;
      transition:color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
      white-space:nowrap;
    }
    .nav-link::after{
      content:"";
      position:absolute;
      left:50%;
      bottom:6px;
      width:18px;
      height:2px;
      border-radius:999px;
      background:var(--yellow);
      transform:translateX(-50%) scaleX(0);
      transform-origin:center;
      transition:transform .25s var(--ease);
    }
    .nav-link:hover{
      color:var(--white);
      background:rgba(255,255,255,.065);
      transform:translateY(-1px);
    }
    .nav-link:hover::after{transform:translateX(-50%) scaleX(1)}
    .nav-link.active{
      color:var(--navy);
      background:var(--yellow);
      box-shadow:0 8px 22px rgba(255,205,0,.17), inset 0 1px 0 rgba(255,255,255,.48);
    }
    .nav-link.active::after{display:none}

    .nav-actions{display:flex;align-items:center;gap:10px}
    .project-btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      min-height:52px;
      padding:0 19px 0 21px;
      border-radius:18px;
      background:var(--yellow);
      color:var(--navy);
      font-size:13px;
      font-weight:800;
      box-shadow:var(--shadow-yellow), inset 0 1px 0 rgba(255,255,255,.55);
      transition:transform .28s var(--ease), box-shadow .28s var(--ease), filter .28s var(--ease);
      white-space:nowrap;
    }
    .project-btn:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(255,205,0,.28);filter:saturate(1.05)}
    .project-btn svg{width:17px;height:17px;transition:transform .28s var(--ease)}
    .project-btn:hover svg{transform:translate(2px,-2px)}

    .menu-toggle{
      display:none;
      width:48px;
      height:48px;
      border:1px solid rgba(255,255,255,.10);
      border-radius:16px;
      background:rgba(255,255,255,.055);
      color:var(--white);
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition:.25s var(--ease);
    }
    .menu-toggle:hover{background:rgba(255,205,0,.10);border-color:rgba(255,205,0,.35);color:var(--yellow)}
    .menu-toggle svg{width:22px;height:22px}

    /* Mobile dropdown is intentionally part of the header system. */
    .mobile-drawer{
      display:none;
      width:min(720px,calc(100% - 32px));
      margin:10px auto 0;
      padding:10px;
      border:1px solid var(--line);
      border-radius:22px;
      background:rgba(25,34,48,.96);
      backdrop-filter:blur(22px);
      -webkit-backdrop-filter:blur(22px);
      box-shadow:var(--shadow-lg);
      pointer-events:auto;
      transform-origin:top;
    }
    .mobile-drawer.open{display:block;animation:drawerIn .24s var(--ease)}
    @keyframes drawerIn{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}
    .drawer-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .drawer-link{
      display:flex;align-items:center;gap:10px;min-height:48px;padding:0 13px;border-radius:15px;color:#e6ebf0;font-size:12.5px;font-weight:700;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.04);transition:.22s var(--ease)
    }
    .drawer-link:hover{background:rgba(255,205,0,.10);border-color:rgba(255,205,0,.26);color:var(--yellow)}
    .drawer-link svg{width:18px;height:18px;flex:0 0 auto}

    /* ===== MOBILE APP-LIKE TOP + BOTTOM NAVIGATION ===== */
    .mobile-bottom-nav{display:none}

    @media (max-width:1120px){
      .desktop-nav{display:none}
      .menu-toggle{display:inline-flex}
      .nav-shell{grid-template-columns:auto 1fr auto}
      .nav-actions{justify-self:end}
    }

    @media (max-width:700px){
      
      .site-header{top:10px;padding:0 10px}
      .nav-shell{
        min-height:66px;
        grid-template-columns:auto 1fr auto;
        gap:10px;
        padding:8px 8px 8px 12px;
        border-radius:21px;
      }
      .brand{padding:4px}
      .brand img{width:142px}
      .project-btn{min-height:46px;padding:0 13px;border-radius:15px;font-size:0;gap:0}
      .project-btn svg{width:19px;height:19px}
      .menu-toggle{width:46px;height:46px;border-radius:15px}
      .mobile-drawer{width:calc(100% - 20px);margin-top:8px}

      .mobile-bottom-nav{
        display:grid;
        position:fixed;
        z-index:1001;
        left:max(10px,env(safe-area-inset-left));
        right:max(10px,env(safe-area-inset-right));
        bottom:max(10px,env(safe-area-inset-bottom));
        grid-template-columns:repeat(4,1fr);
        gap:4px;
        min-height:70px;
        padding:6px;
        border:1px solid rgba(255,255,255,.12);
        border-radius:24px;
        background:
          linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)),
          rgba(25,34,48,.94);
        backdrop-filter:blur(24px) saturate(145%);
        -webkit-backdrop-filter:blur(24px) saturate(145%);
        box-shadow:0 18px 50px rgba(9,14,22,.30), inset 0 1px 0 rgba(255,255,255,.045);
      }
      .bottom-link{
        position:relative;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;
        min-width:0;
        border-radius:18px;
        color:#aeb7c2;
        font-size:9.5px;
        font-weight:700;
        line-height:1;
        transition:background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
        -webkit-tap-highlight-color:transparent;
      }
      .bottom-link svg{width:20px;height:20px;stroke-width:2}
      .bottom-link:active{transform:scale(.96)}
      .bottom-link:hover{color:var(--white);background:rgba(255,255,255,.05)}
      .bottom-link.active{
        color:var(--navy);
        background:var(--yellow);
        box-shadow:0 8px 22px rgba(255,205,0,.20), inset 0 1px 0 rgba(255,255,255,.55);
      }
      .bottom-link.active::before{
        content:"";position:absolute;top:-1px;left:50%;width:18px;height:3px;border-radius:0 0 999px 999px;background:#fff;transform:translateX(-50%);opacity:.8
      }
    }

    @media (max-width:390px){
      .brand img{width:126px}
      .nav-shell{padding-left:10px}
      .project-btn{width:44px;padding:0;justify-content:center}
      .drawer-grid{grid-template-columns:1fr}
    }

    @media (prefers-reduced-motion:reduce){
      *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
    }
  
/* Final integration refinements */
.site-header{animation:siteHeaderIn .95s cubic-bezier(.2,.8,.2,1) both}
@keyframes siteHeaderIn{
  from{opacity:0;transform:translateY(-16px)}
  to{opacity:1;transform:none}
}
.project-btn{box-shadow:0 10px 28px rgba(9,14,22,.18),inset 0 1px 0 rgba(255,255,255,.55)}
.project-btn:hover{box-shadow:0 14px 32px rgba(9,14,22,.22)}
@media(max-width:700px){
  .mobile-bottom-nav{animation:mobileNavIn .95s cubic-bezier(.2,.8,.2,1) .14s both}
  @keyframes mobileNavIn{
    from{opacity:0;transform:translateY(18px)}
    to{opacity:1;transform:none}
  }
}