/* ============================================================
   INNOVATIONE — дизайн-система
   Единственный CSS-файл проекта. Палитра строго ахроматическая.
   Анимации: только transform и opacity (+ hover-инверсия кнопок/ссылок).
   Изинг: cubic-bezier(.16,1,.3,1).
   ============================================================ */


/* ------------------------------------------------------------
   01. ТОКЕНЫ
   ------------------------------------------------------------ */

:root{
  --bg:#FFFFFF;        /* фон светлых актов */
  --surface:#F4F4F2;   /* подложки */
  --line:#E7E7E4;      /* линии 1px */
  --ink-2:#8B8B88;     /* вторичный текст */
  --ink:#2A2A28;       /* основной текст */
  --bg-dark:#111110;   /* фон тёмных актов */
  --black:#050505;
  --ease:cubic-bezier(.16,1,.3,1);
  --font-sans:'Inter Tight',-apple-system,'Helvetica Neue',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --header-h:72px;

  /* контекстные переменные по умолчанию = светлая тема,
     чтобы компоненты работали и вне [data-theme] */
  --c-bg:var(--bg);
  --c-ink:var(--ink);
  --c-ink2:var(--ink-2);
  --c-line:var(--line);
}

[data-theme="light"]{
  --c-bg:var(--bg);
  --c-ink:var(--ink);
  --c-ink2:var(--ink-2);
  --c-line:var(--line);
  background:var(--c-bg);
  color:var(--c-ink);
}

[data-theme="dark"]{
  --c-bg:var(--bg-dark);
  --c-ink:var(--surface);
  --c-ink2:var(--ink-2);
  --c-line:rgba(244,244,242,.16);
  background:var(--c-bg);
  color:var(--c-ink);
}


/* ------------------------------------------------------------
   02. RESET
   ------------------------------------------------------------ */

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  /* страховка от бокового мотания. Именно clip, а не hidden:
     hidden на корне делает вьюпорт скролл-контейнером и убивает
     все sticky-сцены (.pin__stage, .enfilade, .angles). */
  overflow-x:clip;
}

body{
  font-family:var(--font-sans);
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,h5,h6{
  font-weight:inherit;
  font-size:inherit;
  line-height:inherit;
}

ul,ol{list-style:none;}

a{
  color:inherit;
  text-decoration:none;
}

button,input,textarea,select{
  font:inherit;
  color:inherit;
  letter-spacing:inherit;
  background:none;
  border:none;
  border-radius:0;
}

button{cursor:pointer;}

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

strong,b{font-weight:500;}

em,i{font-style:normal;}

::selection{
  background:var(--ink);
  color:var(--bg);
}

:focus{outline:none;}

:focus-visible{
  outline:1px solid currentColor;
  outline-offset:4px;
}

[id]{scroll-margin-top:calc(var(--header-h) + 24px);}

[hidden]{display:none !important;}


/* ------------------------------------------------------------
   03. ТИПОГРАФИКА
   ------------------------------------------------------------ */

.display{
  font-weight:200;
  font-size:clamp(56px,9vw,160px);
  letter-spacing:-.04em;
  line-height:.95;
}

.display--xl{
  font-size:clamp(64px,11vw,200px);
}

.label{
  font-family:var(--font-mono);
  font-weight:400;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--c-ink2);
}

.num-hero{
  font-weight:200;
  font-size:clamp(96px,13vw,240px);
  letter-spacing:-.04em;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

.num-hero__unit{
  font-family:var(--font-mono);
  font-weight:400;
  font-size:14px;
  letter-spacing:.12em;
  margin-left:.3em;
  vertical-align:baseline;
}

.lead{
  font-size:18px;
  line-height:1.6;
  max-width:62ch;
}

.body{
  font-size:16px;
  line-height:1.6;
  max-width:62ch;
}

.price{
  font-family:var(--font-mono);
  font-weight:400;
  font-size:15px;
  font-variant-numeric:tabular-nums;
}

/* страховка: длинное слово или артикул не распирает крупный кегль.
   На текущем контенте переносить нечего — раскладка не меняется. */
.display,
.p-hero__title,
.num-hero,
.sheet__val,
.cat-row__title,
.flip-nav__name{
  overflow-wrap:break-word;
}

/* этикетаж внутри SVG-чертежей */
text.svg-mono,.svg-mono{
  font-family:var(--font-mono);
  font-weight:400;
  font-size:11px;
  letter-spacing:.12em;
  fill:currentColor;
}


/* ------------------------------------------------------------
   04. СЕТКА И РИТМ
   ------------------------------------------------------------ */

.wrap{padding-inline:6vw;}

.act{padding-block:clamp(200px,16vw,280px);}


/* ------------------------------------------------------------
   05. ЖЕСТЫ: КНОПКА, ССЫЛКА, ПОЯВЛЕНИЕ
   ------------------------------------------------------------ */

/* Кнопка: прямоугольник, hover — инверсия заливки */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:18px 34px;
  border:1px solid currentColor;
  font-family:var(--font-mono);
  font-weight:400;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.18em;
  line-height:1;
  background:transparent;
  color:inherit;
  transition:background .3s var(--ease),color .3s var(--ease);
}

