/* Визитка службы поддержки — по теме «corporate» из poligon (дизайн-система Executive Infographics, Corporate):
   тёплая нейтральная палитра, песочный акцент, Montserrat, белые карточки с мягкой тенью, скругления 4/8/16 px.
   Токены и шапка взяты оттуда без изменений, чтобы оба сервиса выглядели одним продуктом. */

@font-face { font-family: "Montserrat"; font-weight: 400; font-display: swap; src: url(fonts/montserrat-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0400-04FF; }
@font-face { font-family: "Montserrat"; font-weight: 400; font-display: swap; src: url(fonts/montserrat-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF; }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url(fonts/montserrat-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+0400-04FF; }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url(fonts/montserrat-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF; }
@font-face { font-family: "Montserrat"; font-weight: 800; font-display: swap; src: url(fonts/montserrat-cyrillic-800-normal.woff2) format("woff2"); unicode-range: U+0400-04FF; }
@font-face { font-family: "Montserrat"; font-weight: 800; font-display: swap; src: url(fonts/montserrat-latin-800-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF; }

:root {
  color-scheme: light;
  --bg: #fbf7f2;            /* фон страницы: neutral-background-warm, разбавленный белым */
  --card: #ffffff;          /* neutral-background */
  --warm: #f1decb;          /* neutral-background-warm */
  --ink: #3a3a3a;           /* neutral-text-primary */
  --ink-2: #6e6e6e;         /* neutral-text-secondary (затемнён для контраста) */
  --rule: #dddddd;          /* neutral-border */
  --sand: #dcb083;          /* primary */
  --sand-hover: #d2a271;
  --sand-ink: #8a5a2b;      /* ссылки и фокус: тёмный тон песочного */
  --peach: #f7caac;         /* accent-peach */
  --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-xl: 24px;
  --shadow: 0 6px 20px rgba(0, 0, 0, .06);
  --shadow-up: 0 12px 28px rgba(0, 0, 0, .09);
  --sans: "Montserrat", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--sans); }
a { color: var(--sand-ink); text-underline-offset: 2px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--sand-ink); outline-offset: 3px; }
.muted { color: var(--ink-2); }

/* ---------- шапка (как в poligon) ---------- */
.top { display: flex; align-items: center; gap: 28px; padding: 0 28px; height: 60px;
  background: var(--card); border-bottom: 1px solid var(--rule); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.brand:hover { color: var(--ink); }
.brand-mark { display: grid; grid-template-columns: repeat(3, 5px); gap: 3px; align-items: end; padding: 7px 7px 8px;
  background: var(--sand); border-radius: var(--r-md); }
.brand-mark i { width: 5px; border-radius: 2px; background: #ffffff; }
.brand-mark i:nth-child(1) { height: 8px; }
.brand-mark i:nth-child(2) { height: 13px; }
.brand-mark i:nth-child(3) { height: 18px; }

/* ---------- содержимое ---------- */
.wrap { flex: 1; width: 100%; max-width: 920px; margin: 0 auto; padding: 56px 28px 72px;
  display: flex; flex-direction: column; justify-content: center; }
h1 { font-size: 40px; line-height: 1.15; font-weight: 800; margin: 0 0 12px; letter-spacing: -.015em; }
.lead { margin: 0 0 36px; max-width: 56ch; font-size: 17px; }

/* ---------- большие кнопки ---------- */
.actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.action { display: flex; flex-direction: column; gap: 14px; min-height: 260px; padding: 28px;
  background: var(--card); color: var(--ink); text-decoration: none;
  border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow);
  transition: border-color .15s, background-color .15s, transform .15s, box-shadow .15s; }
.action:hover { color: var(--ink); border-color: var(--sand); transform: translateY(-2px); box-shadow: var(--shadow-up); }
.action:active { transform: translateY(0); }

.action-primary { background: var(--sand); border-color: var(--sand); }
.action-primary:hover { background: var(--sand-hover); border-color: var(--sand-hover); }

.action-icon { width: 60px; height: 60px; display: grid; place-items: center; flex: none;
  border-radius: var(--r-lg); background: var(--peach); color: var(--ink); }
.action-primary .action-icon { background: rgba(255, 255, 255, .55); }
.action-icon svg { width: 30px; height: 30px; }

.action-title { display: block; font-size: 26px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.action-sub { display: block; margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.action-primary .action-sub { color: var(--ink); }

.action-go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.action-go svg { width: 20px; height: 20px; transition: transform .15s; }
.action:hover .action-go svg { transform: translateX(4px); }

/* ---------- подвал ---------- */
.foot { padding: 0 28px 28px; text-align: center; font-size: 13px; color: var(--ink-2); }

@media (max-width: 760px) {
  .top { padding: 0 16px; }
  .wrap { padding: 32px 16px 48px; justify-content: flex-start; }
  h1 { font-size: 30px; }
  .lead { font-size: 16px; margin-bottom: 24px; }
  .actions { grid-template-columns: 1fr; gap: 14px; }
  .action { min-height: 0; padding: 20px; gap: 12px; display: grid; grid-template-columns: auto 1fr; align-items: center; }
  .action-icon { width: 52px; height: 52px; }
  .action-icon svg { width: 26px; height: 26px; }
  .action-title { font-size: 21px; }
  .action-sub { font-size: 14px; margin-top: 2px; }
  .action-go { grid-column: 1 / -1; margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .action, .action-go svg { transition: none; }
  .action:hover, .action:hover .action-go svg { transform: none; }
}