/* ============================================================
   Landing Modern — Aboard-style design system, Smart Point brand
   Изолированный CSS для /landing-modern. Не делится переменными
   с глобальным проектом — все токены префиксованы --lm-.
   ============================================================ */

:root {
  /* Surfaces */
  --lm-bg: #0a1410;          /* deep forest, чуть теплее чёрного */
  --lm-bg-elev: #101a16;     /* приподнятые секции */
  --lm-surface-warm: #f6ead2; /* parchment (sp-bg в тёплом исполнении) */
  --lm-surface-warm-2: #efe1c4;

  /* Brand */
  --lm-accent: #f07f03;      /* sp-orange — наш CTA */
  --lm-accent-soft: #f7b07a; /* peach fuzz для бордюров/тонкой графики */
  --lm-accent-strong: #d66f03;
  --lm-brand-green: #14908a; /* sp-primary — фирменный бирюзово-зелёный */
  --lm-brand-green-strong: #0f7872;

  /* Text */
  --lm-text: #fffefb;        /* основной светлый */
  --lm-text-mute: #c9c2b6;   /* приглушённый светлый */
  --lm-text-dim: #8d8576;
  --lm-text-dark: #1c1208;   /* на parchment */
  --lm-text-dark-soft: #4a3922;

  /* Borders */
  --lm-border: rgba(255, 254, 251, 0.08);
  --lm-border-strong: rgba(255, 254, 251, 0.18);
  --lm-border-warm: rgba(28, 18, 8, 0.08);

  /* Fonts — только бренд-шрифты проекта */
  --lm-font-display: "Neutral Face", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lm-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* «Mono»-ролик играет Manrope Medium с uppercase + letter-spacing — */
  /* у нас нет моноширинного бренд-шрифта, но визуально работает как лейбл. */
  --lm-font-label: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Type scale */
  --lm-text-caption: 11px;
  --lm-text-body: 16px;
  --lm-text-lead: 19px;
  --lm-text-h3: 24px;
  --lm-text-h2: 40px;
  --lm-text-h1: 72px;

  /* Spacing */
  --lm-s-1: 8px;
  --lm-s-2: 16px;
  --lm-s-3: 24px;
  --lm-s-4: 32px;
  --lm-s-5: 48px;
  --lm-s-6: 64px;
  --lm-s-7: 96px;
  --lm-s-8: 128px;

  /* Radii */
  --lm-r-card: 10px;
  --lm-r-img: 12px;
  --lm-r-nav: 30px;
  --lm-r-pill: 9999px;

  /* Container */
  --lm-container: 1200px;

  /* Misc */
  --lm-shadow-card: 0 1px 0 rgba(255, 254, 251, 0.04) inset, 0 12px 32px rgba(0, 0, 0, 0.32);
  --lm-shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.16);
  --lm-transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset / base ---------- */
.lm-page,
.lm-page * {
  box-sizing: border-box;
}

.lm-page {
  margin: 0;
  padding: 0;
  font-family: var(--lm-font-body);
  font-size: var(--lm-text-body);
  line-height: 1.65;
  color: var(--lm-text);
  background: var(--lm-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.lm-page a {
  color: inherit;
  text-decoration: none;
  transition: color var(--lm-transition);
}

.lm-page img {
  display: block;
  max-width: 100%;
  height: auto;
}

.lm-page h1,
.lm-page h2,
.lm-page h3,
.lm-page h4 {
  margin: 0;
  font-family: var(--lm-font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

/* Акцентное слово в заголовке — наш фирменный оранжевый */
.lm-accent-word {
  color: var(--lm-accent);
}
.lm-accent-word--dark {
  color: var(--lm-accent-strong);
}

.lm-page p {
  margin: 0;
}

.lm-page ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lm-container {
  max-width: var(--lm-container);
  margin-inline: auto;
  padding-inline: var(--lm-s-3);
}

/* ---------- Utility text styles ---------- */
.lm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--lm-s-1);
  font-family: var(--lm-font-label);
  font-size: var(--lm-text-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--lm-accent);
}

.lm-eyebrow::before {
  content: "";
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.lm-eyebrow--dark {
  color: var(--lm-accent-strong);
}

.lm-display {
  font-family: var(--lm-font-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, var(--lm-text-h1));
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.lm-h2 {
  font-family: var(--lm-font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, var(--lm-text-h2));
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.lm-h3 {
  font-family: var(--lm-font-display);
  font-weight: 400;
  font-size: var(--lm-text-h3);
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.lm-lead {
  font-size: var(--lm-text-lead);
  line-height: 1.7;
  color: var(--lm-text-mute);
  max-width: 60ch;
}

/* ---------- Buttons ---------- */
.lm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lm-s-1);
  height: 44px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--lm-r-pill);
  font-family: var(--lm-font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background var(--lm-transition), color var(--lm-transition), border-color var(--lm-transition), transform var(--lm-transition);
  white-space: nowrap;
}

.lm-btn--primary {
  background: var(--lm-accent);
  color: var(--lm-text);
}
.lm-btn--primary:hover {
  background: var(--lm-accent-strong);
  transform: translateY(-1px);
}

.lm-btn:disabled,
.lm-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.lm-btn--ghost {
  background: transparent;
  color: var(--lm-text);
  border-color: var(--lm-border-strong);
}
.lm-btn--ghost:hover {
  border-color: var(--lm-accent-soft);
  color: var(--lm-text);
}

.lm-btn--dark {
  background: var(--lm-brand-green);
  color: var(--lm-text);
}
.lm-btn--dark:hover {
  background: var(--lm-brand-green-strong);
  transform: translateY(-1px);
}

.lm-btn__arrow {
  margin-left: 4px;
  transition: transform var(--lm-transition);
}
.lm-btn:hover .lm-btn__arrow {
  transform: translateX(3px);
}

/* ---------- Navigation ---------- */
.lm-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: var(--lm-s-2) 0;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(10, 20, 16, 0.6);
  border-bottom: 1px solid var(--lm-border);
}

.lm-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lm-s-3);
  max-width: var(--lm-container);
  margin-inline: auto;
  padding: 6px var(--lm-s-3);
  border-radius: var(--lm-r-nav);
}

.lm-nav__logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.lm-nav__logo img {
  height: 32px;
  width: auto;
  display: block;
}

.lm-nav__menu {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lm-nav__link {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--lm-text-mute);
  border-radius: var(--lm-r-pill);
  transition: color var(--lm-transition), background var(--lm-transition);
}
.lm-nav__link:hover {
  color: var(--lm-text);
  background: rgba(255, 254, 251, 0.04);
}

.lm-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--lm-s-1);
}

