:root{
  --bg:#07080a; --fg:#e8eaf0; --muted:#7c8190; --faint:#3a3e48; --accent:#8fa8ff;
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--font);
  -webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none;border-bottom:1px solid var(--faint);transition:border-color .3s,color .3s}
a:hover,a:focus-visible{color:#fff;border-color:var(--accent)}
:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem}

/* ambient layer: faint dot grid + slow drifting glow */
.field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.field::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(200,210,255,.16) 1px,transparent 1.2px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 45%,#000 0%,transparent 75%);
          mask-image:radial-gradient(ellipse 60% 55% at 50% 45%,#000 0%,transparent 75%)}
.glow{position:absolute;width:60vmax;height:60vmax;left:50%;top:45%;border-radius:50%;
  transform:translate(-50%,-50%);filter:blur(90px);opacity:.22;
  background:conic-gradient(from 0deg,#3b4cff,#7a5cff,#2fd3c6,#3b4cff);
  animation:drift 38s linear infinite}
@keyframes drift{
  0%{transform:translate(-55%,-50%) rotate(0deg) scale(1)}
  50%{transform:translate(-45%,-48%) rotate(180deg) scale(1.08)}
  100%{transform:translate(-55%,-50%) rotate(360deg) scale(1)}}

main{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;padding:12vh 1.5rem 9rem}
.mark{font-weight:300;font-size:clamp(2.6rem,9vw,6.5rem);letter-spacing:.42em;margin-right:-.42em;
  line-height:1;color:#f4f5f8}
.tag{margin-top:2.4rem;font-family:var(--mono);font-size:clamp(.78rem,1.6vw,.9rem);
  letter-spacing:.14em;color:var(--muted);text-transform:lowercase}
.tag .cursor{display:inline-block;width:.55em;height:1.05em;margin-left:.35em;vertical-align:-.15em;
  background:var(--accent);opacity:.75;animation:blink 1.4s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

footer{position:relative;z-index:1;padding:1.6rem 1.5rem;
  display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;
  font-size:.72rem;letter-spacing:.08em;color:var(--muted)}
.home footer{position:fixed;left:0;right:0;bottom:0}
footer .legal{text-transform:uppercase}
footer nav{display:flex;gap:1.4rem}

/* privacy page */
.doc{position:relative;z-index:1;max-width:38rem;margin:0 auto;padding:14vh 1.5rem 10rem;color:#c4c8d2;font-size:.95rem}
.doc h1{font-weight:300;font-size:1.6rem;letter-spacing:.2em;text-transform:uppercase;color:#f4f5f8;margin-bottom:.4rem}
.doc .meta{font-family:var(--mono);font-size:.75rem;color:var(--muted);margin-bottom:3rem}
.doc h2{font-weight:500;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg);margin:2.4rem 0 .6rem}
.doc p,.doc li{margin-bottom:.8rem}
.doc ul{padding-left:1.1rem}
.doc .back{display:inline-block;margin-bottom:3rem;font-family:var(--mono);font-size:.75rem;color:var(--muted)}

@media (max-width:560px){
  footer{flex-direction:column;align-items:center;text-align:center;gap:.6rem;padding-bottom:1.4rem;font-size:.68rem}
  .mark{letter-spacing:.3em;margin-right:-.3em}
}
@media (prefers-reduced-motion:reduce){
  .glow,.tag .cursor{animation:none}
}
@media (prefers-color-scheme:light){ /* stays dark by design */ }