/* ============================================================
   СКРЯБИН · Бренд — визуальный код «Vanmoof».
   Кинематографичный монохром: чёрное/белое/серое, гигантская
   типографика как граф-объект, материал = единственный цвет.
   Никакого хроматического акцента, только hairline #e5e7eb.
   Самодостаточная страница. Шрифты: Inter + JetBrains Mono (замены).
   ============================================================ */
@property --lx { syntax:'<percentage>'; inherits:true; initial-value:60%; }
@property --ly { syntax:'<percentage>'; inherits:true; initial-value:40%; }

:root{
  --carbon:#222222; --obsidian:#000000; --graphite:#313131;
  --frost:#ffffff; --paper:#f7f7f7; --mist:#e5e7eb; --ash:#e0e0e0;
  --font:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease:cubic-bezier(0.22,0.61,0.36,1);
  --edge:clamp(1.25rem,4vw,3rem);
  --maxw:1440px; --cw:1200px;
  --navh:78px; /* [audit] real sticky-nav height, used by sub-bars */

  --m-graphite:linear-gradient(140deg, oklch(0.30 0.012 60), oklch(0.15 0.010 60));
  --m-red:linear-gradient(140deg, oklch(0.46 0.13 42), oklch(0.28 0.10 38));
  --m-brown:linear-gradient(140deg, oklch(0.42 0.075 55), oklch(0.24 0.05 50));
  --m-grey:linear-gradient(140deg, oklch(0.60 0.008 250), oklch(0.40 0.008 250));
  --m-bone:linear-gradient(140deg, oklch(0.80 0.032 76), oklch(0.62 0.030 72));
  --m-slate:linear-gradient(140deg, oklch(0.40 0.022 240), oklch(0.24 0.020 240));
  --m-corten:linear-gradient(140deg, oklch(0.54 0.125 52), oklch(0.32 0.11 44));
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{ font-family:var(--font); background:var(--frost); color:var(--obsidian); line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--carbon); outline-offset:2px; }
.mono{ font-family:var(--mono); font-size:14px; letter-spacing:.02em; }
.cwrap{ max-width:var(--cw); margin:0 auto; padding:0 var(--edge); }

/* ---------------------------------------------------------- UTILITY BAR */
.ubar{ background:var(--frost); border-bottom:1px solid var(--mist); }
.ubar__in{ max-width:var(--maxw); margin:0 auto; padding:0 var(--edge); min-height:40px; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.ubar__txt{ font-family:var(--mono); font-size:13px; color:var(--obsidian); }
.ubar__txt b{ font-weight:400; }
.ubar__btn{ background:var(--carbon); color:var(--frost); font-size:13px; font-weight:600; padding:.4rem 1rem; border:0; border-radius:2px; }

/* ---------------------------------------------------------- NAV */
.nav{ position:sticky; top:0; z-index:100; background:var(--carbon); color:var(--frost); }
.nav__in{ max-width:var(--maxw); margin:0 auto; padding:0 var(--edge); height:78px; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.nav__left, .nav__right{ display:flex; align-items:center; gap:1.1rem; flex:1; }
.nav__right{ justify-content:flex-end; }
.nav__ico{ width:22px; height:22px; color:var(--frost); background:none; border:0; display:grid; place-items:center; }
.nav__pill{ border:1px solid var(--frost); border-radius:9999px; padding:6px 20px; font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--frost); white-space:nowrap; }
.nav__links{ display:flex; gap:1.4rem; }
.nav__links a{ font-family:var(--mono); font-size:14.5px; color:var(--frost); opacity:.72; transition:opacity .2s ease; }
.nav__logo{ display:inline-flex; align-items:center; }
.nav__logo img{ height:36px; width:auto; display:block; }
.nav__links a:hover, .nav__links a[aria-current]{ opacity:1; }
@media (max-width:860px){ .nav__links{ display:none; } }

/* ---------------------------------------------------------- MATERIAL SURFACE */
.mat{ position:relative; background:var(--m-graphite); background-size:cover; background-position:center; isolation:isolate; overflow:hidden; }
.mat::before{ content:''; position:absolute; inset:0; z-index:0; background-image:url("img/tex-1.jpg"); background-size:cover; background-position:center; mix-blend-mode:soft-light; opacity:.5; }
.mat::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(48% 50% at var(--lx,60%) var(--ly,40%), rgba(255,255,255,.14) 0%, transparent 62%); }
.mat > *{ position:relative; z-index:2; }
.mat.m-graphite{ background-image:var(--m-graphite); }
.mat.m-red{ background-image:var(--m-red); }
.mat.m-brown{ background-image:var(--m-brown); }
.mat.m-grey{ background-image:var(--m-grey); }
.mat.m-bone{ background-image:var(--m-bone); }
.mat.m-slate{ background-image:var(--m-slate); }
.mat.m-corten{ background-image:var(--m-corten); }
.mat.m-slate::before{ opacity:.34; mix-blend-mode:overlay; }
.mat.m-corten::before{ opacity:.4; mix-blend-mode:overlay; }

/* ---------------------------------------------------------- FULL-BLEED DARK HERO */
.vhero{ position:relative; width:100%; min-height:clamp(30rem,88vh,56rem); display:flex; align-items:center; color:var(--frost); overflow:hidden; }
.vhero__grid{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding:6rem var(--edge); }
.pname{ display:block; font-weight:700; line-height:.9; letter-spacing:-0.03em; font-size:clamp(3.5rem,13.5vw,13rem); white-space:nowrap; }
.pmeta{ display:block; margin-top:1rem; color:rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:.14em; }
.vsupport{ position:absolute; top:50%; right:var(--edge); transform:translateY(-50%); max-width:280px; text-align:right; }
.vsupport p{ font-size:16px; line-height:1.5; color:var(--frost); }
.vsupport .ghost{ margin-top:1rem; }
/* ghost CTA */
.ghost{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--frost); color:var(--frost); background:transparent; border-radius:2px; padding:8px 24px; font-size:14px; font-weight:600; transition:background .2s ease, color .2s ease, border-color .2s ease; }
.ghost:hover{ background:var(--frost); color:var(--carbon); }
.ghost--dark{ border-color:var(--carbon); color:var(--carbon); }
.ghost--dark:hover{ background:var(--carbon); color:var(--frost); }
.vbadge{ position:absolute; z-index:3; left:var(--edge); bottom:var(--edge); border:1px solid rgba(255,255,255,.6); padding:.7rem .9rem; font-family:var(--mono); font-size:12px; line-height:1.4; color:var(--frost); }
.vbadge b{ display:block; font-size:15px; font-weight:400; }
.vreserve{ position:absolute; z-index:3; right:var(--edge); bottom:var(--edge); font-family:var(--mono); font-size:14px; color:var(--frost); display:inline-flex; gap:.4rem; }
.vreserve:hover{ text-decoration:underline; }

/* ---------------------------------------------------------- EDITORIAL SECTION */
.sec{ padding:clamp(3.5rem,8vh,5rem) 0; }
.sec--band{ background:var(--paper); }
.sec__head{ max-width:60ch; margin-bottom:clamp(2rem,4vh,3rem); }
.sec__head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.sec__kick{ font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:.14em; color:var(--graphite); margin-bottom:1rem; }
.sec__head h2{ font-size:clamp(1.9rem,3.6vw,3rem); font-weight:700; line-height:1.1; letter-spacing:-0.02em; }
.sec__head p{ font-size:16px; color:var(--graphite); margin-top:1rem; line-height:1.5; }

/* 4-колоночная сетка фич — плоско, без карточек */
.fgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.fitem{ }
.fitem__ico{ width:32px; height:32px; color:var(--carbon); }
.fitem h3{ font-size:18px; font-weight:600; margin-top:12px; }
.fitem p{ font-size:14px; font-weight:400; color:var(--graphite); margin-top:8px; line-height:1.5; }
@media (max-width:860px){ .fgrid{ grid-template-columns:repeat(2,1fr); } }

/* ---------------------------------------------------------- PALETTE (product-color tiles) */
.pal{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--mist); border:1px solid var(--mist); }
.ptile{ position:relative; aspect-ratio:3/4; display:flex; flex-direction:column; justify-content:flex-end; padding:1rem; color:var(--frost); overflow:hidden; }
.ptile.light{ color:var(--obsidian); }
.ptile__nm{ font-size:15px; font-weight:600; letter-spacing:-0.01em; }
.ptile__pr{ font-family:var(--mono); font-size:12px; margin-top:4px; opacity:.85; }
@media (max-width:860px){ .pal{ grid-template-columns:repeat(2,1fr); } }

/* ---------------------------------------------------------- OBJECT STRIP */
.ostrip{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(20rem,1fr); gap:1px; background:var(--mist); border-top:1px solid var(--mist); border-bottom:1px solid var(--mist); overflow-x:auto; }
.ocell{ position:relative; aspect-ratio:4/3; display:flex; flex-direction:column; justify-content:flex-end; padding:1.2rem; color:var(--frost); }
.ocell::after{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55) 100%); }
.ocell > *{ position:relative; z-index:2; }
.ocell .m{ font-family:var(--mono); font-size:12px; opacity:.85; }
.ocell h4{ font-size:20px; font-weight:600; margin-top:.3rem; }

/* ---------------------------------------------------------- SPEC TABLE (mono) */
.spec{ border-top:1px solid var(--mist); max-width:760px; }
.spec__row{ display:grid; grid-template-columns:1fr auto; gap:1rem; padding:14px 0; border-bottom:1px solid var(--mist); }
.spec__row dt{ font-size:15px; color:var(--graphite); }
.spec__row dd{ font-family:var(--mono); font-size:15px; color:var(--obsidian); }

/* ---------------------------------------------------------- CTA BAND (dark) */
.cta{ position:relative; width:100%; min-height:clamp(22rem,50vh,32rem); display:flex; align-items:center; color:var(--frost); overflow:hidden; }
.cta__in{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:4rem var(--edge); width:100%; }
.cta__big{ font-size:clamp(1.9rem,4.6vw,3.4rem); font-weight:700; line-height:1.05; letter-spacing:-0.02em; }
.cta__row{ display:flex; align-items:center; gap:1.5rem; margin-top:1.6rem; flex-wrap:wrap; }
.cta__row .mono{ color:rgba(255,255,255,.7); }

/* ---------------------------------------------------------- FOOTER */
.foot{ background:var(--carbon); color:var(--frost); }
.foot__in{ max-width:var(--maxw); margin:0 auto; padding:clamp(2.5rem,5vh,3.5rem) var(--edge) 2rem; }
.foot__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem 2rem; padding-bottom:1.8rem; border-bottom:1px solid var(--graphite); }
.foot__cols h5{ font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.6); margin-bottom:.9rem; }
.foot__cols a{ display:block; font-size:14px; color:rgba(255,255,255,.85); padding:.28rem 0; transition:color .2s ease; }
.foot__cols a:hover{ color:var(--frost); }
.foot__fine{ padding-top:1.4rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-family:var(--mono); font-size:12px; color:rgba(255,255,255,.55); }
@media (max-width:720px){ .foot__cols{ grid-template-columns:1fr 1fr; } }

