nav {
    position: fixed;        /* stays on top */
    top: 0;
    left: 0;
    width: 100%;
  
    z-index: 1000;          /* above all sections */
    background: var(--bg); /* same as hero background */
  
    display: flex;
    justify-content: space-between;
    align-items: center;
  
    padding: 18px 56px;
  
    border-bottom: 1px solid rgba(0,0,0,0.06);
    backdrop-filter: blur(6px); /* subtle premium feel */
  }
  
  nav .logo {
    font-weight: 800;
  }
  
  nav a {
    text-decoration: none;
    color: var(--text);
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 999px;
    transition: background 0.25s ease;
  }
  
  /* subtle hover */
  nav a:hover {
    background: rgba(11, 58, 42, 0.08);
    color: var(--text);
  }
  
  /* active section */
  nav a.active {
    background: var(--primary);
    color: #ffffff;
  }
  
  .actions {
    display: flex;
    gap: 28px;
    align-items: center;
  }
  
  .actions a {
    text-decoration: none;
    color: var(--text);
    font-weight: 500;
  }
  
  /* CTA button */
  .actions a.btn {
    background: var(--primary);
    color: #ffffff;      /* ✅ NOW IT WILL WORK */
    padding: 9px 18px;
    border-radius: 9px;
    font-size: 14px;
  }
  
  .actions a.btn:hover {
    background: #0f5a41;  /* ⬅ lighter green */
    color: #ffffff;       /* stays white */
  }