:root {
  --white: #ffffff;
  --back: #f4f5f6;
  --agray: #cfcfcf;
  --orange: #f09134;
  --blue: #3c89f4;
  --back-blue: #12233c;
  --violet: #0a0445;
  --textblack: #1d1d1b;
  --textblack2: #7c7d7e;
  --text3: #696a6c;
  --asecondtext: #5c6175;
  --amaintext: #161827;

  --f-figtree: "Figtree", sans-serif;
  --f-metro: "Metrophobic", sans-serif;
  --f-lora: "Lora", serif;
  --f-pen: "Nanum Pen Script", cursive;
  --f-geist: "Geist", sans-serif;

  --glass-border: 1px solid rgba(255, 255, 255, 0.18);

  /* Fluid layout: 60px gutters at 1440, content grows to --content */
  --gutter: clamp(16px, 4.17vw, 60px);
  --content: 1600px;
  --section-gap: clamp(48px, 4.9vw, 70px);
  --round-bottom: clamp(40px, 6.95vw, 100px);
  --overlap: 132px;

  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--back);
  color: var(--textblack);
  font-family: var(--f-figtree);
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}

p,
h1,
h2,
h3,
h4 {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font: inherit;
}

img {
  display: block;
  max-width: none;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

/* Layout ------------------------------------------------------------- */

.page {
  width: 100%;
  overflow-x: clip;
}

.main {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  background: var(--back);
}

.main > section,
.main > footer {
  position: relative;
  z-index: 1;
}

.top-block {
  display: flex;
  flex-direction: column;
}

.top-block > * + * {
  margin-top: calc(var(--overlap) * -1);
}

.wrap {
  width: 100%;
  max-width: calc(var(--content) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Shared ------------------------------------------------------------- */

.h-section {
  font-family: var(--f-figtree);
  font-weight: 600;
  font-size: clamp(32px, 3.48vw, 50px);
  white-space: nowrap;
}

.h-section--white {
  color: var(--white);
}

.h-section--blue {
  color: var(--blue);
}

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-inline: var(--gutter);
  text-align: center;
}

.subline {
  width: 100%;
  max-width: 894px;
  font-family: var(--f-metro);
  font-size: 20px;
  line-height: 25px;
  text-align: center;
  color: var(--text3);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 30px;
  font-family: var(--f-figtree);
  font-weight: 500;
  white-space: nowrap;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background-color 0.2s ease, filter 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 10px 24px -10px rgba(60, 137, 244, 0.7);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  height: 56px;
  width: 302px;
  max-width: 100%;
  background: var(--blue);
  color: var(--white);
  font-size: 20px;
}

.btn--sm {
  height: 40px;
  width: 248px;
  max-width: 100%;
  background: var(--blue);
  color: var(--white);
  font-size: 16px;
}

.btn--outline {
  height: 40px;
  width: 300px;
  max-width: 100%;
  border: 1px solid var(--textblack2);
  color: var(--textblack2);
  font-size: 16px;
}

.btn--outline:hover {
  background: var(--textblack);
  border-color: var(--textblack);
  color: var(--white);
  filter: none;
  box-shadow: none;
}

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 30px;
  font-family: var(--f-metro);
  font-size: 12px;
  color: var(--white);
  white-space: nowrap;
}

.arrow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.1);
  transition: background-color 0.2s ease, transform 0.25s var(--ease-out);
}

.arrow-btn--second {
  background: rgba(255, 255, 255, 0.28);
}

.arrow-btn--second:hover {
  background: rgba(255, 255, 255, 0.45);
  transform: scale(1.08);
}

.arrow-btn--left img {
  transform: rotate(180deg);
}

/* Tabs with sliding indicator */

.tabs {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 16px 20px;
  border-radius: 30px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

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

.tabs__ind {
  position: absolute;
  top: 16px;
  left: 0;
  height: calc(100% - 32px);
  width: 0;
  border-radius: 30px;
  background: var(--orange);
  transition: transform 0.45s var(--ease), width 0.45s var(--ease);
  pointer-events: none;
}

.tab {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 12px 30px;
  border-radius: 10px;
  font-family: var(--f-figtree);
  font-weight: 500;
  font-size: 20px;
  text-align: center;
  white-space: nowrap;
  transition: color 0.3s ease, opacity 0.2s ease;
}

.tab:hover {
  opacity: 0.8;
}

.tab.is-active {
  color: var(--white);
  opacity: 1;
}

/* Without JS the active tab paints its own pill */
html:not(.js) .tab.is-active {
  background: var(--orange);
  border-radius: 30px;
}

/* Header ------------------------------------------------------------- */

.header-wrap {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: var(--content);
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 82px;
  padding: 30px 40px;
  border-radius: 50px;
  background: rgba(250, 252, 253, 0.2);
}

.nav-row {
  display: flex;
  align-items: center;
  gap: 29px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav a {
  position: relative;
  padding: 6px 16px;
  font-family: var(--f-figtree);
  font-size: 16px;
  color: var(--white);
  white-space: nowrap;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.nav a:hover::after {
  transform: scaleX(1);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.tg-btn {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.2);
  transition: background-color 0.2s ease, transform 0.25s var(--ease-out);
}

a.tg-btn:hover {
  background: rgba(255, 255, 255, 0.32);
  transform: scale(1.06);
}

.tg-btn img {
  position: absolute;
  left: 5.75px;
  top: 7.5px;
}

.contacts-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 8px 20px;
  border-radius: 30px;
  background: rgba(240, 145, 52, 0.2);
  font-size: 16px;
  color: var(--white);
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.contacts-btn:hover {
  background: rgba(240, 145, 52, 0.4);
}

.burger {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.2);
}

.burger span {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--white);
  transition: transform 0.35s var(--ease), opacity 0.2s ease;
}

.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 19px; }
.burger span:nth-child(3) { top: 24px; }

