/* ============================================================
   MegaNut — PAGE: home (главная). Значения из design-source/Meganut.dc.html.
   Общие компоненты — в components.css. Адаптив — в responsive.css.
   ============================================================ */

/* ── 2.1 HERO ───────────────────────────────────────────────── */
.mn-hero {
  position: relative;
  height: var(--mn-hero-h);
  overflow: hidden;
  background: var(--mn-ink);
}
.mn-hero__slides {
  position: absolute;
  inset: 0;
}
.mn-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--mn-dur-800) ease;
}
.mn-hero__slide.is-active {
  opacity: 1;
}
.mn-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mn-hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--mn-grad-hero);
  pointer-events: none;
}
.mn-hero__content {
  position: absolute;
  inset: 0;
  z-index: var(--mn-z-hero-content);
  pointer-events: none;
  padding: 150px var(--mn-pad-side) 230px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mn-hero__content-inner {
  max-width: var(--mn-container);
  margin: 0 auto;
  width: 100%;
}
.mn-hero__title {
  font-family: var(--mn-font-display);
  font-weight: var(--mn-fw-regular);
  font-size: var(--mn-h1-hero);
  line-height: var(--mn-h1-hero-lh);
  letter-spacing: var(--mn-h1-hero-ls);
  color: var(--mn-white);
  max-width: 17ch;
  text-shadow: 0 2px 24px rgba(4, 4, 4, 0.45);
}
.mn-hero__accent {
  color: var(--mn-gold);
}
.mn-hero__subtitle {
  margin-top: 32px;
  font-size: var(--mn-t-body);
  line-height: var(--mn-lh-body);
  color: var(--mn-on-img-90);
  max-width: 46ch;
  text-shadow: 0 1px 14px rgba(4, 4, 4, 0.5);
}
.mn-hero__buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 40px;
  pointer-events: auto;
}
.mn-hero__glass {
  display: inline-flex;
  align-items: center;
  padding: 20px 30px;
  border-radius: var(--mn-r-pill);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: var(--mn-white);
  font-size: var(--mn-t-body);
  transition: background var(--mn-dur-260) ease;
}
.mn-hero__glass:hover {
  background: rgba(255, 255, 255, 0.26);
  color: var(--mn-white);
}
.mn-hero__controls {
  position: absolute;
  right: var(--mn-pad-side);
  bottom: 104px;
  z-index: var(--mn-z-hero-thumbs);
  display: flex;
  align-items: flex-end;
  gap: clamp(16px, 2vw, 26px);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.mn-hero__thumbs {
  display: flex;
  gap: 10px;
}
.mn-hero__thumb {
  width: var(--mn-thumb-w);
  height: var(--mn-thumb-h);
  border-radius: var(--mn-r-14);
  padding: 0;
  border: 2px solid rgba(239, 239, 239, 0.35);
  overflow: hidden;
  cursor: pointer;
  background: none;
}
.mn-hero__thumb.is-active {
  border-color: var(--mn-bg);
}
.mn-hero__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mn-hero__progress {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: flex-end;
}
.mn-hero__label {
  font-family: var(--mn-font-display);
  font-size: var(--mn-eyebrow-13);
  letter-spacing: var(--mn-ls-eyebrow-16);
  color: var(--mn-on-img-72);
}
.mn-hero__bars {
  display: flex;
  gap: 8px;
}
.mn-hero__bar {
  position: relative;
  width: var(--mn-progress-w);
  height: var(--mn-progress-h);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}
.mn-hero__bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--mn-bg);
  transition: width var(--mn-dur-120) linear;
}

