/* ============================================================
   MOLNIA AI Landing — style.css
   All values extracted directly from Figma file (mSbBAsHBYk07Tw2SuAHXIX)
   Last sync: 2026-05-04
   ============================================================ */

/* ---------- FONTS — Halvar Breitschrift полный пакет ----------
   Все 4 нужных веса (Light/Regular/Medium/Bold) загружены в .woff2 — браузер
   подберёт правильный файл по font-weight в CSS, без fake-bold синтеза. */
@font-face {
  font-family: 'Halvar Breitschrift';
  src: url('fonts/HalvarBreit-Lt.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Halvar Breitschrift';
  src: url('fonts/HalvarBreit-Rg.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Halvar Breitschrift';
  src: url('fonts/HalvarBreit-Md.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Halvar Breitschrift';
  src: url('fonts/HalvarBreit-Bd.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Запрещаем браузеру синтезировать bold/italic — теперь у нас все веса настоящие */
* { font-synthesis: none; -webkit-font-synthesis: none; }

/* ---------- DESIGN TOKENS (from Figma get_variable_defs) ---------- */
:root {
  --color-brand-primary: #eb5e28;
  --color-brand-active:  #c24c20;
  --color-brand-hover:   #d95524;

  --color-text-primary:  #252422;
  --color-text-secondary:#787876;
  --color-text-inverse:  #ffffff;
  --color-text-brand:    #eb5e28;

  --color-bg-primary: #ffffff;
  --color-bg-muted:   #ccc5b9;  /* Beige 100% — stats grid */
  --color-bg-subtle:  #e9e7e3;  /* Beige 30% — popular tariff bg, hero media */
  --color-bg-icon:    #f4e6e1;  /* peach — feature icons bg */
  --color-surface-inverse: #252422;

  --color-border-default: #dcd8d1;
  --color-border-subtle:  #b7b7b6;

  --color-black: #252422;

  /* Glows from Figma effects */
  --glow-orange-sm: 0 0 14.2px rgba(235, 94, 40, 0.47);
  --glow-orange-md: 0 0 50px rgba(235, 94, 40, 0.5);
  --glow-orange-lg: 0 0 50px rgba(235, 94, 40, 0.5);

  /* Layout — стандартный padding для секций (header растягивается на полную
     ширину viewport), отдельный --content-offset для центрирования внутреннего
     контента 1200px на широких экранах. */
  --base-width: min(1440px, 100vw);
  --container-pad: clamp(32px, calc((100vw - 1200px) / 2), 120px);
  --content-offset: max(var(--container-pad), calc((100vw - 1600px) / 2));
  --container-pad-vert: max(40px, calc(64px * var(--w-scale)));
  --container-max: 1200px;

  /* Global responsive scales — один множитель управляет всеми критичными
     размерами. На 1440+ → 1.0 (база Figma). На laptop 1024-1439 плавно
     уменьшается. Высотный scale срабатывает только на коротких экранах.
     Применение: calc(BASEpx * var(--w-scale) * var(--h-scale)). */
  --w-scale: 1;
  --h-scale: 1;

  /* Type families — Halvar Breitschrift есть в весах 300/400/500/700, fallback на system */
  --font-display: 'Halvar Breitschrift', system-ui, -apple-system, sans-serif;
  --font-body:    'Montserrat', system-ui, -apple-system, sans-serif;

  /* Animation timings — точно соответствуют Figma prototype duration values */
  --t-fast: 350ms;
  --t-med:  500ms;

  /* Easings — точные кривые соответствующие Figma:
     LINEAR        → linear
     EASE_OUT      → cubic-bezier(0, 0, 0.58, 1)
     EASE_IN       → cubic-bezier(0.41, 0, 1, 1)
     EASE_IN_OUT   → cubic-bezier(0.41, 0, 0.58, 1) */
  --ease-linear: linear;
  --ease-out:    cubic-bezier(0, 0, 0.58, 1);
  --ease-in:     cubic-bezier(0.41, 0, 1, 1);
  --ease-inout:  cubic-bezier(0.41, 0, 0.58, 1);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.site-header,
.hero,
.features,
.brand-section,
.cta-block,
.tariffs,
.site-footer {
  width: 100vw;
}
img, svg, video { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; }
a { color: inherit; text-decoration: none; }
input, button, select, textarea { font-family: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- TITLE PREFIX SLASH ---------- */
.title-prefix {
  color: var(--color-brand-primary);
  font-weight: inherit;
}

/* ============================================================
   STEPPED BUTTON COMPONENT
   Figma: outer 458×53 wrapper with padding-top:16 padding-left:12,
          inner Frame 399 446×37 with OUTSIDE stroke top=16, left=12 same color.
   Result: rect with 12×16 notch in upper-left corner.
   We implement via clip-path polygon.
   ============================================================ */
.btn-stepped {
  --notch-x: 12px;
  --notch-y: 16px;
  --btn-bg: var(--color-brand-primary);
  --btn-bg-hover: var(--color-brand-hover);
  --btn-bg-active: var(--color-brand-active);
  --btn-text: #ffffff;

  display: inline-flex;
  align-items: stretch;
  position: relative;
  padding: 0;
  background: transparent;
  color: var(--btn-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 20.84px;
  letter-spacing: 0.36px;
  text-transform: uppercase;
  text-decoration: none;
  transition: filter var(--t-med) var(--ease-linear);
  cursor: pointer;
}
.btn-stepped__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--btn-bg);
  color: var(--btn-text);
  padding: 14px 28px;
  /* DIAGONAL cut top-left corner (как в Figma OUTSIDE stroke с miter-join) — pentagon shape:
     (notch-x, 0) → top-right → bottom-right → bottom-left → (0, notch-y) → close */
  clip-path: polygon(
    var(--notch-x) 0,
    100% 0,
    100% 100%,
    0 100%,
    0 var(--notch-y)
  );
  transition: background-color var(--t-med) var(--ease-linear);
  white-space: nowrap;
}
.btn-stepped:hover .btn-stepped__inner { background: var(--btn-bg-hover); }
.btn-stepped:active .btn-stepped__inner { background: var(--btn-bg-active); }
.btn-stepped:hover { filter: drop-shadow(var(--glow-orange-md)); }
.btn-stepped:active {
  filter: none;
  transition-duration: 0s;
}
.btn-stepped:active .btn-stepped__inner {
  transition-duration: 0s;
}
.btn-stepped:hover:active {
  filter: none;
}
.btn-stepped:hover:active .btn-stepped__inner {
  background: var(--btn-bg-active);
  transition-duration: 0s;
}

.btn-stepped--orange { --btn-bg: #eb5e28; --btn-bg-hover: #d95524; --btn-bg-active: #c24c20; --btn-text:#ffffff; }
/* Submit ВОЙТИ — Figma Frame 409: black default → GRAY (#dcd8d1) hover → GRAY+orange-edge pressed */
.btn-stepped--dark   { --btn-bg: #252422; --btn-bg-hover: #dcd8d1; --btn-bg-active: #dcd8d1; --btn-text:#ffffff; }
.btn-stepped--dark:hover .btn-stepped__inner { color: var(--color-text-primary); }
.btn-stepped--dark:hover { filter: none; }
.btn-stepped--dark:active .btn-stepped__inner { color: var(--color-text-primary); box-shadow: inset -3px -2px 0 var(--color-brand-primary); }

/* LG = hero CTA «ПОПРОБОВАТЬ БЕСПЛАТНО» — Figma Frame 399 446×37, OUTSIDE stroke 16/0/0/12
   notch 12×16 на 53px кнопке = 30% высоты слева сверху срезано (хорошо видно) */
.btn-stepped--lg { --notch-x: 14px; --notch-y: 18px; }
.btn-stepped--lg .btn-stepped__inner { padding: 18px 68px 16px 72px; }

/* SM = tariff card «ВЫБРАТЬ» — Figma Frame 446 200×29, OUTSIDE stroke 8/0/0/4 = notch 4×8 */
.btn-stepped--sm { --notch-x: 6px; --notch-y: 10px; }
.btn-stepped--sm .btn-stepped__inner { padding: 8px 28px; font-size: 14px; line-height: 17px; letter-spacing: 0.28px; }

/* BLOCK = full-width (auth submit «ВОЙТИ») */
.btn-stepped--block { width: 100%; }
.btn-stepped--block .btn-stepped__inner { width: 100%; padding: 16px 24px; }

/* ---------- OUTLINE BUTTON (ВОЙТИ in header) ---------- */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: var(--color-text-primary);
  border: 2px solid var(--color-text-primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 20.84px;
  letter-spacing: 0.36px;
  text-transform: uppercase;
  padding: 16px 32px;
  text-decoration: none;
  transition: background-color var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out);
}
.btn-outline:hover {
  background: var(--color-brand-primary);
  color: #ffffff;
  border-color: var(--color-text-primary);
}

/* ============================================================
   HEADER (Хэдер 1440×100 · pad 16/120 · gap 200 · SPACE_BETWEEN cross=CENTER)
   bg full-width, контент центрирован 1440 max
   ============================================================ */
.site-header {
  position: relative;
  z-index: 10;
  width: 100%;
  background: var(--color-bg-primary);
}
.header-inner {
  max-width: var(--base-width);
  margin: 0 auto;
  padding: clamp(10px, 1.1vw, 16px) var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 5vw, 96px);
  min-height: auto;
}
/* Logo Frame 403 — 359×69.324 */
.logo {
  display: inline-flex;
  align-items: center;
  padding: 0;
}
.logo-img { width: calc(200px * var(--w-scale)); height: auto; aspect-ratio: 359 / 69.324; object-fit: fill; }

/* Frame 406: 641×53, horizontal SPACE_BETWEEN cross=MAX, gap=24 */
.header-actions {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.5vw, 18px);
  height: auto;
  justify-content: flex-end;
  flex: 1 1 auto;
  flex-shrink: 0;
}

/* ТАРИФЫ — Figma Frame 543 INSTANCE 158×53, pad 16/32/16/32
   default text fill = #c24c20 (color/brand/active — darker orange override),
   hover (1:1496) = same text + drop-shadow 0 0 14.2px rgba(235,94,40,0.47) */
.nav-tariffs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: calc(40px * var(--w-scale));
  padding: calc(8px * var(--w-scale)) calc(16px * var(--w-scale));
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(14px * var(--w-scale));
  line-height: 1.15;
  letter-spacing: 0.36px;
  text-transform: uppercase;
  color: var(--color-brand-active);   /* #c24c20 (по Figma) */
  background: transparent;
  border: none;
  text-decoration: none;
  flex-shrink: 0;
  position: relative;
  transition:
    color var(--t-fast) var(--ease-linear),
    filter var(--t-fast) var(--ease-linear);  /* hover: smart-animate 350ms LINEAR */
}
.nav-tariffs::after {
  content: "";
  position: absolute;
  left: calc(16px * var(--w-scale));
  right: calc(16px * var(--w-scale));
  bottom: calc(7px * var(--w-scale));
  height: 1px;
  background: var(--color-brand-primary);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition:
    transform var(--t-fast) var(--ease-linear),
    opacity var(--t-fast) var(--ease-linear);
  pointer-events: none;
}
.nav-tariffs:hover {
  color: var(--color-brand-primary);
  filter: drop-shadow(0 0 7.1px rgba(235, 94, 40, 0.47));
}
.nav-tariffs:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

/* ЗАРЕГИСТРИРОВАТЬСЯ — Frame 547 INSTANCE 289×53, VERTICAL padding 16/0/0/8
   Inside: Frame 281×37 fill #eb5e28, OUTSIDE stroke 16/0/0/8 #eb5e28 → notch 8×16
   Default → Hover (1:1504) smart-animate 500ms EASE_OUT:
     hover: Frame fill #d95524, drop-shadow 0 0 50 rgba(235,94,40,0.5) */
.header-actions .btn-stepped {
  --notch-x: 8px;
  --notch-y: 16px;
  height: calc(40px * var(--w-scale));
  flex-shrink: 0;
  transition: filter var(--t-med) var(--ease-out);
}
.header-actions .btn-stepped .btn-stepped__inner {
  transition: background-color var(--t-med) var(--ease-out);
}
.header-actions .btn-stepped--orange {
  width: calc(260px * var(--w-scale));
}
.header-actions .btn-stepped--orange .btn-stepped__inner {
  width: 100%;
  height: 100%;
  padding: 0 calc(12px * var(--w-scale)) 0 calc(6px * var(--w-scale));
  font-size: calc(14px * var(--w-scale));
  letter-spacing: 0.36px;
}

/* ВОЙТИ — Frame 543 INSTANCE 138×53, pad 16/32/16/32, stroke 2px INSIDE #252422, fill #ffffff
   text #252422
   Hover (1:1498) smart-animate 500ms EASE_OUT:
     fill #eb5e28, stroke 2px #252422 stays, text #ffffff */
.header-actions .btn-outline {
  width: calc(100px * var(--w-scale));
  height: calc(40px * var(--w-scale));
  padding: calc(8px * var(--w-scale)) calc(18px * var(--w-scale));
  background: #ffffff;
  color: var(--color-text-primary);
  border: 2px solid var(--color-text-primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(14px * var(--w-scale));
  line-height: 1.15;
  letter-spacing: 0.36px;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out);
}
.header-actions .btn-outline:hover {
  background: var(--color-brand-primary);
  color: #ffffff;
  border-color: var(--color-text-primary);
}

/* ============================================================
   HERO (Блок 1 · 1440×1399) — точно по Figma:
   .hero-block = Frame 626: padding 40/120, vertical gap 56
   .hero-frame-414 = title/media group + description/CTA, vertical gap 40
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  background: var(--color-bg-primary);
}
.hero-block {
  position: relative;
  max-width: var(--base-width);
  margin: 0 auto;
  padding: calc(40px * var(--w-scale)) var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: calc(56px * var(--w-scale));
}
.hero-deco {
  position: absolute;
  top: calc(40px * var(--w-scale));
  left: calc(var(--content-offset) - (22.79px * var(--w-scale)));
  width: calc(13.424px * var(--w-scale) * var(--h-scale));
  height: calc(27.769px * var(--w-scale) * var(--h-scale));
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.hero-deco::before {
  content: '';
  width: calc(27.883px * var(--w-scale) * var(--h-scale));
  height: calc(4.42px * var(--w-scale) * var(--h-scale));
  background: var(--color-brand-primary);
  transform: rotate(-70.61deg);
  flex: 0 0 auto;
}
.hero-frame-414 {
  display: flex;
  flex-direction: column;
  gap: calc(40px * var(--w-scale));
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}
.hero-content {
  display: flex;
  flex-direction: column;
  gap: calc(40px * var(--w-scale));
  width: 100%;
  max-width: 1600px;
}
.hero-title {
  font-family: 'Hind', 'Noto Sans', var(--font-body);
  font-weight: 700;
  font-size: calc(30px * var(--w-scale) * var(--h-scale));
  line-height: 1.2;
  letter-spacing: calc(0.6px * var(--w-scale));
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin: 0;
  width: 100%;
  max-width: 100%;
  text-shadow: none;
}
.hero-title__desktop {
  display: inline;
}
.hero-title__mobile {
  display: none;
}
/* Frame 411 (description+CTA), vertical gap 24 */
.hero-text-group {
  display: flex;
  flex-direction: column;
  gap: calc(24px * var(--w-scale));
  width: 100%;
}
.hero-description {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: calc(18px * var(--w-scale));
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin: 0;
  max-width: 1200px;
  text-shadow: none;
}
.hero-description__paragraph {
  display: inline;
}
.hero-description__accent {
  color: var(--color-brand-primary);
}
.hero-description__mobile {
  display: none;
}

.hero-title-break,
.hero-desc-break {
  display: block;
}
/* Frame 410 458×84 — VERTICAL gap=10 align primary=CENTER (vertical) */
.hero-cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: calc(458px * var(--w-scale));
  height: auto;
}
.hero-cta-group .btn-stepped--lg {
  width: 100%;
  max-width: calc(458px * var(--w-scale));
  height: calc(53px * var(--w-scale));
  --notch-x: 12px;
  --notch-y: 16px;
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.25));
  transition: filter var(--t-med) var(--ease-linear);
}
.hero-cta-group .btn-stepped--lg .btn-stepped__inner {
  width: 100%;
  height: 100%;
  padding: 0 calc(72px * var(--w-scale)) 0 calc(68px * var(--w-scale));
  transition: background-color var(--t-med) var(--ease-linear);
}
.hero-cta-group .btn-stepped--lg:hover {
  filter: drop-shadow(var(--glow-orange-md));
}
.hero-cta-group .btn-stepped--lg:hover:active {
  filter: none;
  transition-duration: 0s;
}
/* «ПЕРВЫЕ 2 ГЕНЕРАЦИИ В ПОДАРОК» — Montserrat 500, 14/21 #eb5e28 case=ORIGINAL (no transform) */
.cta-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: calc(14px * var(--w-scale));
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--color-brand-primary);
  margin: 0;
  width: 100%;
  max-width: calc(458px * var(--w-scale));
  text-align: left;
  text-transform: none;  /* Figma case=ORIGINAL */
  text-shadow: none;
}

