/* =========================================================
   TextileData — designers landing
   Палитра: нейтральная, в логике apple.com
   Акцент: петроль #046788 — фирменный цвет из логотипа
   Заголовки: TikTok Sans (широкая геометрическая антиква-гротеск)
   Тёплый терракотовый вариант сохранён в git-теге v1-warm
   ========================================================= */

:root{
  /* — Ink & surfaces (нейтральные, по образцу apple.com) — */
  --ink:            #1D1D1F;
  --ink-80:         #424245;
  --ink-55:         #6E6E73;
  --ink-40:         #86868B;

  --canvas:         #FFFFFF;
  --parchment:      #F5F5F7;
  --pearl:          #FAFAFC;
  --hairline:       #D2D2D7;
  --divider-soft:   #E8E8ED;

  --dark-1:         #1D1D1F;
  --dark-2:         #232326;
  --dark-3:         #161618;
  --on-dark:        #FFFFFF;
  --on-dark-muted:  #B8B8BD;

  /* — Акцент: петроль из логотипа — */
  --accent:         #046788;
  --accent-press:   #03536E;
  --accent-soft:    #E7F0F4;
  --accent-on-dark: #4FB6D6;

  /* — Золото логотипа. Используется точечно, чтобы не греть палитру — */
  --gold:           #CAB44B;

  /* — Type — */
  --font-display: "TikTok Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* — Shape — */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 9999px;

  --shadow-product: 0 30px 60px rgba(0,0,0,.16);

  --wrap: 1280px;
  --gut: clamp(20px, 4vw, 64px);
  --sec: clamp(72px, 9vw, 140px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

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

/* отступ под липкую шапку высотой 66 px */
/* отступ под липкую шапку: две строки, 58 + 65 px, плюс воздух */
html{ scroll-behavior:smooth; scroll-padding-top:132px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.5;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

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

/* Заголовки — широкий дисплейный гротеск */
h1,h2,h3,h4,.display,.quote__word,.bignum{
  margin:0;
  font-family:var(--font-display);
  font-weight:600;
  font-stretch:100%;
  letter-spacing:-.02em;
  line-height:1.05;
}
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

/* ---------- Typography scale ---------- */
.eyebrow{
  font-family:var(--font-body);
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:22px;
}
.eyebrow--light{ color:var(--accent-on-dark); }

.h2{ font-size:clamp(29px,4.2vw,56px); line-height:1.05; letter-spacing:-.025em; }
.h2--light{ color:var(--on-dark); }

.display{
  font-size:clamp(30px,7.6vw,108px);
  line-height:.95;
  letter-spacing:-.03em;
  font-weight:700;
}

.lead{
  font-family:var(--font-body);
  font-size:clamp(18px,2vw,25px);
  font-weight:300;
  line-height:1.45;
  letter-spacing:-.018em;
  color:var(--ink-80);
}
.lead--narrow{ max-width:64ch; }
.lead--light{ color:var(--on-dark-muted); }

.p{ color:var(--ink-80); line-height:1.6; }
.p--light{ color:var(--on-dark-muted); }

.link{ color:var(--accent); font-size:15px; font-weight:500; border-bottom:1px solid transparent; transition:border-color .2s; }
.link:hover{ border-color:currentColor; }
.link--light{ color:var(--accent-on-dark); }
/* тот же вид для кнопки: она открывает модалку, а не ведёт по адресу */
button.link{
  padding:0; background:none; border:0; border-bottom:1px solid transparent;
  font-family:var(--font-body); text-align:left; cursor:pointer;
}
/* ссылка внутри мелкого текста (согласие в форме, примечание к шкале) — кеглем текста */
.check .link, .tiers__note .link{ font-size:inherit; border-bottom-color:currentColor; }
.link:focus-visible{ outline:2px solid currentColor; outline-offset:3px; border-radius:2px; }

.tag{
  display:inline-block; font-family:var(--font-body);
  font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px;
}
.section--dark .tag{ color:var(--accent-on-dark); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body);
  padding:14px 28px; border-radius:var(--r-pill);
  font-size:16px; font-weight:500; letter-spacing:-.01em;
  border:1px solid transparent; cursor:pointer;
  transition:transform .18s var(--ease), background-color .2s, color .2s, border-color .2s;
}
.btn:active{ transform:scale(.96); }
.btn--primary{ background:var(--accent); color:#fff; }
.btn--primary:hover{ background:var(--accent-press); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--hairline); }
.btn--ghost:hover{ border-color:var(--ink); }
/* тёмная кнопка для действий действующих партнёров («Узнать статус вознаграждения») */
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:#000; }
/* вторичная кнопка поверх фотографии */
.btn--light{
  background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.42);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.btn--light:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn--sm{ padding:10px 20px; font-size:14px; }
.btn--wide{ width:100%; padding:17px 28px; font-size:17px; }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:80;
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background-color .3s;
}
.nav.is-stuck{ border-color:var(--hairline); }
/* Первая строка: логотип слева, кнопка справа.
   Высота 58 px — на 8 px ниже прежней однострочной шапки, чтобы две
   строки вместе не съедали больше экрана, чем это оправдано. */
.nav__inner{
  max-width:var(--wrap); margin-inline:auto; padding:0 var(--gut);
  height:58px; display:flex; align-items:center; justify-content:space-between;
  gap:clamp(16px,3vw,44px);
}
.nav__logo img{ width:170px; }

/* Звонок в строке с логотипом. Крупный, но негромкий: обычное начертание
   и тёмно-серый вместо акцента — рядом только логотип, конкурировать не
   с чем, а единственный акцентный элемент шапки — кнопка ниже. */
.nav__call{
  flex:none; padding:0 0 3px; background:none; border:0; cursor:pointer;
  font-family:var(--font-body); font-size:16px; font-weight:300;
  letter-spacing:-.01em; line-height:1.2; color:var(--ink-80);
  white-space:nowrap;
  border-bottom:1px solid var(--hairline);
  transition:color .2s, border-color .2s;
}
.nav__call:hover{ color:var(--ink); border-bottom-color:var(--ink); }
.nav__call:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:2px; }

/* Вторая строка: пункты слева, кнопка справа.
   Волосяная линия сверху отделяет её от строки с логотипом, а
   padding-bottom даёт кнопке отбивку от кадра, который идёт следом. */
.nav__bar{
  max-width:var(--wrap); margin-inline:auto; padding:0 var(--gut) 18px;
  min-height:50px; display:flex; align-items:center; justify-content:space-between;
  gap:clamp(24px,3vw,48px);
  border-top:1px solid var(--divider-soft);
}
.nav__links{ display:flex; gap:clamp(14px,2vw,28px); }
/* Кнопка в шапке не переносится: «Получить номер TD» в две строки
   растягивает всю строку меню. Если перестанет помещаться — раньше
   срабатывает бургер, см. медиазапрос ниже. */
.nav__cta{ white-space:nowrap; }
.nav__links a{
  font-size:14px; color:var(--ink-80); letter-spacing:-.01em;
  /* Без nowrap пункты ломаются по словам, когда ширины впритык:
     получалось «Почему / мы» и «Как / заказать». */
  white-space:nowrap;
  padding:6px 0; border-bottom:1px solid transparent; transition:color .2s, border-color .2s;
}
.nav__links a:hover{ color:var(--ink); border-color:var(--accent); }
.nav__burger{
  display:none; width:44px; height:44px; margin-left:auto; background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px; align-items:center;
}
.nav__burger span{ width:20px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease), opacity .2s; }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }
.nav__tray{ display:none; }

/* ---------- Плавающая кнопка регистрации (мобильная вёрстка) ----------
   Двойник кнопки «Стать партнёром» из первого экрана: тот же цвет, форма
   и текст. Выезжает снизу, когда та скрылась, и уезжает обратно.
   Поднимается над cookie-плашкой через --lift (см. float-cta.js). */
.float-cta{
  position:fixed; left:0; right:0; z-index:70;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px) + var(--lift, 0px));
  display:none; justify-content:center; padding:0 var(--gut);
  pointer-events:none;
}
.float-cta__btn{
  box-shadow:0 12px 28px rgba(4,103,136,.30), 0 2px 8px rgba(0,0,0,.10);
  opacity:0; transform:translateY(calc(100% + 32px)); pointer-events:none;
  transition:opacity .35s var(--ease), transform .45s var(--ease), background-color .2s;
}
.float-cta.is-on .float-cta__btn{ opacity:1; transform:none; pointer-events:auto; }
.float-cta.is-on .float-cta__btn:active{ transform:scale(.96); }

