@charset "utf-8";
/* alfamatic.ru — по мотивам прежнего сайта: светлая шапка в две строки, большой слайдер с людьми,
   фотоплитки, карточки с картинками, отзывы, счётчики. Анимации отключаются при «уменьшить движение». */

[data-site="alfamatic"] {
  --c-text: #222632;
  --c-soft: #f6f7f9;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
[data-site="alfamatic"] body { background: #fff; }

/* ---------- шапка ---------- */
[data-site="alfamatic"] .site-header { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid var(--c-line); backdrop-filter: none; }
.hdr__top { display: flex; align-items: center; gap: var(--sp-6); min-height: 88px; transition: min-height .25s var(--ease); }
.hdr__logo img { display: block; height: 43px; width: auto; transition: height .25s var(--ease); }
.hdr__slogan { font-size: .82rem; line-height: 1.35; color: var(--c-muted); padding-left: var(--sp-5); border-left: 1px solid var(--c-line); }
.hdr__addr { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: .85rem; color: var(--c-muted); max-width: 210px; margin-left: auto; }
.hdr__addr svg, .hdr__phone svg { flex: none; color: var(--c-primary); margin-top: 3px; }
.hdr__phone { display: grid; gap: 2px; }
.hdr__phone a { display: flex; gap: var(--sp-2); align-items: center; font-weight: 700; font-size: 1.1rem; color: var(--c-text); text-decoration: none; white-space: nowrap; }
.hdr__phone small { font-size: .75rem; color: var(--c-muted); padding-left: 24px; }
.btn--outline { border: 1px solid var(--c-primary); color: var(--c-primary); background: transparent; }
.btn--outline:hover { background: var(--c-primary); color: #fff; }
.hdr__call { flex: none; }
.hdr__nav { border-top: 1px solid var(--c-line); }
.hdr__nav ul.menu { display: flex; flex-wrap: nowrap; justify-content: space-between; list-style: none; margin: 0 auto; padding-top: 0; padding-bottom: 0; gap: 0; }
.menu__item { position: relative; }
.menu__item > a { display: block; padding: var(--sp-4) var(--sp-2); font-weight: 500; font-size: .93rem; color: var(--c-text); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.menu__item:nth-last-child(-n+3) > .menu__sub { left: auto; right: 0; }
.menu__item.has-sub > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); opacity: .5; }
.menu__item:hover > a, .menu__item.is-active > a { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.menu__sub {
  position: absolute; top: 100%; left: 0; min-width: 280px; list-style: none; margin: 0; padding: var(--sp-2) 0; background: #fff;
  border: 1px solid var(--c-line); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 16px 40px rgb(20 26 43 / 12%);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s, transform .18s var(--ease), visibility .18s; z-index: 5;
}
.menu__item:hover > .menu__sub, .menu__item:focus-within > .menu__sub { opacity: 1; visibility: visible; transform: none; }
.menu__sub a { display: block; padding: var(--sp-2) var(--sp-5); color: var(--c-text); text-decoration: none; font-size: .92rem; }
.menu__sub a:hover { background: var(--c-soft); color: var(--c-primary); }
.menu__open { display: none; }
/* общие правила .site-nav не должны трогать подменю */
.hdr__nav ul.menu__sub { display: block; flex-wrap: nowrap; gap: 0; }
.hdr__nav .menu__sub a { padding: var(--sp-2) var(--sp-5); border: 0; font-weight: 400; }
.hdr__nav { margin-left: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* поджатая шапка при прокрутке */
.is-scrolled .hdr__top { min-height: 60px; }
.is-scrolled .hdr__logo img { height: 34px; }
.is-scrolled .hdr__slogan, .is-scrolled .hdr__addr { display: none; }

@media (max-width: 1180px) { .hdr__slogan { display: none; } }
@media (max-width: 1020px) {
  .hdr__addr, .hdr__call { display: none; }
  .hdr__top { min-height: 64px; gap: var(--sp-4); }
  .hdr__phone { margin-left: auto; }
  .hdr__phone small { display: none; }
  [data-site="alfamatic"] .nav-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; margin-left: 0; }
  .burger, .burger::before, .burger::after { display: block; width: 20px; height: 2px; background: var(--c-text); position: relative; transition: transform .2s, background .2s; }
  .burger::before, .burger::after { content: ""; position: absolute; left: 0; }
  .burger::before { top: -6px; } .burger::after { top: 6px; }
  [aria-expanded="true"] .burger { background: transparent; }
  [aria-expanded="true"] .burger::before { transform: translateY(6px) rotate(45deg); }
  [aria-expanded="true"] .burger::after { transform: translateY(-6px) rotate(-45deg); }
  .hdr__nav { display: none; max-height: calc(100vh - 64px); overflow-y: auto; }
  .hdr__nav.is-open { display: block; }
  .menu { flex-direction: column; padding: var(--sp-2) var(--gutter) var(--sp-5); }
  .menu__item { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--c-line); }
  .menu__item > a { padding: var(--sp-4) 0; border: 0; }
  .menu__open { display: grid; place-items: center; width: 44px; border: 0; background: none; cursor: pointer; }
  .menu__open::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--c-muted); border-bottom: 2px solid var(--c-muted); transform: rotate(45deg); transition: transform .2s; }
  .menu__item.is-open .menu__open::before { transform: rotate(225deg); }
  .hdr__nav ul.menu__sub { position: static; grid-column: 1 / -1; display: none; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 var(--sp-3) var(--sp-3); }
  .hdr__nav .menu__item.is-open > ul.menu__sub { display: block; }
  .hdr__nav .menu__sub a { padding: var(--sp-2) 0; }
  .menu__item.has-sub > a::after { display: none; }
}
@media (max-width: 420px) { .hdr__phone a { font-size: .95rem; } .hdr__phone svg { display: none; } }