/* Hero media: 16:9 (родное соотношение видео-источника), без max-height —
   так контейнер совпадает с пропорциями видео и object-fit:cover ничего
   не обрезает. Растёт до 1600 на ультра-широких screen'ах. */
.hero-media {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: transparent;
  overflow: hidden;
  position: relative;
  line-height: 0;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Stats grid 1200×231 bg #ccc5b9 (Beige 100%), GRID 3 cells equal width
   Cells separated by 1px beige gap (фон Grid Container виден между ячейками) */
.stats-grid {
  background: var(--color-bg-muted);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  width: 100%;
  max-width: 100%;
  min-height: calc(231px * var(--w-scale));
  padding-bottom: 1px;
  align-items: start;
}
.stat-cell {
  background: var(--color-bg-primary);
  padding: calc(30px * var(--w-scale)) calc(48px * var(--w-scale));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(9px * var(--w-scale));
  min-height: calc(162px * var(--w-scale));
  align-self: start;
}
.stat-cell--featured {
  /* Центральная ячейка "1 минута" — выше из-за длинного caption */
  min-height: calc(186px * var(--w-scale));
}
.stat-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(50px * var(--w-scale));
  line-height: 1.5;
  letter-spacing: 1px;
  color: var(--color-text-primary);
  width: 100%;
  text-align: center;
}
.stat-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: calc(14px * var(--w-scale));
  line-height: 1.2;
  color: var(--color-text-secondary);
  width: 100%;
  text-align: center;
  text-transform: uppercase;
}

/* ============================================================
   FEATURES (Блок 2 · 1440×1011 · pad 64/120 · gap 40 · CENTER)
   ============================================================ */
.features {
  background: var(--color-bg-primary);
}
.features-inner {
  max-width: var(--base-width);
  margin: 0 auto;
  padding: var(--container-pad-vert) var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}
.features-row {
  display: grid;
  width: 100%;
  max-width: 100%;
  align-items: start;
}
.features-row--2 {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.features-row--3 {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 22px;
}

/* Card (Frame 555): bg #fff, radius 40, stroke 2px INSIDE #dcd8d1, padding 32/40, gap 32
   Hover (1:1642) smart-animate 500ms EASE_OUT: bg → #eb5e28, text → #fff */
.feature-card {
  background: var(--color-bg-primary);
  border: 0;
  box-shadow: inset 0 0 0 2px var(--color-border-default);
  border-radius: calc(40px * var(--w-scale));
  padding: calc(32px * var(--w-scale)) calc(40px * var(--w-scale));
  display: flex;
  flex-direction: column;
  gap: calc(32px * var(--w-scale));
  transition: background-color var(--t-med) var(--ease-out),
              color var(--t-med) var(--ease-out),
              height var(--t-med) var(--ease-out),
              min-height var(--t-med) var(--ease-out);
  overflow: hidden;
  will-change: height, min-height, background-color;
}
@media (hover: hover) and (pointer: fine) {
  .feature-card:hover {
    background: var(--color-brand-primary);
  }
  .feature-card:hover .feature-icon {
    background: var(--color-bg-icon);
  }
  .feature-card:hover .feature-title,
  .feature-card:hover .feature-text {
    color: #ffffff;
  }
}

/* Icon container — скрыт по новому Figma макету (430:1511): карточки без иконок */
.feature-icon {
  display: none;
}
.feature-glyph {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.feature-glyph--models {
  width: calc(36px * var(--feature-icon-scale));
  height: calc(18px * var(--feature-icon-scale));
  left: calc(14px * var(--feature-icon-scale));
  top: calc(23px * var(--feature-icon-scale));
  background-image: url("assets/features/icon-models.svg");
}
.feature-glyph--backgrounds {
  width: calc(25px * var(--feature-icon-scale));
  height: calc(25px * var(--feature-icon-scale));
  left: calc(19.5px * var(--feature-icon-scale));
  top: calc(19.5px * var(--feature-icon-scale));
  background-image: url("assets/features/icon-backgrounds.svg");
}
.feature-glyph--product {
  width: calc(30px * var(--feature-icon-scale));
  height: calc(30px * var(--feature-icon-scale));
  left: calc(17px * var(--feature-icon-scale));
  top: calc(17px * var(--feature-icon-scale));
  background-image: url("assets/features/icon-product.svg");
}
.feature-glyph--fashion-vector {
  width: calc(11px * var(--feature-icon-scale));
  height: calc(37px * var(--feature-icon-scale));
  left: calc(26px * var(--feature-icon-scale));
  top: calc(15px * var(--feature-icon-scale));
  background-image: url("assets/features/icon-fashion-vector.svg");
}
.feature-glyph--fashion-group {
  width: calc(16.97px * var(--feature-icon-scale));
  height: calc(47.5px * var(--feature-icon-scale));
  left: calc(21.22px * var(--feature-icon-scale));
  top: calc(5.5px * var(--feature-icon-scale));
  background-image: url("assets/features/icon-fashion-group.svg");
}
.feature-glyph--free {
  width: calc(20px * var(--feature-icon-scale));
  height: calc(25px * var(--feature-icon-scale));
  left: calc(22px * var(--feature-icon-scale));
  top: calc(19.5px * var(--feature-icon-scale));
  background-image: url("assets/features/icon-free.svg");
}

/* Frame 554/553: vertical gap 16 */
.feature-text-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* Title — Halvar Bold 25/35/0 case=ORIGINAL.
   max-width 306px по Figma (430:1511) — заголовок переносится естественно
   без `<br>`, не растягиваясь на всю ширину карточки. */
.feature-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(25px * var(--w-scale));
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--color-text-primary);
  margin: 0;
  max-width: calc(306px * var(--w-scale));
  transition: color var(--t-med) var(--ease-out);
}
.feature-card--models .feature-title {
  max-width: calc(340px * var(--w-scale));
}
.feature-card--backgrounds .feature-title {
  max-width: calc(440px * var(--w-scale));
}

/* Body — Montserrat Regular 18/27/0 case=ORIGINAL */
.feature-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(18px * var(--w-scale));
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--color-text-secondary);
  margin: 0;
  transition: color var(--t-med) var(--ease-out);
}

/* «ПОПРОБОВАТЬ ↗» — появляется только при hover-state карточки (Figma 1:1650)
   Halvar 700 18/20.84/0.36 #fff UPPER + arrow icon ri:arrow-up-line */
.feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: calc(216px * var(--w-scale));
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(15px * var(--w-scale));
  line-height: 1.15;
  letter-spacing: 0.36px;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  opacity: 0;
  max-height: 0;
  margin-top: calc(-16px * var(--w-scale));
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity var(--t-med) var(--ease-out),
              max-height var(--t-med) var(--ease-out),
              margin-top var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out);
}
.feature-cta-arrow {
  font-size: 22px;
  line-height: 1;
}
.feature-card.is-tap-active {
  background: var(--color-brand-primary);
}
.feature-card.is-tap-active .feature-icon {
  background: var(--color-bg-icon);
}
.feature-card.is-tap-active .feature-title,
.feature-card.is-tap-active .feature-text {
  color: #ffffff;
}
.feature-card.is-tap-active .feature-cta {
  opacity: 1;
  max-height: calc(24px * var(--w-scale));
  margin-top: 0;
  pointer-events: auto;
  transform: translateY(0);
}
@media (hover: hover) and (pointer: fine) {
  .feature-card:hover .feature-cta {
    opacity: 1;
    max-height: calc(24px * var(--w-scale));
    margin-top: 0;
    pointer-events: auto;
    transform: translateY(0);
  }
}

/* По новому Figma (430:1511) карточки без иконок — размер определяется
   контентом + padding. Row-grid stretch выровняет высоты в ряду. */

@media (min-width: 1441px) {
  .features-row--2 .feature-card.feature-card--models,
  .features-row--2 .feature-card.feature-card--backgrounds,
  .features-row--3 .feature-card.feature-card--product,
  .features-row--3 .feature-card.feature-card--fashion,
  .features-row--3 .feature-card.feature-card--free {
    min-height: 0;
    height: auto;
  }

  .feature-card--models .feature-title,
  .feature-card--backgrounds .feature-title {
    width: auto;
    max-width: 100%;
  }

  .feature-card--models .feature-title {
    max-width: calc(340px * var(--w-scale));
  }

  .feature-card--backgrounds .feature-title {
    max-width: calc(440px * var(--w-scale));
  }

  .feature-card--product .feature-title,
  .feature-card--fashion .feature-title,
  .feature-card--free .feature-title {
    width: auto;
    max-width: calc(306px * var(--w-scale));
  }
}

/* ============================================================
   BRAND SECTION (Блок 3 · 1440×771 · vertical gap 0 · pad 0/0/64/0)
   Frame 428 — 1440×548, bg #252422, vertical gap 60, padding 100/120
   ============================================================ */
.brand-section {
  --brand-bottom-gap: calc(64px * var(--w-scale));
  width: 100%;
  background: var(--color-bg-primary);
  padding-top: calc(64px * var(--w-scale));
  padding-bottom: var(--brand-bottom-gap);
  position: relative;
}
.brand-content {
  max-width: var(--base-width);
  margin: 0 auto;
  padding: calc(100px * var(--w-scale)) var(--container-pad);
  background: var(--color-surface-inverse);
  display: flex;
  flex-direction: column;
  gap: calc(60px * var(--w-scale));
  position: relative;
}
.brand-slash {
  position: absolute;
  top: 105px;
  left: calc(var(--container-pad) - 26px);
  width: 17.633px;
  height: 39.731px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.brand-slash::before {
  content: '';
  width: 40.563px;
  height: 4.42px;
  background: var(--color-brand-primary);
  transform: rotate(-70.61deg);
  flex: 0 0 auto;
}
.brand-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(36px * var(--w-scale));
  line-height: 1.2;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-text-inverse);
  margin: 0;
  max-width: 100%;
}

/* Body 1200×192 — single text node with paragraph breaks (8 lines × 24 = 192)
   Montserrat 600 20/24 #fff UPPER */
.brand-text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: calc(18px * var(--w-scale));
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-text-inverse);
  max-width: 100%;
  margin: 0;
}
.brand-text p {
  margin: 0 0 calc(24px * var(--w-scale)) 0;
}
.brand-text p:last-child { margin-bottom: 0; }

.marquee {
  --marquee-logo-size: 130px;
  --marquee-gap: 40px;
  --marquee-offset: -2210px; /* 13 × (130px logo + 40px gap), as in Figma Smart Animate */
  --marquee-y: 0px;
  --marquee-bottom-tail: 19px;

  background: var(--color-surface-inverse);
  height: calc(var(--marquee-logo-size) + var(--marquee-bottom-tail));
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-start;
  pointer-events: none;
  touch-action: pan-y;
}
.marquee-track {
  position: relative;
  top: var(--marquee-y);
  display: flex;
  align-items: center;
  gap: var(--marquee-gap);  /* Figma itemSpacing=40 — точно */
  padding: 0 0 0 20px;
  animation: marquee-scroll 10s linear infinite;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  width: max-content;
}
.marquee-img {
  width: var(--marquee-logo-size);
  height: var(--marquee-logo-size);
  flex-shrink: 0;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  /* PNG-лого хранятся белыми на прозрачном фоне (как в Figma) — на тёмном bg видны естественно */
}
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--marquee-offset), 0, 0); }
}

/* ============================================================
   CTA + AUTH (Блок 4 · 1440×739 · pad 64/120/64/127 · CENTER CENTER · gap 10)
   Frame 577 (1193×611) — pad 0/100/0/100, 2 columns 496+496 touching
   ============================================================ */
.cta-block {
  width: 100%;
  background: var(--color-bg-primary);
}
.cta-grid {
  max-width: var(--base-width);
  margin: 0 auto;
  padding: var(--container-pad-vert) var(--container-pad) var(--container-pad-vert) calc(var(--container-pad) + 7px);
  display: flex;
  justify-content: center;
  gap: 0;
}
.cta-grid > * {
  flex: 0 0 calc(496.5px * var(--w-scale));
  width: calc(496.5px * var(--w-scale));
  min-width: 0;
}
/* Frame 577 padding 100 left/right — 6.94vw в Figma */
.cta-grid::before, .cta-grid::after {
  content: '';
  flex: 0 0 calc(100px * var(--w-scale));
}

/* Left orange promo (Frame 439): 496×611 в Figma, fluid в web
   bg #eb5e28, stroke top=2 right=0 bottom=2 left=2 INSIDE #252422 */
.cta-promo {
  background: var(--color-brand-primary);
  border: 0;
  box-shadow:
    inset 2px 0 0 var(--color-text-primary),
    inset 0 2px 0 var(--color-text-primary),
    inset 0 -2px 0 var(--color-text-primary);
  padding: calc(48px * var(--w-scale)) calc(48px * var(--w-scale)) calc(337px * var(--w-scale)) calc(48px * var(--w-scale));
  display: flex;
  flex-direction: column;
  gap: calc(30px * var(--w-scale));
  min-height: calc(611px * var(--w-scale));
}
/* Heading 2 «Попробуй прямо сейчас!» — Halvar 500, 25/37.5/0.5, #fff UPPER */
.cta-promo-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(25px * var(--w-scale));
  line-height: 1.4;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-inverse);
  margin: 0;
}
.cta-title-mobile,
.cta-promo-subtitle {
  display: none;
}
/* Frame 438 «ЗА 1 МИНУТУ» — 180×44, padding 10 all, horizontal gap 10, CENTER CENTER */
.cta-promo-badge {
  display: inline-flex;
  align-items: center;
  gap: calc(10px * var(--w-scale));
  width: calc(180px * var(--w-scale));
  height: calc(44px * var(--w-scale));
  padding: 0;
  position: relative;
  align-self: flex-start;
}
/* Border 43×44, stroke 1px INSIDE #fff — contains lightning icon */
.badge-icon {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(43px * var(--w-scale));
  height: calc(44px * var(--w-scale));
  border: 1px solid #ffffff;
  color: #ffffff;
  flex-shrink: 0;
}
/* «ЗА 1 МИНУТУ» — 111×28, Montserrat 600 14/17, #fff UPPER */
.badge-text {
  position: absolute;
  left: calc(59px * var(--w-scale));
  top: 50%;
  transform: translateY(-50%);
  width: calc(111px * var(--w-scale));
  font-family: var(--font-body);
  font-weight: 600;
  font-size: calc(14px * var(--w-scale));
  line-height: 1.2;
  text-transform: uppercase;
  color: #ffffff;
}

/* Right Auth card (Frame 576): 496×611 в Figma, fluid в web
   stroke top=2 right=2 bottom=2 left=0 INSIDE #252422 (no left border — touches promo) */
.auth-card {
  background: var(--color-bg-primary);
  border: 0;
  box-shadow:
    inset -2px 0 0 var(--color-text-primary),
    inset 0 2px 0 var(--color-text-primary),
    inset 0 -2px 0 var(--color-text-primary);
  padding: calc(48px * var(--w-scale)) calc(48px * var(--w-scale)) calc(45px * var(--w-scale)) calc(48px * var(--w-scale));
  display: flex;
  flex-direction: column;
  gap: calc(48px * var(--w-scale));
  min-height: calc(611px * var(--w-scale));
  position: relative;
}

.auth-main,
.auth-bottom {
  display: flex;
  flex-direction: column;
  width: 100%;
  transition: opacity 350ms var(--ease-linear);
}
.auth-main {
  gap: calc(48px * var(--w-scale));
}
.auth-bottom {
  gap: calc(48px * var(--w-scale));
}

/* Frame 571 (400×366) — vertical gap 48 (tabs + form) */
/* Frame 570 — tab row 400×44, horizontal cross=CENTER */
.auth-tabs {
  display: flex;
  align-items: center;
  width: 100%;
}
/* «ВХОД» Active 125×44, padding 0/32/16/32 — bottom border 4px #eb5e28, text #252422
   «регистрация» Inactive 276×44 — bottom border 2px #dcd8d1, text #eb5e28 */
.auth-tab {
  flex: 1 1 0;
  min-width: 0;
  height: calc(44px * var(--w-scale));
  padding: 0 calc(32px * var(--w-scale)) calc(18px * var(--w-scale)) calc(32px * var(--w-scale));
  font-family: var(--font-body);
  font-weight: 600;
  font-size: calc(18px * var(--w-scale));
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--color-border-default);
  color: var(--color-brand-primary);
  cursor: pointer;
  transition:
    color 350ms var(--ease-linear),
    border-bottom-color 350ms var(--ease-linear),
    border-bottom-width 350ms var(--ease-linear),
    padding-bottom 350ms var(--ease-linear);
}
.auth-tab[data-tab="login"] {
  flex: 0 0 calc(125px * var(--w-scale));
}
.auth-tab.is-active {
  border-bottom-color: var(--color-brand-primary);
  border-bottom-width: 4px;
  padding-bottom: 20px;
  color: var(--color-text-primary);
}

/* Frame 569 (400×274), vertical gap 40 — fields + submit */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: calc(40px * var(--w-scale));
  width: 100%;
}

/* Frame 568 (400×181), vertical gap 32 — 2 inputs */
.auth-fields {
  display: flex;
  flex-direction: column;
  gap: calc(32px * var(--w-scale));
}

/* Container 400×73 (email) / 400×76 (password), vertical gap 8
   Figma 1:1599 hover state: размер 400→404 (slight grow). 350ms LINEAR */
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

/* SmartAnimate label crossfade — login label flows normally (position:relative),
   register label overlays it (position:absolute). Opacity toggles on data-auth-mode. */
.auth-label--fade {
  transition: opacity 350ms var(--ease-linear);
}
.auth-label--fade[data-mode="login"] {
  position: relative;
  opacity: 1;
}
.auth-label--fade[data-mode="register"] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
body[data-auth-mode="register"] .auth-label--fade[data-mode="login"]    { opacity: 0; }
body[data-auth-mode="register"] .auth-label--fade[data-mode="register"] { opacity: 1; }

/* Slot 2 eye icon fades out in register mode (field becomes email) */
body[data-auth-mode="register"] .auth-eye--slot2 {
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms var(--ease-linear);
}

