/* ==========================================================================
   The Legal Thai — лендинг
   Дизайн-система. Один файл, без зависимостей, без внешних запросов.
   Порядок: токены → база → типографика → компоненты → секции → адаптив
   ========================================================================== */

/* --------------------------------------------------------------- 1. Токены */

:root {
  /* Ground: холодный нейтральный с лёгким зелёным уклоном — под нефритовый акцент */
  --paper:      #F6F8F7;
  --surface:    #FFFFFF;
  --mist:       #EDF2F0;
  --sand:       #F4F1EA;

  /* Текст */
  --ink:        #101E1B;
  --ink-2:      #33453F;
  --muted:      #5A6A64;
  --on-dark:    #EAF2EF;
  --on-dark-2:  #A9BFB8;

  /* Нефрит — основной акцент */
  --jade:       #0C6B5C;
  --jade-600:   #0A5A4D;
  --jade-700:   #07463C;
  --jade-soft:  #E3EFEC;

  /* Тёплый контрапункт — только для цен и акцентных чисел */
  --sun:        #9A6206;
  --sun-soft:   #FBF1DE;

  /* Сигнальные */
  --wa:         #25D366;
  --wa-dark:    #128C7E;
  --danger:     #A8402A;
  --danger-soft:#F9EAE6;

  /* Линии и тени */
  --rule:       #DEE7E4;
  --rule-2:     #7C8C86;   /* граница полей и вариантов квиза — 3.5:1, требование WCAG 1.4.11 */
  --shadow-sm:  0 1px 2px rgba(16,30,27,.06);
  --shadow-md:  0 4px 16px -4px rgba(16,30,27,.10), 0 1px 3px rgba(16,30,27,.06);
  --shadow-lg:  0 18px 48px -16px rgba(16,30,27,.22), 0 2px 8px rgba(16,30,27,.06);

  /* Типографика */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Roboto,
          Ubuntu, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Ритм */
  --wrap: 1120px;
  --prose: 68ch;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
}

/* ----------------------------------------------------------------- 2. База */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--jade); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--jade-600); }

:focus-visible {
  outline: 3px solid var(--jade);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--jade); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.prose { max-width: var(--prose); }
.center { text-align: center; margin-inline: auto; }

/* --------------------------------------------------------- 3. Типографика */

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.015em; text-wrap: balance; }

h1 { font-size: clamp(30px, 4.6vw, 50px); line-height: 1.08; letter-spacing: -.025em; }
h2 { font-size: clamp(25px, 3.2vw, 36px); line-height: 1.15; }
h3 { font-size: clamp(19px, 2vw, 22px); line-height: 1.28; }
h4 { font-size: 17px; line-height: 1.35; }

p { margin: 0; }

.lead { font-size: clamp(17px, 1.9vw, 21px); line-height: 1.5; color: var(--ink-2); }
.small { font-size: 15px; }
.tiny  { font-size: 13.5px; line-height: 1.5; }
.muted { color: var(--muted); }
.nums  { font-variant-numeric: tabular-nums; }

.eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--jade); margin-bottom: 14px;
}
.eyebrow--light { color: var(--on-dark-2); }

.stack   { display: flex; flex-direction: column; }
.stack-3 { gap: 3px; } .stack-6 { gap: 6px; } .stack-10 { gap: 10px; }
.stack-16 { gap: 16px; } .stack-24 { gap: 24px; } .stack-32 { gap: 32px; }
.stack-48 { gap: 48px; }

strong, b { font-weight: 700; }
mark {
  background: var(--sun-soft); color: inherit;
  padding: .05em .25em; border-radius: 3px;
}

/* ----------------------------------------------------------- 4. Компоненты */