.header-wrap.is-open .burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.header-wrap.is-open .burger span:nth-child(2) { opacity: 0; }
.header-wrap.is-open .burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.mobile-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 30px;
  border: var(--glass-border);
  background: rgba(16, 12, 52, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px) scale(0.98);
  transform-origin: top center;
  transition: opacity 0.3s ease, transform 0.4s var(--ease), visibility 0s linear 0.4s;
}

.header-wrap.is-open .mobile-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.3s ease, transform 0.4s var(--ease), visibility 0s;
}

.mobile-menu a {
  padding: 14px 16px;
  border-radius: 16px;
  font-size: 18px;
  color: var(--white);
  opacity: 0;
  transform: translateY(-6px);
  transition: background-color 0.2s ease, opacity 0.3s ease, transform 0.35s var(--ease-out);
}

.header-wrap.is-open .mobile-menu a {
  opacity: 1;
  transform: none;
}

.header-wrap.is-open .mobile-menu a:nth-child(2) { transition-delay: 0.03s; }
.header-wrap.is-open .mobile-menu a:nth-child(3) { transition-delay: 0.06s; }
.header-wrap.is-open .mobile-menu a:nth-child(4) { transition-delay: 0.09s; }
.header-wrap.is-open .mobile-menu a:nth-child(5) { transition-delay: 0.12s; }
.header-wrap.is-open .mobile-menu a:nth-child(6) { transition-delay: 0.15s; }
.header-wrap.is-open .mobile-menu a:nth-child(7) { transition-delay: 0.18s; }
.header-wrap.is-open .mobile-menu a:nth-child(8) { transition-delay: 0.21s; }

.mobile-menu a:hover {
  background: rgba(255, 255, 255, 0.08);
}

.mobile-menu__contacts {
  margin-top: 8px;
  background: rgba(240, 145, 52, 0.2);
  text-align: center;
}

/* Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  z-index: 4;
  min-height: 822px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 65px;
  padding: 40px var(--gutter) 88px;
  filter: drop-shadow(0 8px 72.5px rgba(243, 169, 62, 0.2));
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.offer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--content);
  padding: 0 30px;
}

.offer__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
  width: 100%;
  margin-bottom: -6px;
}

.offer__title-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 100%;
}

.offer__title {
  display: flex;
  align-items: center;
  gap: 20px;
}

.offer__ai {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 136px;
  height: 115px;
  padding: 30px;
  border: 1px solid rgba(240, 145, 52, 0.86);
  border-radius: 20px;
  background: rgba(240, 145, 52, 0.23);
}

.offer__ai span {
  font-weight: 500;
  font-size: 76px;
  line-height: 53px;
  color: var(--back);
}

.offer__lab {
  font-weight: 600;
  font-size: 50px;
  line-height: 55px;
  color: var(--back);
  white-space: nowrap;
}

@supports (text-box: trim-both cap alphabetic) {
  .offer__ai span {
    line-height: normal;
    text-box: trim-both cap alphabetic;
  }

  .offer__lab {
    text-box: trim-both cap alphabetic;
  }
}

.offer__sub {
  width: 390px;
  max-width: 100%;
  font-family: var(--f-metro);
  font-size: 20px;
  line-height: 25px;
  color: var(--agray);
}

.offer__note-row {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.offer__note {
  width: 333px;
  max-width: 100%;
  font-family: var(--f-lora);
  font-size: 16px;
  line-height: 20px;
  color: var(--agray);
}

/* Hero entrance */

.js .hero .header-wrap,
.js .hero .offer__title-block,
.js .hero .offer__main > .btn,
.js .hero .offer__note,
.js .hero .hero-cases {
  animation: rise 0.9s var(--ease-out) both;
}

.js .hero .offer__title-block { animation-delay: 0.1s; }
.js .hero .offer__main > .btn { animation-delay: 0.22s; }
.js .hero .offer__note { animation-delay: 0.32s; }
.js .hero .hero-cases { animation-delay: 0.42s; }

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Hero cases carousel */

.hero-cases {
  position: relative;
  width: 100%;
  max-width: var(--content);
}

.hero-cases__track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  height: 135px;
}

.hcase {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 12px;
  width: 300px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s var(--ease-out);
}

.hcase:hover {
  opacity: 0.75;
  transform: translateY(-3px);
}

.hcase__top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hcase__problem {
  flex: 1 0 0;
  min-width: 1px;
  font-family: var(--f-metro);
  font-size: 10px;
  color: var(--white);
}

.hcase__tag {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 30px;
  background: var(--textblack);
  font-family: var(--f-metro);
  font-size: 8px;
  color: var(--white);
  white-space: nowrap;
}

.hcase__solution {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(207, 114, 23, 0.5);
}

.hcase__solution p {
  flex: 1 0 0;
  min-width: 1px;
  font-family: var(--f-lora);
  font-size: 12px;
  line-height: 15px;
  color: var(--white);
}

.hcase__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.1);
  transition: transform 0.25s var(--ease-out);
}

.hcase.is-active {
  width: 500px;
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  border: var(--glass-border);
  opacity: 1;
  cursor: default;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform: none;
}

.hcase.is-active:hover .hcase__arrow {
  transform: translateX(3px);
}

.hcase.is-active .hcase__top { gap: 16px; }
.hcase.is-active .hcase__problem { font-size: 14px; line-height: 17px; }
.hcase.is-active .hcase__tag { padding: 6px 12px; font-size: 12px; }
.hcase.is-active .hcase__solution { gap: 20px; padding: 10px 20px; }
.hcase.is-active .hcase__solution p { font-size: 16px; line-height: 20px; }
.hcase.is-active .hcase__arrow { width: 36px; height: 36px; }

.hero-cases__track.slide-next > * { animation: slide-next 0.55s var(--ease) both; }
.hero-cases__track.slide-prev > * { animation: slide-prev 0.55s var(--ease) both; }

@keyframes slide-next {
  from { transform: translateX(120px); opacity: 0; }
  to { transform: none; }
}

@keyframes slide-prev {
  from { transform: translateX(-120px); opacity: 0; }
  to { transform: none; }
}