/* ── 2.2 MARQUEE ────────────────────────────────────────────── */
.mn-marquee {
  position: relative;
  z-index: var(--mn-z-marquee);
  margin-top: var(--mn-marquee-overlap);
  overflow: visible;
}
.mn-marquee__strip {
  width: 100%;
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding: 15px 0;
  overflow: hidden;
}
.mn-marquee__track {
  display: flex;
  width: max-content;
  animation: mn-marquee var(--mn-dur-marquee) linear infinite;
}
.mn-marquee__group {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-right: 26px;
  font-family: var(--mn-font-display);
  font-weight: var(--mn-fw-regular);
  font-size: var(--mn-t-body-15);
  letter-spacing: var(--mn-ls-eyebrow-18);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mn-white);
}
.mn-marquee__sym {
  color: var(--mn-gold);
  font-size: 11px;
}

/* ── 2.3 PRODUCTS (scroll-pin) ─────────────────────────────── */
.mn-products {
  background: var(--mn-white);
  position: relative;
}
.mn-products__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  padding-bottom: clamp(40px, 6vh, 72px);
}
.mn-products__head {
  width: 100%;
}
.mn-products__heading {
  margin: 20px 0 0;
  font-family: var(--mn-font-display);
  font-weight: var(--mn-fw-regular);
  font-size: var(--mn-h2-section);
  line-height: var(--mn-h2-section-lh);
  letter-spacing: var(--mn-h2-section-ls);
  max-width: 22ch;
}
.mn-products__track {
  /* content-box: width:max-content + h-padding снаружи (макет rect w=3396);
     трек внутри .mn-products__pin (overflow:hidden) — оверфлоу страницы нет. */
  box-sizing: content-box;
  display: flex;
  gap: var(--mn-gap-track);
  margin-top: clamp(36px, 5vh, 56px);
  padding: 0 var(--mn-pad-side) 6px;
  width: max-content;
  will-change: transform;
}

/* ── 2.4 ABOUT ──────────────────────────────────────────────── */
.mn-habout {
  background: var(--mn-white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--mn-sec-pad-v) var(--mn-about-inset);
}
.mn-habout__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--mn-gap-about);
  align-items: stretch;
}
.mn-habout__media {
  position: relative;
  display: flex;
}
.mn-habout__photo {
  flex: 1;
  min-height: var(--mn-about-img-h);
  border-radius: var(--mn-r-26);
  overflow: hidden;
}
.mn-habout__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mn-habout__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 4px 0;
}
.mn-habout__title {
  font-family: var(--mn-font-display);
  font-weight: var(--mn-fw-regular);
  font-size: var(--mn-h2-about);
  line-height: var(--mn-h2-about-lh);
  letter-spacing: var(--mn-h2-about-ls);
  max-width: 22ch;
}
.mn-habout__text {
  margin-top: 22px;
  font-size: var(--mn-t-body);
  line-height: var(--mn-lh-body-2);
  color: var(--mn-muted);
  max-width: 56ch;
}
.mn-habout__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mn-gap-stats-about);
  margin-top: 26px;
}
.mn-habout .mn-link-arrow {
  margin-top: 26px;
}