.btn:hover{
  background:var(--c-ink);
  color:var(--c-bg);
}

.btn--solid{
  background:var(--c-ink);
  color:var(--c-bg);
  border-color:var(--c-ink);
}

.btn--solid:hover{
  background:transparent;
  color:var(--c-ink);
}

.btn:disabled{
  pointer-events:none;
}

/* Ссылка: подчёркивание линией 1px */
.link{
  position:relative;
  display:inline-block;
}

.link::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-3px;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .25s var(--ease);
}

.link:hover::after,
.link:focus-visible::after,
.link[aria-current="page"]::after{
  transform:scaleX(1);
  transform-origin:left;
}

/* Появление по скроллу: app.js добавляет .is-visible */
[data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}

[data-reveal].is-visible{
  opacity:1;
  transform:none;
}


/* ------------------------------------------------------------
   06. ПОСТАНОВОЧНЫЙ СВЕТ И ДЕКОР
   ------------------------------------------------------------ */

/* Плинт: луч света сверху + размытая тень-эллипс снизу */
.plinth{
  position:relative;
  z-index:0;
}

.plinth::before{
  content:'';
  position:absolute;
  z-index:-1;
  top:-12%;
  left:50%;
  width:130%;
  height:85%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse 50% 55% at 50% 0%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%);
  pointer-events:none;
}

[data-theme="dark"] .plinth::before{
  background:radial-gradient(ellipse 50% 55% at 50% 0%,rgba(244,244,242,.07),rgba(244,244,242,0) 70%);
}

.plinth::after{
  content:'';
  position:absolute;
  z-index:-1;
  bottom:-3%;
  left:50%;
  width:68%;
  height:26px;
  transform:translateX(-50%);
  background:rgba(5,5,5,.07);
  border-radius:50%;
  filter:blur(14px);
  pointer-events:none;
}

[data-theme="dark"] .plinth::after{
  background:rgba(5,5,5,.1);
}

/* Гигантский контурный номер за чертежом. Статичный. */
.ghost-num{
  position:absolute;
  z-index:0;
  font-weight:200;
  font-size:20vw;
  letter-spacing:-.04em;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(5,5,5,.04);
  user-select:none;
  pointer-events:none;
}

[data-theme="dark"] .ghost-num{
  -webkit-text-stroke:1px rgba(244,244,242,.05);
}

/* Приглашение к скроллу: линия 1px с тихим пульсом */
.scroll-hint{
  position:relative;
  display:block;
  width:1px;
  height:48px;
  background:var(--c-line);
  overflow:hidden;
}

.scroll-hint::after{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:1px;
  height:100%;
  background:var(--c-ink);
  animation:scroll-hint 2.4s var(--ease) infinite;
}

@keyframes scroll-hint{
  0%{transform:translateY(-100%);}
  55%{transform:translateY(100%);}
  100%{transform:translateY(100%);}
}

/* Прорисовка чертежей: заливки .fill проявляются после .is-drawn */
svg .fill{
  opacity:0;
  transition:opacity .6s var(--ease);
}

svg.is-drawn .fill,
.is-drawn svg .fill,
.is-drawn .fill{
  opacity:1;
}


/* ------------------------------------------------------------
   07. ПРЕЛОАДЕР И ШТОРКА
   ------------------------------------------------------------ */

.preloader{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:28px;
  background:var(--bg);
  color:var(--ink);
  transition:opacity .4s var(--ease);
}

.preloader__logo{
  width:clamp(200px,24vw,300px);
  aspect-ratio:1001/138;
  background:currentColor;
  -webkit-mask:url(../img/logo.png) no-repeat center/contain;
  mask:url(../img/logo.png) no-repeat center/contain;
  opacity:0;
  animation:pre-fade .6s var(--ease) .1s forwards;
}

.preloader__bar{
  width:min(220px,40vw);
  height:1px;
  background:var(--line);
  overflow:hidden;
}