/* ---------- Hero ----------
   Кадр во всю ширину окна, заголовок и кнопки лежат поверх него.
   Вариант с текстом над картинкой сохранён в git-теге v5-hero-text-above. */
.hero{ padding-top:0; padding-bottom:clamp(48px,6vw,80px); }

.hero__stage{ position:relative; width:100%; }
.hero__stage::after{           /* шторка под текст */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(14,14,16,.9) 0%, rgba(14,14,16,.74) 32%,
                            rgba(14,14,16,.34) 60%, rgba(14,14,16,.06) 86%),
    linear-gradient(0deg, rgba(14,14,16,.4) 0%, rgba(14,14,16,0) 44%);
}
.hero__overlay{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; }

.hero__inner{ text-align:left; }
.hero__title{
  font-size:clamp(30px,4.9vw,70px);
  line-height:1.02; letter-spacing:-.032em; font-weight:700;
  color:#fff; margin-bottom:20px; max-width:19ch;
  text-wrap:balance;
}
.hero__lead{ max-width:44ch; font-size:clamp(16px,1.45vw,20px); color:rgba(255,255,255,.84); }
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; }

.hero__shot{
  margin:0; width:100%; position:relative; overflow:hidden; background:#141416;
}
.hero__shot img{
  width:100%; height:100%; display:block;
  aspect-ratio:16/8.2; object-fit:cover; object-position:center 56%;
}
/* фолбэк, если hero-3d.jpg отсутствует */
.hero__shot.is-fallback{
  aspect-ratio:16/8.2;
  background:radial-gradient(120% 90% at 50% 0%, #FBFBFD 0%, #EFEFF2 55%, #E3E3E8 100%);
}
.hero__shot.is-fallback::after{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'%3E%3Cdefs%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8 0.45' numOctaves='4' seed='5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.44 0 0 0 0 0.47 0 0 0 0 0.5 0 0 0 0 1'/%3E%3C/filter%3E%3ClinearGradient id='sh' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.24'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='.18'/%3E%3C/linearGradient%3E%3CradialGradient id='fs' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='.3'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cpattern id='p' width='200' height='200' patternUnits='userSpaceOnUse'%3E%3Crect width='200' height='200' fill='%236E747A'/%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.8'/%3E%3C/pattern%3E%3C/defs%3E%3Cellipse cx='300' cy='352' rx='250' ry='26' fill='url(%23fs)'/%3E%3Cg fill='url(%23p)'%3E%3Crect x='72' y='96' width='456' height='152' rx='26'/%3E%3Crect x='58' y='212' width='484' height='86' rx='20'/%3E%3Crect x='40' y='150' width='76' height='160' rx='30'/%3E%3Crect x='484' y='150' width='76' height='160' rx='30'/%3E%3C/g%3E%3Cg fill='url(%23sh)'%3E%3Crect x='72' y='96' width='456' height='152' rx='26'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center 62%; background-size:52% auto;
}

/* ---------- Stats ---------- */
.stats{
  margin-top:clamp(40px,5vw,72px);
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--hairline);
}
.stats li{ padding:28px 24px 8px 0; }
.stats li + li{ border-left:1px solid var(--hairline); padding-left:24px; }
.stats b{
  display:block; font-family:var(--font-display); font-stretch:100%;
  font-size:clamp(26px,3vw,40px); font-weight:700; letter-spacing:-.03em; line-height:1; margin-bottom:10px;
}
.stats span{ display:block; font-size:14px; color:var(--ink-55); line-height:1.4; max-width:24ch; }

/* ---------- Sections ---------- */
.section{ padding-block:var(--sec); }
.section--tight{ padding-block:clamp(60px,7vw,110px); }
.section--parchment{ background:var(--parchment); }
.section--dark{ background:var(--dark-1); color:var(--on-dark); }

/* Тёмная секция с фоновым фото. Меняйте картинку в --bg-image.
   Фото само по себе почти чёрное (средняя яркость 0.035) со светлой складкой
   по диагонали, поэтому вуаль неравномерная: плотная слева под текстом
   и почти прозрачная справа, где падает свет. */
.section--bg{
  position:relative; isolation:isolate;
  --bg-image:url("../img/partner-bg.jpg");
  --gx:58%; --gy:46%;
}
/* нижний слой — оригинал фотографии без изменений */
.section--bg::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--bg-image); background-size:cover; background-position:center;
}

/* Насколько раскрыт «фонарик»: 0 — вуаль целиком, 1 — под курсором дырка */
@property --spot{ syntax:"<number>"; inherits:false; initial-value:0; }

/* верхний слой — тёмная вуаль, из которой маска вырезает мягкое круглое окно.
   Там, где вуали нет, видно оригинал кадра. */
.section--bg::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg,
    rgba(12,12,14,.93) 0%,
    rgba(12,12,14,.82) 30%,
    rgba(12,12,14,.52) 58%,
    rgba(12,12,14,.3)  82%,
    rgba(12,12,14,.42) 100%);
  --spot:0;
  --hole:min(34vw, 360px);
  -webkit-mask-image:radial-gradient(var(--hole) var(--hole) at var(--gx) var(--gy),
    rgba(0,0,0,calc(1 - var(--spot) * .88)) 0%,
    rgba(0,0,0,calc(1 - var(--spot) * .62)) 38%,
    rgba(0,0,0,calc(1 - var(--spot) * .24)) 68%,
    #000 100%);
          mask-image:radial-gradient(var(--hole) var(--hole) at var(--gx) var(--gy),
    rgba(0,0,0,calc(1 - var(--spot) * .88)) 0%,
    rgba(0,0,0,calc(1 - var(--spot) * .62)) 38%,
    rgba(0,0,0,calc(1 - var(--spot) * .24)) 68%,
    #000 100%);
  transition:--spot .45s var(--ease);
}
.section--bg.is-lit::after{ --spot:1; }
.section--bg > .wrap{ position:relative; z-index:3; }

/* Светлая секция с фоновым фото.
   Кадр показываем полностью, а вуаль делаем неравномерной: плотная слева,
   где лежит тёмный текст, и почти прозрачная справа — там стоит белая
   карточка, и картинке есть где читаться. */
.section--bg-light{ position:relative; --bg-image:url("../img/render.jpg"); }
.section--bg-light::before{
  content:""; position:absolute; inset:0;
  background-image:var(--bg-image); background-size:cover; background-position:center 62%;
  opacity:1;
}
.section--bg-light::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(95deg,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.84) 34%,
    rgba(255,255,255,.5)  60%,
    rgba(255,255,255,.22) 82%,
    rgba(255,255,255,.26) 100%);
}
.section--bg-light > *{ position:relative; z-index:1; }