/* ---------- слайдер ---------- */
.hero-slider { position: relative; overflow: hidden; background: #eef1f5; }
.hero-slider__track { position: relative; height: clamp(420px, 38vw, 640px); }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), visibility .9s; }
.slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.slide__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 8s linear; }
.slide.is-active .slide__bg { transform: scale(1); }
.slide__inner { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); }
.slide__text { max-width: 560px; padding: var(--sp-7) 0; }
.slide__title { font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.9rem); line-height: 1.15; margin: 0 0 var(--sp-4); }
.slide__lead { font-size: var(--fs-2); margin: 0 0 var(--sp-5); }
.slide__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.slide__front { align-self: flex-end; max-height: 92%; width: auto; max-width: 48%; object-fit: contain; }
.slide--light .slide__title { color: var(--c-text); }
.slide--light .slide__lead { color: #3d4454; }
.slide--dark .slide__title, .slide--dark .slide__lead { color: #fff; text-shadow: 0 2px 16px rgb(0 0 0 / 35%); }
.slide--dark .btn--outline { color: #fff; border-color: #fff; }
.slide--dark .btn--outline:hover { background: #fff; color: var(--c-text); }
/* текст и фигура въезжают при смене слайда */
.slide .slide__title, .slide .slide__lead, .slide .slide__actions { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.slide .slide__front { opacity: 0; transform: translateX(40px); transition: opacity .9s var(--ease) .15s, transform .9s var(--ease) .15s; }
.slide.is-active .slide__title { opacity: 1; transform: none; transition-delay: .25s; }
.slide.is-active .slide__lead { opacity: 1; transform: none; transition-delay: .4s; }
.slide.is-active .slide__actions { opacity: 1; transform: none; transition-delay: .55s; }
.slide.is-active .slide__front { opacity: 1; transform: none; }
.hero-slider__dots { position: absolute; left: 0; right: 0; bottom: var(--sp-5); z-index: 3; display: flex; justify-content: center; gap: var(--sp-2); }
.hero-slider__dots button { width: 44px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.hero-slider__dots span { display: block; width: 36px; height: 3px; border-radius: 2px; background: rgb(0 0 0 / 18%); overflow: hidden; position: relative; }
.hero-slider__dots span::after { content: ""; position: absolute; inset: 0; background: var(--c-primary); transform: scaleX(0); transform-origin: left; }
.hero-slider__dots [aria-selected="true"] span::after { animation: dot var(--slide-time, 7s) linear forwards; }
.hero-slider.is-paused .hero-slider__dots [aria-selected="true"] span::after { animation-play-state: paused; }
@keyframes dot { to { transform: scaleX(1); } }
.hero-slider__arrow { position: absolute; top: 50%; z-index: 3; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; border: 0; background: rgb(255 255 255 / 85%); cursor: pointer; opacity: 0; transition: opacity .2s; box-shadow: 0 4px 16px rgb(0 0 0 / 12%); }
.hero-slider:hover .hero-slider__arrow, .hero-slider__arrow:focus-visible { opacity: 1; }
.hero-slider__arrow::before { content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 10px; border-left: 2px solid var(--c-text); border-bottom: 2px solid var(--c-text); }
.hero-slider__arrow--prev { left: var(--sp-5); } .hero-slider__arrow--prev::before { transform: translateX(2px) rotate(45deg); }
.hero-slider__arrow--next { right: var(--sp-5); } .hero-slider__arrow--next::before { transform: translateX(-2px) rotate(-135deg); }
@media (max-width: 860px) {
  .hero-slider__track { height: auto; min-height: 520px; }
  .slide__inner { flex-direction: column; justify-content: flex-start; align-items: flex-start; padding-bottom: 56px; }
  .slide__text { padding: var(--sp-6) 0 var(--sp-3); }
  .slide__front { max-width: 70%; max-height: 220px; align-self: flex-end; }
  .slide--light .slide__bg { opacity: .55; }
  .hero-slider__arrow { display: none; }
}
@media (max-width: 600px) {
  .hero-slider__track { min-height: 440px; }
  .slide__front { display: none; }
  .slide__lead { font-size: var(--fs-1); }
}

/* ---------- отраслевые решения: фотоплитки ---------- */
.solutions__grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
.solutions__lead { font-size: var(--fs-2); color: #3d4454; }
.solutions__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.photo-tile { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: #dfe4ea; color: #fff; text-decoration: none; isolation: isolate; }
.photo-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); z-index: -1; }
.photo-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 40%, rgb(10 25 50 / 75%)); opacity: 0; transition: opacity .35s; }
.photo-tile__label { position: absolute; left: var(--sp-4); bottom: var(--sp-4); padding: 6px 12px; background: var(--c-primary); font-weight: 600; transition: transform .35s var(--ease); }
.photo-tile__text { position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); font-size: .9rem; line-height: 1.4; opacity: 0; transform: translateY(12px); transition: opacity .35s, transform .35s var(--ease); }
.photo-tile:hover img, .photo-tile:focus-visible img { transform: scale(1.07); }
.photo-tile:hover::after, .photo-tile:focus-visible::after { opacity: 1; }
.photo-tile:hover .photo-tile__label, .photo-tile:focus-visible .photo-tile__label { transform: translateY(-3.2em); }
.photo-tile:hover .photo-tile__text, .photo-tile:focus-visible .photo-tile__text { opacity: 1; transform: none; }
@media (max-width: 860px) { .solutions__grid { grid-template-columns: 1fr; gap: var(--sp-5); } }
@media (max-width: 520px) { .solutions__tiles { grid-template-columns: 1fr; } }

/* ---------- каталог: карточки с картинкой слева ---------- */
.catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--c-line); background: #fff; }
.catalog-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--sp-5); padding: var(--sp-6); border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); transition: box-shadow .25s, transform .25s var(--ease); background: #fff; }
.catalog-card:nth-child(2n) { border-right: 0; }
.catalog-card:hover { box-shadow: 0 12px 36px rgb(20 26 43 / 12%); transform: translateY(-2px); position: relative; z-index: 1; }
.catalog-card__img { display: grid; place-items: center; height: 120px; }
.catalog-card__img img { max-width: 100%; max-height: 120px; object-fit: contain; transition: transform .4s var(--ease); }
.catalog-card:hover .catalog-card__img img { transform: scale(1.06); }
.catalog-card h3 { font-size: var(--fs-2); font-weight: 500; margin: 0 0 var(--sp-2); }
.catalog-card h3 a { color: var(--c-text); text-decoration: none; }
.catalog-card h3 a:hover { color: var(--c-primary); }
.catalog-card__links { list-style: none; padding: 0; margin: 0 0 var(--sp-3); display: flex; flex-wrap: wrap; gap: 2px var(--sp-3); font-size: .9rem; }
.catalog-card__links a { text-decoration: none; }
.catalog-card p { color: var(--c-muted); font-size: .88rem; margin: 0; }
@media (max-width: 860px) { .catalog-grid { grid-template-columns: 1fr; } .catalog-card { border-right: 0; } }
@media (max-width: 480px) { .catalog-card { grid-template-columns: 90px minmax(0, 1fr); padding: var(--sp-4); gap: var(--sp-4); } .catalog-card__img { height: 90px; } }