/* ---------------------------------------------------------- REVEAL */
.js .rv{ opacity:0; transform:translateY(20px); }
.js .rv.in{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .9s var(--ease); }
.js .rv-s.in > *{ animation:rvu .7s var(--ease) both; }
.js .rv-s.in > *:nth-child(2){ animation-delay:.07s; }
.js .rv-s.in > *:nth-child(3){ animation-delay:.14s; }
.js .rv-s.in > *:nth-child(4){ animation-delay:.21s; }
.js .rv-s.in > *:nth-child(5){ animation-delay:.28s; }
@keyframes rvu{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

/* ---------------------------------------------------------- RESPONSIVE */
@media (max-width:860px){
  .vhero__grid{ padding-top:5rem; padding-bottom:5rem; }
  .vsupport{ position:static; transform:none; text-align:left; max-width:420px; margin-top:2rem; }
  .pname{ white-space:normal; font-size:clamp(3rem,16vw,6rem); }
  .fgrid{ gap:1.6rem 2rem; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .js .rv{ opacity:1; transform:none; }
  .mat::after{ --lx:46%; --ly:36%; }
}

/* ---------------------------------------------------------- REAL PHOTO SURFACE (для реальных фото материалов) */
.photo{ position:relative; background-size:cover; background-position:center; isolation:isolate; overflow:hidden; }
/* скрим на плитках палитры — подпись читается на любой текстуре (светлой/тёмной) */
.ptile{ color:var(--frost); }
.ptile::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, transparent 42%, rgba(0,0,0,.62) 100%); }
.ptile > *{ position:relative; z-index:2; }

/* модификаторы сетки палитры под число коллекций бренда */
.pal--3{ grid-template-columns:repeat(3,1fr); }
.pal--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:860px){ .pal--3,.pal--4{ grid-template-columns:repeat(2,1fr); } }

/* ---------------------------------------------------------- FACTURE SLIDER (премиальная лента фактур) */
.facture{ position:relative; overflow:hidden; border-top:1px solid var(--mist); border-bottom:1px solid var(--mist);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.facture__track{ display:flex; width:max-content; gap:1px; background:var(--mist); animation:factureSlide 60s linear infinite; will-change:transform; }
.facture:hover .facture__track{ animation-play-state:paused; }
@keyframes factureSlide{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
.fcell{ position:relative; flex:0 0 clamp(17rem,24vw,25rem); aspect-ratio:4/3; display:flex; flex-direction:column; justify-content:flex-end; padding:1.3rem; color:var(--frost); background:var(--carbon); overflow:hidden; }
.fcell::after{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, transparent 42%, rgba(0,0,0,.62) 100%); }
.fcell > *{ position:relative; z-index:2; }
.fcell .fig{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; transition:transform 1.4s var(--ease); }
.facture:hover .fcell:hover .fig{ transform:scale(1.05); }
.fcell .m{ font-family:var(--mono); font-size:12px; opacity:.85; }
.fcell h4{ font-size:20px; font-weight:600; margin-top:.3rem; letter-spacing:-0.01em; }
@media (prefers-reduced-motion:reduce){
  .facture{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .facture__track{ animation:none; }
}

/* ---------------------------------------------------------- CATALOG / INNER HERO
   [round 4] Редакционный хиро внутренних страниц: фон-фото + скрим,
   монументальная типографика, строка фактов, CTA. Монохром, hairline. */
.cat-hero{ position:relative; background:var(--carbon); color:var(--frost); overflow:hidden; isolation:isolate; border-bottom:1px solid var(--graphite); }
.cat-hero__bg{ position:absolute; inset:0; z-index:0; background-image:var(--hero-img,none); background-size:cover; background-position:center; transform:scale(1.03); }
.cat-hero--photo::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,20,20,.78) 0%, rgba(20,20,20,.52) 42%, rgba(15,15,15,.82) 100%); }
.cat-hero__in{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:clamp(2.4rem,5vh,3.6rem) var(--edge) clamp(2rem,4vh,2.8rem); }
.cat-hero--photo .cat-hero__in{ min-height:clamp(320px,44vh,460px); display:flex; flex-direction:column; justify-content:flex-end; }
.crumbs{ font-family:var(--mono); font-size:12px; color:rgba(255,255,255,.72); margin-bottom:1.4rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.crumbs a:hover{ color:#fff; } .crumbs .sep{ color:rgba(255,255,255,.5); } .crumbs .cur{ color:rgba(255,255,255,.9); }
.cat-hero__eyebrow{ display:block; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.74); margin-bottom:1rem; }
/* Заголовок hero выровнен по главной (.hstatement) — единый размер на всех страницах. */
.cat-hero h1{ font-size:clamp(2rem,4.8vw,4rem); font-weight:700; line-height:1.04; letter-spacing:-0.025em; }
.cat-hero h1 i{ font-style:italic; font-weight:400; }
.cat-hero__sub{ font-size:clamp(16px,1.35vw,19px); color:rgba(255,255,255,.84); max-width:54ch; margin-top:1.15rem; line-height:1.5; }
.cat-hero__facts{ display:flex; gap:clamp(1.4rem,4vw,3.2rem); margin-top:clamp(1.6rem,3vh,2.2rem); flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.2); padding-top:1.3rem; }
.chf__n{ display:block; font-family:var(--mono); font-size:clamp(1.4rem,2.2vw,2rem); color:var(--frost); line-height:1; }
.chf__n b{ font-weight:400; color:rgba(255,255,255,.66); }
.chf__l{ display:block; font-size:12.5px; color:rgba(255,255,255,.68); margin-top:6px; max-width:16ch; line-height:1.35; }
.cat-hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:1.8rem; }
.cat-hero--compact h1{ font-size:clamp(2.2rem,5vw,3.4rem); }
.cat-hero--compact .cat-hero__sub{ max-width:64ch; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:1.6rem; }
.chip{ font-family:var(--mono); font-size:13px; color:var(--frost); border:1px solid rgba(255,255,255,.35); background:transparent; padding:8px 16px; border-radius:2px; cursor:pointer; transition:.2s ease; }
.chip:hover{ border-color:#fff; }
.chip.on{ background:var(--frost); color:var(--carbon); border-color:var(--frost); }

.fbar{ border-bottom:1px solid var(--mist); background:color-mix(in oklab,#fff 88%,transparent); backdrop-filter:blur(10px); position:sticky; top:64px; z-index:40; }
.fbar__in{ max-width:var(--maxw); margin:0 auto; padding:12px var(--edge); display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.fbar__group{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fbar__label{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--graphite); }
.ftoggle{ font-family:var(--mono); font-size:13px; color:var(--graphite); border:1px solid var(--mist); background:transparent; padding:6px 12px; border-radius:2px; cursor:pointer; transition:.2s ease; }
.ftoggle:hover{ border-color:var(--carbon); color:var(--carbon); }
.ftoggle.on{ background:var(--carbon); color:var(--frost); border-color:var(--carbon); }
.fbar__right{ margin-left:auto; display:flex; align-items:center; gap:1rem; }
.fcount{ font-family:var(--mono); font-size:13px; color:var(--graphite); }
.fcount b{ color:var(--obsidian); font-weight:400; }
.fsort{ font-family:var(--mono); font-size:13px; border:1px solid var(--mist); background:var(--frost); padding:6px 26px 6px 10px; border-radius:2px; color:var(--carbon); cursor:pointer; appearance:none; }

.pgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px 20px; }
@media(max-width:1100px){ .pgrid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:800px){ .pgrid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:460px){ .pgrid{ grid-template-columns:1fr; } }
.pcard{ display:flex; flex-direction:column; }
.pcard__img{ position:relative; aspect-ratio:4/3; border-radius:8px; overflow:hidden; background:var(--ash); }
.pcard__img .fig{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform 1.1s var(--ease); }
.pcard:hover .pcard__img .fig{ transform:scale(1.05); }
.pcard__tag{ position:absolute; top:8px; left:8px; z-index:3; font-family:var(--mono); font-size:11px; color:var(--frost); background:rgba(0,0,0,.5); padding:3px 8px; border-radius:2px; }
.pcard__stock{ position:absolute; top:8px; right:8px; z-index:3; font-family:var(--mono); font-size:11px; color:var(--frost); text-shadow:0 1px 2px rgba(0,0,0,.6); }
.pcard__stock::before{ content:'●'; margin-right:4px; color:var(--frost); }
.pcard__stock.order::before{ content:'○'; margin-right:4px; color:rgba(255,255,255,.7); }
.pcard__body{ padding-top:12px; display:flex; flex-direction:column; }
.pcard__brand{ font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--graphite); }
.pcard__name{ font-size:18px; font-weight:600; margin-top:6px; line-height:1.24; color:var(--obsidian); }
.pcard__spec{ font-family:var(--mono); font-size:13px; color:var(--graphite); margin-top:6px; }
.pcard__foot{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--mist); }
.pcard__price{ font-size:18px; font-weight:600; }
.pcard__price small{ font-family:var(--mono); font-size:12px; font-weight:400; color:var(--graphite); }
.pcard__m2{ font-family:var(--mono); font-size:12px; color:var(--graphite); }
.pager2{ display:flex; gap:8px; margin-top:48px; }
.pager2 a{ font-family:var(--mono); font-size:13px; min-width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--mist); color:var(--graphite); border-radius:2px; cursor:pointer; }
.pager2 a:hover{ border-color:var(--carbon); color:var(--carbon); }
.pager2 a.on{ background:var(--carbon); color:var(--frost); border-color:var(--carbon); }
.seo{ max-width:70ch; }
.seo h2{ font-size:24px; font-weight:600; margin-bottom:16px; letter-spacing:-0.01em; }
.seo p{ font-size:16px; color:var(--graphite); line-height:1.6; margin-bottom:12px; }
.seo a{ color:var(--obsidian); text-decoration:underline; text-underline-offset:2px; }