.grid{ display:grid; gap:clamp(16px,2vw,28px); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

/* ---------- Why ---------- */
.why{ margin-top:clamp(40px,5vw,72px); }
.why__card{
  background:var(--canvas); border-radius:var(--r-lg);
  padding:clamp(26px,3vw,40px); border:1px solid var(--hairline);
  display:flex; flex-direction:column; gap:14px;
}
.why__num{ font-size:13px; font-weight:600; letter-spacing:.1em; color:var(--accent); }
.why__card h3{ font-size:clamp(21px,2.1vw,28px); letter-spacing:-.022em; }
.why__card p{ color:var(--ink-55); font-size:16px; line-height:1.6; }

/* ---------- Split / support ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,80px); align-items:start; }
.support{ border-top:1px solid var(--hairline); }
.support li{ padding:24px 0; border-bottom:1px solid var(--hairline); }
.support h3{ font-size:19px; letter-spacing:-.018em; margin-bottom:6px; }
.support p{ font-size:15px; color:var(--ink-55); }

/* Две колонки: слева человек, справа текст со списком.
   Жест менеджера направлен вправо — прямо в список. */
/* секция белая: выше «Почему мы» на парчменте, иначе два блока слились бы */
.support-grid{
  display:grid; grid-template-columns:.82fr 1.18fr;
  gap:clamp(28px,4.5vw,72px); align-items:center;
}
.support-grid__shot{
  margin:0; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg,#EDEDF0,#E2E2E7);
}
.support-grid__shot img{ width:100%; height:auto; display:block; }
.support-grid__body .h2{ margin-bottom:clamp(24px,3vw,40px); }

/* =========================================================
   Карусель тканей
   ========================================================= */
.carousel{ position:relative; }
.carousel__viewport{ overflow:hidden; border-radius:var(--r-md); }
.carousel__track{ display:flex; transition:transform .62s var(--ease); will-change:transform; }
.slide{
  flex:0 0 100%; margin:0; position:relative;
  aspect-ratio:3/2; background:var(--tone,#7C8288);
}
/* Фото ткани. Замена — файл в assets/img/gallery/ с тем же именем. */
.slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
/* процедурный шум — только для слайдов без фото */
.slide:has(img)::before{ display:none; }
.slide::before{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.5' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)' opacity='.3'/%3E%3C/svg%3E");
  background-size:220px 220px; mix-blend-mode:overlay;
}
.slide::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(0,0,0,.04) 44%,rgba(0,0,0,.46) 100%);
}
.slide figcaption{
  position:absolute; left:14px; bottom:14px; z-index:2;
  font-size:12.5px; font-weight:500; letter-spacing:.02em; color:#fff;
  background:rgba(0,0,0,.34); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);
  padding:6px 13px; border-radius:var(--r-pill);
}
.carousel__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.82); backdrop-filter:blur(10px);
  opacity:0; transition:opacity .3s, background-color .2s, transform .2s var(--ease);
  z-index:3;
}
.carousel:hover .carousel__nav,
.carousel:focus-within .carousel__nav{ opacity:1; }
.carousel__nav:hover{ background:#fff; }
.carousel__nav:active{ transform:translateY(-50%) scale(.92); }
.carousel__nav::before{
  content:""; position:absolute; inset:0; margin:auto;
  width:9px; height:9px; border-left:1.7px solid var(--ink); border-bottom:1.7px solid var(--ink);
}
.carousel__nav--prev{ left:12px; }
.carousel__nav--prev::before{ transform:translateX(2px) rotate(45deg); }
.carousel__nav--next{ right:12px; }
.carousel__nav--next::before{ transform:translateX(-2px) rotate(-135deg); }
.carousel__nav[disabled]{ opacity:0 !important; pointer-events:none; }

.carousel__dots{ display:flex; gap:6px; justify-content:center; margin-top:14px; flex-wrap:wrap; }
.carousel__dots button{
  width:22px; height:3px; border:0; padding:0; cursor:pointer; border-radius:2px;
  background:rgba(255,255,255,.24); transition:background-color .3s, width .3s var(--ease);
}
.carousel__dots button.is-active{ background:var(--accent-on-dark); width:34px; }

/* ---------- Collections ---------- */
.feat{
  margin-top:clamp(40px,5vw,72px);
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,3.5vw,56px);
  align-items:center;
  background:var(--dark-2); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg); padding:clamp(20px,2.4vw,32px);
}
.feat + .feat{ margin-top:clamp(16px,2vw,28px); }
.feat--flip{ grid-template-columns:.85fr 1.15fr; }
.feat--flip .feat__body{ order:-1; }
.feat__title{ font-size:clamp(32px,4.4vw,60px); letter-spacing:-.03em; margin-bottom:16px; }
.feat__lead{ color:var(--on-dark-muted); font-size:16.5px; line-height:1.6; max-width:46ch; }

.props{ display:grid; gap:16px; margin-top:26px; }
.props li{ padding-left:20px; border-left:2px solid var(--accent-on-dark); }
.props b{ display:block; font-size:15px; font-weight:600; letter-spacing:-.01em; margin-bottom:3px; }
.props span{ display:block; font-size:14px; line-height:1.55; color:var(--on-dark-muted); }

.coll__note{
  margin-top:clamp(28px,3vw,44px); max-width:78ch;
  display:flex; flex-direction:column; align-items:flex-start; gap:22px;
}
.coll__note p{ font-size:15px; line-height:1.65; color:var(--on-dark-muted); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.chips li{
  font-size:13px; color:var(--on-dark-muted);
  border:1px solid rgba(255,255,255,.18); border-radius:var(--r-pill); padding:6px 14px;
}

.coll{ margin-top:clamp(16px,2vw,28px); }
.coll__card{
  background:var(--dark-2); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg); padding:clamp(18px,1.8vw,22px);
  display:flex; flex-direction:column;
}
.coll__body{ padding:22px 8px 6px; }
.coll__card h3{ font-size:clamp(21px,2.1vw,28px); letter-spacing:-.022em; margin-bottom:12px; }
.coll__card p{ color:var(--on-dark-muted); font-size:15px; line-height:1.6; }

/* =========================================================
   Материалы и инструменты
   ========================================================= */
.tools{ margin-top:clamp(40px,5vw,72px); }
/* Обёртка отвечает за появление при скролле, карточка — за состояние наведения */
.tool-wrap{ display:flex; }
.tool-wrap > .tool{ flex:1; }
.tool{
  position:relative; display:block;
  background:var(--canvas); border:1px solid var(--hairline); border-radius:var(--r-xl);
  padding:clamp(24px,2.4vw,34px);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.tool:hover{ transform:translateY(-6px); box-shadow:0 28px 54px rgba(0,0,0,.14); border-color:var(--divider-soft); }
/* Информационная карточка без ссылки: без подъёма и подсветки при наведении */
.tool--static:hover{ transform:none; box-shadow:none; border-color:var(--hairline); }
.tool--static:hover .tool__idx{ color:var(--ink-40); }
.tool--static:hover .tool__chip{ background:var(--parchment); color:var(--ink); box-shadow:none; }

.tool__inner{ display:flex; flex-direction:column; gap:14px; height:100%; }

.tool__idx{
  position:absolute; top:clamp(20px,2vw,28px); right:clamp(20px,2vw,28px);
  font-size:11.5px; font-weight:600; letter-spacing:.14em; color:var(--ink-40);
  transition:color .4s;
}
.tool:hover .tool__idx{ color:var(--accent); }

.tool__chip{
  width:56px; height:56px; border-radius:16px; margin-bottom:10px;
  background:var(--parchment); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease);
}
.tool__chip svg{
  width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.3;
  stroke-linecap:round; stroke-linejoin:round;
}
.tool:hover .tool__chip{ background:var(--ink); color:#fff; box-shadow:0 14px 28px rgba(0,0,0,.22); }

.tool h3{ font-size:clamp(19px,1.7vw,23px); letter-spacing:-.022em; }
.tool p{ font-size:15px; font-weight:300; color:var(--ink-55); line-height:1.6; }

.tool__more{
  margin-top:auto; padding-top:20px;
  display:inline-flex; align-items:center; gap:11px;
  font-size:11.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink);
}
.tool__more em{ position:relative; font-style:normal; }
.tool__more em::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.tool:hover .tool__more em::after{ transform:scaleX(1); }
.tool__more i{
  position:relative; width:16px; height:12px; flex:none;
  animation:nudgeX 1.6s ease-in-out infinite;
}
.tool__more i::before{
  content:""; position:absolute; top:50%; left:0; width:14px; height:1.5px;
  background:currentColor; transform:translateY(-50%);
}
.tool__more i::after{
  content:""; position:absolute; top:50%; right:1px; width:6px; height:6px;
  border-top:1.5px solid currentColor; border-right:1.5px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}
@keyframes nudgeX{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(5px); } }
/* карточка текстур ведёт вниз, к разделу «Одна ткань — пять карт» */
.tool--link .tool__more i{ animation-name:nudgeY; }
@keyframes nudgeY{
  0%,100%{ transform:rotate(90deg) translateX(0); }
  50%    { transform:rotate(90deg) translateX(5px); }
}

.display + .lead{ margin-top:clamp(24px,3vw,40px); }

/* ---------- PBR ---------- */
.pbr__stage{
  margin-top:clamp(44px,5vw,80px);
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,3vw,48px); align-items:start;
}
.pbr__render{ position:sticky; top:96px; }
.pbr__renderInner{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%, #303034 0%, #161618 100%);
  padding:clamp(18px,3vw,40px);
}
.sofa{ width:100%; height:auto; display:block; }
.pbr__badge{
  position:absolute; left:clamp(18px,3vw,40px); bottom:clamp(18px,3vw,32px);
  background:rgba(255,255,255,.1); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);
  padding:8px 16px; border-radius:var(--r-pill);
  font-size:13px; letter-spacing:.04em; color:#fff;
}
.pbr__hint{ margin-top:14px; font-size:13px; color:var(--on-dark-muted); opacity:.7; }