/* Slot 3/4 — register-only password fields, fade in + expand smoothly */
.auth-field--slot3,
.auth-field--slot4 {
  display: block;
  max-height: 0;
  opacity: 0;
  margin-bottom: -32px;
  pointer-events: none;
  overflow: hidden;
  transition:
    max-height 350ms var(--ease-linear),
    opacity 350ms var(--ease-linear),
    margin-bottom 350ms var(--ease-linear);
}
body[data-auth-mode="register"] .auth-field--slot3 {
  max-height: calc(123px * var(--w-scale));
  opacity: 1;
  margin-bottom: 0;
  pointer-events: auto;
}
body[data-auth-mode="register"] .auth-field--slot4 {
  max-height: calc(80px * var(--w-scale));
  opacity: 1;
  margin-bottom: 0;
  pointer-events: auto;
}

/* Frame 429 — label row 400×21, horizontal gap 8 cross=CENTER, primary=SPACE_BETWEEN */
.auth-label-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 21px;
}
/* Label «ЭЛЕКТРОННАЯ ПОЧТА» / «ПАРОЛЬ» — Montserrat 500 14/21 #252422 case=ORIGINAL */
.auth-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: calc(13px * var(--w-scale));
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-primary);
}

/* Input 400×44, padding 10/12/13/12, border-bottom 2px #252422 (Figma: border-b-2 only).
   Hover: border-bottom-color #eb5e28 — 350ms LINEAR (Figma 1:1702 → 1:1599) */
.auth-input {
  width: 100%;
  padding: calc(10px * var(--w-scale)) calc(12px * var(--w-scale)) calc(13px * var(--w-scale)) calc(12px * var(--w-scale));
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--color-text-primary);
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: calc(14px * var(--w-scale));
  line-height: 1.5;
  color: var(--color-text-primary);
  transition: border-bottom-color 350ms var(--ease-linear);
}
.auth-input::placeholder { color: var(--color-text-secondary); }
.auth-field:hover .auth-input,
.auth-input:hover,
.auth-input:focus { outline: none; border-bottom-color: var(--color-brand-primary); }

/* Password input wrap with eye-icon toggle (Figma Component 2 — closed/open eye, 350ms LINEAR) */
.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.auth-input-wrap .auth-input { padding-right: calc(40px * var(--w-scale)); }
/* Eye icon (Component 2) — default #787876 gray, hover #252422 black (Figma 1:1598 → 1:1475, 350ms LINEAR) */
.auth-eye {
  position: absolute;
  right: 0;
  background: transparent;
  border: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color 350ms var(--ease-linear), opacity 350ms var(--ease-linear);
}
.auth-eye:hover { color: var(--color-text-primary); }
.auth-eye svg { width: 22px; height: 14px; }

/* Password requirements — Figma 324:1051, first two states only:
   inactive gray lines (#C2C2C2) and satisfied green lines (#35C95A). */
.password-rules {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  margin-top: calc(5px * var(--w-scale));
}
.password-rules__bars {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(4px * var(--w-scale));
  width: 100%;
  height: calc(8px * var(--w-scale));
  align-items: start;
}
.password-rules__bar {
  display: block;
  height: 2px;
  background: #c2c2c2;
  transition: background-color 350ms var(--ease-linear);
}
.password-rules__label {
  color: var(--color-text-secondary);
  transition: color 350ms var(--ease-linear);
}
.password-rules__bar.is-valid {
  background: #35c95a;
}
.password-rules__label.is-valid {
  color: #35c95a;
}
.password-rules__labels {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(4px * var(--w-scale));
  width: 100%;
  padding: 0 calc(4px * var(--w-scale));
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(10px * var(--w-scale));
  line-height: 1.5;
  color: var(--color-text-secondary);
  text-align: center;
  white-space: nowrap;
}

/* «ЗАБЫЛИ ПАРОЛЬ?» — 104×15, Montserrat 700 10/15 #eb5e28 UPPER, align right
   Hover: drop-shadow 0 0 10px rgba(235,94,40,0.5) */
.auth-forgot {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc(10px * var(--w-scale));
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-brand-primary);
  text-decoration: none;
  transition:
    filter 350ms var(--ease-linear),
    opacity 350ms var(--ease-linear);
}
.auth-forgot:hover { filter: drop-shadow(0 0 10px rgba(235, 94, 40, 0.5)); }

/* Forgot link disappears in register mode — fade not snap */
body[data-auth-mode="register"] .auth-forgot {
  opacity: 0;
  pointer-events: none;
}

/* Submit button «ВОЙТИ» 400×53 — stepped DARK style.
   Figma 1:1704 ON_HOVER → 1:1532 SmartAnimate 350ms LINEAR:
     bg #252422 → #dcd8d1, text #ffffff → #252422 (full color invert) */
.auth-form .btn-stepped {
  width: 100%;
  height: calc(48px * var(--w-scale));
  --notch-x: 12px;
  --notch-y: 16px;
}
.auth-form .btn-stepped .btn-stepped__inner {
  width: 100%;
  height: 100%;
  padding: 0 calc(24px * var(--w-scale));
  font-size: calc(16px * var(--w-scale));
  letter-spacing: 0.36px;
  /* Override the global var(--t-med) 500ms — Figma submit hover is 350ms LINEAR.
     Need both background-color AND color (text) for full invert. */
  transition:
    background-color 350ms var(--ease-linear),
    color 350ms var(--ease-linear);
}

/* Cross-fade «войти» ↔ «зарегистрироваться» on tab switch (350ms LINEAR) */
.auth-submit-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 350ms var(--ease-linear);
}
.auth-submit-label[data-mode="login"]    { opacity: 1; }
.auth-submit-label[data-mode="register"] { opacity: 0; }
body[data-auth-mode="register"] .auth-submit-label[data-mode="login"]    { opacity: 0; }
body[data-auth-mode="register"] .auth-submit-label[data-mode="register"] { opacity: 1; }
.auth-form .btn-stepped .btn-stepped__inner { position: relative; }

/* Inline сообщения для форм (ошибка/успех) */
.auth-message {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: calc(13px * var(--w-scale));
  line-height: 1.4;
  margin-top: calc(12px * var(--w-scale));
  min-height: 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 250ms var(--ease-linear), max-height 250ms var(--ease-linear);
}
.auth-message.is-visible {
  opacity: 1;
  max-height: calc(80px * var(--w-scale));
}
.auth-message.is-error   { color: #d23a1f; }
.auth-message.is-success { color: var(--color-brand-primary); }

.btn-stepped[data-loading="true"] {
  pointer-events: none;
  opacity: 0.7;
}

/* Auth recovery screens (forgot / verify / newpass) — hidden by default */
.auth-screen {
  display: flex;
  flex-direction: column;
  gap: calc(32px * var(--w-scale));
  padding: calc(48px * var(--w-scale)) calc(48px * var(--w-scale)) calc(32px * var(--w-scale));
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms var(--ease-linear);
}
.auth-screen-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(22px * var(--w-scale));
  line-height: 1.2;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-align: center;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--color-brand-primary);
}
.auth-screen-subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(13px * var(--w-scale));
  line-height: 1.5;
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: -16px;
}
.auth-form-alt {
  display: flex;
  flex-direction: column;
  gap: calc(32px * var(--w-scale));
}
.auth-form-alt .btn-stepped {
  width: 100%;
  height: calc(48px * var(--w-scale));
  --notch-x: 12px;
  --notch-y: 16px;
}
.auth-form-alt .btn-stepped .btn-stepped__inner {
  width: 100%;
  height: 100%;
  padding: 0 calc(24px * var(--w-scale));
  font-size: calc(16px * var(--w-scale));
  letter-spacing: 0.36px;
  transition: background-color 350ms var(--ease-linear), color 350ms var(--ease-linear);
}
.auth-back-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(12px * var(--w-scale));
  line-height: 1.2;
  letter-spacing: 0.24px;
  text-transform: uppercase;
  color: var(--color-brand-primary);
  text-decoration: none;
  transition: filter 350ms var(--ease-linear);
}
.auth-back-link:hover { filter: drop-shadow(0 0 10px rgba(235, 94, 40, 0.5)); }
.auth-back-arrow { font-size: calc(15px * var(--w-scale)); }
.auth-resend {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: calc(12px * var(--w-scale));
  line-height: 1.5;
  color: var(--color-text-primary);
  text-align: center;
  text-transform: uppercase;
}
.auth-resend-link {
  color: var(--color-brand-primary);
  font-weight: 700;
  text-decoration: none;
  transition: filter 350ms var(--ease-linear);
}
.auth-resend-link:hover { filter: drop-shadow(0 0 10px rgba(235, 94, 40, 0.5)); }

/* Show correct screen based on auth mode */
body[data-auth-mode="forgot"] .auth-screen--forgot,
body[data-auth-mode="verify"] .auth-screen--verify,
body[data-auth-mode="newpass"] .auth-screen--newpass {
  opacity: 1;
  pointer-events: auto;
}
body[data-auth-mode="forgot"] .auth-main,
body[data-auth-mode="verify"] .auth-main,
body[data-auth-mode="newpass"] .auth-main,
body[data-auth-mode="forgot"] .auth-bottom,
body[data-auth-mode="verify"] .auth-bottom,
body[data-auth-mode="newpass"] .auth-bottom {
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms var(--ease-linear);
}

/* Frame 575 (400×104), vertical gap 48 — divider + social */
/* Divider Frame 431 — 400×17 horizontal SPACE_BETWEEN cross=CENTER:
   line 80×1 + «ИЛИ ЧЕРЕЗ СОЦСЕТИ» + line 80×1 */
.auth-divider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 0 0 calc(80px * var(--w-scale));
  height: 1px;
  background: var(--color-border-default);
}
/* «ИЛИ ЧЕРЕЗ СОЦСЕТИ» — 240×17, Montserrat 600 14/17 #eb5e28 UPPER */
.auth-divider span {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: calc(13px * var(--w-scale));
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-brand-primary);
  white-space: nowrap;
  flex: 1;
  text-align: center;
}

/* Frame 574 — 400×39, horizontal gap 16 cross=CENTER, 2 social buttons */
.auth-social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(16px * var(--w-scale));
}
/* Yandex/Telegram button — 192×39, padding 12/32/12/32, stroke 2px INSIDE #252422
   text Montserrat 700 10/15 #252422 UPPER */
.social-btn {
  width: 100%;
  height: calc(36px * var(--w-scale));
  padding: calc(12px * var(--w-scale)) calc(32px * var(--w-scale));
  background: transparent;
  border: 2px solid var(--color-text-primary);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc(10px * var(--w-scale));
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-text-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 500ms var(--ease-linear);
}
/* Hover state (1:1543) — bg #dcd8d1, stroke same, Smart Animate 500ms LINEAR */
.social-btn:hover {
  background: var(--color-border-default);
}

/* ============================================================
   TARIFFS (Блок 5 · 1440×836 · pad 64/120 · vertical gap 56)
   ============================================================ */
.tariffs {
  width: 100%;
  background: var(--color-bg-primary);
}
.tariffs-inner {
  max-width: var(--base-width);
  margin: 0 auto;
  padding: var(--container-pad-vert) var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: 56px;
}
/* Заголовок + подзаголовок (Figma «Заголовок + подзаголовок», vertical gap 16) */
.tariffs-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Title «тарифные планы» — Halvar 500 40/48/0.8 #252422 UPPER */
.tariffs-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(36px * var(--w-scale));
  line-height: 1.2;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin: 0;
}
/* Подзаголовок — Montserrat Regular 20px, secondary #787876 (ТЗ п.4) */
.tariffs-subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(20px * var(--w-scale));
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 1200px;
}

/* Frame 591 (1200×604, vertical gap 40) — toggle + cards */
.tariffs-frame-591 {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  width: 100%;
}