.lm-nav__menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  background: transparent;
  color: var(--lm-text);
  border: 1px solid var(--lm-border-strong);
  border-radius: var(--lm-r-pill);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* ---------- Section primitives ---------- */
.lm-section {
  padding-block: var(--lm-s-7);
}

.lm-section--compact {
  padding-block: var(--lm-s-6);
}

.lm-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--lm-s-2);
  max-width: 720px;
  margin-bottom: var(--lm-s-5);
}

.lm-section__head--center {
  text-align: center;
  align-items: center;
  margin-inline: auto;
}

.lm-section-note {
  display: block;
  font-family: var(--lm-font-body);
  font-size: 12px;
  color: var(--lm-text-dim);
  letter-spacing: 0.02em;
  margin-top: 4px;
  opacity: 0.85;
}
.lm-section--warm .lm-section-note {
  color: var(--lm-text-dark-soft);
}

.lm-section--warm {
  background: var(--lm-surface-warm);
  color: var(--lm-text-dark);
}
.lm-section--warm .lm-h2,
.lm-section--warm .lm-h3,
.lm-section--warm .lm-display {
  color: var(--lm-text-dark);
}
.lm-section--warm .lm-lead {
  color: var(--lm-text-dark-soft);
}

/* ---------- Hero ---------- */
.lm-hero {
  position: relative;
  padding-block: clamp(32px, 4.5vw, 64px) clamp(56px, 6vw, 88px);
  overflow: hidden;
}

.lm-hero__inner {
  display: grid;
  grid-template-columns: 0.75fr 1.6fr;
  gap: clamp(28px, 4.5vw, 72px);
  align-items: center;
  /* На широких экранах разрешаем правому борту панели заходить в боковой gutter
     контейнера — так визуал ощущается крупнее без слома сетки слева. */
  margin-right: clamp(-48px, -2.5vw, 0px);
}

.lm-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--lm-s-3);
}

.lm-hero__title {
  font-family: var(--lm-font-display);
  font-weight: 400;
  font-size: clamp(40px, 6.5vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin-top: calc(-1 * var(--lm-s-2));
}

.lm-hero__lead {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.7;
  color: var(--lm-text-mute);
  max-width: 56ch;
}

.lm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lm-s-2);
  margin-top: 4px;
}

.lm-hero__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lm-s-5);
  padding-top: var(--lm-s-3);
  margin-top: var(--lm-s-2);
  border-top: 1px solid var(--lm-border);
}

.lm-hero__metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lm-hero__metric-value {
  font-family: var(--lm-font-display);
  font-size: 36px;
  line-height: 1;
  color: var(--lm-text);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.lm-hero__metric-label {
  font-family: var(--lm-font-label);
  font-size: var(--lm-text-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--lm-text-dim);
}

/* Hero visual */
.lm-hero__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--lm-r-img);
  overflow: hidden;
  border: 1px solid var(--lm-border-strong);
  box-shadow: var(--lm-shadow-card);
}
.lm-hero__visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.78) brightness(0.78);
}
.lm-hero__visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 20, 16, 0.05) 0%, rgba(10, 20, 16, 0.55) 60%, rgba(10, 20, 16, 0.9) 100%);
}

/* Вариант для скриншота интерфейса: горизонтальный формат, скрин сверху
   на всю ячейку, подпись отдельной нижней строкой (без absolute). */
.lm-hero__visual--ui {
  aspect-ratio: 16 / 10;
  background: linear-gradient(180deg, #0f1822 0%, #0a121b 100%);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 0;
}
.lm-hero__visual--ui .lm-hero__visual-img {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center top;
  filter: none;
  border-radius: 0;
}
.lm-hero__visual-tag {
  position: absolute;
  top: var(--lm-s-3);
  left: var(--lm-s-3);
  display: inline-flex;
  align-items: center;
  gap: var(--lm-s-1);
  padding: 6px 12px;
  font-family: var(--lm-font-label);
  font-size: var(--lm-text-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--lm-text);
  background: rgba(10, 20, 16, 0.55);
  border: 1px solid var(--lm-border-strong);
  border-radius: var(--lm-r-pill);
  backdrop-filter: blur(8px);
}
.lm-hero__visual-tag::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--lm-accent);
  box-shadow: 0 0 0 4px rgba(240, 127, 3, 0.18);
}
.lm-hero__visual-caption {
  position: absolute;
  left: var(--lm-s-3);
  right: var(--lm-s-3);
  bottom: var(--lm-s-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--lm-text);
}
.lm-hero__visual-caption strong {
  font-family: var(--lm-font-display);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.005em;
}
.lm-hero__visual-caption span {
  font-size: 14px;
  color: var(--lm-text-mute);
}

/* В UI-варианте caption — обычный блок в нижней строке грида, без absolute. */
.lm-hero__visual--ui .lm-hero__visual-caption {
  position: relative;
  inset: auto;
  left: auto;
  right: auto;
  bottom: auto;
  padding: 22px 32px 26px;
  background: var(--lm-bg-elev);
  border-top: 1px solid var(--lm-border);
  gap: 8px;
}
.lm-hero__visual--ui .lm-hero__visual-caption strong {
  font-size: 30px;
  letter-spacing: -0.012em;
}
.lm-hero__visual--ui .lm-hero__visual-caption span {
  font-size: 16px;
}