.pbr__maps{ display:flex; flex-direction:column; gap:10px; }
.map{
  width:100%; display:grid; grid-template-columns:64px 1fr auto; gap:18px; align-items:center;
  background:transparent; border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md); padding:14px; text-align:left; cursor:pointer;
  transition:background-color .25s, border-color .25s, transform .2s var(--ease);
}
.map:hover{ background:rgba(255,255,255,.05); }
.map.is-active{ background:rgba(79,182,214,.1); border-color:var(--accent-on-dark); }
.map__thumb{ width:64px; height:64px; border-radius:var(--r-sm); overflow:hidden; display:block; }
.map__thumb svg{ width:100%; height:100%; }
.map__txt b{ display:block; font-size:16px; font-weight:600; letter-spacing:-.015em; margin-bottom:4px; }
.map__txt i{ display:block; font-style:normal; font-size:13.5px; line-height:1.45; color:var(--on-dark-muted); }
.map__idx{ font-size:12px; color:rgba(255,255,255,.35); letter-spacing:.08em; align-self:start; }

.benefits{
  margin-top:clamp(48px,6vw,88px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,28px);
  border-top:1px solid rgba(255,255,255,.14); padding-top:36px;
}
.benefit b{
  display:block; font-family:var(--font-display); font-stretch:100%;
  font-size:clamp(24px,2.6vw,34px); font-weight:700; letter-spacing:-.03em;
  margin-bottom:10px; color:var(--accent-on-dark);
}
.benefit span{ font-size:14.5px; color:var(--on-dark-muted); line-height:1.55; }

/* ---------- Forms ---------- */
.formblock{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,88px); align-items:start; }
.formblock__intro .h2{ margin-bottom:22px; }
.formblock__intro .p{ max-width:52ch; }

/* =========================================================
   Заявка на образцы — та же схема, что и блок сопровождения:
   слева текст с формой, справа фото менеджера.
   ========================================================= */
/* Две строки: заголовок занимает только левую колонку, а форма и фото
   стоят во второй строке — так их верхние края лежат на одной линии. */
.order-grid{
  display:grid; grid-template-columns:1.18fr .82fr;
  column-gap:clamp(28px,4.5vw,72px);
  row-gap:clamp(26px,3vw,38px);
  align-items:start;
}
.order-grid__head{ grid-column:1; grid-row:1; }
.order-grid__form{ grid-column:1; grid-row:2; }
.order-grid__shot{ grid-column:2; grid-row:2; }

.order-grid__head .h2{ margin-bottom:20px; }
.order-grid__head .p{ max-width:48ch; }

/* Фото менеджера. Замена: assets/img/manager2.jpg */
.order-grid__shot{ margin:0; }
.order-grid__shot img{
  width:100%; height:auto; display:block;
  border-radius:var(--r-lg); background:var(--canvas);
}
.order-grid__shot figcaption{
  margin-top:14px; font-size:13.5px; line-height:1.5; color:var(--ink-55); max-width:34ch;
}

.ticks{ margin-top:26px; display:flex; flex-direction:column; gap:12px; }
.ticks li{ position:relative; padding-left:28px; font-size:16px; color:var(--ink-80); }
.ticks li::before{
  content:""; position:absolute; left:0; top:8px; width:14px; height:8px;
  border-left:1.6px solid var(--accent); border-bottom:1.6px solid var(--accent);
  transform:rotate(-45deg);
}
.ticks--light li{ color:var(--on-dark-muted); }
.ticks--light li::before{ border-color:var(--accent-on-dark); }

