/* Broxy — общий стиль лендинга и правовых страниц */
:root{
  --bg:#ffffff; --bg-soft:#f6f7fb; --bg-card:#ffffff;
  --fg:#14152a; --fg-soft:#5a5c78; --fg-faint:#8a8ca6;
  --accent:#5b5bd6; --accent-soft:#ececfb; --border:#e5e6f0;
  --radius:14px; --maxw:960px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0e0f1a; --bg-soft:#151726; --bg-card:#171930;
    --fg:#eceefb; --fg-soft:#a9adca; --fg-faint:#7b7fa0;
    --accent:#8b8bf0; --accent-soft:#1e2040; --border:#272a45;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* шапка */
header{border-bottom:1px solid var(--border); background:var(--bg); position:sticky; top:0; z-index:10}
header .wrap{display:flex; align-items:center; gap:16px; height:64px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; color:var(--fg)}
.brand:hover{text-decoration:none}
.brand .mark{
  width:30px; height:30px; border-radius:9px; flex:none;
  background:linear-gradient(135deg,var(--accent),#3ec9c0);
  display:grid; place-items:center; color:#fff; font-size:15px; font-weight:800;
}
nav{margin-left:auto; display:flex; gap:20px; font-size:14px}
nav a{color:var(--fg-soft)}
@media (max-width:600px){ nav{gap:14px; font-size:13px} .brand span.name{display:none} }

/* герой */
.hero{padding:72px 0 56px; text-align:center}
.hero h1{font-size:42px; line-height:1.15; margin:0 0 16px; letter-spacing:-.02em}
.hero p.lead{font-size:19px; color:var(--fg-soft); max-width:620px; margin:0 auto 28px}
@media (max-width:600px){ .hero{padding:48px 0 40px} .hero h1{font-size:31px} .hero p.lead{font-size:17px} }
.btn{
  display:inline-block; background:var(--accent); color:#fff; font-weight:600;
  padding:13px 26px; border-radius:11px; font-size:16px;
}
.btn:hover{text-decoration:none; opacity:.92}
.btn.ghost{background:transparent; color:var(--accent); box-shadow:inset 0 0 0 1.5px var(--accent)}
.btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* карточки */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin:56px 0}
.card{background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:24px}
.card h3{margin:0 0 8px; font-size:17px}
.card p{margin:0; color:var(--fg-soft); font-size:15px}
.card .ico{
  width:38px; height:38px; border-radius:10px; background:var(--accent-soft);
  display:grid; place-items:center; margin-bottom:14px; font-size:19px;
}

/* правовые страницы */
.legal{padding:48px 0 72px; max-width:760px}
.legal h1{font-size:32px; margin:0 0 6px; letter-spacing:-.01em}
.legal .updated{color:var(--fg-faint); font-size:14px; margin:0 0 36px}
.legal h2{font-size:20px; margin:38px 0 12px; padding-top:10px}
.legal h3{font-size:16px; margin:24px 0 8px}
.legal p,.legal li{color:var(--fg-soft)}
.legal li{margin-bottom:7px}
.legal ul{padding-left:22px}
.legal strong{color:var(--fg)}
.legal table{width:100%; border-collapse:collapse; margin:16px 0; font-size:14.5px}
.legal th,.legal td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top}
.legal th{color:var(--fg); font-weight:600; background:var(--bg-soft)}
.legal td{color:var(--fg-soft)}
.tocbox{background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius); padding:18px 22px; margin:0 0 36px}
.tocbox ol{margin:0; padding-left:20px; columns:2; column-gap:28px; font-size:14.5px}
@media (max-width:600px){ .tocbox ol{columns:1} .legal h1{font-size:26px} }
.callout{background:var(--accent-soft); border-left:3px solid var(--accent); border-radius:0 10px 10px 0; padding:14px 18px; margin:20px 0}
.callout p{margin:0; color:var(--fg)}

/* подвал */
footer{border-top:1px solid var(--border); margin-top:64px; padding:32px 0 48px; color:var(--fg-faint); font-size:14px}
footer .wrap{display:flex; gap:20px; flex-wrap:wrap; align-items:center}
footer nav{margin-left:auto}
footer a{color:var(--fg-soft)}