/* ---------- Brand strip (running marquee-style logos) ---------- */
.lm-brands {
  padding: var(--lm-s-5) 0;
  border-block: 1px solid var(--lm-border);
}

.lm-brands__label {
  text-align: center;
  font-family: var(--lm-font-label);
  font-size: var(--lm-text-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--lm-text-dim);
  margin-bottom: var(--lm-s-3);
}

/* Бегущая лента партнёров: дублируем содержимое и сдвигаем track
   на 50% — получаем бесшовный цикл. Ширина ограничена контейнером,
   широкие градиентные «стенки» по бокам прячут стыки дубликатов. */
.lm-brands__marquee {
  position: relative;
  width: 100%;
  max-width: var(--lm-container);
  margin-inline: auto;
  padding-inline: var(--lm-s-3);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 180px, #000 calc(100% - 180px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 180px, #000 calc(100% - 180px), transparent 100%);
}

.lm-brands__track {
  display: flex;
  align-items: center;
  gap: clamp(32px, 4vw, 56px);
  width: max-content;
  animation: lm-marquee 42s linear infinite;
  will-change: transform;
}
.lm-brands__marquee:hover .lm-brands__track {
  animation-play-state: paused;
}

.lm-brands__group {
  display: flex;
  align-items: center;
  gap: clamp(32px, 4vw, 56px);
  flex-shrink: 0;
}

.lm-brands__item {
  width: 140px;
  height: 96px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
  opacity: 0.6;
  transition: opacity var(--lm-transition);
}
.lm-brands__item:hover {
  opacity: 1;
}
.lm-brands__item img {
  max-height: 40px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

/* Пропорции — повторяют сетку партнёров ниже.
   Реальный max-height (без transform: scale, который обрезался бы). */
.lm-brands__item--lun img     { max-height: 92px; }
.lm-brands__item--kupicn img  { max-height: 64px; }
.lm-brands__item--ave img     { max-height: 58px; }
.lm-brands__item--topex img   { max-height: 70px; }
.lm-brands__item--ades img    { max-height: 48px; }
.lm-brands__item--jana img    { max-height: 56px; }
.lm-brands__item--finik img   { max-height: 52px; }
.lm-brands__item--xpay img    { max-height: 56px; }
.lm-brands__item--smartid img { max-height: 64px; }
.lm-brands__item--wl img      { max-height: 78px; }
.lm-brands__item--simbank img { max-height: 36px; }

/* Узкие/квадратные лого визуально «теряются» при общей 140px-ширине.
   Сжимаем для них ячейку — соседи подтягиваются ближе. */
.lm-brands__item--topex   { width: 110px; }
.lm-brands__item--lun     { width: 110px; }
.lm-brands__item--smartid { width: 100px; }
.lm-brands__item--wl      { width: 110px; }

@keyframes lm-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .lm-brands__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 720px) {
  .lm-brands__marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
    padding-inline: var(--lm-s-2);
  }
}

/* ---------- Pillars (для кого) ---------- */
.lm-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lm-s-3);
}

.lm-pillar {
  display: flex;
  flex-direction: column;
  gap: var(--lm-s-3);
  padding: var(--lm-s-4);
  background: var(--lm-bg-elev);
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-r-card);
  transition: border-color var(--lm-transition), transform var(--lm-transition);
}
.lm-pillar:hover {
  border-color: var(--lm-accent-soft);
  transform: translateY(-2px);
}

.lm-pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--lm-r-pill);
  background: rgba(240, 127, 3, 0.12);
  color: var(--lm-accent);
  font-size: 22px;
}

.lm-pillar__title {
  font-family: var(--lm-font-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.005em;
  color: var(--lm-text);
}

.lm-pillar__text {
  font-size: 15px;
  color: var(--lm-text-mute);
  line-height: 1.6;
}

.lm-pillar__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: 14px;
  color: var(--lm-accent);
  font-weight: 500;
}
.lm-pillar__cta:hover {
  color: var(--lm-accent-soft);
}

/* ---------- Feature split (alternating text/image) ---------- */
.lm-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lm-s-6);
  align-items: center;
}

.lm-split--reverse {
  direction: rtl;
}
.lm-split--reverse > * {
  direction: ltr;
}

.lm-split__content {
  display: flex;
  flex-direction: column;
  gap: var(--lm-s-3);
}

.lm-split__theses {
  display: flex;
  flex-direction: column;
  gap: var(--lm-s-2);
  margin-top: var(--lm-s-2);
}

.lm-split__theses li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  line-height: 1.6;
  color: inherit;
}
.lm-split__theses li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 16px;
  height: 1px;
  background: var(--lm-accent);
}

.lm-split__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--lm-r-img);
  overflow: hidden;
  border: 1px solid var(--lm-border-warm);
}
.lm-section--warm .lm-split__media {
  border-color: var(--lm-border-warm);
}
.lm-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lm-split__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lm-s-2);
  margin-top: var(--lm-s-3);
}

/* ---------- Map / География ---------- */
.lm-map {
  position: relative;
}
.lm-map__visual {
  position: relative;
  padding: var(--lm-s-5);
  background: var(--lm-bg-elev);
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-r-img);
  margin-top: var(--lm-s-4);
}
.lm-map__visual img {
  width: 100%;
  height: auto;
  filter: brightness(1.05);
}
.lm-map__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--lm-s-4);
  margin-top: var(--lm-s-4);
}
.lm-map__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}
.lm-map__stat-value {
  font-family: var(--lm-font-display);
  font-size: 32px;
  color: var(--lm-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.lm-map__stat-label {
  font-family: var(--lm-font-label);
  font-size: var(--lm-text-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--lm-text-dim);
}

/* ---------- Partners grid ---------- */
.lm-partners-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--lm-border);
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-r-img);
  overflow: hidden;
}

