/* Медиа Обс (Media Obs) — компоненты. Токены приходят из tokens.css.
   В превью шрифты грузятся с Google Fonts; на сайте — локальные woff2 (@font-face в стилях сайта). */

.mo, .mo * { box-sizing: border-box; }
.mo { font-family: var(--font-text); font-size: 16px; line-height: 24px; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
:where(.mo) a { color: inherit; }
.mo :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Button ---------- */
.mo-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 26px; border-radius: var(--radius-pill); border: 1.5px solid transparent; font: 600 16px/1 var(--font-text); text-decoration: none; cursor: pointer; transition: background-color .16s ease-out, border-color .16s ease-out, color .16s ease-out; white-space: nowrap; }
.mo-btn--primary { background: var(--rec-fill); color: var(--on-rec); }
.mo-btn--primary:hover { background: var(--rec-fill-hover); }
.mo-btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.mo-btn--secondary:hover { border-color: var(--ink); }
.mo-btn--ghost { background: transparent; color: var(--ink); padding: 0 8px; }
.mo-btn--ghost:hover { color: var(--rec-text); }
.mo-btn--on-night { background: transparent; color: var(--on-night); border-color: var(--on-night); }
.mo-btn--on-night:hover { background: var(--on-night); color: var(--night); }
.mo-btn--l { min-height: 56px; padding: 0 32px; font-size: 17px; }
.mo-btn--s { min-height: 40px; padding: 0 18px; font-size: 15px; }
.mo-btn[disabled] { opacity: .45; cursor: not-allowed; }
.mo-btn__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ---------- Tag ---------- */
.mo-tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--radius-s); font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-sunken); white-space: nowrap; }
.mo-tag--outline { background: transparent; border: 1px solid var(--line-strong); color: var(--ink); }
.mo-tag--calc { background: transparent; border: 1px dashed var(--line-strong); color: var(--ink-muted); }
.mo-tag--rec { background: var(--rec-tint); color: var(--rec-text); }
.mo-tag--rec::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rec); }
.mo-tag--night { background: transparent; border: 1px solid currentColor; color: var(--on-night); }

/* ---------- Formula ---------- */
.mo-formula { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--ink); font: 500 15px/22px var(--font-mono); color: var(--ink); }
.mo-formula__op { color: var(--rec-text); font-weight: 500; }
.mo-formula__result { padding: 2px 12px; border-radius: var(--radius-pill); background: var(--ink); color: var(--paper); }
.mo-formula--night { border-color: var(--on-night); color: var(--on-night); }
.mo-formula--night .mo-formula__op { color: var(--rec); }
.mo-formula--night .mo-formula__result { background: var(--on-night); color: var(--night); }

/* ---------- Metric ---------- */
.mo-metric { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mo-metric__value { font: 700 64px/64px var(--font-display); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.mo-metric__value--accent { color: var(--rec); }
.mo-metric__value small { font-size: .45em; letter-spacing: 0; margin-left: .15em; }
.mo-metric__label { font: 600 16px/22px var(--font-text); color: var(--ink); }
.mo-metric__note { font: 400 14px/20px var(--font-text); color: var(--ink-subtle); }
.mo-metric--m .mo-metric__value { font-size: 40px; line-height: 44px; }
.mo-metric--night .mo-metric__value, .mo-metric--night .mo-metric__label { color: var(--on-night); }
.mo-metric--night .mo-metric__value--accent { color: var(--rec); }
.mo-metric--night .mo-metric__note { color: var(--on-night); opacity: .72; }

/* ---------- CaseCard ---------- */
.mo-case { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-8); border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); transition: border-color .16s ease-out; }
.mo-case:hover { border-color: var(--ink); }
.mo-case__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mo-case__title { margin: 0; font: 600 24px/30px var(--font-display); }
.mo-case__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-6); padding: var(--space-6) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mo-case__text { margin: 0; color: var(--ink-muted); max-width: var(--measure); }
.mo-case__foot { font: 400 14px/20px var(--font-text); color: var(--ink-subtle); }

/* ---------- ServiceCard ---------- */
.mo-service { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color .16s ease-out; }
.mo-service:hover { border-color: var(--ink); }
.mo-service__index { font: 500 12px/16px var(--font-mono); letter-spacing: .08em; color: var(--ink-subtle); }
.mo-service__title { margin: 0; font: 600 24px/30px var(--font-display); }
.mo-service__text { margin: 0; color: var(--ink-muted); }
.mo-service__more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.mo-service:hover .mo-service__more { color: var(--rec-text); }
.mo-service--flagship { background: var(--night); border-color: var(--night); color: var(--on-night); }
.mo-service--flagship .mo-service__text, .mo-service--flagship .mo-service__index { color: var(--on-night); opacity: .76; }
.mo-service--flagship .mo-service__more, .mo-service--flagship:hover .mo-service__more { color: var(--on-night); }
.mo-service--flagship:hover { border-color: var(--rec); }

