:root{
  --bg-low:#19191C;
  --bg-elev:#111113;
  --border:#3C3F43;
  --text:#E3E3E3;
  --text-variant:#C4C7C5;
  --primary:#A8C7FA;
  --accent:#60A5FA;
}
/* Base */
html,body{height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
  background-color:var(--bg-low);
  color:var(--text);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.font-display{font-family:'Lexend',sans-serif}
.elev{background-color:var(--bg-elev)}
.text-variant{color:var(--text-variant)}
.border-main{border-color:var(--border)}
.btn{background-color:#2A2B2F; color:var(--text)}
.kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;
  font-size:12px; background:rgba(255,255,255,0.06);
  padding:2px 6px; border-radius:6px;
  border:1px solid rgba(255,255,255,0.1);
}
/* Search dropdown */
.results{
  position:absolute; top:100%; left:0; right:0; z-index:50;
  background:rgba(28,29,33,0.98); border:1px solid rgba(255,255,255,0.06);
  border-radius:12px; margin-top:8px; box-shadow:0 10px 30px rgba(0,0,0,.35);
  max-height:60vh; overflow:auto; backdrop-filter:blur(6px)
}
.result-item{padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.06); cursor:pointer}
.result-item:last-child{border-bottom:none}
.result-item[aria-selected="true"], .result-item:hover{background:rgba(255,255,255,0.06)}
.result-title{font-weight:600; font-size:14px}
.result-snippet{font-size:13px; color:var(--text-variant); margin-top:2px; line-height:1.35}
mark{background:rgba(168,199,250,0.25); color:inherit; padding:0 .1em; border-radius:4px}
/* Mobile tweaks */
@media (max-width: 768px){
  .nav-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .nav-wrap a{white-space:nowrap}
  .search-wrap{position:relative; width:100%}
}
/* Utilities */
.visually-hidden{position:absolute!important; height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px); white-space:nowrap}
.outline-flash{outline:2px solid var(--accent); outline-offset:4px; transition:outline-color .6s ease}
/* Header logo img sizing fallback */
img.logo{height:72px; width:auto; object-fit:contain; user-select:none}
/* Footer */
footer small, footer{color:var(--text-variant)}
/* Links for contacts */
a[href^="mailto:"], a[href^="tel:"]{text-decoration:underline}