.tariff-main {
  display: flex;
  flex-direction: column;
  gap: 56px;
  align-items: center;
  width: 100%;
  max-width: 1400px;
  align-self: center;
}
/* Frame 609 toggle row 159×26, horizontal gap 8 */
.tariff-toggle-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* «месяц» / «год» — 55×17, 31×17, Montserrat 600 14/17 #252422 UPPER */
.toggle-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: calc(13px * var(--w-scale));
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-text-primary);
}
/* Switch 57×26, padding 4/10/4/10 vertical
   Inside Frame 474: 37×18 horizontal pad 2/21/2/2, radius 15, stroke 1px INSIDE #eb5e28
   Ellipse 14×14 fill #eb5e28 */
.toggle-switch {
  width: calc(57px * var(--w-scale));
  height: calc(26px * var(--w-scale));
  padding: calc(4px * var(--w-scale)) calc(10px * var(--w-scale));
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
}
.toggle-switch::before {
  content: '';
  position: absolute;
  top: calc(4px * var(--w-scale));
  left: calc(10px * var(--w-scale));
  width: calc(37px * var(--w-scale));
  height: calc(18px * var(--w-scale));
  border: 1px solid var(--color-brand-primary);
  border-radius: 15px;
  background: transparent;
}
.toggle-thumb {
  position: absolute;
  top: calc(6px * var(--w-scale));
  left: calc(12px * var(--w-scale));
  width: calc(14px * var(--w-scale));
  height: calc(14px * var(--w-scale));
  background: var(--color-brand-primary);
  border-radius: 50%;
  transition: transform 500ms var(--ease-out), background-color 500ms var(--ease-out);
}
.toggle-switch[aria-checked="true"]::before {
  border-color: var(--color-brand-primary);
}
.toggle-switch[aria-checked="true"] .toggle-thumb {
  background: var(--color-brand-primary);
  transform: translateX(calc(19px * var(--w-scale)));
}

/* Cards row Frame 502: 1200×422, horizontal gap 0, 5 cards × 240 */
.tariff-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  min-height: calc(422px * var(--w-scale));
  align-items: stretch;
}

/* Card Frame 449/450/452: 240×422, vertical gap 40, padding 40/12/40/12 cross=CENTER
   stroke top=0 right=1 bottom=0 left=0 INSIDE #ccc5b9 (only RIGHT separator) */
.tariff-card {
  display: flex;
  flex-direction: column;
  gap: calc(40px * var(--w-scale));
  padding: calc(40px * var(--w-scale)) calc(12px * var(--w-scale));
  border: none;
  border-right: 1px solid var(--color-bg-muted);
  background: var(--color-bg-primary);
  align-items: center;
  position: relative;
  min-height: calc(422px * var(--w-scale));
  min-width: 0;
  transition: background-color 350ms var(--ease-linear);
}
.tariff-card:last-child { border-right: none; }
/* Note: в Figma карточки тарифов сами не анимируются — только кнопка внутри.
   Не добавляем hover-bg на сами карточки, чтобы не отступать от макета. */

/* Popular card — bg #e9e7e3 */
.tariff-card--popular {
  background: var(--color-bg-subtle);
}
.tariff-card--popular:hover { background: var(--color-bg-subtle); }

/* Popular badge Frame 472: 142×23, padding 6/12, fill #eb5e28
   text «Популярный выбор» Halvar 400 10/11.2/0.2 #fff ORIGINAL */
.tariff-badge {
  position: absolute;
  top: 0;
  right: -1px;
  transform: none;
  background: var(--color-brand-primary);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(10px * var(--w-scale));
  line-height: 1.2;
  letter-spacing: 0.2px;
  padding: calc(6px * var(--w-scale)) calc(12px * var(--w-scale));
  white-space: nowrap;
  min-width: calc(142px * var(--w-scale));
  text-align: center;
}

/* Frame 490: 216×265, vertical gap 24 — flex auto чтобы карточка росла под контент */
.tariff-content {
  display: flex;
  flex-direction: column;
  gap: calc(24px * var(--w-scale));
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
}

/* Frame 488: 216×55 vertical gap 0 — name + meta */
.tariff-head {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
/* Title «Запуск» — Halvar 700 25/35 #252422 ORIGINAL */
.tariff-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(22px * var(--w-scale));
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-primary);
  margin: 0;
}
/* Meta «Подписка на месяц + N токенов» — two Figma text spans */
.tariff-meta {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: calc(11px * var(--w-scale));
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--color-text-primary);
  margin: 0;
  white-space: nowrap;
}
.tariff-meta-main {
  font-size: calc(11px * var(--w-scale));
  line-height: 1.5;
  font-weight: 500;
}
.tariff-meta-tokens {
  font-size: calc(13px * var(--w-scale));
  line-height: 1.5;
  font-weight: 600;
}
/* Агенство accent meta «Мы все сделаем за вас» — Montserrat 700 14/21 #eb5e28 */
.tariff-meta--accent {
  font-weight: 700;
  font-size: calc(13px * var(--w-scale));
  line-height: 1.5;
  color: var(--color-brand-primary);
}

/* Frame 501: 216×186 vertical gap 16 */
.tariff-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

/* Frame 500: 216×75 vertical gap 17 — price + per-photo */
.tariff-price-block {
  display: flex;
  flex-direction: column;
  gap: 17px;
  position: relative;
}
/* Price «890р/мес» — Halvar split: price 25 bold + period 14 beige */
.tariff-price {
  font-family: var(--font-display);
  line-height: 1.4;
  color: var(--color-text-primary);
  margin: 0;
  white-space: nowrap;
}
.tariff-price-main {
  font-weight: 700;
  font-size: calc(24px * var(--w-scale));
  line-height: 1.4;
  letter-spacing: 0.5px;
}
.tariff-price-period {
  font-weight: 400;
  font-size: calc(13px * var(--w-scale));
  line-height: 1.4;
  letter-spacing: 0.28px;
  color: var(--color-bg-muted);
  margin-left: 2px;
}
/* Per-photo — orange price part + black economy suffix */
.tariff-per-photo {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc(12px * var(--w-scale));
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--color-brand-primary);
  margin: 0;
  white-space: nowrap;
}
.tariff-fade-clone {
  position: absolute !important;
  margin: 0 !important;
  pointer-events: none;
  transition: opacity 350ms var(--ease-linear);
  z-index: 2;
}
.tariff-per-prefix {
  font-size: calc(10px * var(--w-scale));
  line-height: 1.5;
  font-weight: 700;
}
.tariff-per-value {
  font-size: calc(12px * var(--w-scale));
  line-height: 1.5;
  font-weight: 700;
}
.tariff-per-ruble {
  font-size: calc(12px * var(--w-scale));
  line-height: 1.5;
  font-weight: 700;
}
.tariff-saving {
  color: var(--color-text-primary);
  font-size: calc(12px * var(--w-scale));
  line-height: 1.5;
  font-weight: 700;
}
/* Description — Montserrat 400 14/19.04 #787876 ORIGINAL */
.tariff-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(13px * var(--w-scale));
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: calc(216px * var(--w-scale));
}
/* Tick list (Агенство) */
.tariff-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tariff-list li {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(12px * var(--w-scale));
  line-height: 1.4;
  color: var(--color-text-primary);
  position: relative;
  padding-left: 19px;
}
.tariff-list li::before {
  content: "✓";
  position: absolute;
  left: 0; top: -1px;
  color: var(--color-text-primary);
  font-size: calc(13px * var(--w-scale));
  line-height: 1;
  font-weight: 700;
}
.tariff-text--agency {
  margin-top: 0;
}

.tariff-card--agency {
  min-height: calc(420px * var(--w-scale));
  gap: calc(23px * var(--w-scale));
}
.tariff-card--agency .tariff-content {
  flex: 1 1 auto;
  gap: calc(16px * var(--w-scale));
}
.tariff-card--agency .tariff-head {
  width: calc(175px * var(--w-scale));
  max-width: 100%;
  align-self: flex-start;
}
.tariff-card--agency .tariff-body {
  width: 100%;
  max-width: calc(216px * var(--w-scale));
  gap: 10px;
}

/* Stepped «выбрать» button: Frame 607 216×37, notch 4×8 */
.tariff-card .btn-stepped--sm {
  --notch-x: 4px;
  --notch-y: 8px;
  width: calc(216px * var(--w-scale));
  height: calc(37px * var(--w-scale));
  padding: 0 8px;
  align-items: flex-start;
  justify-content: flex-start;
}
.tariff-card .btn-stepped--sm .btn-stepped__inner {
  width: calc(200px * var(--w-scale));
  height: calc(37px * var(--w-scale));
  padding: 0 calc(40px * var(--w-scale));
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(16px * var(--w-scale));
  letter-spacing: 0.36px;
  line-height: 1.15;
  transition: background-color 500ms var(--ease-linear);
}
.tariff-card .btn-stepped--sm:hover {
  filter: none;
}

/* Notes ("/ Отличается только объём... / Токены не сгорают...")
   Montserrat 600 15/22.5 UPPER #252422 */
.tariffs-notes {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tariffs-notes p {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: calc(13px * var(--w-scale));
  line-height: 2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin: 0;
}
.tariffs-notes .title-prefix {
  display: inline-block;
  color: var(--color-brand-primary);
  font-size: calc(18px * var(--w-scale));
  line-height: 2;
  font-weight: 600;
  margin-right: 4px;
}

/* ============================================================
   FOOTER (Frame 607 · 1440×275 · pad 64/120 · gap 48 · bg #252422)
   Точная структура из Figma JSON:
     Row 1 (Frame 598): Logo + [TG/IG icons + asterisk] + 4 nav + TG-large
     Row 2 (Frame 605): © Copyright + [legal links + disclaimer + molnia.pro]
   ============================================================ */
.site-footer {
  width: 100%;
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}
.footer-inner {
  max-width: var(--base-width);
  margin: 0 auto;
  padding: var(--container-pad-vert) var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: calc(48px * var(--w-scale));
}

/* Row 1: 1200×57, gap 96 */
.footer-row-top {
  display: flex;
  align-items: center;
  gap: calc(96px * var(--w-scale));
}
.footer-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.footer-logo img {
  width: calc(279px * var(--w-scale));
  height: auto;
  aspect-ratio: 279 / 57;
  object-fit: contain;
}

/* Frame 597: 825×38, gap 16, primary=MAX (push right) */
.footer-row-right {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: calc(16px * var(--w-scale));
  justify-content: flex-end;
}

/* Frame 480: 88×32, gap 10 — 2 white-square icon boxes + asterisk */
.footer-socials-small {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(88px * var(--w-scale));
  flex: 0 0 calc(88px * var(--w-scale));
}
.social-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(32px * var(--w-scale));
  height: calc(32px * var(--w-scale));
  padding: 4px;
  border-radius: 8px;
  background: #ffffff;
  flex-shrink: 0;
  transition: filter var(--t-fast) var(--ease-linear);
}
.social-icon-box:hover { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3)); }
.footer-social-icon {
  display: block;
  position: relative;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.footer-social-icon--telegram {
  width: calc(24px * var(--w-scale));
  height: calc(24px * var(--w-scale));
  background-image: none;
}
.footer-social-icon--telegram::before {
  content: "";
  position: absolute;
  left: calc(0.8px * var(--w-scale));
  top: calc(4.84px * var(--w-scale));
  width: calc(19.55px * var(--w-scale));
  height: calc(16.2px * var(--w-scale));
  background: url("assets/footer/telegram-small.svg") center / 100% 100% no-repeat;
}
.footer-social-icon--instagram {
  width: calc(24px * var(--w-scale));
  height: calc(24px * var(--w-scale));
  background-image: none;
  overflow: hidden;
}
.footer-instagram-outer,
.footer-instagram-inner {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.footer-instagram-outer {
  left: calc(1.5px * var(--w-scale));
  top: calc(1.5px * var(--w-scale));
  width: calc(21px * var(--w-scale));
  height: calc(21px * var(--w-scale));
  background-image: url("assets/footer/instagram-outer.svg");
}
.footer-instagram-inner {
  left: calc(6.75px * var(--w-scale));
  top: calc(5px * var(--w-scale));
  width: calc(12.25px * var(--w-scale));
  height: calc(12.25px * var(--w-scale));
  background-image: url("assets/footer/instagram-inner.svg");
}
.footer-asterisk {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 6.9px;
  line-height: 17.19px;
  color: #ffffff;
  text-transform: uppercase;
  align-self: flex-start;
  padding-top: 2px;
}

/* Frame 596: 751×38, gap 16 — nav + TG-large */
.footer-nav-group {
  display: flex;
  align-items: center;
  gap: calc(16px * var(--w-scale));
  width: calc(751px * var(--w-scale));
  flex: 0 0 calc(751px * var(--w-scale));
}

/* Frame 595: 697×29, horizontal gap 8 — 4 text links */
.footer-nav {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: calc(697px * var(--w-scale));
  flex: 0 0 calc(697px * var(--w-scale));
  height: calc(29px * var(--w-scale));
}
.footer-link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: calc(13px * var(--w-scale));
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-text-inverse);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  height: 29px;
  padding: 6px 0;
  transform: translateY(0);
  transition: none;
  white-space: nowrap;
}
.footer-link:hover {
  transform: translateY(-2px);
}
.footer-link__slash {
  display: inline-block;
  line-height: 17px;
  color: var(--color-brand-primary);
}

