*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#0a0a0a;
  --bg-surface:#111;
  --bg-card:#161616;
  --border:#222;
  --text:#c8c8c8;
  --text-muted:#666;
  --text-dim:#444;
  --heading:#e0e0e0;
  --accent:#7eb8a0;
  --accent-dim:#3a5a4a;
  --link:#7eb8a0;
  --link-hover:#a0d8c0;
  --mono:"SF Mono","Fira Code","Fira Mono","Roboto Mono",monospace;
}

html{scroll-behavior:smooth}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  line-height:1.7;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

a{color:var(--link);text-decoration:none;transition:color .15s}
a:hover{color:var(--link-hover)}

::selection{background:var(--accent-dim);color:#fff}

/* ── Nav ── */
nav{
  border-bottom:1px solid var(--border);
  background:rgba(10,10,10,.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  position:sticky;top:0;z-index:100;
}

nav .wrap{
  max-width:720px;
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo{
  font-size:15px;
  font-weight:600;
  letter-spacing:.5px;
  color:var(--heading);
  font-family:var(--mono);
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
}

.logo:hover{color:var(--heading)}

.logo-icon{
  width:24px;
  height:24px;
  object-fit:contain;
  /* filter:brightness(0) invert(.85); */
}

.nav-links{display:flex;list-style:none;gap:24px}

.nav-links a{
  font-size:13px;
  color:var(--text-muted);
  letter-spacing:.3px;
  transition:color .15s;
}
.nav-links a:hover,.nav-links a.active{color:var(--heading)}

/* ── Hero (index) ── */
.hero{
  padding:100px 24px 80px;
  max-width:720px;
  margin:0 auto;
}

.hero h1{
  font-size:28px;
  font-weight:500;
  color:var(--heading);
  letter-spacing:-.3px;
  margin-bottom:20px;
  line-height:1.35;
}

.hero .lead{
  font-size:15px;
  color:var(--text-muted);
  line-height:1.8;
  max-width:520px;
  margin-bottom:48px;
}

.proto{
  font-family:var(--mono);
  font-size:12px;
  color:var(--text-dim);
  padding:16px 20px;
  border:1px solid var(--border);
  border-radius:4px;
  background:var(--bg-surface);
  line-height:1.9;
  overflow-x:auto;
}

.proto span{color:var(--accent)}

/* ── Principles ── */
.principles{
  max-width:720px;
  margin:0 auto;
  padding:0 24px 80px;
}

.principles h2{
  font-size:13px;
  font-weight:500;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:1.5px;
  margin-bottom:32px;
}

.principle-list{
  display:flex;
  flex-direction:column;
  gap:28px;
}

.principle{
  padding-left:20px;
  border-left:2px solid var(--border);
}

.principle h3{
  font-size:15px;
  font-weight:500;
  color:var(--heading);
  margin-bottom:6px;
}

.principle p{
  font-size:14px;
  color:var(--text-muted);
  line-height:1.7;
}

/* ── Divider ── */
.divider{
  max-width:720px;
  margin:0 auto;
  padding:0 24px;
  height:1px;
  background:var(--border);
  margin-bottom:60px;
}

/* ── Tech brief ── */
.tech{
  max-width:720px;
  margin:0 auto;
  padding:0 24px 80px;
}

.tech h2{
  font-size:13px;
  font-weight:500;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:1.5px;
  margin-bottom:24px;
}

.tech-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:4px;
  overflow:hidden;
}

.tech-item{
  background:var(--bg-surface);
  padding:20px;
}

.tech-item dt{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--text-dim);
  margin-bottom:4px;
}

.tech-item dd{
  font-size:14px;
  color:var(--text);
  font-family:var(--mono);
}

/* ── Document pages (privacy / terms) ── */
.doc{
  max-width:720px;
  margin:0 auto;
  padding:60px 24px 80px;
}

.doc h1{
  font-size:22px;
  font-weight:500;
  color:var(--heading);
  margin-bottom:6px;
}

.doc .meta{
  font-size:12px;
  color:var(--text-dim);
  margin-bottom:48px;
  font-family:var(--mono);
}

.doc section{margin-bottom:36px}

.doc section h2{
  font-size:14px;
  font-weight:600;
  color:var(--heading);
  margin-bottom:12px;
  letter-spacing:.2px;
}

.doc section h3{
  font-size:13px;
  font-weight:600;
  color:var(--text);
  margin:16px 0 8px;
}

.doc section p{
  font-size:14px;
  line-height:1.8;
  margin-bottom:12px;
  color:var(--text);
}

.doc section ul{
  margin:0 0 12px 20px;
  list-style:none;
}

.doc section li{
  font-size:14px;
  line-height:1.8;
  color:var(--text);
  position:relative;
  padding-left:14px;
  margin-bottom:4px;
}

.doc section li::before{
  content:"";
  position:absolute;
  left:0;
  top:11px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--text-dim);
}

.doc section strong{color:var(--heading);font-weight:600}

.doc .highlight-box{
  border:1px solid var(--accent-dim);
  border-radius:4px;
  padding:16px 20px;
  background:rgba(126,184,160,.04);
  margin:16px 0;
}

.doc .highlight-box p{
  font-size:13px;
  color:var(--accent);
  margin:0;
}

/* ── Footer ── */
footer{
  border-top:1px solid var(--border);
  padding:24px;
}

footer .wrap{
  max-width:720px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}

footer p{
  font-size:12px;
  color:var(--text-dim);
}

.footer-links{display:flex;gap:20px}

.footer-links a{
  font-size:12px;
  color:var(--text-dim);
  transition:color .15s;
}
.footer-links a:hover{color:var(--text-muted)}

/* ── Responsive ── */
@media(max-width:600px){
  .hero{padding:60px 20px 50px}
  .hero h1{font-size:22px}
  .tech-grid{grid-template-columns:1fr}
  nav .wrap{padding:12px 16px}
  .nav-links{gap:16px}
  .doc{padding:40px 16px 60px}
  footer .wrap{flex-direction:column;text-align:center}
}