/* intchemicals.com - стили всего сайта.
   Цвета и шрифты - в переменных ниже, остальное по блокам: шапка, меню, боковое меню,
   содержимое страниц, главная (видео), продукты, подвал. */

:root {
  --bg: #d4ecf1;          /* фон страниц */
  --text: #444;
  --heading: #222;
  --accent: #0bb4aa;      /* ссылки */
  --dark: #111;           /* шапка, меню */
  --footer: #1a1a1a;
  --muted: #a0a0a0;       /* текст в подвале и боковом меню */
  --card: #030679;        /* синие карточки продуктов */
  --button: #0b6b8a;
  --font-text: "Libre Franklin", Arial, sans-serif;
  --font-head: "Montserrat", Arial, sans-serif;
  --width: 1200px;
  --gutter: clamp(10px, 3vw, 25px);   /* боковые поля - тянутся с шириной экрана */
  --h1: clamp(22px, 1.2vw + 14px, 26px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.8 var(--font-text);
}
img, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { padding-left: 20px; }

/* ---------- шапка ---------- */
.header { background: var(--dark); color: #fff; position: relative; z-index: 10; }
.header__inner {
  max-width: var(--width); margin: 0 auto; padding: 15px var(--gutter);
  display: flex; align-items: flex-start; gap: clamp(12px, 2vw, 20px);
}
.header__logo { flex: none; line-height: 0; }
.header__logo img { width: clamp(110px, 10vw + 60px, 166px); }
.header__nav { margin: 5px 0 0 auto; }
.header__mail { color: #fff; font-size: 20px; line-height: 1; margin: 10px 0 0; }
.header__mail:hover { text-decoration: none; opacity: .8; }

/* на главной шапка лежит поверх видео */
.page-home .header {
  position: absolute; left: 0; right: 0; top: 0;
  background: linear-gradient(rgba(0, 0, 0, .2) 1%, rgba(0, 0, 0, 0) 100%);
}

/* ---------- меню в шапке (десктоп) ---------- */
.menu, .menu ul { list-style: none; margin: 0; padding: 0; }
.header__nav .menu { display: flex; gap: clamp(16px, 2.2vw, 30px); }
.header__nav li { position: relative; }
.header__nav a {
  display: block; padding: 5px 0 3px; color: #fff;
  font: 500 clamp(14px, .4vw + 11px, 16px)/1.8 var(--font-head);
  border-bottom: 1px solid transparent; white-space: nowrap;
}
.header__nav a:hover { text-decoration: none; border-bottom-color: rgba(255, 255, 255, .3); }
.header__nav .is-current > a { border-bottom-color: rgba(255, 255, 255, .3); }
.header__nav .has-children > a::after {
  content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 0 4px 7px;
  border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.header__nav ul ul {
  display: none; position: absolute; left: 0; top: 100%; margin-top: 15px;
  width: 220px; background: var(--dark); padding: 5px 0; z-index: 20;
}
.header__nav ul ul::before { content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 15px; }
.header__nav ul ul ul { left: 100%; top: -5px; margin: 0; }
.header__nav ul ul ul::before { display: none; }
.header__nav li:hover > ul, .header__nav li:focus-within > ul { display: block; }
.header__nav ul ul a { padding: 8px 15px; color: #b0b0b0; white-space: normal; border: 0; }
.header__nav ul ul a:hover { color: #fff; }
.header__nav ul ul .has-children > a::after { transform: rotate(-45deg); float: right; margin: 10px 0 0; }

/* ---------- кнопка меню ---------- */
.burger {
  flex: none; margin: 8px 0 0; padding: 10px; background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; gap: 5px;
}
.burger span { display: block; width: 22px; height: 2px; background: #fff; }

/* ---------- боковое меню ---------- */
.side-nav {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(380px, 88vw); padding: 70px clamp(20px, 5vw, 30px) 40px; overflow-y: auto;
  background: var(--dark); color: var(--muted);
  transform: translateX(100%); transition: transform .3s ease; visibility: hidden;
}
.side-nav-overlay {
  position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden; transition: opacity .3s;
}
.nav-open { overflow: hidden; }
.nav-open .side-nav { transform: none; visibility: visible; }
.nav-open .side-nav-overlay { opacity: 1; visibility: visible; }
.side-nav__close {
  position: absolute; top: 20px; right: 22px; width: 32px; height: 32px;
  background: none; border: 0; cursor: pointer;
}
.side-nav__close::before, .side-nav__close::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 15px; height: 2px; background: #fff;
  transform: rotate(45deg);
}
.side-nav__close::after { transform: rotate(-45deg); }
.side-nav li { position: relative; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.side-nav li li { border: 0; }
.side-nav a {
  display: block; padding: 10px 40px 10px 0; color: #fff;
  font: 600 15px/1.5 var(--font-head); text-transform: uppercase;
}
.side-nav li li a { font-weight: 400; font-size: 14px; color: #ccc; text-transform: none; padding: 6px 30px 6px 0; }
.side-nav .is-current > a { color: var(--accent); }
.side-nav ul ul { display: none; padding: 0 0 8px 15px; }
.side-nav li.is-open > ul { display: block; }
.side-nav__toggle {
  position: absolute; right: 0; top: 4px; width: 34px; height: 34px;
  background: none; border: 0; cursor: pointer;
}
.side-nav__toggle::before {
  content: ""; position: absolute; left: 12px; top: 10px; width: 8px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s;
}
.side-nav li li .side-nav__toggle { top: 0; }
.side-nav li.is-open > .side-nav__toggle::before { transform: rotate(-135deg); top: 14px; }
.side-nav__title {
  margin: 35px 0 12px; color: #fff;
  font: 700 18px/1.1 var(--font-head); text-transform: uppercase;
}
.side-nav p { margin: 0 0 15px; }

/* ---------- обычная страница ---------- */
.page { max-width: var(--width); margin: 25px auto 60px; padding: 0 var(--gutter); }
.page h1, .products h1 {
  margin: 20px 0 clamp(30px, 4vw, 48px); text-align: center; color: var(--heading);
  font: 700 var(--h1)/1.3 var(--font-head); text-transform: uppercase;
}
.page p { margin: 0 0 28px; line-height: 1.9; }
.page li { line-height: 1.9; }
.page img.left { float: left; width: min(300px, 45%); margin: 0 25px 15px 0; }
.page .wide { display: block; margin: 0 0 28px; }
.page::after { content: ""; display: block; clear: both; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 40%), 1fr)); gap: 10px; margin: 0 0 28px; }
.gallery img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.button {
  display: inline-block; padding: 10px 24px; background: var(--button); color: #fff;
  font: 700 14px/1.6 var(--font-head); text-transform: uppercase; letter-spacing: 1px;
}
.button:hover { text-decoration: none; opacity: .9; }
.map { display: block; width: 100%; max-width: 900px; aspect-ratio: 5 / 2; min-height: 260px; height: auto; border: 0; }

/* ---------- главная: видео во весь экран ---------- */
.hero {
  position: relative; height: 100vh; min-height: 480px; overflow: hidden;
  background: var(--dark); color: #fff; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 20px;
}
.hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; }
/* фоновое видео с YouTube растягивается на весь блок с сохранением пропорций 16:9 */
.hero__yt {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100%, 177.78vh); height: max(100%, 56.25vw); max-width: none;
  border: 0; pointer-events: none; opacity: 0; transition: opacity 1s;
}
.hero__yt.is-ready { opacity: .75; }
/* на телефонах фоновое видео не грузим - только картинка (экономия трафика) */
@media (max-width: 700px) { .hero__yt { display: none; } }
.hero__body { position: relative; }
.hero h1 { margin: 30px 0 10px; font: 200 clamp(24px, 3vw + 8px, 42px)/1.4 var(--font-text); letter-spacing: -1px; }
.hero p { margin: 0 0 25px; font-size: clamp(16px, .5vw + 13px, 20px); color: #e6e6e6; }
.hero__play {
  width: 70px; height: 70px; border: 2px solid #fff; border-radius: 50%; background: none; cursor: pointer; position: relative;
}
.hero__play::before {
  content: ""; position: absolute; left: 27px; top: 21px;
  border-style: solid; border-width: 13px 0 13px 20px; border-color: transparent transparent transparent #fff;
}
.hero__down {
  position: absolute; bottom: 30px; left: 50%; width: 22px; height: 22px; margin-left: -11px;
  border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.video-modal {
  position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .9); padding: 20px;
}
.video-modal.is-open { display: flex; }
.video-modal video { width: 100%; max-width: 960px; max-height: 90vh; }
.video-modal__close { position: absolute; top: 20px; right: 22px; }

/* ---------- продукты ---------- */
.products { max-width: var(--width); margin: 25px auto 60px; padding: 0 max(0px, calc(var(--gutter) - 15px)); }
.products__grid { margin-top: clamp(20px, 5vw, 70px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.product-group { padding: 0 clamp(12px, 1.2vw, 15px); background: center top / cover no-repeat; }
.product-group > img { display: block; width: min(300px, 100%); margin: 0 auto 0 0; }
.product-group h2 {
  margin: 20px 0; text-align: center; color: var(--heading);
  font: 700 var(--h1)/1.3 var(--font-head); text-transform: uppercase;
}
.product-group.has-bg h2 { color: #fff; }
.product-card {
  display: block; margin: 0 0 20px; padding: 20px clamp(15px, 3vw, 30px); text-align: center; color: #fff;
  background: var(--card) center / cover no-repeat;
}
.product-card.has-bg { background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .25)), var(--img); }
.product-card:hover { text-decoration: none; }
.product-card h3 { margin: 0 0 15px; font: 700 clamp(21px, 1vw + 14px, 26px)/1.3 var(--font-text); }
.product-card p { margin: 0 0 15px; font: 400 14px/1.9 var(--font-head); text-transform: uppercase; }
.product-card span {
  display: inline-block; margin: 0 0 10px; padding: 10px 30px; border: 1px solid #fff;
  font: 700 14px/1.6 var(--font-head); text-transform: uppercase; letter-spacing: 1px;
}
.product-card:hover span { background: #fff; color: var(--card); }

/* ---------- подвал ---------- */
.footer { background: var(--footer); color: var(--muted); padding: clamp(32px, 4vw, 48px) var(--gutter) 0; }
.footer__cols {
  max-width: var(--width); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: clamp(28px, 3vw, 40px);
}
.footer__title { margin: 0 0 20px; color: #fff; font: 700 clamp(18px, .5vw + 15px, 20px)/1.1 var(--font-head); text-transform: uppercase; }
.footer p { margin: 0 0 15px; }
.footer__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: start; }
.footer__gallery img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.footer__copyright {
  max-width: var(--width); margin: clamp(28px, 3vw, 40px) auto 0 !important; padding: 30px 0 35px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

/* ---------- планшеты и телефоны ---------- */
@media (max-width: 1000px) {
  .header__nav { display: none; }
  .header__mail { margin-left: auto; }
}
@media (max-width: 600px) {
  .page img.left { float: none; display: block; width: 100%; max-width: 420px; margin: 0 0 20px; }
  .footer__copyright { text-align: center; font-size: 14px; }
}