/* ============================================================
   ТехноАльянс — редизайн на механике Triada Design System
   Rubik · юнит-сетка · акцентные тинты · grid-текстура
   ============================================================ */

@font-face { font-family:'rubik'; src:url('fonts/rubik_r.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'rubik'; src:url('fonts/rubik_r_i.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'rubik'; src:url('fonts/rubik_m.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'rubik'; src:url('fonts/rubik_b.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

/* ---------- Юнит-сетка ---------- */
:root{
  --unit: calc(100vw / 160);
  --pixel: calc(var(--unit) * 0.1);
  --min-unit: calc(var(--unit) * 0.2);
  --half-unit: calc(var(--unit) * 0.5);
  --1unit:var(--unit); --1-5unit:calc(var(--unit)*1.5); --2unit:calc(var(--unit)*2);
  --2-5unit:calc(var(--unit)*2.5); --3unit:calc(var(--unit)*3); --3-5unit:calc(var(--unit)*3.5);
  --4unit:calc(var(--unit)*4); --4-5unit:calc(var(--unit)*4.5); --5unit:calc(var(--unit)*5);
  --6unit:calc(var(--unit)*6); --7unit:calc(var(--unit)*7); --8unit:calc(var(--unit)*8);
  --9unit:calc(var(--unit)*9); --10unit:calc(var(--unit)*10); --12unit:calc(var(--unit)*12);
  --15unit:calc(var(--unit)*15); --20unit:calc(var(--unit)*20);

  /* ---------- Палитра ТехноАльянс (синий + сигнальный жёлтый) ---------- */
  --accent:  #16356b;   /* стальной навигатор-синий — двигатель тинтов и сетки */
  --accent2: #1f74d4;   /* яркий лого-синий — ссылки */
  --cta:     #f6c517;   /* сигнальный жёлтый — главный CTA */
  --cta-ink: #122c57;   /* текст на жёлтом */
  --ink:     #14213d;   /* заголовки */
  --text:    #38445c;   /* основной текст */
  --bg:      #ffffff;
  --bg-soft: #eef3fa;   /* холодная подложка секций */

  --accent-t:  color-mix(in srgb, var(--accent) 4%, transparent);
  --accent-t1: color-mix(in srgb, var(--accent) 8%, transparent);
  --accent-t2: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-t3: color-mix(in srgb, var(--accent) 38%, transparent);
  --accent-t4: color-mix(in srgb, var(--accent) 82%, transparent);
  --cta-t1:    color-mix(in srgb, var(--cta) 14%, transparent);
  --cta-t3:    color-mix(in srgb, var(--cta) 45%, transparent);

  /* grid-текстура движка Триады, окрашена акцентом */
  --back: repeating-linear-gradient(90deg, var(--accent-t) 0 6vmin, var(--accent-t1) 6vmin calc(6vmin + 2px), var(--accent-t) calc(6vmin + 2px) 12vmin),
          repeating-linear-gradient(0deg, var(--accent-t) 0 8vmin, var(--accent-t1) 8vmin calc(8vmin + 2px), var(--accent-t) calc(8vmin + 2px) 17vmin);

  --r-sm: var(--half-unit);
  --r-md: var(--1unit);
  --r-lg: var(--2unit);
  --shadow-soft: 0 var(--1unit) var(--4unit) color-mix(in srgb, var(--accent) 12%, transparent);
  --shadow-lift: 0 var(--2unit) var(--6unit) color-mix(in srgb, var(--accent) 18%, transparent);
}
@media (max-width: 860px){ :root{ --unit: calc(100vw / 40); } }

/* round-radius tweak */
:root[data-radius="round"]{ --r-sm: var(--1unit); --r-md: var(--2unit); --r-lg: var(--3-5unit); }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:'rubik', Verdana, system-ui, sans-serif;
  color:var(--text); background:var(--bg); font-size:var(--2-5unit); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* глобальный короткий transition в духе движка */
a, button, .card, .brand, .logo-mark, .catalog-card, input, .chip, .pick{
  transition: background-color .2s ease, color .2s ease, border-color .2s ease,
              box-shadow .2s ease, transform .2s ease, filter .2s ease;
}

.wrap{ width:min(1320px, 92vw); margin:0 auto; }
.eyebrow{
  font-size:var(--2unit); font-weight:600; text-transform:uppercase;
  letter-spacing:calc(var(--pixel)*3); color:var(--accent2);
}
.section-title{
  font-size:var(--5-5unit, var(--5unit)); font-weight:600; color:var(--ink);
  line-height:1.1; letter-spacing:-0.01em; margin:var(--1unit) 0 0;
}
h2.section-title{ font-size:var(--5unit); }
.section-sub{ font-size:var(--2-5unit); color:var(--text); max-width:46ch; margin:var(--1-5unit) auto 0; }
.center{ text-align:center; }

/* ---------- Кнопки (ripple в духе движка) ---------- */
.btn{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:var(--1unit);
  font-family:inherit; font-weight:600; font-size:var(--2unit); letter-spacing:calc(var(--pixel)*2);
  text-transform:uppercase; padding:var(--1-5unit) var(--3unit); border:none; border-radius:var(--r-md);
  cursor:pointer; line-height:1; white-space:nowrap;
}
.btn svg{ width:var(--2-5unit); height:var(--2-5unit); stroke:currentColor; fill:none; stroke-width:2; }
.btn::after{
  content:""; position:absolute; inset:0; margin:auto; width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.6); opacity:0; transform:scale(1,1);
}
.btn:active::after{ opacity:.4; transform:scale(40,40); transition:transform .4s ease, opacity .8s ease; }
.btn-cta{ background:var(--cta); color:var(--cta-ink); }
.btn-cta:hover{ box-shadow:0 0 var(--2unit) var(--cta-t3); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:#fff; border:var(--pixel) solid rgba(255,255,255,.5); }
.btn-ghost:hover{ background:rgba(255,255,255,.12); }
.btn-solid{ background:var(--accent); color:#fff; }
.btn-solid:hover{ background:var(--accent2); box-shadow:0 0 var(--2unit) var(--accent-t2); }
.btn-line{ background:transparent; color:var(--accent); border:var(--pixel) solid var(--accent-t3); }
.btn-line:hover{ background:var(--accent-t1); }

/* ============================================================ HEADER */
.topbar{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, #fff 78%, transparent);
  backdrop-filter:blur(var(--2unit)); -webkit-backdrop-filter:blur(var(--2unit));
  border-bottom:var(--pixel) solid var(--accent-t2);
}
.topbar-inner{ display:flex; align-items:center; gap:var(--3unit); padding:var(--1-5unit) 0; }
.contacts{ display:flex; align-items:center; gap:var(--3unit); }
.contact{ display:inline-flex; align-items:center; gap:var(--1unit); color:var(--text); font-size:var(--2unit); font-weight:500; }
.contact svg{ width:var(--3unit); height:var(--3unit); stroke:var(--accent2); fill:none; stroke-width:1.8; }
.contact:hover{ color:var(--accent2); }
.contact.phone{ font-size:var(--2-5unit); font-weight:600; color:var(--ink); }
.stock-pill{
  display:inline-flex; align-items:center; gap:var(--1unit); margin-left:auto;
  background:var(--accent-t1); color:var(--accent); border-radius:var(--r-lg);
  padding:var(--1unit) var(--2unit); font-size:var(--1-75unit, var(--2unit)); font-weight:600; white-space:nowrap;
}
.stock-dot{ width:var(--1unit); height:var(--1unit); border-radius:50%; background:#19b562; box-shadow:0 0 0 color-mix(in srgb,#19b562 60%,transparent); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb,#19b562 50%,transparent);} 50%{ box-shadow:0 0 0 var(--1unit) transparent; } }
.brandword{ font-size:var(--3-5unit); font-weight:600; letter-spacing:calc(var(--pixel)*1.5); color:var(--accent2); }

/* ============================================================ HERO */
.hero{ position:relative; overflow:hidden; background:var(--accent); }
.hero-photo{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero-photo image-slot{ width:100%; height:100%; }
/* плотный полупрозрачный сюрфейс: слева гуще (под текстом), справа фото читается */
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(96deg,
      color-mix(in srgb,var(--accent) 94%, transparent) 0%,
      color-mix(in srgb,var(--accent) 86%, transparent) 38%,
      color-mix(in srgb,var(--accent) 64%, transparent) 72%,
      color-mix(in srgb,var(--accent2) 50%, transparent) 100%),
    linear-gradient(0deg, color-mix(in srgb,var(--accent) 55%, transparent), transparent 40%);
}
:root[data-hero="grid"] .hero-scrim{ background:linear-gradient(120deg, var(--accent), color-mix(in srgb,var(--accent2) 55%, var(--accent))); }
/* инженерная сетка поверх — всегда в photo/grid, плотнее в grid */
.hero-grid{ position:absolute; inset:0; z-index:1; opacity:.35; mix-blend-mode:overlay;
  background:repeating-linear-gradient(90deg, transparent 0 5.4vmin, rgba(255,255,255,.5) 5.4vmin calc(5.4vmin + 1.5px)),
             repeating-linear-gradient(0deg, transparent 0 7vmin, rgba(255,255,255,.4) 7vmin calc(7vmin + 1.5px)); }
:root[data-hero="grid"] .hero-grid{ opacity:.6; }
:root[data-hero="gradient"] .hero-grid{ display:none; }
:root[data-hero="photo"] .hero-photo{ display:block; }
:root:not([data-hero="photo"]) .hero-photo{ display:none; }

.hero-inner{ position:relative; z-index:2; padding:var(--9unit) 0 var(--10unit); }
.hero-badge{
  display:inline-flex; flex-direction:column; gap:var(--half-unit);
  background:var(--accent2); color:#fff; border-radius:var(--r-md);
  padding:var(--2unit) var(--3unit); margin-bottom:var(--4unit); box-shadow:var(--shadow-soft);
}
.hero-badge b{ font-size:var(--5unit); font-weight:600; line-height:.9; letter-spacing:var(--pixel); }
.hero-badge span{ font-size:var(--1-5unit); text-transform:uppercase; letter-spacing:calc(var(--pixel)*3); opacity:.85; }
.hero h1{
  margin:0; color:#fff; font-weight:600; font-size:var(--9unit); line-height:.98; letter-spacing:-0.02em;
  max-width:16ch; text-wrap:balance;
}
/* смелый жёлтый маркер на ключевом слове */
.hero h1 em{ font-style:normal; color:var(--cta-ink); background:var(--cta);
  padding:0 var(--1-5unit); border-radius:var(--r-sm); box-decoration-break:clone; -webkit-box-decoration-break:clone;
  box-shadow:0 0 var(--3unit) var(--cta-t3); }
.hero-lead{ margin:var(--3unit) 0 0; color:rgba(255,255,255,.86); font-size:var(--3unit); max-width:40ch; }
.hero-lead b{ color:var(--cta); font-weight:600; }

/* поиск по артикулу */
.searchbar{
  margin-top:var(--4unit); display:flex; gap:var(--1unit); max-width:640px;
  background:#fff; border-radius:var(--r-md); padding:var(--1unit); box-shadow:var(--shadow-lift);
}
.searchbar svg{ width:var(--3unit); height:var(--3unit); stroke:var(--accent-t3); fill:none; stroke-width:2; align-self:center; margin-left:var(--1-5unit); }
.searchbar input{
  flex:1; border:none; outline:none; background:transparent; font-family:inherit;
  font-size:var(--2-5unit); color:var(--ink); padding:var(--1-5unit) var(--1unit);
}
.searchbar input::placeholder{ color:color-mix(in srgb,var(--text) 55%, transparent); }
.hero-cta{ display:flex; gap:var(--2unit); margin-top:var(--3unit); flex-wrap:wrap; }
.hero-trust{ display:flex; flex-wrap:wrap; gap:var(--1unit) var(--3unit); margin-top:var(--4unit); }
.hero-trust span{ display:inline-flex; align-items:center; gap:var(--1unit); color:rgba(255,255,255,.82); font-size:var(--2unit); font-weight:500; }
.hero-trust svg{ width:var(--2-5unit); height:var(--2-5unit); stroke:var(--cta); fill:none; stroke-width:2; }

/* индустриальная hazard-полоса — фирменный разделитель */
.hazard{ height:var(--1unit); background:repeating-linear-gradient(135deg,
   var(--cta) 0 var(--3unit), var(--accent) var(--3unit) var(--6unit)); }

/* ============================================================ BRANDS */
.section{ padding:var(--9unit) 0; }
.section-soft{ background:var(--bg-soft); }
.section-grid{ background-image:var(--back); }
:root[data-grid="off"] .section-grid{ background-image:none; }

.brand-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--2unit); margin-top:var(--5unit); }
.brand{
  display:flex; align-items:center; justify-content:center; min-height:var(--12unit);
  background:#fff; border:var(--pixel) solid var(--accent-t2); border-radius:var(--r-md);
  position:relative; padding:var(--2unit);
}
.brand:hover{ border-color:var(--accent2); box-shadow:var(--shadow-soft); transform:translateY(-2px); }
.logo-mark{ font-weight:600; color:color-mix(in srgb,var(--ink) 45%, #fff 30%); filter:grayscale(1); text-align:center; line-height:1; }
.brand:hover .logo-mark{ filter:grayscale(0); color:var(--accent); }
.logo-mark .big{ font-size:var(--4-5unit); letter-spacing:var(--pixel); display:block; }
.logo-mark .small{ font-size:var(--1-5unit); letter-spacing:calc(var(--pixel)*2); text-transform:uppercase; opacity:.7; margin-top:var(--half-unit); }
.brand .count{
  position:absolute; right:var(--1-5unit); bottom:var(--1unit); font-size:var(--1-5unit);
  color:var(--accent2); font-weight:600; opacity:0;
}
.brand:hover .count{ opacity:1; }

/* ============================================================ ADVANTAGES */
.adv-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--2-5unit); }
.adv{
  background:#fff; border-radius:var(--r-lg); padding:var(--4unit) var(--3unit);
  border:var(--pixel) solid var(--accent-t2); position:relative;
}
.adv:hover{ box-shadow:var(--shadow-lift); transform:translateY(-3px); }
.adv-ico{
  width:var(--7unit); height:var(--7unit); border-radius:var(--r-md);
  background:var(--accent-t1); display:flex; align-items:center; justify-content:center; margin-bottom:var(--3unit);
}
.adv-ico svg{ width:var(--4unit); height:var(--4unit); stroke:var(--accent); fill:none; stroke-width:1.8; }
.adv h3{ margin:0 0 var(--1unit); font-size:var(--3unit); font-weight:600; color:var(--ink); }
.adv p{ margin:0; font-size:var(--2-25unit, var(--2unit)); color:var(--text); line-height:1.5; }
.adv .metric{ color:var(--accent2); font-weight:600; }

/* ============================================================ WIZARD */
.wizard{
  margin-top:var(--5unit); background:#fff; border-radius:var(--r-lg); overflow:hidden;
  border:var(--pixel) solid var(--accent-t2); box-shadow:var(--shadow-soft);
  display:grid; grid-template-columns:1.4fr 1fr;
}
.wizard-form{ padding:var(--5unit); }
.wz-step{ margin-bottom:var(--3-5unit); }
.wz-step .label{ font-size:var(--2unit); font-weight:600; color:var(--ink); text-transform:uppercase; letter-spacing:var(--pixel); margin-bottom:var(--1-5unit); display:flex; align-items:center; gap:var(--1unit); }
.wz-step .label b{ color:var(--accent2); }
.picks{ display:flex; flex-wrap:wrap; gap:var(--1unit); }
.pick{
  border:var(--pixel) solid var(--accent-t3); background:#fff; color:var(--text);
  border-radius:var(--r-md); padding:var(--1-5unit) var(--2-5unit); font-family:inherit;
  font-size:var(--2unit); font-weight:500; cursor:pointer;
}
.pick:hover{ border-color:var(--accent2); }
.pick.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.wizard-out{
  background:var(--accent); color:#fff; padding:var(--5unit); display:flex; flex-direction:column;
  justify-content:center; gap:var(--2unit); background-image:var(--back);
}
.wizard-out .eyebrow{ color:var(--cta); }
.wizard-out .rec{ font-size:var(--4unit); font-weight:600; line-height:1.1; }
.wizard-out .rec-sub{ color:rgba(255,255,255,.8); font-size:var(--2-25unit,var(--2unit)); }
.wizard-out .rec-meta{ display:flex; gap:var(--1unit); flex-wrap:wrap; }
.tagchip{ background:rgba(255,255,255,.14); border-radius:var(--r-sm); padding:var(--half-unit) var(--1-5unit); font-size:var(--1-75unit,var(--2unit)); }

/* ============================================================ CATALOGS */
.cat-group-title{ font-size:var(--2unit); font-weight:600; text-transform:uppercase; letter-spacing:calc(var(--pixel)*3); color:var(--accent2); margin:var(--5unit) 0 var(--2unit); }
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--2-5unit); }
.catalog-card{
  display:flex; flex-direction:column; gap:var(--1unit); padding:var(--3-5unit);
  background:#fff; border-radius:var(--r-lg); border:var(--pixel) solid var(--accent-t2);
  border-left:var(--half-unit) solid var(--cta); position:relative; min-height:var(--15unit);
}
.catalog-card:hover{ box-shadow:var(--shadow-lift); transform:translateY(-3px); }
.catalog-card.feature{ background:linear-gradient(135deg,var(--accent),var(--accent2)); border-left-color:var(--cta); color:#fff; }
.catalog-card h3{ margin:0; font-size:var(--4unit); font-weight:600; color:var(--ink); }
.catalog-card.feature h3{ color:#fff; }
.catalog-card p{ margin:0; font-size:var(--2unit); color:var(--text); line-height:1.45; }
.catalog-card.feature p{ color:rgba(255,255,255,.85); }
.catalog-card .arrow{
  margin-top:auto; align-self:flex-end; width:var(--5unit); height:var(--5unit); border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--cta-t1); color:var(--accent);
}
.catalog-card.feature .arrow{ background:rgba(255,255,255,.18); color:#fff; }
.catalog-card .arrow svg{ width:var(--2-5unit); height:var(--2-5unit); stroke:currentColor; fill:none; stroke-width:2.2; }
.catalog-card:hover .arrow{ background:var(--cta); color:var(--cta-ink); }

/* ============================================================ INDUSTRIES (соц. доказательство) */
.industries{ padding:var(--6unit) 0; border-top:var(--pixel) solid var(--accent-t2); border-bottom:var(--pixel) solid var(--accent-t2); }
.industries .eyebrow{ display:block; margin-bottom:var(--2-5unit); }
.ind-row{ display:flex; flex-wrap:wrap; gap:var(--1-5unit); align-items:center; }
.chip{
  display:inline-flex; align-items:center; gap:var(--1unit);
  background:var(--accent-t1); color:var(--accent); border:var(--pixel) solid var(--accent-t2);
  border-radius:var(--r-lg); padding:var(--1-5unit) var(--2-5unit); font-size:var(--2-25unit,var(--2unit)); font-weight:500;
}
.chip:hover{ background:var(--accent); color:#fff; border-color:var(--accent); transform:translateY(-2px); }
.chip svg{ width:var(--2-5unit); height:var(--2-5unit); stroke:currentColor; fill:none; stroke-width:1.8; }

/* ============================================================ STATS BAND */
.stats{ position:relative; overflow:hidden; background:var(--accent); color:#fff; background-image:var(--back); }
.stats-watermark{
  position:absolute; right:-2vw; top:50%; transform:translateY(-50%);
  font-size:64vmin; font-weight:600; line-height:.7; color:transparent;
  -webkit-text-stroke:var(--min-unit) color-mix(in srgb,var(--cta) 26%, transparent);
  letter-spacing:-0.05em; z-index:0; pointer-events:none; user-select:none;
}
.stats-content{ position:relative; z-index:1; padding:var(--8unit) 0; max-width:64ch; }
.stats h2{ margin:0; font-size:var(--6unit); font-weight:600; line-height:1.02; letter-spacing:-0.015em; }
.stats h2 em{ font-style:normal; color:var(--cta); }
.stats-lead{ margin:var(--2-5unit) 0 var(--4unit); color:rgba(255,255,255,.82); font-size:var(--2-5unit); max-width:48ch; }
.stats-row{ display:flex; gap:var(--6unit); flex-wrap:wrap; }
.stat{ display:flex; flex-direction:column; }
.stat b{ font-size:var(--6unit); color:var(--cta); font-weight:600; line-height:1; letter-spacing:-0.02em; }
.stat span{ font-size:var(--2unit); color:rgba(255,255,255,.8); margin-top:var(--1unit); max-width:16ch; }
.stats-cta{ display:flex; gap:var(--2unit); margin-top:var(--5unit); flex-wrap:wrap; }

/* ============================================================ COUPON FORM */
.coupon{ display:grid; grid-template-columns:1.1fr 1fr; gap:var(--6unit); align-items:center; }
.coupon-copy h2{ margin:0; font-size:var(--5unit); font-weight:600; color:var(--ink); line-height:1.05; }
.coupon-copy p{ font-size:var(--2-5unit); color:var(--text); max-width:42ch; }
.coupon-copy .hl{ color:var(--accent2); font-weight:600; }
.form-coupon{
  background:var(--accent-t1); padding:var(--4unit); border-radius:var(--r-md);
  border-bottom:var(--half-unit) solid var(--accent-t2);
  border-left:var(--half-unit) solid var(--accent-t2);
  border-right:var(--half-unit) solid var(--accent-t2);
  border-top:var(--min-unit) dotted var(--accent-t3);
}
.form-coupon h3{ margin:0 0 var(--2unit); font-size:var(--3unit); font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:var(--pixel); }
.field{ margin-bottom:var(--1-5unit); }
.field input, .field textarea{
  width:100%; box-sizing:border-box; padding:var(--2unit) var(--2-5unit); border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--accent) 6%, #fff); border:none; outline:none; color:var(--ink);
  font-family:inherit; font-size:var(--2-5unit); resize:vertical;
}
.field input::placeholder, .field textarea::placeholder{ color:color-mix(in srgb,var(--text) 50%, transparent); }
.field input:focus, .field textarea:focus{ background:var(--accent-t3); color:#fff; }
.field input:focus::placeholder, .field textarea:focus::placeholder{ color:rgba(255,255,255,.7); }
.submit{ width:100%; padding:var(--2-5unit); margin-top:var(--half-unit); }

/* ============================================================ FOOTER */
.footer{ background:var(--bg-soft); padding:var(--7unit) 0 var(--5unit); border-top:var(--pixel) solid var(--accent-t2); }
.footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:var(--5unit); }
.foot-title{ font-size:var(--2unit); font-weight:600; text-transform:uppercase; letter-spacing:calc(var(--pixel)*3); color:var(--ink); margin:0 0 var(--3unit); }
.foot-contacts{ display:flex; flex-direction:column; gap:var(--2unit); }
.foot-contacts a, .foot-addr{ display:flex; align-items:center; gap:var(--1-5unit); font-size:var(--2-5unit); color:var(--text); }
.foot-contacts a:hover{ color:var(--accent2); }
.foot-contacts svg, .foot-addr svg{ width:var(--3unit); height:var(--3unit); stroke:var(--accent2); fill:none; stroke-width:1.8; flex:none; }
.foot-links{ display:flex; flex-direction:column; gap:var(--1-5unit); }
.foot-links a{ font-size:var(--2-25unit,var(--2unit)); color:var(--text); }
.foot-links a:hover{ color:var(--accent2); }
.copyright{ margin-top:var(--6unit); padding-top:var(--3unit); border-top:var(--pixel) solid var(--accent-t2); font-size:var(--1-75unit,var(--2unit)); color:color-mix(in srgb,var(--text) 65%,transparent); }

/* ---------- Mobile bottom nav (hidden on desktop) ---------- */
.botnav{ display:none; }

/* ---------- Mobile ---------- */
@media (max-width:860px){
  .topbar-inner{ flex-wrap:wrap; gap:var(--2unit); justify-content:space-between; }
  .stock-pill{ order:3; margin-left:0; width:100%; justify-content:center; }
  .contacts .contact span, .contacts .contact{ font-size:var(--2-5unit); }
  .contacts .phone{ display:none; }
  .brandword{ font-size:var(--4unit); }
  .contacts{ gap:var(--3unit); }

  .hero h1{ font-size:var(--8unit); max-width:none; }
  .hero-lead{ font-size:var(--3-5unit); }
  .hero-inner{ padding:var(--6unit) 0 var(--7unit); }
  .hero-cta .btn, .searchbar .btn{ font-size:var(--2-5unit); }
  .searchbar input{ font-size:var(--3unit); }

  .section{ padding:var(--7unit) 0; }
  .section-title, h2.section-title, .coupon-copy h2{ font-size:var(--6unit); }
  .brand-grid{ grid-template-columns:repeat(2,1fr); gap:var(--1-5unit); }
  .brand .count{ opacity:1; }
  .adv-grid{ grid-template-columns:1fr; gap:var(--2unit); }
  .wizard{ grid-template-columns:1fr; }
  .pick{ font-size:var(--2-5unit); }
  .cat-grid{ grid-template-columns:1fr; }
  .catalog-card h3{ font-size:var(--5unit); }
  .ind-row .chip{ font-size:var(--2-5unit); }

  .stats-content{ padding:var(--7unit) 0; }
  .stats h2{ font-size:var(--7unit); }
  .stats-watermark{ font-size:48vmin; opacity:.5; }
  .stat b{ font-size:var(--7unit); }
  .stats-row{ gap:var(--4unit); }
  .coupon{ grid-template-columns:1fr; gap:var(--3unit); }
  .footer-grid{ grid-template-columns:1fr; gap:var(--4unit); }
  .footer{ padding-bottom:var(--12unit); }
  .searchbar{ max-width:none; }

  /* нижний таб-бар */
  body{ padding-bottom:var(--12unit); }
  .botnav{
    display:grid; grid-template-columns:repeat(4,1fr); position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:color-mix(in srgb,#fff 82%, transparent);
    backdrop-filter:blur(var(--2unit)); -webkit-backdrop-filter:blur(var(--2unit));
    border-top:var(--pixel) solid var(--accent-t2);
    padding:var(--1unit) 0 calc(var(--1unit) + env(safe-area-inset-bottom));
  }
  .botnav a{ display:flex; flex-direction:column; align-items:center; gap:var(--half-unit); color:var(--accent); font-size:var(--1-75unit,var(--2unit)); font-weight:500; }
  .botnav a svg{ width:var(--4unit); height:var(--4unit); stroke:currentColor; fill:none; stroke-width:1.8; }
  .botnav a:active svg{ scale:.85; }
  .botnav-accent{ color:var(--accent2) !important; }
  .botnav-cta{ color:var(--cta-ink) !important; }
  .botnav-cta svg{ stroke:var(--cta-ink); }
}