/* ===== ПАЛИТРА (фирменные цвета заказчика) ===== */
:root {
  --bg:        #000000;
  --bg-soft:   #0d0d0f;
  --surface:   #16161a;
  --text:      #ffffff;
  --muted:     #a6a6ad;
  --line:      rgba(255, 255, 255, 0.14);

  --blue:      #4787C3;
  --green:     #AFCE3E;
  --yellow:    #E0D848;
  --magenta:   #CC3E8C;

  --maxw: 1200px;
  --pad: clamp(20px, 5vw, 72px);
  --radius: 18px;
  --font: "Montserrat", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 { margin: 0; line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--yellow); color: #111; padding: 10px 18px; border-radius: 10px;
  font-weight: 700; transition: top .2s ease;
}
.skip-link:focus { top: 16px; }

:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 6px; }

/* ===== Кнопки ===== */
.button {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 16px; padding: 15px 28px;
  border-radius: 999px; border: 2px solid transparent; cursor: pointer;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.button-primary { background: var(--yellow); color: #141414; }
.button-primary:hover { transform: translateY(-2px); background: #ecdf57; }
.button-primary:hover svg { transform: translateX(3px); transition: transform .2s ease; }

/* ===== Шапка ===== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 14px var(--pad);
  background: rgba(0, 0, 0, 0);
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.site-header.is-scrolled {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
  padding-top: 10px; padding-bottom: 10px;
}
.brand img { height: 34px; width: auto; }

.site-nav { display: flex; gap: 30px; }
.site-nav a {
  font-weight: 600; font-size: 15px; letter-spacing: .02em;
  text-transform: uppercase; padding: 6px 2px; position: relative; color: var(--text);
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--yellow); transition: right .25s ease;
}
.site-nav a:hover::after { right: 0; }

.menu-toggle {
  display: none; width: 46px; height: 40px; background: transparent;
  border: 0; cursor: pointer; position: relative;
}
.menu-toggle span:not(.sr-only) {
  position: absolute; left: 9px; right: 9px; height: 2.5px; background: var(--text);
  border-radius: 2px; transition: transform .3s ease, opacity .3s ease;
}
.menu-toggle span:not(.sr-only):nth-of-type(2) { top: 16px; }
.menu-toggle span:not(.sr-only):nth-of-type(3) { top: 24px; }
.menu-toggle[aria-expanded="true"] span:nth-of-type(2) { top: 20px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-of-type(3) { top: 20px; transform: rotate(-45deg); }

/* ===== Hero ===== */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 120px var(--pad) 80px;
  overflow: hidden;
}
.hero-inner {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
}
.hero-logo {
  width: min(680px, 82vw); height: auto;
  filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.5));
  animation: rise .8s cubic-bezier(.2, .7, .2, 1) both;
}
.hero-subtitle {
  margin: 0; font-size: clamp(17px, 2.4vw, 24px); font-weight: 500;
  color: #e9e9ee; line-height: 1.35;
  animation: rise .8s .12s cubic-bezier(.2, .7, .2, 1) both;
}
.hero-inner .button { animation: rise .8s .24s cubic-bezier(.2, .7, .2, 1) both; }

/* Элементы конструктора: кластеры лепестков слева и справа от логотипа.
   Видимы по умолчанию (opacity:1) — анимация только усиливает появление.
   Без вращения (по ТЗ): только мягкое появление и едва заметное «дыхание». */
/* Зона фигурок начинается НИЖЕ хедера — лепестки не налезают на логотип/меню */
.hero-figures { position: absolute; top: 96px; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; }
.fig {
  position: absolute; height: auto;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.5));
  opacity: 1;
  /* Реагируют на курсор (контейнер выключен через pointer-events:none — включаем обратно) */
  pointer-events: auto; cursor: pointer;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), filter .35s ease;
  animation-name: figIn, breathe;
  animation-duration: .9s, 7s;
  animation-timing-function: cubic-bezier(.2,.7,.2,1), ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-direction: normal, alternate;
}
/* По правке заказчика: при наведении фигурка всплывает вверх и подсвечивается.
   animation:none снимает «дыхание», чтобы transform из :hover сработал. */
