/* =========================================================================
   BRANDBOOK — корпоративный сайт
   Светлая тема: чёрный / белый / серый — фирменная палитра компании.
   Цвет допускается только в фотографиях товаров; все UI-элементы,
   иконки и графика — монохромные (это тоже часть фирменного стиля,
   а не временная заглушка).
   Шрифты: Montserrat (заголовки), Roboto (текст), Roboto Mono (цифры/лейблы)
   — Google Fonts, свободны для коммерческого использования.
   ========================================================================= */

:root{
  --bg:        #FFFFFF;
  --bg-2:      #F4F4F3;   /* чуть тёплый графитовый нейтраль, не чистый серый */
  --graphite:  #1B1C20;   /* глубокий нейтраль для «тёмных» секций/футера */
  --surface:   #FFFFFF;
  --surface-2: #ECECEA;
  --line:      rgba(15,15,14,.13);
  --line-soft: rgba(15,15,14,.08);

  --ink:       #131315;
  --ink-dim:   #4A4A4D;
  --muted:     #86858A;

  --accent:      #131315;   /* «акцент» в монохромной палитре — глубокий чёрный */
  --accent-ink:  #FFFFFF;
  --hair:        rgba(19,19,21,.15);

  --maxw: 1180px;
  --pad: clamp(1.15rem, 5vw, 2.5rem);
  --section: clamp(4.5rem, 9vw, 7.5rem);
  --gap-xs: .5rem;
  --gap-sm: 1rem;
  --gap-md: 1.75rem;
  --gap-lg: 3rem;
  --radius: 18px;
  --radius-sm: 12px;

  --f-display:'Montserrat', system-ui, 'Segoe UI', sans-serif;
  --f-body:'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --shadow-sm: 0 1px 2px rgba(16,17,20,.04), 0 1px 1px rgba(16,17,20,.03);
  --shadow-md: 0 10px 30px -12px rgba(16,17,20,.18);
  --shadow-lg: 0 24px 60px -20px rgba(16,17,20,.28);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--f-body);
  font-size:clamp(1rem,.97rem + .25vw,1.06rem);
  line-height:1.62;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{ font-family:var(--f-display); font-weight:700; line-height:1.06; text-wrap:balance; margin:0; letter-spacing:-.01em; color:var(--ink); }
p{ margin:0; }
a{ color:inherit; }
img,svg{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; }

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

:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:4px; }

/* ---------- eyebrow ---------- */
.eyebrow{
  font-family:var(--f-mono);
  font-size:.72rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--ink); }

/* ---------- buttons ---------- */
.btn{
  --_bg:var(--accent); --_fg:var(--accent-ink); --_bd:var(--accent);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--f-body); font-weight:700; font-size:.96rem;
  padding:.9em 1.55em; border-radius:999px;
  background:var(--_bg); color:var(--_fg);
  border:1.5px solid var(--_bd); cursor:pointer; text-decoration:none;
  transition:transform .16s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn--ghost{ --_bg:transparent; --_fg:var(--ink); --_bd:var(--hair); }
.btn--ghost:hover{ --_bd:var(--ink); box-shadow:none; }
.btn--sm{ padding:.6em 1.1em; font-size:.86rem; }
.btn svg{ width:1.05em; height:1.05em; }
.btn--block{ width:100%; }

/* ---------- header / mega menu ---------- */
.site-head{
  position:sticky; top:0; z-index:80;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:74px; gap:1rem; }
.brand{ display:flex; align-items:center; gap:.62rem; text-decoration:none; color:var(--ink); flex:none; }
.brand__mark{ width:26px; height:26px; flex:none; }
.brand__mark path{ fill:var(--ink); }
.brand__name{ font-family:var(--f-display); font-weight:700; font-size:.96rem; letter-spacing:.16em; }

.main-nav{ display:flex; align-items:center; gap:1.9rem; }
.main-nav a{ text-decoration:none; font-size:.92rem; font-weight:500; color:var(--ink-dim); padding:.4rem 0; position:relative; }
.main-nav a:hover, .main-nav a[aria-current="page"]{ color:var(--ink); }
.main-nav a[aria-current="page"]::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--ink); }
.nav-toggle{ display:none; }