.lm-partners-grid__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 130px;
  background: var(--lm-bg);
  padding: var(--lm-s-2);
  transition: background var(--lm-transition);
}
.lm-partners-grid__cell:hover {
  background: var(--lm-bg-elev);
}

.lm-partners-grid__cell img {
  max-height: 44px;
  max-width: 80%;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.78;
  transition: opacity var(--lm-transition);
}
.lm-partners-grid__cell:hover img {
  opacity: 1;
}

/* Реальный апскейл (без transform) — иначе лого обрезается */
.lm-partners-grid__cell--lun img {
  max-height: 112px;
}
.lm-partners-grid__cell--ave img {
  max-height: 78px;
}
.lm-partners-grid__cell--topex img {
  max-height: 74px;
}
.lm-partners-grid__cell--kupicn img {
  max-height: 86px;
}
.lm-partners-grid__cell--ades img {
  max-height: 56px;
}

.lm-partners-grid__cell--stat {
  flex-direction: column;
  gap: 4px;
  text-align: center;
  background: var(--lm-bg-elev);
}
.lm-partners-grid__cell--stat .lm-partners-stat-num {
  font-family: var(--lm-font-display);
  font-size: 28px;
  color: var(--lm-accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.lm-partners-grid__cell--stat .lm-partners-stat-label {
  font-family: var(--lm-font-label);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--lm-text-dim);
}

/* ---------- Benefits ---------- */
.lm-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lm-s-3);
}

.lm-benefit {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--lm-s-2);
  padding: var(--lm-s-4);
  background: var(--lm-surface-warm);
  border: 1px solid var(--lm-border-warm);
  border-radius: var(--lm-r-card);
  color: var(--lm-text-dark);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--lm-transition), box-shadow var(--lm-transition);
}
.lm-benefit:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
}

.lm-benefit__num {
  font-family: var(--lm-font-label);
  font-size: var(--lm-text-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--lm-accent-strong);
}

.lm-benefit__title {
  font-family: var(--lm-font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--lm-text-dark);
}

.lm-benefit__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.lm-benefit__row {
  display: flex;
  gap: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--lm-text-dark-soft);
}

.lm-benefit__label {
  font-family: var(--lm-font-label);
  font-size: 12px;
  font-weight: 700;
  color: var(--lm-accent-strong);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
  padding-top: 2px;
}

/* ---------- Timeline ---------- */
.lm-timeline {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--lm-border);
}

.lm-timeline__row {
  display: grid;
  grid-template-columns: 200px 1fr 140px;
  gap: var(--lm-s-4);
  padding-block: var(--lm-s-3);
  border-bottom: 1px solid var(--lm-border);
  align-items: baseline;
  transition: background var(--lm-transition);
}
.lm-timeline__row:hover {
  background: rgba(255, 254, 251, 0.02);
}

.lm-timeline__date {
  font-family: var(--lm-font-label);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--lm-accent);
  font-variant-numeric: tabular-nums;
}

.lm-timeline__title {
  font-family: var(--lm-font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--lm-text);
}

.lm-timeline__tag {
  font-family: var(--lm-font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--lm-text-dim);
  text-transform: uppercase;
  padding: 4px 12px;
  border: 1px solid var(--lm-border-strong);
  border-radius: var(--lm-r-pill);
  align-self: center;
  justify-self: start;
  white-space: nowrap;
}

.lm-timeline__row--now {
  background: rgba(240, 127, 3, 0.06);
}
.lm-timeline__row--now .lm-timeline__date,
.lm-timeline__row--now .lm-timeline__title {
  color: var(--lm-accent);
}
.lm-timeline__row--now .lm-timeline__date {
  padding-left: var(--lm-s-3);
}
.lm-timeline__row--now .lm-timeline__tag {
  background: var(--lm-accent);
  color: var(--lm-text);
  border-color: var(--lm-accent);
}

/* ---------- SAFF principles ---------- */
.lm-saff {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--lm-s-3);
}

.lm-saff__card {
  display: flex;
  flex-direction: column;
  gap: var(--lm-s-2);
  padding: var(--lm-s-4);
  background: var(--lm-bg-elev);
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-r-card);
  transition: border-color var(--lm-transition);
}
.lm-saff__card:hover {
  border-color: var(--lm-accent-soft);
}

.lm-saff__letter {
  font-family: var(--lm-font-display);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  color: var(--lm-accent);
}

.lm-saff__name {
  font-family: var(--lm-font-label);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--lm-text);
}

.lm-saff__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--lm-text-mute);
}

/* ---------- Final CTA ---------- */
.lm-cta {
  padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 64px);
  background:
    radial-gradient(1200px 600px at 80% 10%, rgba(240, 127, 3, 0.18), transparent 60%),
    linear-gradient(180deg, #101a16 0%, #0a1410 100%);
  border: 1px solid var(--lm-border-strong);
  border-radius: 18px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--lm-s-5);
  align-items: center;
}

.lm-cta__title {
  font-family: var(--lm-font-display);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--lm-text);
}

.lm-cta__text {
  margin-top: var(--lm-s-2);
  color: var(--lm-text-mute);
  font-size: 17px;
  line-height: 1.65;
  max-width: 52ch;
}

.lm-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lm-s-2);
  justify-content: flex-end;
}

/* ---------- Footer ---------- */
.lm-footer {
  margin-top: var(--lm-s-7);
  padding: var(--lm-s-6) 0 var(--lm-s-4);
  border-top: 1px solid var(--lm-border);
  color: var(--lm-text-mute);
}

.lm-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--lm-s-5);
}

.lm-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--lm-s-2);
}
.lm-footer__brand img {
  display: block;
  align-self: flex-start;
  height: 32px;
  width: auto;
  max-width: none;
}
.lm-footer__brand p {
  max-width: 32ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lm-text-dim);
}