.fig:hover {
  animation: none;
  transform: translateY(-22px) scale(1.07);
  filter:
    drop-shadow(0 22px 40px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 24px rgba(255, 255, 255, 0.45))
    brightness(1.1);
  z-index: 4;
}
/* --- Кластеры зеркальны: l(N) и r(N) имеют одинаковые top/width, левый/правый отступ равны --- */
.fig--l1 { top: 0%;   left: 1%;  width: clamp(90px, 12.2vw, 188px); animation-delay: .10s, .8s; }
.fig--r1 { top: 0%;   right: 1%; width: clamp(90px, 12.2vw, 188px); animation-delay: .13s, 1.2s; }
.fig--l2 { top: 14%;  left: 11%; width: clamp(96px, 13vw, 200px);  animation-delay: .16s, 1.4s; }
.fig--r2 { top: 14%;  right: 11%; width: clamp(96px, 13vw, 200px); animation-delay: .19s, .5s; }
.fig--l3 { top: 30%;  left: 0%;  width: clamp(82px, 11vw, 168px);  animation-delay: .22s, .4s; }
.fig--r3 { top: 30%;  right: 0%; width: clamp(82px, 11vw, 168px);  animation-delay: .25s, 1.8s; }
.fig--l4 { top: 44%;  left: 12%; width: clamp(76px, 10.2vw, 158px); animation-delay: .28s, 2.0s; }
.fig--r4 { top: 44%;  right: 12%; width: clamp(76px, 10.2vw, 158px); animation-delay: .31s, .3s; }
.fig--l5 { top: 56%;  left: 2%;  width: clamp(94px, 12.6vw, 196px); animation-delay: .34s, 1.0s; }
.fig--r5 { top: 56%;  right: 2%; width: clamp(94px, 12.6vw, 196px); animation-delay: .37s, 2.4s; }
.fig--l6 { top: 70%;  left: 0%;  width: clamp(72px, 9.6vw, 148px);  animation-delay: .40s, 1.6s; }
.fig--r6 { top: 70%;  right: 0%; width: clamp(72px, 9.6vw, 148px);  animation-delay: .43s, 1.0s; }
.fig--l7 { bottom: 0%; left: 4%; width: clamp(96px, 13vw, 200px);  animation-delay: .46s, .6s; }
.fig--r7 { bottom: 0%; right: 4%; width: clamp(96px, 13vw, 200px); animation-delay: .49s, 1.9s; }

@keyframes figIn { from { opacity: 0; transform: translateY(18px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes breathe { from { transform: translateY(0); } to { transform: translateY(-9px); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ===== Общие секции ===== */
.section-pad { padding: clamp(70px, 11vw, 150px) var(--pad); max-width: var(--maxw); margin: 0 auto; }
.section-index { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.section-index span {
  font-weight: 800; font-size: 14px; color: #111; background: var(--yellow);
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
}
.section-index p { margin: 0; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; font-weight: 700; color: var(--muted); }

/* ===== О нас ===== */
.about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(36px, 6vw, 90px); align-items: center; }
.about-text h2 { font-size: clamp(34px, 5.5vw, 64px); margin-bottom: 24px; }
.about-text h2 span { color: var(--magenta); }
.about-text p { color: #d7d7dd; margin: 0 0 18px; max-width: 52ch; }
.about-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.about-list li { display: flex; align-items: center; gap: 14px; font-weight: 500; }
.dot { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; }
.dot--blue { background: var(--blue); }
.dot--yellow { background: var(--yellow); }
.dot--magenta { background: var(--magenta); }
.dot--green { background: var(--green); }
.about-visual { display: grid; place-items: center; }
.about-visual img { width: 100%; max-width: 440px; filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.55)); }

/* ===== Каталог ===== */
.catalog-heading { max-width: 720px; margin: 0 auto clamp(44px, 6vw, 72px); text-align: center; }
.catalog-heading .section-index { display: inline-flex; justify-content: center; }
.catalog-heading h2 { font-size: clamp(36px, 6vw, 72px); }
.catalog-heading h2 em { font-style: normal; color: var(--blue); }
.catalog-heading > p { color: var(--muted); margin: 18px auto 0; max-width: 56ch; }

.catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px); }

.product-card {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 26px 24px; min-height: 240px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
}
/* Акцентная полоса сверху */
.product-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--card);
}
/* Мягкое цветное «свечение» в углу вместо картинки */
.product-card::after {
  content: ""; position: absolute; z-index: -1; right: -50px; top: -40px; width: 180px; height: 180px;
  background: radial-gradient(circle, color-mix(in srgb, var(--card) 60%, transparent) 0%, transparent 70%);
  opacity: .45; pointer-events: none; transition: opacity .28s ease, transform .28s ease;
}
/* По правке заказчика: при наведении карточка заметно «всплывает» — увеличивается,
   поднимается вверх и отбрасывает чёткую тень + цветную подсветку (как фигурки).
   z-index поднимает её НАД соседями, иначе увеличенные края перекрываются и рост незаметен. */