.hero-cases__nav {
  position: absolute;
  top: calc(50% + 0.5px);
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 36px;
  pointer-events: none;
}

.hero-cases__nav .arrow-btn {
  pointer-events: auto;
}

/* Clients ------------------------------------------------------------ */

.clients {
  position: relative;
  z-index: 3;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: var(--overlap) 0 60px;
  border-radius: 0 0 var(--round-bottom) var(--round-bottom);
  background: linear-gradient(to bottom, #030214 66.711%, #0b044a);
  filter: drop-shadow(0 4px 71px rgba(250, 252, 253, 0.25));
}

.clients__inner {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.clients__list {
  display: flex;
  gap: 30px;
  min-height: 566px;
}

.client {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(18, 35, 60, 0.2);
  flex: 0 0 100px;
  min-width: 0;
  transition: flex 0.7s var(--ease), background-color 0.4s ease;
}

.client:not(.is-active) {
  cursor: pointer;
}

.client:not(.is-active):hover {
  background: rgba(18, 35, 60, 0.5);
}

.client.is-active {
  flex: 1 1 0;
  background: rgba(18, 35, 60, 0.38);
}

.client__mini {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  transition: opacity 0.3s ease;
}

.client__mini-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 30px;
}

.client.is-active .client__mini {
  opacity: 0;
  pointer-events: none;
}

.client__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 30px;
  background: var(--orange);
}

.client__mini-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.client__mini-title {
  width: 17px;
  font-weight: 600;
  font-size: 24px;
  color: var(--white);
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.client__expand {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 111px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(18, 35, 60, 0.3);
  transition: transform 0.4s var(--ease), background-color 0.2s ease;
}

.client__expand img {
  transform: rotate(45deg);
}

.client:not(.is-active):hover .client__expand {
  background: rgba(60, 137, 244, 0.25);
  transform: scale(1.08);
}

.client__full {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 800px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(16px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.client.is-active .client__full {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.5s ease 0.3s, transform 0.6s var(--ease-out) 0.3s, visibility 0s;
}

.client__full-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px;
}

.client__top {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
}

.client__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 0 0;
  min-width: 1px;
}

.client__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.client__title {
  font-weight: 600;
  font-size: 32px;
  color: var(--white);
  white-space: nowrap;
}

.client__tagline {
  align-self: flex-start;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(92, 97, 117, 0.23);
  font-family: var(--f-metro);
  font-size: 14px;
  line-height: 17px;
  color: var(--white);
}

.client__p {
  font-family: var(--f-metro);
  font-size: 16px;
  line-height: 20px;
  color: var(--back);
}

.client__services {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  align-self: stretch;
  flex-shrink: 0;
  width: 323px;
  padding: 20px;
  border: 1px solid var(--back-blue);
  border-radius: 20px;
}

.client__services-title {
  font-weight: 600;
  font-size: 16px;
  color: var(--white);
  white-space: nowrap;
}

.service-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--back-blue);
  font-weight: 500;
  font-size: 14px;
  color: var(--white);
  transition: color 0.2s ease;
}

.service-line:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.service-line img {
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-out);
}

.service-line:hover img {
  transform: translateX(5px);
}

.client__cases {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding: 16px;
  border-radius: 20px;
  background: rgba(22, 24, 39, 0.79);
}

.client__cases-title {
  font-weight: 500;
  font-size: 16px;
  color: var(--white);
}

.client__cases-list {
  display: flex;
  align-items: stretch;
  gap: 16px;
}

.mini-case {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 0 0;
  min-width: 1px;
  min-height: 124px;
  padding: 20px;
  border-radius: 16px;
  background: rgba(18, 35, 60, 0.74);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: background-color 0.25s ease, transform 0.3s var(--ease-out);
}

.mini-case:hover {
  background: rgba(30, 55, 92, 0.85);
  transform: translateY(-3px);
}

.client.is-active .mini-case {
  animation: rise 0.6s var(--ease-out) both;
}

.client.is-active .mini-case:nth-child(1) { animation-delay: 0.45s; }
.client.is-active .mini-case:nth-child(2) { animation-delay: 0.53s; }
.client.is-active .mini-case:nth-child(3) { animation-delay: 0.61s; }

.mini-case__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mini-case__title {
  font-weight: 600;
  font-size: 16px;
  color: var(--white);
}

.mini-case__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 66.667px;
  background: var(--blue);
  transition: transform 0.3s var(--ease-out);
}

.mini-case:hover .mini-case__arrow {
  transform: rotate(45deg);
}

.mini-case__arrow img {
  transform: rotate(-45deg);
}

.mini-case__text {
  font-family: var(--f-metro);
  font-size: 14px;
  line-height: 17px;
  color: var(--back);
}

/* Services ----------------------------------------------------------- */

.services {
  position: relative;
  z-index: 2;
  padding: 165px 0 70px;
  border-radius: 0 0 var(--round-bottom) var(--round-bottom);
  overflow: clip;
  background: #0b044a;
  filter: drop-shadow(0 4px 71px rgba(250, 252, 253, 0.25));
}

.services__bg {
  position: absolute;
  left: -7.85%;
  top: 15px;
  width: 111.3%;
  height: calc(100% - 3px);
  object-fit: cover;
  pointer-events: none;
}

.services__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.services__grid {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
}

.svc-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: var(--glass-border);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.svc-card--big {
  flex: 0 0 calc(50% - 15px);
  padding: 30px;
  transition: height 0.5s var(--ease);
}

.svc-card__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: opacity 0.25s ease, transform 0.35s var(--ease);
}

.svc-card__content.is-out {
  opacity: 0;
  transform: translateY(14px);
}

.svc-card__content.is-in .service-line {
  animation: rise 0.5s var(--ease-out) both;
}

.svc-card__content.is-in .service-line:nth-child(2) { animation-delay: 0.04s; }
.svc-card__content.is-in .service-line:nth-child(3) { animation-delay: 0.08s; }
.svc-card__content.is-in .service-line:nth-child(4) { animation-delay: 0.12s; }
.svc-card__content.is-in .service-line:nth-child(5) { animation-delay: 0.16s; }
.svc-card__content.is-in .service-line:nth-child(6) { animation-delay: 0.2s; }

