/* ==========================================================================
   ZTX / ZENTORIX — фирменный стиль (из презентаций)
   Палитра: чёрный фон, красные баннеры, хром, золотые акценты
   ========================================================================== */

:root{
  --ink:        #0a0a0a;   /* базовый чёрный */
  --ink-2:      #141414;   /* панель */
  --ink-3:      #1c1c1c;   /* карточка */
  --line:       #2a2a2a;   /* тонкая граница */
  --red:        #E10600;   /* фирменный красный */
  --red-bright: #ff1f17;
  --red-deep:   #6e0300;   /* глубокое свечение */
  --chrome:     #e6e6e6;   /* хром логотипа */
  --gold:       #E0A22A;   /* янтарь / золото иконок */
  --white:      #ffffff;
  --muted:      #9a9a9a;   /* приглушённый текст */
  --muted-2:    #6f6f6f;

  --maxw: 1180px;
  --radius: 6px;
  --shadow: 0 18px 50px rgba(0,0,0,.55);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:"PT Sans","Segoe UI",Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4,.display{
  font-family:"Oswald","PT Sans",sans-serif;
  font-weight:700;
  line-height:1.12;
  text-transform:uppercase;
  letter-spacing:.5px;
  margin:0;
}

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }

/* ---------- Signature: красный косой баннер-заголовок ---------- */
.banner{
  display:inline-block;
  background:var(--red);
  color:#fff;
  font-family:"Oswald",sans-serif;
  font-weight:700;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-size:clamp(22px,3.4vw,40px);
  line-height:1.14;
  padding:.30em 1.15em .34em .85em;
  transform:skewX(-12deg);
  box-shadow:0 10px 30px rgba(225,6,0,.28);
}
.banner > span{ display:inline-block; transform:skewX(12deg); }

.eyebrow{
  font-family:"Oswald",sans-serif;
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:13px;
  color:var(--gold);
  font-weight:600;
}

/* ---------- Header / навигация ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(8,8,8,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; gap:26px;
  height:72px;
}
.nav .logo{ display:flex; align-items:center; }
.nav .logo img{ height:42px; width:auto; }
.nav-links{
  display:flex; align-items:center; gap:22px;
  margin-left:auto;
}
.nav-links a{
  font-family:"Oswald",sans-serif;
  text-transform:uppercase;
  font-size:14px; letter-spacing:.6px;
  color:var(--chrome);
  transition:color .2s var(--ease);
}
.nav-links a:hover{ color:#fff; }
.nav-links a.is-product{ color:var(--gold); }
.nav-links a.is-product:hover{ color:var(--red-bright); }
.nav-phone{
  font-family:"Oswald",sans-serif;
  font-size:16px; letter-spacing:.5px;
  color:#fff; white-space:nowrap;
}
.nav-phone:hover{ color:var(--red-bright); }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; margin-left:auto; }
.nav-toggle span{ display:block; width:26px; height:2px; background:#fff; margin:5px 0; transition:.25s; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:"Oswald",sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.6px; font-size:15px;
  padding:14px 28px; border-radius:var(--radius);
  cursor:pointer; border:1px solid transparent;
  transition:transform .18s var(--ease), background .2s, box-shadow .2s;
}
.btn-red{ background:var(--red); color:#fff; box-shadow:0 10px 28px rgba(225,6,0,.32); }
.btn-red:hover{ transform:translateY(-2px); background:var(--red-bright); }
.btn-ghost{ background:transparent; color:#fff; border-color:#444; }
.btn-ghost:hover{ border-color:var(--red); color:#fff; transform:translateY(-2px); }
.btn .arrow{ transition:transform .2s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:90vh;
  display:flex; align-items:flex-end;
  padding:104px 0 68px;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.06);
  animation:heroZoom 16s ease-out forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.05) 40%, rgba(8,8,8,.92) 100%);
}
.hero .wrap{ position:relative; z-index:2; }
.hero h1{
  font-size:clamp(32px,5.6vw,62px);
  line-height:1.32;
  max-width:19ch;
  text-shadow:0 4px 24px rgba(0,0,0,.6);
}
.hero h1 .hl{
  color:#fff;
  background:var(--red);
  padding:.04em .28em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.hero .sub{
  font-family:"Oswald",sans-serif; font-weight:500;
  text-transform:uppercase; letter-spacing:1px;
  font-size:clamp(16px,2.2vw,24px);
  margin-top:18px; color:var(--chrome);
}
.hero .hero-cta{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }

/* hero страницы герметика: фон вправо + горизонтальное затемнение под текстом */
.hero--product .hero-bg{ background-position:right center; }
.hero--product::after{
  background:
    linear-gradient(90deg, rgba(8,8,8,.95) 0%, rgba(8,8,8,.80) 44%, rgba(8,8,8,.22) 100%),
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(8,8,8,.55) 100%);
}

/* ---------- Section base ---------- */
.section{ padding:84px 0; position:relative; }
section[id], [id]{ scroll-margin-top:88px; }
.section--tight{ padding:60px 0; }
.section-head{ margin-bottom:46px; }
.section-head .lead{
  color:var(--muted); max-width:62ch; margin-top:20px; font-size:18px;
}