/* ВАЖНО: селектор `.catalog-grid .product-card:hover` (специфичность 0,3,0) обязателен,
   чтобы перебить `.reveal.is-visible { transform: none }` (0,2,0, идёт ниже по файлу).
   Без этого scale обнулялся и карточка НЕ увеличивалась. */
.catalog-grid .product-card:hover {
  transform: translateY(-16px) scale(1.1);
  z-index: 5;
  border-color: color-mix(in srgb, var(--card) 90%, transparent);
  box-shadow:
    0 44px 90px rgba(0, 0, 0, 0.7),
    0 0 0 1px color-mix(in srgb, var(--card) 60%, transparent),
    0 18px 54px color-mix(in srgb, var(--card) 42%, transparent);
}
.product-card:hover::after { opacity: .7; transform: scale(1.1); }

.product-cat {
  align-self: flex-start; color: var(--card);
  text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; font-weight: 700;
}
.product-title { font-size: clamp(21px, 2.4vw, 25px); font-weight: 800; }
.product-desc { color: var(--muted); font-size: 14.5px; line-height: 1.5; flex: 1; margin: 0; }
.product-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line);
}
.price { font-size: 20px; font-weight: 800; color: var(--card); }
.product-arrow { color: var(--card); font-size: 22px; line-height: 1; transition: transform .2s ease; }
.product-card:hover .product-arrow { transform: translateX(5px); }

/* ===== Контакты ===== */
.contacts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: start; }
.contacts-copy h2 { font-size: clamp(36px, 6vw, 70px); }
.contacts-copy h2 span { color: var(--magenta); }
.contacts-copy p { color: var(--muted); margin-top: 20px; max-width: 42ch; }
.contact-list { font-style: normal; display: grid; gap: 4px; }
.contact-list > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 22px 4px; border-bottom: 1px solid var(--line);
}
.contact-list span { color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: 13px; font-weight: 700; flex: 0 0 auto; }
.contact-list a, .contact-list p { margin: 0; font-size: clamp(17px, 2vw, 22px); font-weight: 600; text-align: right; }
.contact-list a:hover { color: var(--yellow); }

/* ===== Подвал ===== */
.site-footer {
  border-top: 1px solid var(--line); padding: clamp(40px, 6vw, 64px) var(--pad);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px;
  max-width: var(--maxw); margin: 0 auto;
}
/* Логотип — отдельной строкой сверху слева; ниже копирайт и ссылки на одном уровне.
   flex-basis:100% отдаёт логотипу свою строку, object-fit сохраняет пропорции
   (без него картинка растягивалась на всю ширину). */