.lm-footer__col-title {
  font-family: var(--lm-font-label);
  font-size: var(--lm-text-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--lm-text-dim);
  margin-bottom: var(--lm-s-2);
}

.lm-footer__list li {
  margin-bottom: 10px;
}
.lm-footer__list a {
  font-size: 15px;
  color: var(--lm-text);
}
.lm-footer__list a:hover {
  color: var(--lm-accent);
}

.lm-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--lm-s-5);
  padding-top: var(--lm-s-3);
  border-top: 1px solid var(--lm-border);
  font-size: 13px;
  color: var(--lm-text-dim);
}

/* ---------- Reveal animations ---------- */
[data-lm-anim] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1), transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: var(--lm-anim-delay, 0s);
}
[data-lm-anim].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-lm-anim] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .lm-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--lm-s-5);
    margin-right: 0;
  }
  .lm-hero__visual {
    aspect-ratio: 5 / 4;
    max-width: 560px;
    margin-inline: auto;
  }
  .lm-split--reverse {
    direction: ltr;
  }
  .lm-pillars {
    grid-template-columns: 1fr 1fr;
  }
  .lm-benefits {
    grid-template-columns: 1fr 1fr;
  }
  .lm-partners-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .lm-saff {
    grid-template-columns: 1fr 1fr;
  }
  .lm-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
  .lm-cta {
    grid-template-columns: 1fr;
  }
  .lm-cta__actions {
    justify-content: flex-start;
  }
  .lm-timeline__row {
    grid-template-columns: 140px 1fr;
  }
  .lm-timeline__tag {
    display: none;
  }

  /* Split-секции на мобильном: одна колонка. Реальный «текст → картинка →
     кнопки» порядок достигается JS-переносом `.lm-split__media` внутрь
     content перед `.lm-split__actions` (см. конец landing_modern.html).
     CSS-only через display:contents + order работало хрупко с data-lm-anim
     (IntersectionObserver на элементе без бокса не сигналит «is-visible»
     → дети могли оставаться скрытыми). */
  .lm-split {
    grid-template-columns: 1fr;
    gap: var(--lm-s-4);
  }
  .lm-split__media {
    max-width: 560px;
    margin-inline: auto;
    width: 100%;
  }

  /* Hero visual (UI-вариант: скрин системы + плашка снизу).
     aspect-ratio 16/10 на узком экране сжимает скрин и плашка перекрывает
     картинку — переключаем на «фиксированная высота скрина + компактная
     плашка под ним». */
  .lm-hero__visual--ui {
    aspect-ratio: auto;
  }
  .lm-hero__visual--ui .lm-hero__visual-img {
    height: 240px;
    min-height: 240px;
  }
  .lm-hero__visual--ui .lm-hero__visual-caption {
    padding: 18px 22px 22px;
    gap: 4px;
  }
  .lm-hero__visual--ui .lm-hero__visual-caption strong {
    font-size: 24px;
  }
  .lm-hero__visual--ui .lm-hero__visual-caption span {
    font-size: 14px;
  }
}

@media (max-width: 720px) {
  :root {
    --lm-s-7: 64px;
    --lm-s-6: 48px;
  }
  .lm-nav__menu {
    display: none;
  }
  .lm-nav__menu-toggle {
    display: inline-flex;
  }
  .lm-pillars,
  .lm-benefits,
  .lm-saff {
    grid-template-columns: 1fr;
  }
  .lm-partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .lm-footer__inner {
    grid-template-columns: 1fr;
  }
  .lm-footer__bottom {
    flex-direction: column;
    gap: var(--lm-s-2);
    align-items: flex-start;
  }
  .lm-hero__metric-value {
    font-size: 30px;
  }
  .lm-timeline__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .lm-timeline__date {
    font-size: 11px;
  }

  /* На совсем узком — ещё компактнее плашка и метка. */
  .lm-hero__visual--ui .lm-hero__visual-img {
    height: 200px;
    min-height: 200px;
  }
  .lm-hero__visual--ui .lm-hero__visual-caption {
    padding: 14px 16px 18px;
  }
  .lm-hero__visual--ui .lm-hero__visual-caption strong {
    font-size: 20px;
  }
  .lm-hero__visual-tag {
    top: 12px;
    left: 12px;
    padding: 5px 10px;
    font-size: 10px;
  }

  .lm-split__media {
    aspect-ratio: 5 / 4;
    max-width: none;
  }
}

/* ============================================================
   Application modal — выбор типа и форма
   ============================================================ */

.lm-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms ease, visibility 0s linear 240ms;
}
.lm-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 240ms ease, visibility 0s linear 0s;
}

.lm-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 14, 12, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 240ms ease;
}
.lm-modal.is-open .lm-modal__backdrop {
  opacity: 1;
}

.lm-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: auto;
  background: var(--lm-bg-elev);
  border: 1px solid var(--lm-border);
  border-radius: 18px;
  box-shadow: var(--lm-shadow-card);
  padding: clamp(24px, 4vw, 40px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  color: var(--lm-text);
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  transition:
    opacity 280ms cubic-bezier(0.4, 0, 0.2, 1) 40ms,
    transform 320ms cubic-bezier(0.4, 0, 0.2, 1) 40ms;
}
.lm-modal.is-open .lm-modal__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Плавное появление текущего шага модалки */
.lm-modal__step:not([hidden]) {
  animation: lm-step-in 260ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes lm-step-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lm-modal,
  .lm-modal__backdrop,
  .lm-modal__dialog {
    transition: opacity 80ms linear, visibility 0s linear;
    transform: none !important;
  }
  .lm-modal__step:not([hidden]) {
    animation: none;
  }
}

