/* ============================================================
   ITRIVIX · RoomTools — стили сайта
   Направление Б: весь сайт тёмный, строгий монохром
   с бирюзовым акцентом, как на обложках YouTube.

   Бирюзовый — ТОЛЬКО: полосы логотипа, выделенная строка
   заголовка, черта и размерные линии, главная кнопка, метки
   «Хит» и «вручную / скриптом», скидка и подсветка карточки.
   Не добавлять его в новые места — иначе строгость уйдёт.

   Контраст (проверено): бирюзовый на тёмном фоне ~5.4:1 —
   годится даже для текста. Текст на бирюзовой кнопке — тёмный:
   белый на бирюзовом не проходит.
   ============================================================ */

:root{
  color-scheme: dark;

  --bg:        #0c0c10;   /* фон страницы */
  --bg-2:      #101015;   /* чередующиеся разделы */
  --surface:   #15151c;   /* карточки */
  --surface-2: #1b1b23;   /* наведение, окна */
  --line:      #25252e;   /* тонкие линии */
  --line-2:    #34343f;   /* заметные линии */

  --text:      #f2f2f4;
  --text-2:    #a7adb5;   /* вторичный текст */
  --text-3:    #8a9099;   /* подписи */

  --teal:      #159a89;   /* бирюзовый бренда, RGB 21/154/137 */
  --teal-hi:   #1bb09c;   /* наведение на бирюзовую кнопку */
  --teal-soft: rgba(21,154,137,.16);
  --on-teal:   #0c0c10;

  --danger:    #ff8f7f;

  --display: 'Oswald', 'Arial Narrow', 'Segoe UI', sans-serif;
  --mark:    'Montserrat', 'Segoe UI', sans-serif;
  --body:    'Golos Text', 'Segoe UI', Roboto, Arial, sans-serif;
  --mono:    'JetBrains Mono', Consolas, monospace;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }   /* иначе display:flex перебивает атрибут hidden */
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 17px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;
}
body.has-order{ padding-bottom:112px; }
::selection{ background:var(--teal); color:var(--on-teal); }
:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }

h1,h2,h3,h4{
  margin:0; font-family:var(--display); font-weight:600;
  text-transform:uppercase; letter-spacing:.01em; line-height:1.04;
}
h1{ font-size:clamp(38px,5.4vw,64px); }
h2{ font-size:clamp(30px,3.6vw,44px); }
h3{ font-size:20px; font-weight:500; letter-spacing:.02em; }
p{ margin:0; }
a{ color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }

.wrap{ width:100%; max-width:1180px; margin:0 auto; padding:0 24px; }
.accent{ color:var(--teal); }
.eyebrow{
  font:400 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:18px;
}
.rule{ display:block; width:48px; height:2px; background:var(--teal); margin:0 0 22px; }

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 22px; border:1px solid transparent; border-radius:0;
  font:500 15px/1 var(--body); text-decoration:none; cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
  white-space:nowrap;
}
.btn-primary{ background:var(--teal); color:var(--on-teal); }
.btn-primary:hover{ background:var(--teal-hi); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--text-3); }
.btn-quiet{ background:transparent; color:var(--text-3); }
.btn-quiet:hover{ color:var(--text); }
.btn-wide{ width:100%; }

/* ---------- Логотип ---------- */
.logo{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); }
.logo-bars{ display:flex; gap:4px; height:22px; flex:0 0 auto; }
.logo-bars i{ display:block; width:5px; background:var(--teal); }
.logo-word{ font:600 15px/1 var(--mark); letter-spacing:.32em; }
.logo-prod{
  font:400 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-3); border-left:1px solid var(--line-2); padding-left:12px;
}

