/* ===== Page chrome: nav, sections, footer ===== */

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:20;background:rgba(0,0,0,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(56,77,72,.8);padding-top:env(safe-area-inset-top)}
nav .w{display:flex;align-items:center;justify-content:space-between;height:3.8rem;gap:1rem}
.logo{font:800 1.1rem var(--display);color:var(--cream);text-decoration:none;letter-spacing:-.02em;white-space:nowrap}
.menu{display:none;gap:1.6rem;font-size:.95rem}
.menu a{text-decoration:none;color:var(--soft);transition:color .2s}
.menu a:hover{color:var(--cream)}
nav .btn{padding:.55rem 1rem;font-size:.88rem;white-space:nowrap}

.tools{display:flex;gap:.6rem;align-items:center}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;padding:2px}
.lang button{font:500 .8rem var(--text);background:none;border:0;color:var(--soft);padding:.35rem .7rem;border-radius:999px;cursor:pointer;transition:.2s}
.lang button[aria-pressed=true]{background:var(--acc);color:#000}

details{position:relative}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
.pop{position:absolute;right:0;top:calc(100% + .6rem);background:#0b100f;border:1px solid var(--line);border-radius:12px;padding:.4rem;min-width:9rem;display:grid;box-shadow:0 18px 40px rgba(0,0,0,.4)}
.pop a{padding:.6rem .8rem;border-radius:8px;text-decoration:none;color:var(--cream);font-size:.95rem}
.pop a:hover{background:var(--slate)}

/* sections */
section{padding:6rem 0 0}
.two{display:grid;gap:2rem}
.two h2{margin-bottom:0}
.about p{font-size:1.15rem;color:var(--soft)}
.about p+p{margin-top:1.1rem}
.about strong{color:var(--cream);font-weight:500}

/* footer */
footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:6rem;border-top:1px solid var(--line);padding:2rem 0 2.5rem;padding-bottom:calc(2.5rem + env(safe-area-inset-bottom));color:var(--muted);font-size:.92rem}
footer nav{all:unset;display:flex;gap:1.2rem}
footer a{text-decoration:none}
footer a:hover{color:var(--cream)}