.preloader__bar span{
  display:block;
  width:100%;
  height:100%;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left;
  animation:pre-bar .9s var(--ease) .25s forwards;
}

.preloader.is-done,
.preloader.is-hidden{
  opacity:0;
  pointer-events:none;
}

/* повторный визит в рамках сессии — прелоадера нет вовсе */
html.is-revisit .preloader{display:none;}

@keyframes pre-fade{to{opacity:1;}}
@keyframes pre-bar{to{transform:scaleX(1);}}

/* Шторка переходов: всегда фон --bg, без тёмных вспышек */
.curtain{
  position:fixed;
  inset:0;
  z-index:980;
  background:var(--bg);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s var(--ease);
}

.curtain.is-on,
.curtain.is-active{
  opacity:1;
  pointer-events:auto;
}


/* ------------------------------------------------------------
   08. HEADER
   ------------------------------------------------------------ */

.header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:900;
  height:var(--header-h);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding-inline:6vw;
  background:transparent;
  color:var(--ink);
  transition:color .35s var(--ease), background-color .35s var(--ease);
}

.header::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:currentColor;
  opacity:0;
  transition:opacity .35s var(--ease);
}

.header.is-scrolled::after{opacity:.14;}

/* подложка при скролле: контент не спорит с шапкой */
.header.is-scrolled{background:rgba(255,255,255,.92);}

.header--dark{color:var(--surface);}

.header.is-scrolled.header--dark{background:rgba(17,17,16,.92);}

/* текст только для скринридеров и поиска */
.vh{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.header__logo{
  justify-self:start;
  width:150px;
  aspect-ratio:1001/138;
  background:currentColor;
  -webkit-mask:url(../img/logo.png) no-repeat left center/contain;
  mask:url(../img/logo.png) no-repeat left center/contain;
}

/* если маски не поддерживаются — вместо плашки текстовый логотип.
   Сам блок живёт в §27, в самом конце файла: он обязан перебивать
   мобильные width логотипа из §25 по порядку каскада. */

.header__nav{
  display:flex;
  gap:36px;
  font-size:14px;
  font-weight:300;
}

.header__aside{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:32px;
}

.header__phone{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
}

.header__cart{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
}

.header__cart-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding-inline:5px;
  border:1px solid currentColor;
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
}

.header__cart-count.is-bump{
  animation:cart-bump .45s var(--ease);
}

@keyframes cart-bump{
  0%{transform:scale(1);}
  35%{transform:scale(1.3);}
  100%{transform:scale(1);}
}


/* ------------------------------------------------------------
   09. FOOTER
   ------------------------------------------------------------ */

.footer{
  position:relative;
  overflow:hidden;
  padding-top:clamp(120px,10vw,180px);
}

.footer__grid{
  display:grid;
  grid-template-columns:2fr 1.5fr 1.5fr;
  gap:clamp(40px,5vw,80px);
  padding-bottom:clamp(90px,9vw,150px);
}

.footer__col{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
}

.footer__col .label{margin-bottom:8px;}

.footer__col .link{
  font-size:15px;
  font-weight:300;
}

.footer__addr,
.footer__about{
  font-size:14px;
  line-height:1.7;
  color:var(--c-ink2);
}

.footer__legal{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--c-ink2);
  margin-top:24px;
}

/* гигантский логотип, обрезанный по нижней кромке */
.footer__logo{
  width:76vw;
  aspect-ratio:1001/138;
  margin:0 auto -2.4vw;
  background:rgba(244,244,242,.08);
  -webkit-mask:url(../img/logo.png) no-repeat center/contain;
  mask:url(../img/logo.png) no-repeat center/contain;
  user-select:none;
  pointer-events:none;
}


/* ------------------------------------------------------------
   10. PIN-СЦЕНЫ (общий каркас)
   ------------------------------------------------------------ */

.pin{position:relative;}

.pin__stage{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
}


/* ------------------------------------------------------------
   11. INDEX: ГЕРОЙ
   ------------------------------------------------------------ */

.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:var(--header-h);
}

.hero__title{
  overflow:hidden;
  padding-bottom:.06em; /* запас, чтобы клип не резал кромку */
}

/* буквы поднимаются снизу; stagger — через --i на каждой букве */
.hero__l{
  display:inline-block;
  transform:translateY(115%);
  opacity:0;
  transition:transform .9s var(--ease),opacity .9s var(--ease);
  transition-delay:calc(var(--i,0)*70ms);
}

.is-in .hero__l,
.hero__l.is-in{
  transform:none;
  opacity:1;
}