.svc-card__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.svc-card__title {
  font-weight: 600;
  font-size: 32px;
  color: var(--white);
}

.svc-card__desc {
  font-family: var(--f-metro);
  font-size: 16px;
  line-height: 20px;
  color: var(--back);
}

.svc-card .service-lines {
  gap: 16px;
}

.svc-card .service-line {
  font-weight: 600;
  font-size: 20px;
}

.svc-card .service-line:last-child {
  padding-bottom: 12px;
}

.services__side {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 30px;
  flex: 1 0 0;
  min-width: 1px;
}

.svc-card--small {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: calc(50% - 15px);
  height: 270px;
  padding: 30px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.35s var(--ease-out), border-color 0.3s ease;
}

.svc-card--small:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-4px);
}

.svc-card--small.is-in {
  animation: pop 0.5s var(--ease-out) both;
}

.svc-card--small.is-in:nth-child(2) { animation-delay: 0.06s; }
.svc-card--small.is-in:nth-child(3) { animation-delay: 0.12s; }

@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.svc-card__corner {
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
  border-bottom-right-radius: 6.667px;
  background: var(--orange);
  transition: width 0.35s var(--ease), height 0.35s var(--ease);
}

.svc-card__corner img {
  position: absolute;
  left: 13.165px;
  top: 13.165px;
  transform: rotate(-135deg) scaleY(-1);
  transition: transform 0.35s var(--ease);
}

.svc-card--small:hover .svc-card__corner {
  width: 58px;
  height: 58px;
}

.svc-card--small:hover .svc-card__corner img {
  transform: translate(4px, 4px) rotate(-135deg) scaleY(-1);
}

/* Products ----------------------------------------------------------- */

.products {
  position: relative;
  z-index: 1;
  padding: 191px var(--gutter) 70px;
  border-radius: 0 0 var(--round-bottom) var(--round-bottom);
  overflow: clip;
  background: #1a0a6b;
}

.products__bg {
  position: absolute;
  left: -16.3%;
  top: 19px;
  width: 183.2%;
  height: calc(100% + 10px);
  object-fit: cover;
  pointer-events: none;
}

.products__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.products__head {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 100%;
}

.products__head .tab {
  color: var(--white);
}

.products__list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 1121px;
}

.product {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  padding: 50px;
  border-radius: 30px;
  border: var(--glass-border);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.3s ease, transform 0.4s var(--ease-out), border-color 0.3s ease, background-color 0.3s ease;
}

.product:hover {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.13);
}

.product[hidden] {
  display: none;
}

.product.is-leaving {
  opacity: 0;
  transform: scale(0.97);
}

.product.is-entering {
  animation: pop 0.5s var(--ease-out) both;
}

.product--fixed {
  min-height: 429px;
}

.product__img {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  width: 230px;
  transition: transform 0.6s var(--ease-out);
}

.product:hover .product__img {
  transform: translateY(-6px) scale(1.03);
}

.product__img--top {
  justify-content: flex-start;
  height: 265.479px;
}

.vision {
  display: grid;
  grid-template-columns: max-content;
  grid-template-rows: max-content;
  place-items: start;
}

.vision__layer {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 230px;
  height: 132.791px;
  transition: transform 0.6s var(--ease-out);
}

.product:hover .vision__layer:nth-child(1) { transform: translateY(14px); }
.product:hover .vision__layer:nth-child(2) { transform: translateY(7px); }
.product:hover .vision__layer:nth-child(4) { transform: translateY(-7px); }
.product:hover .vision__layer:nth-child(5) { transform: translateY(-14px); }

.vision__layer div {
  flex: none;
  width: 132.791px;
  height: 132.791px;
  transform: rotate(30deg) scaleY(0.87) skewX(-30deg);
}

.product__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 42px;
  flex: 1 0 0;
  min-width: 1px;
}

.product__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.product__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.37);
}

.product__title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.product__title {
  font-weight: 600;
  font-size: 32px;
  color: var(--white);
  white-space: nowrap;
}

.product .tag {
  background: rgba(124, 125, 126, 0.47);
}

.product__sub {
  font-family: var(--f-lora);
  font-size: 20px;
  line-height: 26px;
  color: var(--white);
}

.product__p {
  font-family: var(--f-metro);
  font-size: 16px;
  line-height: 20px;
  color: var(--back);
}

.products__empty {
  padding: 60px 0;
  font-family: var(--f-metro);
  font-size: 20px;
  line-height: 25px;
  text-align: center;
  color: var(--agray);
  animation: rise 0.5s var(--ease-out) both;
}

/* Research / Cases --------------------------------------------------- */

.research {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  padding-inline: var(--gutter);
}

.research__intro {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 1131px;
}

.research__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.research__lead {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.research__kicker {
  font-family: var(--f-pen);
  font-size: 40px;
  color: var(--textblack2);
  white-space: nowrap;
}

.research__text {
  max-width: 604px;
  font-family: var(--f-lora);
  font-weight: 600;
  font-size: 24px;
  line-height: 31px;
  color: var(--amaintext);
}

.numbers {
  position: relative;
  flex-shrink: 0;
  width: 412px;
  height: 266px;
}

.number {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  width: 152px;
  padding: 30px;
  border: 1px solid var(--agray);
  border-radius: 16px;
  background: var(--violet);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.number:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 30px -14px rgba(10, 4, 69, 0.6);
}

.number:nth-child(1) { left: 0.5px; top: 0; }
.number:nth-child(2) { left: 127.5px; top: 63px; }
.number:nth-child(3) { left: 259.5px; top: 122px; }

.number__value {
  font-weight: 600;
  font-size: 40px;
  line-height: 29px;
  color: var(--orange);
}

@supports (text-box: trim-both cap alphabetic) {
  .number__value,
  .stage__num span {
    line-height: normal;
    text-box: trim-both cap alphabetic;
  }
}

.number__label {
  font-size: 16px;
  color: var(--textblack2);
}

.union {
  position: relative;
  width: 1131px;
  max-width: 100%;
  height: 216px;
}

.union > img {
  position: absolute;
  inset: 0;
}

.union__text {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 183px;
  width: 1160px;
  padding: 30px;
  font-family: var(--f-metro);
  font-size: 20px;
  line-height: 25px;
  color: var(--textblack);
}

.union__text p:first-child { width: 497px; }
.union__text p:last-child { width: 393.333px; }

.areas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
  max-width: 1320px;
  padding: 50px 60px;
  border: 1px solid rgba(207, 207, 207, 0.64);
  border-radius: 50px;
  background: var(--white);
}

