:root{
  /* Palette (easy to tweak) */
  --bg: #0b1214;
  --surface: rgba(255,255,255,0.06);
  --surface2: rgba(255,255,255,0.10);
  --border: rgba(255,255,255,0.14);

  /* Inspiro-ish teal accent */
  --accent: #38c8c9;
  --accent2: #b8fff7;

  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.70);

  --max: 1100px;
  --g: 18px;

  --serif: "Fraunces", ui-serif, Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(56,200,201,0.20), transparent 62%),
    radial-gradient(900px 520px at 70% 0%, rgba(255,255,255,0.10), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.65;
}

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--g);
}

.skip-link{
  position:absolute; left:-999px; top:10px;
  background:#fff; color:#111;
  padding:10px 12px; border-radius:12px;
}
.skip-link:focus{left:10px}

.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(11,18,20,0.70);
  border-bottom: 1px solid var(--border);
}

.header-bar{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px var(--g);
}

.brand{
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: 0.2px;
  text-decoration:none;
  color: var(--text);
  font-size: 1.15rem;
}

.nav-toggle{
  margin-left: auto;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 14px;
  cursor:pointer;
  font-weight: 700;
}

.nav{
  width: 100%;
  display:none; /* mobile default collapsed */
  margin-top: 10px;
}

.nav.open{display:block}

.nav > ul{
  list-style:none;
  padding:0;
  margin:0;
  border:1px solid var(--border);
  border-radius: 16px;
  overflow:hidden;
  background: rgba(0,0,0,0.25);
}

.nav li{position:relative}
.nav a{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  text-decoration:none;
  color: var(--text);
  border-bottom:1px solid var(--border);
}
.nav li:last-child > a{border-bottom:none}
.nav a:hover{background: rgba(255,255,255,0.06)}

.nav .subtoggle{
  margin-left: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 999px;
  cursor:pointer;
  font-weight: 800;
  font-size: 0.85rem;
}

/* Nested ULs (submenus) */
.nav li > ul{
  list-style:none;
  padding:0;
  margin:0;
  display:none; /* mobile closed */
  border-top:1px solid var(--border);
  background: rgba(255,255,255,0.03);
}
.nav li.open > ul{display:block}
.nav li > ul a{padding-left: 26px}

/* Main content */
.content{
  padding: 26px var(--g) 70px;
}
.content h1,.content h2,.content h3{
  font-family: var(--serif);
  line-height:1.15;
}
.content h1{
  font-size: clamp(2.0rem, 4vw, 3.1rem);
  margin: 18px 0 12px;
}
.content p{max-width: 72ch; color: var(--text)}
.content a{color: var(--accent2)}
.content a:hover{color: #fff}

.site-footer{
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.22);
}
.footer-bar{
  padding: 20px var(--g);
  color: var(--muted);
}

/* Desktop nav */
@media (min-width: 900px){
  .nav-toggle{display:none}
  .nav{
    display:block !important;
    width:auto;
    margin-left:auto;
    margin-top:0;
  }
  .nav > ul{
    display:flex;
    gap: 10px;
    border:none;
    background: transparent;
    overflow: visible;
  }
  .nav a{
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    padding: 10px 12px;
  }
  .nav a{border-bottom: 1px solid var(--border)}
  .nav li:last-child > a{border-bottom: 1px solid var(--border)}

  .nav .subtoggle{display:none}

  .nav li > ul{
    position:absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 280px;
    border:1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.45);
    display:none;
  }
  .nav li:hover > ul,
  .nav li:focus-within > ul{display:block}
}