/*
 * VSH25 Mobile App page-specific styles.
 * Loaded only for template-mobile-app.php.
 */

/* mobile-app-hero start */

.page-template-template-mobile-app .mobile-app-hero {
   --mobile-app-hero-bottom-padding: 76px;
   --mobile-app-hero-image-bottom-crop: 20%;
   --mobile-app-hero-image-frame-height: calc(125% + var(--mobile-app-hero-bottom-padding));
   --mobile-app-hero-image-shift-x: 44px;
   position: relative;
   min-height: clamp(470px, 49vw, 640px);
   padding: 0 0 var(--mobile-app-hero-bottom-padding);
   overflow: hidden;
   isolation: isolate;
   border-radius: 0 0 20px 20px;
   background:
      linear-gradient(180deg, #ffffff 0, #ffffff 132px, rgba(255, 255, 255, 0.98) 178px, rgba(255, 255, 255, 0.76) 278px, rgba(255, 255, 255, 0) 430px),
      radial-gradient(ellipse at 16% -8%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.88) 30%, rgba(255, 255, 255, 0) 66%),
      radial-gradient(ellipse at 88% -6%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.78) 28%, rgba(255, 255, 255, 0) 64%),
      radial-gradient(ellipse at 88% 18%, rgba(211, 225, 255, 0.88) 0%, rgba(211, 225, 255, 0.38) 26%, rgba(211, 225, 255, 0) 58%),
      radial-gradient(ellipse at 74% 82%, rgba(221, 236, 255, 0.9) 0%, rgba(221, 236, 255, 0.4) 30%, rgba(221, 236, 255, 0) 64%),
      radial-gradient(ellipse at 30% 96%, rgba(247, 219, 240, 0.58) 0%, rgba(247, 219, 240, 0.22) 32%, rgba(247, 219, 240, 0) 66%),
      radial-gradient(ellipse at 56% 44%, rgba(230, 222, 255, 0.5) 0%, rgba(230, 222, 255, 0.18) 34%, rgba(230, 222, 255, 0) 68%),
      linear-gradient(135deg, #ffffff 0%, #f9fcff 42%, #f6f4ff 100%);
   -webkit-box-shadow: inset 0 -1px 0 rgba(43, 126, 235, 0.06);
   box-shadow: inset 0 -1px 0 rgba(43, 126, 235, 0.06);
}

.page-template-template-mobile-app .mobile-app-hero::before,
.page-template-template-mobile-app .mobile-app-hero::after {
   content: "";
   position: absolute;
   z-index: 0;
   pointer-events: none;
}

.page-template-template-mobile-app .mobile-app-hero::before {
   inset: 0;
   background:
      radial-gradient(ellipse at 18% -2%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.82) 30%, rgba(255, 255, 255, 0) 66%),
      radial-gradient(ellipse at 78% -10%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.68) 28%, rgba(255, 255, 255, 0) 62%),
      linear-gradient(180deg, #ffffff 0, #ffffff 124px, rgba(255, 255, 255, 0.94) 198px, rgba(255, 255, 255, 0.48) 318px, rgba(255, 255, 255, 0) 450px),
      linear-gradient(128deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0) 46%), linear-gradient(310deg, rgba(43, 126, 235, 0.05) 0%, rgba(43, 126, 235, 0) 46%);
}