.hero__art{
  position:relative;
  width:min(88vw,1100px);
  margin-inline:auto;
}

.hero__art svg{
  width:100%;
  height:auto;
}

.hero__line{
  font-size:15px;
  line-height:1.6;
  color:var(--c-ink2);
  max-width:36ch;
}


/* ------------------------------------------------------------
   12. INDEX: МАНИФЕСТ
   ------------------------------------------------------------ */

.manifesto__text{
  font-weight:200;
  font-size:clamp(28px,4vw,58px);
  letter-spacing:-.02em;
  line-height:1.25;
  max-width:24ch;
}

.manifesto__w{
  color:var(--c-ink2);
  transition:color .3s var(--ease);
}

.manifesto__w.is-on{
  color:var(--black);
}

[data-theme="dark"] .manifesto__w.is-on{
  color:var(--surface);
}


/* ------------------------------------------------------------
   13. INDEX: АНФИЛАДА
   ------------------------------------------------------------ */

.enfilade__track{
  display:flex;
  align-items:center;
  gap:clamp(64px,8vw,140px);
  padding-inline:6vw;
  will-change:transform;
}

.exhibit{
  flex:0 0 auto;
  width:min(56vw,620px);
  color:inherit;
}

.exhibit__art{
  position:relative;
}

.exhibit__art svg{
  width:100%;
  height:auto;
}

.exhibit__meta{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  margin-top:22px;
  padding-top:14px;
  border-top:1px solid var(--c-line);
}

.enfilade__cta{
  flex:0 0 auto;
  width:min(44vw,540px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:28px;
}


/* ------------------------------------------------------------
   14. INDEX: ТИЗЕР, ЦИФРЫ, КАТЕГОРИИ, ФИНАЛ
   ------------------------------------------------------------ */

.teaser{position:relative;}

.teaser__art{
  position:relative;
  width:min(80vw,960px);
  margin-inline:auto;
}

.teaser__art svg{
  width:100%;
  height:auto;
}

.stats-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(32px,4vw,64px);
}

.stat{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}

.stat__num{
  font-weight:200;
  font-size:clamp(64px,8vw,140px);
  letter-spacing:-.04em;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

.stat__unit{
  font-family:var(--font-mono);
  font-size:14px;
  letter-spacing:.12em;
  margin-left:.3em;
}

.stat__note{
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--c-ink2);
}

/* строки категорий */
.cat-rows{border-bottom:1px solid var(--c-line);}

.cat-row{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding-block:clamp(28px,4vw,52px);
  border-top:1px solid var(--c-line);
  color:inherit;
  transition:transform .3s var(--ease);
}

.cat-row:hover{transform:translateY(-4px);}

.cat-row__title{
  font-weight:200;
  font-size:clamp(32px,5vw,88px);
  letter-spacing:-.04em;
  line-height:1;
  transition:transform .3s var(--ease);
}

.cat-row__minis{
  display:flex;
  align-items:center;
  gap:20px;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}

.cat-row:hover .cat-row__minis,
.cat-row:focus-visible .cat-row__minis{
  opacity:1;
  transform:none;
}

.cat-row__minis svg{
  width:auto;
  height:clamp(48px,5vw,76px);
}

.cta-final{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:36px;
}


/* ------------------------------------------------------------
   15. КАТАЛОГ
   ------------------------------------------------------------ */

.catalog-head{
  padding-top:calc(var(--header-h) + clamp(64px,8vw,128px));
  padding-bottom:clamp(48px,5vw,80px);
}

.catalog-count{
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--c-ink2);
}

.filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.filter-btn{
  padding:11px 20px;
  border:1px solid var(--c-line);
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.16em;
  line-height:1;
  white-space:nowrap;
  color:var(--c-ink2);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}

.filter-btn:hover{
  color:var(--c-ink);
  border-color:var(--c-ink);
}

.filter-btn.is-active{
  background:var(--c-ink);
  color:var(--c-bg);
  border-color:var(--c-ink);
}

/* сетка карточек */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--surface);
  color:var(--ink);
  padding:clamp(24px,2.5vw,40px);
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}

.card:hover{transform:translateY(-5px);}

/* помощники фильтрации: fade без прыжков (класс ставит JS страницы) */
.card.is-hiding{
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
}

.card.is-hidden{display:none;}

.card__tag{
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--ink-2);
}

.card__art{
  position:relative;
  margin-block:clamp(20px,2vw,32px);
}

.card__art svg{
  width:100%;
  height:auto;
}

.card__art > *{
  transition:opacity .3s var(--ease);
}

