/* ─────────────────────────────────────────────────────────────
   Murable — спільний chrome (хедер, навігація, футер, токени).
   Єдине джерело для docs/privacy/terms/acceptable-use. Візуально
   ідентичний лендингу (index.html тримає власну копію тих самих
   правил). RAWIRA-бренд: navy/cyan/white · Ubuntu · 60/30/10.
   ───────────────────────────────────────────────────────────── */

/* ── brand tokens ── */
:root{
  --navy-950:#011523; --navy-900:#02283F; --navy-800:#0A3A57; --navy-700:#124D70;
  --navy-300:#7FB1CD; --navy-200:#AFCFE1;
  --cyan-700:#0077A8; --cyan-600:#0092CB; --cyan-500:#00AEEF; --cyan-400:#33BEF2;
  --gray-600:#5C7080; --gray-200:#D2DCE3; --gray-050:#F4F7F9; --white:#fff;
  --grad:linear-gradient(135deg,#00AEEF 0%,#02283F 100%);
  --radius:10px; --radius-lg:16px; --radius-hero:24px;
  --font:'Ubuntu',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Ubuntu Mono',ui-monospace,'SF Mono',Menlo,monospace;
  /* light theme */
  --bg:var(--white); --surface:var(--white); --surface-2:var(--gray-050);
  --text:var(--navy-900); --text-dim:var(--gray-600); --border:var(--gray-200);
  --interactive:var(--cyan-700); --on-cyan:var(--navy-900);
  --shadow:0 1px 2px rgba(2,40,63,.06),0 8px 24px rgba(2,40,63,.06);
}
@media (prefers-color-scheme:dark){
  :root{ --bg:var(--navy-950); --surface:var(--navy-900); --surface-2:var(--navy-800);
    --text:#EAF3F8; --text-dim:var(--navy-300); --border:var(--navy-800);
    --interactive:var(--cyan-400); --on-cyan:var(--navy-900);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.35); }
}
:root[data-theme="dark"]{ --bg:var(--navy-950); --surface:var(--navy-900); --surface-2:var(--navy-800);
  --text:#EAF3F8; --text-dim:var(--navy-300); --border:var(--navy-800);
  --interactive:var(--cyan-400); --on-cyan:var(--navy-900);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.35); }
:root[data-theme="light"]{ --bg:var(--white); --surface:var(--white); --surface-2:var(--gray-050);
  --text:var(--navy-900); --text-dim:var(--gray-600); --border:var(--gray-200);
  --interactive:var(--cyan-700); --on-cyan:var(--navy-900);
  --shadow:0 1px 2px rgba(2,40,63,.06),0 8px 24px rgba(2,40,63,.06); }

/* ── base ── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--interactive);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:0}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* ── mark (echo of rawira three-bar motif) + rawira footer logo ── */
.mark{display:inline-flex;gap:3px;align-items:center;height:22px}
.mark i{width:6.5px;background:var(--cyan-500);border-radius:2.5px;display:block}
.mark i:nth-child(1){height:13px} .mark i:nth-child(2){height:18px} .mark i:nth-child(3){height:22px}
.rw-logo{vertical-align:middle;height:18px}
.rw-dark{display:none}
@media (prefers-color-scheme:dark){.rw-light{display:none}.rw-dark{display:inline}}
:root[data-theme="dark"] .rw-light{display:none} :root[data-theme="dark"] .rw-dark{display:inline}
:root[data-theme="light"] .rw-light{display:inline} :root[data-theme="light"] .rw-dark{display:none}
.logo{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:19px;
  color:var(--text);letter-spacing:-.01em}
.logo:hover{text-decoration:none}

/* ── header / nav ── */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--border)}
nav{display:flex;align-items:center;gap:18px;height:64px}
.navmenu{flex:1;display:flex;align-items:center;gap:22px}
.navmenu .links{display:flex;gap:22px;margin-left:8px}
.navmenu .links a{color:var(--text-dim);font-size:15px;font-weight:500}
.navmenu .links a:hover{color:var(--text)}
.navmenu .spacer{flex:1}
.navmenu .controls{display:flex;align-items:center;gap:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;
  border-radius:var(--radius);font-family:var(--font);font-weight:500;font-size:15px;
  cursor:pointer;border:1px solid transparent;white-space:nowrap;transition:.12s}
.btn-primary{background:var(--cyan-500);color:var(--on-cyan)}
.btn-primary:hover{background:var(--cyan-400)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-sm{height:34px;padding:0 12px;font-size:14px}
.langs{display:flex;gap:2px;border:1px solid var(--border);border-radius:8px;padding:2px}
.langs button{background:transparent;border:0;color:var(--text-dim);font:500 12px/1 var(--font);
  padding:5px 8px;border-radius:6px;cursor:pointer;letter-spacing:.04em}
.langs button.on{background:var(--cyan-500);color:var(--on-cyan)}
.iconbtn{background:transparent;border:1px solid var(--border);border-radius:8px;width:34px;height:34px;
  cursor:pointer;color:var(--text-dim);font-size:15px;display:flex;align-items:center;justify-content:center}
.iconbtn:hover{color:var(--text)}
.burger{display:none;margin-left:auto}

/* ── footer (4-col + bottom bar, як на лендингу) ── */
footer{border-top:1px solid var(--border);padding:44px 0 40px;color:var(--text-dim)}
.foot{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-start}
.foot .col h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin:0 0 12px}
.foot .col a{display:block;color:var(--text-dim);font-size:14px;margin-bottom:8px}
.foot .col a:hover{color:var(--interactive)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:34px;padding-top:20px;border-top:1px solid var(--border);font-size:13px}
.built{display:inline-flex;align-items:center;gap:8px;color:var(--text-dim)}
.built .mark i{background:var(--cyan-500)}

:focus-visible{outline:2px solid var(--cyan-500);outline-offset:2px;border-radius:6px}

/* ── mobile: бургер + випадне меню ── */
@media (max-width:860px){
  .burger{display:flex}
  .navmenu{position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:14px;
    margin:0;padding:16px 24px;background:var(--surface);border-bottom:1px solid var(--border);
    box-shadow:var(--shadow);display:none}
  .navmenu.open{display:flex}
  .navmenu .links{flex-direction:column;gap:0;margin:0}
  .navmenu .links a{padding:11px 0;font-size:16px}
  .navmenu .spacer{display:none}
  .navmenu .controls{flex-wrap:wrap;gap:12px;padding-top:14px;border-top:1px solid var(--border)}
  .navmenu .langs{margin-right:auto}
  .navmenu .controls .btn{flex:1;min-width:130px}
}