/* ============================================================================
   Оформление «1» — строгий справочник (по системе Stripe: светлый, много воздуха,
   тонкие веса, аккуратные границы). Наш акцент — изумруд вместо фиолетового, чтобы
   не терять связь с темой сайта.
   Подключается поверх style.css и меняет палитру, типографику и карточки.
   ========================================================================== */
:root {
  --bg: #ffffff;
  --page: #f6f9fc;              /* холодный очень светлый серо-синий */
  --fg: #0a2540;                /* тёмно-синий, как у Stripe */
  --muted: #425466;
  --line: #e3e8ee;
  --line-soft: #eef2f6;
  --navy: #0a2540;
  --blue: #0c7a44;              /* наш изумруд как акцент */
  --blue-soft: #f0f7f3;
  --gold: #b8862b;
  --radius: 6px;
}

body { font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif; font-weight: 400;
  -webkit-font-smoothing: antialiased; background: var(--page); color: var(--fg); }

h1 { font-weight: 300; font-size: 46px; line-height: 1.12; letter-spacing: -.022em; color: var(--navy); }
h2 { font-weight: 400; font-size: 27px; line-height: 1.25; letter-spacing: -.012em; color: var(--navy); }
h3 { font-weight: 600; }
.lead { font-size: 19px; line-height: 1.6; font-weight: 300; color: var(--muted); }

header.site { background: linear-gradient(180deg, #0f7048, #0a5636); border-bottom: 0; color: #fff; }
nav.main a { font-weight: 500; letter-spacing: .01em; }
nav.main a:hover { border-bottom-color: var(--blue); }

.card { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(10, 37, 64, .06); }
.card b { font-weight: 600; font-size: 17px; }
.card:hover { border-color: var(--blue); box-shadow: 0 10px 28px rgba(10, 37, 64, .10); transform: translateY(-1px); }
.card.tile { background: linear-gradient(150deg, #eaf6de 0%, #e7f0fb 100%); border: 1px solid #d7e5ef; }
.card.tile:hover { background: linear-gradient(150deg, #ddefca 0%, #d7e8fa 100%); }
.card.tile .ico { background: rgba(255, 255, 255, .75); }
.card.tile span { color: var(--muted); }

.btn { border-radius: 6px; background: var(--blue); font-weight: 600; letter-spacing: .01em; }
.btn:hover { background: #0a6a3b; }


.provider { background: #fbf0bd; border: 1px solid #e6d69b; margin: 0 0 20px; border-radius: 6px;
  box-shadow: 0 1px 2px rgba(10, 37, 64, .05); }
.provider .head b { color: var(--navy); font-weight: 600; }
.provider .cat { border-color: var(--line); color: var(--muted); }
.meta { background: #f4f7fb; border: 1px solid var(--line); border-radius: 6px;
  padding: 16px 20px; margin: 28px 0 0; }
table { border-color: var(--line); }
thead th { background: #fbf0bd; color: #4a4322; font-weight: 600; }
a.catlink { border-radius: 6px; border-left-width: 4px; box-shadow: 0 1px 2px rgba(10, 37, 64, .05); }

footer.site { background: #fff; border-top: 1px solid var(--line); }