/* =====================================================================
   5. SOLUTION — вкладки Consumers / Businesses: фото + карточки, текст,
      аккордеон; ниже баннер «It's your loyalty…»
   ===================================================================== */

.solution { height: 1139px; }
.solution__tabs   { position: absolute; left: 504px; top: 20px; z-index: 2; }
.solution__panels { position: absolute; inset: 0; }
.solution__panels > div { position: relative; }

.solution__photo { position: absolute; left: 60px; top: 101px; width: 570px; height: 540px; object-fit: cover; object-position: 53% 51%; border-radius: 10px; }
[data-panel="businesses"] .solution__photo { object-position: 85% 46%; }
.solution__card  { position: absolute; object-fit: cover; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.solution__card--customize { left: 355.9px; top: 125px; width: 232px; height: 193.9px; }
.solution__card--boost     { left: 86px;    top: 483px; width: 245px; height: 144.9px; }
.solution__card--members   { left: 315px;   top: 120px; width: 293px; height: 95px; }
.solution__card--analytics { left: 77px;    top: 466px; width: 286px; height: 156.4px; }

.solution__title    { position: absolute; left: 685px; top: 117px; width: 683px; font: 500 50px/50px var(--head); }
.solution__subtitle { position: absolute; left: 685px; top: 177px; width: 683px; font: 500 18px/0 var(--head); }
.solution__text     { position: absolute; left: 685px; top: 205px; width: 670px; font-size: 15.96px; line-height: 19.15px; }
.solution .accordion { position: absolute; left: 693px; top: 288px; width: 583px; }

[data-panel="businesses"] .solution__title    { left: 683px; width: 689px; }
[data-panel="businesses"] .solution__subtitle { left: 683px; width: 645px; }
[data-panel="businesses"] .solution__text     { left: 684.2px; width: 622px; font-size: 16px; line-height: 19.2px; }
[data-panel="businesses"] .accordion          { left: 692px; top: 289px; width: 550px; }

/* --- аккордеон --- */
.accordion__item + .accordion__item { margin-top: 10px; }
.accordion__title {
  display: flex; align-items: center; gap: 20px; width: 100%;
  padding: 10px 15px 10px 0; border-bottom: 1px solid var(--line);
  font: 500 24px/33.6px var(--head); text-align: left;
}
.accordion__title img { width: 28.8px; height: 28.8px; flex: none; }
.accordion__body { max-height: 0; overflow: hidden; transition: max-height .2s cubic-bezier(.25, .46, .45, .94); }
.accordion__body p { padding: 5px 15px; font-size: 14px; line-height: 19.6px; }

/* --- баннер --- */
.banner { position: absolute; left: 60px; top: 713px; width: 1320px; height: 358.4px; overflow: hidden;
  border-radius: 20px; background: var(--navy) url(../../img/banner-desktop.png) center / cover no-repeat; }
.banner__title { position: absolute; left: 39.3px; top: 43px; width: 591.6px; font: 500 50px/60px var(--head); color: #fff; }
.banner .btn   { position: absolute; left: 37px; top: 270px; }

/* вкладки «How it works» для планшета/телефона (стоят внизу этой секции) */
.solution__how-tabs { display: none; }

/* desktop 1250–1439 */
@media (max-width: 1439px) {
  .solution { height: 1105px; }
  .solution__tabs { left: 409px; }
  .solution__photo { width: 480px; }
  .solution__card--customize { left: 287.7px; top: 132.7px; }
  .solution__card--boost     { left: 72.2px; top: 473.2px; }
  .solution__card--members   { left: 236.1px; top: 123.4px; }
  .solution__card--analytics { left: 74.9px; top: 432px; width: 353px; height: 193px; }
  .solution__title, .solution__subtitle, .solution__text,
  [data-panel] .solution__title, [data-panel] .solution__subtitle, [data-panel] .solution__text { left: 556px; }
  .solution__title { width: 645px; }
  [data-panel="businesses"] .solution__title { width: 702px; }
  .solution__text { width: 623px; }
  [data-panel="businesses"] .solution__text { width: 608px; }
  .solution .accordion { left: 566px; top: 289px; width: 551px; }
  [data-panel="businesses"] .accordion { left: 567px; width: 550px; }
  .banner { left: 60.5px; top: 719px; width: 1130px; height: 306.8px; }
  .banner__title { left: 33.5px; top: 43px; width: 506.5px; font-size: 45px; line-height: 54px; }
  .banner .btn { top: 230px; }
}
/* tablet 740–1249 */
@media (max-width: 1249px) {
  .solution { height: 2243px; }
  .solution__tabs { left: 154px; top: 15px; }
  .solution__photo { left: 30.5px; width: 680px; }
  .solution__card--customize { left: 394.5px; top: 129px; width: 280px; height: 234px; }
  .solution__card--boost     { left: 63.5px; top: 440px; width: 283px; height: 167.4px; }
  .solution__card--members   { left: 393.5px; top: 124px; }
  .solution__card--analytics { left: 56.5px; top: 431px; }
  .solution__title, .solution__subtitle, .solution__text,
  [data-panel] .solution__title, [data-panel] .solution__subtitle, [data-panel] .solution__text { left: 30.5px; width: 680px; }
  .solution__title { top: 669px; font-size: 40px; line-height: 40px; }
  .solution__subtitle { top: 729px; }
  .solution__text { top: 757px; }
  [data-panel="businesses"] .solution__text { font-size: 16px; }
  .solution .accordion, [data-panel="businesses"] .accordion { left: 30.5px; top: 836px; width: 680px; }
  [data-panel="businesses"] .accordion { top: 826px; }
  .banner { left: 10px; top: 1235px; width: 720px; height: 918px;
    background-image: url(../../img/banner-mobile.png); background-position: 56% 87%; }
  .banner__title { left: 21px; top: 43px; width: 485px; font-size: 40px; line-height: 48px; }
  .banner .btn { left: 20px; top: 268.5px; }
  .solution__how-tabs { display: flex; position: absolute; left: 154.5px; top: 2193px; z-index: 2; }
}
/* mobile <740 */
@media (max-width: 739px) {
  .solution { height: 1483px; }
  .solution__tabs { left: 3.5px; top: 23px; }
  .solution__photo { left: -0.5px; top: 275px; width: 319px; height: 330px; }
  [data-panel="businesses"] .solution__photo { top: 238px; }
  .solution__card--customize { left: 154.5px; top: 284px; width: 158px; height: 131.8px; }
  .solution__card--boost     { left: 9.5px; top: 505px; width: 160px; height: 94.5px; }
  .solution__card--members   { left: 117.2px; top: 246.2px; width: 191px; height: 61.9px; }
  .solution__card--analytics { left: 11.5px; top: 440px; width: 222px; height: 121px; }
  .solution__title, .solution__subtitle, .solution__text,
  [data-panel] .solution__title, [data-panel] .solution__subtitle, [data-panel] .solution__text { left: -0.5px; }
  [data-panel] .solution__title { top: 80px; width: 228px; font-size: 25px; line-height: 25px; }
  [data-panel="businesses"] .solution__title { width: 300px; }
  [data-panel] .solution__subtitle { top: 147px; width: 293px; font-size: 14px; }
  [data-panel="businesses"] .solution__subtitle { top: 129.5px; }
  [data-panel] .solution__text { top: 164px; width: 312px; font-size: 12px; line-height: 14.4px; }
  [data-panel="businesses"] .solution__text { top: 152px; }
  .solution .accordion { left: -0.5px; top: 609px; width: 319px; }
  [data-panel="businesses"] .accordion { left: -0.5px; top: 574px; width: 320px; }
  .accordion__item + .accordion__item { margin-top: 0; }
  .accordion__title { font-size: 16px; line-height: 22.4px; }
  .accordion__title img { width: 19.2px; height: 19.2px; }
  .banner { left: 0.5px; top: 900px; width: 320px; height: 523px; }
  .banner__title { left: 24px; top: 26px; width: 281px; font-size: 25px; line-height: 30px; }
  .banner .btn { left: 24px; top: 146.1px; height: 29px; }
  .solution__how-tabs { left: 6px; top: 1450px; }
}