/* Base resets & scaffolding */
*{box-sizing:border-box}
::selection{background:rgba(94,234,212,.25);color:var(--text)}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(94,234,212,.12), transparent 60%),
    radial-gradient(900px 500px at 10% -20%, rgba(122,162,255,.10), transparent 55%),
    var(--bg);
  color:var(--text); font-size:var(--body); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.container{max-width:var(--maxw);margin:0 auto;padding:var(--space-7) var(--space-4)}
.site-header,.site-footer{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,0));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-footer{top:auto;bottom:0;background:linear-gradient(to top, rgba(255,255,255,.05), rgba(255,255,255,0));border-top:1px solid rgba(255,255,255,.08);border-bottom:none}
.site-header .inner,.site-footer .inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);max-width:var(--maxw);margin:0 auto;padding:.75rem var(--space-4)}
.site-header .logo{
font-weight:800;
text-decoration:none;
display:inline-flex;align-items:center;gap:.6rem;
font-size:1.05rem;
/* pill visuals */
padding: .5rem .9rem;
border-radius:9999px;
background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.35);
color: #fff;
line-height:1;
transition: background .18s ease, border-color .18s ease, transform .04s ease;
-webkit-backdrop-filter: saturate(160%) blur(6px);
backdrop-filter: saturate(160%) blur(6px);
box-shadow: 0 1px 1px rgba(0,0,0,.08);

}
.site-header nav{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.site-header nav a{
position:relative;
text-decoration:none;
/* pill visuals */
padding: .5rem .9rem;
border-radius:9999px;
background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.35);
color: #fff;
line-height:1;
transition: background .18s ease, border-color .18s ease, transform .04s ease;
-webkit-backdrop-filter: saturate(160%) blur(6px);
backdrop-filter: saturate(160%) blur(6px);
box-shadow: 0 1px 1px rgba(0,0,0,.08);

}
.site-header nav a:hover,.site-header nav a:focus-visible{color:var(--text)}
.site-header nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--brand),var(--accent));transition:transform var(--t);border-radius:2px}
.site-header nav a:hover::after,.site-header nav a:focus-visible::after{transform:scaleX(1)}

/* Type */
h1,h2,h3{margin:.2rem 0 1rem;line-height:1.2}
h1{font-size:var(--h1)} h2{font-size:var(--h2);color:var(--subtle)} h3{font-size:var(--h3);color:var(--subtle)}
.lead{font-size:var(--lead);font-weight:700;letter-spacing:.2px}
.small{font-size:var(--small);color:var(--muted)}
.site-footer p{color:var(--muted);margin:0}

/* Links */
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:2px}
a:hover{color:var(--text)}

/* Motion */
@media (prefers-reduced-motion: reduce){ *{transition:none !important;animation:none !important} }


/* header pill states */
.site-header .logo:hover,
.site-header nav a:hover{ background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.55); }
.site-header .logo:active,
.site-header nav a:active{ transform: translateY(1px); }
.site-header .logo:focus-visible,
.site-header nav a:focus-visible{ outline: 2px solid #e0f2fe; outline-offset: 2px; }
.site-header nav{ gap:10px; }
@media (max-width: 991.98px){
  .site-header .logo, .site-header nav a{ padding: .45rem .8rem; }
}