/* ============ HEADER ============ */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(255, 255, 255, 0.82);
    backdrop-filter:blur(24px) saturate(190%);
    -webkit-backdrop-filter:blur(24px) saturate(190%);
    border-bottom:1px solid rgba(0, 0, 0, 0.06);
    box-shadow:0 4px 20px -4px rgba(0, 0, 0, 0.03);
    transition:background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
  }
  html.dark-mode header{
    background:rgba(14, 19, 25, 0.82);
    backdrop-filter:blur(24px) saturate(190%);
    -webkit-backdrop-filter:blur(24px) saturate(190%);
    border-bottom:1px solid rgba(255, 255, 255, 0.08);
    box-shadow:0 4px 20px -4px rgba(0, 0, 0, 0.4);
  }
  .nav{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:1400px; margin:0 auto; gap:24px;}
  .logo{display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:19px;}
  .logo-mark{
    width:32px;height:32px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 20px rgba(16,185,129,.35);
    border-radius:50%;
    flex-shrink:0;
  }
  .logo-mark svg{width:32px;height:32px;}
  .logo .dotapp{
    font-family:var(--font-mono); font-size:11px; font-weight:600;
    background:var(--blue); color:#fff; padding:2px 6px; border-radius:6px; margin-left:2px;
  }
  .nav-links{display:flex; align-items:center; gap:8px; flex-wrap:nowrap;}
  .nav-links a{
    font-size:13.5px; color:var(--text-muted); font-weight:500;
    padding:8px 14px; border-radius:9999px;
    transition:color .2s ease, background .2s ease;
    white-space:nowrap;
  }
  .nav-links a:hover{
    color:var(--text);
    background:rgba(255, 255, 255, 0.08);
  }
  html:not(.dark-mode) .nav-links a:hover{
    background:rgba(0, 0, 0, 0.05);
  }
  .nav-links a.active{
    color:var(--green-soft); font-weight:600;
    background:rgba(16, 185, 129, 0.1);
  }
  .nav-cta{display:flex; align-items:center; gap:12px;}

  .nav-item-dropdown{position:relative; display:flex; align-items:center;}
  .nav-link-parent{display:flex; align-items:center; gap:2px;}
  .nav-caret-btn{
    background:none; border:none; padding:5px; margin:0; cursor:pointer; color:var(--text-muted);
    display:flex; align-items:center; justify-content:center; border-radius:6px;
  }
  .nav-caret-btn:hover{color:var(--text); background:var(--surface-2);}
  .nav-caret{width:12px;height:12px; transition:transform .25s ease; pointer-events:none;}
  .nav-item-dropdown:hover .nav-caret{transform:rotate(180deg);}
  .nav-dropdown{
    position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(8px);
    width:300px; background:var(--surface); border:1px solid var(--border); border-radius:16px;
    padding:10px; box-shadow:0 20px 50px -12px rgba(0,0,0,.3);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s ease; z-index:50;
  }
  .nav-item-dropdown:hover .nav-dropdown{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);}
  .nav-dd-item{
    display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px;
    color:var(--text); transition:background .18s ease;
  }
  .nav-dd-item:hover{background:var(--surface-2);}
  .nav-dd-icon{
    width:34px;height:34px; border-radius:9px; background:var(--surface-3); flex-shrink:0;
    display:flex; align-items:center; justify-content:center; color:var(--green-soft);
  }
  .nav-dd-icon svg{width:17px;height:17px;}
  .nav-dd-item strong{display:block; font-size:13.5px; font-weight:600;}
  .nav-dd-item small{display:block; font-size:11.5px; color:var(--text-faint); margin-top:1px;}
  .nav-dd-all{
    display:block; text-align:center; font-size:12.5px; font-weight:600; color:var(--green-soft);
    padding:10px; margin-top:4px; border-top:1px solid var(--border-soft);
  }
  .nav-overlay{
    display:none; position:fixed; inset:0; top:64px; background:rgba(10,15,20,.6); z-index:58;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    opacity:0; transition:opacity .25s ease;
  }
  .nav-overlay.open{display:block; opacity:1;}