/* icon telegram L: 38×38, hover smart-animate 350ms LINEAR */
.tg-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(38px * var(--w-scale));
  height: calc(38px * var(--w-scale));
  border-radius: 40px;
  background: radial-gradient(circle at 50% 50%, #ffffff 0 16.6px, rgba(255, 255, 255, 0) 16.9px);
  flex-shrink: 0;
  transition: filter var(--t-fast) var(--ease-linear);
}
.tg-large img {
  display: block;
  width: calc(38px * var(--w-scale));
  height: calc(38px * var(--w-scale));
}
.tg-large:hover {
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
}

/* Row 2: Frame 605 1200×42, gap 124, primary=MAX cross=MAX */
.footer-row-bottom {
  display: flex;
  align-items: flex-end;
  gap: calc(124px * var(--w-scale));
  justify-content: space-between;
}
.footer-copyright {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc(10px * var(--w-scale));
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--color-text-inverse);
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 246px;
}

/* Frame 604: 830×42, gap 8, align primary=MAX cross=MAX */
.footer-row-right-bottom {
  align-items: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  width: calc(830px * var(--w-scale));
}

/* Frame 603: 629×42, vertical, cross=MAX (right) */
.footer-bottom-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  width: calc(629px * var(--w-scale));
  flex: 0 0 calc(629px * var(--w-scale));
}

/* Frame 602: 428×27, horizontal gap 8 — оферта / политика */
.footer-legal {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(428px * var(--w-scale));
  height: calc(27px * var(--w-scale));
}
.legal-link {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(10px * var(--w-scale));
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--color-brand-primary);
  text-decoration: none;
  transition: text-decoration-color var(--t-fast) var(--ease-linear);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
}
.legal-link:hover { text-decoration-color: currentColor; }
.legal-sep {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(10px * var(--w-scale));
  line-height: 1.5;
  color: var(--color-brand-primary);
  text-transform: uppercase;
  width: 6px;
  flex: 0 0 6px;
  white-space: nowrap;
}

/* Disclaimer * Instagram... */
.footer-disclaimer {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(10px * var(--w-scale));
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--color-border-subtle);
  margin: 0;
  width: 100%;
  text-align: right;
}