.card__alt{
  position:absolute;
  inset:0;
  opacity:0;
}

.card:hover .card__art > :not(.card__alt){opacity:.12;}
.card:hover .card__alt{opacity:1;}

.card__name{
  font-weight:200;
  font-size:clamp(22px,1.8vw,30px);
  letter-spacing:-.02em;
  line-height:1.1;
}

.card__kind{
  font-size:13px;
  color:var(--ink-2);
  margin-top:6px;
}

.card__price{
  font-family:var(--font-mono);
  font-size:15px;
  font-variant-numeric:tabular-nums;
  margin-top:18px;
}

.card__buy{
  align-self:flex-start;
  margin-top:20px;
  padding:12px 22px;
  border:1px solid currentColor;
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.16em;
  line-height:1;
  transition:background .3s var(--ease),color .3s var(--ease);
}

.card__buy:hover{
  background:var(--ink);
  color:var(--bg);
}


/* ------------------------------------------------------------
   16. QUICK-VIEW
   ------------------------------------------------------------ */

.qv{
  position:fixed;
  inset:0;
  z-index:960;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4vh 4vw;
  visibility:hidden;
  pointer-events:none;
}

.qv.is-open{
  visibility:visible;
  pointer-events:auto;
}

.qv__backdrop{
  position:absolute;
  inset:0;
  background:rgba(5,5,5,.42);
  opacity:0;
  transition:opacity .3s var(--ease);
}

.qv.is-open .qv__backdrop{opacity:1;}

.qv__panel{
  position:relative;
  width:min(880px,92vw);
  max-height:88vh;
  overflow-y:auto;
  background:var(--bg);
  color:var(--ink);
  padding:clamp(28px,4vw,56px);
  opacity:0;
  transform:translateY(16px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}

.qv.is-open .qv__panel{
  opacity:1;
  transform:none;
}

.qv__art{
  background:var(--surface);
  padding:clamp(24px,3vw,48px);
}

.qv__art svg{
  width:100%;
  height:auto;
}

.qv__meta{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:clamp(20px,2.5vw,32px);
}

.qv__note{
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--ink-2);
  margin-top:16px;
}

/* крестик двумя линиями */
.qv__close{
  position:absolute;
  top:14px;
  right:14px;
  width:44px;
  height:44px;
  opacity:.7;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}

.qv__close::before,
.qv__close::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:20px;
  height:1px;
  background:currentColor;
}

.qv__close::before{transform:translate(-50%,-50%) rotate(45deg);}
.qv__close::after{transform:translate(-50%,-50%) rotate(-45deg);}

.qv__close:hover{
  opacity:1;
  transform:rotate(90deg);
}


/* ------------------------------------------------------------
   17. ТОВАРНАЯ СТРАНИЦА: ШАПКА ЭКСПОНАТА
   ------------------------------------------------------------ */

.crumbs{
  display:flex;
  align-items:center;
  gap:14px;
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--c-ink2);
}

.p-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:calc(var(--header-h) + 24px);
}

.p-hero__title{
  font-weight:200;
  font-size:clamp(56px,10vw,180px);
  letter-spacing:-.04em;
  line-height:.95;
}

.p-hero__kind{
  font-size:17px;
  color:var(--c-ink2);
}

.p-hero__art{
  position:relative;
  width:min(82vw,980px);
  margin-inline:auto;
}

.p-hero__art svg{
  width:100%;
  height:auto;
}

.p-hero__price{
  font-family:var(--font-mono);
  font-size:15px;
  font-variant-numeric:tabular-nums;
}

.p-hero__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
}

/* фиксированная полка снизу: имя + цена + кнопка */
.stickybar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:800;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:14px 6vw;
  background:var(--bg);
  color:var(--ink);
  border-top:1px solid var(--line);
  transform:translateY(100%);
  transition:transform .45s var(--ease);
}

.stickybar.is-visible{transform:none;}


/* ------------------------------------------------------------
   18. СЦЕНА «РОЖДЕНИЕ ФОРМЫ»
   ------------------------------------------------------------ */

.birth__art{
  position:relative;
  width:min(74vw,1100px);
  margin-inline:auto;
}

.birth__art svg{
  width:100%;
  height:auto;
}

/* вертикальная шкала слева; заполнение — scaleY(var(--p)),
   --p ставит App.addPin на секцию */
.birth__rail{
  position:absolute;
  left:6vw;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:38vh;
  background:var(--c-line);
}

.birth__rail::after{
  content:'';
  position:absolute;
  inset:0;
  background:var(--c-ink);
  transform:scaleY(var(--p,0));
  transform-origin:top;
}