.form{
  background:var(--canvas); border:1px solid var(--hairline);
  border-radius:var(--r-xl); padding:clamp(24px,3vw,40px);
  display:flex; flex-direction:column; gap:16px;
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field > span{ font-size:13px; font-weight:500; color:var(--ink-55); letter-spacing:0; }
.field > span em{ font-style:normal; color:var(--accent); }
.field input,.field select,.field textarea{
  font:inherit; font-size:16px; color:var(--ink);
  background:var(--pearl); border:1px solid var(--hairline); border-radius:var(--r-md);
  padding:13px 15px; width:100%; transition:border-color .2s, background-color .2s;
}
.field textarea{ resize:vertical; }
/* подсказка светлее введённого текста, чтобы поле не казалось уже заполненным */
.field input::placeholder,.field textarea::placeholder{ color:#AEAEB2; opacity:1; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--accent); background:var(--canvas);
}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{ border-color:#C0392B; }

.check{ display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:var(--ink-55); line-height:1.5; cursor:pointer; }
.check input{ margin-top:2px; width:17px; height:17px; accent-color:var(--accent); flex:none; }
.check.is-invalid span{ color:#C0392B; }

.radios{ border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.radios legend{ font-size:13px; font-weight:500; color:var(--ink-55); padding:0; margin-bottom:4px; }
.radios label{
  display:flex; gap:11px; align-items:center; font-size:15px; cursor:pointer;
  border:1px solid var(--hairline); border-radius:var(--r-md); padding:12px 15px; background:var(--pearl);
  transition:border-color .2s, background-color .2s;
}
.radios label:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); }
.radios input{ accent-color:var(--accent); width:16px; height:16px; }

.form__note{ font-size:12.5px; color:var(--ink-40); line-height:1.5; }

/* Форма внутри модалки: собственная рамка и фон не нужны */
.form--flat{ background:transparent; border:0; padding:0; }

/* Вложенная группа полей — подтверждение деятельности, реквизиты */
.subform{
  border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:clamp(18px,2vw,24px); margin:4px 0 0;
  display:flex; flex-direction:column; gap:14px;
  background:var(--pearl);
}
.subform legend{
  padding:0 8px; margin-left:-8px;
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent);
}
.subform__hint{ font-size:13px; line-height:1.5; color:var(--ink-55); }
.subform--payout{ border-color:var(--accent-soft); background:var(--accent-soft); }
.subform--payout .subform__hint{ color:var(--ink-80); }
.subform[hidden]{ display:none; }

/* ---------- Короткая заявка партнёра (08.10.2026) ----------
   Группы «телефон или e-mail» и «ссылка или файл»: подсказка и текст
   ошибки под группой. Проверка — validatePartner() в main.js. */
.form__group{ display:flex; flex-direction:column; gap:8px; }
.form__hint{ font-size:12.5px; color:var(--ink-55); line-height:1.4; }
.form__error{ font-size:13px; font-weight:500; color:#C0392B; line-height:1.45; }
.form__error[hidden]{ display:none; }
.form__error--send{ text-align:center; }
.form__group.is-invalid .field input{ border-color:#C0392B; }

/* Поле-ловушка для ботов: убрано за край, но остаётся в DOM */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Телефон: окно заявки компактнее, чтобы кнопка отправки была близко.
   Поля по-прежнему в один столбец (.form__row схлопывается при 680 px). */
@media (max-width:680px){
  #dlgPartner .modal__body{ padding:24px 18px 20px; }
  #dlgPartner .partner__ask > .eyebrow{ display:none; }
  #dlgPartner .modal__title{ font-size:23px; margin:0 48px 8px 0; }
  /* на экране «Спасибо» заголовок ниже иконки и с крестиком не пересекается */
  #dlgPartner .partner__done .modal__title{ margin-right:0; }
  #dlgPartner .modal__sub{ font-size:14px; line-height:1.5; margin-bottom:18px; }
  #dlgPartner .form{ gap:12px; }
  #dlgPartner .form__row{ gap:12px; }
  #dlgPartner .field{ gap:5px; }
  #dlgPartner .field input{ padding:11px 13px; }
  #dlgPartner .subform{ padding:14px; gap:10px; }
}

/* Экран «Спасибо» вместо формы */
.partner__done{ text-align:center; padding-top:8px; }
.partner__done .status__icon{ margin-inline:auto; }
.partner__done .btn{ margin-top:clamp(22px,2.6vw,30px); }
/* два абзаца: главное обещание и пояснение про шаг 2 — по центру, с небольшим зазором */
.partner__done .modal__sub{ margin-inline:auto; margin-bottom:10px; }
.partner__done .modal__sub + .modal__sub{ font-size:14px; margin-bottom:0; }

/* Необязательная часть анкеты, свёрнутая по умолчанию */
.more summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:500; color:var(--accent);
}
.more summary::-webkit-details-marker{ display:none; }
.more summary::after{
  content:""; width:7px; height:7px; margin-top:-3px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); transition:transform .25s var(--ease);
}
.more[open] summary::after{ transform:rotate(-135deg); margin-top:3px; }
.more summary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
.more > .field, .more > .form__row{ margin-top:14px; }

.field__note{ font-size:12px; color:var(--ink-40); line-height:1.4; }
/* пустая подсказка не должна занимать место и добавлять отступ */
.field__note:empty{ display:none; }
.field__note.is-file{ color:var(--accent); font-weight:500; }
.field__note.is-error{ color:#C0392B; font-weight:500; }

/* Файловое поле: нативный контрол приводим к виду остальных инпутов */
.field input[type="file"]{
  padding:11px 14px; font-size:14px; cursor:pointer;
  color:var(--ink-55);
}
.field input[type="file"]::file-selector-button{
  font:inherit; font-size:13px; font-weight:500;
  margin-right:12px; padding:7px 14px;
  border:1px solid var(--hairline); border-radius:var(--r-pill);
  background:var(--canvas); color:var(--ink); cursor:pointer;
  transition:border-color .2s, background-color .2s;
}
.field input[type="file"]::file-selector-button:hover{
  border-color:var(--accent); color:var(--accent);
}

/* =========================================================
   Карточка-призыв на месте вынесенной формы
   ========================================================= */
.cta-card{
  background:var(--canvas); border:1px solid var(--hairline);
  border-radius:var(--r-xl); padding:clamp(26px,3vw,40px);
  display:flex; flex-direction:column; gap:18px;
}
.cta-card__label{
  font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
}
.cta-card__list{ display:flex; flex-direction:column; gap:12px; }
.cta-card__list li{
  position:relative; padding-left:28px; font-size:15.5px; line-height:1.55; color:var(--ink-80);
}
.cta-card__list li::before{
  content:""; position:absolute; left:0; top:7px; width:14px; height:8px;
  border-left:1.6px solid var(--accent); border-bottom:1.6px solid var(--accent);
  transform:rotate(-45deg);
}
.cta-card__note{ font-size:12.5px; color:var(--ink-40); line-height:1.5; }

/* вариант на тёмной секции с фоновым фото */
.cta-card--dark{
  background:rgba(20,20,23,.58); border-color:rgba(255,255,255,.14); color:var(--on-dark);
  backdrop-filter:blur(20px) saturate(130%);
  -webkit-backdrop-filter:blur(20px) saturate(130%);
}
.cta-card--dark .cta-card__label{ color:var(--accent-on-dark); }
.cta-card--dark .cta-card__list li{ color:var(--on-dark-muted); }
.cta-card--dark .cta-card__list li::before{ border-color:var(--accent-on-dark); }
.cta-card--dark .cta-card__note{ color:rgba(255,255,255,.45); }

/* Кнопка и её пояснение живут парой — между ними отступ меньше,
   чем общий gap карточки, иначе подпись «отлипает» от кнопки. */
.cta-card__choice{ display:flex; flex-direction:column; gap:10px; }

/* Разделитель «или» между двумя способами оформления */
.cta-card__split{
  display:flex; align-items:center; gap:14px; margin:-2px 0;
  font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-40);
}
.cta-card__split::before,.cta-card__split::after{
  content:""; flex:1; height:1px; background:var(--hairline);
}
.cta-card--dark .cta-card__split{ color:rgba(255,255,255,.5); }
.cta-card--dark .cta-card__split::before,
.cta-card--dark .cta-card__split::after{ background:rgba(255,255,255,.16); }

/* =========================================================
   Модальные окна
   ========================================================= */
.modal{
  border:0; padding:0; background:transparent; color:var(--ink);
  width:min(700px, calc(100vw - 32px));
  max-height:calc(100dvh - 40px);
  overflow:visible;
}
.modal::backdrop{
  background:rgba(12,12,14,.66);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
/* Панель не прокручивается сама — она только рамка со скруглением.
   Прокрутка живёт внутри .modal__body, поэтому полоса не наезжает
   на скруглённые углы, а крестик остаётся приколотым к панели. */
.modal__panel{
  position:relative;
  background:var(--canvas); border-radius:var(--r-xl);
  max-height:calc(100dvh - 40px); overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.32);
}
.modal__body{
  max-height:calc(100dvh - 40px); overflow-y:auto;
  padding:clamp(26px,3.4vw,46px);
  overscroll-behavior:contain;   /* не «пробивает» прокрутку на страницу */
}
.modal__title{ font-size:clamp(24px,2.8vw,36px); letter-spacing:-.028em; margin-bottom:12px; }
.modal__sub{
  font-size:15.5px; line-height:1.6; color:var(--ink-55);
  max-width:52ch; margin-bottom:clamp(22px,2.6vw,32px);
}
/* Короткая форма: узкая панель, чтобы три поля не расползались по ширине */
.modal--slim{ width:min(520px, calc(100vw - 32px)); }
.modal--slim .ticks{ margin-top:0; margin-bottom:clamp(22px,2.6vw,30px); }
.modal--slim .ticks li{ font-size:14.5px; line-height:1.5; color:var(--ink-55); }
/* Переход из большой анкеты в короткую форму */
.modal__switch{
  margin:-14px 0 clamp(22px,2.6vw,30px);
  font-size:14px; color:var(--ink-55);
}
.modal__switch .link{ font-size:14px; }
.modal__close{
  position:absolute; top:14px; right:14px; z-index:2;
  width:42px; height:42px; border:0; border-radius:50%;
  background:var(--parchment); cursor:pointer;
  transition:background-color .2s, transform .2s var(--ease);
}
.modal__close:hover{ background:var(--hairline); }
.modal__close:active{ transform:scale(.92); }
.modal__close::before,.modal__close::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:15px; height:1.6px; background:var(--ink);
}
.modal__close::before{ transform:rotate(45deg); }
.modal__close::after{ transform:rotate(-45deg); }

.modal[open]{ animation:modalIn .34s var(--ease); }
.modal[open]::backdrop{ animation:backdropIn .34s ease; }
@keyframes modalIn{ from{ opacity:0; transform:translateY(16px) scale(.985); } }
@keyframes backdropIn{ from{ opacity:0; } }

/* Пока окно открыто, фон не прокручивается.
   Класс вешается и на <html>: в Safari на iOS одного body мало —
   прокрутка «протекает» на корневой элемент. */
html.is-modal-open,
body.is-modal-open{ overflow:hidden; }

/* =========================================================
   Тонкая полоса прокрутки вместо системной.
   Firefox — scrollbar-width/color, вебкит — псевдоэлементы.
   ========================================================= */
.modal__body,
.field textarea{
  scrollbar-width:thin;
  scrollbar-color:rgba(29,29,31,.26) transparent;
}
.modal__body::-webkit-scrollbar,
.field textarea::-webkit-scrollbar{ width:12px; }

.modal__body::-webkit-scrollbar-track,
.field textarea::-webkit-scrollbar-track{
  background:transparent;
  /* отступ сверху и снизу, чтобы ползунок не упирался в скругление */
  margin-block:14px;
}
.modal__body::-webkit-scrollbar-thumb,
.field textarea::-webkit-scrollbar-thumb{
  background-color:rgba(29,29,31,.24);
  border-radius:999px;
  /* прозрачная рамка + background-clip дают ползунок уже дорожки */
  border:4px solid transparent;
  background-clip:padding-box;
  transition:background-color .2s;
}
.modal__body::-webkit-scrollbar-thumb:hover,
.field textarea::-webkit-scrollbar-thumb:hover{
  background-color:rgba(29,29,31,.42);
}
/* угловой квадратик между полосами убираем */
.modal__body::-webkit-scrollbar-corner{ background:transparent; }

