/* css/blocks/182-lead-block.css */
/* =================== lead-block.css =================== */
/* lead-block — final CTA "Нужна консультация по проекту?". Used on /about,
 * /contacts, /delivery as the closing conversion block. Premium two-column
 * card: editorial copy on the left, phone-input + manager CTA + Telegram
 * pill on the right. Ink-tinted card so it stands out from the cream page
 * background. Strictly .lead-block / .lead-block__*. */

.lead-block {
  padding: clamp(44px, 5vw, 72px) 0;
}

.lead-block__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 3vw, 48px);
  align-items: center;
  padding: clamp(36px, 3.6vw, 56px) clamp(28px, 3.2vw, 64px);
  background:
    radial-gradient(900px 540px at 0% 0%, rgba(var(--hc-gold-rgb), 0.18), transparent 58%),
    radial-gradient(700px 460px at 100% 100%, rgba(184, 154, 111, 0.12), transparent 62%),
    linear-gradient(160deg, #1f1a16 0%, #14110e 100%);
  border: 0.5px solid rgba(var(--hc-gold-rgb), 0.32);
  border-radius: clamp(20px, 1.8vw, 28px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.14),
    0 36px 80px -26px rgba(20, 14, 8, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  isolation: isolate;
  color: rgba(252, 248, 240, 0.92);
}
.lead-block__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(28px, 3.2vw, 64px);
  right: clamp(28px, 3.2vw, 64px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hc-gold-1, var(--hc-gold, var(--hc-gold))) 30%, var(--hc-gold-2, #b89a6f) 50%, var(--hc-gold-1, var(--hc-gold, var(--hc-gold))) 70%, transparent);
  opacity: 0.72;
  pointer-events: none;
}
.lead-block__card::after {
  content: "";
  position: absolute;
  bottom: -50%;
  right: -10%;
  width: 60%;
  height: 200%;
  background: radial-gradient(circle, rgba(var(--hc-gold-rgb), 0.10), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.lead-block__body {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.lead-block__eyebrow {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 18px;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hc-gold-1, var(--hc-gold, var(--hc-gold)));
  background: rgba(var(--hc-gold-rgb), 0.08);
  border: 0.5px solid rgba(var(--hc-gold-rgb), 0.28);
  border-radius: 999px;
}

.lead-block__title {
  margin: 0 0 16px;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--hc-paper);
}

.lead-block__desc {
  margin: 0;
  max-width: 48ch;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
  color: rgba(252, 248, 240, 0.68);
}

.lead-block__ctas {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.lead-block__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* `input.hc-input` in 101-hc-input.css carries a tag in the selector, so it
   outranks a plain class no matter which file lands later — the dark card
   kept the light .hc-input background while only `color` came from here.
   Match that weight to win back the component's own field. */
input.lead-block__phone {
  width: 100%;
  height: 56px;
  padding: 16px 20px;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--hc-paper);
  background: rgba(255, 252, 247, 0.06);
  border: 0.5px solid rgba(var(--hc-gold-rgb), 0.32);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
input.lead-block__phone::placeholder {
  /* was 0.36 — a hint that faint is unreadable on the dark card */
  color: rgba(252, 248, 240, 0.62);
}
input.lead-block__phone:focus {
  outline: none;
  border-color: var(--hc-gold-1, var(--hc-gold, var(--hc-gold)));
  background: rgba(255, 252, 247, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 3px rgba(var(--hc-gold-rgb), 0.22);
}

.lead-block__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  padding: 0 24px;
  font-family: var(--hc-sans, "Outfit", sans-serif);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #2a2018;
  background: linear-gradient(135deg, #e8c896 0%, #c9a878 100%);
  border: 0.5px solid rgba(var(--hc-gold-rgb), 0.55);
  border-radius: 14px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 12px 28px -10px rgba(var(--hc-gold-rgb), 0.45),
    0 1px 2px rgba(0, 0, 0, 0.14);
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.lead-block__btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #f0d4a8 0%, var(--hc-gold, var(--hc-gold)) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 18px 38px -10px rgba(var(--hc-gold-rgb), 0.60),
    0 2px 4px rgba(0, 0, 0, 0.18);
}

/* The consent line sits on the same dark card. Left to the browser default
   the box rendered as a bright system square with body-coloured text beside
   it — the one unstyled control in the block. */
.lead-block__consent {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(252, 248, 240, 0.72);
}
.lead-block__consent a {
  color: var(--hc-gold-1, var(--hc-gold));
  text-underline-offset: 3px;
}
.lead-block__check {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--hc-gold-1, var(--hc-gold));
}

@media (max-width: 920px) {
  .lead-block__card {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* css/blocks/023-delivery-faq.css */
/* =================== delivery-faq.css =================== */
/* delivery-faq — FAQ list on /delivery (and other pages reusing the layout).
   Owns: centering, surrounding card, numbering badge placed before each .faq
   summary. Strictly scoped to .delivery-faq* — does not touch .faq internals. */

.delivery-faq {
  counter-reset: deliveryFaq;
  max-width: 820px;
  margin: 0 auto;
  background: var(--hc-paper, #ffffff);
  border: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
  border-radius: var(--hc-r-lg, 16px);
  box-shadow: var(--hc-sh-3, 0 8px 28px rgba(26, 23, 20, 0.06));
  overflow: hidden;
}
.delivery-faq > .faq {
  counter-increment: deliveryFaq;
  position: relative;
  padding-left: 64px;
}
.delivery-faq > .faq::before {
  content: counter(deliveryFaq, decimal-leading-zero);
  position: absolute;
  left: 22px;
  top: 22px;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--hc-accent, var(--hc-accent));
}
.delivery-faq__link {
  color: var(--hc-accent-dark, var(--hc-accent-dark));
  font-weight: 500;
}

@media (max-width: 640px) {
  .delivery-faq > .faq        { padding-left: 52px; }
  .delivery-faq > .faq::before{ left: 16px; top: 18px; font-size: 11px; }
}

/* css/blocks/030-faq.css */
/* =================== faq.css =================== */
/* faq — single accordion item <details class="faq"><summary>…</summary>…</details>.
   Standalone object. Owns row, summary, body, hover/open states. Placement and
   numbering lives in the surrounding container (e.g. .delivery-faq), not here. */

.faq {
  margin: 0;
  background: var(--hc-paper, #ffffff);
  border-bottom: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
  overflow: hidden;
  transition: background var(--hc-dur-base) ease;
}
.faq:first-child { border-top-left-radius: var(--hc-r-lg); border-top-right-radius: var(--hc-r-lg); }
.faq:last-child  { border-bottom: 0; border-bottom-left-radius: var(--hc-r-lg); border-bottom-right-radius: var(--hc-r-lg); }

.faq summary {
  position: relative;
  display: block;
  padding: 18px 56px 18px 28px;
  list-style: none;
  cursor: pointer;
  font-family: var(--hc-serif, 'Playfair Display', Georgia, serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--hc-ink, #1a1714);
  transition: background var(--hc-dur-base) ease, padding-left var(--hc-dur-base) ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--hc-ink-mid, rgba(26, 23, 20, 0.45));
  border-bottom: 1.5px solid var(--hc-ink-mid, rgba(26, 23, 20, 0.45));
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--hc-dur-base) cubic-bezier(0.22, 1, 0.36, 1), border-color var(--hc-dur-base);
}
.faq[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
  border-color: var(--hc-accent, var(--hc-accent));
}
.faq summary:hover { background: rgba(var(--hc-gold-rgb), 0.06); }
.faq[open] summary { background: linear-gradient(90deg, rgba(var(--hc-gold-rgb), 0.10), transparent); }

.faq__body {
  padding: 0 28px 22px;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
  font-size: 15px;
  line-height: 1.7;
}
.faq__body a {
  color: var(--hc-accent-dark, var(--hc-accent-dark));
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--hc-dur-fast);
}
.faq__body a:hover { color: var(--hc-ink, #1a1714); }

@media (max-width: 640px) {
  .faq summary       { padding: 14px 48px 14px 22px; font-size: 15px; }
  .faq summary::after{ right: 18px; }
  .faq__body         { padding: 0 22px 18px; font-size: 14px; }
}

/* css/blocks/024-delivery-intents.css */
/* =================== delivery-intents.css =================== */
/* 3 формата заказа — премиум iconcard-плитки (иконка + hz-orb + magnetic),
   единый стиль с блоком «Как забрать заказ». Был плоский .hc-card с голыми div. */
.delivery-intents {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(14px, 1.5vw, 20px);
  margin: clamp(24px, 3.2vw, 40px) 0;
}

/* css/blocks/025-delivery-sec-title.css */
/* =================== delivery-sec-title.css =================== */
/* delivery-sec-title — variant of .t-title used on /delivery. Centers itself;
   doesn't touch sibling elements (eyebrow / body) — those keep their own styles. */

.delivery-sec-title {
  text-align: center;
  margin-bottom: 20px;
}
.delivery-sec-title + .delivery-faq,
.delivery-sec-title ~ .delivery-faq {
  margin-top: 32px;
}

/* css/blocks/026-delivery-stats.css */
/* =================== delivery-stats.css =================== */
/* delivery-stats — 3-up stat row on /delivery: ОТ 1 ДНЯ / 4 СПОСОБА / 0 ₽.
 * Each tile gets a premium animated SVG icon via ::before mask (per-nth)
 * and serif metric + mono label. */

.delivery-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  margin: 0 0 clamp(20px, 2.6vw, 32px);
}

.delivery-stats__item {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 14px;
  row-gap: 4px;
  align-items: center;
  padding: 20px 22px 20px 22px;
  background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(252, 248, 240, 0.92) 100%);
  border: 0.5px solid var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.42));
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(40, 30, 15, 0.03),
    0 14px 32px -22px rgba(40, 30, 15, 0.14);
  transition: transform 0.28s cubic-bezier(0.2, 0.84, 0.3, 1), border-color 0.22s, box-shadow 0.28s;
  isolation: isolate;
  overflow: hidden;
}
.delivery-stats__item::before {
  content: "";
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  background-color: var(--hc-accent-dark, #7a6548);
  border-radius: 12px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 22px 22px;
          mask-size: 22px 22px;
  transition: background-color 0.32s ease, transform 0.32s cubic-bezier(0.2, 0.84, 0.3, 1);
}
.delivery-stats__item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(360px 200px at 80% -10%, rgba(var(--hc-gold-rgb), 0.20), transparent 60%);
  opacity: 0;
  transition: opacity 0.32s ease;
}
.delivery-stats__item:hover {
  transform: translateY(-4px);
  border-color: var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.62));
  box-shadow: 0 2px 4px rgba(40, 30, 15, 0.04), 0 26px 50px -20px rgba(184, 154, 111, 0.32);
}
.delivery-stats__item:hover::before {
  background-color: #2a2018;
  transform: rotate(-6deg) scale(1.06);
}
.delivery-stats__item:hover::after { opacity: 1; }

