:root{
  --bg: #ffffff;
  --text: #0f1720;
  --muted: #516171;
  --accent: #0b84ff;
  --surface: #f7fafc;
  --nav-height: 64px;
  --gap: 12px;
  --radius: 10px;
  --shadow: 0 6px 18px rgba(12,18,24,0.06);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--surface);
  color:var(--text);
  -webkit-tap-highlight-color: transparent;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* NAV */
.nav{
  height:var(--nav-height);
  display:flex;
  align-items:center;
  gap:var(--gap);
  padding:8px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.9));
  box-shadow:var(--shadow);
  position:relative;
  z-index:10;
}

.brand{
  display:inline-flex;
  gap:8px;
  align-items:center;
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  order: 0;
}
.brand svg{display:block}
.brand-logo{
  width:36px;
  height:36px;
  object-fit:contain;
  border-radius:6px;
  display:inline-block;
}
.brand-text{display:none}

/* Toggle button */
.nav-toggle{
  /* place toggle at the left by using flex order and right auto margin */
  order: -1;
  margin-left:0;
  margin-right:auto;
  width:44px;
  height:44px;
  border-radius:8px;
  border:0;
  background:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
}
.nav-toggle:focus{outline:3px solid rgba(11,132,255,0.18)}
.nav-toggle svg{display:block}

/* Menu - desktop layout */
.nav-menu{
  display:flex;
  align-items:center;
  gap:16px;
  margin-left:auto;
  transition:transform .28s ease,opacity .18s ease;
}
.nav-list{
  list-style:none;
  display:flex;
  gap:8px;
  padding:0;
  margin:0;
}
.nav-link{
  padding:8px 12px;
  border-radius:8px;
  color:var(--muted);
  text-decoration:none;
  font-weight:600;
  font-size:15px;
}
.nav-link:hover, .nav-link:focus{color:var(--text); background:rgba(11,132,255,0.06)}

/* Actions */
.nav-actions{display:flex;gap:8px;align-items:center}
.btn{
  min-height:40px;
  padding:8px 12px;
  border-radius:8px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  font-weight:600;
}
.btn.primary{background:var(--accent); color:white}
.btn.ghost{background:transparent; border-color: rgba(11,132,255,0.12); color:var(--accent)}

/* Mobile: collapse menu into drawer */
@media (max-width:720px){
  .brand-text{display:inline-block}
  /* Left-side full-height drawer */
  .nav-menu{
    position:fixed;
    left:0;
    top:var(--nav-height);
    height: calc(100vh - var(--nav-height));
    width: min(88vw, 360px);
    background:linear-gradient(180deg, white, #fbfdff);
    box-shadow: 0 18px 60px rgba(4,10,20,0.12);
    border-radius:0 12px 12px 0;
    padding:12px;
    flex-direction:column;
    align-items:stretch;
    transform-origin:top left;
    transform: translateX(-12px) translateY(0) scale(.98);
    opacity:0;
    pointer-events:none;
    overflow:auto;
  }
  .nav-menu.open{
    transform: translateX(0) translateY(0) scale(1);
    opacity:1;
    pointer-events:auto;
  }
  .nav-list{flex-direction:column; gap:6px}
  .nav-link{display:block; padding:12px 10px; font-size:16px; border-radius:10px}
  .nav-actions{flex-direction:column; gap:8px; margin-top:6px}
  /* Ensure toggle remains visible on left */
  .nav-toggle{position:relative; z-index:11}
}

/* Desktop adjustments */
@media (min-width:721px){
  .nav-toggle{display:none}
  .brand-text{display:inline-block}
}
.content{
  padding:18px;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.hero{max-width:860px;padding:18px;background:transparent;border-radius:12px}
h1{margin:0 0 8px 0;font-size:20px}
p{margin:0;color:var(--muted);font-size:15px}