/* ---------------------------------------------------------- CATALOG · LEFT RAIL LAYOUT */
.shop{ display:grid; grid-template-columns:15.5rem minmax(0,1fr); border-top:1px solid var(--mist); }
.rail{ position:sticky; top:64px; align-self:start; padding:24px 24px 40px 0; border-right:1px solid var(--mist); }
.f-group{ padding:20px 0; border-top:1px solid var(--mist); }
.f-group:first-child{ border-top:0; padding-top:24px; }
.f-group h5{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--graphite); margin-bottom:14px; }
.f-opt{ display:flex; align-items:center; gap:10px; padding:6px 0; cursor:pointer; font-size:14px; color:var(--graphite); transition:color .2s ease; }
.f-opt:hover{ color:var(--obsidian); }
.f-opt .box{ width:16px; height:16px; border:1px solid var(--mist); display:grid; place-items:center; font-size:11px; color:transparent; flex:none; border-radius:2px; transition:.15s ease; }
.f-opt.on{ color:var(--obsidian); }
.f-opt.on .box{ background:var(--carbon); border-color:var(--carbon); color:#fff; }
.f-opt .ct{ margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--graphite); }
.f-opt .dim{ font-family:var(--mono); font-size:11px; color:var(--graphite); margin-left:6px; }
.swrow{ display:flex; gap:8px; flex-wrap:wrap; }
.sw{ width:28px; height:28px; border-radius:2px; cursor:pointer; border:1px solid var(--mist); position:relative; overflow:hidden; }
.sw::after{ content:''; position:absolute; inset:0; background-image:url("img/tex-1.jpg"); background-size:cover; mix-blend-mode:soft-light; opacity:.5; }
.sw.on{ box-shadow:inset 0 0 0 2px #fff, 0 0 0 1px var(--carbon); }
.sw.on::before{ content:'✓'; position:absolute; inset:0; z-index:2; display:grid; place-items:center; color:#fff; font-size:12px; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.range input[type=range]{ width:100%; accent-color:var(--carbon); }
.range .vals{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:12px; color:var(--graphite); margin-top:6px; }
.rail-reset{ font-family:var(--mono); font-size:12px; color:var(--graphite); background:none; border:0; border-bottom:1px solid var(--mist); padding:2px 0; cursor:pointer; margin-top:20px; }
.rail-reset:hover{ color:var(--obsidian); border-color:var(--carbon); }

.shop__main{ min-width:0; padding:24px 0 0 24px; }
.shop-top{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:16px; }
.shop__main .pgrid{ grid-template-columns:repeat(3,1fr); }
@media(max-width:1240px){ .shop__main .pgrid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:1020px){
  .shop{ grid-template-columns:1fr; }
  .rail{ position:static; border-right:0; border-bottom:1px solid var(--mist); padding:16px 0 20px; display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:0 24px; }
  .rail .f-group{ border-top:0; }
  .shop__main{ padding-left:0; }
  .shop__main .pgrid{ grid-template-columns:repeat(3,1fr); }
}
@media(max-width:800px){ .shop__main .pgrid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:460px){ .shop__main .pgrid{ grid-template-columns:1fr; } }
.afilt{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:12px; color:var(--obsidian); border:1px solid var(--mist); padding:5px 10px; border-radius:2px; cursor:pointer; transition:.2s ease; }
.afilt:hover{ border-color:var(--carbon); }
.afilt .x{ color:var(--graphite); }
.afrow{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.afrow:empty{ display:none; }

/* ---------------------------------------------------------- PALETTE · много свотчей (все сортировки) */
.pal--all{ grid-template-columns:repeat(auto-fill,minmax(clamp(138px,14vw,180px),1fr)); gap:1px; background:none; border:0; }
.pal--all .ptile{ aspect-ratio:1/1; padding:14px; }
.pal--all .ptile__nm{ font-size:14px; }
.pal--all .ptile__pr{ font-size:11px; }

/* ---------------------------------------------------------- OBJECTS · крупные плашки с ховер-кроссфейдом */
.objgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--mist); border-top:1px solid var(--mist); border-bottom:1px solid var(--mist); }
.objtile{ position:relative; aspect-ratio:16/10; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:24px; color:var(--frost); isolation:isolate; }
.objtile__img{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; transition:opacity .7s var(--ease), transform 6.5s var(--ease); }
.objtile__img--b{ opacity:0; }
.objtile:hover .objtile__img--a{ opacity:0; }
.objtile:hover .objtile__img--b{ opacity:1; }
.objtile:hover .objtile__img{ transform:scale(1.06); }
.objtile::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,.12) 0%, transparent 32%, transparent 52%, rgba(0,0,0,.74) 100%); }
.objtile__cap{ position:relative; z-index:2; }
.objtile__meta{ display:block; font-family:var(--mono); font-size:12px; opacity:.9; }
.objtile__title{ display:block; font-size:clamp(20px,2vw,26px); font-weight:600; margin-top:6px; letter-spacing:-0.01em; }
.objtile__hint{ position:absolute; top:18px; right:18px; z-index:2; width:38px; height:38px; border:1px solid rgba(255,255,255,.6); border-radius:9999px; display:grid; place-items:center; color:var(--frost); opacity:0; transform:scale(.9); transition:opacity .3s var(--ease), transform .3s var(--ease); }
.objtile:hover .objtile__hint{ opacity:1; transform:scale(1); }
@media(max-width:800px){ .objgrid{ grid-template-columns:1fr; } .objtile{ aspect-ratio:16/11; } }
@media (prefers-reduced-motion:reduce){ .objtile__img{ transition:none; } .objtile:hover .objtile__img{ transform:none; } }

/* ============================================================ PRODUCT PAGE */
.pd{ display:grid; grid-template-columns:minmax(0,1.32fr) minmax(0,1fr); gap:clamp(32px,4vw,64px); padding:32px 0 64px; align-items:start; }
.pd-media{ position:sticky; top:80px; }
.pd-main{ position:relative; border-radius:8px; overflow:hidden; border:1px solid var(--mist); aspect-ratio:4/3; background:var(--paper); }
.pd-main img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-main .zoom{ position:absolute; bottom:12px; right:12px; font-family:var(--mono); font-size:11px; color:var(--frost); background:rgba(0,0,0,.55); padding:6px 10px; border-radius:2px; }
.pd-thumbs{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.pd-thumb{ width:74px; height:74px; border-radius:8px; overflow:hidden; border:1px solid var(--mist); cursor:pointer; opacity:.55; transition:opacity .2s ease, border-color .2s ease; background:var(--paper); }
.pd-thumb img{ width:100%; height:100%; object-fit:cover; }
.pd-thumb.on{ opacity:1; border-color:var(--carbon); }
.pd-thumb:hover{ opacity:1; }

.pd-info{ min-width:0; }
.brandline{ font-family:var(--mono); font-size:13px; color:var(--graphite); }
.brandline a{ color:var(--carbon); } .brandline a:hover{ text-decoration:underline; }
.brandline .art{ color:var(--graphite); }
.pd-info h1{ font-size:clamp(30px,3.4vw,44px); font-weight:700; line-height:1.06; letter-spacing:-0.02em; margin:12px 0 14px; }
.share{ font-family:var(--mono); font-size:12px; color:var(--graphite); display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.share span{ border:1px solid var(--mist); border-radius:2px; padding:3px 8px; cursor:pointer; } .share span:hover{ border-color:var(--carbon); color:var(--obsidian); }
.pd-oneliner{ font-size:16px; color:var(--graphite); line-height:1.5; margin-bottom:8px; }
.pd-oneliner a{ color:var(--obsidian); text-decoration:underline; text-underline-offset:2px; }

.keyspecs{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--mist); border:1px solid var(--mist); border-radius:8px; overflow:hidden; margin:24px 0; }
.kc{ background:var(--frost); padding:14px 16px; }
.kl{ font-family:var(--mono); font-size:11px; color:var(--graphite); letter-spacing:.05em; text-transform:uppercase; }
.kv{ font-family:var(--mono); font-size:16px; color:var(--obsidian); margin-top:4px; }

.pricebox{ border:1px solid var(--mist); border-radius:8px; padding:20px 22px; margin-bottom:20px; }
.pricebox .row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.pricebox .big{ font-family:var(--mono); font-size:32px; color:var(--obsidian); }
.pricebox .big small{ font-size:15px; color:var(--graphite); }
.pricebox .m2{ font-family:var(--mono); font-size:14px; color:var(--graphite); }
.pricebox .avail{ display:flex; gap:16px; margin-top:14px; font-family:var(--mono); font-size:12px; flex-wrap:wrap; color:var(--graphite); }
.pricebox .avail .a{ display:flex; gap:6px; align-items:center; }
.pricebox .avail b{ color:var(--carbon); }

.opt-row{ display:flex; gap:16px; margin-bottom:14px; align-items:flex-start; }
.opt-row .lab{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--graphite); width:104px; flex:none; padding-top:9px; }
.opt-btns{ display:flex; gap:8px; flex-wrap:wrap; }
.opt{ border:1px solid var(--mist); border-radius:2px; padding:8px 12px; cursor:pointer; font-size:14px; font-weight:600; color:var(--graphite); display:flex; flex-direction:column; gap:2px; transition:border-color .2s ease, color .2s ease; }
.opt small{ font-family:var(--mono); font-size:11px; font-weight:400; color:var(--graphite); }
.opt:hover{ border-color:var(--carbon); color:var(--obsidian); }
.opt.on{ border-color:var(--carbon); color:var(--obsidian); background:var(--paper); }

.pd-cta{ display:flex; gap:8px; margin-top:20px; flex-wrap:wrap; }
.pd-cta .ghost{ flex:1; justify-content:center; min-width:160px; padding:15px 22px; font-size:15px; }
.opt-row--half .opt small{ text-transform:none; }
.opt-half-lab{ font-family:var(--mono); font-size:11px; color:var(--graphite); }
.pd-cta .ghost--fill{ background:var(--carbon); color:var(--frost); }
.pd-cta .ghost--fill:hover{ background:var(--obsidian); }
.pd-services{ margin-top:24px; border-top:1px solid var(--mist); }
.svc{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--mist); font-size:14px; color:var(--graphite); }
.svc b{ color:var(--obsidian); font-weight:600; }
.svc a{ color:var(--obsidian); text-decoration:underline; }

