:root {
  --accent: #4ca0dc;
  --accent-dark: #2f7fb8;
  --navy: #1c406b;
  --ink: #22303f;
  --muted: #5b6b80;
  --bg: #ffffff;
  --card: #ffffff;
  --border: #dfe5ef;
  --star: #f5a623;
  --radius: 14px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
}
a { color: var(--accent-dark); }

header {
  background: linear-gradient(135deg, #142f4f 0%, #1c406b 60%, #2a5c96 100%);
  color: #fff;
  padding: 56px 20px 72px;
  text-align: center;
}
header h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; }
header p.tagline { margin-top: 10px; font-size: 1.1rem; opacity: 0.92; max-width: 680px; margin-left: auto; margin-right: auto; }

.stats {
  max-width: 1120px;
  margin: -44px auto 0;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr; }
}
.stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(28, 64, 107, 0.12);
}
.stat .num { font-size: 1.7rem; font-weight: 800; color: var(--navy); }
.stat .label { font-size: 0.85rem; color: var(--muted); margin-top: 2px; }

main { max-width: 1120px; margin: 0 auto; padding: 36px 20px 60px; }

.intro { margin: 0 0 32px; color: var(--muted); }
.intro h2 { color: var(--ink); font-size: 1.25rem; margin-bottom: 8px; }
.intro p + p { margin-top: 10px; }

.reviews {
  columns: 2;
  column-gap: 16px;
}
@media (max-width: 820px) {
  .reviews { columns: 1; }
}
.review {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 16px;
  break-inside: avoid;
}
.review .top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  margin-bottom: 6px;
}
.review .author { font-weight: 700; }
.review .date { color: var(--muted); font-size: 0.85rem; }
.review .stars { color: var(--star); letter-spacing: 2px; font-size: 0.95rem; }
.review .stars .empty { color: var(--border); }
.review .text { margin-top: 8px; white-space: pre-line; overflow-wrap: break-word; }
.review .text.clamped {
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review .more-btn {
  background: none; border: none; color: var(--accent-dark);
  cursor: pointer; font-size: 0.9rem; padding: 4px 0 0; font-weight: 600;
}
.review .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.badge {
  font-size: 0.78rem;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.badge.source-prodoctorov { background: #e8f0fe; color: #1a56b0; }
.badge.source-yandex { background: #fff4d6; color: #8a6400; }
.badge.source-2gis { background: #e5f6e8; color: #1c7a34; }
.badge.branch { background: #dfe5ef; color: var(--muted); font-weight: 500; }

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}
.page-link {
  min-width: 40px;
  padding: 8px 12px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
}
a.page-link:hover { border-color: var(--accent); color: var(--accent-dark); }
.page-link.current { background: var(--navy); border-color: var(--navy); color: #fff; }
.page-gap { color: var(--muted); padding: 0 2px; }

footer {
  border-top: 1px solid var(--border);
  padding: 28px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}
footer .links { margin-top: 6px; }
footer .links a { margin: 0 8px; }