.areas .h-section {
  text-align: center;
}

.areas .tabs {
  gap: 10px;
}

.areas .tab {
  color: var(--asecondtext);
}

.areas .tab.is-active {
  color: var(--white);
}

.area-feature {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 322px;
  padding: 0 92px;
  border-radius: 30px;
  overflow: hidden;
  background: var(--back-blue);
}

.area-feature__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.area-feature__title {
  font-weight: 600;
  font-size: 32px;
  color: var(--white);
}

.area-feature__desc {
  max-width: 517px;
  font-family: var(--f-metro);
  font-size: 20px;
  line-height: 25px;
  color: var(--back);
}

.area-feature__rings {
  position: absolute;
  left: 599px;
  top: -79px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 475.127px;
  height: 461.246px;
  pointer-events: none;
}

.area-feature__rings img {
  flex: none;
  transform: rotate(144.99deg) scaleY(-1);
  animation: breathe 6s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { transform: rotate(144.99deg) scaleY(-1) scale(1); }
  50% { transform: rotate(144.99deg) scaleY(-1) scale(1.04); }
}

.area-feature.is-switching .area-feature__text {
  animation: rise 0.5s var(--ease-out) both;
}

.problems {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
}

.problem {
  display: flex;
  align-items: center;
  gap: 50px;
  padding: 30px;
  border-radius: 30px;
  background: var(--back);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.problem:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -24px rgba(22, 24, 39, 0.35);
}

.problem__left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 1 525px;
  min-width: 0;
}

.problem__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.problem__title {
  font-weight: 600;
  font-size: 20px;
  color: var(--textblack);
}

.problem .tag {
  background: var(--textblack2);
}

.problem .tag--blue {
  background: var(--blue);
}

.problem__desc {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.problem__desc p:first-child {
  font-family: var(--f-metro);
  font-size: 14px;
  line-height: 17px;
  color: var(--textblack2);
}

.pen-label {
  font-family: var(--f-pen);
  font-size: 16px;
  white-space: nowrap;
}

.problem__desc .pen-label {
  color: var(--textblack2);
}

.problem__solution {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 20px;
  flex: 1 0 0;
  min-width: 1px;
  padding: 20px;
  border-radius: 20px;
  background: var(--blue);
  transition: filter 0.2s ease;
}

.problem__solution:hover {
  filter: brightness(1.06);
}

.problem__solution-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  flex: 1 0 0;
  min-width: 1px;
}

.problem__solution-text p:first-child {
  font-family: var(--f-lora);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: var(--white);
}

.problem__solution-text .pen-label {
  color: var(--back);
}

.problem__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 100px;
  background: var(--white);
  transition: transform 0.3s var(--ease-out);
}

.problem__solution:hover .problem__arrow {
  transform: translateX(4px);
}

/* Decorative circles behind Company */

.deco {
  position: absolute;
  left: calc(50% - 912px);
  top: -709px;
  width: 1831px;
  height: 1831px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

.deco__v {
  position: absolute;
  left: 563.95px;
  top: 329.58px;
}

.deco__h {
  position: absolute;
  left: 329.58px;
  top: 563.94px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1171.84px;
  height: 703.104px;
}

.deco__h img {
  flex: none;
  transform: rotate(-90deg);
}

/* Company ------------------------------------------------------------ */

.company {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding-inline: var(--gutter);
}

.company > :not(.deco) {
  position: relative;
  z-index: 1;
}

.company__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.company__logo {
  width: 471.008px;
  max-width: 100%;
  height: auto;
}

.company__lead {
  max-width: 842px;
  font-weight: 500;
  font-size: 24px;
  line-height: 29px;
  text-align: center;
  color: var(--textblack);
}

.company__facts {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
  max-width: 1056px;
  padding: 30px;
  border-radius: 30px;
  background: var(--white);
  font-family: var(--f-metro);
  font-size: 20px;
  line-height: 25px;
  color: var(--textblack2);
}

.company__facts p {
  flex: 1 0 0;
  min-width: 1px;
}

.founder {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  width: 100%;
  max-width: 1056px;
  padding: 40px;
  border-radius: 30px;
  background: var(--back-blue);
}

.founder__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  width: 212px;
}

.founder__photo {
  width: 171.5px;
  height: 171.5px;
  border-radius: 85.75px;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}

.founder:hover .founder__photo {
  transform: scale(1.04);
}

.founder__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: center;
}

.founder__name {
  font-weight: 600;
  font-size: 24px;
  line-height: 29px;
  color: var(--white);
}

.founder__role {
  font-family: var(--f-metro);
  font-size: 16px;
  line-height: 20px;
  color: var(--agray);
}

.founder__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  flex: 1 0 0;
  min-width: 1px;
}

.founder__bio {
  font-family: var(--f-lora);
  font-size: 20px;
  line-height: 26px;
  color: var(--back);
}

.founder__bio p + p {
  margin-top: 16px;
}

.founder .btn--primary {
  width: 304px;
}

/* Why Infiano -------------------------------------------------------- */

