:root{
  --brand:#2A68AF;           /* базовый синий */
  --brand-2:#1e4f85;
  --text:#f4f7fb;
  --muted:rgba(255,255,255,.75);
  --bg:#12385f;              /* фонный синий */
  --card:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.12);
  --accent:#2A68AF;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
a{color:#fff}
.wrapper{max-width:1200px;margin:0 auto;padding:28px 20px;display:grid;grid-template-columns:1.1fr .9fr;gap:28px}
@media (max-width: 980px){.wrapper{grid-template-columns:1fr}}

.site-top{background:var(--brand);padding:10px 16px}
.brand-link{display:inline-flex;align-items:center;text-decoration:none}
.brand-logo{display:block;height:26px;width:auto}

.hero{background:linear-gradient(180deg, rgba(42,104,175,.25), rgba(42,104,175,.08));border:1px solid var(--border);border-radius:18px;padding:24px 22px;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.hero-title{font-size:clamp(22px,3.4vw,44px);margin:0 0 8px;font-weight:900}
.hero-sub{margin:0 0 10px;color:var(--muted)}
.hero-price{margin:6px 0 16px;font-size:20px;font-weight:700}

.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 10px}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;background:var(--brand);border:1px solid rgba(255,255,255,.15);text-decoration:none;font-weight:700;transition:.2s}
.btn:hover{transform:translateY(-1px);background:var(--brand-2)}

.short-note{margin-top:8px;color:var(--muted)}

.side{display:flex;flex-direction:column;gap:20px}
.metrics{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px}
.metrics-title{margin:0 0 8px}
.metrics-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:rgba(0,0,0,.15)}
.metrics-table th,.metrics-table td{padding:.65rem .8rem;border-bottom:1px solid var(--border)}
.metrics-table .metrics-group th{background:var(--brand);color:#fff;text-align:left;text-transform:uppercase;font-size:.8rem;letter-spacing:.06em}
.metrics-table tr:last-child td{border-bottom:0}
.metrics-table td:first-child{font-weight:600;width:46%}
.metrics-table td:last-child{color:var(--muted)}

.stats{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px}
canvas{width:100%}

.site-foot{display:block;text-align:center;padding:14px 20px;margin-top:10px;border-top:1px solid var(--border);background:rgba(0,0,0,.18)}
.site-foot a{text-decoration:none}