* {
   box-sizing: border-box;
}

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

body {
   margin: 0;
   color: #fff;
   background: #06000f;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
   line-height: 1.6;
}

body.nav-open {
   overflow: hidden;
}

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

button,
input,
textarea {
   font: inherit;
}

button {
   color: inherit;
}

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

.container {
   width: min(1120px, calc(100% - 48px));
   margin: 0 auto;
}

.site-shell {
   min-height: 100vh;
   overflow: hidden;
   background:
      radial-gradient(circle at 72% 8%, rgba(99, 62, 255, .62), transparent 28%),
      radial-gradient(circle at 42% 18%, rgba(97, 20, 180, .46), transparent 30%),
      linear-gradient(180deg, #090015 0%, #030008 52%, #15002f 84%, #050008 100%);
   background-size: 120% 120%, 110% 110%, 100% 100%;
   animation: shellGlow 14s ease-in-out infinite alternate;
}

.site-header {
   position: fixed;
   inset: 0 0 auto;
   z-index: 20;
   background: linear-gradient(180deg, rgba(5, 0, 16, .9), rgba(5, 0, 16, .28));
   backdrop-filter: blur(14px);
   transform: translateY(-100%);
   animation: headerDrop .7s cubic-bezier(.22, 1, .36, 1) .12s forwards;
   transition: background .25s ease, box-shadow .25s ease;
}

.site-header.is-scrolled {
   background: rgba(5, 0, 16, .82);
   box-shadow: 0 10px 36px rgba(0, 0, 0, .24);
}

.site-header__inner {
   min-height: 64px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
}

.brand {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   min-width: max-content;
}

.brand__mark {
   width: 38px;
   height: 30px;
   border-radius: 7px;
   display: grid;
   place-items: center;
   color: #fff;
   font-size: 20px;
   font-weight: 900;
   letter-spacing: 0;
   background: linear-gradient(135deg, #ffffff 0%, #9bc4ff 44%, #8b3cff 100%);
   color: #080014;
}

.brand__text {
   display: grid;
   gap: 1px;
}

.brand__text strong {
   font-size: 18px;
   line-height: 1;
   letter-spacing: .04em;
}

.brand__text small {
   color: rgba(255, 255, 255, .55);
   font-size: 10px;
   line-height: 1;
   letter-spacing: .12em;
}

.site-nav {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 34px;
   color: rgba(255, 255, 255, .78);
   font-size: 14px;
}

.site-nav a,
.footer-links a {
   transition: color .2s ease;
}

.site-nav a:hover,
.footer-links a:hover {
   color: #fff;
}

.site-header__cta,
.btn-primary {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 36px;
   padding: 0 22px;
   border: 0;
   border-radius: 999px;
   color: #fff;
   font-size: 14px;
   font-weight: 700;
   cursor: pointer;
   background: linear-gradient(90deg, #f02ba9 0%, #754cff 58%, #1e9bff 100%);
   box-shadow: 0 0 28px rgba(116, 76, 255, .35);
   transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.site-header__cta:hover,
.btn-primary:hover {
   transform: translateY(-2px);
   filter: brightness(1.08);
   box-shadow: 0 12px 34px rgba(116, 76, 255, .42);
}

.nav-toggle {
   display: none;
   width: 42px;
   height: 42px;
   border: 1px solid rgba(255, 255, 255, .18);
   border-radius: 10px;
   background: rgba(255, 255, 255, .08);
   cursor: pointer;
}

.nav-toggle span {
   display: block;
   width: 18px;
   height: 2px;
   margin: 5px auto;
   border-radius: 999px;
   background: #fff;
}

.section-hero {
   position: relative;
   min-height: auto;
   padding: 128px 0 84px;
}

.hero__glow {
   position: absolute;
   inset: 0;
   pointer-events: none;
   background:
      linear-gradient(180deg, transparent 0 23%, rgba(0, 0, 0, .55) 42%, transparent 58%),
      repeating-radial-gradient(ellipse at 38% 6%, rgba(122, 92, 255, .38) 0 6px, transparent 8px 44px);
   opacity: .75;
   transform: rotate(-8deg) scale(1.16);
   animation: glowDrift 18s ease-in-out infinite alternate;
}

.hero__inner {
   position: relative;
   z-index: 1;
   text-align: center;
}

.hero__eyebrow {
   margin: 0 0 24px;
   color: rgba(255, 255, 255, .72);
   font-size: 14px;
}

.hero h1 {
   margin: 0;
   font-size: clamp(36px, 4.2vw, 54px);
   line-height: 1.3;
   font-weight: 800;
   letter-spacing: 0;
   text-shadow: 0 0 32px rgba(172, 143, 255, .28);
   animation: heroRise .85s cubic-bezier(.22, 1, .36, 1) .2s both;
}

.hero__summary {
   margin: 26px auto 0;
   max-width: 680px;
   color: rgba(255, 255, 255, .76);
   font-size: 17px;
   animation: heroRise .85s cubic-bezier(.22, 1, .36, 1) .34s both;
}

.solution-overview {
   width: min(920px, 100%);
   margin: 120px auto 0;
   animation: heroRise .9s cubic-bezier(.22, 1, .36, 1) .48s both;
}

.solution-overview h2,
.section-heading h2 {
   margin: 0;
   font-size: clamp(28px, 3.6vw, 44px);
   line-height: 1.2;
   font-weight: 800;
}

.solution-overview p,
.section-heading p {
   margin: 14px 0 0;
   color: rgba(255, 255, 255, .7);
   font-size: 15px;
}

.section-heading p span {
   color: #ff38c9;
}

.solution-tabs {
   display: inline-flex;
   gap: 12px;
   margin-top: 28px;
   padding: 5px;
   border-radius: 999px;
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .1);
}

.solution-tabs button {
   border: 0;
   border-radius: 999px;
   padding: 9px 22px;
   color: rgba(255, 255, 255, .78);
   background: transparent;
   cursor: pointer;
   white-space: nowrap;
   transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.solution-tabs button:hover {
   transform: translateY(-1px);
}

.solution-tabs .is-active {
   color: #fff;
   background: linear-gradient(90deg, #e72aa6, #2d8dff);
   box-shadow: 0 8px 24px rgba(90, 89, 255, .28);
}

.solution-grid {
   margin-top: 22px;
   display: grid;
   grid-template-columns: minmax(0, 1.55fr) minmax(250px, .8fr);
   gap: 18px;
   text-align: left;
   opacity: 0;
   transform: translateY(8px);
   transition: opacity .22s ease, transform .22s ease;
}

.solution-grid.is-ready {
   opacity: 1;
   transform: translateY(0);
}

.reveal-target {
   opacity: 0;
   transform: translateY(34px);
   transition: opacity .72s cubic-bezier(.22, 1, .36, 1), transform .72s cubic-bezier(.22, 1, .36, 1);
   transition-delay: var(--reveal-delay, 0ms);
   will-change: opacity, transform;
}

.reveal-target.reveal-left {
   transform: translateX(-38px);
}

.reveal-target.reveal-right {
   transform: translateX(38px);
}

.reveal-target.is-visible {
   opacity: 1;
   transform: translate(0, 0);
}

.solution-card {
   position: relative;
   overflow: hidden;
   min-height: 300px;
   border-radius: 7px;
   border: 1px solid rgba(255, 255, 255, .12);
   background: rgba(28, 17, 55, .86);
   box-shadow: 0 24px 70px rgba(0, 0, 0, .38);
   transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.solution-card:hover,
.case-card:hover,
.feature-item:hover,
.service-steps article:hover {
   transform: translateY(-6px);
   border-color: rgba(255, 255, 255, .24);
   box-shadow: 0 30px 80px rgba(0, 0, 0, .42);
}

.solution-card--image img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: .52;
   transition: transform .55s ease, opacity .55s ease;
}

.solution-card--image:hover img,
.case-card:hover img {
   transform: scale(1.055);
   opacity: .66;
}

.solution-card--image::after,
.case-card::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(5, 0, 18, .12), rgba(5, 0, 18, .82));
}

.solution-card__content {
   position: relative;
   z-index: 1;
   min-height: 300px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: space-between;
   padding: 26px;
}

.solution-card h3 {
   margin: 0;
   font-size: 22px;
   line-height: 1.25;
}

.solution-card p {
   margin: 14px 0 0;
   max-width: 530px;
   color: rgba(255, 255, 255, .78);
   font-size: 14px;
}

.solution-card__content a {
   display: inline-flex;
   padding: 9px 20px;
   border-radius: 999px;
   color: #171024;
   font-size: 13px;
   font-weight: 800;
   background: #fff;
}

.solution-card--plain {
   padding: 30px;
}

.solution-card--plain ul {
   list-style: none;
   margin: 24px 0 34px;
   padding: 0;
   display: grid;
   gap: 16px;
   color: rgba(255, 255, 255, .8);
   font-size: 14px;
}

.solution-card--plain li {
   position: relative;
   padding-left: 18px;
}

.solution-card--plain li::before {
   content: "";
   position: absolute;
   left: 0;
   top: .7em;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #4c8dff;
}

.partners span {
   display: block;
   margin-bottom: 12px;
   color: rgba(255, 255, 255, .72);
   font-size: 14px;
}

.partners__logos {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
   padding: 10px;
   border-radius: 8px;
   background: #fff;
}

.partners__logos img {
   height: 26px;
   width: 100%;
   object-fit: contain;
}

.section {
   padding: 96px 0;
}

.section-heading {
   text-align: center;
}

.tech__grid {
   margin-top: 64px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 62px 86px;
}

.feature-item {
   min-width: 0;
   border-radius: 8px;
   transition: transform .28s ease;
}

.feature-item__icon,
.service-steps span {
   display: grid;
   place-items: center;
   width: 42px;
   height: 42px;
   margin-bottom: 18px;
   border-radius: 50%;
   color: #fff;
   font-size: 14px;
   font-weight: 800;
   background: linear-gradient(135deg, #ea2fac, #6c4cff 55%, #2397ff);
   box-shadow: 0 0 28px rgba(140, 69, 255, .46);
   animation: iconPulse 3.2s ease-in-out infinite;
}

.feature-item h3,
.service-steps h3 {
   margin: 0 0 10px;
   font-size: 18px;
}

.feature-item p,
.service-steps p,
.case-card p,
.contact-info p,
.site-footer p,
.footer-links a {
   margin: 0;
   color: rgba(255, 255, 255, .7);
   font-size: 14px;
}

.case-carousel {
   margin-top: 62px;
}

.case-viewport {
   overflow-x: auto;
   overflow-y: visible;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   scrollbar-width: none;
   border-radius: 8px;
}

.case-viewport::-webkit-scrollbar {
   display: none;
}

.case-track {
   display: flex;
   align-items: flex-end;
   gap: 18px;
   width: 100%;
   padding: 34px 42px 30px;
}

.case-card {
   position: relative;
   flex: 1 1 0;
   min-width: 0;
   overflow: hidden;
   border-radius: 7px;
   border: 1px solid rgba(255, 255, 255, .12);
   min-height: 250px;
   scroll-snap-align: center;
   background: rgba(255, 255, 255, .06);
   box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
   opacity: .72;
   cursor: pointer;
   will-change: transform, flex-basis, min-height, opacity;
   transition: flex .56s cubic-bezier(.22, 1, .36, 1), min-height .56s cubic-bezier(.22, 1, .36, 1), transform .56s cubic-bezier(.22, 1, .36, 1), box-shadow .32s ease, border-color .32s ease, opacity .36s ease;
}

.case-card.is-prev {
   order: 1;
}

.case-card.is-active {
   order: 2;
}

.case-card.is-next {
   order: 3;
}

.case-card img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .72s cubic-bezier(.22, 1, .36, 1), opacity .42s ease;
}

.case-card > div {
   position: absolute;
   inset: auto 0 0;
   z-index: 1;
   padding: 24px;
}

.case-card span {
   display: inline-flex;
   max-height: 0;
   margin-bottom: 0;
   padding: 4px 10px;
   border-radius: 999px;
   color: #fff;
   font-size: 12px;
   font-weight: 700;
   background: rgba(255, 255, 255, .16);
   backdrop-filter: blur(8px);
   opacity: 0;
   overflow: hidden;
   transform: translateY(8px);
   transition: max-height .34s ease, margin .34s ease, opacity .32s ease .08s, transform .34s ease .08s;
}

.case-card h3 {
   margin: 0 0 10px;
   font-size: 21px;
   line-height: 1.25;
}

.case-card.is-active {
   flex: 1.36 1 0;
   min-height: 500px;
   opacity: 1;
}

.case-card.is-active:hover {
   transform: translateY(-6px);
}

.case-card.is-active span {
   max-height: 32px;
   margin-bottom: 12px;
   opacity: 1;
   transform: translateY(0);
}

.case-card p,
.case-card .case-metrics {
   max-height: 0;
   margin-top: 0;
   opacity: 0;
   overflow: hidden;
   transform: translateY(12px);
   transition: max-height .44s ease, opacity .36s ease, transform .38s ease, margin .36s ease;
}

.case-card.is-active p,
.case-card.is-active .case-metrics {
   max-height: 220px;
   opacity: 1;
   transform: translateY(0);
}

.case-card.is-active .case-metrics {
   margin-top: 26px;
}

.case-metrics {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px;
   margin: 0;
}

.case-metrics div {
   min-width: 0;
}

.case-metrics dt {
   color: #ff6b31;
   font-size: 22px;
   font-weight: 900;
}

.case-metrics dd {
   margin: 2px 0 0;
   color: rgba(255, 255, 255, .65);
   font-size: 12px;
}

.section-action {
   margin-top: 34px;
   text-align: center;
}

.service-steps {
   margin-top: 62px;
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 28px;
   text-align: center;
}

.service-steps article {
   min-width: 0;
   padding: 6px 4px;
   border-radius: 8px;
   transition: transform .28s ease;
}

.service-steps span {
   margin-inline: auto;
   border-radius: 10px;
   font-size: 20px;
}

.news-list {
   margin-top: 46px;
   display: grid;
}

.news-list a {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   min-height: 64px;
   border-bottom: 1px solid rgba(223, 46, 255, .45);
   color: rgba(255, 255, 255, .9);
   transition: padding-left .2s ease, color .2s ease, border-color .2s ease;
}

.news-list a:hover {
   padding-left: 10px;
   color: #fff;
   border-color: rgba(45, 141, 255, .72);
}

.news-list i {
   width: 12px;
   height: 12px;
   border-top: 2px solid rgba(255, 255, 255, .6);
   border-right: 2px solid rgba(255, 255, 255, .6);
   transform: rotate(45deg);
   flex: 0 0 auto;
   transition: transform .2s ease, border-color .2s ease;
}

.news-list a:hover i {
   transform: translateX(5px) rotate(45deg);
   border-color: #fff;
}

.contact {
   padding-bottom: 120px;
   background: radial-gradient(circle at 50% 100%, rgba(107, 50, 255, .62), transparent 48%);
}

.contact__grid {
   margin-top: 62px;
   display: grid;
   grid-template-columns: .85fr 1.15fr;
   gap: 80px;
   align-items: start;
}

.contact-info h3 {
   margin: 0 0 20px;
   font-size: 20px;
}

.contact-info p + p {
   margin-top: 10px;
}

.qr-box {
   margin-top: 44px;
}

.qr-box > span {
   display: block;
   margin-bottom: 14px;
   color: rgba(255, 255, 255, .86);
   font-size: 14px;
}

.qr-box > div {
   width: 126px;
   height: 126px;
   padding: 16px;
   border-radius: 6px;
   background: #fff;
}

.qr-box > div span {
   display: block;
   width: 100%;
   height: 100%;
   border-radius: 4px;
   background:
      linear-gradient(90deg, #1997ff 30%, transparent 30% 42%, #1997ff 42% 58%, transparent 58% 70%, #1997ff 70%) 0 0 / 36px 36px,
      linear-gradient(#1997ff 30%, transparent 30% 42%, #1997ff 42% 58%, transparent 58% 70%, #1997ff 70%) 0 0 / 36px 36px;
   opacity: .72;
}

.consult-form {
   display: grid;
   gap: 14px;
   padding: 34px;
   border-radius: 7px;
   border: 1px solid rgba(255, 255, 255, .22);
   background: rgba(255, 255, 255, .38);
   backdrop-filter: blur(16px);
}

.consult-form input,
.consult-form textarea {
   width: 100%;
   border: 0;
   border-radius: 5px;
   padding: 14px 16px;
   color: #21162d;
   background: #fff;
   outline: none;
   transition: transform .2s ease, box-shadow .2s ease;
}

.consult-form input:focus,
.consult-form textarea:focus {
   transform: translateY(-1px);
   box-shadow: 0 0 0 3px rgba(117, 76, 255, .24);
}

@keyframes headerDrop {
   to {
      transform: translateY(0);
   }
}

@keyframes shellGlow {
   0% {
      background-position: 0% 0%, 100% 0%, 0 0;
   }

   100% {
      background-position: 12% 8%, 48% 12%, 0 0;
   }
}

@keyframes glowDrift {
   0% {
      transform: rotate(-8deg) scale(1.16) translate3d(-18px, -10px, 0);
   }

   100% {
      transform: rotate(-3deg) scale(1.24) translate3d(20px, 18px, 0);
   }
}

@keyframes heroRise {
   from {
      opacity: 0;
      transform: translateY(30px);
      filter: blur(8px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
   }
}

@keyframes iconPulse {
   0%, 100% {
      box-shadow: 0 0 22px rgba(140, 69, 255, .34);
   }

   50% {
      box-shadow: 0 0 34px rgba(35, 151, 255, .5);
   }
}

.consult-form textarea {
   resize: vertical;
}

.consult-form .btn-primary {
   justify-self: start;
   margin-top: 8px;
}

.form-status {
   min-height: 20px;
   color: #fff;
   font-size: 14px;
   opacity: 0;
}

.form-status.is-visible {
   opacity: 1;
}

.final-cta {
   padding: 72px 0;
   background:
      linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)),
      radial-gradient(ellipse at 80% 70%, rgba(62, 96, 255, .38), transparent 46%),
      #160826;
}

.final-cta__inner {
   display: grid;
   justify-items: center;
   gap: 30px;
   text-align: center;
}

.final-cta h2 {
   margin: 0;
   font-size: clamp(26px, 4vw, 42px);
   line-height: 1.3;
}

.site-footer {
   padding: 54px 0 28px;
   background: #050009;
}

.site-footer__inner {
   display: grid;
   grid-template-columns: 1fr 1.5fr;
   gap: 80px;
}

.site-footer__brand p {
   max-width: 330px;
   margin-top: 22px;
}

.footer-links {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 38px;
}

.footer-links h3 {
   margin: 0 0 18px;
   font-size: 15px;
}

.footer-links a {
   display: block;
   margin-top: 10px;
}

.site-footer__copyright {
   margin-top: 48px;
   padding-top: 22px;
   border-top: 1px solid rgba(255, 255, 255, .09);
   color: rgba(255, 255, 255, .45);
   text-align: center;
   font-size: 12px;
}

@media (max-width: 1024px) {
   .container {
      width: min(920px, calc(100% - 40px));
   }

   .site-nav {
      gap: 18px;
      font-size: 13px;
   }

   .section-hero {
      min-height: auto;
      padding: 132px 0 82px;
   }

   .solution-overview {
      margin-top: 96px;
   }

   .solution-grid {
      grid-template-columns: 1fr;
      max-width: 760px;
      margin-inline: auto;
   }

   .tech__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 42px;
   }

   .case-track {
      padding-inline: 32px;
   }

   .case-card {
      min-height: 230px;
   }

   .case-card.is-active {
      min-height: 460px;
   }

   .service-steps {
      grid-template-columns: repeat(3, 1fr);
      gap: 42px 28px;
   }

   .contact__grid {
      grid-template-columns: 1fr;
      gap: 42px;
   }
}

@media (max-width: 760px) {
   .container {
      width: calc(100% - 32px);
   }

   .site-header__inner {
      min-height: 58px;
   }

   .site-header__cta {
      display: none;
   }

   .nav-toggle {
      display: block;
   }

   .site-nav {
      position: fixed;
      top: 58px;
      right: 16px;
      left: 16px;
      display: grid;
      gap: 0;
      padding: 14px;
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 12px;
      background: rgba(13, 5, 28, .96);
      box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
      transform: translateY(-18px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: .2s ease;
   }

   .nav-open .site-nav {
      transform: translateY(0);
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
   }

   .site-nav a {
      padding: 13px 10px;
      border-radius: 8px;
   }

   .site-nav a:hover {
      background: rgba(255, 255, 255, .08);
   }

   .brand__mark {
      width: 34px;
      height: 28px;
   }

   .brand__text strong {
      font-size: 16px;
   }

   .section-hero {
      padding: 112px 0 64px;
   }

   .hero__glow {
      transform: rotate(-10deg) scale(1.4);
      opacity: .55;
   }

   .hero__eyebrow {
      margin-bottom: 16px;
      font-size: 12px;
   }

   .hero h1 {
      font-size: clamp(30px, 10vw, 42px);
   }

   .hero__summary {
      font-size: 15px;
   }

   .solution-overview {
      margin-top: 70px;
   }

   .solution-tabs {
      width: 100%;
      display: flex;
      overflow-x: auto;
      gap: 6px;
      scrollbar-width: none;
   }

   .solution-tabs::-webkit-scrollbar {
      display: none;
   }

   .solution-tabs button {
      padding: 9px 8px;
      font-size: 12px;
      flex: 1 0 96px;
   }

   .solution-grid,
   .tech__grid,
   .service-steps,
   .site-footer__inner,
   .footer-links {
      grid-template-columns: 1fr;
   }

   .case-track {
      justify-content: center;
      gap: 0;
      width: 100%;
      min-width: 0;
      padding: 10px 0 22px;
   }

   .case-viewport {
      overflow-x: hidden;
      scroll-snap-type: none;
      scroll-behavior: auto;
      touch-action: pan-y;
   }

   .case-card {
      display: none;
      flex: 0 0 100%;
      flex-basis: 100%;
      min-height: 210px;
      scroll-snap-align: none;
      will-change: transform, opacity;
      transition: transform .28s ease, opacity .24s ease, box-shadow .24s ease, border-color .24s ease;
   }

   .case-card.is-prev {
      order: 1;
   }

   .case-card.is-active {
      order: 2;
   }

   .case-card.is-next {
      order: 3;
   }

   .case-card.is-active {
      display: block;
      flex: 0 0 100%;
      flex-basis: 100%;
      min-height: 390px;
   }

   .case-card span,
   .case-card p,
   .case-card .case-metrics {
      transition: opacity .22s ease, transform .24s ease;
   }

   .case-card.is-active p,
   .case-card.is-active .case-metrics {
      transition-delay: .04s;
   }

   .solution-card,
   .solution-card__content {
      min-height: 260px;
   }

   .solution-card__content,
   .solution-card--plain,
   .consult-form {
      padding: 22px;
   }

   .section {
      padding: 72px 0;
   }

   .tech__grid,
   .case-carousel,
   .service-steps {
      margin-top: 42px;
   }

   .case-card > div {
      padding: 22px;
   }

   .case-card h3 {
      font-size: 19px;
   }

   .case-card p {
      font-size: 13px;
   }

   .case-metrics {
      gap: 8px;
   }

   .case-metrics dt {
      font-size: 18px;
   }

   .service-steps article,
   .feature-item {
      text-align: left;
   }

   .service-steps span {
      margin-inline: 0;
   }

   .news-list a {
      min-height: 58px;
      font-size: 14px;
   }

   .contact {
      padding-bottom: 82px;
   }

   .final-cta {
      padding: 54px 0;
   }

   .site-footer__inner,
   .footer-links {
      gap: 32px;
   }
}

@media (max-width: 420px) {
   .container {
      width: calc(100% - 24px);
   }

   .hero h1 {
      font-size: clamp(28px, 9vw, 34px);
   }

   .hero__summary,
   .solution-overview p {
      font-size: 14px;
   }

   .partners__logos {
      grid-template-columns: 1fr;
   }

   .case-track {
      gap: 0;
      padding-inline: 0;
   }

   .case-card {
      flex: 0 0 100%;
      flex-basis: 100%;
      min-height: 200px;
   }

   .case-card.is-active {
      flex: 0 0 100%;
      flex-basis: 100%;
      min-height: 350px;
   }

   .case-card > div {
      padding: 18px;
   }

   .case-card h3 {
      font-size: 17px;
   }

   .case-card p {
      font-size: 12px;
   }

   .case-metrics {
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
   }

   .case-metrics dt {
      font-size: 16px;
   }

   .case-metrics dd {
      font-size: 11px;
   }
}

@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: .01ms !important;
   }

   .site-header,
   .hero h1,
   .hero__summary,
   .solution-overview,
   .reveal-target {
      opacity: 1;
      transform: none;
      filter: none;
   }
}