.why {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.why__track-wrap {
  position: relative;
  width: 100%;
}

.why__track {
  display: flex;
  align-items: stretch;
  gap: 40px;
  padding: 10px max(var(--gutter), calc((100% - var(--content)) / 2));
  margin-block: -10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  scrollbar-width: none;
}

.why__track::-webkit-scrollbar {
  display: none;
}

.benefit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex-shrink: 0;
  width: min(379px, 82vw);
  min-height: 464px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid rgba(207, 207, 207, 0.3);
  border-radius: 30px;
  background: var(--white);
  scroll-snap-align: start;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.benefit:first-child {
  width: min(377px, 82vw);
}

.benefit:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px -26px rgba(22, 24, 39, 0.35);
}

.benefit > img,
.benefit .atom {
  transition: transform 0.6s var(--ease-out);
}

.benefit:hover > img,
.benefit:hover .atom {
  transform: rotate(-8deg) scale(1.08);
}

.benefit__title {
  font-weight: 600;
  font-size: 24px;
  line-height: 29px;
  color: var(--orange);
}

.benefit__text {
  font-family: var(--f-lora);
  font-size: 20px;
  line-height: 26px;
  color: var(--textblack);
}

.atom {
  position: relative;
  width: 92.853px;
  height: 83.2px;
}

.atom__v {
  position: absolute;
  left: 25.63px;
  top: 0;
}

.atom__side {
  position: absolute;
  left: 0;
  top: 2.79px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92.853px;
  height: 77.627px;
}

.atom__side img {
  flex: none;
}

.atom__side--left img {
  transform: rotate(-60deg);
}

.atom__side--right img {
  transform: rotate(-120deg) scaleY(-1);
}

.why__nav {
  position: absolute;
  top: calc(50% + 1.03px);
  right: max(var(--gutter), calc((100% - var(--content)) / 2));
  transform: translateY(-50%);
  padding: 0 20px;
  transition: opacity 0.3s ease;
}

.why__nav.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* How we work -------------------------------------------------------- */

.how {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.how__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 428px));
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  max-width: calc(var(--content) + var(--gutter) * 2);
  padding: 0 var(--gutter);
}

.stage {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 30px;
  border-radius: 30px;
  background: var(--back-blue);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.stage:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px -22px rgba(18, 35, 60, 0.6);
}

.stage__head {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stage__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 80px;
  height: 70px;
  border: 1px solid rgba(240, 145, 52, 0.8);
  border-radius: 100px;
  background: rgba(240, 145, 52, 0.2);
  transition: background-color 0.3s ease;
}

.stage:hover .stage__num {
  background: rgba(240, 145, 52, 0.45);
}

.stage__num span {
  font-weight: 600;
  font-size: 40px;
  line-height: 29px;
  color: var(--white);
}

.stage__title {
  font-weight: 600;
  font-size: 24px;
  line-height: 29px;
  color: var(--orange);
}

.stage__text {
  font-family: var(--f-lora);
  font-size: 20px;
  line-height: 26px;
  color: var(--back);
}

.how .btn--primary {
  width: 304px;
}

/* Industries --------------------------------------------------------- */

.industries {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.industries__list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  max-width: calc(1064px + var(--gutter) * 2);
  padding: 0 var(--gutter);
}

.industry {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 30px;
  border: 1px solid rgba(207, 207, 207, 0.5);
  border-radius: 30px;
  background: var(--white);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.3s ease;
}

.industry:hover {
  transform: translateX(6px);
  border-color: rgba(240, 145, 52, 0.5);
  box-shadow: 0 18px 40px -28px rgba(22, 24, 39, 0.35);
}

.industry__title {
  flex-shrink: 0;
  width: 180px;
  font-weight: 600;
  font-size: 24px;
  line-height: 29px;
  color: var(--orange);
}

.industry__text {
  flex: 1 0 0;
  min-width: 1px;
  font-family: var(--f-lora);
  font-size: 20px;
  line-height: 26px;
  color: var(--textblack);
}

/* Publications ------------------------------------------------------- */

.pubs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.pubs .subline {
  color: var(--textblack2);
}

.pubs__grid {
  display: flex;
  align-items: stretch;
  gap: 40px;
  width: 100%;
  max-width: calc(var(--content) + var(--gutter) * 2);
  padding: 0 var(--gutter);
}

.pubs__col {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.pubs__col--left {
  flex: 753 1 0;
  min-width: 0;
}

.pubs__col--right {
  flex: 527 1 0;
  min-width: 0;
}

.pub {
  display: flex;
  padding: 30px;
  border: 1px solid rgba(207, 207, 207, 0.5);
  border-radius: 30px;
  background: var(--white);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.pub:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 40px -26px rgba(22, 24, 39, 0.35);
}

.pub--row {
  align-items: flex-start;
  gap: 24px;
}

.pub--col {
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.pub__panel {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: var(--amaintext);
  padding: 20px;
}

.pub--row .pub__panel {
  justify-content: space-between;
  gap: 24px;
  align-self: stretch;
  flex-shrink: 0;
  width: 300px;
}

.pub--col .pub__panel {
  gap: 24px;
}

.pub__panel-top {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pub__meta {
  display: flex;
  align-items: center;
  gap: 26px;
}

.pub__date {
  font-family: var(--f-metro);
  font-size: 16px;
  color: var(--agray);
  white-space: nowrap;
}

.pub .tag {
  background: var(--text3);
  color: var(--back);
}

.pub__title {
  font-weight: 600;
  font-size: 24px;
  line-height: 29px;
  color: var(--orange);
}

.pub__author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pub__author img {
  width: 50px;
  height: 50px;
  border-radius: 30px;
  object-fit: cover;
}

.pub__author span {
  font-family: var(--f-metro);
  font-size: 16px;
  color: var(--agray);
  white-space: nowrap;
}

.pub__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1 0 0;
  min-width: 1px;
}

.pub--col .pub__top {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pub__text {
  font-family: var(--f-lora);
  font-size: 20px;
  line-height: 26px;
  color: var(--textblack);
}

.pubs .btn--primary {
  width: 330px;
}

/* Contacts ----------------------------------------------------------- */

.contacts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 40px var(--gutter);
  border-radius: 50px;
  background: var(--blue);
}

.contacts__row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 36px;
}

.pill {
  display: flex;
  align-items: center;
  height: 70px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--back);
  font-size: 24px;
  white-space: nowrap;
  transition: background-color 0.25s ease, transform 0.3s var(--ease-out);
}