.birth__phase{
  position:absolute;
  left:calc(6vw + 20px);
  bottom:9vh;
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--c-ink2);
}

/* выноска: точка + линия + mono-подпись */
.callout{
  position:absolute;
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--c-ink2);
  opacity:0;
  transition:opacity .5s var(--ease);
}

.callout::before{
  content:'';
  flex:0 0 auto;
  width:5px;
  height:5px;
  border:1px solid currentColor;
  border-radius:50%;
}

.callout__line{
  flex:0 0 auto;
  width:56px;
  height:1px;
  background:currentColor;
  opacity:.5;
}

.callout.is-on,
.callout.is-visible{opacity:1;}


/* ------------------------------------------------------------
   19. «ЧИСЛА» И LOOP-СЦЕНА
   ------------------------------------------------------------ */

.numbers__screen{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  text-align:center;
}

.loop-scene{position:relative;}

.loop-scene__stage{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.loop-scene__stage svg{
  width:min(76vw,1000px);
  height:auto;
}

/* прогресс цикла: заполнение — scaleX(var(--p)), --p ставит JS */
.loop-scene__bar{
  position:absolute;
  left:6vw;
  right:6vw;
  bottom:6vh;
  height:1px;
  background:var(--c-line);
}

.loop-scene__bar::after{
  content:'';
  position:absolute;
  inset:0;
  background:var(--c-ink);
  transform:scaleX(var(--p,0));
  transform-origin:left;
}

.loop-scene__tag{
  position:absolute;
  left:6vw;
  bottom:calc(6vh + 18px);
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--c-ink2);
}


/* ------------------------------------------------------------
   20. «РАКУРСЫ»
   ------------------------------------------------------------ */

.angles .pin__stage{
  justify-content:center;
}

.angles__view{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  pointer-events:none;
}

.angles__view.is-active{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.angles__view svg{
  width:min(64vw,860px);
  height:auto;
}

.angles__tabs{
  position:absolute;
  left:50%;
  bottom:8vh;
  transform:translateX(-50%);
  display:flex;
  gap:32px;
  z-index:2;
}

.angles__tab{
  position:relative;
  padding:8px 0;
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--c-ink2);
  transition:color .3s var(--ease);
}

.angles__tab::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .25s var(--ease);
}

.angles__tab:hover{color:var(--c-ink);}

.angles__tab.is-active{color:var(--c-ink);}

.angles__tab.is-active::after{
  transform:scaleX(1);
  transform-origin:left;
}

.angles__caption{
  position:absolute;
  left:6vw;
  bottom:8vh;
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--c-ink2);
}


/* ------------------------------------------------------------
   21. ГАБАРИТЫ И СПЕЦИФИКАЦИЯ
   ------------------------------------------------------------ */

.dims__art{
  position:relative;
  width:min(78vw,980px);
  margin-inline:auto;
}

.dims__art svg{
  width:100%;
  height:auto;
}

.dims__table{
  width:100%;
  border-collapse:collapse;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}

.dims__table th,
.dims__table td{
  padding:14px 0;
  border-top:1px solid var(--c-line);
  text-align:left;
  font-weight:400;
  vertical-align:baseline;
}

.dims__table th:last-child,
.dims__table td:last-child{text-align:right;}

.dims__table tr:last-child th,
.dims__table tr:last-child td{border-bottom:1px solid var(--c-line);}

/* editorial-разворот спецификации */
.sheet__row{
  display:grid;
  grid-template-columns:minmax(160px,1fr) 2.2fr;
  gap:clamp(20px,3vw,48px);
  align-items:baseline;
  padding-block:clamp(20px,2.4vw,34px);
  border-top:1px solid var(--c-line);
}

.sheet__row:last-child{border-bottom:1px solid var(--c-line);}

.sheet__key{
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--c-ink2);
}

.sheet__val{
  font-weight:200;
  font-size:clamp(22px,2.6vw,42px);
  letter-spacing:-.02em;
  line-height:1.15;
  font-variant-numeric:tabular-nums;
}


/* ------------------------------------------------------------
   22. AR-БЛОК
   ------------------------------------------------------------ */

.ar-viewer{
  display:block;
  width:100%;
  height:70vh;
  background:var(--surface);
}

.ar-note{margin-top:16px;}

.ar-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:70vh;
  background:var(--surface);
  color:var(--ink);
  padding:clamp(24px,4vw,64px);
}

.ar-fallback svg{
  width:auto;
  height:100%;
  max-height:56vh;
}