/* ---------- Field & Check ---------- */
.mo-field { display: flex; flex-direction: column; gap: 6px; }
.mo-field__label { font: 600 14px/20px var(--font-text); color: var(--ink); }
.mo-field__input { width: 100%; min-height: 52px; padding: 14px 16px; border-radius: var(--radius-m); border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 400 16px/22px var(--font-text); transition: border-color .16s ease-out; }
.mo-field__input::placeholder { color: var(--ink-subtle); }
.mo-field__input:hover { border-color: var(--ink-muted); }
.mo-field__input:focus { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--ink); }
textarea.mo-field__input { min-height: 112px; resize: vertical; }
.mo-field__hint { font: 400 14px/20px var(--font-text); color: var(--ink-subtle); }
.mo-field--error .mo-field__input { border-color: var(--rec-text); }
.mo-field--error .mo-field__hint { color: var(--rec-text); }
.mo-check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font: 400 14px/20px var(--font-text); color: var(--ink-muted); cursor: pointer; }
.mo-check input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; border-radius: var(--radius-s); border: 1.5px solid var(--line-strong); background: var(--surface); display: grid; place-content: center; cursor: pointer; }
.mo-check input::after { content: ""; width: 10px; height: 6px; border-left: 2.5px solid var(--on-rec); border-bottom: 2.5px solid var(--on-rec); transform: translateY(-1px) rotate(-45deg); opacity: 0; }
.mo-check input:checked { background: var(--rec-fill); border-color: var(--rec-fill); }
.mo-check input:checked::after { opacity: 1; }
.mo-check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mo-check a { color: var(--ink); text-underline-offset: 3px; }

/* ---------- LeadForm ---------- */
.mo-form { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); max-width: 560px; }
.mo-form__title { margin: 0; font: 600 24px/30px var(--font-display); }
.mo-form__lead { margin: -4px 0 4px; color: var(--ink-muted); }
.mo-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.mo-form__consents { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-2); }
.mo-form__status { display: flex; align-items: center; gap: 8px; font: 600 15px/20px var(--font-text); color: var(--positive); }
@media (max-width: 560px) { .mo-form { padding: var(--space-6); } .mo-form__row { grid-template-columns: 1fr; } }

/* ---------- Disclaimer ---------- */
.mo-note { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); border-radius: var(--radius-m); background: var(--surface-sunken); color: var(--ink-muted); font: 400 14px/20px var(--font-text); max-width: var(--measure); }
.mo-note__title { font: 500 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.mo-note ul { margin: 0; padding-left: 18px; }

/* ---------- Header ---------- */
.mo-header { display: flex; align-items: center; gap: var(--space-6); height: var(--header-height); padding: 0 var(--space-8); background: var(--paper); border-bottom: 1px solid var(--line); }
.mo-header__logo { display: block; height: 34px; flex: none; }
.mo-header__logo img { height: 100%; width: auto; display: block; }
.mo-header__nav { display: flex; gap: var(--space-6); white-space: nowrap; font: 500 15px/20px var(--font-text); }
.mo-header__nav a { text-decoration: none; color: var(--ink); }
.mo-header__nav a:hover, .mo-header__nav a[aria-current] { color: var(--rec-text); }
.mo-header__contacts { white-space: nowrap; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; font: 600 15px/20px var(--font-text); }
.mo-header__contacts a { text-decoration: none; }
.mo-header__contacts span { font-weight: 400; font-size: 13px; color: var(--ink-subtle); }
@media (max-width: 1100px) { .mo-header__contacts { display: none; } }
@media (max-width: 900px) { .mo-header { padding: 0 var(--space-4); height: 60px; gap: var(--space-4); } .mo-header__nav, .mo-header__contacts { display: none; } .mo-header .mo-btn { margin-left: auto; } .mo-header__logo { height: 28px; } }

/* ---------- Hero ---------- */
.mo-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: var(--space-8); padding: var(--space-24) var(--space-12); border-radius: var(--radius-l); background: var(--night); color: var(--on-night); }
.mo-hero__kicker { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-6); }
.mo-hero__title { margin: 0; font: 700 72px/76px var(--font-display); letter-spacing: -0.02em; }
.mo-hero__title em { font-style: normal; color: var(--rec); }
.mo-hero__lead { margin: var(--space-6) 0 0; font: 400 18px/28px var(--font-text); max-width: 520px; opacity: .82; }
.mo-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.mo-hero__art { position: relative; justify-self: center; width: 100%; max-width: 420px; aspect-ratio: 1; }
.mo-hero__art svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mo-orbit { fill: none; stroke: var(--on-night); stroke-opacity: .22; stroke-width: 1.5; }
.mo-orbit--rec { fill: var(--rec); stroke: none; }
@media (max-width: 900px) { .mo-hero { grid-template-columns: 1fr; padding: var(--space-16) var(--space-6); } .mo-hero__title { font-size: 40px; line-height: 44px; } .mo-hero__art { max-width: 260px; order: -1; } }

/* ---------- Footer ---------- */
.mo-footer { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-8); padding: var(--space-16) var(--space-8) var(--space-8); background: var(--night); color: var(--on-night); font: 400 14px/22px var(--font-text); }
.mo-footer img { height: 40px; width: auto; display: block; margin-bottom: var(--space-4); }
.mo-footer h4 { margin: 0 0 var(--space-3); font: 500 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .72; }
.mo-footer a { color: var(--on-night); text-decoration: none; }
.mo-footer a:hover { color: var(--rec); }
.mo-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mo-footer__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); padding-top: var(--space-6); border-top: 1px solid rgba(247,245,242,.16); opacity: .72; font-size: 13px; }
@media (max-width: 900px) { .mo-footer { grid-template-columns: 1fr; padding: var(--space-12) var(--space-4) var(--space-6); } }