/* sticky anchor tabs */
.tabs{ display:flex; gap:2px; border-bottom:1px solid var(--mist); flex-wrap:wrap; position:sticky; top:64px; background:color-mix(in oklab,#fff 92%,transparent); backdrop-filter:blur(10px); z-index:30; }
.tab{ padding:14px 16px; font-size:14px; font-weight:600; color:var(--graphite); cursor:pointer; border-bottom:2px solid transparent; transition:color .15s ease, border-color .15s ease; background:none; }
.tab:hover{ color:var(--obsidian); }
.tab.on{ color:var(--obsidian); border-color:var(--carbon); }
.blk{ padding-top:48px; scroll-margin-top:124px; }
.blk h3{ font-size:28px; font-weight:600; letter-spacing:-0.01em; margin-bottom:20px; }
.spec-table{ width:100%; border-collapse:collapse; font-size:14px; max-width:640px; }
.spec-table tr{ border-bottom:1px solid var(--mist); }
.spec-table td{ padding:13px 4px; }
.spec-table td:first-child{ color:var(--graphite); width:55%; }
.spec-table td:last-child{ font-family:var(--mono); color:var(--obsidian); text-align:right; }
.two-col{ columns:2; column-gap:40px; max-width:900px; }
.two-col p{ margin:0 0 14px; color:var(--graphite); font-size:16px; line-height:1.6; break-inside:avoid; }
.doc-grid,.bim-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--mist); border:1px solid var(--mist); }
.doc,.bim{ background:var(--frost); padding:20px; cursor:pointer; transition:background .2s ease; }
.doc:hover,.bim:hover{ background:var(--paper); }
.doc .di,.bim .di{ font-family:var(--mono); font-size:11px; color:var(--graphite); letter-spacing:.05em; }
.doc b,.bim b{ display:block; font-size:15px; font-weight:600; margin:10px 0 4px; }
.doc span,.bim span{ font-size:13px; color:var(--graphite); }
.obj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--mist); border:1px solid var(--mist); }
.objc{ position:relative; aspect-ratio:4/3; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:18px; color:var(--frost); isolation:isolate; cursor:pointer; }
.objc .fig{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; transition:transform 1s var(--ease); }
.objc:hover .fig{ transform:scale(1.05); }
.objc::after{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.7)); }
.objc>*{ position:relative; z-index:2; }
.objc .om{ font-family:var(--mono); font-size:12px; opacity:.9; }
.objc h4{ font-size:18px; font-weight:600; margin-top:4px; }
.variant-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--mist); border:1px solid var(--mist); }
.variant{ background:var(--frost); padding:14px; text-align:center; cursor:pointer; transition:background .2s ease; }
.variant:hover{ background:var(--paper); }
.variant .vsw{ aspect-ratio:1; border-radius:8px; overflow:hidden; margin-bottom:8px; }
.variant .vsw img{ width:100%; height:100%; object-fit:cover; }
.variant .vn{ font-size:13px; font-weight:600; }
.variant .vp{ font-family:var(--mono); font-size:12px; color:var(--graphite); margin-top:2px; }
.rating-sum{ display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.rating-sum .num{ font-family:var(--mono); font-size:40px; color:var(--obsidian); }
.rating-sum .stars{ color:var(--carbon); letter-spacing:2px; }
.rating-sum .cnt{ font-size:13px; color:var(--graphite); margin-top:2px; }
.reviews{ max-width:760px; }
.review{ padding:16px 0; border-bottom:1px solid var(--mist); }
.review .rh{ display:flex; gap:12px; align-items:center; margin-bottom:6px; }
.review .who{ font-weight:600; }
.review .stars{ color:var(--carbon); font-size:13px; letter-spacing:1px; }
.review p{ color:var(--graphite); line-height:1.5; }
.review .date{ font-family:var(--mono); font-size:12px; color:var(--graphite); margin-top:6px; }
.delivery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--mist); border:1px solid var(--mist); }
.dc{ background:var(--frost); padding:22px; }
.dc .di{ font-family:var(--mono); font-size:11px; color:var(--graphite); letter-spacing:.06em; }
.dc h4{ font-size:18px; font-weight:600; margin:10px 0 8px; }
.dc p{ font-size:14px; color:var(--graphite); line-height:1.5; }
@media(max-width:960px){
  .pd{ grid-template-columns:1fr; }
  .pd-media{ position:static; }
  .doc-grid,.bim-grid{ grid-template-columns:repeat(2,1fr); }
  .variant-grid{ grid-template-columns:repeat(3,1fr); }
  .obj-grid{ grid-template-columns:1fr; }
  .two-col{ columns:1; }
}
@media(max-width:600px){
  .opt-row{ flex-direction:column; gap:6px; } .opt-row .lab{ width:auto; padding-top:0; }
  .doc-grid,.bim-grid,.variant-grid{ grid-template-columns:1fr 1fr; }
}

/* ---------------------------------------------------------- «Другие цвета» — горизонтальный скролл каталожных карточек */
.blk-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:20px; }
.blk-head h3{ margin:0; }
.scroll-hint{ font-family:var(--mono); font-size:12px; color:var(--graphite); }
.hscroll{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:14px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--mist) transparent; }
.hscroll .pcard{ flex:0 0 calc((100% - 40px)/3); scroll-snap-align:start; }
.hscroll::-webkit-scrollbar{ height:6px; }
.hscroll::-webkit-scrollbar-track{ background:transparent; }
.hscroll::-webkit-scrollbar-thumb{ background:var(--mist); border-radius:9999px; }
.hscroll::-webkit-scrollbar-thumb:hover{ background:var(--ash); }
@media(max-width:900px){ .hscroll .pcard{ flex-basis:calc((100% - 20px)/2); } }
@media(max-width:600px){ .hscroll .pcard{ flex-basis:82%; } }

/* ---------------------------------------------------------- PREMIUM MOTION (карточка товара) */
/* слой мягкого кроссфейда при смене миниатюры */
.pd-main .pd-fade{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; opacity:0; transition:opacity .5s var(--ease); }
/* магнитная микроанимация */
.mag{ transition:transform .25s var(--ease); }
/* подсказка-стрелка «листайте» */
.scroll-hint .ar{ display:inline-block; animation:hintnudge 1.6s ease-in-out infinite; }
@keyframes hintnudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(5px); } }
@media (prefers-reduced-motion:reduce){
  .scroll-hint .ar{ animation:none; }
  .mag{ transition:none; }
}

/* ============================================================ HOME PAGE */
/* --- hero content over full-bleed dark --- */
.hero-in{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding:clamp(5rem,12vh,8rem) var(--edge) clamp(3.5rem,7vh,5rem); }
.hero-eyebrow{ font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:.14em; color:rgba(255,255,255,.7); }
.hstatement{ font-weight:700; font-size:clamp(2rem,4.8vw,4rem); line-height:1.04; letter-spacing:-0.025em; margin:1.2rem 0 1.5rem; max-width:19ch; }
.hstatement i{ font-style:normal; font-weight:700; }
.hlead{ font-size:clamp(15px,1.35vw,18px); line-height:1.55; color:rgba(255,255,255,.82); max-width:58ch; }
.hcta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:2rem; }
.hcta .ghost--fill{ background:var(--frost); color:var(--carbon); border-color:var(--frost); }
.hcta .ghost--fill:hover{ background:transparent; color:var(--frost); }
.hstats{ display:flex; gap:clamp(1.2rem,3.5vw,3rem); margin-top:clamp(2rem,4vh,2.8rem); flex-wrap:wrap; }
.hstat{ border-left:1px solid rgba(255,255,255,.25); padding-left:1rem; }
.hstat .n{ font-family:var(--mono); font-size:clamp(1.5rem,2.3vw,2.1rem); color:var(--frost); line-height:1; }
.hstat .n b{ color:rgba(255,255,255,.55); font-weight:400; }
.hstat .l{ font-size:12.5px; color:rgba(255,255,255,.62); margin-top:6px; max-width:15ch; line-height:1.35; }

/* --- brand marquee strip --- */
.mstrip{ background:var(--carbon); color:var(--frost); overflow:hidden; border-bottom:1px solid var(--graphite); }
.mstrip__track{ display:flex; width:max-content; animation:mslide 34s linear infinite; }
.mstrip__track > span{ font-family:var(--mono); font-size:14px; padding:14px 0; white-space:nowrap; color:rgba(255,255,255,.85); }
.mstrip__track b{ color:rgba(255,255,255,.35); margin:0 1.15rem; font-weight:400; }
@keyframes mslide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.mstrip:hover .mstrip__track{ animation-play-state:paused; }
@media(prefers-reduced-motion:reduce){ .mstrip__track{ animation:none; } }

/* --- shared photo-tile fig + scrim (brands + categories) --- */
.bcard .fig,.cattile .fig{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; transition:transform 1.1s var(--ease); }
.bcard:hover .fig,.cattile:hover .fig{ transform:scale(1.05); }
.bcard::after,.cattile::after{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(0,0,0,.14) 0%,transparent 32%,rgba(0,0,0,.74) 100%); }
.bcard > *,.cattile > *{ position:relative; z-index:2; }

/* --- brand grid --- */
.brandgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--mist); border:1px solid var(--mist); }
.bcard{ position:relative; aspect-ratio:1/1; display:flex; flex-direction:column; justify-content:flex-end; padding:1.5rem; color:var(--frost); overflow:hidden; isolation:isolate; }
.bcard__k{ font-family:var(--mono); font-size:12px; opacity:.85; }
.bcard__nm{ font-size:clamp(22px,2.1vw,30px); font-weight:700; letter-spacing:-0.02em; margin-top:2px; }
.bcard__tag{ font-size:13px; color:rgba(255,255,255,.82); margin-top:8px; max-width:30ch; line-height:1.4; }
.bcard__go{ position:absolute; top:16px; right:18px; z-index:2; font-family:var(--mono); font-size:12px; opacity:0; transform:translateX(-4px); transition:.25s var(--ease); }
.bcard:hover .bcard__go{ opacity:.95; transform:none; }
.bcard--soon{ cursor:default; }
.bcard--soon .bcard__k{ opacity:.7; }
.bcard--all{ background:var(--paper); color:var(--obsidian); align-items:flex-start; justify-content:center; gap:.6rem; }
.bcard--all .bcard__nm{ color:var(--obsidian); }
.bcard--all .arrow{ font-family:var(--mono); font-size:14px; color:var(--graphite); }
.bcard--all:hover{ background:var(--frost); }
@media(max-width:900px){ .brandgrid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .brandgrid{ grid-template-columns:1fr; } }

/* --- category tiles --- */
.catgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--mist); border:1px solid var(--mist); }
.cattile{ position:relative; aspect-ratio:4/5; display:flex; flex-direction:column; justify-content:flex-end; padding:1.4rem; color:var(--frost); overflow:hidden; isolation:isolate; }
.cattile .catm{ font-family:var(--mono); font-size:12px; opacity:.85; }
.cattile h4{ font-size:19px; font-weight:600; margin-top:5px; letter-spacing:-0.01em; }
@media(max-width:900px){ .catgrid{ grid-template-columns:repeat(2,1fr); } }

/* --- numbered feature kicker (why block, reuses .fgrid/.fitem) --- */
.fitem__k{ font-family:var(--mono); font-size:12px; letter-spacing:.05em; color:var(--graphite); padding-bottom:12px; border-bottom:1px solid var(--mist); margin-bottom:14px; }

/* --- pull quote band --- */
.pull{ padding:clamp(3rem,7vh,5rem) 0; }
.pull .big{ font-size:clamp(1.8rem,3.7vw,3.1rem); font-weight:700; line-height:1.16; letter-spacing:-0.02em; max-width:24ch; }
.pull .big b{ font-weight:700; }
.pull p{ font-size:16px; color:var(--graphite); margin-top:1.1rem; max-width:50ch; line-height:1.55; }

/* --- section head with trailing action (right-aligned link/button) --- */
.sec__head--row{ max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.sec__head--row > div{ max-width:60ch; }

/* --- brands hub --- */
.brandgrid--feat{ grid-template-columns:repeat(2,1fr); }
.brandgrid--feat .bcard{ aspect-ratio:16/10; padding:1.8rem; }
.brandgrid--feat .bcard__nm{ font-size:clamp(28px,3vw,40px); }
.bchips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }
.bchips span{ font-family:var(--mono); font-size:11px; color:var(--frost); border:1px solid rgba(255,255,255,.4); padding:3px 8px; border-radius:2px; }
.bcard__actions{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.bmat-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--mist); border:1px solid var(--mist); }
.bmat{ position:relative; background:var(--frost); padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:1rem; transition:background .2s ease; }
.bmat:hover{ background:var(--paper); }
.bmat h4{ font-size:19px; font-weight:600; letter-spacing:-0.01em; }
.bmat .bmat__k{ font-family:var(--mono); font-size:12px; color:var(--graphite); margin-top:4px; }
.bmat .arrow{ font-family:var(--mono); font-size:13px; color:var(--graphite); flex:none; }
@media(max-width:760px){ .brandgrid--feat{ grid-template-columns:1fr; } .bmat-row{ grid-template-columns:1fr; } }