/* Per-nth icon: 1=clock, 2=grid, 3=warehouse */
.delivery-stats__item:nth-child(1)::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");
}
.delivery-stats__item:nth-child(2)::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7' rx='1'/><rect x='14' y='3' width='7' height='7' rx='1'/><rect x='3' y='14' width='7' height='7' rx='1'/><rect x='14' y='14' width='7' height='7' rx='1'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7' rx='1'/><rect x='14' y='3' width='7' height='7' rx='1'/><rect x='3' y='14' width='7' height='7' rx='1'/><rect x='14' y='14' width='7' height='7' rx='1'/></svg>");
}
.delivery-stats__item:nth-child(3)::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z'/><path d='M9 22V12h6v10'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z'/><path d='M9 22V12h6v10'/></svg>");
}

.delivery-stats__v {
  margin: 0;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--hc-ink, #1a1714);
}
.delivery-stats__v small {
  font-family: var(--hc-serif);
  font-weight: 400;
  font-size: 14px;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.6));
  margin-left: 2px;
}
.delivery-stats__k {
  margin: 0;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hc-accent-dark, #7a6548);
  line-height: 1.3;
}

/* css/blocks/027-delivery-table.css */
/* =================== delivery-table.css =================== */
.delivery-table {width: 100%; min-width: 500px; border-collapse: collapse; font-size: 14px}
.delivery-table thead tr {border-bottom: 2px solid var(--hc-line-2)}
.delivery-table th {text-align: left; padding: 12px; font-family: var(--hc-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--hc-ink-mid)}
.delivery-table td {padding: 12px}
.delivery-table tbody tr {border-bottom: 1px solid var(--hc-line)}
.delivery-table tbody tr:last-child {border-bottom: 0}
.delivery-table tbody td:first-child {font-weight: 600}
.delivery-table thead th {text-align: left; padding: 14px 16px; font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hc-ink-mid, rgba(26, 23, 20, 0.6)); font-weight: 500; background: rgba(248, 244, 237, 0.4); border-bottom: 0.5px solid rgba(180, 151, 115, 0.18)}
.delivery-table tbody td {padding: 14px 16px; border-bottom: 0.5px solid rgba(180, 151, 115, 0.08); color: var(--hc-ink, #1a1714)}
.delivery-table tbody tr:last-child td {border-bottom: none}
.delivery-table tbody tr:hover {background: rgba(255, 252, 247, 0.5)}

.delivery-table th:last-child,
.delivery-table td:last-child {
  min-width: 200px;
}
@media (max-width: 760px)  {
  .delivery-table th:last-child,
  .delivery-table td:last-child {
    min-width: auto;
  }
}

/* ─── folded from delivery-table-wrap.css ─── */
.delivery-table-wrap {overflow-x: auto; overflow-y: hidden; max-width: 100%; border-radius: 14px; margin: 24px 0; border: 0.5px solid var(--hc-line-2, rgba(180, 151, 115, 0.18))}
@media(max-width:920px) {
  .delivery-table-wrap table, .hc-table {width: 100%; border-collapse: collapse; font-size: 14px}
}

@media (max-width: 600px) {
  .delivery-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }
  .delivery-table {
    display: block;
    min-width: 0;
    table-layout: auto;
  }
  .delivery-table thead { display: none; }
  .delivery-table tbody { display: grid; gap: 10px; }
  .delivery-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--hc-line-2, rgba(180, 151, 115, .18));
    border-radius: 14px;
    background: var(--hc-surface, #fff);
  }
  .delivery-table th,
  .delivery-table td,
  .delivery-table thead th,
  .delivery-table tbody td {
    display: block;
    min-width: 0;
    padding: 6px 0;
    border: 0;
    overflow-wrap: normal;
    word-break: normal;
  }
  .delivery-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font: 500 10px/1.2 var(--hc-mono, monospace);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hc-ink-mid, rgba(26, 23, 20, .6));
  }
}