.lm-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--lm-border);
  background: transparent;
  color: var(--lm-text-mute);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--lm-transition), border-color var(--lm-transition), background var(--lm-transition);
}
.lm-modal__close:hover {
  color: var(--lm-text);
  border-color: var(--lm-accent-soft);
  background: rgba(247, 176, 122, 0.08);
}

.lm-modal__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--lm-s-4);
  padding-right: 40px;
}

.lm-modal__title {
  font-family: var(--lm-font-display);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  margin: 0;
}

.lm-modal__lead {
  margin: 0;
  color: var(--lm-text-mute);
  font-size: 15px;
  line-height: 1.55;
  max-width: 52ch;
}

.lm-modal__back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--lm-border);
  background: transparent;
  border-radius: var(--lm-r-pill);
  color: var(--lm-text-mute);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: color var(--lm-transition), border-color var(--lm-transition);
  margin-bottom: 4px;
}
.lm-modal__back:hover {
  color: var(--lm-text);
  border-color: var(--lm-accent-soft);
}

.lm-modal__note {
  margin: var(--lm-s-2) 0 0;
  color: var(--lm-text-dim);
  font-size: 13px;
}
.lm-modal__note a {
  color: var(--lm-accent-soft);
  text-decoration: underline;
}

/* ---- Step 1: выбор типа ---- */

.lm-modal__choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lm-s-2);
}

.lm-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 24px;
  text-align: left;
  background: rgba(255, 254, 251, 0.02);
  border: 1px solid var(--lm-border);
  border-radius: 14px;
  color: var(--lm-text);
  cursor: pointer;
  transition: border-color var(--lm-transition), background var(--lm-transition), transform var(--lm-transition);
  font: inherit;
}
.lm-choice:hover {
  border-color: var(--lm-accent-soft);
  background: rgba(247, 176, 122, 0.05);
  transform: translateY(-1px);
}

.lm-choice__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(240, 127, 3, 0.12);
  color: var(--lm-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lm-choice__title {
  font-family: var(--lm-font-display);
  font-size: 17px;
  line-height: 1.25;
}

.lm-choice__desc {
  color: var(--lm-text-mute);
  font-size: 13.5px;
  line-height: 1.5;
}

.lm-choice__arrow {
  position: absolute;
  top: 18px;
  right: 18px;
  color: var(--lm-text-dim);
  transition: transform var(--lm-transition), color var(--lm-transition);
}
.lm-choice:hover .lm-choice__arrow {
  color: var(--lm-accent);
  transform: translateX(4px);
}

@media (max-width: 600px) {
  .lm-modal__choices {
    grid-template-columns: 1fr;
  }
}

/* ---- Step 2: форма ---- */

.lm-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lm-form__section-title {
  font-family: var(--lm-font-label);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lm-text-dim);
  margin-top: 6px;
}

.lm-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.lm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lm-field--full {
  grid-column: 1 / -1;
}

.lm-field label {
  font-size: 13px;
  color: var(--lm-text-mute);
  font-weight: 500;
}

.lm-field__hint {
  color: var(--lm-text-dim);
  font-weight: 400;
}

/* Звёздочка для required-полей (визуальная подсказка). */
.lm-field:has(input[required]) > label::after,
.lm-field:has(select[required]) > label::after,
.lm-field:has(textarea[required]) > label::after {
  content: " *";
  color: var(--lm-accent);
  font-weight: 600;
}

.lm-field input,
.lm-field select,
.lm-field textarea {
  width: 100%;
  padding: 11px 14px;
  background: rgba(255, 254, 251, 0.03);
  border: 1px solid var(--lm-border);
  border-radius: 10px;
  color: var(--lm-text);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.4;
  transition: border-color var(--lm-transition), background var(--lm-transition);
}

.lm-field textarea {
  resize: vertical;
  min-height: 78px;
}

.lm-field input:focus,
.lm-field select:focus,
.lm-field textarea:focus {
  outline: none;
  border-color: var(--lm-accent-soft);
  background: rgba(247, 176, 122, 0.05);
}

.lm-field input:invalid:not(:placeholder-shown),
.lm-field select:invalid:not([data-untouched]) {
  border-color: rgba(214, 71, 71, 0.55);
}

.lm-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238d8576' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* ---- Кастомный селект (JS enhanced) ---- */

.lm-select {
  position: relative;
}

/* Натив остаётся в DOM (для FormData/required/reportValidity),
   но визуально полностью прикрыт триггером. */
.lm-select__native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  /* Чтобы валидационный тултип браузера всплывал у триггера */
  z-index: 0;
}

.lm-select__trigger {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  background: rgba(255, 254, 251, 0.03);
  border: 1px solid var(--lm-border);
  border-radius: 10px;
  color: var(--lm-text);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.4;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--lm-transition), background var(--lm-transition);
}
.lm-select__trigger:hover {
  border-color: var(--lm-border-strong);
}
.lm-select.is-open .lm-select__trigger,
.lm-select__trigger:focus-visible {
  outline: none;
  border-color: var(--lm-accent-soft);
  background: rgba(247, 176, 122, 0.05);
}

.lm-select__trigger[data-placeholder] .lm-select__value {
  color: var(--lm-text-dim);
}

.lm-select__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lm-select__caret {
  flex-shrink: 0;
  width: 12px;
  height: 8px;
  color: var(--lm-text-dim);
  transition: transform var(--lm-transition), color var(--lm-transition);
}
.lm-select.is-open .lm-select__caret {
  transform: rotate(180deg);
  color: var(--lm-accent-soft);
}

.lm-select__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--lm-bg-elev);
  border: 1px solid var(--lm-border-strong);
  border-radius: 10px;
  box-shadow: var(--lm-shadow-soft);
  padding: 6px;
  max-height: 240px;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}