/* 4.1 Кнопки */
.btn {
  --btn-bg: var(--jade);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 24px;
  min-height: 52px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-md);
  font: inherit; font-size: 16px; font-weight: 650; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease;
  box-shadow: var(--shadow-sm);
}
.btn:hover { --btn-bg: var(--jade-600); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

.btn--wa { --btn-bg: var(--wa); --btn-fg: #06301F; }
.btn--wa:hover { --btn-bg: #1FBE5C; color: #06301F; }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--rule-2);
  box-shadow: none;
}
.btn--ghost:hover { --btn-bg: var(--surface); --btn-fg: var(--ink); --btn-bd: var(--jade); }

.btn--light { --btn-bg: #fff; --btn-fg: var(--jade); }
.btn--light:hover { --btn-bg: #fff; --btn-fg: var(--jade-600); }

.btn--lg { padding: 17px 30px; min-height: 58px; font-size: 17px; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.wa-ico { width: 20px; height: 20px; flex: none; }

/* 4.2 Карточки и поверхности */
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.card--flat { box-shadow: none; }
.card--mist { background: var(--mist); border-color: transparent; }

/* 4.3 Плашки-заметки */
.note {
  display: flex; gap: 14px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--jade-soft);
  border: 1px solid #CFE3DE;
  font-size: 15.5px; line-height: 1.55; color: var(--ink-2);
}
.note--warn { background: var(--sun-soft); border-color: #EDD9AE; }
.note--stop { background: var(--danger-soft); border-color: #EFD2CA; }
.note b { color: var(--ink); }
.note__ico { flex: none; width: 22px; height: 22px; margin-top: 1px; }

/* 4.4 Список с галочками */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checks li {
  display: grid; grid-template-columns: 24px 1fr; gap: 12px;
  align-items: start; font-size: 16.5px; line-height: 1.5;
}
.checks li::before {
  content: ""; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: var(--jade-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C6B5C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.checks--no li::before {
  background: #F2E9E7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8402A' stroke-width='3.2' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* 4.5 Таблица */
.tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--surface);
}
table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 15.5px; }
th, td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--mist);
  font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-2); white-space: nowrap;
  border-bottom: 1px solid var(--rule-2);
}
tbody th { font-weight: 650; white-space: nowrap; color: var(--ink); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
td.num, th.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.col-hl { background: var(--jade-soft); }
thead .col-hl { background: #D5E8E3; }
.yes { color: var(--jade); font-weight: 700; }
.no  { color: #5A6A64; }

/* 4.6 Аккордеон FAQ */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 20px 44px 20px 0; position: relative;
  font-size: 17.5px; font-weight: 650; line-height: 1.4; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 24px;
  width: 15px; height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C6B5C' stroke-width='3' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq summary:hover { color: var(--jade); }
.faq__a { padding: 0 44px 22px 0; color: var(--ink-2); font-size: 16.5px; max-width: 62ch; }
.faq__a p + p { margin-top: 12px; }

/* 4.7 Формы */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 14.5px; font-weight: 650; color: var(--ink-2); }
.field input, .field textarea, .field select {
  font: inherit; font-size: 16px;
  padding: 14px 15px;
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--rule-2);
  border-radius: var(--r-md);
  width: 100%;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--jade); outline: none; box-shadow: 0 0 0 3px var(--jade-soft);
}
.field--err input, .field--err textarea { border-color: var(--danger); }
.field__err { font-size: 13.5px; color: var(--danger); }

.consent { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
.consent input { width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--jade); }
.consent label { font-size: 13.5px; font-weight: 400; color: var(--muted); line-height: 1.45; }

.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.formstatus { font-size: 15px; padding: 14px 16px; border-radius: var(--r-md); }
.formstatus--ok  { background: var(--jade-soft); color: var(--jade-700); }
.formstatus--err { background: var(--danger-soft); color: var(--danger); }

/* 4.8 Квиз */
.quiz {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden;
  /* Шаги разной высоты заставляли браузер доскроливать страницу при смене
     вопроса — якорение прокрутки здесь только мешает. */
  overflow-anchor: none;
}
.quiz__bar { height: 5px; background: var(--mist); }
.quiz__bar i { display: block; height: 100%; width: 25%; background: var(--jade); transition: width .3s ease; }
.quiz__body { padding: clamp(22px, 4vw, 38px); }
/* min-height здесь не нужен: скачок страницы при смене шага лечится
   overflow-anchor и удержанием виджета в кадре, а фиксированная высота
   оставляла пустоту под коротким первым шагом. */
.quiz__step { display: none; }
.quiz__step.is-on { display: block; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.quiz__count { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.quiz__q { font-size: clamp(20px, 2.5vw, 26px); font-weight: 700; line-height: 1.25; margin: 8px 0 22px; text-wrap: balance; }

.opts { display: grid; gap: 10px; }
.opt {
  display: flex; align-items: center; gap: 13px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1.5px solid var(--rule-2);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 16.5px; line-height: 1.35;
  transition: border-color .15s ease, background-color .15s ease;
}
.opt:hover { border-color: var(--jade); background: var(--jade-soft); }
.opt input { width: 20px; height: 20px; flex: none; accent-color: var(--jade); margin: 0; }
.opt:has(input:checked) { border-color: var(--jade); background: var(--jade-soft); }

.quiz__nav { display: flex; gap: 12px; margin-top: 24px; }

.quiz__result { display: none; }
.quiz__result.is-on { display: block; }
.rec {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px;
  padding: 22px; margin-bottom: 20px;
  background: var(--jade-soft); border-radius: var(--r-md);
}
.rec__name { font-size: clamp(22px, 3vw, 28px); font-weight: 700; color: var(--jade-700); }
.rec__price { font-family: var(--serif); font-size: clamp(22px, 3vw, 28px); color: var(--ink); font-variant-numeric: tabular-nums; }


/* Радиогруппы квиза обёрнуты в fieldset, чтобы скринридер читал вопрос
   вместе с вариантом. Визуально fieldset не должен ничего добавлять. */
.quiz__set { border: 0; margin: 0; padding: 0; min-width: 0; }
.quiz__set legend.quiz__q { padding: 0; display: block; width: 100%; }
.quiz__nav .btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.quiz__nav .btn[disabled]:hover { transform: none; --btn-bg: var(--jade); }
.quiz__q:focus-visible { outline-offset: 6px; }

/* Ошибка у конкретного поля, а не только общим сообщением внизу формы */
.field--err input, .field--err textarea { border-color: var(--danger); }
.field--err .field__err, .consent.field--err .field__err { color: var(--danger); font-size: 13.5px; margin-top: 4px; }
.consent.field--err label { color: var(--danger); }

/* 4.9 Цитата-кейс */
.quote {
  position: relative;
  padding: clamp(26px, 4vw, 40px);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.quote__mark {
  font-family: var(--serif); font-size: 72px; line-height: .8; color: var(--jade-soft);
  position: absolute; top: 18px; left: 22px; user-select: none;
}
.quote__text {
  position: relative;
  font-family: var(--serif); font-size: clamp(18px, 2.2vw, 23px); line-height: 1.5;
  color: var(--ink); font-style: italic;
}
.quote__by { margin-top: 18px; font-size: 15px; }
.quote__by b { display: block; font-style: normal; }
.quote__src { color: var(--muted); font-size: 14px; }

/* 4.10 Шаги */
.steps { counter-reset: s; display: grid; gap: 4px; }
.step {
  counter-increment: s;
  display: grid; grid-template-columns: 46px 1fr; gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}
.step:last-child { border-bottom: 0; }
.step::before {
  content: counter(s);
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--jade); color: #fff;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.step h3 { margin-bottom: 5px; }
.step p { color: var(--ink-2); font-size: 16px; }
.step__when { display: inline-block; margin-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--jade); background: var(--jade-soft); padding: 4px 10px; border-radius: 100px; }

/* 4.11 Полоса доверия */
.trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px;
  font-size: 15px; color: var(--ink-2);
}
.trust span { display: inline-flex; align-items: center; gap: 8px; }
.trust b { font-variant-numeric: tabular-nums; color: var(--ink); }
.trust .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--jade); flex: none; }
.stars { color: var(--sun); letter-spacing: 1px; }


/* ------------------------------------------- 4.13 Подложки секций

   Фактура вместо плоской заливки. Всё на градиентах: ни одного запроса,
   ничего не «прыгает» при загрузке. Сдержанно — аудитория тут покупает
   доверие, а перегруженный фон читается как дешёвый лендинг.
---------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(60ch 40ch at 82% -10%, rgba(12,107,92,.10), transparent 65%),
    radial-gradient(40ch 30ch at 5% 105%, rgba(154,98,6,.07), transparent 60%);
}
/* Мотив круглой печати — тихая отсылка к консульскому штампу */
.hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -8%; top: -14%; width: min(46vw, 560px); aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(12,107,92,.13);
  box-shadow: inset 0 0 0 14px rgba(12,107,92,.045), inset 0 0 0 15px rgba(12,107,92,.10);
}

.sec--mist {
  background-color: var(--mist);
  background-image: radial-gradient(rgba(16,30,27,.085) 1px, transparent 1.2px);
  background-size: 20px 20px;
}

.sec--sand {
  background-color: var(--sand);
  background-image: linear-gradient(180deg, rgba(255,255,255,.55), transparent 40%);
}

.sec--dark {
  position: relative; isolation: isolate;
  background-color: var(--ink);
  background-image:
    radial-gradient(50ch 34ch at 88% 8%, rgba(78,174,151,.16), transparent 62%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 2px, transparent 2px 9px);
}

.ftr {
  background-image: radial-gradient(46ch 30ch at 6% -20%, rgba(78,174,151,.13), transparent 65%);
}

/* ------------------------------------------------- 4.14 Блок команды */

.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 34px); }