/* ============================================================ CALCULATOR */
.calc-wrap{ display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(24px,4vw,56px); align-items:start; }
.calc-form .fld{ margin-bottom:22px; }
.calc-form label{ display:block; font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--graphite); margin-bottom:10px; }
.calc-form label .muted{ text-transform:none; letter-spacing:0; opacity:.75; }
.calc-form input[type=number],.calc-form select{ width:100%; font-family:var(--font); font-size:16px; color:var(--obsidian); background:var(--frost); border:1px solid var(--mist); border-radius:2px; padding:13px 14px; appearance:none; }
.calc-form input[type=number]:focus,.calc-form select:focus{ outline:none; border-color:var(--carbon); }
.seg{ display:flex; gap:8px; flex-wrap:wrap; }
.seg button{ flex:1; min-width:82px; font-family:var(--font); font-size:14px; font-weight:600; color:var(--graphite); background:var(--frost); border:1px solid var(--mist); border-radius:2px; padding:11px 10px; transition:.2s ease; }
.seg button:hover{ border-color:var(--carbon); color:var(--obsidian); }
.seg button.on{ background:var(--carbon); color:var(--frost); border-color:var(--carbon); }
.calc-two{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.result{ position:sticky; top:88px; border:1px solid var(--mist); border-radius:8px; overflow:hidden; }
.result .rhead{ background:var(--carbon); color:var(--frost); font-family:var(--mono); font-size:13px; padding:16px 22px; }
.result .rbody{ padding:6px 22px; }
.rrow{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:14px 0; border-bottom:1px solid var(--mist); }
.rrow:last-child{ border-bottom:0; }
.rrow .lbl{ font-size:14px; color:var(--graphite); }
.rrow .val{ font-family:var(--mono); font-size:17px; color:var(--obsidian); }
.rrow.total{ border-top:1px solid var(--carbon); }
.rrow.total .val{ font-size:24px; }
.rfoot{ padding:20px 22px; border-top:1px solid var(--mist); }
.rfoot .ghost{ width:100%; justify-content:center; }
.rfoot .hint{ font-family:var(--mono); font-size:12px; color:var(--graphite); margin-top:10px; text-align:center; }
@media(max-width:860px){ .calc-wrap{ grid-template-columns:1fr; } .result{ position:static; } .calc-two{ grid-template-columns:1fr; } }

/* ============================================================ ARCHITECTS */
.arch-tools{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--mist); border:1px solid var(--mist); }
.tool{ background:var(--frost); padding:26px 24px; display:flex; flex-direction:column; }
.tool .ic{ font-family:var(--mono); font-size:12px; color:var(--graphite); letter-spacing:.05em; padding-bottom:14px; }
.tool h4{ font-size:19px; font-weight:600; letter-spacing:-0.01em; }
.tool p{ font-size:14px; color:var(--graphite); line-height:1.5; margin-top:8px; flex:1; }
.tool a{ font-family:var(--mono); font-size:13px; color:var(--obsidian); margin-top:16px; text-decoration:underline; text-underline-offset:2px; }
@media(max-width:900px){ .arch-tools{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .arch-tools{ grid-template-columns:1fr; } }
.dl-table{ border-top:1px solid var(--mist); }
.dl-row{ display:grid; grid-template-columns:150px 1fr auto; gap:20px; align-items:center; padding:18px 0; border-bottom:1px solid var(--mist); }
.dl-row .bn{ font-size:17px; font-weight:600; }
.dl-row .files{ display:flex; gap:8px; flex-wrap:wrap; }
.dl-row .file{ font-family:var(--mono); font-size:12px; color:var(--graphite); border:1px solid var(--mist); border-radius:2px; padding:5px 10px; cursor:pointer; transition:.2s ease; }
.dl-row .file:hover{ border-color:var(--carbon); color:var(--obsidian); }
@media(max-width:700px){ .dl-row{ grid-template-columns:1fr; gap:10px; } }

/* ============================================================ COMPANY */
.co-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--mist); border:1px solid var(--mist); border-radius:8px; overflow:hidden; margin:clamp(2rem,4vh,2.8rem) 0; }
.co-stat{ background:var(--frost); padding:22px 20px; }
.co-stat .n{ font-family:var(--mono); font-size:clamp(1.8rem,2.6vw,2.4rem); color:var(--obsidian); }
.co-stat .l{ font-size:13px; color:var(--graphite); margin-top:6px; line-height:1.35; }
@media(max-width:760px){ .co-stats{ grid-template-columns:1fr 1fr; } }
.co-story{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; margin:clamp(2rem,5vh,3.5rem) 0; }
.co-story h2{ font-size:clamp(1.6rem,2.6vw,2.2rem); font-weight:700; letter-spacing:-0.02em; line-height:1.15; }
.co-story p{ font-size:16px; color:var(--graphite); line-height:1.6; margin-top:1rem; }
.co-img{ position:relative; aspect-ratio:4/3; border-radius:8px; overflow:hidden; border:1px solid var(--mist); }
.co-img .fig{ position:absolute; inset:0; background-size:cover; background-position:center; }
@media(max-width:760px){ .co-story{ grid-template-columns:1fr; } }
.contacts{ display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(20px,3vw,40px); align-items:start; }
.ct-info .ci{ padding:14px 0; border-bottom:1px solid var(--mist); }
.ct-info .cl{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--graphite); }
.ct-info .cv{ font-size:16px; color:var(--obsidian); margin-top:5px; }
.ct-info .cv b{ font-weight:600; }
.ct-map{ position:relative; min-height:360px; border:1px solid var(--mist); border-radius:8px; overflow:hidden; background:var(--paper); }
.ct-map iframe{ width:100%; height:100%; border:0; position:absolute; inset:0; }
@media(max-width:760px){ .contacts{ grid-template-columns:1fr; } .ct-map{ min-height:300px; } }

/* ============================================================ HERO CINEMATIC FX (главная) */
.hero-slides{ position:absolute; inset:0; z-index:0; }
.hero-slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform:scale(1.04); transition:opacity 1.6s var(--ease); will-change:opacity; }
.hero-slide.on{ opacity:1; }
.hero-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(0,0,0,.64) 0%,rgba(0,0,0,.34) 42%,rgba(0,0,0,.8) 100%); }
.hero-spot{ position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(36% 40% at var(--hx,62%) var(--hy,38%), rgba(255,255,255,.18), transparent 66%); mix-blend-mode:soft-light; transition:background .2s linear; }
.hero-ix{ position:absolute; right:var(--edge); bottom:calc(var(--edge) - 4px); z-index:3; font-family:var(--mono); font-size:13px; color:rgba(255,255,255,.62); display:flex; align-items:center; gap:8px; }
.hero-ix .bar{ width:44px; height:2px; background:rgba(255,255,255,.25); position:relative; overflow:hidden; }
.hero-ix .bar i{ position:absolute; inset:0; background:var(--frost); transform:translateX(-100%); animation:hbar 6s linear infinite; }
@keyframes hbar{ from{ transform:translateX(-100%);} to{ transform:translateX(0);} }
.hstatement i{ font-style:normal; }
@media(prefers-reduced-motion:reduce){ .hero-slide{ transition:none; } .hero-ix .bar i{ animation:none; } }

/* ============================================================ BRANDS SHOWCASE (интерактив, как в исходнике) */
.showcase{ display:grid; grid-template-columns:minmax(230px,300px) minmax(0,1fr); gap:1px; background:var(--mist); border:1px solid var(--mist); border-radius:8px; overflow:hidden; }
.sc-list{ display:flex; flex-direction:column; background:var(--frost); }
.sc-item{ text-align:left; width:100%; background:var(--frost); border:0; border-bottom:1px solid var(--mist); padding:17px 22px; cursor:pointer; position:relative; transition:background .25s var(--ease); }
.sc-item:last-child{ border-bottom:0; }
.sc-item .n{ display:block; font-size:19px; font-weight:600; color:var(--graphite); letter-spacing:-0.01em; transition:color .2s ease; }
.sc-item .s{ display:block; font-family:var(--mono); font-size:11.5px; color:var(--graphite); margin-top:3px; opacity:.78; }
.sc-item::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--carbon); transform:scaleY(0); transform-origin:top; transition:transform .3s var(--ease); }
.sc-item:hover{ background:var(--paper); }
.sc-item.on{ background:var(--paper); }
.sc-item.on::before{ transform:scaleY(1); }
.sc-item.on .n{ color:var(--obsidian); }
.sc-stage{ position:relative; min-height:clamp(400px,54vh,580px); overflow:hidden; cursor:pointer; background:var(--carbon); isolation:isolate; }
.sc-img{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; opacity:0; transition:opacity .55s var(--ease); }
.sc-img.on{ opacity:1; }
.sc-stage::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,transparent 32%,rgba(0,0,0,.68) 100%); }
.sc-floatcard{ position:absolute; top:24px; right:24px; z-index:3; width:min(290px,62%); background:rgba(17,17,17,.82); border:1px solid rgba(255,255,255,.16); border-radius:8px; padding:16px 18px; color:var(--frost); }
.sc-fc-sw{ width:46px; height:46px; border-radius:8px; background-size:cover; background-position:center; border:1px solid rgba(255,255,255,.2); }
.sc-fc-go{ position:absolute; top:16px; right:16px; font-family:var(--mono); font-size:14px; color:rgba(255,255,255,.75); }
.sc-fc-name{ font-size:15px; font-weight:600; margin-top:12px; letter-spacing:-0.01em; }
.sc-fc-price{ font-family:var(--mono); font-size:13px; color:rgba(255,255,255,.88); margin-top:5px; }
.sc-fc-brand{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.52); margin-top:7px; }
.sc-caption{ position:absolute; left:26px; bottom:26px; z-index:3; color:var(--frost); max-width:64%; }
.sc-caption h3{ font-size:clamp(26px,3.2vw,40px); font-weight:700; letter-spacing:-0.02em; line-height:1; }
.sc-caption p{ font-size:15px; color:rgba(255,255,255,.84); margin-top:10px; max-width:46ch; line-height:1.45; }
.sc-caption .sc-cta{ display:inline-block; margin-top:14px; font-family:var(--mono); font-size:13px; color:var(--frost); border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:2px; transition:border-color .2s ease; }
.sc-stage:hover .sc-caption .sc-cta{ border-color:var(--frost); }
@media(max-width:820px){
  .showcase{ grid-template-columns:1fr; }
  .sc-list{ flex-direction:row; overflow-x:auto; scrollbar-width:none; }
  .sc-item{ border-bottom:0; border-right:1px solid var(--mist); white-space:nowrap; flex:0 0 auto; }
  .sc-item::before{ top:auto; bottom:0; left:0; right:0; width:auto; height:2px; transform:scaleX(0); transform-origin:left; }
  .sc-item.on::before{ transform:scaleX(1); }
  .sc-floatcard{ width:min(240px,70%); }
}

