:root{
  --bg:#fff;
  --text:#0f172a;
  --muted:rgba(15,23,42,.65);
  --border:rgba(15,23,42,.12);
  --hover:rgba(79,123,255,.08);
  --accent:#4f7bff;
  --radius:999px;
  --shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 10px 25px rgba(2,6,23,.08),
    0 40px 70px rgba(2,6,23,.10);
}

/* Header shell */
.zapp-header{
  position: sticky;
  top: 14px;
  z-index: 9999;
}

.zapp-shell{
  max-width: 1180px;
  margin: 25px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 6px;
}

.zapp-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 18px;
}

/* Brand */
.zapp-brand{text-decoration:none;display:grid}
.zapp-logo{height:40px}

/* Menu */
.zapp-menu{display:flex;align-items:center;gap:14px}
.zapp-links{
  display:flex;
  gap:6px;
  padding:6px;
  border-radius:var(--radius);
  border:1px solid var(--border);
}

.zapp-link{
  background:none;
  border:0;
  padding:10px 14px;
  border-radius:var(--radius);
  font-weight:700;
  color:var(--muted);
  cursor:pointer;
  text-decoration:none;
}
.zapp-link:hover{background:var(--hover);color:var(--text)}

/* CTA */
.zapp-cta{
  padding:12px 18px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:rgba(15,23,42,.03);
  font-weight:800;
  text-decoration:none;
  color:var(--text);
}
.zapp-cta:hover{background:var(--hover)}

/* Dropdown */
.zapp-dd{position:relative}
.zapp-chev{width:16px;margin-left:6px}
.zapp-dd-wrap{display:none;position:absolute;top:100%;left:0;padding-top:8px}
.zapp-dd-panel{
  min-width:300px;
  background:#fff;
  border-radius:16px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  padding:10px;
}
.zapp-dd-item{
  display:block;
  padding:10px;
  border-radius:12px;
  text-decoration:none;
  color:var(--muted);
}
.zapp-dd-item:hover{background:var(--hover);color:var(--text)}
.zapp-dd[data-open="true"] .zapp-dd-wrap{display:block}

/* Burger */
.zapp-burger{display:none}

/* Mobile */
@media(max-width:900px){

  .zapp-dd{width:100%;}
  .zapp-dd-btn{width:100%; justify-content:space-between;}

  /* stop absolute overlay on mobile */
  .zapp-dd-wrap{
    position: static !important;
    top: auto !important;
    left: auto !important;
    padding-top: 8px;
    width: 100%;
  }
  .zapp-dd-panel{min-width:0 !important;width:100%;}

  .zapp-burger{
    display:block;
    border:1px solid var(--border);
    background:none;
    padding:10px;
    border-radius:12px
  }
  .zapp-burger span{
    display:block;width:20px;height:2px;background:#000;margin:4px 0
  }

  .zapp-menu{
    display:none;
    position:fixed;
    top:90px;left:12px;right:12px;
    background:#fff;
    border-radius:22px;
    box-shadow:var(--shadow);
    padding:12px;
    flex-direction:column;
  }
  .zapp-header[data-open="true"] .zapp-menu{display:flex}
  .zapp-links{flex-direction:column;border:none;}
}