.member {
  display: grid; grid-template-columns: 108px 1fr; gap: 22px; align-items: start;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 26px;
  box-shadow: var(--shadow-sm);
}
.member__ph {
  width: 108px; height: 108px; border-radius: 50%;
  object-fit: cover; background: var(--mist);
  box-shadow: 0 0 0 1px var(--rule), 0 0 0 6px var(--jade-soft);
}
.member h3 { margin-bottom: 2px; }
.member__role {
  font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--jade); margin-bottom: 10px;
}
.member p { font-size: 15.5px; color: var(--ink-2); }
.member__tag {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  font-size: 13.5px; color: var(--muted);
}
.member__tag .ic { width: 16px; height: 16px; color: var(--jade); }

/* Иконка в карточке продукта и в заголовке блока */
.prod__ic, .head__ic {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--jade-soft); color: var(--jade);
}
.sec--dark .head__ic { background: rgba(78,174,151,.16); color: #7FD9C6; }

/* Список выгод с предметными иконками вместо одинаковых галочек */
.feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.feats li {
  display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start;
  font-size: 16.5px; line-height: 1.45;
}
.feats .ic { color: var(--jade); width: 24px; height: 24px; margin-top: 1px; }
.feats b { display: block; }
.feats span { color: var(--ink-2); font-size: 15px; }

@media (max-width: 760px) {
  .team { grid-template-columns: 1fr; }
  /* На узком экране карточка складывается вертикально: должность помещается
     в строку, а описание читается на всю ширину, а не узкой колонкой сбоку. */
  .member { grid-template-columns: 1fr; gap: 14px; padding: 20px; }
  .member__ph { width: 76px; height: 76px; }
  .member__role { font-size: 12px; letter-spacing: .07em; }
  .hero::before { display: none; }
}

/* ---------------------------------------------- 4.12 Иконки

   Свой набор под предметную область: паспорт, штамп, срок, банк, ключ, авто.
   Реализованы масками, а не картинками, — цвет наследуется от currentColor,
   размер задаётся шрифтом, лишних запросов нет.
---------------------------------------------------------------------- */

.ic {
  display: inline-block; width: 1.35em; height: 1.35em; flex: none;
  background-color: currentColor; vertical-align: -.28em;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.ic--lg { width: 2em; height: 2em; }

.ic--passport { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%224%22%20y%3D%222.5%22%20width%3D%2216%22%20height%3D%2219%22%20rx%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223.2%22%2F%3E%3Cpath%20d%3D%22M9%2016.5h6%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%224%22%20y%3D%222.5%22%20width%3D%2216%22%20height%3D%2219%22%20rx%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223.2%22%2F%3E%3Cpath%20d%3D%22M9%2016.5h6%22%2F%3E%3C%2Fsvg%3E"); }
.ic--stamp { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M8%2010.5V7a4%204%200%20118%200v3.5%22%2F%3E%3Cpath%20d%3D%22M5%2014h14l1.2%204.2a1.4%201.4%200%2001-1.35%201.8H5.15A1.4%201.4%200%20013.8%2018.2z%22%2F%3E%3Cpath%20d%3D%22M9.5%2010.5h5%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M8%2010.5V7a4%204%200%20118%200v3.5%22%2F%3E%3Cpath%20d%3D%22M5%2014h14l1.2%204.2a1.4%201.4%200%2001-1.35%201.8H5.15A1.4%201.4%200%20013.8%2018.2z%22%2F%3E%3Cpath%20d%3D%22M9.5%2010.5h5%22%2F%3E%3C%2Fsvg%3E"); }
.ic--calendar { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%223.5%22%20y%3D%225%22%20width%3D%2217%22%20height%3D%2216%22%20rx%3D%222.4%22%2F%3E%3Cpath%20d%3D%22M8%202.5v4M16%202.5v4M3.5%2010h17%22%2F%3E%3Cpath%20d%3D%22M8.5%2014.5h3M8.5%2017.5h7%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%223.5%22%20y%3D%225%22%20width%3D%2217%22%20height%3D%2216%22%20rx%3D%222.4%22%2F%3E%3Cpath%20d%3D%22M8%202.5v4M16%202.5v4M3.5%2010h17%22%2F%3E%3Cpath%20d%3D%22M8.5%2014.5h3M8.5%2017.5h7%22%2F%3E%3C%2Fsvg%3E"); }
.ic--bank { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M3.5%209.5L12%204l8.5%205.5%22%2F%3E%3Cpath%20d%3D%22M5.5%209.5v9M10%209.5v9M14%209.5v9M18.5%209.5v9%22%2F%3E%3Cpath%20d%3D%22M3%2019.5h18%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M3.5%209.5L12%204l8.5%205.5%22%2F%3E%3Cpath%20d%3D%22M5.5%209.5v9M10%209.5v9M14%209.5v9M18.5%209.5v9%22%2F%3E%3Cpath%20d%3D%22M3%2019.5h18%22%2F%3E%3C%2Fsvg%3E"); }
.ic--key { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2215.5%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M11%2012.7l8-8%22%2F%3E%3Cpath%20d%3D%22M16.5%207.2l2.2%202.2M19%204.7l2%202%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2215.5%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M11%2012.7l8-8%22%2F%3E%3Cpath%20d%3D%22M16.5%207.2l2.2%202.2M19%204.7l2%202%22%2F%3E%3C%2Fsvg%3E"); }
.ic--car { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M4%2015.5l1.6-5a2.4%202.4%200%20012.3-1.7h8.2a2.4%202.4%200%20012.3%201.7l1.6%205%22%2F%3E%3Crect%20x%3D%222.5%22%20y%3D%2215%22%20width%3D%2219%22%20height%3D%224.5%22%20rx%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M6.5%2019.5v1.6M17.5%2019.5v1.6%22%2F%3E%3Cpath%20d%3D%22M6.5%2017.2h1.5M16%2017.2h1.5%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M4%2015.5l1.6-5a2.4%202.4%200%20012.3-1.7h8.2a2.4%202.4%200%20012.3%201.7l1.6%205%22%2F%3E%3Crect%20x%3D%222.5%22%20y%3D%2215%22%20width%3D%2219%22%20height%3D%224.5%22%20rx%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M6.5%2019.5v1.6M17.5%2019.5v1.6%22%2F%3E%3Cpath%20d%3D%22M6.5%2017.2h1.5M16%2017.2h1.5%22%2F%3E%3C%2Fsvg%3E"); }
.ic--briefcase { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%222.5%22%20y%3D%227%22%20width%3D%2219%22%20height%3D%2213%22%20rx%3D%222.3%22%2F%3E%3Cpath%20d%3D%22M8.5%207V5.4A2%202%200%200110.4%203.4h3.2A2%202%200%200115.5%205.4V7%22%2F%3E%3Cpath%20d%3D%22M2.5%2012.5h19%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%222.5%22%20y%3D%227%22%20width%3D%2219%22%20height%3D%2213%22%20rx%3D%222.3%22%2F%3E%3Cpath%20d%3D%22M8.5%207V5.4A2%202%200%200110.4%203.4h3.2A2%202%200%200115.5%205.4V7%22%2F%3E%3Cpath%20d%3D%22M2.5%2012.5h19%22%2F%3E%3C%2Fsvg%3E"); }
.ic--family { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%227.5%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2216.5%22%20cy%3D%229%22%20r%3D%222.3%22%2F%3E%3Cpath%20d%3D%22M3%2020v-1.2a5.5%205.5%200%20015.5-5.5A5.5%205.5%200%200114%2018.8V20%22%2F%3E%3Cpath%20d%3D%22M16%2013.6a4.4%204.4%200%20015%204.4V20%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%227.5%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2216.5%22%20cy%3D%229%22%20r%3D%222.3%22%2F%3E%3Cpath%20d%3D%22M3%2020v-1.2a5.5%205.5%200%20015.5-5.5A5.5%205.5%200%200114%2018.8V20%22%2F%3E%3Cpath%20d%3D%22M16%2013.6a4.4%204.4%200%20015%204.4V20%22%2F%3E%3C%2Fsvg%3E"); }
.ic--shield { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%202.8l7.5%203v5.6c0%204.7-3.1%208.6-7.5%209.8-4.4-1.2-7.5-5.1-7.5-9.8V5.8z%22%2F%3E%3Cpath%20d%3D%22M8.8%2011.8l2.3%202.3%204.3-4.4%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%202.8l7.5%203v5.6c0%204.7-3.1%208.6-7.5%209.8-4.4-1.2-7.5-5.1-7.5-9.8V5.8z%22%2F%3E%3Cpath%20d%3D%22M8.8%2011.8l2.3%202.3%204.3-4.4%22%2F%3E%3C%2Fsvg%3E"); }
.ic--doc { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M13.5%202.5H7A2.5%202.5%200%20004.5%205v14A2.5%202.5%200%20007%2021.5h10a2.5%202.5%200%20002.5-2.5V8.5z%22%2F%3E%3Cpath%20d%3D%22M13.5%202.5V8.5h6%22%2F%3E%3Cpath%20d%3D%22M8.5%2015l2%202%204-4.2%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M13.5%202.5H7A2.5%202.5%200%20004.5%205v14A2.5%202.5%200%20007%2021.5h10a2.5%202.5%200%20002.5-2.5V8.5z%22%2F%3E%3Cpath%20d%3D%22M13.5%202.5V8.5h6%22%2F%3E%3Cpath%20d%3D%22M8.5%2015l2%202%204-4.2%22%2F%3E%3C%2Fsvg%3E"); }
.ic--plane { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M10.6%2012.2L3%209.6l1.6-1.7%208%201.3%204.2-4.2a2.2%202.2%200%20013.1%203.1l-4.2%204.2%201.3%208-1.7%201.6-2.6-7.6-3.4%203.3.2%202.7-1.4%201-1.6-3-3-1.6%201-1.4%202.7.2z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M10.6%2012.2L3%209.6l1.6-1.7%208%201.3%204.2-4.2a2.2%202.2%200%20013.1%203.1l-4.2%204.2%201.3%208-1.7%201.6-2.6-7.6-3.4%203.3.2%202.7-1.4%201-1.6-3-3-1.6%201-1.4%202.7.2z%22%2F%3E%3C%2Fsvg%3E"); }
.ic--clock { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%206.8V12l3.4%202.2%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%206.8V12l3.4%202.2%22%2F%3E%3C%2Fsvg%3E"); }
.ic--globe { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M3%2012h18%22%2F%3E%3Cpath%20d%3D%22M12%203a15%2015%200%20010%2018%2015%2015%200%20010-18z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M3%2012h18%22%2F%3E%3Cpath%20d%3D%22M12%203a15%2015%200%20010%2018%2015%2015%200%20010-18z%22%2F%3E%3C%2Fsvg%3E"); }
.ic--wallet { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222.6%22%2F%3E%3Cpath%20d%3D%22M3%2010.5h18%22%2F%3E%3Ccircle%20cx%3D%2216.5%22%20cy%3D%2215.2%22%20r%3D%221.2%22%2F%3E%3Cpath%20d%3D%22M6%206V4.8A1.8%201.8%200%20017.8%203h8%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222.6%22%2F%3E%3Cpath%20d%3D%22M3%2010.5h18%22%2F%3E%3Ccircle%20cx%3D%2216.5%22%20cy%3D%2215.2%22%20r%3D%221.2%22%2F%3E%3Cpath%20d%3D%22M6%206V4.8A1.8%201.8%200%20017.8%203h8%22%2F%3E%3C%2Fsvg%3E"); }
.ic--chat { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M20.5%2012.2c0%204.2-3.8%207.6-8.5%207.6a9.6%209.6%200%2001-3-.5L4%2021l1.3-3.6a7%207%200%2001-1.8-4.6c0-4.2%203.8-7.6%208.5-7.6s8.5%203.4%208.5%207.6z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M20.5%2012.2c0%204.2-3.8%207.6-8.5%207.6a9.6%209.6%200%2001-3-.5L4%2021l1.3-3.6a7%207%200%2001-1.8-4.6c0-4.2%203.8-7.6%208.5-7.6s8.5%203.4%208.5%207.6z%22%2F%3E%3C%2Fsvg%3E"); }
.ic--compass { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M15.6%208.4l-2%205.2-5.2%202%202-5.2z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M15.6%208.4l-2%205.2-5.2%202%202-5.2z%22%2F%3E%3C%2Fsvg%3E"); }
.ic--building { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%224.5%22%20y%3D%223%22%20width%3D%2215%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8.5%207.5h2M13.5%207.5h2M8.5%2011.5h2M13.5%2011.5h2M8.5%2015.5h2M13.5%2015.5h2%22%2F%3E%3Cpath%20d%3D%22M3%2021h18%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%224.5%22%20y%3D%223%22%20width%3D%2215%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8.5%207.5h2M13.5%207.5h2M8.5%2011.5h2M13.5%2011.5h2M8.5%2015.5h2M13.5%2015.5h2%22%2F%3E%3Cpath%20d%3D%22M3%2021h18%22%2F%3E%3C%2Fsvg%3E"); }
.ic--route { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%222.6%22%2F%3E%3Cpath%20d%3D%22M8.6%206h5A3.4%203.4%200%200117%209.4v0a3.4%203.4%200%2001-3.4%203.4h-3.2A3.4%203.4%200%20007%2016.2v0A3.4%203.4%200%200010.4%2018h5%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%222.6%22%2F%3E%3Cpath%20d%3D%22M8.6%206h5A3.4%203.4%200%200117%209.4v0a3.4%203.4%200%2001-3.4%203.4h-3.2A3.4%203.4%200%20007%2016.2v0A3.4%203.4%200%200010.4%2018h5%22%2F%3E%3C%2Fsvg%3E"); }

/* --------------------------------------------------------------- 5. Секции */

section { scroll-margin-top: 84px; }
.sec { padding: clamp(56px, 8vw, 96px) 0; }
.sec--tight { padding: clamp(40px, 6vw, 68px) 0; }
.sec--mist { background: var(--mist); }
.sec--sand { background: var(--sand); }
.sec--dark { background: var(--ink); color: var(--on-dark); }
.sec--dark h2, .sec--dark h3 { color: #fff; }
.sec--dark p { color: var(--on-dark-2); }
.sec--dark a { color: #7FD9C6; }

/* Белые карточки и формы внутри тёмных секций: правила .sec--dark h3 / p / a
   перебивали их собственные цвета — заголовок становился белым на белом,
   а кнопка WhatsApp получала бирюзовый текст. Возвращаем их в свою палитру. */
.sec--dark .card, .sec--dark .formbox { color: var(--ink); }
.sec--dark .card h2, .sec--dark .card h3, .sec--dark .card h4,
.sec--dark .formbox h2, .sec--dark .formbox h3, .sec--dark .formbox h4 { color: var(--ink); }
.sec--dark .card p, .sec--dark .formbox p { color: var(--ink-2); }
.sec--dark .card .muted, .sec--dark .formbox .muted,
.sec--dark .card .tiny, .sec--dark .formbox .tiny { color: var(--muted); }
.sec--dark .formbox .field label { color: var(--ink-2); }
.sec--dark .formbox .formstatus--err { color: var(--danger); }
.sec--dark .formbox .formstatus--ok { color: var(--jade-700); }
.sec--dark .btn { color: var(--btn-fg); }
.sec--dark .card a:not(.btn), .sec--dark .formbox a:not(.btn) { color: var(--jade); }

/* Индикатор фокуса на тёмном фоне: нефрит даёт 2.68:1, нужно минимум 3:1 */
.sec--dark :focus-visible, .ftr :focus-visible { outline-color: #7FD9C6; }

.sec__head { max-width: 52ch; margin-bottom: clamp(28px, 4vw, 44px); }
.sec__head p { margin-top: 12px; color: var(--ink-2); font-size: 17.5px; }
.sec--dark .sec__head p { color: var(--on-dark-2); }

/* 5.1 Шапка */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246,248,247,.86);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.hdr__in { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.logo svg { width: 26px; height: 26px; flex: none; }
.logo:hover { color: var(--jade); }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { color: var(--ink-2); text-decoration: none; font-size: 15.5px; font-weight: 550; }
.nav a:hover { color: var(--jade); }
.lang { display: flex; gap: 3px; align-items: center; font-size: 13.5px; }
.lang a { color: var(--muted); text-decoration: none; padding: 5px 7px; border-radius: var(--r-sm); font-weight: 600; }
.lang a:hover { background: var(--mist); color: var(--ink); }
.lang a[aria-current="true"] { background: var(--jade); color: #fff; }
.hdr .btn { padding: 10px 16px; min-height: 42px; font-size: 15px; }

/* 5.2 Герой */
.hero { padding: clamp(40px, 6vw, 76px) 0 clamp(48px, 7vw, 84px); }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.hero h1 { margin-bottom: 20px; }
.hero .lead { margin-bottom: 26px; }
.hero .trust { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rule); }

.offer {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: sticky; top: 92px;
}
.offer__top { padding: 24px 26px 22px; border-bottom: 1px solid var(--rule); }
.offer__label { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.offer__price { font-family: var(--serif); font-size: 46px; line-height: 1; margin: 10px 0 6px; font-variant-numeric: tabular-nums; }
.offer__price small { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.offer__sub { font-size: 15px; color: var(--ink-2); }
.offer__body { padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 18px; }
.offer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15.5px; }
.offer__list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; color: var(--ink-2); }
.offer__list li::before {
  content: ""; width: 18px; height: 18px; margin-top: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C6B5C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.offer__pay {
  background: var(--sun-soft); border-radius: var(--r-md); padding: 14px 16px;
  font-size: 15.5px; line-height: 1.45; color: #5A3D07;
}
.offer__pay b { color: #3F2A03; }

/* 5.3 Сетки */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 3vw, 32px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 28px); }
.split  { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 52px); align-items: start; }
.split--wide { grid-template-columns: 1.2fr .8fr; }

/* 5.4 Продуктовые карточки */
.prod {
  display: flex; flex-direction: column; gap: 16px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 28px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.prod:hover { border-color: var(--jade); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.prod__tag { font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--jade); }
.prod__price { font-family: var(--serif); font-size: 32px; line-height: 1; font-variant-numeric: tabular-nums; }
.prod__price small { font-family: var(--sans); font-size: 14px; color: var(--muted); font-weight: 600; }
.prod p { color: var(--ink-2); font-size: 16px; }
.prod .btn { margin-top: auto; }

/* 5.5 Финальный CTA */
.cta-final { background: var(--ink); color: var(--on-dark); }
.cta-final .grid-2 { align-items: center; }
.cta-final h2 { color: #fff; }
.cta-final p { color: var(--on-dark-2); }
.formbox { background: var(--surface); border-radius: var(--r-lg); padding: clamp(24px, 3.5vw, 34px); box-shadow: var(--shadow-lg); }
.formbox .field label { color: var(--ink-2); }

/* 5.6 Подвал */
.ftr { background: var(--ink); color: var(--on-dark-2); padding: clamp(48px, 6vw, 72px) 0 32px; font-size: 15px; }
.ftr a { color: var(--on-dark); text-decoration: none; }
.ftr a:hover { color: #7FD9C6; text-decoration: underline; }
.ftr__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(24px, 4vw, 48px); }
.ftr h4 { color: #fff; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ftr .logo { color: #fff; margin-bottom: 14px; }
.ftr .logo:hover { color: #7FD9C6; }
.disclaimer {
  margin-top: 40px; padding-top: 26px; border-top: 1px solid #24352F;
  font-size: 13.5px; line-height: 1.6; color: #8AA39B; max-width: 92ch;
}
.disclaimer b { color: var(--on-dark); }
.ftr__legal { margin-top: 18px; font-size: 13px; color: #6F8880; display: flex; flex-wrap: wrap; gap: 6px 20px; }

/* 5.7 Липкая панель на мобильном */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--rule);
}
.sticky .btn { flex: 1; min-height: 50px; padding: 13px 14px; font-size: 15.5px; }

/* --------------------------------------------------------------- 6. Утилиты */

.hr { height: 1px; background: var(--rule); border: 0; margin: 0; }
.hide { display: none !important; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.anchor-pad { scroll-margin-top: 86px; }

/* --------------------------------------------------------------- 7. Адаптив */

@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; }
  .offer { position: static; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
  .nav { display: none; }
}

@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .grid-2, .grid-3, .split, .split--wide { grid-template-columns: 1fr; }
  .ftr__grid { grid-template-columns: 1fr; }
  .hdr .btn { display: none; }
  .sticky { display: flex; }
  body { padding-bottom: 78px; }
  .card, .prod, .quote { padding: 22px; }
  .step { grid-template-columns: 38px 1fr; gap: 14px; }
  .step::before { width: 32px; height: 32px; font-size: 14px; }
  .faq summary { font-size: 16.5px; padding-right: 36px; }
  .offer__price { font-size: 38px; }
}

@media (max-width: 420px) {
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
}

@media print {
  .hdr, .sticky, .quiz, .cta-final { display: none; }
  body { background: #fff; }
}