/* ============================================================ WHY — интерактивные ячейки */
.fgrid--int .fitem{ padding:24px 22px; border:1px solid var(--mist); border-radius:8px; background:var(--frost); position:relative; overflow:hidden; transition:transform .4s var(--ease), background .3s var(--ease); }
.fgrid--int .fitem::after{ content:''; position:absolute; left:0; right:0; top:0; height:2px; background:var(--carbon); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.fgrid--int .fitem:hover{ transform:translateY(-5px); background:var(--paper); }
.fgrid--int .fitem:hover::after{ transform:scaleX(1); }
.fgrid--int .fitem__k{ border-bottom:0; padding-bottom:0; margin-bottom:14px; transition:color .25s ease; }
.fgrid--int .fitem:hover .fitem__k{ color:var(--obsidian); }
.fgrid--int .fitem h3{ transition:transform .35s var(--ease); }
.fgrid--int .fitem:hover h3{ transform:translateX(2px); }

/* ============================================================ STAGGERED MENU (флайаут, монохром) */
.sm-toggle{ display:inline-flex; align-items:center; gap:11px; background:transparent; border:0; cursor:pointer; color:var(--frost); font-family:var(--font); font-weight:600; font-size:18px; letter-spacing:.005em; line-height:1; padding:0; }
.sm-toggle-tw{ position:relative; display:inline-block; height:1em; overflow:hidden; white-space:nowrap; }
.sm-toggle-ti{ display:flex; flex-direction:column; line-height:1; }
.sm-toggle-line{ display:block; height:1em; line-height:1; }
.sm-icon{ position:relative; width:14px; height:14px; display:inline-flex; will-change:transform; }
.sm-icon-line{ position:absolute; left:50%; top:50%; width:100%; height:1.5px; background:currentColor; border-radius:2px; transform:translate(-50%,-50%); }
.sm-icon-line-v{ transform:translate(-50%,-50%) rotate(90deg); }
.sm-overlay{ position:fixed; inset:0; z-index:200; pointer-events:none; }
.sm-prelayers{ position:absolute; top:0; left:0; bottom:0; width:clamp(300px,42vw,480px); z-index:5; }
.sm-prelayer{ position:absolute; inset:0; visibility:hidden; }
.sm-panel{ position:absolute; top:0; left:0; height:100%; width:clamp(300px,42vw,480px); background:var(--frost); display:flex; flex-direction:column; padding:6.5rem 2.6rem 2.4rem; overflow-y:auto; z-index:10; visibility:hidden; pointer-events:auto; }
.sm-open .sm-overlay{ pointer-events:auto; }
.sm-open .sm-panel,.sm-open .sm-prelayer{ visibility:visible; }
.sm-panel-list{ list-style:none; display:flex; flex-direction:column; gap:.35rem; }
.sm-il{ position:relative; overflow:hidden; }
.sm-item{ position:relative; display:inline-block; color:var(--obsidian); font-weight:700; font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.12; letter-spacing:-0.02em; text-decoration:none; padding-right:1.2em; transition:color .25s ease; }
.sm-item:hover{ color:var(--graphite); }
.sm-label{ display:inline-block; transform-origin:50% 100%; will-change:transform; }
.sm-panel-list[data-num]{ counter-reset:smi; }
.sm-panel-list[data-num] .sm-item::after{ counter-increment:smi; content:counter(smi,decimal-leading-zero); position:absolute; top:.35em; right:0; font-family:var(--mono); font-size:13px; font-weight:400; color:var(--graphite); opacity:var(--sm-no,0); }
.sm-socials{ margin-top:auto; padding-top:2rem; border-top:1px solid var(--mist); }
.sm-socials h4{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--graphite); margin-bottom:.9rem; }
.sm-socials ul{ list-style:none; display:flex; gap:1.2rem; flex-wrap:wrap; }
.sm-socials a{ font-size:15px; font-weight:600; color:var(--obsidian); transition:opacity .25s ease; }
.sm-socials:hover a{ opacity:.4; }
.sm-socials a:hover{ opacity:1; }
.sm-meta{ margin-top:1.4rem; font-family:var(--mono); font-size:12px; color:var(--graphite); line-height:1.6; }
@media(max-width:560px){ .sm-panel,.sm-prelayers{ width:100%; } }
/* меню — фолбэк без GSAP */
.no-gsap .sm-panel,.no-gsap .sm-prelayer{ transform:translateX(-100%); transition:transform .5s var(--ease); }
html.sm-open.no-gsap .sm-panel{ transform:translateX(0); }
html.sm-open.no-gsap .sm-prelayer{ transform:translateX(0); }
html.sm-open{ overflow:hidden; }

/* ============================================================ CTA BOX (боксовый, аккуратный) */
.cta-box{ position:relative; background:var(--carbon); border-radius:8px; overflow:hidden; padding:clamp(2.6rem,6vw,4.6rem) clamp(1.5rem,5vw,4rem); text-align:center; isolation:isolate; }
.cta-box::before{ content:''; position:absolute; inset:0; z-index:0; background:radial-gradient(60% 90% at 50% 0%, rgba(255,255,255,.06), transparent 70%); }
.cta-box__in{ position:relative; z-index:2; max-width:46ch; margin:0 auto; }
.cta-box h2{ color:var(--frost); font-size:clamp(1.5rem,3vw,2.3rem); font-weight:700; letter-spacing:-0.02em; line-height:1.12; }
.cta-box p{ color:rgba(255,255,255,.72); font-size:16px; line-height:1.55; margin-top:1rem; }
.cta-box__btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:1.9rem; }
.cta-box .ghost--fill{ background:var(--frost); color:var(--carbon); border-color:var(--frost); }
.cta-box .ghost--fill:hover{ background:transparent; color:var(--frost); }

/* ============================================================ PULL DARK + LIGHT RAYS */
.pull--dark{ position:relative; background:var(--obsidian); overflow:hidden; isolation:isolate; padding:clamp(4rem,11vh,7rem) 0; }
.pull--dark .lightrays{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.pull--dark .lightrays canvas{ width:100%; height:100%; display:block; }
.pull--dark .cwrap{ position:relative; z-index:2; }
.pull--dark .big{ color:var(--frost); max-width:26ch; }
.pull--dark .big b{ color:var(--frost); }
.pull--dark p{ color:rgba(255,255,255,.62); }

/* ============================================================ CTA SPLIT (премиальный последний блок) */
.cta-split{ display:grid; grid-template-columns:1.05fr 1fr; border-radius:8px; overflow:hidden; background:var(--carbon); min-height:clamp(360px,44vh,480px); border:1px solid var(--mist); }
.cta-split__media{ position:relative; overflow:hidden; isolation:isolate; }
.cta-split__media .fig{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform 1.3s var(--ease); }
.cta-split:hover .cta-split__media .fig{ transform:scale(1.06); }
.cta-split__media::after{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(0,0,0,.15) 0%,transparent 45%,rgba(34,34,34,.85) 100%); }
.cta-split__badge{ position:absolute; left:22px; bottom:22px; z-index:2; font-family:var(--mono); font-size:12px; line-height:1.4; color:var(--frost); border:1px solid rgba(255,255,255,.55); padding:.5rem .85rem; }
.cta-split__badge b{ display:block; font-weight:400; font-size:14px; }
.cta-split__body{ padding:clamp(2rem,4vw,3.6rem); display:flex; flex-direction:column; justify-content:center; color:var(--frost); }
.cta-split__body .sec__kick{ color:rgba(255,255,255,.55); margin-bottom:.4rem; }
.cta-split__body h2{ color:var(--frost); font-size:clamp(1.6rem,2.8vw,2.4rem); font-weight:700; letter-spacing:-0.02em; line-height:1.12; }
.cta-split__body p{ color:rgba(255,255,255,.72); font-size:16px; line-height:1.55; margin-top:1rem; max-width:42ch; }
.cta-split__btns{ display:flex; gap:12px; flex-wrap:wrap; margin-top:1.9rem; }
.cta-split .ghost--fill{ background:var(--frost); color:var(--carbon); border-color:var(--frost); }
.cta-split .ghost--fill:hover{ background:transparent; color:var(--frost); }
@media(max-width:760px){ .cta-split{ grid-template-columns:1fr; } .cta-split__media{ min-height:220px; } }

/* ============================================================ BRANDS — полноэкранные плашки */
.brandband{ position:relative; display:block; min-height:clamp(30rem,86vh,54rem); color:var(--frost); overflow:hidden; isolation:isolate; border-top:1px solid var(--graphite); }
.brandband .fig{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; transition:transform 1.5s var(--ease); }
.brandband:hover .fig{ transform:scale(1.045); }
.brandband::after{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.12) 32%, transparent 50%, rgba(0,0,0,.8) 100%); }
.brandband__idx{ position:absolute; top:var(--edge); left:var(--edge); z-index:3; font-family:var(--mono); font-size:13px; color:rgba(255,255,255,.62); }
.brandband__go{ position:absolute; top:var(--edge); right:var(--edge); z-index:3; width:44px; height:44px; border:1px solid rgba(255,255,255,.5); border-radius:9999px; display:grid; place-items:center; opacity:0; transform:scale(.9); transition:opacity .3s var(--ease), transform .3s var(--ease); }
.brandband:hover .brandband__go{ opacity:1; transform:none; }
.brandband__in{ position:absolute; left:0; right:0; bottom:0; z-index:2; max-width:var(--maxw); margin:0 auto; padding:clamp(2.2rem,5vh,4rem) var(--edge); display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:1.5rem 2rem; }
.brandband__meta{ display:block; font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.72); margin-bottom:.7rem; }
.brandband__name{ display:block; font-weight:700; font-size:clamp(2.6rem,7.5vw,6.4rem); line-height:.94; letter-spacing:-0.03em; }
.brandband__tag{ display:block; font-size:16px; color:rgba(255,255,255,.85); max-width:46ch; margin-top:1rem; line-height:1.5; }
.brandband__chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:1.2rem; }
.brandband__chips span{ font-family:var(--mono); font-size:12px; color:var(--frost); border:1px solid rgba(255,255,255,.42); padding:4px 11px; border-radius:2px; }
.brandband__cta{ justify-self:end; }
.brandband__cta .ghost{ pointer-events:none; }
@media(max-width:760px){ .brandband__in{ grid-template-columns:1fr; } .brandband__cta{ justify-self:start; } .brandband__tag{ font-size:15px; } }