.catalog-trigger{ display:flex; align-items:center; gap:.5rem; background:var(--ink); color:#fff; border:none; border-radius:999px; padding:.62em 1.15em; font-weight:700; font-size:.9rem; cursor:pointer; }
.catalog-trigger svg{ width:1.1em; height:1.1em; }

.head-right{ display:flex; align-items:center; gap:1.1rem; flex:none; }
.head-phone{ font-family:var(--f-mono); font-size:.88rem; color:var(--ink); text-decoration:none; font-weight:600; }
@media (max-width:900px){ .main-nav{ display:none; } .head-phone{ display:none; } }

.hamburger{ display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--hair); background:#fff; align-items:center; justify-content:center; cursor:pointer; }
.hamburger svg{ width:20px; height:20px; }
@media (max-width:900px){ .hamburger{ display:inline-flex; } }

/* mega menu panel */
.mega{
  position:absolute; left:0; right:0; top:100%;
  background:#fff; border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-lg);
  display:none;
}
.mega.open{ display:block; }
.mega__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; padding:2.2rem 0; }
.mega__col h4{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.9rem; }
.mega__col ul{ display:flex; flex-direction:column; gap:.55rem; }
.mega__col a{ text-decoration:none; color:var(--ink-dim); font-size:.92rem; }
.mega__col a:hover{ color:var(--ink); text-decoration:underline; }
@media (max-width:1040px){ .mega__grid{ grid-template-columns:repeat(2,1fr); } }

/* mobile drawer */
.drawer{ position:fixed; inset:0; z-index:100; display:none; }
.drawer.open{ display:block; }
.drawer__backdrop{ position:absolute; inset:0; background:rgba(16,17,20,.4); }
.drawer__panel{ position:absolute; top:0; right:0; bottom:0; width:min(92vw,420px); background:#fff; overflow-y:auto; box-shadow:var(--shadow-lg); }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.3rem; border-bottom:1px solid var(--line-soft); }
.drawer__close{ width:36px; height:36px; border-radius:8px; border:1px solid var(--hair); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.drawer nav{ padding:.6rem 1.3rem 2rem; display:flex; flex-direction:column; }
.drawer nav a{ padding:.85rem 0; border-bottom:1px solid var(--line-soft); text-decoration:none; color:var(--ink); font-weight:600; display:flex; align-items:center; justify-content:space-between; }
.drawer nav .sub{ padding-left:1rem; display:none; flex-direction:column; }
.drawer nav .sub.open{ display:flex; }
.drawer nav .sub a{ border-bottom:none; padding:.55rem 0; font-weight:400; color:var(--ink-dim); }

/* ---------- breadcrumbs ---------- */
.crumbs{ display:flex; flex-wrap:wrap; gap:.4rem; font-size:.86rem; color:var(--muted); align-items:center; }
.crumbs a{ text-decoration:none; color:var(--muted); }
.crumbs a:hover{ color:var(--ink); }
.crumbs .sep{ opacity:.5; }
.crumbs .current{ color:var(--ink); font-weight:600; }

/* ---------- page header band ---------- */
.page-head{ padding:clamp(2.2rem,6vw,3.6rem) 0 clamp(1.8rem,4vw,2.6rem); background:var(--bg-2); border-bottom:1px solid var(--line-soft); }
.page-head h1{ font-size:clamp(1.9rem,1.4rem + 2.4vw,3rem); margin-top:.9rem; }
.page-head p{ margin-top:1rem; max-width:60ch; color:var(--ink-dim); font-size:1.05rem; }

/* ---------- hero ---------- */
.hero{ padding-top:clamp(2.6rem,6vw,4.2rem); padding-bottom:clamp(3rem,7vw,5rem); position:relative; }
.hero__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2.5rem,6vw,5rem); align-items:center; }
@media (max-width:980px){ .hero__grid{ grid-template-columns:1fr; } }
.hero h1{ font-size:clamp(2.3rem,1.5rem + 3.6vw,3.7rem); margin-top:1.2rem; letter-spacing:-.02em; }
.hero__lead{ margin-top:1.3rem; max-width:50ch; color:var(--ink-dim); font-size:1.1rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }

.hero__art{ position:relative; }
.hero__stage{ aspect-ratio:1/1; max-width:420px; margin-inline:auto; }
@media (max-width:980px){ .hero__stage{ max-width:300px; } }

.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,3vw,2rem); margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.stat{ display:flex; flex-direction:column; gap:.3rem; }
.stat b{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.3rem,1rem + 1.4vw,1.8rem); font-variant-numeric:tabular-nums; }
.stat span{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.05em; color:var(--muted); text-transform:uppercase; }