/* «/ сайт продакшена MOLNIA.PRO» — продолжение нижней строки disclaimer */
.footer-link-pro {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc(9px * var(--w-scale));
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--color-text-inverse);
  text-decoration: none;
  align-self: flex-end;
  display: block;
  width: 193px;
  height: 15px;
  padding-top: 0;
  text-align: left;
  flex-shrink: 0;
  white-space: nowrap;
}
.footer-link-pro__slash {
  color: var(--color-brand-primary);
}
.footer-link-pro__brand {
  color: var(--color-brand-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* ============================================================
   RESPONSIVE — точная мобильная адаптация по Figma Mobile frame (390×6648)
   Breakpoint: 768px (только телефонный порог)
   Контейнер: 390 width, padding 24 each side → inner 342
   Средний планшетный вариант отключен: desktop применяется с 769px.
   ============================================================ */

@media (min-width: 1281px) {
  .site-header,
  .hero,
  .features,
  .brand-section,
  .cta-block,
  .tariffs,
  .site-footer {
    width: 100vw;
  }

  .header-inner,
  .hero-block,
  .features-inner,
  .brand-content,
  .cta-grid,
  .tariffs-inner,
  .footer-inner {
    max-width: none;
  }

  .tariffs-inner {
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }

  .cta-grid {
    max-width: var(--base-width);
  }
}

@media (min-width: 769px) and (max-width: 1439px) {
  /* Глобальный desktop-scale: 0.7 на 1024 → 1.0 на 1440 (линейно).
     length / length = unitless — обязательное условие для скаляра в calc(). */
  :root {
    --w-scale: clamp(0.7, calc(0.7 + 0.3 * (100vw - 1024px) / 416px), 1);
  }

  /* Layout-specific overrides — структурные safety-nets, размеры везде scaled. */
  .hero-deco {
    left: calc(var(--content-offset) - (22.79px * var(--w-scale)));
  }

  .brand-slash {
    left: calc(var(--container-pad) - 26px);
  }

  .cta-grid {
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }

  .tariffs-inner {
    overflow: hidden;
  }

  .tariff-main {
    max-width: 100%;
  }

  .tariff-card--agency .tariff-head {
    width: 100%;
  }

  .tariff-meta,
  .tariff-per-photo,
  .tariff-price {
    white-space: normal;
  }

  .tariff-text,
  .tariff-card--agency .tariff-body {
    max-width: 100%;
  }

  /* Footer-nav wrap safety — на крайне узких viewports переносим линки. */
  .footer-nav {
    flex-wrap: wrap;
    height: auto;
  }
}

@media (min-width: 769px) and (max-height: 820px) {
  /* На коротких экранах — глобальный height-scale 0.9 + компактные отступы. */
  :root {
    --h-scale: 0.9;
  }

  .header-inner {
    padding-top: clamp(8px, 1.3vh, 12px);
    padding-bottom: clamp(8px, 1.3vh, 12px);
  }

  .hero-block {
    padding-top: clamp(16px, 2.8vh, 24px);
    padding-bottom: clamp(24px, 3.6vh, 32px);
    gap: clamp(28px, 4.5vh, 40px);
  }

  .hero-frame-414,
  .hero-content {
    gap: clamp(18px, 3.5vh, 28px);
  }

  .hero-deco {
    top: clamp(16px, 2.8vh, 24px);
  }
}

/* MOBILE — точно по Figma Mobile (390 wide) */
@media (max-width: 599px) {
  :root {
    --mobile-canvas-max: 480px;
    --base-width: min(var(--mobile-canvas-max), 100vw);
    --container-pad: clamp(20px, 6.15vw, 32px);
    --container-pad-vert: 40px;
    --container-max: calc(var(--base-width) - (var(--container-pad) * 2));
    /* Mobile использует фиксированную мобильную сетку — scale игнорируется. */
    --w-scale: 1;
    --h-scale: 1;
  }

  .site-header,
  .hero,
  .features,
  .brand-section,
  .cta-block,
  .tariffs,
  .site-footer {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .header-inner,
  .hero-block,
  .features-inner,
  .brand-content,
  .cta-grid,
  .tariffs-inner,
  .footer-inner {
    width: 100%;
    max-width: var(--base-width);
    margin-left: auto;
    margin-right: auto;
  }

  /* === Mobile typography (smaller scales) === */
  .hero-title { font-size: 20px; line-height: 24px; letter-spacing: 0.4px; }
  /* H2 brand/tariffs (Frame 538 title): 20px на мобиле (vs 40 десктоп) */
  .brand-title, .tariffs-title { font-size: 20px; line-height: 24px; letter-spacing: 0.4px; }
  .tariffs-subtitle { font-size: 13px; line-height: 19.5px; }
  .hero-description { font-size: 13px; line-height: 19.5px; font-weight: 500; }
  .hero-title-break,
  .hero-desc-break { display: none; }
  .brand-text p, .brand-text { font-size: 13px; line-height: 19.5px; }
  /* Feature card title: 20px вместо 25 */
  .feature-title { font-size: 18px; line-height: 25.2px; }
  .feature-text { font-size: 14px; line-height: 21px; font-weight: 500; }

  /* === Header Mobile (Frame 507) — 390×107, pad 54/24/24/24 === */
  .site-header { padding: 0; }
  .header-inner {
    padding: clamp(28px, 8vw, 40px) var(--container-pad) 20px;
    min-height: auto;
    gap: 16px;
    flex-wrap: nowrap;
  }
  .logo-img { width: 148px; height: auto; }
  .header-actions {
    width: auto;
    height: auto;
    gap: 8px;
    justify-content: flex-end;
  }
  .nav-tariffs,
  .header-actions .btn-stepped--orange { display: none; }
  .header-actions .btn-outline {
    width: 91px;
    height: 29px;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 18.53px;
    letter-spacing: 0.32px;
    color: #ffffff;
    background: var(--color-text-primary);
    border-color: var(--color-text-primary);
  }

  /* === Hero Mobile (Frame 516 — 390×1038, pad 40/24) === */
  .hero { box-shadow: none; }
  .hero-block { padding: 28px var(--container-pad) 32px; gap: 24px; overflow: hidden; }
  /* Слэш inline через ::before на title (вместо absolute hero-deco) */
  .hero-deco { display: none; }
  .hero-title::before {
    content: '/';
    color: var(--color-brand-primary);
    font-weight: 500;
    margin-right: 6px;
    display: inline-block;
    transform: skewX(-15deg);
  }
  .hero-frame-414 { gap: 20px; }
  .hero-content { display: contents; }
  .hero-title {
    order: 1;
    text-shadow: none;
    overflow-wrap: anywhere;
    max-width: var(--container-max);
  }
  .hero-title__desktop { display: none; }
  .hero-title__mobile { display: inline; }
  .hero-text-group { order: 2; gap: 20px; }
  .hero-cta-group {
    width: min(100%, clamp(293px, 86%, 340px));
    max-width: 100%;
    height: auto;
    gap: 8px;
  }
  .hero-cta-group .btn-stepped {
    width: 100%;
    max-width: 100%;
    height: auto;
    --notch-x: 0;
    --notch-y: 0;
    filter: none;
  }
  .hero-cta-group .btn-stepped .btn-stepped__inner {
    width: 100%;
    min-height: 33px;
    padding: 9px 16px;
    font-size: 16px;
    line-height: 18.53px;
    letter-spacing: 0.32px;
    clip-path: none;
  }
  .hero-description {
    display: block;
    text-shadow: none;
    overflow-wrap: anywhere;
    max-width: var(--container-max);
  }
  .hero-description__desktop { display: none; }
  .hero-description__mobile { display: block; }
  .hero-description__paragraph { display: inline; }
  .hero-description__paragraph + .hero-description__paragraph::before { content: ' '; }
  .cta-caption {
    width: 100%;
    font-size: 11px;
    line-height: 16.5px;
    padding-left: 0;
    text-align: left;
    text-shadow: none;
  }
  .hero-deco::before {
    display: block;
    width: 18.713px;
    height: 2px;
  }
  .hero-media {
    order: 3;
    width: calc(100% + (var(--container-pad) * 2));
    margin-left: calc(var(--container-pad) * -1);
    aspect-ratio: 16 / 9;
    background: transparent;
    max-width: none;
  }
  .hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 0;
    background: transparent;
    height: auto;
    padding-bottom: 0;
    max-width: var(--container-max);
  }
  .stat-cell {
    min-height: auto;
    padding: 30px 0;
    align-items: center;
    text-align: center;
    border-bottom: 1px solid var(--color-bg-muted);
  }
  .stat-cell:last-child { border-bottom: none; padding-bottom: 0; }
  .stat-cell--featured { min-height: auto; }
  .stat-num {
    font-size: 40px;
    line-height: 48px;
    letter-spacing: 0.8px;
    font-weight: 500;
  }
  .stat-label {
    font-size: 14px;
    line-height: 17.5px;
    max-width: min(100%, clamp(318px, 93%, 360px));
  }

  /* === Cards Mobile (Frame 427 — 390×1521, pad 40/24, gap 16) === */
  .features-inner { padding: 40px var(--container-pad); gap: 16px; align-items: stretch; }
  .features-row--2, .features-row--3 {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: var(--container-max);
  }
  .feature-card {
    width: 100%;
    max-width: var(--container-max);
    padding: 20px;
    gap: 24px;
    border-radius: 40px;
    box-shadow: inset 0 0 0 2px var(--color-bg-muted);
    min-height: 0;
    cursor: pointer;
    touch-action: manipulation;
  }
  .feature-text-group,
  .feature-title,
  .feature-text {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .feature-icon {
    --feature-icon-scale: 1;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
  }
  .feature-title br { display: none; }
  .feature-card:hover {
    background: var(--color-bg-primary);
  }
  .feature-card:hover .feature-title {
    color: var(--color-text-primary);
  }
  .feature-card:hover .feature-text {
    color: var(--color-text-secondary);
  }
  .feature-card:hover .feature-icon {
    background: var(--color-bg-icon);
  }
  .feature-card.is-tap-active {
    background: var(--color-brand-primary);
  }
  .feature-card.is-tap-active .feature-icon {
    background: var(--color-bg-icon);
  }
  .feature-card.is-tap-active .feature-title,
  .feature-card.is-tap-active .feature-text {
    color: #ffffff;
  }
  .feature-card.is-tap-active .feature-cta {
    opacity: 1;
    max-height: 24px;
    margin-top: 0;
    pointer-events: auto;
    transform: translateY(0);
  }
  .feature-glyph--models {
    width: 36px;
    height: 18px;
    left: 6px;
    top: 15px;
  }
  .feature-glyph--backgrounds {
    width: 25px;
    height: 25px;
    left: 11.5px;
    top: 11.5px;
  }
  .feature-glyph--product {
    width: 25px;
    height: 20px;
    left: 11.5px;
    top: 14px;
  }
  .feature-glyph--fashion-vector {
    width: 25px;
    height: 25px;
    left: 11.5px;
    top: 11.5px;
    background-image: url("assets/features/icon-fashion-mobile.svg");
  }
  .feature-glyph--fashion-group {
    display: none;
  }
  .feature-glyph--free {
    width: 20px;
    height: 25px;
    left: 14px;
    top: 11.5px;
  }
  /* Порядок на мобайле = порядок Figma/десктопа:
     Предметная (product) → Инфографика (fashion) → Генерация (free) */
  .feature-card--product { order: 1; }
  .feature-card--fashion { order: 2; }
  .feature-card--free { order: 3; }

  /* === Brand Mobile (Frame 519 — 390×660) === */
  .brand-section {
    --brand-bottom-gap: 40px;
    padding-top: 22px;
  }
  .brand-content {
    padding: 40px var(--container-pad);
    gap: 24px;
    overflow: hidden;
  }
  /* Слэш inline через ::before на title (вместо absolute brand-slash) */
  .brand-slash { display: none; }
  .brand-title::before {
    content: '/';
    color: var(--color-brand-primary);
    font-weight: 500;
    margin-right: 6px;
    display: inline-block;
    transform: skewX(-15deg);
  }
  .brand-text p { margin-bottom: 12px; }
  .brand-text {
    font-weight: 500;
  }
  .brand-title br { display: none; }
  .marquee {
    --marquee-logo-size: 80px;
    --marquee-gap: 40px;
    --marquee-offset: -1560px; /* 13 × (80px logo + 40px gap), mobile Figma */
    --marquee-y: 0px;
    --marquee-bottom-tail: 0px;
  }
  .marquee-track { gap: var(--marquee-gap); }

  /* === CTA + Auth Mobile (Frame 534 — 390×765, unified Registration Card 342×756) === */
  .cta-block { padding: 0; height: auto; overflow: visible; }
  .cta-grid {
    padding: 4px var(--container-pad) 5px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .cta-grid::before, .cta-grid::after { display: none; }
  .cta-grid > * { flex: 0 0 auto; width: 100%; }
  .cta-promo {
    width: 100%;
    height: 264px;
    min-height: 264px;
    box-shadow: none;
    padding: 32px;
    border-right: 1px solid var(--color-text-primary);
    border-left: 1px solid var(--color-text-primary);
    border-top: 1px solid var(--color-text-primary);
    border-bottom: none;
    gap: 0;
    overflow: hidden;
  }
  .cta-title-desktop { display: none; }
  .cta-title-mobile { display: block; }
  .cta-promo-title {
    font-size: 40px;
    line-height: 48px;
    letter-spacing: 0.8px;
    margin: 0 0 16px 0;
  }
  .cta-promo-subtitle {
    display: block;
    margin: 0;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    line-height: 19.5px;
    text-transform: uppercase;
    color: var(--color-text-inverse);
  }
  .cta-promo-badge { display: none; }
  .auth-card {
    width: 100%;
    height: 492px;
    min-height: 492px;
    box-shadow: none;
    padding: 32px;
    border: 1px solid var(--color-text-primary);
    border-top: none;
    gap: 0;
    overflow: hidden;
  }
  .auth-main,
  .auth-bottom {
    gap: 0;
  }
  body[data-auth-mode="register"] .cta-promo {
    height: 264px;
    min-height: 264px;
  }
  body[data-auth-mode="register"] .cta-block {
    height: auto;
    overflow: visible;
  }
  body[data-auth-mode="register"] .auth-card {
    height: auto;
    min-height: 492px;
    overflow: visible;
  }
  .auth-tabs {
    gap: 0;
    height: 43px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--color-bg-subtle);
  }
  .auth-tab {
    flex: 1 1 0;
    height: 43px;
    padding: 0 0 17px 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    border-bottom: 0;
  }
  .auth-tab.is-active {
    border-bottom-width: 2px;
  }
  .auth-form { gap: 16px; }
  .auth-fields { gap: 16px; }
  .auth-field,
  .auth-label-row {
    width: 100%;
    min-width: 0;
  }
  .auth-label-row { height: auto; min-height: 21px; }
  .auth-forgot {
    flex: 0 0 auto;
  }
  .auth-input {
    padding: 11px 12px 10px 12px;
  }
  .auth-input-wrap .auth-input { padding-right: 32px; }
  .auth-form .btn-stepped {
    width: 100%;
    height: 50px;
    margin-top: 16px;
    --notch-x: 0;
    --notch-y: 0;
  }
  .auth-form .btn-stepped .btn-stepped__inner {
    width: 100%;
    height: 100%;
    padding: 0 16px;
    font-size: 16px;
    line-height: 18.53px;
    letter-spacing: 0.32px;
    clip-path: none;
  }
  .auth-divider {
    position: relative;
    height: 17px;
    margin-top: 24px;
    display: flex;
    justify-content: center;
  }
  .auth-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 8px;
    height: 1px;
    background: var(--color-bg-subtle);
  }
  .auth-divider::after { display: none; }
  .auth-divider span {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: auto;
    padding: 0 8px;
    background: var(--color-bg-primary);
    font-weight: 500;
    font-size: 11px;
    line-height: 16.5px;
  }
  .auth-social {
    margin-top: 12px;
    gap: 16px;
  }
  .social-btn {
    width: auto;
    height: 42px;
    padding: 9px 20px;
    border-width: 1px;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
  }
  .auth-divider::before, .auth-divider::after { flex: 0 0 40px; }
  .auth-social { grid-template-columns: 1fr 1fr; gap: 8px; }
  .auth-divider span { font-size: 11px; line-height: 16.5px; }
  .social-btn {
    width: 100%;
    height: 42px;
    padding: 8px 16px;
    font-size: 14px;
    line-height: 21px;
    font-weight: 500;
    border-width: 1px;
    text-transform: none;
  }

  /* === Tariffs Mobile (Frame 539 — 390×2209, pad 40/24, gap 32) === */
  .tariffs-inner {
    padding: 40px var(--container-pad);
    gap: 32px;
    overflow: hidden;
    position: relative;
  }
  .tariffs-inner::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 40px;
    width: 18.713px;
    height: 2px;
    background: var(--color-brand-primary);
    transform: rotate(-70.61deg);
    transform-origin: center;
  }
  .tariffs-frame-591 { gap: 8px; }
  .tariff-main { gap: 0; align-items: stretch; }
  .tariff-toggle-row {
    align-self: center;
    gap: 20px;
    margin-bottom: 0;
  }
  .toggle-label {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.28px;
  }
  .toggle-switch {
    width: 37px;
    height: 18px;
    padding: 0;
  }
  .toggle-switch::before {
    top: 0;
    left: 0;
    width: 37px;
    height: 18px;
  }
  .toggle-thumb {
    top: 2px;
    left: 2px;
  }
  .toggle-switch[aria-checked="true"] .toggle-thumb {
    transform: translateX(19px);
  }
  .tariff-row {
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
    max-width: var(--container-max);
    height: auto;
    align-items: stretch;
    margin-top: 0;
  }
  .tariff-card {
    height: auto;
    padding: 40px 24px;
    gap: 24px;
    border: 0;
    border-bottom: 1px solid var(--color-bg-muted);
    border-radius: 0;
    align-items: center;
  }
  .tariff-card:last-child { border: 0; }
  .tariff-card--popular {
    background: var(--color-bg-subtle);
  }
  .tariff-content {
    width: 100%;
    max-width: none;
    height: auto;
    flex: 0 0 auto;
    gap: 24px;
  }
  .tariff-name,
  .tariff-price-main {
    font-size: 25px;
    line-height: 35px;
  }
  .tariff-text {
    font-size: 14px;
    line-height: 19.04px;
    max-width: min(100%, clamp(294px, 86%, 360px));
    overflow-wrap: anywhere;
  }
  .tariff-card--agency {
    height: 410px;
    gap: 24px;
  }
  .tariff-card--agency .tariff-content {
    height: auto;
    flex-basis: auto;
    gap: 24px;
  }
  .tariff-card--agency .tariff-body {
    max-width: none;
    gap: 24px;
  }
  .tariff-list li {
    font-size: 12px;
    line-height: 13.44px;
    padding-left: 19px;
  }
  .tariff-list li::before {
    font-size: 14px;
    line-height: 14px;
  }
  .tariff-card .btn-stepped--sm {
    width: 100%;
    max-width: min(100%, clamp(294px, 86%, 360px));
    height: 50px;
    padding: 12px 8px 0;
    align-self: center;
    --notch-x: 8px;
    --notch-y: 12px;
  }
  .tariff-card .btn-stepped--sm .btn-stepped__inner {
    width: 100%;
    height: 38px;
    padding: 0 40px;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0.32px;
  }
  .tariffs-notes {
    gap: 8px;
  }
  .tariffs-notes p {
    font-size: 13px;
    line-height: 19.5px;
  }
  .tariffs-notes .title-prefix {
    font-size: 16px;
    line-height: 24px;
    margin-right: 4px;
  }

  /* === Footer Mobile (Frame 531 — 390×314, pad 40/24, gap 16) === */
  .footer-inner {
    padding: 40px var(--container-pad);
    gap: 16px;
  }
  .footer-row-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .footer-logo img { width: 142px; height: auto; }
  .footer-row-right {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
  }
  .footer-socials-small {
    width: auto;
    flex: 0 0 auto;
    gap: 10px;
    align-items: center;
  }
  .social-icon-box {
    width: 28px;
    height: 28px;
    padding: 4px;
    border-radius: 6px;
    background: #ffffff;
  }
  .footer-social-icon--telegram,
  .footer-social-icon--instagram {
    width: 20px;
    height: 20px;
  }
  .footer-social-icon--telegram::before {
    left: 1px;
    top: 1px;
    width: 18px;
    height: 18px;
    background-size: contain;
  }
  .footer-instagram-outer {
    left: 1px;
    top: 1px;
    width: 18px;
    height: 18px;
  }
  .footer-instagram-inner {
    left: 4.5px;
    top: 3.5px;
    width: 11px;
    height: 11px;
  }
  .footer-asterisk {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 9px;
    line-height: 1.4;
    padding-top: 0;
    align-self: flex-start;
  }
  .footer-nav-group {
    width: 100%;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: center;
  }
  .footer-nav {
    display: flex;
    flex-wrap: wrap;
    width: auto;
    flex: 1 1 auto;
    height: auto;
    gap: 8px 16px;
  }
  .footer-link {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    line-height: 1.4;
    height: auto;
    padding: 0;
    white-space: nowrap;
    transform: none;
    color: var(--color-text-inverse);
  }
  .footer-link:hover {
    transform: translateY(-2px);
  }
  .footer-link__slash {
    color: var(--color-brand-primary);
  }
  .footer-nav .footer-link:nth-child(4) .footer-link__slash {
    display: none;
  }
  .tg-large { width: 32px; height: 32px; background: none; }
  .tg-large img { width: 32px; height: 32px; }

  .footer-row-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .footer-row-right-bottom {
    width: 100%;
    flex: 0 1 auto;
    align-items: flex-start;
  }
  .footer-bottom-col {
    width: 100%;
    flex: 0 1 auto;
    align-items: flex-start;
    gap: 0;
  }
  .footer-copyright {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 11px;
    line-height: 1.5;
    min-width: 0;
    width: 100%;
  }
  .footer-legal {
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    gap: 8px;
  }
  .legal-link,
  .legal-sep,
  .footer-disclaimer {
    font-family: var(--font-body);
    font-size: 10px;
    line-height: 1.5;
  }
  .legal-sep {
    width: auto;
    flex: 0 0 auto;
  }
  .footer-disclaimer {
    width: 100%;
    text-align: left;
  }
  .footer-link-pro {
    width: auto;
    height: auto;
    padding-top: 0;
    text-align: left;
    align-self: flex-start;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 10px;
    line-height: 1.5;
  }
  .footer-link-pro__slash {
    font-weight: 700;
  }
}

/* ============================================================
   TABLET — iPad portrait (768×1024) и аналогичные планшеты 600-1023.
   Промежуточный layout: ширина контента шире чем mobile (480),
   но уже чем desktop. 2-3 колонки для карточек, footer в 2 ряда.
   ============================================================ */
@media (min-width: 600px) and (max-width: 1023px) {
  :root {
    --base-width: min(900px, 100vw);
    --container-pad: clamp(24px, 4vw, 48px);
    --container-pad-vert: 56px;
    --container-max: calc(var(--base-width) - (var(--container-pad) * 2));
    --w-scale: 1;
    --h-scale: 1;
  }

  /* === Container width override (1281+ has this rule) === */
  .site-header,
  .hero,
  .features,
  .brand-section,
  .cta-block,
  .tariffs,
  .site-footer {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }
  .header-inner,
  .hero-block,
  .features-inner,
  .brand-content,
  .cta-grid,
  .tariffs-inner,
  .footer-inner {
    width: 100%;
    max-width: var(--base-width);
    margin-left: auto;
    margin-right: auto;
  }

  /* === Header === */
  .site-header { padding: 0; }
  .header-inner { padding: 16px var(--container-pad); min-height: auto; gap: 16px; }
  .logo-img { width: 180px; height: auto; aspect-ratio: 359 / 69.324; }
  /* На планшете показываем только ВОЙТИ (как на мобиле) — экономия места */
  .nav-tariffs,
  .header-actions .btn-stepped--orange { display: none; }
  .header-actions { width: auto; height: auto; gap: 12px; justify-content: flex-end; }
  .header-actions .btn-outline { width: auto; height: 40px; padding: 8px 20px; font-size: 14px; }

  /* === Hero === */
  .hero-block { padding: 32px var(--container-pad); gap: 40px; max-width: var(--base-width); }
  .hero-frame-414 { gap: 28px; max-width: 100%; }
  .hero-content { gap: 28px; max-width: 100%; }
  .hero-title { font-size: 32px; line-height: 1.2; }
  .hero-title__desktop { display: none; }
  .hero-title__mobile { display: inline; }
  .hero-description { font-size: 16px; line-height: 1.5; }
  .hero-description__desktop { display: none; }
  .hero-description__mobile { display: inline; }
  /* Слэш inline перед title (вместо абсолютной позиции) */
  .hero-deco { display: none; }
  .hero-title::before {
    content: '/';
    color: var(--color-brand-primary);
    font-weight: 500;
    margin-right: 8px;
    display: inline-block;
    transform: skewX(-15deg);
  }
  .hero-media {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    height: auto;
    background: transparent;
  }
  .hero-video { width: 100%; height: 100%; object-fit: cover; }
  .hero-cta-group, .hero-cta-group .btn-stepped--lg, .cta-caption { width: 100%; max-width: 360px; }
  .hero-cta-group .btn-stepped--lg { height: 48px; }
  .hero-cta-group .btn-stepped--lg .btn-stepped__inner { padding: 0 32px; font-size: 16px; }

  /* === Stats — 3 колонки === */
  .stats-grid {
    grid-template-columns: 1fr 1fr 1fr;
    min-height: auto;
    background: var(--color-bg-muted);
    gap: 1px;
    padding-bottom: 1px;
  }
  .stat-cell {
    padding: 24px 16px;
    min-height: auto;
    align-items: center;
    text-align: center;
    border-bottom: none;
  }
  .stat-cell--featured { min-height: auto; }
  .stat-num { font-size: 32px; line-height: 1.3; }
  .stat-label { font-size: 12px; max-width: 100%; line-height: 1.3; }

  /* === Features — 2 колонки === */
  .features-inner { padding: 56px var(--container-pad); gap: 16px; align-items: stretch; }
  .features-row--2, .features-row--3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 100%;
  }
  .feature-card {
    width: 100%;
    max-width: 100%;
    padding: 24px;
    gap: 20px;
    min-height: 280px;
    border-radius: 32px;
    box-shadow: inset 0 0 0 2px var(--color-border-default);
  }
  .feature-title { font-size: 20px; line-height: 1.3; }
  .feature-text { font-size: 15px; line-height: 1.5; }
  .feature-icon { width: 56px; height: 56px; flex: 0 0 56px; }
  .feature-cta { width: auto; font-size: 14px; max-height: 24px; opacity: 1; margin-top: 0; pointer-events: auto; transform: none; }

  /* === Brand === */
  .brand-section { padding-top: 56px; }
  .brand-content {
    max-width: var(--base-width);
    padding: 64px var(--container-pad);
    gap: 40px;
  }
  .brand-title { font-size: 28px; line-height: 1.2; }
  .brand-text { font-size: 15px; line-height: 1.5; }
  /* Слэш inline перед title */
  .brand-slash { display: none; }
  .brand-title::before {
    content: '/';
    color: var(--color-brand-primary);
    font-weight: 500;
    margin-right: 8px;
    display: inline-block;
    transform: skewX(-15deg);
  }

  /* === CTA + Auth — стек на планшете === */
  .cta-grid {
    padding: 56px var(--container-pad);
    flex-direction: column;
    gap: 0;
    max-width: var(--base-width);
  }
  .cta-grid::before, .cta-grid::after { display: none; }
  .cta-grid > * { flex: 1 1 auto; width: 100%; max-width: 100%; }
  .cta-promo { padding: 32px; min-height: auto; gap: 24px; }
  .auth-card { padding: 32px; min-height: auto; gap: 32px; box-shadow: inset 2px 0 0 var(--color-text-primary), inset -2px 0 0 var(--color-text-primary), inset 0 -2px 0 var(--color-text-primary); }

  /* === Tariffs — 2 колонки === */
  .tariffs-inner { padding: 56px var(--container-pad); gap: 32px; max-width: var(--base-width); }
  .tariffs-title { font-size: 28px; line-height: 1.2; }
  .tariffs-subtitle { font-size: 16px; line-height: 1.5; }
  .tariff-main { gap: 32px; max-width: 100%; }
  .tariff-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: auto;
    min-height: auto;
    gap: 16px;
  }
  .tariff-card {
    height: auto;
    min-height: 380px;
    padding: 32px 20px;
    border: none;
    border-right: none;
    border-radius: 0;
  }
  .tariff-card:last-child { border: none; }
  .tariff-card--agency { min-height: 380px; }
  .tariff-name { font-size: 20px; line-height: 1.3; }
  .tariff-price-main { font-size: 22px; line-height: 1.4; }
  .tariff-card .btn-stepped--sm { width: 100%; height: 40px; }
  .tariff-card .btn-stepped--sm .btn-stepped__inner { width: 100%; height: 100%; font-size: 14px; padding: 0 24px; }

  /* === Footer ===
     Структура на планшете (column stack как mobile, но крупнее):
     - Logo + socials в одну строку (justify-between)
     - Nav links строка (wrap)
     - Copyright строка
     - Legal+disclaimer строка */
  .site-footer { padding: 0; }
  .footer-inner { padding: 40px var(--container-pad); gap: 24px; max-width: var(--base-width); }
  .footer-row-top {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .footer-logo img { width: 200px; height: auto; aspect-ratio: 279 / 57; }
  .footer-row-right {
    flex-direction: row;
    flex: 0 1 auto;
    width: 100%;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  .footer-socials-small { gap: 10px; width: auto; flex: 0 0 auto; order: 0; }
  .social-icon-box { width: 32px; height: 32px; padding: 5px; border-radius: 6px; }
  .footer-social-icon--telegram, .footer-social-icon--instagram { width: 22px; height: 22px; }
  .tg-large { width: 36px; height: 36px; flex-shrink: 0; order: 2; margin-left: auto; }
  .tg-large img { width: 36px; height: 36px; }
  .footer-nav-group {
    width: 100%;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 12px 20px;
    justify-content: flex-start;
    align-items: center;
    order: 1;
  }
  .footer-nav {
    display: flex;
    flex-direction: row;
    gap: 12px 20px;
    flex-wrap: wrap;
    width: auto;
    height: auto;
    flex: 1 1 auto;
  }
  .footer-link { font-size: 13px; line-height: 1.3; height: auto; padding: 4px 0; }
  .footer-row-bottom {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
  }
  .footer-row-right-bottom { width: 100%; flex: 0 1 auto; align-items: flex-start; }
  .footer-bottom-col { width: 100%; flex: 0 1 auto; align-items: flex-start; }
  .footer-copyright { font-size: 11px; line-height: 1.5; min-width: 0; flex: 0 1 auto; width: 100%; }
  .footer-legal { width: 100%; gap: 8px; flex-wrap: wrap; }
  .legal-link, .legal-sep, .footer-disclaimer { font-size: 10px; line-height: 1.4; }
  .footer-disclaimer { width: 100%; text-align: left; }
  .footer-link-pro { font-size: 10px; line-height: 1.5; align-self: flex-start; }
}

/* Узкая мобилка ≤ 380px — ещё ужимаем */
@media (max-width: 380px) {
  .hero-title { font-size: 18px; line-height: 22px; }
  .brand-title, .tariffs-title { font-size: 18px; }
  .stat-num { font-size: 32px; }
  .cta-promo-title { font-size: 32px; line-height: 38px; }
}