/* CATALOG — empty state */
.empty{ padding:clamp(2.5rem,7vh,4.5rem) 0; color:var(--graphite); font-size:15px; }
.lnkbtn{ background:none; border:none; padding:0; color:var(--obsidian); font:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.lnkbtn:hover{ opacity:.6; }

/* ---------------------------------------------------------- STAR BORDER CTA (React Bits, адаптирован) */
.star-border-container{ display:inline-block; position:relative; border-radius:2px; overflow:hidden; padding:1.5px 0; }
.star-border-container .border-gradient-bottom,
.star-border-container .border-gradient-top{ position:absolute; width:300%; height:50%; opacity:.7; border-radius:50%; z-index:0; pointer-events:none; }
.star-border-container .border-gradient-bottom{ bottom:-11px; right:-250%; background:radial-gradient(circle, var(--frost), transparent 10%); animation:star-movement-bottom 6s linear infinite alternate; }
.star-border-container .border-gradient-top{ top:-11px; left:-250%; background:radial-gradient(circle, var(--frost), transparent 10%); animation:star-movement-top 6s linear infinite alternate; }
.star-border-container .inner-content{ position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; background:var(--obsidian); border:1px solid #2b2b2b; color:var(--frost); border-radius:2px; }
@keyframes star-movement-bottom{ 0%{ transform:translate(0%,0%); opacity:1; } 100%{ transform:translate(-100%,0%); opacity:0; } }
@keyframes star-movement-top{ 0%{ transform:translate(0%,0%); opacity:1; } 100%{ transform:translate(100%,0%); opacity:0; } }

/* nav-вариант StarBorder */
.nav-cta{ flex:0 0 auto; }
.nav-cta .inner-content{ font-family:var(--font); font-weight:600; font-size:15.5px; letter-spacing:.01em; padding:11px 26px; white-space:nowrap; transition:background .25s ease; }
.nav-cta:hover .inner-content{ background:#141414; }
@media (max-width:560px){ .nav-cta .inner-content{ font-size:13.5px; padding:10px 16px; } .nav__in{ gap:.9rem; } }

/* CATALOG — фильтр форматов [round 4] вертикальный список (видно 6+, прокрутка вниз) */
.fmt-hint{ font-family:var(--mono); font-size:10.5px; font-weight:400; text-transform:none; letter-spacing:0; color:var(--graphite); margin-left:7px; }
.fmt-slider{ display:flex; flex-direction:column; gap:6px; margin-top:12px; max-height:288px; overflow-y:auto; padding-right:4px; scrollbar-width:thin; scrollbar-color:var(--ash) transparent; }
.fmt-slider::-webkit-scrollbar{ width:6px; }
.fmt-slider::-webkit-scrollbar-track{ background:transparent; }
.fmt-slider::-webkit-scrollbar-thumb{ background:var(--ash); border-radius:9999px; }
.fmt-chip{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; font-family:var(--font); font-size:13px; font-weight:600; color:var(--graphite); background:var(--frost); border:1px solid var(--mist); border-radius:2px; padding:8px 12px; text-align:left; cursor:pointer; transition:border-color .18s ease, background .18s ease, color .18s ease; }
.fmt-chip i{ font-style:normal; font-family:var(--mono); font-size:11px; font-weight:400; opacity:.55; }
.fmt-chip:hover{ border-color:var(--graphite); }
.fmt-chip.on{ background:var(--obsidian); color:var(--frost); border-color:var(--obsidian); }
.fmt-chip.on i{ opacity:.8; }

/* ============================================================
   [AUDIT FIXES] — UI/UX, доступность, тач, контраст.
   Блок-оверрайд: правит найденные баги, не трогая исходные строки.
   ============================================================ */

/* 1. Sticky-хедер 78px, а под-бары висели на top:64px → контент подрезался
   на 14px. Привязываем все липкие панели к реальной высоте навбара. */
.fbar, .rail, .tabs{ top:var(--navh); }
.pd-media{ top:calc(var(--navh) + 4px); }
.result{ top:calc(var(--navh) + 12px); }
.blk{ scroll-margin-top:calc(var(--navh) + 54px); }

/* 2. Тач-таргеты < 44px (WCAG/Apple HIG). Доводим до минимума. */
.pager2 a{ min-width:44px; height:44px; }
.fsort{ min-height:44px; padding-top:11px; padding-bottom:11px; }
.seg button{ min-height:44px; }
.sw{ width:40px; height:40px; }           /* было 28px */
.chip, .ftoggle, .afilt{ min-height:40px; display:inline-flex; align-items:center; }

/* 3. Focus для клавиатуры: в калькуляторе стоял outline:none.
   Возвращаем видимое кольцо на :focus-visible (для мыши не мигает). */
.calc-form input[type=number]:focus-visible,
.calc-form select:focus-visible{ outline:2px solid var(--carbon); outline-offset:2px; }

/* 4. Контраст (WCAG AA 4.5:1): приглушённый белый текст на #222/фото
   не проходил. Поднимаем непрозрачность мелкого текста. */
.foot__cols h5{ color:rgba(255,255,255,.8); }
.foot__fine{ color:rgba(255,255,255,.74); }
.crumbs{ color:rgba(255,255,255,.78); }
.crumbs .sep{ color:rgba(255,255,255,.5); }
.hstat .l{ color:rgba(255,255,255,.82); }
.hstat .n b{ color:rgba(255,255,255,.8); }
.sc-fc-brand{ color:rgba(255,255,255,.78); }
.cta-split__body .sec__kick{ color:rgba(255,255,255,.78); }
.pull--dark p{ color:rgba(255,255,255,.8); }
.brandband__idx{ color:rgba(255,255,255,.78); }

/* 5. Ховер-онли подсказки были невидимы на тач-экранах.
   Показываем их на coarse-pointer и при фокусе с клавиатуры. */
@media (hover:none){
  .objtile__hint, .brandband__go, .bcard__go{ opacity:1; transform:none; }
  .sc-caption .sc-cta{ border-color:var(--frost); }
}
.sc-stage:focus-within .sc-caption .sc-cta{ border-color:var(--frost); }
.objtile:focus-within .objtile__hint,
.brandband:focus-within .brandband__go,
.bcard:focus-within .bcard__go{ opacity:1; transform:none; }

/* 6. Скрытая, но кликабельная кнопка бренда (pointer-events:none)
   не получала фокус — даём фокус-стиль родительской ссылке. */
.brandband:focus-visible{ outline:2px solid var(--frost); outline-offset:-4px; }

/* 7. Форма захвата лида (company.html) — отсутствовала на всём сайте. */
.leadform{ max-width:720px; margin:0 0 clamp(2rem,5vh,3.5rem); }
.leadform .lf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:560px){ .leadform .lf-grid{ grid-template-columns:1fr; } }
.leadform .lf-field{ margin-bottom:16px; }
.leadform label{ display:block; font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--graphite); margin-bottom:8px; }
.leadform .lf-req{ color:var(--carbon); }
.leadform .lf-opt{ text-transform:none; letter-spacing:0; opacity:.7; }
.leadform input, .leadform textarea{ width:100%; font-family:var(--font); font-size:16px; color:var(--obsidian); background:var(--frost); border:1px solid var(--mist); border-radius:2px; padding:13px 14px; }
.leadform textarea{ resize:vertical; min-height:56px; }
.leadform input:focus-visible, .leadform textarea:focus-visible{ outline:2px solid var(--carbon); outline-offset:2px; border-color:var(--carbon); }
.leadform input[aria-invalid="true"]{ border-color:var(--carbon); border-width:1.5px; }
.leadform .lf-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:4px; }
.leadform .lf-actions .ghost{ min-height:48px; }
.leadform .lf-note{ font-size:12px; color:var(--graphite); }
.leadform .lf-error{ color:var(--carbon); font-weight:600; font-size:14px; margin:4px 0 12px; }
.leadform .lf-success{ color:var(--obsidian); font-size:16px; font-weight:600; margin-top:16px; padding:14px 16px; border:1px solid var(--mist); border-left:3px solid var(--carbon); border-radius:2px; background:var(--paper); }

/* 8. Часы работы в футере были фейковой ссылкой href="#"; правовые ссылки. */
.foot__cols .foot__hours{ display:block; font-size:14px; color:rgba(255,255,255,.85); padding:.28rem 0; }
.foot__fine a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.foot__fine a:hover{ color:var(--frost); }

/* 9. Липкая панель покупки на странице товара (появляется при скролле). */
.buybar{ position:fixed; left:0; right:0; bottom:0; z-index:90; background:var(--carbon); color:var(--frost);
  border-top:1px solid var(--graphite); transform:translateY(100%); transition:transform .28s var(--ease);
  padding-bottom:env(safe-area-inset-bottom); }
.buybar-on .buybar{ transform:translateY(0); }
.buybar__in{ max-width:var(--maxw); margin:0 auto; padding:12px var(--edge); display:flex; align-items:center; gap:1rem; justify-content:space-between; }
.buybar__info{ display:flex; flex-direction:column; min-width:0; }
.buybar__name{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52vw; }
.buybar__price{ font-family:var(--mono); font-size:13px; color:rgba(255,255,255,.82); margin-top:2px; }
.buybar__cta{ flex:none; min-height:44px; display:inline-flex; align-items:center; }
@media (prefers-reduced-motion:reduce){ .buybar{ transition:none; } }

/* ============================================================
   [MOTION v2] — Единая система движения и микровзаимодействий.
   Централизованно, поверх исходных правил: токены длительности
   и кривых, единый press-эффект, hover-lift + мягкие тени карточек,
   анимированные подчёркивания, умные фокус-кольца, тень навбара,
   feedback формы. Монохром сохранён, движение сдержанное и
   единообразное. Всё уважает prefers-reduced-motion (см. низ файла).
   ============================================================ */
:root{
  --dur-1:.16s;                               /* мгновенная обратная связь: press, tab */
  --dur-2:.28s;                               /* стандартный ховер */
  --dur-3:.5s;                                /* появление, крупные слои */
  --ease-out:cubic-bezier(.22,.61,.36,1);     /* = --ease, бренд-кривая */
  --ease-emph:cubic-bezier(.34,1.08,.5,1);    /* мягкий овершут для «pop» */
  --lift:-4px;
  --shadow-1:0 1px 2px rgba(0,0,0,.05), 0 3px 10px rgba(0,0,0,.05);
  --shadow-2:0 8px 20px -10px rgba(0,0,0,.16), 0 20px 44px -22px rgba(0,0,0,.18);
}

/* — унифицируем тайминг ховера у контролов со «штучными» transition — */
.ghost, .opt, .pd-thumb, .doc, .bim, .variant,
.dl-row .file, .share span{
  transition-property: transform, box-shadow, background-color, background, color, border-color, opacity;
  transition-duration: var(--dur-2);
  transition-timing-function: var(--ease-out);
}

/* — единый press-эффect для всех кликабельных контролов — */
@media (prefers-reduced-motion:no-preference){
  .ghost:active, .chip:active, .ftoggle:active, .opt:active, .seg button:active,
  .pager2 a:active, .afilt:active, .fmt-chip:active, .rail-reset:active,
  .tab:active, .sw:active, .file:active, .dl-row .file:active, .share span:active,
  .lnkbtn:active, .buybar__cta:active, .sm-item:active, .sc-item:active,
  .ubar__btn:active{ transform: translateY(1px) scale(.985); }
  .nav-cta:active .inner-content{ transform: translateY(1px); }
  .nav__ico:active{ transform: scale(.9); }
}
/* press у контролов, где transition задавался поштучно и transform не входил */
.ubar__btn, .nav__ico, .nav-cta .inner-content{ transition: transform var(--dur-1) var(--ease-out), background var(--dur-2) var(--ease-out); }

/* — hover-lift + мягкая тень для товарных карточек (главная торговая
     поверхность). Только у отдельно стоящих карточек с зазором сетки,
     чтобы не открывать 1px-щели grid-ячеек. — */