.lm-select.is-open .lm-select__menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.lm-select__option {
  display: block;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--lm-text);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  text-align: left;
  transition: background var(--lm-transition), color var(--lm-transition);
}
.lm-select__option:hover,
.lm-select__option.is-active {
  background: rgba(247, 176, 122, 0.08);
}
.lm-select__option.is-selected {
  background: rgba(240, 127, 3, 0.14);
  color: var(--lm-accent-soft);
}

@media (prefers-reduced-motion: reduce) {
  .lm-select__menu,
  .lm-select__caret {
    transition: opacity 80ms linear;
    transform: none !important;
  }
}

/* ---- Составной блок «Адреса ПВЗ» ---- */

.lm-field--addresses > label {
  margin-bottom: 8px;
}

.lm-addresses {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lm-address-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 36px;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--lm-border);
  border-radius: 12px;
  background: rgba(255, 254, 251, 0.025);
  transition: border-color var(--lm-transition), background var(--lm-transition);
}
.lm-address-row:focus-within {
  border-color: var(--lm-accent-soft);
  background: rgba(247, 176, 122, 0.04);
}
/* Карго-форма — один адрес, без нумерации и кнопки удаления. */
.lm-address-row--single {
  grid-template-columns: minmax(0, 1fr);
}

.lm-address-row__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 254, 251, 0.08);
  color: var(--lm-text);
  font-family: var(--lm-font-label);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  letter-spacing: 0.02em;
}

.lm-address-row__fields {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "sett sett"
    "street house";
  gap: 10px;
  min-width: 0;
}
.lm-address-cell { min-width: 0; }
.lm-address-cell--settlement { grid-area: sett; position: relative; }
.lm-address-cell--street     { grid-area: street; }
.lm-address-cell--house      { grid-area: house; }

/* Подпись «Район · Область», появляется под полем населённого пункта
   после выбора варианта из автоподсказки. */
.lm-address-meta {
  margin-top: 6px;
  padding-inline: 4px;
  font-size: 12.5px;
  color: var(--lm-text-mute);
  letter-spacing: 0.01em;
}
.lm-address-meta[hidden] { display: none; }

.lm-address-cell select,
.lm-address-cell input {
  width: 100%;
  padding: 11px 14px;
  background: rgba(255, 254, 251, 0.03);
  border: 1px solid var(--lm-border);
  border-radius: 10px;
  color: var(--lm-text);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.4;
  transition: border-color var(--lm-transition), background var(--lm-transition);
}
.lm-address-cell select:focus,
.lm-address-cell input:focus {
  outline: none;
  border-color: var(--lm-accent-soft);
  background: rgba(247, 176, 122, 0.05);
}
.lm-address-cell select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.lm-address-cell input[readonly] {
  background: rgba(255, 254, 251, 0.015);
  color: var(--lm-text-mute);
  cursor: default;
}
.lm-address-cell input[readonly]:focus {
  outline: none;
  border-color: var(--lm-border);
  background: rgba(255, 254, 251, 0.015);
}

/* ---- Чип-селектор «Регионы работы» (карго-форма) ---- */
.lm-regions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lm-regions__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lm-regions__loading {
  font-size: 13.5px;
  color: var(--lm-text-mute);
  padding: 4px 0;
}
.lm-region-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--lm-border);
  border-radius: 999px;
  background: rgba(255, 254, 251, 0.03);
  color: var(--lm-text);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color var(--lm-transition), background var(--lm-transition), color var(--lm-transition);
}
.lm-region-chip:hover {
  border-color: var(--lm-accent-soft);
}
.lm-region-chip.is-selected {
  background: rgba(247, 176, 122, 0.16);
  border-color: var(--lm-accent-soft);
  color: var(--lm-text);
}
.lm-region-chip--all {
  align-self: flex-start;
  font-weight: 500;
}
.lm-region-chip--all.is-selected {
  background: rgba(247, 176, 122, 0.22);
  border-color: var(--lm-accent);
  color: var(--lm-accent);
}

/* Автодополнение «Населённый пункт» — выпадающий список под полем поиска. */
.lm-suggest {
  position: relative;
}
.lm-suggest__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: var(--lm-bg-elev);
  border: 1px solid var(--lm-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
  z-index: 30;
  padding: 4px;
}
.lm-suggest__menu[hidden] { display: none; }
.lm-suggest__option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--lm-text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--lm-transition);
}
.lm-suggest__option:hover,
.lm-suggest__option.is-active {
  background: rgba(247, 176, 122, 0.08);
}
.lm-suggest__option-name {
  display: block;
  color: var(--lm-text);
}
.lm-suggest__option-meta {
  display: block;
  font-size: 12.5px;
  color: var(--lm-text-mute);
  margin-top: 2px;
}
.lm-suggest__empty,
.lm-suggest__loading {
  padding: 10px 12px;
  color: var(--lm-text-mute);
  font-size: 13.5px;
}

.lm-address-remove {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--lm-border);
  background: transparent;
  color: var(--lm-text-mute);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin-top: 2px;
  transition: color var(--lm-transition), border-color var(--lm-transition), background var(--lm-transition);
}
.lm-address-remove:hover {
  color: #ff8a8a;
  border-color: rgba(255, 138, 138, 0.45);
  background: rgba(255, 138, 138, 0.08);
}
.lm-address-remove[hidden] { display: none; }

.lm-address-add {
  align-self: flex-start;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px dashed var(--lm-border-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--lm-text-mute);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: color var(--lm-transition), border-color var(--lm-transition), background var(--lm-transition);
}
.lm-address-add:hover {
  color: var(--lm-text);
  border-color: var(--lm-accent-soft);
  background: rgba(247, 176, 122, 0.05);
}
.lm-address-add__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(247, 176, 122, 0.15);
  color: var(--lm-accent);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
}

@media (max-width: 720px) {
  .lm-address-row {
    grid-template-columns: 1fr 36px;
    padding: 12px;
  }
  .lm-address-row__num { display: none; }
  .lm-address-row__fields {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "sett sett"
      "street house";
  }
}