/* ---- folded from 022-delivery-b2b.css ---- */
/* =================== delivery-b2b.css =================== */
.delivery-b2b p {font-size: 15px; color: var(--hc-ink-soft); line-height: 1.7; margin-bottom: 16px}

/* css/blocks/146-hc-russia-map.css */
/* =================== hc-russia-map.css =================== */
.hc-russia-map { position:relative; }
.hc-russia-map__city {
  cursor:pointer;
  transition:background 0.18s ease, transform 0.18s ease;
}
.hc-russia-map__city:hover {
  transform:translateY(-1px);
}
.hc-russia-map__svg [data-city] {
  cursor:pointer;
  transition:r 0.18s ease;
}
.hc-russia-map__svg [data-city]:hover {
  r:6;
}
.hc-russia-map__tooltip {
  position:absolute;
  background:var(--hc-ink, #1a1714);
  color:var(--hc-paper, #ffffff);
  padding:8px 14px;
  border-radius:10px;
  font:500 11px/1.4 'Inter',sans-serif;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,calc(-100% - 4px));
  transition:opacity 0.18s ease;
  white-space:nowrap;
  z-index:5;
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:140px;
}
.hc-russia-map__tooltip.is-visible { opacity:1; }
.hc-russia-map__tooltip::after {
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:var(--hc-ink, #1a1714);
}
.hc-russia-map__tooltip-city {
  font-weight:600;
  font-size:12px;
}
.hc-russia-map__tooltip-eta {
  color:#c8a96a;
  font:500 10px/1.2 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:0.04em;
}
.hc-russia-map__tooltip-carrier {
  color:rgba(255,255,255,0.65);
  font-size:10px;
}

/* css/blocks/187-page-hero.css */
/* =================== page-hero.css =================== */
.page-hero,
.cp-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 2.6vw, 32px) 0 clamp(16px, 2vw, 24px);
  margin-bottom: clamp(12px, 1.6vw, 20px);
  background: var(--hc-bg-warm, #f5efde);
}

.page-hero__bgfx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.page-hero__mesh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

.page-hero__orb {
  position: absolute;
  width: clamp(220px, 28vw, 360px);
  height: clamp(220px, 28vw, 360px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--hc-gold-rgb), 0.22) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  animation: hz-orb-float 9s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.page-hero__orb--a {
  top: -8%;
  right: -6%;
}

.page-hero__orb--b {
  bottom: -10%;
  left: -8%;
  animation-delay: -4.5s;
}

/* The panel was capped at 960px while every other block on the same page runs
   the full 1344px container, so each of these heroes stopped two thirds of the
   way across against a bare decorative swoosh — and the cap landed at a
   different place per page depending on padding (1007px on contacts, 1025px on
   delivery, 1083px on about). The reading measure belongs on the text, which
   already carries it: .page-hero__title and .page-hero__lede. */
.page-hero__surface,
.cp-hero__body {
  position: relative;
  z-index: 2;
  max-width: 100%;
  padding: clamp(20px, 2.4vw, 32px);
  background: rgba(255, 252, 247, 0.7);
  border: 0.5px solid rgba(180, 151, 115, 0.18);
  border-radius: 18px;
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px rgba(27, 20, 13, 0.04), 0 12px 40px rgba(27, 20, 13, 0.06);
}

.page-hero__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--hc-accent-dark, #7a6548);
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-hero__title {
  margin: 0 0 12px;
  color: var(--hc-ink, #1a1714);
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 400;
  letter-spacing: var(--hc-ls-tight);
  line-height: 1.05;
}

.page-hero__lede {
  margin: 0 0 16px;
  max-width: 60ch;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.7));
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.5;
}