/* ---------- Showroom / samples ---------- */
.pull{ margin:0 0 clamp(24px,3vw,40px); }
.pull p{
  font-family:var(--font-display); font-stretch:100%;
  font-size:clamp(24px,3.4vw,48px); font-weight:600; line-height:1.12; letter-spacing:-.028em;
  max-width:22ch;
}
.rooms{ margin-top:clamp(40px,5vw,72px); }
.room{ background:var(--canvas); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:clamp(26px,3vw,40px); }
.room__tag{ font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.room h3{ font-size:clamp(22px,2.4vw,32px); margin:12px 0 14px; letter-spacing:-.025em; }
.room p{ color:var(--ink-55); font-size:16px; line-height:1.6; }
.room__addr{
  font-style:normal; font-size:15px; line-height:1.55; color:var(--ink-80);
  padding-left:16px; border-left:2px solid var(--accent); margin-bottom:10px;
}
.room__hours{ font-size:14px !important; font-weight:500; color:var(--ink) !important; margin-bottom:16px; }

.samples__h{ margin-bottom:clamp(28px,3vw,44px); }
/* Секция «Два формата» белая, поэтому карточки заливаем парчментом —
   иначе белое на белом сливалось бы. */
.sample{ background:var(--parchment); border:1px solid transparent; border-radius:var(--r-lg); padding:clamp(24px,3vw,40px); }
.sample .sample__vis{ background:var(--canvas); }
/* Фото раскладок. Замена: assets/img/examples1.jpg и examples2.jpg */
.sample__vis{
  margin:0 0 26px; background:var(--pearl);
  border-radius:var(--r-md); overflow:hidden;
}
.sample__vis img{ width:100%; height:auto; display:block; }
.sample h3{ font-size:clamp(21px,2.2vw,28px); letter-spacing:-.022em; }
.sample__meta{ font-size:14px; color:var(--accent); margin:8px 0 14px; font-weight:500; }
.sample p:last-child{ color:var(--ink-55); font-size:16px; line-height:1.6; }

/* ---------- Loyalty ---------- */
.tracks{ margin-top:clamp(40px,5vw,72px); }
.track{
  border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:clamp(28px,3.2vw,48px); background:var(--pearl);
}
/* оба формата сотрудничества оформлены одинаково — тёмной заливки больше нет */
.track__num{ font-size:13px; font-weight:600; letter-spacing:.1em; color:var(--accent); }
.track h3{ font-size:clamp(23px,2.6vw,34px); margin:16px 0 4px; letter-spacing:-.025em; }
.track__note{ margin-top:26px; font-size:14.5px; color:var(--ink-55); line-height:1.6; }

.tiers{
  margin-top:clamp(48px,6vw,88px);
  background:var(--parchment); border-radius:var(--r-xl);
  padding:clamp(28px,4vw,64px);
}
.tiers__h{ font-size:clamp(20px,2.2vw,28px); letter-spacing:-.025em; margin-bottom:clamp(28px,4vw,52px); }
.tiers__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.5vw,36px); align-items:end; }
.tier__bar{ height:clamp(150px,20vw,280px); display:flex; align-items:flex-end; justify-content:center; position:relative; }
.tier__bar::before{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:var(--h); border-radius:var(--r-md) var(--r-md) 0 0;
  background:linear-gradient(180deg,#0A7CA3,#046788);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform 1s var(--ease);
}
.tier--max .tier__bar::before{ background:linear-gradient(180deg,#34343A,#1D1D1F); }
.tiers.is-in .tier__bar::before{ transform:scaleY(1); }
.tier__pct{
  position:relative; z-index:1; color:#fff;
  font-family:var(--font-display); font-stretch:100%;
  font-size:clamp(30px,4.4vw,58px); font-weight:700; letter-spacing:-.035em;
  padding-bottom:18px; opacity:0; transition:opacity .5s .5s;
}
.tier__pct i{ font-style:normal; font-size:.5em; vertical-align:super; margin-left:2px; }
.tiers.is-in .tier__pct{ opacity:1; }
.tier__range{ margin-top:18px; font-size:clamp(16px,1.6vw,20px); font-weight:600; letter-spacing:-.015em; }
.tier__sub{ font-size:13px; color:var(--ink-55); margin-top:4px; }
.tiers__note{ margin-top:clamp(28px,3vw,44px); font-size:13.5px; color:var(--ink-55); max-width:70ch; line-height:1.6; }

/* Верх секции: оффер и кнопка для прямого захода по /#loyalty.
   Переход по якорю съедает почти весь верхний отступ секции: без этого на
   ноутбуке 1366×768 над заголовком ~160 px пустоты, а кнопка уходит под
   cookie-плашку. */
#loyalty{ scroll-margin-top:calc(24px - var(--sec)); }
.display--loyalty{ font-size:clamp(34px,6.4vw,88px); }
.loyalty__head .lead{ margin-top:clamp(20px,2.4vw,32px); }
.loyalty__head .lead b{ font-weight:500; color:var(--ink); }
.loyalty__cta{ margin-top:clamp(26px,3vw,38px); display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; }
.loyalty__btn{ padding:17px 34px; font-size:17px; }
.loyalty__note{ font-size:14px; line-height:1.5; color:var(--ink-55); max-width:46ch; }
.loyalty__note .link{ font-size:14px; }
.tiers__example{
  margin-top:clamp(28px,3vw,44px); font-size:clamp(16px,1.5vw,19px); line-height:1.5;
  color:var(--ink-80); max-width:60ch;
}
.tiers__example b{ font-weight:600; color:var(--ink); white-space:nowrap; }
.tiers__example + .tiers__note{ margin-top:10px; }
.loyalty__cta--end{ margin-top:clamp(28px,3vw,40px); padding-top:clamp(24px,2.6vw,34px); border-top:1px solid var(--hairline); }

/* Короткий ряд выгод — усиливает оффер, не отдельный блок */
.perks{
  margin-top:clamp(36px,4.4vw,60px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,28px);
  border-top:1px solid var(--hairline); padding-top:clamp(20px,2.4vw,28px);
}
.perks li{ display:flex; flex-direction:column; gap:4px; }
.perks b{ font-family:var(--font-display); font-size:clamp(17px,1.6vw,21px); font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.perks span{ font-size:14px; line-height:1.45; color:var(--ink-55); }

.tracks__h{
  margin-top:clamp(48px,6vw,88px);
  font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-55);
}
.tracks__h + .tracks{ margin-top:18px; }

/* =========================================================
   Памятка: как заказать по TD-номеру
   ========================================================= */
.steps{
  margin-top:clamp(40px,5vw,68px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,24px);
  counter-reset:none;
}
.step{
  background:var(--canvas); border:1px solid var(--hairline);
  border-radius:var(--r-lg); padding:clamp(22px,2.4vw,30px);
  display:flex; flex-direction:column; gap:12px;
  position:relative;
}
.step__num{
  font-family:var(--font-display); font-stretch:100%;
  font-size:13px; font-weight:700; letter-spacing:.12em; color:var(--accent);
}
.step h3{ font-size:clamp(18px,1.7vw,22px); letter-spacing:-.022em; }
.step p{ font-size:15px; line-height:1.6; color:var(--ink-55); }
.step p b{ font-weight:600; color:var(--ink); white-space:nowrap; }

/* Предупреждение про срок: жёлтая полоса слева, без иконок-эмодзи */
.warn{
  margin-top:clamp(26px,3vw,38px);
  border-left:3px solid var(--gold);
  background:var(--canvas);
  border-radius:0 var(--r-md) var(--r-md) 0;
  padding:18px 22px;
  font-size:15.5px; line-height:1.6; color:var(--ink-80);
  max-width:78ch;
}
.warn b{ color:var(--ink); }

/* После переноса #loyalty наверх памятка встала сразу за заявкой на образцы —
   у обоих серый фон. Линия разделяет их; при другом порядке правило не сработает. */
#order-samples + #howto{ border-top:1px solid var(--hairline); }

.howto__cta{
  margin-top:clamp(30px,3.4vw,44px);
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
}
.howto__note{ font-size:13.5px; line-height:1.5; color:var(--ink-55); max-width:46ch; }

/* =========================================================
   Поле под TD-номер: фиксированная приставка и пять окошек
   ========================================================= */
.tdcode{ display:flex; align-items:center; gap:8px; }
.tdcode__prefix{
  font-family:var(--font-display); font-stretch:100%;
  font-size:clamp(20px,2.2vw,26px); font-weight:700; letter-spacing:-.02em;
  color:var(--ink); padding-right:2px; user-select:none;
}
.tdcode__digit{
  width:clamp(42px,4.4vw,54px); height:clamp(52px,5.4vw,64px);
  padding:0; text-align:center;
  font-family:var(--font-display); font-stretch:100%;
  font-size:clamp(20px,2.2vw,26px); font-weight:600; color:var(--ink);
  background:var(--pearl); border:1px solid var(--hairline); border-radius:var(--r-md);
  transition:border-color .2s, background-color .2s;
}
.tdcode__digit:focus{
  outline:none; border-color:var(--accent); background:var(--canvas);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.tdcode.is-invalid .tdcode__digit{ border-color:#C0392B; }

/* =========================================================
   Экраны результата в окне статуса
   ========================================================= */
.status__icon{
  display:block; width:52px; height:52px; border-radius:50%;
  margin-bottom:20px; position:relative;
}
.status__icon--ok{ background:var(--accent-soft); }
.status__icon--ok::after{           /* галочка */
  content:""; position:absolute; left:17px; top:18px;
  width:18px; height:9px;
  border-left:2.4px solid var(--accent); border-bottom:2.4px solid var(--accent);
  transform:rotate(-45deg);
}
.status__icon--warn{ background:#FBEFE9; }
.status__icon--warn::after{          /* восклицательный знак */
  content:""; position:absolute; left:24px; top:14px;
  width:3px; height:16px; border-radius:2px; background:#C0392B;
  box-shadow:0 20px 0 #C0392B;
}
.status__td{ white-space:nowrap; color:var(--ink); }
.status__hint{
  margin-top:12px; font-size:13.5px; line-height:1.55; color:var(--ink-55);
}
.status__done .btn, .status__fail .btn{ margin-top:clamp(22px,2.6vw,30px); }

/* ---------- Portfolio marquee ---------- */
/* Лента прокручивается скриптом через scrollLeft, а не CSS-анимацией:
   так её можно тянуть пальцем и мышью, не ломая автопрокрутку. */
.marquee{
  margin-top:clamp(40px,5vw,72px);
  display:flex; gap:20px;
  overflow-x:auto; overflow-y:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  cursor:grab;
  scrollbar-width:none;                /* полосу прячем: лента и так листается */
  overscroll-behavior-x:contain;       /* не тянет за собой историю браузера */
  -webkit-overflow-scrolling:touch;
}
.marquee::-webkit-scrollbar{ display:none; }
.marquee.is-dragging{ cursor:grabbing; }
/* пока тянут мышью, ссылки внутри не должны перехватывать курсор */
.marquee.is-dragging a{ pointer-events:none; }
.marquee__track{ display:flex; gap:20px; flex:none; }
.proj{
  flex:none; width:min(380px,74vw);
  background:var(--dark-2); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column;
}
/* Фото проекта. Замена — файл с тем же именем в assets/img/projects/ */
.proj__shot{ aspect-ratio:3/2; overflow:hidden; background:var(--dark-3); }
.proj__shot img{
  width:100%; height:100%; display:block; object-fit:cover;
  transition:transform .7s var(--ease);
}
.proj:hover .proj__shot img{ transform:scale(1.045); }
.proj__body{
  padding:clamp(20px,2.2vw,28px);
  display:flex; flex-direction:column; gap:8px; flex:1;
}
.proj__cat{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-on-dark); }
.proj h3{ font-size:clamp(22px,2.2vw,30px); letter-spacing:-.025em; }

/* Подписи под проектом: ткань крупнее, авторство мельче */
.proj__fabric{
  margin-top:4px; font-size:15px; line-height:1.45; color:var(--on-dark-muted);
}
.proj__fabric b{ font-weight:600; color:var(--on-dark); }
.proj__credit{
  font-size:13px; line-height:1.5; color:rgba(255,255,255,.5);
}
.proj__credit:first-of-type{ margin-top:6px; }

/* «Ваш проект» — деликатный акцент: место под будущего партнёра */
.proj--soon{
  background:
    radial-gradient(130% 115% at 18% 0%, rgba(79,182,214,.17) 0%, rgba(79,182,214,0) 64%),
    var(--dark-2);
  border-color:rgba(79,182,214,.4);
  transition:border-color .4s, transform .4s var(--ease);
}
.proj--soon::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(79,182,214,.14), 0 0 36px rgba(79,182,214,.13);
}
.proj--soon{ position:relative; }
.proj--soon:hover{ border-color:var(--accent-on-dark); transform:translateY(-4px); }
.proj--soon .proj__cat{ color:var(--accent-on-dark); }
.proj--soon .proj__cat::before{
  content:""; display:inline-block; vertical-align:middle;
  width:6px; height:6px; border-radius:50%; background:var(--accent-on-dark);
  margin-right:9px; margin-top:-2px;
  animation:softPulse 2.6s ease-in-out infinite;
}
@keyframes softPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
.proj__cta{
  margin-top:auto; padding-top:14px;
  font-size:13px; font-weight:600; color:var(--accent-on-dark);
  display:inline-flex; align-items:center; gap:8px;
}
.proj__cta::after{ content:"→"; transition:transform .35s var(--ease); }
.proj--soon:hover .proj__cta::after{ transform:translateX(5px); }

/* ---------- Quote ---------- */
.quote{ background:var(--canvas); padding-block:clamp(80px,11vw,180px); text-align:center; }

/* Плавно гасимая яркость свечения под курсором */
@property --glow{ syntax:"<number>"; inherits:false; initial-value:0; }

.quote__word{
  /* nowrap + запас по кеглю: слово всегда влезает в одну строку */
  display:inline-block; white-space:nowrap;
  font-size:clamp(34px,10.4vw,148px); font-weight:700; line-height:1; letter-spacing:-.035em;
  --glow:0; --mx:50%; --my:50%;
  /* Тёплая медь → золото: комплиментарно холодному петролю акцента */
  background-image:
    radial-gradient(1.25em 1.25em at var(--mx) var(--my),
      rgba(255,226,160,var(--glow)) 0%,
      rgba(255,214,132,calc(var(--glow) * .5)) 42%,
      rgba(255,214,132,0) 100%),
    linear-gradient(100deg,#8E4326 8%,#B4652E 42%,#CAB44B 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transition:--glow .35s ease;
  cursor:default;
}
.quote__word:hover{ --glow:.95; }
.quote__line{
  margin-top:clamp(20px,3vw,40px);
  font-size:clamp(19px,2.4vw,32px); font-weight:300; line-height:1.35; letter-spacing:-.02em;
  color:var(--ink-80);
}
/* Каждое предложение — отдельным абзацем.
   text-wrap:balance выравнивает длину строк и снимает висячие слова;
   неразрывные пробелы у предлогов и тире расставлены в разметке. */
.quote__sub{
  margin:clamp(26px,3vw,40px) auto 0; max-width:58ch;
  display:flex; flex-direction:column; gap:clamp(12px,1.4vw,18px);
}
.quote__sub p{
  font-size:clamp(15px,1.35vw,17px); line-height:1.65; color:var(--ink-55);
  text-wrap:balance;
}

/* ---------- Footer ---------- */
.footer{ background:var(--parchment); padding-block:clamp(52px,6vw,80px) 32px; }
.footer__inner{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:clamp(24px,3vw,48px); }
.footer__logo{ width:190px; margin-bottom:18px; }
.footer__brand p{ font-size:14px; color:var(--ink-55); line-height:1.6; max-width:38ch; }
.footer__col h4{ font-size:13px; font-weight:600; letter-spacing:.02em; margin-bottom:16px; }
.footer__col a,.footer__col p{ display:block; font-size:14px; color:var(--ink-55); line-height:2.1; }
.footer__col a:hover{ color:var(--accent); }
.footer__col--wide{ grid-column:span 1; }
.footer__col address{
  font-style:normal; font-size:13.5px; line-height:1.55; color:var(--ink-55); margin-bottom:18px;
}
.footer__col address b{ display:block; color:var(--ink); font-size:13.5px; margin-bottom:4px; }
.footer__col address i{ display:block; font-style:normal; color:var(--ink-40); margin-top:4px; }
.footer__legal{
  margin-top:clamp(40px,5vw,64px); padding-top:22px; border-top:1px solid var(--hairline);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:12px; color:var(--ink-40);
}

/* ---------- Toast ---------- */
.toast{
  /* прячем целиком за нижний край: при 140% пустая «таблетка» торчала на ~16 px */
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,calc(100% + 60px));
  background:var(--ink); color:#fff; padding:15px 26px; border-radius:var(--r-pill);
  font-size:15px; z-index:200; box-shadow:0 18px 40px rgba(0,0,0,.28);
  transition:transform .5s var(--ease); max-width:calc(100vw - 40px); text-align:center;
}
.toast.is-on{ transform:translate(-50%,0); }

/* ---------- Reveal ---------- */
.js .reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d, 0s);   /* --d задаёт каскад в сетке карточек */
}
.js .reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .js .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1068px){
  /* Семь пунктов и кнопка в одной строке: на средних экранах ужимаем
     шаг и кегль, иначе строка не помещается и кнопка уезжает за край. */
  .nav__links{ gap:14px; }
  .nav__links a{ font-size:13.5px; }
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .feat,.feat--flip{ grid-template-columns:1fr; }
  .feat--flip .feat__body{ order:0; }
  .pbr__stage{ grid-template-columns:1fr; }
  .pbr__render{ position:static; }
  .benefits{ grid-template-columns:repeat(2,1fr); }
  .perks{ grid-template-columns:repeat(2,1fr); }
  .footer__inner{ grid-template-columns:1fr 1fr; }
  .carousel__nav{ opacity:1; }
}

/* Шапка уходит в бургер чуть раньше остального макета: семь пунктов и
   кнопка держатся в одной строке до 941 px, на 901 px не хватает уже
   16 px и кнопка ломается на две строки. Замерено, не на глаз. */
@media (max-width:940px){
  /* Шапка схлопывается в бургер: пункты, кнопка и звонок переезжают
     в выдвижное меню, остаётся одна строка с логотипом. Звонок прячем
     явно — он живёт в первой строке и сам бы не спрятался, а 290 px
     текста на узком экране наехали бы на бургер. */
  .nav__bar{ display:none; }
  .nav__links,.nav__cta,.nav__call{ display:none; }
  .nav__burger{ display:flex; }
  .float-cta{ display:flex; }
  .nav__tray{
    display:grid; gap:2px; padding:0 var(--gut);
    max-height:0; overflow:hidden; transition:max-height .45s var(--ease), padding .45s var(--ease);
    border-top:1px solid transparent;
  }
  /* Высота с запасом: max-height нельзя задать через auto, иначе не будет
     плавного раскрытия. При добавлении пунктов проверяйте, что содержимое
     влезает — сейчас 7 ссылок и две кнопки занимают ~575 px. */
  .nav.is-open .nav__tray{ max-height:760px; padding-block:12px 24px; border-top-color:var(--hairline); }
  .nav__tray a{ padding:13px 0; font-size:17px; }
  .nav__tray .btn{ margin-top:12px; }
}

@media (max-width:900px){
  .split,.formblock,.support-grid,.order-grid{ grid-template-columns:1fr; }
  .support-grid__shot{ max-width:420px; }
  /* в один столбец блоки идут по порядку разметки: заголовок, форма, фото */
  .order-grid__head,.order-grid__form,.order-grid__shot{ grid-column:1; grid-row:auto; }
  .order-grid__shot{ max-width:420px; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stats li:nth-child(odd){ border-left:0; padding-left:0; }
  .stats li:nth-child(3),.stats li:nth-child(4){ border-top:1px solid var(--hairline); }
  /* на узких экранах кадр становится вертикальным, текст уходит вниз */
  .hero__shot img,.hero__shot.is-fallback{ aspect-ratio:4/4.9; object-position:center 46%; }
  .hero__overlay{ align-items:flex-end; padding-bottom:clamp(28px,6vw,52px); }
  .hero__stage::after{
    background:
      linear-gradient(0deg, rgba(14,14,16,.92) 0%, rgba(14,14,16,.66) 36%,
                            rgba(14,14,16,.24) 64%, rgba(14,14,16,.08) 100%);
  }
  .hero__title{ max-width:none; }
  .support-grid__shot{ max-width:none; }
  .order-grid__shot{ max-width:none; }
}

@media (max-width:680px){
  body{ font-size:16px; }
  .grid--2,.grid--3,.grid--4,.tiers__grid,.form__row,.steps{ grid-template-columns:1fr; }
  /* окошки под цифры сжимаем, чтобы «TD-» и пять полей влезли в 375 px */
  .tdcode{ gap:6px; }
  .tdcode__digit{ width:44px; height:52px; font-size:20px; }
  .tiers__grid{ gap:28px; }
  .tier__bar{ height:120px; }
  .loyalty__cta{ flex-direction:column; align-items:stretch; }
  .loyalty__btn{ width:100%; }
  .perks{ gap:18px 16px; }
  .benefits{ grid-template-columns:1fr; gap:24px; }
  .footer__inner{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
  .stats li{ border-left:0 !important; padding-left:0 !important; border-top:1px solid var(--hairline); }
  .stats li:first-child{ border-top:0; }
  .map{ grid-template-columns:48px 1fr; gap:14px; }
  .map__thumb{ width:48px; height:48px; }
  .map__idx{ display:none; }
  .sample__vis{ height:auto; flex-direction:column; }
  .nav__logo img{ width:145px; }
  .hero__shot img,.hero__shot.is-fallback{ aspect-ratio:4/5.8; }
  .tool{ transform:none !important; }
  .tool:hover{ box-shadow:none; }
}

/* =========================================================
   Страница правил программы: /rules/ (13.10.2026)
   Своя простая шапка и узкая колонка текста; остальное — общие классы.
   ========================================================= */
.rules-head{
  position:sticky; top:0; z-index:80;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hairline);
}
.rules-head__inner{ height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.rules-head .nav__logo img{ width:150px; }

.rules{ padding-block:clamp(32px,5vw,72px) var(--sec); }
.rules__wrap{ max-width:820px; }
.rules__back{ display:inline-block; font-size:14px; margin-bottom:clamp(28px,4vw,44px); }
.rules__title{ margin-bottom:10px; }
.rules__meta{ font-size:14px; color:var(--ink-40); }

.rules__toc{
  margin-top:clamp(28px,3.4vw,40px); padding:20px 24px;
  background:var(--parchment); border-radius:var(--r-lg);
}
.rules__toc ol{ list-style:decimal; padding-left:20px; columns:2; column-gap:32px; }
.rules__toc li{ font-size:15px; line-height:1.5; padding:3px 0; break-inside:avoid; color:var(--ink-40); }
.rules__toc a{ color:var(--ink-80); }
.rules__toc a:hover{ color:var(--accent); }

.rules__sec{ margin-top:clamp(36px,4.6vw,56px); scroll-margin-top:84px; }
.rules__sec h2{ font-size:clamp(21px,2.2vw,27px); letter-spacing:-.022em; margin-bottom:14px; }
.rules__sec > p{ color:var(--ink-80); line-height:1.65; margin-top:12px; }
.rules__sec > p:first-of-type{ margin-top:0; }
.rules__sec .ticks{ margin-top:0; }
.rules__sec .ticks li{ line-height:1.6; }
.rules__sec .warn{ margin-top:18px; }
.rules__sec .link, .rules__contacts .link{ font-size:inherit; border-bottom-color:currentColor; }

.rules__steps{ list-style:decimal; padding-left:22px; display:flex; flex-direction:column; gap:10px; }
.rules__steps li{ color:var(--ink-80); line-height:1.6; padding-left:4px; }
.rules__steps li::marker{ color:var(--accent); font-weight:600; }
.rules__steps b{ white-space:nowrap; color:var(--ink); }

.rules__table-wrap{ margin-top:16px; overflow-x:auto; }
.rules__table{ width:100%; border-collapse:collapse; font-size:15px; line-height:1.5; }
.rules__table th, .rules__table td{
  text-align:left; vertical-align:top; padding:14px 16px;
  border-bottom:1px solid var(--hairline);
}
.rules__table thead th{ font-size:13px; font-weight:600; color:var(--ink-55); background:var(--parchment); }
.rules__table tbody th{ font-weight:600; color:var(--ink); width:24%; }
.rules__table td{ color:var(--ink-80); }
.rules__table--tiers td:last-child{ font-weight:600; color:var(--ink); }
.rules__table--tiers td:first-child{ white-space:nowrap; }

.rules__cta{
  margin-top:clamp(44px,5.6vw,72px); padding-top:clamp(28px,3vw,40px);
  border-top:1px solid var(--hairline);
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px;
}
.rules-foot{ padding-block:24px; }
.rules__org{
  margin-top:24px; padding:18px 20px; border:1px solid var(--hairline); border-radius:var(--r-lg);
  font-size:14px; line-height:1.6; color:var(--ink-55);
}
.rules__org b{ color:var(--ink); font-weight:600; }
.rules__org p + p{ margin-top:4px; }

@media (max-width:680px){
  .rules-head .nav__logo img{ width:128px; }
  .rules__toc ol{ columns:1; }
  /* таблица форматов: строки в карточки, чтобы не было горизонтальной прокрутки */
  .rules__table:not(.rules__table--tiers) thead{ display:none; }
  .rules__table:not(.rules__table--tiers) tr{ display:block; padding:6px 0 10px; border-bottom:1px solid var(--hairline); }
  .rules__table:not(.rules__table--tiers) th,
  .rules__table:not(.rules__table--tiers) td{ display:block; border:0; padding:6px 0; width:auto; }
  .rules__table:not(.rules__table--tiers) td::before{
    display:block; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent);
  }
  .rules__table:not(.rules__table--tiers) td:nth-of-type(1)::before{ content:"Специальные цены для клиента"; }
  .rules__table:not(.rules__table--tiers) td:nth-of-type(2)::before{ content:"Вознаграждение дизайнеру"; }
  .rules__cta{ flex-direction:column; align-items:stretch; }
}