/* ------------------------------------------------------------
   23. ФОРМА ЗАЯВКИ
   ------------------------------------------------------------ */

.order{position:relative;}

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

.field label{
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--c-ink2);
}

.field input,
.field textarea{
  width:100%;
  padding:12px 0;
  font-weight:300;
  font-size:18px;
  line-height:1.4;
  background:transparent;
  border-bottom:1px solid var(--c-line);
  transition:border-color .3s var(--ease);
}

.field input:focus-visible,
.field textarea:focus-visible{
  outline:none;
  border-bottom-color:var(--c-ink);
}

.field input::placeholder,
.field textarea::placeholder{
  color:var(--c-ink2);
  opacity:1;
}

.order__btn{margin-top:8px;}

.order__note{
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--c-ink2);
}


/* ------------------------------------------------------------
   24. RELATED И ПЕРЕЛИСТЫВАНИЕ
   ------------------------------------------------------------ */

.related{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.flip-nav{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
  padding-block:clamp(80px,10vw,150px);
  border-top:1px solid var(--c-line);
  color:inherit;
}

.flip-nav__name{
  font-weight:200;
  font-size:clamp(48px,8vw,140px);
  letter-spacing:-.04em;
  line-height:.95;
  display:flex;
  align-items:center;
  gap:.35em;
  transition:transform .3s var(--ease);
}

.flip-nav:hover .flip-nav__name{transform:translateY(-6px);}

.flip-nav__arrow{
  flex:0 0 auto;
  width:.55em;
  height:auto;
}

.flip-nav__arrow *{
  stroke:currentColor;
  fill:none;
  vector-effect:non-scaling-stroke;
}


/* ------------------------------------------------------------
   25. АДАПТИВ
   ------------------------------------------------------------ */

@media (max-width:1024px){
  .act{padding-block:clamp(140px,14vw,200px);}
  .exhibit{width:min(64vw,560px);}
  .footer__grid{grid-template-columns:1fr 1fr;}

  /* Шапка: у трека 1fr нет собственного зазора, поэтому логотип
     упирается в меню. Даём воздух и запрещаем пунктам ломаться. */
  .header{column-gap:clamp(12px,4vw,20px);}
  .header__nav{white-space:nowrap;}
  .header__nav .link{flex:0 0 auto;}

  /* Плинт: коробка светового пятна была 130% и вылезала за вьюпорт
     (именно она давала 28px переполнения на index). Сужаем коробку
     до 100%, радиус компенсируем 50% → 65% — абсолютный размер
     пятна тот же (.5×130% = .65×100%), визуально изменений нет. */
  .plinth::before{
    width:100%;
    background:radial-gradient(ellipse 65% 55% at 50% 0%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%);
  }

  [data-theme="dark"] .plinth::before{
    background:radial-gradient(ellipse 65% 55% at 50% 0%,rgba(244,244,242,.07),rgba(244,244,242,0) 70%);
  }
}

@media (max-width:768px){
  :root{--header-h:56px;}

  .header__phone{display:none;}
  .header__nav{gap:24px;}
  .header__aside{gap:0;}
  /* логотип — единственный жёсткий размер в шапке, он и не влезал */
  .header__logo{width:clamp(88px,24vw,108px);}
  /* корзина: тач-цель 44px по высоте, ширина не меняется */
  .header__cart{padding-block:11px;}

  /* mono-строки и артикулы не распирают раскладку */
  .label,
  .crumbs{overflow-wrap:anywhere;}

  .cards{grid-template-columns:repeat(2,1fr);gap:16px;}
  .related{grid-template-columns:1fr;}

  .stats-row{grid-template-columns:1fr;gap:64px;}

  .cat-row__minis{display:none;}
  .cat-row:hover{transform:none;}

  /* тач: hover залипает после тапа — карточка оставалась приподнятой
     с погашенным чертежом. Альтернативный ракурс на мобильном не жест. */
  .card:hover{transform:none;}
  .card:hover .card__art > :not(.card__alt){opacity:1;}
  .card:hover .card__alt{opacity:0;}

  /* анфилада — вертикальная лента без пина */
  .enfilade{height:auto !important;}
  .enfilade .pin__stage{
    position:static;
    height:auto;
    overflow:visible;
  }
  .enfilade__track{
    flex-direction:column;
    align-items:stretch;
    gap:96px;
    transform:none !important;
    padding-block:24px;
  }
  .exhibit,
  .enfilade__cta{width:100%;}

  /* ракурсы — компактная сцена, переключение вкладками */
  .angles{height:auto !important;}
  .angles .pin__stage{
    position:relative;
    height:auto;
    min-height:80vh;
  }
  .angles__view svg{width:82vw;}
  .angles__tabs{gap:20px;}
  .angles__caption{display:none;}

  .birth__rail{display:none;}
  .birth__phase{left:6vw;}
  .birth__art{width:88vw;}

  /* резервируем полосу под крошки: они спозиционированы абсолютно
     под шапкой и садились на первую строку этикетажа */
  .p-hero{padding-top:calc(var(--header-h) + 76px);}
  .p-hero__art{width:92vw;}

  /* крошки честно уходят второй строкой вместо обрезки */
  .crumbs{
    flex-wrap:wrap;
    row-gap:6px;
    column-gap:10px;
  }
  .loop-scene__stage svg{width:88vw;}
  .dims__art{width:92vw;}

  .sheet__row{
    grid-template-columns:1fr;
    gap:10px;
  }

  /* модалка меряется по динамическому вьюпорту: при 100vh её верх
     с крестиком уезжал под адресную строку мобильного браузера */
  .qv{
    bottom:auto;
    height:100dvh;
    padding:3dvh 3vw;
  }
  .qv__panel{
    width:100%;
    max-height:88dvh;
    padding:24px;
    padding-top:12px;
  }

  /* крестик — в потоке и липкий: панель скроллится, и абсолютный
     крестик уезжал вверх вместе с контентом. Ритм тот же: 12+44=56 */
  .qv__close{
    position:sticky;
    top:0;
    right:auto;
    display:block;
    margin-left:auto;
    margin-right:-8px;
    background:var(--bg);
    z-index:2;
  }

  .stickybar{
    gap:14px;
    padding:12px 6vw calc(12px + env(safe-area-inset-bottom,0px));
  }

  /* полка: имя убираем раньше, кнопку не даём сжать и перенести */
  .stickybar__name{display:none;}

  .stickybar .btn{
    flex:0 0 auto;
    white-space:nowrap;
    padding:13px 20px;
  }

  .footer__grid{grid-template-columns:1fr;gap:48px;}
  .footer__logo{width:86vw;margin-bottom:-2vw;}

  .ar-viewer,
  .ar-fallback{height:56vh;}

  .ghost-num{font-size:34vw;}
}

@media (max-width:560px){
  .cards{grid-template-columns:1fr;}

  /* длинные подписи кнопок переносятся — строки не должны слипаться */
  .btn{
    padding:15px 22px;
    line-height:1.35;
    text-align:center;
  }

  /* шапка на самых узких: логотип мельче, меню плотнее,
     подпись «Корзина» уходит — у кнопки есть aria-label,
     а счётчик несёт всю информацию */
  .header__logo{width:clamp(72px,20vw,88px);}
  .header__nav{gap:18px;}
  .header__cart{gap:0;}
  .header__cart-label{display:none;}

  /* тач-цели фильтров и «в корзину» в карточке */
  .filter-btn{padding:14px 18px;}
  .card__buy{padding:14px 20px;}

  /* этикетка экспоната: номер зала и цена не спорят за одну строку */
  .exhibit__meta{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .p-hero__actions{align-items:stretch;flex-direction:column;}
  .p-hero__actions .btn{width:100%;}
}


/* ------------------------------------------------------------
   26. REDUCED MOTION
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}

  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }

  /* финальные состояния видны без анимаций */
  [data-reveal]{opacity:1;transform:none;}
  .hero__l{opacity:1;transform:none;}
  .manifesto__w{color:inherit;}
  .scroll-hint::after{animation:none;transform:none;}
  .preloader__logo{opacity:1;animation:none;}
  .preloader__bar span{transform:scaleX(1);animation:none;}
  svg .fill{opacity:1;}
  .callout{opacity:1;}
}


/* ------------------------------------------------------------
   27. ФОЛБЭК: БРАУЗЕРЫ БЕЗ МАСОК
   Блок обязан оставаться последним в файле: он возвращает
   текстовый логотип и должен перебивать мобильные width
   логотипа из §25 по порядку каскада, без !important.
   ------------------------------------------------------------ */

@supports not ((-webkit-mask-image:url(#m)) or (mask-image:url(#m))){
  .header__logo,
  .preloader__logo,
  .footer__logo{
    width:auto;
    aspect-ratio:auto;
    background:none;
  }

  .header__logo .vh{
    position:static;
    width:auto;
    height:auto;
    margin:0;
    overflow:visible;
    clip-path:none;
    font-weight:500;
    font-size:14px;
    letter-spacing:.14em;
  }
}