.page-hero__quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.page-hero__quicklink {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  padding: 6px 14px;
  /* Half-transparent white on the cream hero, with the text at 45% ink: the
     four links under every content hero read as disabled chips. They are the
     page's only navigation aid up there. */
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.78));
  text-decoration: none;
  background: rgba(255, 255, 255, 0.9);
  border: 0.5px solid rgba(180, 151, 115, 0.32);
  border-radius: 999px;
  font-size: 13px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.page-hero__quicklink::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(circle at center, var(--hc-glow-color), transparent 60%);
  transition: opacity 0.3s ease;
}

.page-hero__quicklink:hover {
  transform: translateY(-1px);
  color: var(--hc-ink, #1a1714);
  background: var(--hc-paper, #ffffff);
  border-color: rgba(185, 154, 111, 0.42);
}

.page-hero__quicklink:hover::before {
  opacity: 1;
}

.page-hero:empty,
.page-hero > .hc-wrap:empty {
  display: none;
}

.page-blog-detail .page-hero__pill-bar {
  display: none;
}

.page-delivery .page-hero,
.page-static .page-hero {
  padding: clamp(26px, 3.4vw, 40px) 0 clamp(20px, 2.8vw, 32px);
  margin-bottom: clamp(14px, 1.8vw, 24px);
}

/* Delivery and static pages used to cap the panel at 980px while every other
   page capped it at 960 — the hero looked like a different width on each
   section. Only the padding differs now. */
.page-delivery .page-hero__surface,
.page-static .page-hero__surface {
  padding: clamp(18px, 2.1vw, 28px);
}

@media (max-width: 920px) {
  .page-hero,
  .cp-hero {
    padding: clamp(16px, 4vw, 24px) 0;
    border-radius: 20px;
  }

  .page-hero__surface,
  .cp-hero__body {
    border-radius: 14px;
    padding: clamp(16px, 4vw, 22px);
  }
}

/* css/blocks/121-hc-landings.css */
/* ════════════════════════════════════════════════════════════════
   Landing pages (brand / series / collection / promo / set / services)
   — premium layout for the entity-* / brand-adv-* / set-* / services-*
   component families.

   These templates (app/templates/landing/*.html) shipped with NO
   stylesheet for their custom classes, so the intro/advantage/items
   sections rendered as raw unstyled text. This file is the single
   source of truth for them. Built on project design tokens.
   ════════════════════════════════════════════════════════════════ */

/* ── Entity hero (brand/series/collection/promo intro card) ─────── */
.entity-hero {
  padding: var(--hc-sp-6, 32px);
  margin-bottom: var(--hc-sp-6, 32px);
  border: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
  border-radius: 20px;
  background: var(--hc-bg-2, #f7f3ec);
}

.entity-hero__eyebrow {
  display: inline-block;
  font: 500 var(--hc-fs-xs, 12px) / 1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
  margin-bottom: var(--hc-sp-3, 12px);
}

.entity-hero__title {
  font-family: var(--hc-serif);
  font-weight: 500;
  font-size: var(--hc-fs-3xl, 28px);
  line-height: var(--hc-lh-snug, 1.25);
  color: var(--hc-ink, #1a1714);
  margin-bottom: var(--hc-sp-3, 12px);
}

.entity-hero__desc {
  max-width: 72ch;
  font-size: var(--hc-fs-lg, 16px);
  line-height: var(--hc-lh-loose, 1.7);
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
  margin-bottom: var(--hc-sp-5, 24px);
}

.entity-hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--hc-sp-4, 16px);
}

.entity-hero__card {
  display: grid;
  gap: var(--hc-sp-1, 4px);
  padding: var(--hc-sp-4, 16px);
  border-radius: 14px;
  background: var(--hc-bg, #fff);
  border: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
}

.entity-hero__card b { color: var(--hc-ink, #1a1714); font-size: var(--hc-fs-lg, 16px); }
.entity-hero__card span { font-size: var(--hc-fs-md, 14px); color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55)); line-height: var(--hc-lh-snug, 1.25); }

/* ── Section head (e.g. "Все товары Egger · N позиций") ─────────── */
.entity-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--hc-sp-4, 16px);
  flex-wrap: wrap;
  margin: var(--hc-sp-7, 48px) 0 var(--hc-sp-5, 24px);
  padding-bottom: var(--hc-sp-3, 12px);
  border-bottom: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
}

.entity-head__title {
  font-family: var(--hc-serif);
  font-weight: 500;
  font-size: var(--hc-fs-2xl, 22px);
  color: var(--hc-ink, #1a1714);
}

.entity-head__meta {
  font: 500 var(--hc-fs-sm, 13px) / 1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}

.entity-actions { display: flex; gap: var(--hc-sp-2, 8px); flex-wrap: wrap; }

.entity-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--hc-sp-1, 4px);
  padding: 10px var(--hc-sp-4, 16px);
  border-radius: 999px;
  border: 1px solid var(--hc-line, rgba(26, 23, 20, 0.14));
  font: 500 var(--hc-fs-md, 14px) / 1 var(--hc-sans);
  color: var(--hc-ink, #1a1714);
  text-decoration: none;
  transition: border-color var(--hc-dur-fast, 0.15s) var(--hc-ease, ease);
}

.entity-btn:hover { border-color: var(--hc-accent, var(--hc-accent)); }

.entity-btn--accent {
  background: var(--hc-ink, #1a1714);
  color: #fff;
  border-color: var(--hc-ink, #1a1714);
}

/* ── Brand advantages grid (4 feature cards) ────────────────────── */
.brand-adv__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--hc-sp-4, 16px);
  margin: var(--hc-sp-5, 24px) 0 var(--hc-sp-7, 48px);
}

.brand-adv__item {
  padding: var(--hc-sp-5, 24px);
  border: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
  border-radius: 16px;
  background: var(--hc-bg, #fff);
}

.brand-adv__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  margin-bottom: var(--hc-sp-3, 12px);
  background: var(--hc-gold-soft, rgba(var(--hc-gold-rgb), 0.15));
  color: var(--hc-accent-dark, var(--hc-accent-dark));
}

.brand-adv__title {
  font-family: var(--hc-serif);
  font-weight: 500;
  font-size: var(--hc-fs-xl, 18px);
  color: var(--hc-ink, #1a1714);
  margin-bottom: var(--hc-sp-2, 8px);
}

.brand-adv__text {
  font-size: var(--hc-fs-md, 14px);
  line-height: var(--hc-lh-base, 1.5);
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
  margin: 0;
}

/* ── Brand index (/brands) ───────────────────────────────────────── */
.brand-index__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--hc-sp-3, 12px);
}