/* ---- Телефон с кодом страны ---- */

.lm-phone {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  background: rgba(255, 254, 251, 0.03);
  border: 1px solid var(--lm-border);
  border-radius: 10px;
  transition: border-color var(--lm-transition), background var(--lm-transition);
}
.lm-phone:focus-within,
.lm-phone.is-open {
  border-color: var(--lm-accent-soft);
  background: rgba(247, 176, 122, 0.05);
}

.lm-phone__country {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: none;
  background: transparent;
  color: var(--lm-text);
  font: inherit;
  font-size: 14.5px;
  cursor: pointer;
  border-right: 1px solid var(--lm-border);
  transition: background var(--lm-transition), border-color var(--lm-transition);
}
.lm-phone__country:hover,
.lm-phone.is-open .lm-phone__country {
  background: rgba(255, 254, 251, 0.04);
}

.lm-phone__code {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.lm-phone__caret {
  width: 10px;
  height: 7px;
  color: var(--lm-text-dim);
  transition: transform var(--lm-transition), color var(--lm-transition);
}
.lm-phone.is-open .lm-phone__caret {
  transform: rotate(180deg);
  color: var(--lm-accent-soft);
}

/* Сам инпут — без собственной рамки/фона, наследует рамку у .lm-phone.
   Селектор 2 класса > .lm-field input (1 класс + 1 элемент). */
.lm-phone .lm-phone__input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 11px 14px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--lm-text);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.4;
  outline: none;
}
.lm-phone .lm-phone__input:focus {
  outline: none;
  background: transparent;
  border: none;
}

.lm-phone__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--lm-bg-elev);
  border: 1px solid var(--lm-border-strong);
  border-radius: 10px;
  box-shadow: var(--lm-shadow-soft);
  padding: 6px;
  opacity: 0;
  transform: translateY(-4px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    visibility 0s linear 160ms;
}
.lm-phone.is-open .lm-phone__menu {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    visibility 0s linear 0s;
}

.lm-phone__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--lm-text);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: background var(--lm-transition);
}
.lm-phone__option:hover {
  background: rgba(247, 176, 122, 0.08);
}
.lm-phone__option-name {
  flex: 1;
}
.lm-phone__option-code {
  color: var(--lm-text-dim);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .lm-phone__menu,
  .lm-phone__caret {
    transition: opacity 80ms linear, visibility 0s linear;
    transform: none !important;
  }
}

/* ---- Правовая форма организации (composite, как .lm-phone) ---- */

.lm-org {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  background: rgba(255, 254, 251, 0.03);
  border: 1px solid var(--lm-border);
  border-radius: 10px;
  transition: border-color var(--lm-transition), background var(--lm-transition);
}
.lm-org:focus-within,
.lm-org.is-open {
  border-color: var(--lm-accent-soft);
  background: rgba(247, 176, 122, 0.05);
}

.lm-org__form {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: none;
  background: transparent;
  color: var(--lm-text);
  font: inherit;
  font-size: 14.5px;
  cursor: pointer;
  border-right: 1px solid var(--lm-border);
  transition: background var(--lm-transition);
}
.lm-org__form:hover,
.lm-org.is-open .lm-org__form {
  background: rgba(255, 254, 251, 0.04);
}

.lm-org__form-value {
  letter-spacing: 0.01em;
  min-width: 28px;
  text-align: left;
}

.lm-org__caret {
  width: 10px;
  height: 7px;
  color: var(--lm-text-dim);
  transition: transform var(--lm-transition), color var(--lm-transition);
}
.lm-org.is-open .lm-org__caret {
  transform: rotate(180deg);
  color: var(--lm-accent-soft);
}

.lm-org .lm-org__input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 11px 14px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--lm-text);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.4;
  outline: none;
}
.lm-org .lm-org__input:focus {
  outline: none;
  background: transparent;
  border: none;
}

.lm-org__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  /* меню короткое — пусть не растягивается на всю ширину поля */
  min-width: 200px;
  z-index: 20;
  background: var(--lm-bg-elev);
  border: 1px solid var(--lm-border-strong);
  border-radius: 10px;
  box-shadow: var(--lm-shadow-soft);
  padding: 6px;
  opacity: 0;
  transform: translateY(-4px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    visibility 0s linear 160ms;
}
.lm-org.is-open .lm-org__menu {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    visibility 0s linear 0s;
}

.lm-org__option {
  display: block;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--lm-text);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: background var(--lm-transition);
}
.lm-org__option:hover {
  background: rgba(247, 176, 122, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .lm-org__menu,
  .lm-org__caret {
    transition: opacity 80ms linear, visibility 0s linear;
    transform: none !important;
  }
}

.lm-agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--lm-text-mute);
  line-height: 1.5;
  cursor: pointer;
  user-select: none;
}
.lm-agree input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--lm-accent);
}
.lm-agree a {
  color: var(--lm-accent-soft);
  text-decoration: underline;
}

.lm-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lm-s-2);
  flex-wrap: wrap;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--lm-border);
}

.lm-form__status {
  font-size: 13px;
  color: var(--lm-text-mute);
  flex: 1;
  min-width: 0;
}
.lm-form__status--error { color: #ff8e7b; }
.lm-form__status--success { color: #6ed3a3; }
.lm-form__status--pending { color: var(--lm-text-dim); }

@media (max-width: 600px) {
  .lm-form__grid {
    grid-template-columns: 1fr;
  }
  .lm-modal {
    padding: 0;
    align-items: flex-end;
  }
  .lm-modal__dialog {
    border-radius: 18px 18px 0 0;
    max-height: 100vh;
  }
}

/* ---- Success ---- */

.lm-modal__success {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  padding: 16px 0;
}

.lm-modal__success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(20, 144, 138, 0.14);
  color: var(--lm-brand-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lm-modal__success-actions {
  margin-top: var(--lm-s-2);
}