/* Shared shell for the sub-pages (/privacy, /support). The landing page
   carries its own styles; these two are long-form text and want a calmer,
   narrower column than the hero layout. */

:root{
  --violet:#7C5CFC;
  --violet-soft:#A58BFF;
  --cyan:#22D3EE;
  --ink:#0B0917;
  --surface:#141123;
  --surface-alt:#1B1730;
  --text:#E7E3F5;
  --text-soft:#A49CC4;
  --line:#2A2440;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--violet-soft);}
a:hover{color:var(--cyan);}

/* ---------- top bar ---------- */
.bar{
  position:sticky;top:0;z-index:10;
  background:rgba(11,9,23,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.bar-in{
  max-width:820px;margin:0 auto;
  padding:12px 20px;
  display:flex;align-items:center;gap:12px;
}
.bar-in img{width:30px;height:30px;border-radius:8px;}
.bar .name{font-weight:700;letter-spacing:-.01em;}
.bar nav{margin-inline-start:auto;display:flex;gap:18px;font-size:14px;}
.bar nav a{color:var(--text-soft);text-decoration:none;}
.bar nav a:hover{color:var(--text);}

/* ---------- content ---------- */
main{
  max-width:820px;margin:0 auto;
  padding:40px 20px 72px;
}
h1{
  font-size:clamp(28px,5vw,38px);
  line-height:1.2;letter-spacing:-.02em;
  margin:0 0 8px;
}
h2{
  font-size:22px;letter-spacing:-.01em;
  margin:40px 0 12px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
h2:first-of-type{border-top:0;padding-top:0;}
h3{font-size:17px;margin:28px 0 8px;color:var(--violet-soft);}
p{margin:0 0 14px;}
ul{margin:0 0 14px;padding-inline-start:22px;}
li{margin-bottom:6px;}
strong{color:#fff;}

.intro{color:var(--text-soft);font-size:17px;}
.updated{
  display:inline-block;
  font-size:13px;color:var(--text-soft);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px 14px;margin-bottom:28px;
}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px 22px;
  margin:0 0 16px;
}
.card h3{margin-top:0;}
.card p:last-child{margin-bottom:0;}
.lang-divider{
  text-align:center;color:var(--text-soft);
  letter-spacing:.24em;font-size:12px;
  margin:56px 0 8px;
}

footer{
  border-top:1px solid var(--line);
  color:var(--text-soft);font-size:13px;
  text-align:center;padding:28px 20px 40px;
}
footer a{color:var(--text-soft);}

@media (max-width:520px){
  body{font-size:15px;}
  main{padding:28px 18px 56px;}
}