/* mfpinvest.ru - верстка главной страницы поверх base.css + mfpinvest.css.
   Все значения перенесены из макета Claude Design (инлайновые стили компонентов
   дизайн-системы MFP Group развернуты в обычные классы).

   Брейкпоинты держим синхронно с комментарием в base.css:
   1024px - сетка услуг 6->4 колонки, hero теснее
   860px  - одна колонка, пункты меню в хедере скрыты (остаются лого и CTA)
   560px  - все сетки в одну колонку, минимальные размеры */

/* ===================== Хедер ===================== */

/* fixed и прозрачный; при scrollY > 24 JS ставит .is-scrolled:
   белый фон с blur, тень, высота 84 -> 62px, лого 42 -> 34px */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-header);
  border-bottom-color: var(--brand-border-light);
}

.site-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 28px;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: height var(--t-mid);
}
.site-header.is-scrolled .site-header__inner { height: var(--header-h-compact); }

.site-header__logo { display: flex; align-items: center; }
.site-header__logo img {
  height: 42px;
  width: auto;
  display: block;
  transition: height var(--t-mid);
}
.site-header.is-scrolled .site-header__logo img { height: 34px; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  white-space: nowrap;
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__link {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--brand-text-nav);
  letter-spacing: 0.2px;
  text-decoration: none;
  transition: color var(--t-fast);
}
.site-nav__link:hover { color: var(--brand-primary); }
/* активный пункт подчеркнут акцентом (JS ставит aria-current по скроллу) */
.site-nav__link[aria-current="true"] {
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--brand-accent);
}

.site-header__cta {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--brand-primary);
  border: 1.5px solid var(--brand-primary);
  padding: 9px 22px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.3px;
  text-decoration: none;
  background: transparent;
  transition: background var(--t-fast), color var(--t-fast);
}
.site-header__cta:hover {
  background: var(--brand-bg-chip);
  color: var(--brand-primary-dark);
}

/* ===================== Hero ===================== */

.hero { background: #fff; padding: 116px 28px 36px; }

.hero__panel {
  max-width: var(--container-max);
  margin: 0 auto;
  background: linear-gradient(135deg,
    var(--brand-hero-grad-1) 0%,
    var(--brand-hero-grad-2) 55%,
    var(--brand-hero-grad-3) 100%);
  border-radius: var(--radius-xl);
  padding: 60px 64px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 52px;
}

/* декоративные круги за содержимым плашки */
.hero__float { position: absolute; border-radius: 50%; }
.hero__float--a {
  left: -90px;
  top: -90px;
  width: 340px;
  height: 340px;
  background: rgba(255, 255, 255, 0.55);
}
.hero__float--b {
  left: 120px;
  bottom: -140px;
  width: 260px;
  height: 260px;
  background: var(--brand-float-tint);
}

.hero__art {
  position: relative;
  order: 1;
  flex: 1 1 300px;
  min-width: 280px;
  max-width: 430px;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow-panel);
}
.hero__art-frame {
  background: var(--brand-bg-light);
  border-radius: 12px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero__art-frame svg { display: block; width: 100%; height: 100%; }

/* фигуры подсвечиваются по очереди вместе с подписью этапа */
.hero__shape {
  stroke: var(--brand-border-dashed);
  stroke-width: 4;
  transition: stroke var(--t-slow), stroke-width var(--t-slow);
}
.hero__shape.is-active { stroke-width: 5; }
.hero__shape.is-active[data-tone="primary"] { stroke: var(--brand-primary); }
.hero__shape.is-active[data-tone="accent"] { stroke: var(--brand-accent); }

.hero__stages {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 8px 4px;
}
.hero__stages-label { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.hero__stages-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-primary);
}
.hero__stages-track { position: relative; height: 18px; flex: 1; min-width: 0; }
.hero__stage {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--brand-primary-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-slow), transform var(--t-slow);
}
.hero__stage.is-active { opacity: 1; transform: translateY(0); }

