/* Shared chrome (tokens, nav, footer, buttons) for every page besides the
 * homepage — index.html keeps its own inline copy untouched so this file
 * can't regress it. Kept in sync by hand; the homepage is the source of
 * truth for these rules. */
:root{
  --bg:#fafaff;
  --surface:rgba(255,255,255,.6);
  --surface-strong:rgba(255,255,255,.85);
  --text:#0f0f14;
  --muted:#5a5a68;
  --faint:#8b8b98;
  --border:rgba(255,255,255,.5);
  --border-alt:rgba(15,15,20,.08);
  --accent:#8b5cf6;
  --accent-soft:#c4b5fd;
  --accent-2:#6d9eff;
  --shadow:0 8px 32px rgba(15,15,20,.08);
  --shadow-lg:0 30px 80px -24px rgba(15,15,20,.24);
  --hi:inset 0 1px 0 rgba(255,255,255,.6);
  --blur:blur(20px) saturate(160%);
  --maxw:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--text); background:var(--bg);
  font-family:"Manrope",system-ui,-apple-system,sans-serif; font-weight:400; font-size:16px;
  line-height:1.6; letter-spacing:-.006em; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(at 20% 0%, #ffe0f0 0%, transparent 50%),
    radial-gradient(at 80% 30%, #d4e4ff 0%, transparent 50%),
    radial-gradient(at 50% 100%, #e0d4ff 0%, transparent 50%);
}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; font-weight:500; letter-spacing:-.02em; line-height:1.08}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px}

.glass{background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow),var(--hi); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.nav,.btn-2{background:rgba(255,255,255,.9)}
}

.btn{display:inline-flex; align-items:center; gap:8px; font-weight:500; font-size:15px; padding:11px 20px; border-radius:12px; border:1px solid transparent; cursor:pointer; transition:.18s ease; white-space:nowrap}
.btn svg{width:17px;height:17px}
.btn-1{background:var(--accent); color:#fff; box-shadow:0 6px 18px -4px rgba(139,92,246,.5), inset 0 1px 0 rgba(255,255,255,.28)}
.btn-1:hover{background:#7c4ef4; transform:translateY(-2px); box-shadow:0 12px 26px -6px rgba(139,92,246,.55), inset 0 1px 0 rgba(255,255,255,.3)}
.btn-2{color:var(--text); border-color:var(--border); background:var(--surface); box-shadow:var(--hi); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
.btn-2:hover{transform:translateY(-2px); border-color:rgba(139,92,246,.4)}

.nav{position:fixed; z-index:50; top:18px; left:50%; transform:translateX(-50%); width:calc(100% - 40px); max-width:960px;
  display:flex; align-items:center; justify-content:space-between; padding:9px 9px 9px 18px; border-radius:999px;
  background:var(--surface-strong); border:1px solid var(--border); box-shadow:0 4px 16px rgba(15,15,20,.08),var(--hi); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur)}
.brand{display:flex; align-items:center; gap:9px; font-weight:600; font-size:16px; letter-spacing:-.02em}
.brand img{width:26px;height:26px;border-radius:7px}
.nlinks{display:flex; align-items:center; gap:26px}
.nlinks a.lk{color:var(--muted); font-size:14.5px; font-weight:500; transition:.2s}
.nlinks a.lk:hover{color:var(--text)}
.nav .btn{padding:9px 18px; font-size:14px}

/* simple content page (About / Contact / Privacy / 404) */
.page{padding:150px 0 90px}
.page h1{font-size:clamp(34px,5vw,52px); letter-spacing:-.03em}
.page .lede{color:var(--muted); font-size:18px; max-width:640px; margin:18px 0 40px}
.page .card{border-radius:20px; padding:32px; margin-bottom:20px}
.page .card + .card{margin-top:20px}
.page .card h2{font-size:20px; margin-bottom:10px}
.page .card p{color:var(--muted); font-size:15.5px; line-height:1.7; margin:0 0 12px}
.page .card p:last-child{margin-bottom:0}
.page .card ul{margin:8px 0 0; padding-left:20px; color:var(--muted); font-size:15.5px; line-height:1.7}
.page a.inline{color:var(--accent); font-weight:500}
.page a.inline:hover{text-decoration:underline}

footer{margin-top:40px; border-top:1px solid var(--border-alt)}
.foot{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:30px; padding:60px 0 30px}
.foot .brand{margin-bottom:14px}
.foot .desc{color:var(--muted); font-size:14.5px; max-width:300px}
.fc{display:flex; flex-direction:column; gap:12px}
.fc strong{font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--faint); font-weight:600; margin-bottom:2px}
.fc a{color:var(--muted); font-size:14.5px; width:fit-content; transition:.2s}
.fc a:hover{color:var(--accent)}
.legal{border-top:1px solid var(--border-alt); padding:22px 0; text-align:center; color:var(--faint); font-size:12.5px}

.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}

@media (max-width:768px){
  body::before{background:radial-gradient(at 15% 0%, #ffe0f0 0%, transparent 55%), radial-gradient(at 85% 60%, #e0d4ff 0%, transparent 55%)}
  :root{--blur:blur(8px) saturate(150%)}
  .page{padding:120px 0 60px}
  .foot{grid-template-columns:1fr 1fr}
  .nav{top:auto; bottom:16px; max-width:calc(100% - 24px)}
  .nlinks a.lk{display:none}
}