/* Gromqa TV — the palette and type of the GromQA studio site (gromqa.ru). Fonts: SIL OFL 1.1. */
@font-face { font-family: "Manrope"; font-weight: 200 800; font-display: swap; src: url(fonts/manrope-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: "Manrope"; font-weight: 200 800; font-display: swap; src: url(fonts/manrope-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-weight: 200 900; font-display: swap; 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: "Unbounded"; font-weight: 200 900; font-display: swap; 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; }

:root {
  --bg: #06080e; --surface: #0f1524; --text: #e8eefb; --muted: #8d9ab4; --dim: #7d89a6;
  --bolt: #7cc4ff; --bolt-hot: #c9e7ff; --ok: #4ade80; --warn: #fbbf24;
  --line: rgba(124, 196, 255, 0.12); --line-strong: rgba(124, 196, 255, 0.28);
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Unbounded", "Manrope", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 var(--font-body); }
a { color: var(--bolt); }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
header.top { border-bottom: 1px solid var(--line); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
.logo { font-family: var(--font-display); font-weight: 700; letter-spacing: .02em; color: var(--text); text-decoration: none; }
.logo span { color: var(--bolt); }
nav a { color: var(--muted); text-decoration: none; margin-left: 18px; font-size: 15px; } nav a:hover { color: var(--text); }
h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 5vw, 46px); line-height: 1.15; margin: 48px 0 16px; }
h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 3vw, 26px); margin: 48px 0 16px; }
h3 { font-size: 18px; margin: 0 0 6px; }
.lead { color: var(--muted); font-size: 19px; max-width: 720px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.card .n { font-family: var(--font-display); color: var(--bolt); font-size: 14px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 20px; border-radius: 12px; background: var(--bolt); color: #06080e;
  font-weight: 700; text-decoration: none; border: 1px solid var(--bolt); }
.btn.ghost { background: transparent; color: var(--bolt); }
.btn small { font-weight: 500; opacity: .75; }
.dl { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.muted { color: var(--muted); } .warn { color: var(--warn); }
details { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; margin: 10px 0; }
details summary { cursor: pointer; font-weight: 700; }
details ol, details ul { padding-left: 22px; } details li { margin: 4px 0; }
footer { border-top: 1px solid var(--line); margin-top: 64px; padding: 24px 0 40px; color: var(--dim); font-size: 14px; }
code { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: .92em; }
.terms h1 { font-size: 26px; } .terms h2 { font-size: 19px; margin-top: 28px; }