.hero__stages-bars { display: flex; align-items: center; gap: 5px; flex-shrink: 1; }
.hero__bar {
  width: 14px;
  min-width: 8px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--brand-border);
  transition: background var(--t-slow);
}
.hero__bar.is-active { background: var(--brand-primary); }

.hero__text {
  position: relative;
  order: 2;
  flex: 1 1 340px;
  min-width: 300px;
  max-width: 600px;
}
.hero__kicker {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: 20px;
}
.hero__title {
  font-size: clamp(36px, 4.6vw, var(--fs-display));
  font-weight: var(--fw-extrabold);
  line-height: 1.08;
  letter-spacing: -1px;
  margin: 0 0 22px;
  color: var(--brand-primary-dark);
  overflow-wrap: anywhere;
}
.hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--brand-text-body);
  margin: 0 0 34px;
  text-wrap: pretty;
}

/* ===================== О компании ===================== */

.about {
  background: #fff;
  padding: calc(var(--section-pad-y) * 1.4) var(--section-pad-x);
}
.about__inner { max-width: 860px; margin: 0 auto; text-align: center; }
.about__text {
  font-size: var(--fs-lead);
  line-height: 1.75;
  color: var(--brand-text-muted);
  margin: -6px 0 0;
  text-wrap: pretty;
}

/* ===================== Услуги ===================== */

.services {
  background: var(--brand-bg-light);
  padding: calc(var(--section-pad-y) * 1.4) var(--section-pad-x);
}
.services__inner { max-width: var(--container-max); margin: 0 auto; }
.services__kicker {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--brand-accent);
  text-align: center;
  margin-bottom: 14px;
}
.services__title {
  font-size: var(--fs-heading-xl);
  font-weight: var(--fw-extrabold);
  line-height: 1.32;
  color: var(--brand-primary-dark);
  text-align: center;
  max-width: 780px;
  margin: 0 auto 64px;
  text-wrap: pretty;
}

/* 6 колонок: три карточки в первом ряду, две по центру во втором */
.services__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--grid-gap);
}
.services__item:nth-child(1) { grid-column: 1 / span 2; }
.services__item:nth-child(2) { grid-column: 3 / span 2; }
.services__item:nth-child(3) { grid-column: 5 / span 2; }
.services__item:nth-child(4) { grid-column: 2 / span 2; }
.services__item:nth-child(5) { grid-column: 4 / span 2; }

.services__item { height: 100%; }
.service-card { height: 100%; padding: 38px 28px; text-align: center; }
.service-card__icon {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-lg);
  background: var(--brand-bg-chip);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
}
.service-card__title {
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  margin: 0 0 12px;
  color: var(--brand-primary-dark);
}
.service-card__text {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--brand-text-muted);
  margin: 0;
  text-wrap: pretty;
}

/* ===================== Футер ===================== */

.site-footer {
  background: var(--brand-bg-footer);
  color: var(--brand-primary-dark);
  padding: 70px 28px 34px;
}
.site-footer__inner { max-width: var(--container-max); margin: 0 auto; }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr 0.8fr;
  gap: 48px;
  align-items: start;
}
.site-footer__heading {
  font-size: var(--fs-heading-sm);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--brand-primary-dark);
  margin: 0 0 18px;
}
.site-footer__requisites {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.9;
  color: var(--brand-text-body);
  margin: 0;
  white-space: pre-line;
}
.site-footer__label {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--brand-text-label);
  margin-bottom: 18px;
}
.site-footer__contacts,
.site-footer__nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.site-footer__contacts { gap: 16px; }
.site-footer__nav { gap: 12px; }

.site-footer__contacts li {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--brand-text-body);
}
/* у адреса текст многострочный - иконку прижимаем к первой строке */
.site-footer__contacts li:first-child { align-items: flex-start; }
.site-footer__icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-icon);
  color: var(--brand-accent);
}
.site-footer__contacts a {
  color: var(--brand-primary-dark);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.site-footer__contacts a:hover { color: var(--brand-accent); }
.site-footer__nav a {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--brand-text-body);
  text-decoration: none;
}
.site-footer__nav a:hover { color: var(--brand-accent); }