/* ---------- преимущества ---------- */
.advantages-band { border-bottom: 1px solid var(--c-line); }
.advantages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.advantages li { display: grid; grid-template-columns: 52px 1fr; column-gap: var(--sp-4); align-items: start; }
.advantages img { grid-row: span 2; width: 48px; height: 48px; object-fit: contain; }
.advantages b { font-weight: 500; line-height: 1.3; }
.advantages span { color: var(--c-muted); font-size: .88rem; }

/* ---------- о компании и счётчики ---------- */
.about { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-7); align-items: center; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.facts li { padding: var(--sp-5); background: #fff; border-radius: 6px; display: grid; gap: var(--sp-1); box-shadow: 0 2px 10px rgb(20 26 43 / 5%); }
.facts img { width: 40px; height: 40px; object-fit: contain; margin-bottom: var(--sp-2); }
.facts b { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.8rem); font-weight: 700; line-height: 1; color: var(--c-primary); font-variant-numeric: tabular-nums; }
.facts li > span { color: var(--c-muted); font-size: .9rem; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }

/* ---------- внутренние страницы: полоса заголовка ---------- */
[data-site="alfamatic"] main > .container:first-child > .crumbs { padding-top: var(--sp-5); }

@media (prefers-reduced-motion: reduce) {
  .slide, .slide *, .photo-tile *, .catalog-card *, .news-card *, .project-tile *, [data-reveal] * { transition: none !important; animation: none !important; }
  .slide__bg { transform: none !important; }
  .js [data-reveal] * { opacity: 1 !important; transform: none !important; }
}