.pcard{ transition: transform var(--dur-2) var(--ease-out); }
.pcard__img{ transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
@media (hover:hover){
  .pcard:hover{ transform: translateY(var(--lift)); }
  .pcard:hover .pcard__img{ box-shadow: var(--shadow-2); }
}

/* — анимированное подчёркивание ссылок (растёт слева) — навбар, футер, крошки — */
.nav__links a{ position:relative; }
.nav__links a::after{ content:''; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform var(--dur-2) var(--ease-out); }
.nav__links a:hover::after, .nav__links a[aria-current]::after{ transform:scaleX(1); }

.foot__cols a, .crumbs a{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.foot__cols a:hover, .crumbs a:hover{ background-size:100% 1px; }

/* — умное фокус-кольцо: на тёмных поверхностях — светлое; мягкое смещение — */
:focus-visible{ outline-offset:2px; }
.nav :focus-visible, .foot :focus-visible, .cta :focus-visible, .cta-box :focus-visible,
.cta-split__body :focus-visible, .vhero :focus-visible, .hero-in :focus-visible,
.pull--dark :focus-visible, .sm-panel :focus-visible, .buybar :focus-visible,
.cat-hero :focus-visible, .brandband :focus-visible, .sc-floatcard :focus-visible{
  outline-color:var(--frost);
}

/* — тень навбара при скролле (класс вешает JS) — */
.nav{ transition: box-shadow var(--dur-2) var(--ease-out); }
.nav--scrolled{ box-shadow:0 1px 0 rgba(255,255,255,.05), 0 10px 28px -14px rgba(0,0,0,.55); }

/* — feedback формы: мягкое появление успеха + деликатный shake ошибки — */
@media (prefers-reduced-motion:no-preference){
  .leadform .lf-success{ animation:rvu .5s var(--ease-out) both; }
  .leadform input[aria-invalid="true"]{ animation:shakex .32s ease; }
}
@keyframes shakex{ 0%,100%{ transform:translateX(0); } 20%,60%{ transform:translateX(-4px); } 40%,80%{ transform:translateX(4px); } }

/* (Намеренно без «pop» на .on — статически выбранные сегменты/чипы иначе
   мигали бы анимацией при загрузке. Обратную связь даёт press-эффект и
   плавный переход цвета выбранного состояния.) */

/* reduced-motion: гасим новые эффекты движения (тени/цвет остаются) */
@media (prefers-reduced-motion:reduce){
  .pcard:hover{ transform:none; }
  .nav__links a::after{ transition:none; }
  .foot__cols a, .crumbs a{ transition:none; }
}

/* ============================================================
   [round 3] Белая шапка + модальная форма заявки (дизайн-код Vanmoof)
   ============================================================ */

/* Белая шапка: холст #fff, текст carbon, hairline #e5e7eb, тёмный логотип.
   Бургер — единственный навигационный триггер (десктоп-ссылки убраны). */
.nav{ background:var(--frost); color:var(--carbon); border-bottom:1px solid var(--mist); }
.sm-toggle{ color:var(--carbon); }
/* при открытом меню держим белую шапку над тёмным оверлеем — бургер/«Закрыть» видны и кликабельны */
html.sm-open .nav{ z-index:210; }

/* Модальное окно заявки — открывается из CTA (не уводит на company.html). */
.lead-modal{ position:fixed; inset:0; z-index:300; opacity:0; visibility:hidden;
  transition:opacity .25s var(--ease), visibility .25s var(--ease); }
.lead-modal.open{ opacity:1; visibility:visible; }
.lead-modal__scrim{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.lead-modal__dialog{ position:absolute; top:50%; left:50%;
  transform:translate(-50%,-48%) scale(.98); transition:transform .28s var(--ease);
  width:min(92vw,460px); background:var(--frost); border:1px solid var(--mist); border-radius:8px;
  padding:clamp(1.8rem,4vw,2.6rem); max-height:90vh; overflow-y:auto; }
.lead-modal.open .lead-modal__dialog{ transform:translate(-50%,-50%) scale(1); }
.lead-modal__close{ position:absolute; top:12px; right:12px; width:44px; height:44px;
  display:grid; place-items:center; background:transparent; border:0; cursor:pointer; color:var(--graphite); }
.lead-modal__close:hover{ color:var(--obsidian); }
.lead-modal h3{ font-size:24px; font-weight:700; letter-spacing:-0.01em; line-height:1.15; }
.lead-modal .lm-sub{ color:var(--graphite); font-size:15px; margin-top:8px; margin-bottom:20px; line-height:1.5; }
.lead-modal .lm-ctx{ font-family:var(--mono); font-size:12px; color:var(--graphite);
  border:1px solid var(--mist); border-radius:2px; padding:9px 11px; margin-bottom:16px; }
.lead-modal .leadform{ margin:0; }
@media (prefers-reduced-motion:reduce){ .lead-modal, .lead-modal__dialog{ transition:none; } }

/* блокируем прокрутку фона при открытой модалке */
html.modal-open{ overflow:hidden; }
/* дизайн-код Vanmoof: только hairline, без теней — нейтрализуем тень навбара при скролле */
.nav.nav--scrolled{ box-shadow:none; }
/* заметка о подстановке товара в калькулятор */
.calc-prefill{ font-size:12px; color:var(--graphite); background:var(--paper); border:1px solid var(--mist); border-radius:2px; padding:8px 10px; margin-bottom:10px; }

/* [round 4 · CRO] триаст-строка в модалке + CTA после результата калькулятора */
.lead-modal .lm-trust{ font-size:11.5px; color:var(--graphite); margin-top:12px; letter-spacing:.02em; }
.calc-cta{ margin-top:0; border-top:1px solid var(--mist); padding:18px 22px 22px; }
.calc-cta .ghost{ width:100%; justify-content:center; }
.calc-cta__note{ font-family:var(--mono); font-size:11.5px; color:var(--graphite); margin-top:10px; text-align:center; }

/* ============================================================
   CTA-КНОПКИ — чуть крупнее (единый размер для .ghost).
   Ховер/пресс-эффекты остаются из блока [MOTION v2] выше.
   ============================================================ */
.ghost{ padding:11px 28px; font-size:15px; }
/* уже увеличенные контекстные кнопки не трогаем (товар/калькулятор/навбар
   имеют свои размеры), только слегка поднимаем базовые section-CTA. */

/* ============================================================
   [MOBILE UX] — мобильные слайдеры, фильтр-шторка, фиксы вёрстки.
   ============================================================ */

/* — Карточка товара: свайп-галерея на мобильных — */
@media (max-width:760px){
  .pd-thumbs{ display:flex; flex-wrap:nowrap; overflow-x:auto; gap:8px;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-bottom:4px; }
  .pd-thumbs::-webkit-scrollbar{ display:none; }
  .pd-thumbs .pd-thumb{ flex:0 0 64px; width:64px; height:64px; scroll-snap-align:start; }
  .pd-main{ touch-action:pan-y; } /* вертикальный скролл — браузеру, горизонтальный свайп — наш */
}
/* точки-индикатор под главным фото (создаёт JS только на мобиле) */
.pd-dots{ display:flex; justify-content:center; gap:6px; margin-top:10px; }
.pd-dots i{ width:6px; height:6px; border-radius:9999px; background:var(--mist); transition:background .2s ease, transform .2s ease; }
.pd-dots i.on{ background:var(--carbon); transform:scale(1.25); }
@media (min-width:761px){ .pd-dots{ display:none; } }

/* — Доставка и оплата: на мобильных одна колонка, равные ячейки — */
@media (max-width:760px){
  .delivery-grid{ grid-template-columns:1fr; }
  .doc-grid, .bim-grid{ grid-template-columns:1fr; }
  .dc, .doc, .bim{ min-height:0; }
}

/* — Пульс-подсветка тёмной цитаты (фолбэк/дополнение к WebGL-лучам) — */
.pull--dark::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(55% 75% at 72% 12%, rgba(255,255,255,.11), transparent 62%),
    radial-gradient(45% 65% at 18% 85%, rgba(255,255,255,.055), transparent 60%);
  animation:pullGlow 8s ease-in-out infinite alternate; }
@keyframes pullGlow{ from{ opacity:.45; transform:translate3d(0,-2.5%,0) scale(1.02); }
                     to  { opacity:1;   transform:translate3d(0, 2.5%,0) scale(1); } }
@media (prefers-reduced-motion:reduce){ .pull--dark::before{ animation:none; opacity:.7; } }

/* — Каталог: мобильная шторка фильтров — */
.fsheet-btn{ display:none; }
@media (max-width:1020px){
  .fsheet-btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:13px;
    color:var(--frost); background:var(--carbon); border:0; border-radius:2px; padding:11px 18px; min-height:44px; }
  .fsheet-btn .cnt{ background:var(--frost); color:var(--carbon); border-radius:9999px; font-size:11px;
    min-width:18px; height:18px; display:inline-grid; place-items:center; padding:0 5px; }
  .rail{ position:fixed; left:0; right:0; bottom:0; top:auto; z-index:220; margin:0;
    max-height:82vh; overflow-y:auto; background:var(--frost);
    border:0; border-top:1px solid var(--mist); border-radius:12px 12px 0 0;
    padding:18px var(--edge) 96px; display:block;
    transform:translateY(105%); transition:transform .32s var(--ease); }
  html.fsheet-open .rail{ transform:translateY(0); box-shadow:0 -18px 50px rgba(0,0,0,.25); }
  .fsheet-scrim{ position:fixed; inset:0; z-index:215; background:rgba(0,0,0,.42);
    opacity:0; pointer-events:none; transition:opacity .3s ease; }
  html.fsheet-open .fsheet-scrim{ opacity:1; pointer-events:auto; }
  html.fsheet-open{ overflow:hidden; }
  .fsheet-apply{ position:fixed; left:0; right:0; bottom:0; z-index:221; padding:12px var(--edge)
    calc(12px + env(safe-area-inset-bottom)); background:var(--frost); border-top:1px solid var(--mist);
    transform:translateY(105%); transition:transform .32s var(--ease); }
  html.fsheet-open .fsheet-apply{ transform:translateY(0); }
  .fsheet-apply .ghost{ width:100%; justify-content:center; }
  .rail .f-group{ border-top:1px solid var(--mist); padding:16px 0; }
  .rail .f-group:first-child{ border-top:0; }
}
@media (prefers-reduced-motion:reduce){ .rail, .fsheet-apply, .fsheet-scrim{ transition:none; } }


/* ── [fix] Мобильный overflow карточки товара ──
   Grid-ячейки .pd имеют min-width:auto: лента превью (flex nowrap)
   распирала колонку и весь документ шире вьюпорта (обрезка справа,
   «уезжающий» экран на iPhone). min-width:0 позволяет ячейкам сжиматься. */
.pd > *{ min-width:0; }
.pd-media, .pd-info{ max-width:100%; }
/* страховка для iOS Safari: body overflow-x:hidden там игнорируется,
   clip на html не создаёт scroll-container и не ломает sticky */
html{ overflow-x:clip; }