.pill:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-3px);
}

.pill--email {
  justify-content: center;
  padding: 20px 30px;
  font-weight: 600;
}

.pill--tg {
  gap: 16px;
  padding: 16px 30px;
}

.pill--write {
  justify-content: center;
  width: 330px;
  background: rgba(255, 255, 255, 0.3);
  font-weight: 500;
  color: var(--white);
}

.pill--write:hover {
  background: rgba(255, 255, 255, 0.42);
}

.contacts__address {
  font-family: var(--f-metro);
  font-size: 20px;
  line-height: 25px;
  text-align: center;
  color: var(--white);
}

/* Footer ------------------------------------------------------------- */

.footer {
  padding: 80px 0;
  background: var(--amaintext);
}

.footer .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  padding-inline: max(var(--gutter), 80px);
}

.footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  width: 100%;
  color: #81848a;
}

.footer__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 32px;
  font-family: var(--f-geist);
  font-weight: 500;
  font-size: 14px;
}

.footer__links a {
  transition: color 0.2s ease;
}

.footer__links a:hover {
  color: var(--white);
}

.footer__copy {
  font-family: var(--f-geist);
  font-size: 13px;
}

/* Scroll reveal ------------------------------------------------------ */

.js .reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--d, 0s);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ===================================================================== */
/* Responsive                                                            */
/* ===================================================================== */

@media (max-width: 1279px) {
  .union {
    height: auto;
  }

  .union > img {
    display: none;
  }

  .union__text {
    position: static;
    width: 100%;
    gap: 30px;
    padding: 0;
    align-items: stretch;
  }

  .union__text p:first-child,
  .union__text p:last-child {
    flex: 1 1 0;
    width: auto;
    padding: 30px;
    border-radius: 30px;
    background: var(--white);
  }
}

@media (max-width: 1180px) {
  .header .nav,
  .header .contacts-btn {
    display: none;
  }

  .burger {
    display: block;
  }

  .header {
    padding: 20px 20px 20px 30px;
  }

  /* Clients: vertical accordion */
  .clients__list {
    flex-direction: column;
    gap: 16px;
    min-height: 0;
  }

  .client,
  .client.is-active {
    flex: none;
  }

  .client__mini {
    position: static;
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.5s var(--ease), opacity 0.3s ease;
  }

  .client.is-active .client__mini {
    grid-template-rows: 0fr;
  }

  .client__mini-inner {
    flex-direction: row;
    min-height: 0;
    overflow: hidden;
    height: auto;
    padding: 0 20px;
  }

  .client__mini-inner > * {
    margin-block: 20px;
  }

  .client__mini-head {
    flex-direction: row;
    gap: 14px;
  }

  .client__mini-title {
    width: auto;
    font-size: 22px;
    text-transform: none;
    word-break: normal;
    overflow-wrap: normal;
    text-align: left;
  }

  .client__expand img {
    transform: rotate(135deg);
  }

  .client__full {
    position: static;
    display: grid;
    grid-template-rows: 0fr;
    min-width: 0;
    opacity: 0;
    visibility: visible;
    transform: none;
    transition: grid-template-rows 0.5s var(--ease), opacity 0.3s ease;
  }

  .client.is-active .client__full {
    position: static;
    grid-template-rows: 1fr;
    transform: none;
    transition: grid-template-rows 0.55s var(--ease), opacity 0.45s ease 0.1s;
  }

  .client__full-inner {
    min-height: 0;
    overflow: hidden;
  }

  .client:not(.is-active) .client__full-inner {
    padding-block: 0;
  }

  .client__full-inner {
    transition: padding 0.5s var(--ease);
  }

  /* Services */
  .services__grid {
    flex-direction: column;
    align-items: stretch;
  }

  .svc-card--big {
    flex: none;
  }

  .services__side {
    flex: none;
    width: 100%;
    flex-wrap: nowrap;
  }

  .svc-card--small {
    flex: 1 1 0;
    width: auto;
    height: 200px;
  }

  /* Research */
  .research__top {
    flex-direction: column;
  }

  .numbers {
    align-self: center;
  }

  /* How */
  .how__list {
    grid-template-columns: 1fr;
    max-width: calc(720px + var(--gutter) * 2);
    gap: 20px;
  }

  /* Pubs */
  .pubs__grid {
    flex-direction: column;
    max-width: calc(820px + var(--gutter) * 2);
  }

  .pubs__col--left,
  .pubs__col--right {
    flex: none;
  }

  .footer .nav-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .footer .nav {
    flex-wrap: wrap;
    margin-left: -16px;
  }
}

@media (max-width: 900px) {
  :root {
    --overlap: 100px;
  }

  .hero {
    min-height: 0;
    gap: 48px;
    padding-bottom: calc(var(--overlap) + 24px);
  }

  .offer {
    padding: 0;
  }

  .offer__main {
    margin-bottom: 0;
  }

  .offer__note-row {
    justify-content: flex-start;
    margin-top: 28px;
  }

  .client__top {
    flex-direction: column;
  }

  .client__services {
    width: 100%;
  }

  .client__cases-list {
    flex-direction: column;
  }

  .products {
    padding-top: 160px;
  }

  .products__head {
    flex-direction: column;
    gap: 16px;
  }

  .product {
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 40px 32px;
  }

  .product__img--top {
    height: auto;
  }

  .product__body {
    width: 100%;
    gap: 32px;
  }

  .areas {
    padding: 40px 24px;
    border-radius: 36px;
  }

  .area-feature {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 40px 32px 0;
  }

  .area-feature__rings {
    position: relative;
    left: auto;
    top: auto;
    align-self: center;
    width: 100%;
    height: 280px;
    margin-top: -20px;
  }

  .area-feature__rings img {
    width: 300px;
    height: auto;
  }

  .problem {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 24px;
  }

  .problem__left {
    flex: none;
  }

  .company__facts {
    flex-direction: column;
    gap: 16px;
  }

  .founder {
    flex-direction: column;
    align-items: center;
    padding: 32px;
  }

  .founder__body {
    align-items: center;
    text-align: center;
  }

  .industry {
    flex-direction: column;
    gap: 12px;
  }

  .industry__title {
    width: auto;
  }

  .industry__title br {
    display: none;
  }
}