/* ---------- Шапка ---------- */
.site-head{
  position:sticky; top:0; z-index:40;
  background:rgba(12,12,16,.9); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.head-inner{ display:flex; align-items:center; gap:28px; height:68px; }
.nav{ display:flex; gap:26px; margin-left:auto; }
.nav a{ text-decoration:none; font-size:15px; color:var(--text-2); }
.nav a:hover{ color:var(--text); }
.head-cta{ padding:10px 16px; font-size:14.5px; }

/* Переключатель языка */
.lang-switch{ display:flex; gap:2px; margin-left:auto; }
.nav + .lang-switch{ margin-left:0; }
.lang-switch a{
  padding:6px 7px; border-bottom:1px solid transparent;
  font:500 12px/1 var(--mono); letter-spacing:.06em; color:var(--text-3); text-decoration:none;
}
.lang-switch a:hover{ color:var(--text); }
.lang-switch a[aria-current]{ color:var(--text); border-bottom-color:var(--text); }
.lang-switch a:focus-visible{ outline:1px solid var(--text); outline-offset:2px; }
.lang-note{ border:1px solid var(--line-2); background:var(--surface); padding:12px 16px; margin-bottom:24px; font-size:14.5px; color:var(--text-2); }

/* ---------- Главный экран ---------- */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.hero::before{
  content:''; position:absolute; inset:0; opacity:.55; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(120% 90% at 70% 10%, #000 30%, transparent 75%);
          mask-image:radial-gradient(120% 90% at 70% 10%, #000 30%, transparent 75%);
}
/* Одна колонка: схему ленты убрали, на её место позже встанет видео
   под заголовком. */
.hero-inner{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr);
  gap:56px; align-items:center; padding:84px 24px 56px;
}
.hero-copy{ max-width:820px; }
.hero h1{ margin-bottom:24px; }
.lead{ font-size:18px; line-height:1.65; color:var(--text-2); max-width:56ch; }
.hero-actions{ display:flex; gap:12px; margin:32px 0 40px; flex-wrap:wrap; }

.hero-facts{ display:flex; gap:40px; flex-wrap:wrap; padding-top:28px; border-top:1px solid var(--line); }
.hero-facts li{ display:flex; flex-direction:column; gap:6px; }
.hero-facts b{ font:600 32px/1 var(--display); letter-spacing:.01em; font-variant-numeric:tabular-nums; }
.hero-facts span{ font-size:13.5px; color:var(--text-3); max-width:18ch; line-height:1.35; }

/* Размерные линии — цитата обложек. Вёрстка, а не картинка:
   на любой ширине цифры не растягиваются. */
.dims{ position:relative; display:flex; border-top:1px solid var(--teal); margin:0 0 40px; }
.dims span{
  position:relative; flex:var(--w) 1 0; text-align:center; padding-top:9px;
  font:400 11px/1 var(--mono); color:var(--teal); font-variant-numeric:tabular-nums;
}
.dims span::before{ content:''; position:absolute; left:0; top:-6px; width:1px; height:11px; background:var(--teal); }
.dims span:last-child::after{ content:''; position:absolute; right:0; top:-6px; width:1px; height:11px; background:var(--teal); }

/* Схема ленты Revit */
.ribbon{ background:var(--surface); border:1px solid var(--line-2); padding:0 0 14px; }
.ribbon-tab{
  display:inline-block; margin:12px 0 0 14px; padding:8px 16px;
  background:var(--surface-2); border:1px solid var(--line-2); border-bottom:0;
  font:500 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text);
}
.ribbon-body{ display:flex; gap:1px; background:var(--line-2); border-top:1px solid var(--line-2); overflow:hidden; }
.rb-panel{ background:var(--surface-2); padding:14px 10px 9px; flex:1; text-align:center; min-width:0; }
.rb-btns{ display:flex; gap:5px; justify-content:center; margin-bottom:10px; }
.rb-btns i{ width:19px; height:19px; display:block; background:#0a0a0e; border:1px solid var(--line-2); }
.rb-panel span{ font-size:10px; color:var(--text-3); display:block; overflow:hidden; text-overflow:ellipsis; }
/* Английское имя панели — как в Revit и в роликах */
.rb-panel em{ font-style:normal; font-family:var(--mono); font-size:9px; color:var(--text-3); opacity:.75; }
.panel-note{ margin-top:18px; font-size:13.5px; color:var(--text-3); text-align:center; }

/* ---------- Задачи ---------- */
.pains{ padding:72px 0 8px; }
.pain-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.pain-grid article{ background:var(--surface); padding:26px 22px; }
.pain-grid h3{ font-size:18px; margin-bottom:10px; }
.pain-grid p{ font-size:14.5px; color:var(--text-3); line-height:1.55; }
.pain-line{ text-align:center; margin-top:26px; font-size:15.5px; color:var(--text-3); }

/* ---------- Заголовки разделов ---------- */
.sec-head{ max-width:660px; margin-bottom:40px; }
.sec-head h2{ margin-bottom:14px; }
.sec-head p{ color:var(--text-2); font-size:16.5px; }

/* ---------- Каталог ---------- */
.catalog{ padding:80px 0 92px; }
.group{ margin-bottom:48px; }
.group-head{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.group-head h3{
  font:400 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
}
.group-head::after{ content:''; flex:1; height:1px; background:var(--line); }

/* minmax(0,1fr) и min-width:0 обязательны. Элемент сетки по умолчанию не бывает
   уже своего содержимого, а ряд плиток видео широкий: без этого карточка
   растягивалась до 688 px, и на телефоне страница ездила вбок. С ними ряд
   плиток прокручивается внутри карточки, как задумано. */
.cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.cards > .card{ min-width:0; }

.card{
  position:relative; border:1px solid var(--line); background:var(--surface);
  padding:24px 24px 20px; display:flex; flex-direction:column;
  transition:border-color .15s;
}
.card:hover{ border-color:var(--line-2); }
.card.picked{ border-color:var(--text); }

.card-top{ display:flex; align-items:flex-start; gap:14px; margin-bottom:12px; }
.card-title{ flex:1; min-width:0; }
.card h4{ margin:0 0 4px; font-size:23px; letter-spacing:.02em; }
.card-price{ font:600 18px/1 var(--body); white-space:nowrap; padding-top:4px; font-variant-numeric:tabular-nums; }

.badge{
  display:inline-block; margin-left:10px; padding:3px 8px;
  font:500 10px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  vertical-align:5px; border:1px solid var(--line-2); color:var(--text-2);
}
.badge-hit{ border-color:var(--teal); color:var(--teal); }
.badge-new{ border-color:var(--text-3); color:var(--text); }
.badge-beta, .badge-wip{ border-color:var(--line-2); color:var(--text-3); }

.card-short{ font-size:15px; color:var(--text-2); line-height:1.55; margin-bottom:16px; }
.card-bullets{ display:flex; flex-direction:column; gap:9px; margin-bottom:16px; }
.card-bullets li{ position:relative; padding-left:20px; font-size:14.5px; color:var(--text-2); line-height:1.5; }
.card-bullets li::before{ content:''; position:absolute; left:0; top:10px; width:9px; height:2px; background:var(--teal); }
.card-saves{
  margin-top:auto; padding:12px 14px; background:var(--bg-2); border:1px solid var(--line);
  font-size:13.5px; color:var(--text-3); line-height:1.5;
}
.card-foot{ margin-top:16px; }

.pick{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding:13px; border:1px solid var(--line-2); background:transparent;
  cursor:pointer; font:500 15px/1 var(--body); color:var(--text);
  transition:border-color .15s, background .15s, color .15s;
}
.pick:hover{ border-color:var(--text-3); }
.pick .box{
  width:18px; height:18px; border:1px solid var(--text-3); flex:0 0 auto; position:relative;
}
.card.picked .pick{ background:var(--text); border-color:var(--text); color:var(--bg); }
.card.picked .pick .box{ background:var(--bg); border-color:var(--bg); }
.card.picked .pick .box::after{
  content:''; position:absolute; left:4px; top:4px; width:8px; height:4px;
  border:2px solid var(--text); border-top:0; border-right:0; transform:rotate(-45deg);
}

/* Карточка «в разработке» */
.card-wip{ background:transparent; border-style:dashed; }
.card-wip:hover{ border-color:var(--line); }
.pick-notify{ border-style:dashed; color:var(--text-2); }
.pick-notify:hover{ border-style:solid; border-color:var(--text-3); color:var(--text); }
.wip-note{ margin-top:9px; font-size:12.5px; color:var(--text-3); text-align:center; line-height:1.4; }

/* Подсветка карточки при переходе по ссылке /#tool-… из Revit */
.card-flash{ animation:cardFlash 2.4s ease-out; }
@keyframes cardFlash{
  0%, 35%{ border-color:var(--teal); box-shadow:0 0 0 4px var(--teal-soft); }
  100%   { box-shadow:0 0 0 0 transparent; }
}

/* ---------- Видео на карточке ---------- */
.videos{ margin:2px 0 16px; }
.v-strip{ display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
.v-strip::-webkit-scrollbar{ height:6px; }
.v-strip::-webkit-scrollbar-thumb{ background:var(--line-2); }

.v-tile{
  flex:0 0 152px; display:flex; flex-direction:column; gap:6px; text-align:left;
  background:none; border:0; padding:0; cursor:pointer; font:inherit; color:var(--text);
}
.v-tile.v-empty{ cursor:default; }
.v-thumb{
  position:relative; display:block; width:100%; aspect-ratio:16/9; overflow:hidden;
  background:#08080b; border:1px solid var(--line-2);
}
.v-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.v-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:34px; height:34px; border-radius:50%; background:rgba(12,12,16,.78);
  transition:background .15s;
}
.v-play::after{
  content:''; position:absolute; left:13px; top:10px;
  border-left:11px solid #fff; border-top:7px solid transparent; border-bottom:7px solid transparent;
}
.v-tile:has(.v-compare) .v-play,
.v-tile:hover .v-play{ background:var(--teal); }
.v-tile:has(.v-compare) .v-play::after,
.v-tile:hover .v-play::after{ border-left-color:var(--on-teal); }
.v-tile:hover .v-thumb{ border-color:var(--text-3); }

.v-empty .v-thumb{
  background:transparent; border-style:dashed;
  display:flex; align-items:center; justify-content:center;
}
.v-soon{ font:500 10.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }

.v-title{ display:block; font-size:13px; font-weight:500; line-height:1.35; margin:0; }
.v-note{ display:block; font-size:11.5px; color:var(--text-3); line-height:1.35; margin:0; }
.v-kind{
  display:inline-block; margin-top:2px; padding:1px 6px;
  font:500 9.5px/1.4 var(--mono); letter-spacing:.05em; text-transform:uppercase;
}
.v-compare{ border:1px solid var(--teal); color:var(--teal); }

/* ---------- Пакет ---------- */
.bundle{
  position:relative; display:grid; grid-template-columns:1.4fr .6fr; gap:44px; align-items:center;
  margin-top:12px; padding:40px; background:var(--surface); border:1px solid var(--line-2); overflow:hidden;
}
.bundle::before{
  content:''; position:absolute; inset:0; opacity:.6; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(90% 120% at 100% 0%, #000 10%, transparent 70%);
          mask-image:radial-gradient(90% 120% at 100% 0%, #000 10%, transparent 70%);
}
.bundle > *{ position:relative; }
.bundle h3{ font-size:clamp(28px,3vw,36px); font-weight:600; margin-bottom:14px; }
.bundle-copy p:last-child{ color:var(--text-2); font-size:16px; max-width:50ch; }
.bundle-copy b{ color:var(--text); }
.bundle-buy{ text-align:center; }
.bundle-old{ font-size:15px; color:var(--text-3); text-decoration:line-through; margin-bottom:4px; }
.bundle-price{ font:600 48px/1 var(--display); letter-spacing:.01em; margin-bottom:18px; font-variant-numeric:tabular-nums; }
.bundle-fine{ margin-top:12px; font-size:12.5px; color:var(--text-3); }

/* ---------- Как работает ---------- */
.how{ padding:84px 0; background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.steps li{ background:var(--surface); border:1px solid var(--line); padding:24px 22px; }
.step-n{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border:1px solid var(--line-2);
  color:var(--text); font:500 14px/1 var(--mono); margin-bottom:18px;
}
.steps h3{ font-size:19px; margin-bottom:10px; }
.steps p{ font-size:14.5px; color:var(--text-3); line-height:1.55; }

/* ---------- Требования ---------- */
.req{ padding:84px 0; }
.req-inner{ display:grid; grid-template-columns:1.25fr .75fr; gap:56px; align-items:start; }
.req h2{ margin-bottom:26px; }
.req-list{ display:flex; flex-direction:column; gap:14px; }
.req-list li{ position:relative; padding-left:26px; font-size:16.5px; color:var(--text-2); }
.req-list li::before{ content:''; position:absolute; left:0; top:12px; width:12px; height:2px; background:var(--teal); }
.req-card{ background:var(--surface); border:1px solid var(--line); padding:28px; }
.req-card h3{ font-size:22px; margin-bottom:12px; }
.req-card p{ font-size:15px; color:var(--text-3); line-height:1.6; margin-bottom:22px; }

/* ---------- Вопросы ---------- */
.faq{ padding:84px 0; background:var(--bg-2); border-top:1px solid var(--line); }
.faq-list{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-size:17.5px; font-weight:500; color:var(--text);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:''; position:absolute; right:10px; top:28px; width:9px; height:9px;
  border-right:2px solid var(--text-3); border-bottom:2px solid var(--text-3);
  transform:rotate(45deg); transition:transform .2s;
}
.faq details[open] summary::after{ transform:rotate(-135deg); top:32px; }
.faq details p{ padding:0 40px 22px 0; color:var(--text-2); font-size:16px; line-height:1.7; }
.faq details p:has(+ .faq-ul){ padding-bottom:6px; }
.faq details a{ color:var(--text); }
.faq-ul{ list-style:disc; padding:0 40px 22px 22px; color:var(--text-2); font-size:16px; line-height:1.7; }

/* ---------- Финальный призыв ---------- */
.final{ padding:92px 0; }
.final-inner{ text-align:center; }
.final h2{ margin-bottom:16px; }
.final p{ color:var(--text-2); font-size:17px; margin-bottom:30px; }

/* ---------- Подвал ---------- */
.site-foot{ background:#08080b; border-top:1px solid var(--line); color:var(--text-3); padding:40px 0; }
.foot-inner{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.foot-brand{ display:flex; align-items:center; gap:12px; color:var(--text); }
.foot-brand .logo-bars{ height:18px; }
.foot-brand .logo-bars i{ width:4px; }
.foot-brand .logo-word{ font-size:14px; }
.foot-seller{ font-size:13.5px; margin-top:10px; }
.foot-links{ display:flex; gap:24px; flex-wrap:wrap; }
.foot-links a{ font-size:14.5px; text-decoration:none; }
.foot-links a:hover{ color:var(--text); }
.foot-contacts{ display:flex; gap:18px; flex-wrap:wrap; font-size:13.5px; margin-top:6px; }
.foot-contacts a{ text-decoration:none; }
.foot-contacts a:hover{ color:var(--text); }

/* Плашка «У вас есть заказ» — ссылка хранится только в браузере */
.order-resume{ background:var(--surface); border-bottom:1px solid var(--line); color:var(--text-2); font-size:14.5px; }
.order-resume-inner{ padding-top:10px; padding-bottom:10px; }
.order-resume a{ color:var(--text); }
a.pick{ text-decoration:none; }

/* ---------- Панель заказа ---------- */
.order-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:rgba(16,16,21,.96); backdrop-filter:blur(14px);
  border-top:1px solid var(--line-2);
  animation:slideUp .22s ease-out;
}
@keyframes slideUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
.order-inner{ display:flex; align-items:center; gap:28px; padding-top:16px; padding-bottom:16px; }
.order-info{ flex:1; min-width:0; }
.order-count{ font-weight:500; font-size:15.5px; }
.order-items{ font-size:13.5px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px; }
.order-sum{ text-align:right; flex:0 0 auto; }
.order-old{ font-size:13.5px; color:var(--text-3); text-decoration:line-through; }
.order-total{ font:600 28px/1.05 var(--display); letter-spacing:.01em; font-variant-numeric:tabular-nums; }
.order-disc{ font:400 12px/1.35 var(--mono); color:var(--teal); margin-top:4px; }
.order-actions{ display:flex; gap:10px; flex:0 0 auto; }

/* ---------- Окна ---------- */
.modal{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:24px; }
.modal-back{ position:absolute; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(3px); }
.modal-box{
  position:relative; background:var(--surface); border:1px solid var(--line-2);
  padding:32px; width:100%; max-width:480px; max-height:88vh; overflow-y:auto;
}
.modal-x{
  position:absolute; right:12px; top:10px; width:36px; height:36px; border:0; background:none;
  font-size:26px; line-height:1; color:var(--text-3); cursor:pointer;
}
.modal-x:hover{ background:var(--surface-2); color:var(--text); }
.modal-box h3{ margin-bottom:20px; font-size:26px; font-weight:600; }
.modal-order{ border-top:1px solid var(--line); margin-bottom:18px; }
.mo-row{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); font-size:15px; }
.mo-row span:last-child{ white-space:nowrap; color:var(--text-3); font-variant-numeric:tabular-nums; }
.mo-total{ display:flex; justify-content:space-between; gap:16px; padding:16px 0 0; font:600 24px/1 var(--display); letter-spacing:.01em; }
.mo-disc{ display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); font-size:15px; color:var(--teal); }
.modal-hint{ font-size:14px; color:var(--text-3); line-height:1.55; margin-bottom:18px; }
.modal-copied{ text-align:center; margin-top:12px; font-size:14px; font-weight:500; color:var(--teal); }

/* Поле ввода */
.field{ display:block; margin-bottom:14px; }
.field-label{ display:block; font-size:13.5px; font-weight:500; color:var(--text-2); margin-bottom:7px; }
.field input{
  width:100%; padding:12px 14px; font:400 16px/1.2 var(--body); color:var(--text);
  background:var(--bg); border:1px solid var(--line-2); border-radius:0;
  transition:border-color .15s, box-shadow .15s;
}
.field input::placeholder{ color:var(--text-3); }
.field input:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-soft); }
.field-error{ margin:-6px 0 14px; font-size:13.5px; color:var(--danger); line-height:1.45; }
.check{ display:flex; gap:10px; align-items:flex-start; margin:2px 0 16px; font-size:14px; color:var(--text-2); cursor:pointer; }
.check input{ margin-top:3px; accent-color:var(--teal); }
.modal-fine{ margin-top:14px; font-size:12.5px; color:var(--text-3); line-height:1.5; text-align:center; }
.modal-fine a{ color:var(--text-2); }
.notify-done{ text-align:center; padding:8px 0 4px; }
.notify-ok{ font:600 22px/1 var(--display); color:var(--teal); margin-bottom:10px; }
.notify-done p{ font-size:14.5px; color:var(--text-2); line-height:1.55; }
/* Видна только в превью-сборке, где серверной части нет. */
.demo-note{ display:none; margin-top:10px; font-size:12.5px; font-style:italic; }
.notify-done.is-demo .demo-note{ display:block; }

/* Плеер */
.modal-video .vbox{ max-width:920px; }
.v-frame{ position:relative; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden; margin-bottom:14px; }
.v-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.v-out{ font-size:14px; font-weight:500; color:var(--text-2); text-decoration:none; }
.v-out:hover{ color:var(--text); text-decoration:underline; }

/* ============================================================
   Адаптив
   ============================================================ */
@media (max-width:1000px){
  .hero-inner{ grid-template-columns:1fr; gap:44px; padding:60px 24px 44px; }
  .hero-panel{ max-width:520px; }
  .pain-grid{ grid-template-columns:repeat(2,1fr); }
  .cards{ grid-template-columns:minmax(0,1fr); }
  .bundle{ grid-template-columns:1fr; gap:28px; padding:32px 28px; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .req-inner{ grid-template-columns:1fr; gap:36px; }
}
@media (max-width:720px){
  body.has-order{ padding-bottom:150px; }
  .nav{ display:none; }
  .logo-prod{ display:none; }
  .head-cta{ margin-left:auto; }
  .lang-switch + .head-cta{ margin-left:0; }
}
@media (max-width:440px){
  .head-inner{ gap:12px; }
  .head-cta{ padding:8px 10px; font-size:13px; }
  .lang-switch a{ padding:6px 5px; }
  .logo-word{ letter-spacing:.22em; }
  .pain-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .hero-facts{ gap:26px; }
  .ribbon-body{ flex-wrap:wrap; }
  .rb-panel{ flex:1 1 33%; }
  .dims span{ font-size:10px; }
  .order-inner{ flex-wrap:wrap; gap:12px; }
  .order-info{ flex:1 1 100%; }
  .order-items{ display:none; }
  .order-sum{ text-align:left; flex:1; }
  .modal-box{ padding:26px 22px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .card-flash{ animation:none; border-color:var(--teal); }
  .order-bar{ animation:none; }
}