/* ---------- full-bleed section bands (rhythm) ---------- */
.band{ padding-block:var(--section); }
.band--alt{ background:var(--bg-2); }
.band--dark{ background:var(--graphite); color:#fff; }
.band--dark .eyebrow{ color:rgba(255,255,255,.55); }
.band--dark .eyebrow::before{ background:#fff; }
.band--dark h2, .band--dark h3{ color:#fff; }
.band--dark p{ color:rgba(255,255,255,.68); }
.band--border-t{ border-top:1px solid var(--line-soft); }
.band--border-b{ border-bottom:1px solid var(--line-soft); }
section > .wrap:only-child{ padding-block:calc(var(--section) * .6); }
main > section.wrap{ padding-block:calc(var(--section) * .6); }

/* ---------- section head w/ ticket tag ---------- */
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:2.6rem; }
.section-head h2{ font-size:clamp(1.55rem,1.2rem + 1.6vw,2.3rem); margin-top:.55rem; }
.section-head p{ color:var(--ink-dim); margin-top:.65rem; max-width:54ch; }
.bar{ display:flex; align-items:center; gap:.7rem; margin-bottom: .3rem;}
.bar::before{ content:""; width:4px; height:1.4em; background:var(--ink); border-radius:2px; }

/* ticket: order-slip style numbered tag, references the print/production world */
.ticket{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border:1px solid var(--hair); border-radius:999px; padding:.35em .9em .35em .5em; }
.ticket b{ background:var(--ink); color:#fff; border-radius:999px; width:1.6em; height:1.6em; display:inline-flex; align-items:center; justify-content:center; font-style:normal; }
.band--dark .ticket{ border-color:rgba(255,255,255,.25); color:rgba(255,255,255,.6); }
.band--dark .ticket b{ background:#fff; color:var(--graphite); }

/* ---------- category / product tiles ---------- */
.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
@media (max-width:980px){ .tiles{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .tiles{ grid-template-columns:1fr 1fr; gap:.75rem; } }
.tile{
  position:relative; border-radius:var(--radius-sm); overflow:hidden;
  background:var(--bg-2); border:1px solid var(--line); text-decoration:none; color:var(--ink);
  aspect-ratio:1/1; display:flex; flex-direction:column; justify-content:flex-end;
  transition:box-shadow .2s ease, transform .2s ease;
}
.tile:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.tile__ph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:
    linear-gradient(180deg, rgba(16,17,20,0) 40%, rgba(16,17,20,.72) 100%),
    repeating-linear-gradient(45deg, var(--surface-2) 0 2px, transparent 2px 16px), var(--bg-2);
}
.tile__ph svg{ width:34%; height:34%; opacity:.32; }
.tile__arrow{ position:absolute; top:.7rem; right:.7rem; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.85); display:flex; align-items:center; justify-content:center; }
.tile__arrow svg{ width:16px; height:16px; }
.tile__label{ position:relative; z-index:1; padding:.9rem; color:#fff; font-weight:700; font-size:.94rem; line-height:1.25; }

.cat-nav{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.2rem; }
.cat-nav a{ text-decoration:none; padding:.55em 1.1em; border-radius:999px; border:1.5px solid var(--hair); color:var(--ink-dim); font-weight:600; font-size:.88rem; }
.cat-nav a.active,.cat-nav a:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---------- direction cards ---------- */
.dir-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
@media (max-width:900px){ .dir-grid{ grid-template-columns:1fr; } }
.dir-card{ border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:.6rem; transition:box-shadow .2s ease, transform .2s ease; }
.dir-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.dir-card__icon{ width:44px; height:44px; border-radius:12px; background:var(--bg-2); display:flex; align-items:center; justify-content:center; }
.dir-card__icon svg{ width:22px; height:22px; }
.dir-card h3{ font-size:1.15rem; margin-top:.3rem; }
.dir-card p{ color:var(--ink-dim); font-size:.94rem; }
.dir-card .link{ margin-top:.4rem; font-weight:700; font-size:.9rem; display:inline-flex; align-items:center; gap:.4rem; }

/* ---------- feature list (icon + text) ---------- */
.feat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
@media (max-width:900px){ .feat-grid{ grid-template-columns:repeat(2,1fr); } }
.feat{ display:flex; flex-direction:column; gap:.6rem; }
.feat__icon{ width:46px; height:46px; border-radius:12px; background:var(--bg-2); display:flex; align-items:center; justify-content:center; }
.feat__icon svg{ width:22px; height:22px; }
.feat h4{ font-size:1rem; }
.feat p{ color:var(--ink-dim); font-size:.9rem; }
/* variant used inside .band--alt: replace boxed icon with a top rule + bare icon, so two
   consecutive icon-grid sections don't read as the same template repeated */
.feat-grid--rule .feat{ padding-top:1.1rem; border-top:2px solid var(--ink); }
.feat-grid--rule .feat__icon{ width:auto; height:auto; background:none; border-radius:0; margin-bottom:.2rem; }
.feat-grid--rule .feat__icon svg{ width:26px; height:26px; }

/* ---------- steps (how we work) ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; } }
.step__n{ width:40px; height:40px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:700; margin-bottom:.8rem; }
.step h4{ font-size:1.02rem; margin-bottom:.35rem; }
.step p{ color:var(--ink-dim); font-size:.9rem; }

/* ---------- FAQ accordion ---------- */
.faq{ display:flex; flex-direction:column; gap:.7rem; max-width:820px; }
.faq details{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:1rem 1.2rem; }
.faq summary{ cursor:pointer; font-weight:700; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--f-mono); color:var(--muted); font-size:1.2rem; flex:none; transition:transform .2s ease; }
.faq details[open] summary::after{ content:"–"; }
.faq p{ margin-top:.8rem; color:var(--ink-dim); font-size:.94rem; }

/* ---------- calculator card ---------- */
.calc{ border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; background:var(--bg-2); }
.calc__row{ margin-bottom:1.3rem; }
.calc__row:last-child{ margin-bottom:0; }
.calc label.k{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.6rem; }
.stepper{ display:inline-flex; align-items:center; gap:.9rem; background:#fff; border:1px solid var(--line); border-radius:999px; padding:.35rem .5rem; }
.stepper button{ width:32px; height:32px; border-radius:50%; border:none; background:var(--bg-2); font-size:1.1rem; cursor:pointer; }
.stepper output{ font-family:var(--f-mono); font-weight:700; min-width:2.4ch; text-align:center; }
.opt-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
.opt{ border:1.5px solid var(--hair); border-radius:var(--radius-sm); padding:.75em .9em; background:#fff; cursor:pointer; font-size:.88rem; font-weight:600; text-align:left; }
.opt.active{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.calc__note{ font-size:.82rem; color:var(--muted); margin-top:.4rem; }

/* ---------- lead form ---------- */
.lead{ border-radius:var(--radius); background:var(--ink); color:#fff; padding:clamp(2rem,5vw,3rem); }
.lead__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:2.5rem; align-items:center; }
@media (max-width:900px){ .lead__grid{ grid-template-columns:1fr; } }
.lead h2{ color:#fff; font-size:clamp(1.5rem,1.2rem+1.6vw,2.2rem); }
.lead p{ color:rgba(255,255,255,.72); margin-top:.7rem; }
.lead form{ background:#fff; border-radius:var(--radius-sm); padding:1.4rem; display:flex; flex-direction:column; gap:1rem; }
.lead label{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.lead input[type="tel"], .lead input[type="text"]{
  width:100%; margin-top:.5rem; border:1px solid var(--hair); border-radius:10px; padding:.85em 1em;
  font-family:var(--f-body); font-size:1rem; color:var(--ink); background:var(--bg-2);
}
.consent{ display:flex; align-items:flex-start; gap:.6rem; }
.consent input{ margin-top:.25rem; }
.consent label{ font-family:var(--f-body); text-transform:none; letter-spacing:0; font-size:.82rem; color:var(--ink-dim); }
.consent a{ text-decoration:underline; }
.form-status{ font-size:.85rem; color:var(--muted); min-height:1.2em; }
.lead-phones{ display:flex; align-items:center; gap:1rem; margin-top:1.6rem; }
.lead-phones a{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:#fff; font-weight:700; background:rgba(255,255,255,.1); padding:.7em 1.1em; border-radius:999px; }

/* ---------- client wordmark wall ---------- */
.brandwall{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
@media (max-width:760px){ .brandwall{ grid-template-columns:repeat(2,1fr); } }
.brandwall__item{ background:#fff; aspect-ratio:2.4/1; display:flex; align-items:center; justify-content:center; padding:1rem; text-align:center; }
.brandwall__item span{ font-family:var(--f-display); font-weight:700; font-size:.98rem; color:var(--ink-dim); letter-spacing:.01em; }
.brandwall__item:hover span{ color:var(--ink); }

/* ---------- placeholder blocks (portfolio / clients / photos) ---------- */
.ph-card{ border:1px dashed var(--hair); border-radius:var(--radius-sm); background:var(--bg-2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; color:var(--muted); text-align:center; padding:1.2rem; }
.ph-card svg{ width:34px; height:34px; opacity:.5; }
.ph-card span{ font-size:.78rem; font-family:var(--f-mono); }

/* ---------- footer ---------- */
.site-foot{ border-top:1px solid var(--line-soft); background:var(--bg-2); padding-block:2.6rem; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; }
@media (max-width:900px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-grid h5{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.9rem; }
.foot-grid ul{ display:flex; flex-direction:column; gap:.55rem; }
.foot-grid a{ text-decoration:none; color:var(--ink-dim); font-size:.92rem; }
.foot-grid a:hover{ color:var(--ink); }
.foot-desc{ color:var(--ink-dim); font-size:.9rem; max-width:32ch; margin-top:.8rem; }
.foot-bottom{ margin-top:2.2rem; padding-top:1.4rem; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:.8rem; font-size:.82rem; color:var(--muted); }
.foot-bottom a{ color:var(--muted); text-decoration:underline; }

.back-top{ position:fixed; right:1.2rem; bottom:1.2rem; width:46px; height:46px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; text-decoration:none; box-shadow:var(--shadow-md); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:40; }
.back-top.show{ opacity:1; pointer-events:auto; }

.reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* generic two-col content */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,3.5rem); align-items:center; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }
.prose{ color:var(--ink-dim); }
.prose h3{ color:var(--ink); font-size:1.2rem; margin:1.4rem 0 .5rem; }
.prose ul{ display:flex; flex-direction:column; gap:.5rem; margin-top:.6rem; }
.prose li{ display:flex; gap:.6rem; }
.prose li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--ink); margin-top:.65em; flex:none; }

.numlist{ display:flex; flex-direction:column; gap:1rem; }
.numlist li{ display:flex; gap:1rem; }
.numlist b{ font-family:var(--f-mono); color:var(--muted); }

.badge{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; padding:.4em .8em; border-radius:999px; border:1px solid var(--hair); color:var(--ink-dim); text-transform:uppercase; }

/* =================== v2: фото, статьи, SEO-страницы =================== */
img{ height:auto; }
.hero-collage{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.hero-collage .hc{ display:block; border-radius:var(--radius-sm); overflow:hidden; background:var(--bg-2); aspect-ratio:4/5; }
.hero-collage .hc1,.hero-collage .hc3{ transform:translateY(1.6rem); }
.hero-collage img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:980px){ .hero-collage .hc1,.hero-collage .hc3{ transform:none; } }

.page-head--split{ padding-bottom:clamp(2rem,4vw,3rem); }
.ph-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.ph-grid > *{ min-width:0; }
@media (max-width:900px){ .ph-grid{ grid-template-columns:1fr; } }
.ph-img{ display:block; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; background:#fff; box-shadow:var(--shadow-md); }
.ph-img img{ width:100%; height:100%; object-fit:cover; }
.page-head .hero__cta{ margin-top:1.5rem; }
.page-head p a{ text-decoration:underline; }
.art-meta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1rem; font-family:var(--f-mono); font-size:.74rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }

.pgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.pgrid--4{ grid-template-columns:repeat(4,1fr); }
.pgrid--2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:980px){ .pgrid,.pgrid--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pgrid,.pgrid--2{ grid-template-columns:1fr; } .pgrid--4{ grid-template-columns:1fr 1fr; gap:.7rem; } }
.pcard{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; text-decoration:none; color:var(--ink); background:#fff; transition:box-shadow .2s ease, transform .2s ease; min-width:0; }
.pcard:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.pcard__img{ aspect-ratio:4/3; overflow:hidden; background:var(--bg-2); }
.pcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.pcard:hover .pcard__img img{ transform:scale(1.04); }
.pcard__body{ padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.45rem; flex:1; }
.pcard__body h3{ font-size:1.06rem; }
.pcard__body p{ color:var(--ink-dim); font-size:.88rem; line-height:1.5; }
.pcard__body .link{ margin-top:auto; font-weight:700; font-size:.86rem; }
.pcard--tile .pcard__body p{ display:none; }
.pcard--tile .pcard__img{ aspect-ratio:1/1; }
@media (max-width:560px){ .pcard--tile .pcard__body{ padding:.7rem; } .pcard--tile h3{ font-size:.92rem; } .pcard--tile .link{ display:none; } }

.art-grid{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(2rem,5vw,4rem); align-items:start; }
.art-grid--single{ grid-template-columns:minmax(0,820px); }
@media (max-width:980px){ .art-grid{ grid-template-columns:minmax(0,1fr); } }
.prose--art{ color:var(--ink); font-size:1.02rem; max-width:780px; min-width:0; }
.prose--art h2{ font-size:clamp(1.35rem,1.1rem + 1vw,1.75rem); margin:2.4rem 0 .9rem; scroll-margin-top:90px; }
.prose--art h2:first-child{ margin-top:0; }
.prose--art h3{ font-size:1.12rem; margin:1.6rem 0 .6rem; color:var(--ink); }
.prose--art p{ margin:0 0 1rem; color:var(--ink-dim); }
.prose--art a{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; color:var(--ink); font-weight:500; }
.prose--art ul,.prose--art ol{ margin:0 0 1.2rem; }
.prose--art ol{ display:flex; flex-direction:column; gap:.5rem; padding-left:1.3rem; list-style:decimal; }
.prose--art ol li{ display:list-item; padding-left:.3rem; color:var(--ink-dim); }
.prose--art ol li::before{ display:none; }
.prose--art strong{ color:var(--ink); }
.fig{ margin:1.6rem 0; }
.fig a{ display:block; border-radius:var(--radius-sm); overflow:hidden; background:var(--bg-2); }
.fig img{ width:100%; max-height:560px; object-fit:cover; }
.fig figcaption{ font-size:.84rem; color:var(--muted); margin-top:.55rem; }
.figgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.figgrid .fig{ margin:0; }
.figgrid .fig img{ aspect-ratio:4/3; }
@media (max-width:700px){ .figgrid{ grid-template-columns:1fr; } }

.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem; margin:1.2rem 0 1.6rem; }
@media (max-width:600px){ .cards{ grid-template-columns:1fr; } }
.card{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:1.1rem 1.2rem; background:#fff; display:flex; flex-direction:column; gap:.4rem; }
.card h3{ font-size:1rem !important; margin:0 !important; }
.card p{ margin:0 !important; font-size:.92rem; }
.card__meta{ margin-top:auto; padding-top:.5rem; font-family:var(--f-mono); font-size:.72rem; color:var(--muted); letter-spacing:.03em; }

.tbl-wrap{ overflow-x:auto; margin:1.2rem 0 1.6rem; border:1px solid var(--line); border-radius:var(--radius-sm); -webkit-overflow-scrolling:touch; max-width:100%; }
.tbl{ width:100%; border-collapse:collapse; font-size:.9rem; min-width:520px; }
.tbl th{ background:var(--bg-2); text-align:left; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); padding:.8rem 1rem; }
.tbl td{ padding:.75rem 1rem; border-top:1px solid var(--line-soft); color:var(--ink-dim); vertical-align:top; }
.tbl td:first-child{ color:var(--ink); font-weight:600; }

.callout{ border-left:4px solid var(--ink); background:var(--bg-2); padding:1rem 1.2rem; border-radius:0 var(--radius-sm) var(--radius-sm) 0; margin:1.4rem 0; }
.callout p{ margin:0 !important; color:var(--ink) !important; }
.callout p + p{ margin-top:.6rem !important; }
.prose--art ol.steps-list{ list-style:none; padding:0; counter-reset:st; gap:.8rem; }
.prose--art ol.steps-list li{ counter-increment:st; display:flex; gap:.9rem; align-items:flex-start; padding:0; }
.prose--art ol.steps-list li::before{ display:flex; content:counter(st); flex:none; width:30px; height:30px; border-radius:50%; background:var(--ink); color:#fff; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:700; font-size:.85rem; margin:0; }

.side{ position:sticky; top:92px; display:flex; flex-direction:column; gap:1rem; }
@media (max-width:980px){ .side{ position:static; } }
.side__cta{ background:var(--ink); color:#fff; border-radius:var(--radius-sm); padding:1.3rem; display:flex; flex-direction:column; gap:.7rem; }
.side__cta b{ font-family:var(--f-display); font-size:1.05rem; }
.side__cta p{ color:rgba(255,255,255,.72); font-size:.88rem; }
.side__cta .btn{ --_bg:#fff; --_fg:var(--ink); --_bd:#fff; }
.side__phone{ color:#fff; text-align:center; font-family:var(--f-mono); font-weight:700; text-decoration:none; font-size:.92rem; }
.side__box{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:1.1rem 1.2rem; }
.side__box h4{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 .7rem; }
.side__box ul,.side__box ol{ display:flex; flex-direction:column; gap:.45rem; }
.side__box a{ text-decoration:none; color:var(--ink-dim); font-size:.9rem; }
.side__box a:hover,.side__box a[aria-current]{ color:var(--ink); font-weight:600; }
.toc{ list-style:decimal; padding-left:1.1rem; font-size:.88rem; color:var(--muted); }

.trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; margin-block:1rem; }
.trust > div{ background:var(--bg-2); padding:1.1rem 1.2rem; display:flex; flex-direction:column; gap:.2rem; }
.trust b{ font-family:var(--f-display); font-size:1.15rem; }
.trust span{ font-size:.8rem; color:var(--muted); }
@media (max-width:760px){ .trust{ grid-template-columns:1fr 1fr; } }

.gal{ display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
@media (max-width:900px){ .gal{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .gal{ grid-template-columns:1fr 1fr; gap:.55rem; } }
.gal__item{ position:relative; display:block; aspect-ratio:1/1; border-radius:var(--radius-sm); overflow:hidden; background:var(--bg-2); }
.gal__item img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.gal__item:hover img{ transform:scale(1.05); }
.gal__item span{ position:absolute; inset:auto 0 0 0; padding:2rem .7rem .6rem; background:linear-gradient(transparent, rgba(16,17,20,.78)); color:#fff; font-size:.76rem; line-height:1.3; opacity:0; transition:opacity .2s ease; }
.gal__item:hover span{ opacity:1; }
@media (hover:none){ .gal__item span{ opacity:1; } }

.lightbox{ position:fixed; inset:0; z-index:200; background:rgba(10,10,12,.92); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1rem; }
.lightbox[hidden]{ display:none; }
.lightbox img{ max-width:min(1200px,96vw); max-height:82vh; width:auto; height:auto; border-radius:8px; }
.lightbox p{ color:#fff; margin-top:.8rem; font-size:.9rem; text-align:center; max-width:60ch; }
.lightbox__close{ position:absolute; top:.8rem; right:1rem; background:none; border:none; color:#fff; font-size:2.2rem; cursor:pointer; line-height:1; }

.mega__col h4 a{ text-decoration:none; color:inherit; }
.mega__col h4 a:hover{ color:var(--ink); }
.drawer nav .sub a.sub__h{ font-weight:700; color:var(--ink); margin-top:.6rem; }
.foot-grid--wide{ grid-template-columns:1.5fr repeat(5,1fr); }
.foot-grid h5 a{ color:inherit; text-decoration:none; }
.foot-contacts{ margin-top:1rem; }
@media (max-width:1100px){ .foot-grid--wide{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .foot-grid--wide{ grid-template-columns:1fr 1fr; } .foot-grid--wide > div:first-child{ grid-column:1/-1; } }
.foot-bottom span a{ color:var(--muted); }
.lead input[type="text"]{ margin-top:.5rem; }
.band--dark .feat h4{ color:#fff; }
.band--dark .feat-grid--rule .feat{ border-top-color:#fff; }
.cat-nav a{ background:#fff; }
.main-nav{ gap:1.4rem; }
@media (max-width:1180px){ .head-phone{ display:none; } }
.hero__grid > *, .lead__grid > *{ min-width:0; }
.stats{ grid-template-columns:repeat(3,minmax(0,1fr)); }
/* fixes */
.prose--art ul{ display:flex; flex-direction:column; gap:.45rem; }
.prose--art ul li{ display:block; position:relative; padding-left:1.1rem; color:var(--ink-dim); }
.prose--art ul li::before{ position:absolute; left:0; top:0; margin-top:.68em; }
.prose--art ol.steps-list li{ display:block; position:relative; padding-left:2.6rem; min-height:30px; }
.prose--art ol.steps-list li::before{ position:absolute; left:0; top:-.1rem; }
.band--dark .feat p, .band--dark .section-head p{ color:rgba(255,255,255,.7); }
.main-nav a{ white-space:nowrap; }
.foot-grid--wide{ grid-template-columns:1.4fr repeat(4,1fr) 1.3fr; gap:1.6rem; }
.foot-grid--wide a{ font-size:.86rem; }
@media (max-width:1100px){ .foot-grid--wide{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .foot-grid--wide{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .head-right .btn{ display:none; } .site-head .wrap{ min-height:62px; } }
.brandwall__item{ min-width:0; } .brandwall__item span{ overflow-wrap:anywhere; font-size:.88rem; }

.mega__grid{ padding:2.2rem var(--pad); }
.site-head .mega__grid{ display:grid; grid-template-columns:repeat(4,1fr); align-items:start; justify-content:stretch; min-height:0; gap:2rem; }
@media (max-width:1040px){ .site-head .mega__grid{ grid-template-columns:repeat(2,1fr); } }

/* =================== калькуляторы =================== */
.calc-box{ border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-2); padding:clamp(1rem,3vw,1.6rem); }
.calc-tabs{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.2rem; }
.calc-tabs button{ border:1.5px solid var(--hair); background:#fff; border-radius:999px; padding:.55em 1.1em; font-weight:600; font-size:.88rem; cursor:pointer; color:var(--ink-dim); }
.calc-tabs button.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.calc-grid{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(1rem,3vw,2rem); align-items:start; }
@media (max-width:860px){ .calc-grid{ grid-template-columns:1fr; } }
.calc-fields{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem 1rem; }
@media (max-width:520px){ .calc-fields{ grid-template-columns:1fr; } }
.calc-hint{ grid-column:1/-1; font-family:var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.cf{ display:flex; flex-direction:column; gap:.35rem; font-size:.85rem; color:var(--ink-dim); }
.cf select,.cf input{ width:100%; border:1px solid var(--hair); border-radius:10px; padding:.7em .8em; font:inherit; font-size:.95rem; color:var(--ink); background:#fff; }
.cf__in{ position:relative; display:block; }
.cf__in em{ position:absolute; right:.8em; top:50%; transform:translateY(-50%); font-style:normal; color:var(--muted); font-size:.85rem; pointer-events:none; }
.cc{ grid-column:1/-1; display:flex; gap:.6rem; align-items:flex-start; font-size:.88rem; color:var(--ink-dim); cursor:pointer; }
.cc input{ margin-top:.2rem; width:16px; height:16px; accent-color:var(--ink); }
.calc-out{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:1.2rem; position:sticky; top:92px; }
.co-label{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.co-total{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.8rem,1.4rem + 1.6vw,2.4rem); margin:.3rem 0 .1rem; font-variant-numeric:tabular-nums; }
.co-unit{ color:var(--ink-dim); font-size:.9rem; }
.co-rows{ margin:1rem 0 .6rem; border-top:1px solid var(--line-soft); }
.co-row{ display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px solid var(--line-soft); font-size:.88rem; }
.co-row span{ color:var(--ink-dim); } .co-row b{ font-variant-numeric:tabular-nums; text-align:right; }
.co-notes{ display:flex; flex-direction:column; gap:.35rem; margin:.4rem 0 1rem; font-size:.8rem; color:var(--muted); }
.co-notes li::before{ content:"· "; }
.co-vat{ margin-bottom:.9rem; }
.co-fine{ font-size:.75rem; color:var(--muted); margin-top:.6rem; text-align:center; }

/* =================== товары поставщиков =================== */
.sp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; }
@media (max-width:980px){ .sp-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){ .sp-grid{ grid-template-columns:repeat(2,1fr); gap:.6rem; } }
.sp{ border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; overflow:hidden; display:flex; flex-direction:column; }
.sp__img{ aspect-ratio:1/1; background:var(--bg-2); display:flex; align-items:center; justify-content:center; color:var(--muted); }
.sp__img img{ width:100%; height:100%; object-fit:contain; }
.sp__img svg{ width:36%; height:36%; opacity:.45; }
.sp__b{ padding:.8rem .9rem 1rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.sp__name{ font-weight:600; font-size:.9rem; line-height:1.3; }
.sp__meta{ font-family:var(--f-mono); font-size:.7rem; color:var(--muted); }
.sp__row{ display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; margin-top:auto; font-size:.85rem; }
.sp__stock{ color:#1f7a3a; font-size:.78rem; font-weight:600; }
.sp__stock--low{ color:#a3620a; }
.sp .btn{ margin-top:.5rem; }
.sp-demo{ background:#fff7e0; border:1px solid #f0d58a; color:#6b4e00; padding:.7rem 1rem; border-radius:10px; font-size:.86rem; margin-bottom:1rem; }
.sp-upd{ font-family:var(--f-mono); font-size:.72rem; color:var(--muted); margin-bottom:.8rem; }
.sp-filters{ display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:.7rem; align-items:center; margin-bottom:1rem; }
@media (max-width:860px){ .sp-filters{ grid-template-columns:1fr 1fr; } .sp-filters input[type=search]{ grid-column:1/-1; } }
.sp-filters input,.sp-filters select{ border:1px solid var(--hair); border-radius:10px; padding:.7em .8em; font:inherit; background:#fff; width:100%; }
.sp-filters .cc{ grid-column:auto; white-space:nowrap; }
.sp-count{ font-size:.85rem; color:var(--muted); margin-bottom:.8rem; }
@media (max-width:1400px){ .head-phone{ display:none; } } .main-nav{ gap:1.15rem; } .main-nav a{ font-size:.9rem; }
@media (max-width:1100px){ .main-nav{ display:none; } .hamburger{ display:inline-flex; } }

.sp__inway{font-size:12px;color:var(--muted,#777);margin-top:4px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.calc-item{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;background:var(--bg-soft,#f3f2ef);border-radius:12px;padding:.6rem .8rem;margin:0 0 .9rem;font-size:.92rem}
.calc-item img{width:44px;height:44px;object-fit:contain;border-radius:8px;background:#fff}
.calc-item b{font-weight:600}
.calc-item button{margin-left:auto;border:0;background:none;cursor:pointer;font-size:1.2rem;line-height:1;color:inherit;opacity:.6}
.calc-item button:hover{opacity:1}
.sp__plain{display:block;text-align:center;font-size:.85rem;margin-top:.55rem;color:inherit;opacity:.7;text-decoration:underline;text-underline-offset:3px}
.sp__plain:hover{opacity:1}
.calc-tabs button[data-t="plain"]{border-style:dashed}
.calc-item{grid-column:1/-1}