.brand-index__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hc-sp-4, 16px);
  min-height: 64px;
  padding: 16px 18px;
  border: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
  border-radius: 8px;
  background: var(--hc-bg, #fff);
  color: var(--hc-ink, #1a1714);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.brand-index__item:hover {
  transform: translateY(-2px);
  border-color: var(--hc-accent, #b99868);
  box-shadow: 0 14px 34px rgba(31, 24, 16, .08);
}

.brand-index__name {
  font-weight: 750;
}

.brand-index__count {
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
  font-size: var(--hc-fs-sm, 13px);
  white-space: nowrap;
}

/* ── Legacy archive compatibility pages ───────────────────────────────── */
.legacy-archive__panel {
  display: grid;
  gap: var(--hc-sp-4, 16px);
  max-width: 920px;
  padding: clamp(18px, 3vw, 32px);
  border: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
  border-radius: 8px;
  background: var(--hc-bg, #fff);
}

.legacy-archive__meta {
  display: grid;
  gap: 8px;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
}

.legacy-archive__meta code {
  display: block;
  width: 100%;
  overflow-wrap: anywhere;
  padding: 12px 14px;
  border: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
  border-radius: 8px;
  background: var(--hc-bg-muted, #f6f2eb);
  color: var(--hc-ink, #1a1714);
}

.legacy-archive__search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--hc-sp-3, 12px);
}

.legacy-archive__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hc-sp-3, 12px);
}

@media (max-width: 680px) {
  .legacy-archive__search { grid-template-columns: 1fr; }
}

/* ── Product set hero (/sets) ───────────────────────────────────── */
.set-hero { display: grid; gap: var(--hc-sp-3, 12px); }
.set-hero__body { font-size: var(--hc-fs-lg, 16px); color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7)); line-height: var(--hc-lh-base, 1.5); }
.set-hero__price { font-family: var(--hc-serif); font-size: var(--hc-fs-3xl, 28px); color: var(--hc-ink, #1a1714); }
.set-hero__was { font-size: var(--hc-fs-lg, 16px); color: var(--hc-ink-muted, rgba(26, 23, 20, 0.4)); text-decoration: line-through; margin-left: var(--hc-sp-2, 8px); }
.set-hero__discount { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--hc-accent, var(--hc-accent)); color: #fff; font-size: var(--hc-fs-sm, 13px); margin-left: var(--hc-sp-2, 8px); }
.set-hero__total { font-size: var(--hc-fs-lg, 16px); color: var(--hc-ink, #1a1714); }
.set-hero__cover { width: 100%; height: auto; border-radius: 16px; }

.set-items-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--hc-sp-3, 12px);
  margin-top: var(--hc-sp-5, 24px);
}

.set-item-card {
  display: grid;
  gap: var(--hc-sp-2, 8px);
  padding: var(--hc-sp-3, 12px);
  border: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
  border-radius: 14px;
  background: var(--hc-bg, #fff);
}

.set-item-card__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--hc-bg-warm, var(--hc-bg-warm)); }
.set-item-card__title { font-size: var(--hc-fs-md, 14px); line-height: var(--hc-lh-snug, 1.25); color: var(--hc-ink, #1a1714); }
.set-item-card__price { font-weight: 600; color: var(--hc-ink, #1a1714); }

@media (max-width: 900px) { .set-items-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .set-items-grid { grid-template-columns: 1fr; } }

/* NOTE: services landing (.services-hero__*, .services-grid, .service-card,
   .service-detail__*) is fully styled by its own canonical module
   248-services-crosslinks.css. Do NOT redefine those here — earlier
   duplicate rules in this file overrode the 2-column media+text layout
   and made the service cards collide. Left to 248 intentionally. */

/* ── Promo countdown timer ──────────────────────────────────────── */
.promo-timer { display: flex; gap: var(--hc-sp-3, 12px); margin: var(--hc-sp-4, 16px) 0; }
.promo-timer__cell { display: grid; gap: 2px; justify-items: center; min-width: 56px; padding: var(--hc-sp-3, 12px); border-radius: 12px; background: var(--hc-ink, #1a1714); color: #fff; }
.promo-timer__v { font-family: var(--hc-serif); font-size: var(--hc-fs-2xl, 22px); line-height: 1; }
.promo-timer__k { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }

/* ── Trust strip ────────────────────────────────────────────────── */
.pdp-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hc-sp-2, 8px) var(--hc-sp-5, 24px);
  padding: var(--hc-sp-4, 16px) 0;
}

.pdp-trust-strip--compact { padding: var(--hc-sp-2, 8px) 0; }

.pdp-trust-strip__item {
  display: inline-flex;
  align-items: center;
  gap: var(--hc-sp-2, 8px);
  font-size: var(--hc-fs-md, 14px);
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
}

/* css/blocks/178-iconcard.css */
/* =================== iconcard.css (consolidated v2) =================== */
.iconcard {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: 14px;
  row-gap: 4px;
  padding: 22px 20px 20px;
  background: linear-gradient(180deg, var(--hc-paper, #ffffff), #fbf7ec);
  border: 1px solid rgba(141, 109, 71, 0.18);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(27, 20, 13, 0.04), 0 8px 24px rgba(27, 20, 13, 0.04);
  overflow: hidden;
  isolation: isolate;
  min-height: 100px;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.iconcard__icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(var(--hc-gold-rgb), 0.18);
  border-radius: 12px;
  color: var(--hc-accent-dark, var(--hc-accent-dark));
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.iconcard__title {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 1;
  display: block;
  font: 500 16px/1.2 var(--hc-serif, "Playfair Display", Georgia, serif);
  color: var(--hc-ink, #1a1714);
  margin: 0 0 4px;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}
.iconcard__text {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.65));
}
.page-delivery .iconcard {
  height: 100%; min-height: 136px; grid-template-columns: 44px minmax(0, 1fr); display: grid; gap: 14px; width: 100%; min-width: 0;
}
.iconcard::before {
  content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 88% 0%, rgba(var(--hc-gold-rgb), 0.18), transparent 45%); opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
}
.iconcard:hover {
  transform: translateY(-2px); border-color: rgba(141, 109, 71, 0.4); box-shadow: 0 18px 40px -28px rgba(27, 20, 13, 0.32);
}
.iconcard:hover::before { opacity: 1; }
.iconcard__icon::before {
  content: ""; position: absolute; inset: 2px; border-radius: 10px; border: 1px dashed rgba(var(--hc-gold-rgb), 0.55); opacity: 0.6; animation: hzCardIconRing 14s linear infinite; pointer-events: none;
}
.iconcard:hover .iconcard__icon::before { animation-duration: 7s; opacity: 1; border-color: rgba(var(--hc-gold-rgb), 0.85); }
.iconcard__icon svg { position: relative; z-index: 2; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.iconcard:hover .iconcard__icon svg { transform: scale(1.08) rotate(-3deg); }
@media(max-width:920px) {
  .iconcard > .iconcard__icon {grid-column: 1; grid-row: 1 / span 2; align-self: start}
  .iconcard > .iconcard__title {grid-column: 2; grid-row: 1; min-width: 0}
  .iconcard > .iconcard__text {grid-column: 2; grid-row: 2; min-width: 0}
  .iconcard {display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; min-width: 0}
  .iconcard > .iconcard__icon {grid-column: 1; grid-row: 1 / span 2; align-self: start; width: 44px; height: 44px; flex-shrink: 0}
  .iconcard > .iconcard__title {grid-column: 2; grid-row: 1; min-width: 0; word-break: normal; overflow-wrap: anywhere}
  .iconcard > .iconcard__text {grid-column: 2; grid-row: 2; min-width: 0; word-break: normal; overflow-wrap: anywhere; white-space: normal}
  .iconcard > *:nth-child(n+4) {grid-column: 2; grid-row: 3; min-width: 0}
}
[class*="shipping"] .iconcard:nth-child(3) .iconcard__icon, .delivery-methods .iconcard:nth-child(3) .iconcard__icon, .iconcard.iconcard--cdek .iconcard__icon {
  background: linear-gradient(135deg, #00b259, #008f43); color: var(--hc-paper, #ffffff); position: relative;
}
[class*="shipping"] .iconcard:nth-child(3) .iconcard__icon::after, .delivery-methods .iconcard:nth-child(3) .iconcard__icon::after {
  content: "СДЭК"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 600 10px/1 var(--hc-sans, "Outfit", sans-serif); letter-spacing: 0.06em; color: var(--hc-paper, #ffffff); background: linear-gradient(135deg, #00b259, #008f43); border-radius: inherit;
}
[class*="shipping"] .iconcard:nth-child(4) .iconcard__icon, .delivery-methods .iconcard:nth-child(4) .iconcard__icon, .iconcard.iconcard--dl .iconcard__icon {
  background: linear-gradient(135deg, #d52020, #a91414); color: var(--hc-paper, #ffffff);
}
[class*="shipping"] .iconcard:nth-child(4) .iconcard__icon::after, .delivery-methods .iconcard:nth-child(4) .iconcard__icon::after {
  content: "ДЛ"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 13px/1 var(--hc-sans, "Outfit", sans-serif); letter-spacing: 0.04em; color: var(--hc-paper, #ffffff); background: linear-gradient(135deg, #d52020, #a91414); border-radius: inherit;
}
.page-delivery .iconcard__text { line-height: 1.55; word-break: normal; overflow-wrap: anywhere; hyphens: none; white-space: normal; }
.page-delivery .iconcard > * { min-width: 0; }


/* служебные премиум-страницы (vacancy/partners/projects): сетка iconcard-плиток */
.svc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(14px,1.6vw,20px); }

/* Project cards contain editorial images instead of compact service icons. */
.iconcard--project {
  grid-template-columns: 112px minmax(0, 1fr);
  min-height: 136px;
}
.iconcard--project .iconcard__media {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 112px;
  height: 92px;
  border-radius: 10px;
  overflow: hidden;
  background: #f2efe9;
}
.iconcard--project .iconcard__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.iconcard--project .iconcard__title { grid-column: 2; }
.iconcard--project .iconcard__text { grid-column: 2; }
@media(max-width:560px) {
  .iconcard--project {
    grid-template-columns: 84px minmax(0, 1fr);
    padding: 16px;
  }
  .iconcard--project .iconcard__media {
    width: 84px;
    height: 76px;
  }
}
.iconcard--project-no-media { grid-template-columns: minmax(0, 1fr); }
.iconcard--project-no-media .iconcard__title,
.iconcard--project-no-media .iconcard__text { grid-column: 1; }

/* css/blocks/208-premium-kpis.css */
/* =================== premium-kpis.css =================== */
/* premium-kpis — stat-row block: serif metric + uppercase mono label.
 * Used on /about ("Почему выбирают нас"), /delivery ("Доставим по России")
 * and other content cards. Adapts to ink context (premium-surface--highlight)
 * with cream metric + gold label so values stay visible on dark cards.
 * Strictly .premium-kpis / .premium-kpis__*. */

/* Flex sized each stat by its own content, so a long label ("рейтинг
   Яндекс.Карт · 111 отзывов") pushed the stat after it far to the right and
   the row read as three values scattered rather than three columns. Equal
   columns line the numbers up and let the long label wrap under its own. */
.premium-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin: 18px 0;
  padding: 18px 0;
  border-top: 0.5px solid rgba(180, 151, 115, 0.18);
  border-bottom: 0.5px solid rgba(180, 151, 115, 0.18);
}
.premium-kpis > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  position: relative;
  padding-bottom: 4px;
}
.premium-kpis strong {
  display: block;
  margin: 0;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--hc-ink, #1a1714);
  font-variant-numeric: tabular-nums;
}
.premium-kpis span {
  display: block;
  margin-top: 2px;
  padding-top: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
  position: relative;
}
.premium-kpis span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--hc-gold-1, var(--hc-gold, var(--hc-gold))), var(--hc-gold-2, #b89a6f));
  border-radius: 999px;
}

/* Adaptation when KPIs live inside an ink-tinted card (premium-surface--highlight) */
.premium-surface--highlight .premium-kpis {
  border-top-color: rgba(var(--hc-gold-rgb), 0.22);
  border-bottom-color: rgba(var(--hc-gold-rgb), 0.22);
}
.premium-surface--highlight .premium-kpis strong {
  color: var(--hc-paper);
}
.premium-surface--highlight .premium-kpis span {
  color: rgba(252, 248, 240, 0.62);
}

/* css/blocks/190-panel.css */
/* =================== panel.css =================== */
.panel {padding: clamp(20px, 2.4vw, 28px); background: linear-gradient(180deg, rgba(255, 252, 247, 1), rgba(248, 244, 237, 0.6)); border: 0.5px solid rgba(180, 151, 115, 0.18); border-radius: 14px; margin-bottom: clamp(16px, 2vw, 24px)}

/* css/blocks/179-intent-chip.css */
/* =================== intent-chip.css =================== */
/* Quick-intent tiles (about / contacts "Почему выбирают нас" + каналы). */

.intent-chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: var(--hc-paper, #ffffff);
  border: 0.5px solid var(--hc-line-2, rgba(180, 151, 115, 0.18));
  border-radius: 14px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.intent-chip b,
.intent-chip > strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 400;
  font-size: 15px;
  color: var(--hc-ink, #1a1714);
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
}

.intent-chip span {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.6));
}

/* Hover for all pointers — was trapped in @media(max-width:920px), so desktop
   had no hover feedback at all. */
.intent-chip:hover {
  transform: translateY(-2px);
  border-color: var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.42));
  box-shadow: 0 10px 26px -14px rgba(var(--hc-accent-rgb), 0.2);
}

/* On the dark "Почему выбирают нас" card (premium-surface--highlight) stark
   white tiles clash — switch to a translucent gold-tinted card with light text. */
.premium-surface--highlight .intent-chip {
  background: rgba(255, 252, 247, 0.05);
  border-color: rgba(var(--hc-gold-rgb), 0.22);
}
.premium-surface--highlight .intent-chip b,
.premium-surface--highlight .intent-chip > strong {
  color: var(--hc-paper);
}
.premium-surface--highlight .intent-chip span {
  color: rgba(252, 248, 240, 0.72);
}
.premium-surface--highlight .intent-chip:hover {
  background: rgba(var(--hc-gold-rgb), 0.1);
  border-color: rgba(var(--hc-gold-rgb), 0.5);
}