.page-template-template-mobile-app .mobile-app-hero::after {
   right: -8%;
   bottom: -16%;
   width: 52%;
   height: 58%;
   background: radial-gradient(ellipse at center, rgba(43, 126, 235, 0.13) 0%, rgba(43, 126, 235, 0.05) 38%, rgba(43, 126, 235, 0) 70%);
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__inner {
   position: relative;
   display: grid;
   grid-template-columns: minmax(0, 1.14fr) minmax(520px, 0.86fr);
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: clamp(470px, 49vw, 640px);
   overflow: visible;
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__content {
   position: relative;
   z-index: 2;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: flex-start;
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   justify-content: flex-start;
   width: 100%;
   max-width: 900px;
   min-width: 0;
   padding: 76px clamp(18px, 1.8vw, 30px) 72px 0;
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__title {
   width: 100%;
   max-width: 850px;
   margin: 0 0 24px;
   color: #050716;
   font-weight: 400;
   font-size: clamp(56px, 3.35vw, 64px);
   line-height: 1.06;
   letter-spacing: -0.018em;
   word-break: normal;
   overflow-wrap: normal;
   text-wrap: balance;
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__title strong,
.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__title b,
.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__title em,
.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__title i {
   color: inherit;
   font-weight: inherit;
   font-style: inherit;
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__text {
   max-width: 520px;
   margin: 0;
   color: #687184;
   font-weight: 400;
   font-size: clamp(17px, 1.15vw, 20px);
   line-height: 1.58;
   letter-spacing: 0;
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__text p {
   margin: 0;
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__text p:not(:last-child) {
   margin-bottom: 12px;
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__actions {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 34px;
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__links.qr-download__links {
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -ms-flex-direction: row;
   flex-direction: row;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   gap: 14px;
   width: auto;
   max-width: 100%;
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__links .qr-download__button {
   -ms-flex-negative: 0;
   flex-shrink: 0;
   -webkit-filter: drop-shadow(0 14px 26px rgba(31, 51, 92, 0.1));
   filter: drop-shadow(0 14px 26px rgba(31, 51, 92, 0.1));
   -webkit-transition:
      opacity 0.2s ease,
      -webkit-filter 0.2s ease,
      -webkit-transform 0.2s ease;
   transition:
      opacity 0.2s ease,
      -webkit-filter 0.2s ease,
      -webkit-transform 0.2s ease;
   transition:
      filter 0.2s ease,
      opacity 0.2s ease,
      transform 0.2s ease;
   transition:
      filter 0.2s ease,
      opacity 0.2s ease,
      transform 0.2s ease,
      -webkit-filter 0.2s ease,
      -webkit-transform 0.2s ease;
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__links a.qr-download__button:hover,
.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__links a.qr-download__button:focus-visible {
   -webkit-filter: drop-shadow(0 16px 30px rgba(31, 51, 92, 0.14));
   filter: drop-shadow(0 16px 30px rgba(31, 51, 92, 0.14));
   -webkit-transform: translateY(-1px);
   transform: translateY(-1px);
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__links .qr-download__button:focus-visible {
   outline-color: rgba(43, 126, 235, 0.55);
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__visual {
   position: relative;
   z-index: 2;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: end;
   -ms-flex-align: end;
   align-items: flex-end;
   -webkit-box-pack: end;
   -ms-flex-pack: end;
   justify-content: flex-end;
   -ms-flex-item-align: stretch;
   align-self: stretch;
   width: 100%;
   min-width: 0;
   min-height: 100%;
   padding: clamp(8px, 1.6vw, 28px) 0 0;
   margin-left: 0;
   overflow: visible;
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__visual::before,
.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__visual::after {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__visual::before {
   inset: -8% -24% -10% -10%;
   z-index: 0;
   background: radial-gradient(
      ellipse 58% 88% at 34% 60%,
      rgba(43, 126, 235, 0.14) 0%,
      rgba(43, 126, 235, 0.075) 28%,
      rgba(43, 126, 235, 0.028) 48%,
      rgba(43, 126, 235, 0.01) 62%,
      rgba(43, 126, 235, 0) 74%
   );
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__visual::after {
   right: -8%;
   bottom: 2%;
   left: 18%;
   top: 42%;
   z-index: 0;
   background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.32) 34%, rgba(255, 255, 255, 0) 68%);
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__stage,
.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__art,
.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__picture {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: end;
   -ms-flex-align: end;
   align-items: flex-end;
   -webkit-box-pack: end;
   -ms-flex-pack: end;
   justify-content: flex-end;
   width: 100%;
   height: auto;
   min-width: 0;
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__stage {
   position: relative;
   z-index: 2;
   -ms-flex-item-align: stretch;
   align-self: stretch;
   width: min(118%, 800px);
   height: 100%;
   min-height: 0;
   -webkit-transform: translateX(-32px);
   transform: translateX(-32px);
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__art {
   position: absolute;
   right: 0;
   bottom: 0;
   z-index: 2;
   height: var(--mobile-app-hero-image-frame-height);
   -webkit-transform: translate(calc(6% - var(--mobile-app-hero-image-shift-x)), calc(var(--mobile-app-hero-bottom-padding) + var(--mobile-app-hero-image-bottom-crop)));
   transform: translate(calc(6% - var(--mobile-app-hero-image-shift-x)), calc(var(--mobile-app-hero-bottom-padding) + var(--mobile-app-hero-image-bottom-crop)));
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__picture {
   position: relative;
   z-index: 2;
   height: 100%;
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__image {
   display: block;
   width: auto;
   height: 100%;
   max-width: none;
   max-height: none;
   -o-object-fit: contain;
   object-fit: contain;
   -o-object-position: center bottom;
   object-position: center bottom;
   -webkit-filter: drop-shadow(0 28px 42px rgba(28, 55, 112, 0.18)) drop-shadow(0 8px 18px rgba(43, 126, 235, 0.12));
   filter: drop-shadow(0 28px 42px rgba(28, 55, 112, 0.18)) drop-shadow(0 8px 18px rgba(43, 126, 235, 0.12));
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-card {
   position: absolute;
   left: clamp(18px, 1.8vw, 34px);
   bottom: clamp(0px, calc(4.6vw - 40px), 22px);
   z-index: 4;
   width: clamp(330px, 28vw, 430px);
   max-width: calc(100% - 32px);
   padding: clamp(22px, 1.65vw, 26px);
   overflow: hidden;
   isolation: isolate;
   border: 1px solid rgba(255, 255, 255, 0.62);
   border-radius: 30px;
   background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(246, 248, 255, 0.74));
   -webkit-box-shadow:
      0 24px 70px rgba(22, 32, 72, 0.18),
      0 10px 28px rgba(71, 92, 170, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.72);
   box-shadow:
      0 24px 70px rgba(22, 32, 72, 0.18),
      0 10px 28px rgba(71, 92, 170, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.72);
   -webkit-backdrop-filter: blur(22px);
   backdrop-filter: blur(22px);
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-card::before,
.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-card::after {
   content: "";
   position: absolute;
   z-index: 0;
   pointer-events: none;
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-card::before {
   inset: 0;
   background: linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0) 42%);
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-card::after {
   right: -28%;
   bottom: -34%;
   width: 72%;
   aspect-ratio: 1;
   opacity: 0.78;
   background: radial-gradient(circle, rgba(109, 121, 255, 0.13), rgba(68, 135, 255, 0.06) 34%, rgba(68, 135, 255, 0) 62%);
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-card > * {
   position: relative;
   z-index: 1;
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-header {
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   justify-content: flex-start;
   min-width: 0;
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-text {
   min-width: 0;
   max-width: 100%;
   overflow-wrap: anywhere;
   color: #182033;
   font-size: clamp(22px, 1.72vw, 24px);
   line-height: 1.2;
   letter-spacing: -0.02em;
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-text > * {
   margin: 0;
   color: inherit;
   font: inherit;
   letter-spacing: inherit;
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-list {
   position: relative;
   display: grid;
   gap: 12px;
   margin: 18px 0 0;
   padding: 0;
   list-style: none;
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-list:first-child {
   margin-top: 0;
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-task {
   position: relative;
   z-index: 1;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   gap: 15px;
   min-width: 0;
   min-height: 60px;
   padding: 15px 18px 15px 16px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, 0.72);
   border-radius: 20px;
   background: linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(242, 247, 255, 0.58) 52%, rgba(247, 244, 255, 0.54));
   -webkit-box-shadow:
      0 10px 24px rgba(31, 50, 96, 0.07),
      0 4px 14px rgba(75, 112, 190, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.85);
   box-shadow:
      0 10px 24px rgba(31, 50, 96, 0.07),
      0 4px 14px rgba(75, 112, 190, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.85);
   -webkit-transition:
      border-color 0.2s ease,
      background 0.2s ease,
      -webkit-box-shadow 0.2s ease,
      -webkit-transform 0.2s ease;
   transition:
      border-color 0.2s ease,
      background 0.2s ease,
      -webkit-box-shadow 0.2s ease,
      -webkit-transform 0.2s ease;
   transition:
      border-color 0.2s ease,
      background 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.2s ease;
   transition:
      border-color 0.2s ease,
      background 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.2s ease,
      -webkit-box-shadow 0.2s ease,
      -webkit-transform 0.2s ease;
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-task::after {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   z-index: 0;
   width: 46%;
   background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(111, 130, 255, 0.07)));
   background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(111, 130, 255, 0.07));
   opacity: 0.68;
   pointer-events: none;
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-task-icon {
   position: relative;
   z-index: 1;
   display: block;
   width: 38px;
   aspect-ratio: 1;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, 0.82);
   border-radius: 14px;
   background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0) 44%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(235, 241, 255, 0.9) 42%, rgba(221, 230, 255, 0.78) 100%);
   -webkit-box-shadow:
      0 10px 22px rgba(52, 86, 165, 0.13),
      0 4px 12px rgba(117, 103, 255, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.92);
   box-shadow:
      0 10px 22px rgba(52, 86, 165, 0.13),
      0 4px 12px rgba(117, 103, 255, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-task-icon::before,
.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-task-icon::after {
   content: "";
   position: absolute;
   z-index: 1;
   display: block;
   border-radius: 999px;
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-task-icon::before {
   top: 10px;
   left: 10px;
   width: 17px;
   height: 4px;
   background: rgba(43, 126, 235, 0.58);
   -webkit-box-shadow: 0 8px 0 rgba(117, 103, 255, 0.5);
   box-shadow: 0 8px 0 rgba(117, 103, 255, 0.5);
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-task-icon::after {
   right: 9px;
   bottom: 9px;
   width: 9px;
   height: 9px;
   border-radius: 4px;
   background: linear-gradient(135deg, rgba(117, 103, 255, 0.76), rgba(43, 126, 235, 0.72));
   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-task-content {
   position: relative;
   z-index: 1;
   display: block;
   min-width: 0;
}

.page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-task-text {
   display: block;
   min-width: 0;
   color: #1d2433;
   font-size: clamp(15.5px, 1.16vw, 17px);
   line-height: 1.32;
   letter-spacing: -0.01em;
   overflow-wrap: anywhere;
}

@media (hover: hover) {
   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-task:hover {
      border-color: rgba(117, 103, 255, 0.18);
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(242, 248, 255, 0.66) 52%, rgba(248, 246, 255, 0.62));
      -webkit-box-shadow:
         0 14px 30px rgba(31, 50, 96, 0.1),
         0 6px 18px rgba(88, 105, 210, 0.08),
         inset 0 1px 0 rgba(255, 255, 255, 0.92);
      box-shadow:
         0 14px 30px rgba(31, 50, 96, 0.1),
         0 6px 18px rgba(88, 105, 210, 0.08),
         inset 0 1px 0 rgba(255, 255, 255, 0.92);
      -webkit-transform: translateY(-1px);
      transform: translateY(-1px);
   }
}

.page-template-template-mobile-app .mobile-app-hero.mobile-app-hero--no-image .mobile-app-hero__inner {
   grid-template-columns: 1fr;
   min-height: auto;
}

.page-template-template-mobile-app .mobile-app-hero.mobile-app-hero--no-image .mobile-app-hero__content {
   max-width: 880px;
}

@media (max-width: 1366px) {
   .page-template-template-mobile-app .mobile-app-hero {
      --mobile-app-hero-image-shift-x: 34px;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__inner {
      grid-template-columns: minmax(0, 1.12fr) minmax(420px, 0.88fr);
      min-height: clamp(500px, 50vw, 620px);
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__content {
      padding: 64px 20px 64px 0;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__title {
      max-width: 700px;
      font-size: clamp(44px, 4vw, 54px);
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__stage {
      width: min(114%, 720px);
      height: 100%;
      min-height: 0;
      -webkit-transform: translateX(22px);
      transform: translateX(22px);
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__art {
      -webkit-transform: translate(calc(4% - var(--mobile-app-hero-image-shift-x)), calc(var(--mobile-app-hero-bottom-padding) + var(--mobile-app-hero-image-bottom-crop)));
      transform: translate(calc(4% - var(--mobile-app-hero-image-shift-x)), calc(var(--mobile-app-hero-bottom-padding) + var(--mobile-app-hero-image-bottom-crop)));
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__image {
      height: 100%;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-card {
      left: 18px;
      width: 370px;
   }
}

@media (max-width: 1100px) {
   .page-template-template-mobile-app .mobile-app-hero {
      --mobile-app-hero-bottom-padding: 38px;
      --mobile-app-hero-image-bottom-crop: 20%;
      --mobile-app-hero-image-frame-height: calc(112% + var(--mobile-app-hero-bottom-padding));
      --mobile-app-hero-image-shift-x: 28px;
      padding: 0 0 var(--mobile-app-hero-bottom-padding);
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__inner {
      grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
      min-height: 500px;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__content {
      padding: 34px 16px 34px 0;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__title {
      max-width: 560px;
      margin-bottom: 22px;
      font-size: clamp(36px, 3.8vw, 39px);
      line-height: 1.06;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__text {
      font-size: 17px;
      line-height: 1.54;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__actions {
      margin-top: 28px;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__visual {
      padding: 12px 0 0;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__stage {
      width: min(112%, 500px);
      height: 100%;
      min-height: 0;
      -webkit-transform: translateX(14px);
      transform: translateX(14px);
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__art {
      -webkit-transform: translate(calc(6% - var(--mobile-app-hero-image-shift-x)), calc(var(--mobile-app-hero-bottom-padding) + var(--mobile-app-hero-image-bottom-crop)));
      transform: translate(calc(6% - var(--mobile-app-hero-image-shift-x)), calc(var(--mobile-app-hero-bottom-padding) + var(--mobile-app-hero-image-bottom-crop)));
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__image {
      height: 100%;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-card {
      left: 10px;
      bottom: 18px;
      width: clamp(258px, 28vw, 300px);
      max-width: calc(100% - 20px);
      padding: 14px;
      border-radius: 22px;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-text {
      font-size: clamp(18px, 1.9vw, 20px);
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-task {
      min-height: 48px;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 16px;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-task-icon {
      width: 32px;
      border-radius: 11px;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-task-icon::before {
      top: 8px;
      left: 8px;
      width: 14px;
      height: 3px;
      -webkit-box-shadow: 0 7px 0 rgba(117, 103, 255, 0.5);
      box-shadow: 0 7px 0 rgba(117, 103, 255, 0.5);
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-task-icon::after {
      right: 7px;
      bottom: 7px;
      width: 7px;
      height: 7px;
      border-radius: 3px;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-task-text {
      font-size: 14.5px;
      line-height: 1.28;
   }
}

@media (max-width: 960px) {
   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__links.qr-download__links {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
   }
}

@media (max-width: 900px) {
   .page-template-template-mobile-app .mobile-app-hero {
      --mobile-app-hero-bottom-padding: 32px;
      --mobile-app-hero-image-bottom-crop: 20%;
      min-height: auto;
      padding: 0 0 var(--mobile-app-hero-bottom-padding);
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__inner {
      grid-template-columns: 1fr;
      min-height: auto;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__content {
      max-width: 100%;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      padding: 28px 0 20px;
      text-align: center;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__title {
      max-width: 720px;
      margin-bottom: 18px;
      font-size: clamp(38px, 5vw, 44px);
      line-height: 1.06;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__text {
      font-size: 16px;
      line-height: 1.54;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__actions {
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      width: 100%;
      margin-top: 24px;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__links.qr-download__links {
      width: 100%;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__visual {
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      width: 100%;
      min-height: 0;
      padding: 12px 0 4px;
      overflow: visible;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__visual::before {
      inset: -10% -18% -8%;
      background: radial-gradient(ellipse 62% 88% at 38% 50%, rgba(43, 126, 235, 0.105) 0%, rgba(43, 126, 235, 0.052) 32%, rgba(43, 126, 235, 0.02) 52%, rgba(43, 126, 235, 0) 74%);
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__visual::after {
      inset: 44% 8% 0;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__stage {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      width: 100%;
      max-width: 560px;
      min-height: 0;
      height: auto;
      -webkit-transform: none;
      transform: none;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__art {
      position: relative;
      right: auto;
      bottom: auto;
      left: auto;
      width: 100%;
      height: clamp(280px, 46vw, 380px);
      -webkit-transform: none;
      transform: none;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__art,
   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__picture {
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__image {
      height: 100%;
      -o-object-position: center bottom;
      object-position: center bottom;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-card {
      position: relative;
      left: auto;
      bottom: auto;
      width: min(360px, 100%);
      max-width: 100%;
      margin: clamp(14px, 3vw, 20px) auto 0;
      padding: clamp(16px, 2.8vw, 20px);
   }
}

@media (max-width: 448px) {
   .page-template-template-mobile-app .mobile-app-hero {
      --mobile-app-hero-bottom-padding: 28px;
      --mobile-app-hero-image-bottom-crop: 20%;
      padding: 0 0 var(--mobile-app-hero-bottom-padding);
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__content {
      padding: 20px 0 16px;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__title {
      max-width: 100%;
      margin-bottom: 16px;
      font-size: clamp(30px, 8.2vw, 36px);
      line-height: 1.08;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__text {
      font-size: 15.5px;
      line-height: 1.55;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__actions {
      margin-top: 24px;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__links.qr-download__links {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      gap: 12px;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__visual {
      padding: 4px 12px;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__art {
      height: clamp(250px, 70vw, 310px);
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__image {
      height: 100%;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-card {
      width: min(336px, 100%);
      padding: 16px;
      border-radius: 24px;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-text {
      font-size: clamp(18px, 5vw, 21px);
      line-height: 1.14;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-list {
      gap: 10px;
      margin-top: 14px;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-task {
      min-height: 52px;
      gap: 11px;
      padding: 12px 14px;
      border-radius: 17px;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-task-icon {
      width: 33px;
      border-radius: 12px;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-task-icon::before {
      top: 9px;
      left: 8px;
      width: 15px;
      height: 3px;
      -webkit-box-shadow: 0 7px 0 rgba(117, 103, 255, 0.5);
      box-shadow: 0 7px 0 rgba(117, 103, 255, 0.5);
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-task-icon::after {
      right: 8px;
      bottom: 8px;
      width: 8px;
      height: 8px;
      border-radius: 3px;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-task-text {
      font-size: 15px;
      line-height: 1.3;
   }
}

@media (max-width: 390px) {
   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__content {
      padding: 18px 0 14px;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__title {
      font-size: 32px;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__text {
      font-size: 15px;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__visual {
      padding-inline: 10px;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__art {
      height: clamp(230px, 72vw, 280px);
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__image {
      height: 100%;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-card {
      width: min(310px, 100%);
      padding: 15px;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-task {
      min-height: 50px;
      gap: 10px;
      padding: 11px 13px;
      border-radius: 16px;
   }

   .page-template-template-mobile-app .mobile-app-hero .mobile-app-hero__preview-task-icon {
      width: 31px;
      border-radius: 11px;
   }
}

/* mobile-app-hero end */