.site-footer__bottom {
  border-top: 1px solid var(--brand-footer-divider);
  margin-top: 44px;
  padding-top: 24px;
  text-align: center;
}
.site-footer__copy {
  font-size: var(--fs-small);
  color: var(--brand-text-label);
  margin: 0;
}

/* ===================== Кнопка «наверх» ===================== */

.to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: var(--z-to-top);
  width: 46px;
  height: 46px;
  border-radius: var(--radius-round);
  background: var(--brand-primary);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-float);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--t-mid), transform var(--t-mid), background var(--t-fast);
}
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { background: var(--brand-primary-dark); }

/* ===================== 1024px ===================== */

@media (max-width: 1024px) {
  .hero { padding: 108px 24px 32px; }
  .hero__panel { padding: 44px 40px; gap: 40px; }

  /* сетка услуг 6 -> 4 колонки: по две карточки в ряд, пятая по центру */
  .services__grid { grid-template-columns: repeat(4, 1fr); }
  .services__item:nth-child(1) { grid-column: 1 / span 2; }
  .services__item:nth-child(2) { grid-column: 3 / span 2; }
  .services__item:nth-child(3) { grid-column: 1 / span 2; }
  .services__item:nth-child(4) { grid-column: 3 / span 2; }
  .services__item:nth-child(5) { grid-column: 2 / span 2; }

  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px 40px; }
}

/* ===================== 860px ===================== */

@media (max-width: 860px) {
  :root {
    --section-pad-y: 56px;
    --section-pad-x: 20px;
  }

  /* пункты меню убираем, остаются лого и CTA (соглашение дизайн-системы) */
  .site-nav__list { display: none; }
  .site-header__inner { padding: 0 20px; }

  .hero { padding: 96px 20px 28px; }
  /* одна колонка: сначала текст, потом декоративная карточка */
  .hero__panel {
    flex-direction: column;
    align-items: stretch;
    padding: 36px 28px;
    gap: 32px;
  }
  .hero__text { order: 1; flex: none; width: 100%; min-width: 0; max-width: none; }
  .hero__art { order: 2; flex: none; width: 100%; min-width: 0; margin: 0 auto; }
  .hero__float--a { width: 240px; height: 240px; left: -70px; top: -70px; }
  .hero__float--b { width: 200px; height: 200px; left: 80px; bottom: -110px; }

  .service-card { padding: 32px 22px; }

  .site-footer { padding: 56px 20px 28px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 34px; }
  .site-footer__bottom { margin-top: 34px; }

  .to-top { right: 18px; bottom: 18px; }
}

/* ===================== 560px ===================== */

@media (max-width: 560px) {
  :root { --section-pad-x: 16px; }

  .site-header__inner { padding: 0 16px; gap: 12px; }
  /* на узких экранах CTA компактнее, иначе не влезает рядом с лого */
  .site-header__cta { font-size: var(--fs-caption); padding: 8px 14px; }
  .site-header__logo img { height: 34px; }
  .site-header.is-scrolled .site-header__logo img { height: 30px; }

  .hero { padding: 88px 16px 24px; }
  .hero__panel { padding: 28px 20px; gap: 26px; border-radius: var(--radius-lg); }
  .hero__lead { font-size: var(--fs-lead-sm); margin-bottom: 28px; }
  .hero__art-frame { height: 220px; }
  .btn-pill--solid { padding: 14px 28px; }

  .section-title { font-size: 26px; margin-bottom: 32px; }
  .about__text { font-size: var(--fs-lead-sm); }

  .services__title { font-size: var(--fs-title); margin-bottom: 40px; }
  /* все карточки в одну колонку */
  .services__grid { grid-template-columns: 1fr; gap: var(--grid-gap-sm); }
  .services__item:nth-child(n) { grid-column: 1 / -1; }

  .site-footer__heading { font-size: var(--fs-lead-sm); }
}