/* красное световое фоновое полотно (из презентаций) */
.section--glow{
  background:
    linear-gradient(180deg, rgba(10,10,10,.86), rgba(10,10,10,.92)),
    url("assets/bg-redlight.jpg") center/cover no-repeat fixed;
}
.section--panel{ background:var(--ink-2); }

/* ---------- Чек-листы с красной галочкой ---------- */
.checklist{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.checklist li{
  position:relative; padding-left:42px;
  font-size:18px; line-height:1.4;
}
.checklist li::before{
  content:""; position:absolute; left:0; top:2px;
  width:26px; height:26px;
  background:no-repeat center/contain;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 13 L8 21 L23 3' fill='none' stroke='%23E10600' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* ---------- Двухколоночный блок ---------- */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; }
.split.rev{ grid-template-columns:.95fr 1.05fr; }
.split.rev .media{ order:-1; }
.media{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); background:#000; }
.media img{ width:100%; height:100%; object-fit:cover; }
.split h3{ font-size:clamp(24px,3vw,34px); margin-bottom:22px; }

/* ---------- Canister spotlight ---------- */
.media--canister{
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:1/1;
  padding:28px 20px 18px;
  background:
    radial-gradient(circle at 50% 62%, rgba(225,6,0,.22) 0%, rgba(225,6,0,.10) 24%, transparent 60%),
    linear-gradient(180deg, #1a1a1a 0%, #080808 100%);
}
.media--canister::before{
  content:"";
  position:absolute;
  inset:12% 16% 8%;
  background:
    radial-gradient(circle at 50% 36%, rgba(255,255,255,.08), transparent 58%),
    radial-gradient(circle at 50% 82%, rgba(225,6,0,.20), transparent 55%);
  pointer-events:none;
}
.media--canister .canister-art{
  position:relative;
  z-index:1;
  width:min(100%, 520px);
  height:auto;
  object-fit:contain;
  transform:translateY(8px);
  filter:drop-shadow(0 26px 28px rgba(0,0,0,.55)) drop-shadow(0 0 32px rgba(225,6,0,.24));
  animation:canisterFloat 6.5s ease-in-out infinite;
}

/* ---------- Сетка продукции ---------- */
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.card{
  background:var(--ink-3); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .22s var(--ease), border-color .22s, box-shadow .22s;
}
.card:hover{ transform:translateY(-6px); border-color:#3a3a3a; box-shadow:var(--shadow); }
.card .thumb{ aspect-ratio:4/3; overflow:hidden; background:#000; }
.card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.card:hover .thumb img{ transform:scale(1.06); }
.card .thumb--canister{
  position:relative;
  background:
    radial-gradient(circle at 50% 62%, rgba(225,6,0,.20) 0%, rgba(225,6,0,.08) 24%, transparent 60%),
    linear-gradient(180deg, #171717 0%, #080808 100%);
}
.card .thumb--canister::before{
  content:"";
  position:absolute;
  inset:14% 14% 10%;
  background:radial-gradient(circle at 50% 35%, rgba(255,255,255,.07), transparent 58%);
  pointer-events:none;
}
.card .thumb--canister .canister-art{
  position:relative;
  z-index:1;
  object-fit:contain;
  transform:translateY(6px) scale(1.04);
  filter:drop-shadow(0 20px 20px rgba(0,0,0,.48)) drop-shadow(0 0 24px rgba(225,6,0,.20));
  animation:canisterFloat 6.5s ease-in-out infinite;
}
.card .body{ padding:20px 20px 24px; display:flex; flex-direction:column; flex:1; }
.card h3{ font-size:21px; margin-bottom:8px; }
.card p{ color:var(--muted); font-size:15.5px; margin:0 0 16px; flex:1; }
.card .tag{
  align-self:flex-start; font-family:"Oswald",sans-serif; font-size:12px;
  letter-spacing:1px; text-transform:uppercase; color:var(--gold);
  border:1px solid rgba(224,162,42,.4); padding:4px 10px; border-radius:40px; margin-bottom:14px;
}
.card .more{
  font-family:"Oswald",sans-serif; text-transform:uppercase; font-size:14px;
  letter-spacing:.6px; color:var(--red-bright); display:inline-flex; gap:8px; align-items:center;
}
.card .more .arrow{ transition:transform .2s var(--ease); }
.card:hover .more .arrow{ transform:translateX(4px); }

/* ---------- Иконочные фичи (золотой контур) ---------- */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px 34px; }
.feature{ display:flex; gap:18px; align-items:flex-start; }
.feature > div:last-child{ min-width:0; overflow-wrap:anywhere; }
.feature .ic{
  flex:0 0 auto; width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center;
  border:2px solid var(--gold);
  box-shadow:0 0 22px rgba(224,162,42,.18) inset;
}
.feature .ic svg{ width:28px; height:28px; stroke:var(--gold); fill:none; stroke-width:1.8; }
.feature h4{ font-size:18px; margin-bottom:4px; letter-spacing:.3px; }
.feature p{ margin:0; color:var(--muted); font-size:15px; }

/* ---------- Чипы (размеры / применение) ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
.chip{
  font-family:"Oswald",sans-serif; letter-spacing:.5px;
  border:1px solid var(--red); color:#fff;
  padding:9px 16px; border-radius:var(--radius);
  background:rgba(225,6,0,.06); font-size:15px;
}
.chip.alt{ border-color:#3a3a3a; background:var(--ink-3); color:var(--chrome); }

/* ---------- Баннер вторичного продукта (герметик) ---------- */
.product-cta{
  position:relative; border-radius:10px; overflow:hidden;
  border:1px solid var(--line);
}
.product-cta .bg{ position:absolute; inset:0; background:#0a0a0a url("assets/tire-alt.jpg") center 80%/cover no-repeat; }
.product-cta::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(8,8,8,.95) 0%, rgba(8,8,8,.82) 44%, rgba(8,8,8,.40) 100%); }
.product-cta .inner{ position:relative; z-index:2; padding:54px 44px; max-width:640px; }
.product-cta h3{ font-size:clamp(26px,3.6vw,40px); margin:14px 0 14px; }
.product-cta p{ color:var(--chrome); margin:0 0 26px; }

/* ---------- Двойные партнёрские блоки ---------- */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.panel{
  background:var(--ink-3); border:1px solid var(--line);
  border-radius:var(--radius); padding:34px 32px;
}
.panel h3{ font-size:23px; margin-bottom:18px; color:#fff; }
.panel .goal{
  margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
  color:var(--gold); font-size:15.5px; font-style:italic;
}

/* ---------- Документация ---------- */
.docs{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.doc{
  background:var(--ink-3); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px;
}
.doc img{ max-height:180px; width:auto; border-radius:4px; }
.doc .label{ font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.5px; font-size:15px; }
.doc .sub{ color:var(--muted); font-size:14px; overflow-wrap:anywhere; }

/* ---------- Технология (шаги) — для страницы герметика ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.step{ text-align:center; }
.step .num{
  font-family:"Oswald",sans-serif; color:var(--red-bright);
  font-size:14px; letter-spacing:2px; margin-bottom:10px;
}
.step .pic{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#000; }
.step .pic img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.step h4{ font-size:16px; margin-top:14px; }

/* ---------- Контакты / футер ---------- */
.contact{
  background:
    linear-gradient(180deg, rgba(10,10,10,.82), rgba(10,10,10,.94)),
    url("assets/bg-redlight.jpg") center/cover no-repeat;
  text-align:center; padding:96px 0 60px;
}
.contact .slogan{
  font-size:clamp(30px,5vw,58px); margin:0 0 8px;
}
.contact .slogan .red{ color:var(--red-bright); }
.contact-rows{ display:flex; justify-content:center; flex-wrap:wrap; gap:34px; margin:36px 0 10px; }
.contact-rows a, .contact-rows span{
  display:inline-flex; align-items:center; gap:12px;
  font-family:"Oswald",sans-serif; font-size:19px; letter-spacing:.4px;
}
.contact-rows svg{ width:22px; height:22px; stroke:var(--red-bright); fill:none; stroke-width:1.8; }
.contact-rows a:hover{ color:var(--red-bright); }

.foot{
  border-top:1px solid var(--line); background:var(--ink);
  padding:26px 0; color:var(--muted-2); font-size:14px;
}
.foot .wrap{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.foot img{ height:34px; opacity:.9; }

/* ---------- Reveal анимация ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

@keyframes canisterFloat{
  0%,100%{ transform:translateY(8px); }
  50%{ transform:translateY(2px); }
}

/* ---------- Адаптив ---------- */
@media (max-width:1000px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .features{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .docs{ grid-template-columns:1fr; max-width:520px; margin:0 auto; }
  /* свернуть горизонтальное меню раньше, пока ссылки и телефон ещё помещаются */
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
  .nav.open .nav-links{
    display:flex; flex-direction:column; gap:18px;
    position:absolute; top:72px; left:0; right:0;
    background:rgba(8,8,8,.98); padding:24px 22px; border-bottom:1px solid var(--line);
  }
  .nav.open .nav-links a{ font-size:18px; }
}
@media (max-width:760px){
  body{ font-size:16px; }
  .hero{ padding:92px 0 56px; }
  .split,.split.rev{ grid-template-columns:1fr; gap:28px; }
  .split.rev .media{ order:0; }
  .duo{ grid-template-columns:1fr; }
  .features{ grid-template-columns:1fr; }
  .section--glow{ background-attachment:scroll; }
  .contact{ background-attachment:scroll; }
  .hero--product .hero-bg{ background-position:74% top; }
  .hero--product::after{
    background:linear-gradient(180deg, rgba(8,8,8,.90) 0%, rgba(8,8,8,.74) 46%, rgba(8,8,8,.94) 100%);
  }
  .product-cta::after{ background:linear-gradient(180deg, rgba(8,8,8,.55), rgba(8,8,8,.94)); }
  .product-cta .inner{ padding:36px 26px; }
}
@media (max-width:480px){
  .cards{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .hero h1{ font-size:29px; }
  .hero{ min-height:78vh; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero-bg{ transform:none; }
}