/* ── 2.6 PRODUCTION (scroll-snap carousel) ─────────────────── */
.mn-hprod {
  background: var(--mn-white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--mn-sec-pad-v-prod) 0;
  overflow: hidden;
}
.mn-hprod__scroll {
  display: flex;
  gap: var(--mn-gap-cards-24);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 28px;
  scrollbar-width: none;
}
.mn-hprod__scroll::-webkit-scrollbar {
  display: none;
}
.mn-prodslide {
  position: relative;
  flex: 0 0 100%;
  height: var(--mn-prod-slide-h);
  border-radius: var(--mn-r-32);
  overflow: hidden;
  scroll-snap-align: center;
}
.mn-prodslide__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mn-prodslide__grad {
  position: absolute;
  inset: 0;
  background: var(--mn-grad-prod-slide);
  pointer-events: none;
}
.mn-prodslide__body {
  position: absolute;
  left: 56px;
  top: 56px;
  bottom: 56px;
  width: min(620px, 52%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mn-prodslide__title {
  margin-top: 20px;
  font-family: var(--mn-font-display);
  font-weight: var(--mn-fw-regular);
  font-size: var(--mn-h3-prod-slide);
  line-height: var(--mn-h3-prod-slide-lh);
  letter-spacing: var(--mn-h3-prod-slide-ls);
  color: var(--mn-white);
}
.mn-prodslide__text {
  margin-top: 24px;
  font-size: var(--mn-t-body);
  line-height: var(--mn-lh-body-3);
  color: var(--mn-on-img-80);
  max-width: 46ch;
}
.mn-prodslide__chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.mn-hprod__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 26px;
}
.mn-hprod__bars {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mn-hprod__bar {
  width: 34px;
  height: 3px;
  border-radius: 3px;
  background: rgba(4, 4, 4, 0.18);
  transition: background var(--mn-dur-240) ease;
}
.mn-hprod__bar.is-active {
  background: rgba(4, 4, 4, 0.55);
}

/* ── 2.7 EXPORT + GLOBE ─────────────────────────────────────── */
.mn-export {
  background: var(--mn-ink);
  color: var(--mn-bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.mn-export__grid {
  /* box-sizing: макет НЕ resetit box-sizing → контейнер content-box:
     max-width 1580 + h-padding (.mn-container clamp) = 1716 на 1920 (rect x=102 w=1716).
     Флекс-ребёнок .mn-export → flex-shrink гасит паддинг ниже 1716 (без оверфлоу). */
  box-sizing: content-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--mn-gap-export);
  align-items: start;
  padding-block: var(--mn-sec-pad-v-lg);
}
.mn-export__heading {
  margin-top: 20px;
  font-family: var(--mn-font-display);
  font-weight: var(--mn-fw-regular);
  font-size: var(--mn-h2-section);
  line-height: var(--mn-h2-section-lh);
  letter-spacing: var(--mn-h2-section-ls);
}
.mn-export__text {
  margin-top: 26px;
  font-size: var(--mn-t-body);
  line-height: var(--mn-lh-relaxed);
  color: rgba(239, 239, 239, 0.62);
  max-width: 52ch;
}
.mn-export__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 52px;
}
.mn-export__stat {
  border-top: 1px solid var(--mn-on-dark-24);
  padding-top: 20px;
}
.mn-export__stat-value {
  font-family: var(--mn-font-display);
  font-size: var(--mn-num-stat-export);
  line-height: 1;
  letter-spacing: var(--mn-num-stat-export-ls);
}
.mn-export__stat-label {
  margin-top: 12px;
  font-size: var(--mn-t-body-15);
  color: var(--mn-on-dark-60);
}
.mn-export__content .mn-btn {
  margin-top: 48px;
}
.mn-export__panel {
  border-radius: var(--mn-r-26);
  background: rgba(239, 239, 239, 0.05);
  padding: 26px 26px 18px;
}
.mn-globe {
  position: relative;
}
.mn-globe__svg {
  width: 100%;
  height: auto;
  display: block;
  cursor: grab;
}
/* [hidden] должен побеждать display:block — иначе скрытый d3-svg занимает высоту рядом со статичным */
.mn-globe__svg[hidden] {
  display: none;
}
.mn-globe__static {
  width: 100%;
}
.mn-globe__static svg {
  width: 100%;
  height: auto;
  display: block;
}
.mn-export__legend {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 18px 6px 4px;
  font-size: var(--mn-eyebrow-13);
  letter-spacing: var(--mn-ls-eyebrow-14);
  text-transform: uppercase;
  color: var(--mn-on-dark-60);
}

/* ── 2.8 NEWS ───────────────────────────────────────────────── */
.mn-hnews {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  max-width: var(--mn-container);
  margin: 0 auto;
  padding: var(--mn-sec-pad-v) var(--mn-pad-side);
}
.mn-hnews__heading {
  margin-top: 20px;
  font-family: var(--mn-font-display);
  font-weight: var(--mn-fw-regular);
  font-size: var(--mn-h2-section);
  line-height: var(--mn-h2-section-lh);
  letter-spacing: var(--mn-h2-section-ls);
}
.mn-hnews__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mn-gap-cards-22);
  margin-top: 60px;
}
.mn-hnews__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 4vh, 52px);
}

/* ── 2.9 FAQ ────────────────────────────────────────────────── */
.mn-faq {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--mn-sec-pad-v-faq) 28px;
  box-sizing: border-box;
}
.mn-faq__block {
  position: relative;
  width: 100%;
  max-width: var(--mn-container-faq);
  margin: 0 auto;
  border-radius: var(--mn-r-32);
  overflow: hidden;
}
.mn-faq__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--mn-dur-620) var(--mn-ease);
}
.mn-faq__block:hover .mn-faq__img {
  transform: var(--mn-hover-img-7);
}
.mn-faq__overlay {
  position: absolute;
  inset: 0;
  background: var(--mn-grad-faq);
}
.mn-faq__inner {
  position: relative;
  padding: clamp(56px, 7vh, 90px) clamp(28px, 5vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: var(--mn-gap-faq);
  align-items: start;
}
.mn-faq__heading {
  margin-top: 20px;
  font-family: var(--mn-font-display);
  font-weight: var(--mn-fw-regular);
  font-size: var(--mn-h2-faq);
  line-height: var(--mn-h2-faq-lh);
  letter-spacing: var(--mn-h2-faq-ls);
  color: var(--mn-white);
}
.mn-faq__list {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.mn-faq__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.mn-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  padding: 26px 4px;
  width: 100%;
  text-align: left;
  font-family: var(--mn-font-display);
  font-size: var(--mn-t-faq-q);
  letter-spacing: var(--mn-t-faq-q-ls);
  color: var(--mn-white);
}
.mn-faq__icon {
  /* content-box: 36 + border 1px = 38 (макет rect 38×38). */
  box-sizing: content-box;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--mn-r-circle);
  border: 1px solid rgba(255, 255, 255, 0.5);
  display: grid;
  place-items: center;
  font-size: 17px;
  transition: transform var(--mn-dur-420) var(--mn-ease);
}
.mn-faq__item.is-open .mn-faq__icon {
  transform: rotate(45deg);
}
.mn-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--mn-dur-480) var(--mn-ease),
    opacity var(--mn-dur-380) ease;
}
.mn-faq__item.is-open .mn-faq__panel {
  grid-template-rows: 1fr;
  opacity: 1;
}
/* как в макете: обёртка overflow:hidden — иначе padding ответа держит строку 0fr на 26px */
.mn-faq__clip {
  overflow: hidden;
}
.mn-faq__answer {
  padding: 0 60px 26px 4px;
  font-size: var(--mn-t-body);
  line-height: var(--mn-lh-body-3);
  color: var(--mn-on-img-78);
}

/* ── PRODUCTS: свайп-режим (класс is-swipe от catalog-pin.js: touch/reduced/≤1199) ─ */
.mn-products.is-swipe .mn-products__pin {
  position: static;
  height: auto;
}
.mn-products.is-swipe .mn-products__track {
  /* width:auto перебивает базовый width:max-content — иначе трек был бы шириной по
     контенту и overflow-x:auto не создавал бы прокрутки (а родитель-pin его обрезал).
     Теперь трек шириной во вьюпорт, карточки (flex:0 0) переполняют его → нативный свайп.
     Правый padding трека (--mn-pad-side) даёт тот же конечный отступ, что слева. */
  width: auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* конечный отступ после последней карточки (как слева) — на случай, если
     padding-right флекс-контейнера не учитывается при прокрутке в некоторых браузерах */
  scroll-padding-right: var(--mn-pad-side);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  transform: none !important;
}
.mn-products.is-swipe .mn-products__track::-webkit-scrollbar {
  display: none;
}