@media (max-width: 700px) {
  :root {
    --overlap: 80px;
  }

  .header {
    height: 64px;
    padding: 12px 12px 12px 22px;
  }

  .offer__ai {
    width: 104px;
    height: 88px;
    padding: 20px;
    border-radius: 16px;
  }

  .offer__ai span {
    font-size: 58px;
    line-height: 41px;
  }

  .offer__lab {
    font-size: 38px;
    line-height: 42px;
  }

  .offer__sub {
    font-size: 18px;
    line-height: 23px;
  }

  .offer__sub br,
  .offer__note br {
    display: none;
  }

  .hero-cases__track {
    height: auto;
    min-height: 135px;
  }

  .hcase.is-active {
    width: calc(100vw - var(--gutter) * 2);
    max-width: 500px;
  }

  .hero-cases__nav {
    position: static;
    transform: none;
    justify-content: center;
    gap: 16px;
    padding: 20px 0 0;
  }

  .client__full-inner {
    padding: 20px;
  }

  .client__title {
    font-size: 26px;
  }

  .client__tagline {
    white-space: normal;
  }

  .client__services-title {
    white-space: normal;
  }

  .services {
    padding: 130px 0 50px;
  }

  .svc-card--big {
    padding: 24px;
  }

  .services__side {
    flex-direction: column;
  }

  .svc-card--small {
    flex: none;
    width: 100%;
    height: 130px;
    padding: 24px 24px 24px 76px;
  }

  .svc-card__title {
    font-size: 26px;
  }

  .svc-card .service-line {
    font-size: 17px;
  }

  .svc-card .service-line img {
    width: 28px;
    height: 28px;
  }

  .tab {
    padding: 10px 20px;
    font-size: 17px;
  }

  .tabs {
    padding: 12px;
  }

  .tabs__ind {
    top: 12px;
    height: calc(100% - 24px);
  }

  .products__head .tabs,
  .areas .tabs {
    width: calc(100% + var(--gutter) * 2);
    max-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }

  .areas .tabs {
    width: calc(100% + 48px);
    margin-inline: -24px;
    padding-inline: 24px;
  }

  .product {
    padding: 28px 20px;
    border-radius: 24px;
  }

  .product__title,
  .area-feature__title {
    font-size: 26px;
    white-space: normal;
  }

  .product__sub {
    font-size: 18px;
    line-height: 24px;
  }

  .btn--primary {
    width: 100%;
    max-width: 340px;
    font-size: 18px;
  }

  .research__kicker {
    font-size: 32px;
  }

  .research__text {
    font-size: 20px;
    line-height: 27px;
  }

  .numbers {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .number {
    position: static;
    width: auto;
    padding: 20px 16px;
  }

  .number__label br {
    display: none;
  }

  .union__text {
    flex-direction: column;
    gap: 16px;
  }

  .union__text p:first-child,
  .union__text p:last-child {
    padding: 24px;
    font-size: 17px;
    line-height: 23px;
  }

  .h-section {
    white-space: normal;
    text-align: center;
  }

  .clients .h-section,
  .services .h-section,
  .research__lead .h-section {
    text-align: left;
  }

  .area-feature {
    padding: 28px 22px 0;
  }

  .area-feature__desc {
    font-size: 17px;
    line-height: 23px;
  }

  .area-feature__rings {
    height: 220px;
  }

  .area-feature__rings img {
    width: 240px;
  }

  .problem__solution {
    padding: 16px;
  }

  .company__lead {
    font-size: 19px;
    line-height: 25px;
  }

  .company__lead br {
    display: none;
  }

  .company__facts {
    padding: 24px;
    font-size: 17px;
    line-height: 23px;
  }

  .founder {
    padding: 28px 20px;
  }

  .founder__bio,
  .stage__text,
  .industry__text,
  .pub__text,
  .benefit__text {
    font-size: 17px;
    line-height: 24px;
  }

  .benefit {
    min-height: 0;
    padding: 24px;
  }

  .benefit__title,
  .stage__title,
  .industry__title,
  .pub__title,
  .founder__name {
    font-size: 21px;
    line-height: 26px;
  }

  .stage {
    padding: 24px;
  }

  .stage__num {
    width: 64px;
    height: 56px;
  }

  .stage__num span {
    font-size: 32px;
  }

  .industry {
    padding: 24px;
    border-radius: 24px;
  }

  .subline {
    font-size: 17px;
    line-height: 23px;
  }

  .subline br {
    display: none;
  }

  .pub {
    padding: 20px;
    border-radius: 24px;
  }

  .pub--row {
    flex-direction: column;
    align-items: stretch;
  }

  .pub--row .pub__panel {
    width: 100%;
  }

  .pub__title br {
    display: none;
  }

  .btn--outline {
    width: 100%;
  }

  .contacts {
    gap: 28px;
    padding: 36px 20px;
    border-radius: 36px;
  }

  .contacts__row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 400px;
    gap: 14px;
  }

  .pill {
    height: 60px;
    justify-content: center;
    font-size: 20px;
  }

  .pill--write {
    width: 100%;
  }

  .contacts__address {
    font-size: 17px;
  }

  .footer {
    padding: 56px 0;
  }

  .footer .wrap {
    padding-inline: var(--gutter);
    gap: 32px;
  }

  .footer__row {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 420px) {
  .header .tg-btn {
    display: none;
  }

  .offer__title {
    gap: 14px;
  }

  .offer__lab {
    font-size: 34px;
    line-height: 38px;
  }
}

/* Reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}