.footer-logo { height: 40px; flex-basis: 100%; object-fit: contain; object-position: left; }
.site-footer nav { display: flex; gap: 26px; order: 2; }
.site-footer nav a { font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.site-footer nav a:hover { color: var(--text); }
.copyright { order: 1; flex: 1 1 0; min-width: 0; color: var(--muted); font-size: 13.5px; margin: 0; }

/* ===== Reveal-анимации ===== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ===== Адаптив ===== */
@media (max-width: 920px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-visual { order: -1; }
  .about-visual img { max-width: 320px; }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .contacts { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .menu-toggle { display: block; z-index: 110; }
  .site-nav {
    /* height/translate в svh, чтобы не зависеть от containing block шапки
       (backdrop-filter у .is-scrolled делает шапку containing block для fixed) */
    position: fixed; left: 0; right: 0; top: 0; height: 100svh;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 30px; background: rgba(0, 0, 0, 0.96); backdrop-filter: blur(8px);
    transform: translateY(-100svh); transition: transform .35s ease; z-index: 105;
  }
  .site-nav.is-open { transform: translateY(0); }
  .site-nav a { font-size: 22px; }
  body.menu-open { overflow: hidden; }

  /* Лепестки собраны в «кучки» (клумбы) по 3 внахлёст в каждом углу, а не разбросаны по одному.
     Средние (l4/r4) прячем, чтобы не лезли на логотип. Итого 4 кучки × 3 = 12 лепестков. */
  /* Все 14 лепестков задействованы — 4 плотные кучки по углам (по 4 и 3 внахлёст). */
  .fig { width: clamp(54px, 15vw, 84px); }

  /* Верхняя левая кучка (4 шт. внахлёст) */
  .fig--l1 { top: 0%;  left: 0%;  right: auto; bottom: auto; }
  .fig--l2 { top: 6%;  left: 12%; right: auto; bottom: auto; }
  .fig--l3 { top: 12%; left: 2%;  right: auto; bottom: auto; }
  .fig--l4 { top: 4%;  left: 22%; right: auto; bottom: auto; display: block; }
  /* Верхняя правая кучка (зеркало) */
  .fig--r1 { top: 0%;  right: 0%;  left: auto; bottom: auto; }
  .fig--r2 { top: 6%;  right: 12%; left: auto; bottom: auto; }
  .fig--r3 { top: 12%; right: 2%;  left: auto; bottom: auto; }
  .fig--r4 { top: 4%;  right: 22%; left: auto; bottom: auto; display: block; }
  /* Нижняя левая кучка (3 шт.) */
  .fig--l5 { top: auto; bottom: 12%; left: 1%;  right: auto; }
  .fig--l6 { top: auto; bottom: 4%;  left: 13%; right: auto; }
  .fig--l7 { top: auto; bottom: 0%;  left: 3%;  right: auto; }
  /* Нижняя правая кучка (зеркало) */
  .fig--r5 { top: auto; bottom: 12%; right: 1%;  left: auto; }
  .fig--r6 { top: auto; bottom: 4%;  right: 13%; left: auto; }
  .fig--r7 { top: auto; bottom: 0%;  right: 3%;  left: auto; }
}

@media (max-width: 460px) {
  /* По правке заказчика: карточки «в куче», как на ПК — оставляем сетку 2-в-ряд,
     а не растягиваем по одной. Компактные отступы/шрифты, чтобы помещалось больше. */
  .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .product-card { padding: 18px 15px 15px; min-height: 190px; gap: 9px; }
  .product-cat { font-size: 10.5px; letter-spacing: .08em; }
  .product-title { font-size: 17px; }
  .product-desc { font-size: 12.5px; line-height: 1.45; }
  .product-foot { padding-top: 12px; }
  .price { font-size: 16px; }
  .product-arrow { font-size: 18px; }
  .contact-list > div { flex-direction: column; align-items: flex-start; gap: 6px; }
  .contact-list a, .contact-list p { text-align: left; }
}

/* ===== prefers-reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}