/* Voxsmile site — «Малахит» palette and type, same tokens as the app (src/ui/styles.css). */
@font-face { font-family: "Unbounded"; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url(/fonts/unbounded-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url(/fonts/unbounded-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geologica"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/fonts/geologica-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geologica"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/fonts/geologica-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

@font-face { font-family: "Unbounded"; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url(/fonts/unbounded-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Unbounded"; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url(/fonts/unbounded-cyrillic-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Geologica"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/fonts/geologica-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geologica"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/fonts/geologica-cyrillic-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }

:root {
  --green: #0d3b2e; --card: #134a3b; --line: #2c5c4e; --lime: #cff27e;
  --mist: #eef3ef; --sage: #cfdcd5; --white: #fff;
  --muted-l: #4a6b60; --muted-d: #9fc0b3; --line-l: #dbe5df;
  --display: "Unbounded", system-ui, sans-serif;
  --ui: "Geologica", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Light pages (policies, support) */
  --bg: var(--mist); --fg: var(--green); --muted: var(--muted-l); --rule: var(--line-l); --panel: var(--white);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #0a2f25; --fg: #e8f1ec; --muted: var(--muted-d); --rule: var(--line); --panel: var(--card); color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #0a2f25; --fg: #e8f1ec; --muted: var(--muted-d); --rule: var(--line); --panel: var(--card); color-scheme: dark; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--fg);
  font: 17px/1.6 var(--ui); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 6px; }


.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px;
       max-width: 1080px; width: 100%; margin: 0 auto; padding: 22px 16px 0; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
        font: 500 20px/1 var(--display); letter-spacing: -0.03em; }
.logo svg { width: 28px; height: 28px; }
.langs { position: relative; display: inline-flex; align-items: center; }
.langs select {
  appearance: none; -webkit-appearance: none; font: inherit; font-size: 14px; color: inherit; cursor: pointer;
  background: transparent; border: 1px solid currentColor; border-radius: 999px; opacity: .8;
  padding: 7px 30px 7px 14px; max-width: 46vw;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
[dir="rtl"] .langs select { padding: 7px 14px 7px 30px; background-position: 16px 55%, 11px 55%; }
.langs select:hover { opacity: 1; }
.langs option { color: #0d3b2e; background: #fff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

footer { margin-top: auto; }
.foot { max-width: 1080px; margin: 0 auto; padding: 28px 16px max(28px, env(safe-area-inset-bottom));
        display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--muted); }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot .c { margin-inline-end: auto; }

/* ---------- Landing (dark malachite) ---------- */
body.home { background: var(--green); color: var(--white); --muted: var(--muted-d); }
.hero { flex: 1; max-width: 1080px; width: 100%; margin: 0 auto; padding: 24px 16px 40px;
        display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 24px; }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); margin: 0 0 18px; }
.hero h1 { font: 300 clamp(34px, 5.4vw, 60px)/1.08 var(--display); letter-spacing: -0.04em; margin: 0 0 20px; }
.hero p.lead { font-size: clamp(17px, 2vw, 19px); color: var(--muted-d); max-width: 30em; margin: 0; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 26px;
       border-radius: 999px; font-weight: 600; font-size: 17px; text-decoration: none; transition: transform .15s; }
.btn.primary { background: var(--lime); color: var(--green); }
.btn.primary:hover { transform: translateY(-2px); }
.btn.ghost { border: 1px solid var(--muted-d); color: var(--white); cursor: default; }
.btn.ghost small { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.note { margin-top: 18px; font-size: 14px; color: var(--muted-d); }
.wave { width: 100%; height: auto; display: block; overflow: visible; }
.wave path { fill: none; stroke-linecap: round; }
.wave .w1 { stroke: var(--lime); stroke-width: 3.2; }
.wave .w2, .wave .w3 { stroke: var(--muted-d); stroke-width: 1.2; opacity: .45; }
@media (prefers-reduced-motion: no-preference) {
  .wave .w1 { animation: breathe 6s ease-in-out infinite; transform-origin: 50% 50%; }
  .wave .w2 { animation: breathe 7.5s ease-in-out infinite reverse; transform-origin: 50% 50%; }
  .wave .w3 { animation: breathe 9s ease-in-out infinite; transform-origin: 50% 50%; }
}
@keyframes breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.78); } }

.points { max-width: 1080px; width: 100%; margin: 0 auto; padding: 0 16px 8px;
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.points div { background: var(--card); border-radius: 22px; padding: 22px 22px 24px; }
.points b { display: block; font: 400 15px/1.3 var(--display); letter-spacing: -0.02em; margin-bottom: 8px; color: var(--lime); }
.points span { color: var(--muted-d); font-size: 15px; }
body.home .foot a { color: var(--muted-d); }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; padding-top: 8px; }
  .hero .art { order: -1; max-width: 520px; }
  .points { grid-template-columns: 1fr; }
}

/* ---------- Text pages (privacy, terms, support) ---------- */
.doc { max-width: 720px; width: 100%; margin: 0 auto; padding: 40px 16px 24px; }
.doc .kicker { color: var(--muted); }
.doc h1 { font: 300 clamp(30px, 6vw, 44px)/1.12 var(--display); letter-spacing: -0.04em; margin: 0 0 12px; }
.doc .meta { color: var(--muted); font-size: 14px; margin: 0 0 32px; }
.doc h2 { font: 400 19px/1.3 var(--display); letter-spacing: -0.02em; margin: 36px 0 10px; }
.doc p, .doc li { color: var(--fg); }
.doc ul { padding-inline-start: 1.2em; }
.doc li { margin: 6px 0; }
.doc .box { background: var(--panel); border: 1px solid var(--rule); border-radius: 20px; padding: 20px 22px; margin: 8px 0 8px; }
.doc .mail { display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px; border-radius: 999px;
             background: var(--green); color: var(--lime); font-weight: 600; text-decoration: none; margin: 6px 0 4px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .doc .mail { background: var(--lime); color: var(--green); } }
:root[data-theme="dark"] .doc .mail { background: var(--lime); color: var(--green); }
.doc details { border-top: 1px solid var(--rule); padding: 14px 0; }
.doc details:last-of-type { border-bottom: 1px solid var(--rule); }
.doc summary { cursor: pointer; font-weight: 600; }
.doc details p { margin: 10px 0 0; }

/* Scripts without these fonts (Arabic, Devanagari, Chinese, Japanese, Korean) use system fonts;
   tight tracking hurts them (and breaks Arabic joining). */
:lang(ar) *, :lang(hi) *, :lang(zh-Hans) *, :lang(ja) *, :lang(ko) * { letter-spacing: normal !important; }
:lang(ar) .hero h1, :lang(hi) .hero h1, :lang(zh-Hans) .hero h1, :lang(ja) .hero h1, :lang(ko) .hero h1,
:lang(ar) .doc h1, :lang(hi) .doc h1, :lang(zh-Hans) .doc h1, :lang(ja) .doc h1, :lang(ko) .doc h1 { font-weight: 500; line-height: 1.25; }
:lang(ar) .kicker, :lang(hi) .kicker, :lang(zh-Hans) .kicker, :lang(ja) .kicker, :lang(ko) .kicker { text-transform: none; }
:lang(ar) body { line-height: 1.8; }
/* Same system font for Latin words inside these scripts, so mixed lines look even. */
:lang(ar), :lang(hi), :lang(zh-Hans), :lang(ja), :lang(ko) {
  --ui: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "PingFang SC", "Apple SD Gothic Neo", "Noto Sans", sans-serif;
  --display: var(--ui);
}
.langs select:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }