body {
  margin: 0;
  background-color: #111111;
  color: #ffffff;
  font-family: "Inter Tight", sans-serif;
}

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

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 24px 20px;
  background: rgba(17, 17, 17, 0.40);
  backdrop-filter: blur(20px);
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

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

.brand__avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.brand__name {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.contacts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.contacts__link {
  appearance: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 36px;
  margin: 0;
  padding: 8px 20px 8px 24px;
  border-radius: 32px;
  background-color: #282828;
  color: #f6f7f8;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  box-sizing: border-box;
  white-space: nowrap;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.contacts__link:hover {
  background-color: #333333;
  color: #ffffff;
}

.contacts__link:focus-visible {
  background-color: #333333;
  color: #ffffff;
  outline: 1px solid #4a4a4a;
  outline-offset: 2px;
}

.contacts__link--cv {
  min-width: 93px;
}

.contacts__link--telegram {
  min-width: 137px;
}

.contacts__link--email {
  min-width: 109px;
}

.contacts__text-mobile {
  display: none;
}

.contacts__icon {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}

.hero {
  padding: 30px 20px 0;
}

.hero__media {
  display: flex;
  justify-content: center;
}

.hero__media-inner {
  position: relative;
  width: 659px;
  max-width: 100%;
  height: 365px;
  overflow: hidden;
}

.hero__media-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0) 82.857%, #111111 100%);
  pointer-events: none;
}

.hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 10%, #000 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 10%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.hero__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  margin-top: 32px;
}

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

.hero__title {
  margin: 0;
  color: #f6f7f8;
  font-size: 44px;
  font-weight: 500;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
}

.hero__title-word {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(18px);
  animation: hero-reveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--hero-title-index) * 75ms);
}

.hero__reveal-item {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(18px);
  animation: hero-reveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--hero-reveal-index) * 75ms);
}

@keyframes hero-reveal {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__title-word,
  .hero__reveal-item {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
  }
}

.hero__tags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.hero__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 28px;
  padding: 4px 12px;
  border-radius: 16px;
  background-color: #2e3035;
  color: #f6f7f8;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}

.hero__tag--b2b {
  width: 50px;
}

.hero__tag--highload {
  width: 168px;
}

.hero__tag--saas {
  width: 56px;
}

.hero__tag--systems {
  width: 134px;
}

.hero__description {
  color: #f6f7f8;
  font-size: 24px;
  font-weight: 400;
  line-height: 28px;
  text-align: center;
}

.hero__description p {
  margin: 0;
}

.projects {
  padding: 200px 20px 0;
}

.projects__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 628px));
  justify-content: center;
  gap: 24px;
}

.project-card {
  display: block;
  width: 628px;
  min-height: 468px;
  padding: 32px 49px 0;
  box-sizing: border-box;
  border-radius: 20px;
  background-color: #282828;
  overflow: hidden;
  transition: background-color 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-card:hover,
.project-card:focus-within {
  background-color: #333333;
}

.project-card__details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 530px;
  max-width: 100%;
  margin: 0 auto;
}

.project-card__skills {
  display: flex;
  align-items: center;
  gap: 8px;
}

.project-skill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 4px 12px;
  box-sizing: border-box;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}

.project-skill--ux {
  background-color: #2f371d;
  color: #deefb9;
}

.project-skill--design-system {
  background-color: #403923;
  color: #fff0c2;
}

.project-skill--product {
  background-color: #4c273f;
  color: #f3d7ea;
}

.project-skill--web {
  background-color: #263d3d;
  color: #d1f0f0;
}

.project-skill--soon {
  background-color: #000000;
  color: #f6f7f8;
}

.project-card__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.project-card__title {
  width: 100%;
  margin: 0;
  color: #f6f7f8;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  text-align: center;
}

.project-card__subtitle {
  width: 100%;
  margin: 0;
  color: #959ea7;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
}

.project-card__visual {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 240px;
  margin-top: 64px;
}

.project-card__visual::before {
  content: "";
  position: absolute;
  top: 96px;
  left: 50%;
  width: 470px;
  height: 360px;
  border-radius: 50%;
  background: rgba(0, 119, 255, 0.9);
  filter: blur(100px);
  transform: translateX(-50%);
  pointer-events: none;
}

.project-card__glow {
  display: none;
}

.project-card__image-frame {
  position: relative;
  z-index: 1;
  width: 530px;
  aspect-ratio: 1920 / 1425;
  border: 5px solid #1e1e1e;
  border-radius: 10px;
  overflow: hidden;
  transform-origin: center top;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-card__picture {
  display: block;
  width: 100%;
  height: 100%;
}

.project-card:hover .project-card__image-frame,
.project-card:focus-within .project-card__image-frame {
  transform: translateY(-16px) scale(1.08);
}

.project-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-card--table .project-card__image {
  object-position: center top;
}

.project-card--design-system .project-card__image {
  width: 100%;
  height: 106.1%;
  object-fit: fill;
  transform: translateY(-6.18%);
}

.project-card--design-system .project-card__image-frame {
  aspect-ratio: 530 / 259;
}

.project-card--wmx:hover {
  background-color: #282828;
}

.project-card--wmx .project-card__visual::before {
  background: #ff5702;
}

.project-card--wmx .project-card__image-frame {
  height: 295px;
  aspect-ratio: auto;
}

.project-card--wmx:hover .project-card__image-frame {
  transform: none;
}

.case-project {
  padding: 80px 20px 0;
  overflow: hidden;
}

.case-project__card {
  width: 100%;
  min-height: 577px;
  padding: 40px 49px 0;
  box-sizing: border-box;
  border-radius: 20px;
  background-color: #282828;
  overflow: hidden;
}

.case-project__details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 999px;
  max-width: 100%;
  margin: 0 auto;
}

.case-project__skills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.case-project__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.case-project__title {
  margin: 0;
  color: #f6f7f8;
  font-size: 44px;
  font-weight: 500;
  line-height: 53px;
  text-align: center;
}

.case-project__subtitle {
  width: 100%;
  margin: 0;
  color: #959ea7;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
}

.case-project__visual {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 276px;
  margin-top: 40px;
}

.case-project__visual::before {
  content: "";
  position: absolute;
  top: 104px;
  left: 50%;
  width: 1040px;
  height: 380px;
  border-radius: 50%;
  background: rgba(0, 119, 255, 0.9);
  filter: blur(100px);
  transform: translateX(-50%);
  pointer-events: none;
}

.case-project__image-frame {
  position: relative;
  z-index: 1;
  width: 1040px;
  max-width: 100%;
  aspect-ratio: 1040 / 382;
  border: 5px solid #1e1e1e;
  border-radius: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

.case-project__image {
  display: block;
  position: absolute;
  top: -13.2%;
  left: -0.02%;
  width: 100.03%;
  max-width: none;
  height: 199.33%;
  object-fit: cover;
  object-position: center top;
}

.case-project--table .case-project__details {
  width: 753px;
}

.case-project--table .case-project__subtitle {
  max-width: 636px;
  font-size: 18px;
}

.case-project--table .case-project__image-frame {
  aspect-ratio: 1040 / 383;
}

.case-project--table .case-project__image {
  top: -24.8%;
  left: -0.06%;
  width: 100.12%;
  height: 177.81%;
}

.case-project--design-system .case-project__details {
  width: 940px;
}

.case-project--design-system .case-project__subtitle {
  max-width: 883px;
  font-size: 18px;
}

.case-project--design-system .case-project__image-frame {
  aspect-ratio: 1040 / 381;
}

.case-project--design-system .case-project__image {
  top: -4.11%;
  left: -2%;
  width: 104%;
  height: 102.3%;
}

.case-summary {
  padding: 120px 20px 0;
}

.case-summary__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 800px;
  max-width: 100%;
  margin: 0 auto;
}

.case-summary__title {
  margin: 0;
  color: #ffffff;
  font-size: 36px;
  font-weight: 500;
  line-height: normal;
}

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

.case-summary__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.case-summary__text p {
  margin: 0;
  color: #babbbc;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
}

.case-summary__stats {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.case-summary--stat-pair .case-summary__stats {
  gap: 24px;
}

.case-summary--stat-pair .case-summary__stat {
  min-height: 156px;
}

.case-summary__stat {
  flex: 1 1 0;
  min-width: 0;
  padding: 24px 40px;
  box-sizing: border-box;
  border-radius: 20px;
  background-color: #1e1e1e;
  overflow: hidden;
}

.case-summary__stat-value {
  margin: 0 0 8px;
  color: #4db288;
  font-size: 40px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}

.case-summary__stat-text {
  margin: 0;
  color: #babbbc;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
}

.case-origin {
  padding: 120px 20px 0;
}

.case-origin__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 960px;
  max-width: 100%;
  margin: 0 auto;
}

.case-origin__intro,
.case-origin__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 800px;
  max-width: 100%;
}

.case-origin__title {
  margin: 0;
  color: #ffffff;
  font-size: 36px;
  font-weight: 500;
  line-height: normal;
}

.case-origin__subtitle {
  margin: 0;
  color: #ffffff;
  font-size: 24px;
  font-weight: 500;
  line-height: normal;
}

.case-origin__text {
  width: 100%;
}

.case-origin__text p {
  margin: 0;
  color: #babbbc;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
}

.case-origin__section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.case-origin__diagram {
  position: relative;
  width: 960px;
  max-width: 100%;
  box-sizing: border-box;
  border: 2px solid #1d1e22;
  border-radius: 16px;
  overflow: hidden;
}

.case-origin__diagram--legacy {
  height: 271px;
}

.case-origin__diagram--group {
  height: 240px;
}

.case-origin__diagram picture {
  display: block;
  width: 100%;
  height: 100%;
}

.case-origin__diagram img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: fill;
}

.case-flow {
  padding: 120px 20px 0;
}

.case-flow__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 960px;
  max-width: 100%;
  margin: 0 auto;
}

.case-flow__intro,
.case-flow__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 800px;
  max-width: 100%;
}

.case-flow__intro {
  gap: 24px;
}

.case-flow__title {
  margin: 0;
  color: #ffffff;
  font-size: 36px;
  font-weight: 500;
  line-height: normal;
}

.case-flow__subtitle {
  margin: 0;
  color: #ffffff;
  font-size: 24px;
  font-weight: 500;
  line-height: normal;
}

.case-flow__intro p,
.case-flow__copy p {
  margin: 0;
  color: #babbbc;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
}

.case-flow__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.case-flow__image {
  position: relative;
  width: 960px;
  max-width: 100%;
  overflow: hidden;
}

.case-flow__image img {
  display: block;
}

.case-flow__image--empty {
  aspect-ratio: 949 / 395;
  border-radius: 16px;
}

.case-flow__image--empty img {
  position: absolute;
  top: -0.04%;
  left: -1.16%;
  width: 101.16%;
  max-width: none;
  height: 107.17%;
  object-fit: cover;
}

.case-flow__image--setup {
  height: 741px;
  border-radius: 16px;
}

.case-flow__image--setup > img {
  position: absolute;
  top: -0.01%;
  left: -5.5%;
  width: 105.5%;
  max-width: none;
  height: 100.01%;
  object-fit: cover;
}

.case-flow__setup-screen {
  position: absolute;
  width: 600px;
  height: 463px;
  box-sizing: border-box;
  border: 4px solid #1e1e1e;
  border-radius: 16px;
  overflow: hidden;
}

.case-flow__setup-screen img {
  position: absolute;
  top: -0.01%;
  left: -5.5%;
  width: 105.5%;
  max-width: none;
  height: 100.01%;
  object-fit: cover;
}

.case-flow__setup-screen--secondary {
  top: 79px;
  left: 328px;
}

.case-flow__setup-screen--primary {
  top: 47px;
  left: -33px;
}

.case-flow__image--domains {
  height: 702px;
  border-radius: 16px;
}

.case-flow__image--domains img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-flow__image--groups {
  height: 714px;
  border-radius: 16px;
}

.case-flow__image--groups img {
  position: absolute;
  top: -9.43%;
  left: -10.58%;
  width: 115.7%;
  max-width: none;
  height: 113.88%;
  object-fit: cover;
}

.case-flow__image--rules {
  height: 625px;
  border-radius: 16px;
}

.case-flow__image--rules img {
  position: absolute;
  top: -9%;
  left: -11.66%;
  width: 116.16%;
  max-width: none;
  height: 130.5%;
  object-fit: cover;
}

.case-result {
  padding: 120px 20px 0;
}

.case-result__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 800px;
  max-width: 100%;
  margin: 0 auto;
}

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

.case-result__title {
  margin: 0;
  color: #ffffff;
  font-size: 36px;
  font-weight: 500;
  line-height: normal;
}

.case-result__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 12px;
  box-sizing: border-box;
  border-radius: 16px;
  background-color: #29432f;
  color: #c9ebcf;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}

.case-result__text {
  width: 100%;
  margin: 0;
  color: #babbbc;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
}

.case-result__stats {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.case-result__stat {
  flex: 1 1 0;
  min-width: 0;
  padding: 24px 40px;
  box-sizing: border-box;
  border-radius: 20px;
  background-color: #1e1e1e;
  overflow: hidden;
}

.case-result__stat-value {
  margin: 0 0 8px;
  color: #4db288;
  font-size: 40px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}

.case-result__stat-text {
  margin: 0;
  color: #babbbc;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
}

.case-table-origin {
  padding: 120px 20px 0;
}

.case-table-origin__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 800px;
  max-width: 100%;
  margin: 0 auto;
}

.case-table-origin__section,
.case-table-origin__audit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

.case-table-origin__title {
  margin: 0;
  color: #ffffff;
  font-size: 36px;
  font-weight: 500;
  line-height: normal;
}

.case-table-origin__subtitle {
  margin: 0;
  color: #ffffff;
  font-size: 24px;
  font-weight: 500;
  line-height: normal;
}

.case-table-origin__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.case-table-origin__text p {
  margin: 0;
  color: #babbbc;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
}

.case-table-origin__images {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.case-table-origin__image {
  position: relative;
  width: 800px;
  max-width: 100%;
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
}

.case-table-origin__image img {
  display: block;
  position: absolute;
  max-width: none;
  object-fit: cover;
}

.case-table-origin__image--network img {
  top: -5%;
  left: -0.93%;
  width: 101.96%;
  height: 175.01%;
}

.case-table-origin__image--requests img {
  top: -39.06%;
  left: -2.95%;
  width: 106.14%;
  height: 183.06%;
}

.case-table-origin__image--servers img {
  top: -4.5%;
  left: -0.87%;
  width: 101.2%;
  height: 205.5%;
}

.case-table-origin__image--domains img {
  top: -6.44%;
  left: -2.24%;
  width: 104.4%;
  height: 182.94%;
}

.case-table-system {
  padding: 120px 20px 0;
}

.case-table-system__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 960px;
  max-width: 100%;
  margin: 0 auto;
}

.case-table-system__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 800px;
  max-width: 100%;
}

.case-table-system__title {
  margin: 0;
  color: #ffffff;
  font-size: 36px;
  font-weight: 500;
  line-height: normal;
}

.case-table-system__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.case-table-system__text p {
  margin: 0;
  color: #babbbc;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
}

.case-table-system__images {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.case-table-system__image {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}

.case-table-system__image img {
  display: block;
  position: absolute;
  max-width: none;
  object-fit: cover;
}

.case-table-system__image--main {
  width: 100%;
  aspect-ratio: 1438 / 778;
}

.case-table-system__image--main img {
  top: -32.39%;
  left: -26.56%;
  width: 130.46%;
  height: 157.71%;
}

.case-table-system__image-row {
  display: flex;
  gap: 16px;
  width: 100%;
}

.case-table-system__image--search,
.case-table-system__image--actions {
  width: 472px;
  height: 353px;
}

.case-table-system__image--search img,
.case-table-system__image--actions img {
  top: -41.86%;
  left: -125.81%;
  width: 232.75%;
  height: 203.82%;
}

.case-design-architecture .case-table-system__inner {
  gap: 48px;
}

.case-design-architecture__image {
  width: 960px;
  max-width: 100%;
  aspect-ratio: 960 / 998;
  border-radius: 16px;
  overflow: hidden;
}

.case-design-architecture__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-design-product__image {
  width: 472px;
  height: 400px;
}

.case-design-product__image--settings img {
  top: 0;
  left: -0.02%;
  width: 133.74%;
  height: 121.73%;
}

.case-design-product__image--dashboard img {
  top: 0;
  left: -36.71%;
  width: 136.81%;
  height: 104.1%;
}

.case-table-application {
  padding: 120px 20px 0;
}

.case-table-application__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 960px;
  max-width: 100%;
  margin: 0 auto;
}

.case-table-application__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 800px;
  max-width: 100%;
}

.case-table-application__title {
  margin: 0;
  color: #ffffff;
  font-size: 36px;
  font-weight: 500;
  line-height: normal;
}

.case-table-application__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.case-table-application__text p {
  margin: 0;
  color: #babbbc;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
}

.case-table-application__images {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.case-table-application__image {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

.case-table-application__image img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.case-table-application__image--sensitivity {
  aspect-ratio: 1197 / 398;
}

.case-table-application__image--attacks {
  aspect-ratio: 1198 / 325;
}

.case-table-application__image--rules {
  aspect-ratio: 1197 / 607;
}

.case-table-result {
  padding: 120px 20px 0;
}

.case-table-result__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 800px;
  max-width: 100%;
  margin: 0 auto;
}

.case-table-result__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

.case-table-result__heading {
  display: flex;
  align-items: center;
  gap: 16px;
}

.case-table-result__title {
  margin: 0;
  color: #ffffff;
  font-size: 36px;
  font-weight: 500;
  line-height: normal;
}

.case-table-result__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.case-table-result__text p {
  margin: 0;
  color: #babbbc;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
}

.case-table-result__panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  width: 960px;
  max-width: calc(100vw - 40px);
  padding: 40px;
  box-sizing: border-box;
  border: 1px solid #2c2d31;
  border-radius: 20px;
  background-color: #15181e;
  overflow: hidden;
}

.case-table-result__item {
  position: relative;
  min-width: 0;
}

.case-table-result__item + .case-table-result__item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -24px;
  width: 1px;
  background-color: #2c2d31;
}

.case-table-result__item-title {
  margin: 0 0 16px;
  color: #4db288;
  font-size: 26px;
  font-weight: 600;
  line-height: normal;
}

.case-table-result__item-text {
  margin: 0;
  color: #babbbc;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
}

.experience {
  padding: 200px 20px 0;
}

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

.experience__title {
  width: 100%;
  margin: 0;
  color: #ffffff;
  font-size: 36px;
  font-weight: 500;
  line-height: normal;
}

.experience__list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.experience-item {
  display: grid;
  grid-template-columns: 200px 200px minmax(0, 800px);
  grid-template-areas: "company role details";
  column-gap: 40px;
  align-items: start;
}

.experience-item__role {
  grid-area: role;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.experience-item__company {
  grid-area: company;
}

.experience-item__details {
  grid-area: details;
}

.experience-item__position,
.experience-item__company {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
}

.experience-item__duration {
  margin: 0;
  color: #86868d;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.experience-item__details ul {
  margin: 0;
  padding-left: 24px;
  color: #c4c5c6;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.experience-item__details li + li {
  margin-top: 8px;
}

.skills {
  padding: 200px 20px 0;
}

.skills__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.skills-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 261px;
}

.skills-group__title {
  margin: 0;
  color: #f6f7f8;
  font-size: 24px;
  font-weight: 500;
  line-height: normal;
}

.skills-group__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

.skill-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: 16px;
  background-color: #2e3035;
  color: #f6f7f8;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  box-sizing: border-box;
}

.skill-chip--icon img {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}

.skill-chip--figma img,
.skill-chip--framer img {
  width: 11px;
}

.skill-chip--midjourney img {
  width: 20px;
}

.footer {
  padding: 200px 20px 80px;
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.footer__copyright {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

.footer__mark {
  display: block;
  width: 59px;
  height: 36px;
}

.footer__year {
  margin: 0;
  color: #f6f7f8;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}

.footer__contacts {
  flex-wrap: nowrap;
}

.case-page main {
  padding-bottom: 104px;
}

.case-floating-nav {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 120;
  width: 328px;
  max-width: calc(100vw - 32px);
  padding: 10px 12px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 80px;
  background-color: rgba(97, 97, 97, 0.4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transform: translateX(-50%);
}

.case-floating-nav.is-anchored {
  position: absolute;
  bottom: auto;
}

.case-floating-nav__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.case-floating-nav__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  box-sizing: border-box;
  border-radius: 32px;
  background-color: #111111;
  color: #f6f7f8;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  white-space: nowrap;
}

.case-floating-nav__button--all {
  gap: 4px;
  width: 141px;
  padding: 8px 24px 8px 18px;
}

.case-floating-nav__button--next {
  gap: 8px;
  width: 159px;
  padding: 8px 18px 8px 24px;
}

.case-floating-nav__button:hover,
.case-floating-nav__button:focus-visible {
  background-color: #1e1e1e;
}

.case-floating-nav__button:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.1);
  outline-offset: 2px;
}

.case-floating-nav__icon {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.case-floating-nav__icon::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 7px;
  width: 8px;
  height: 8px;
  border-top: 1.8px solid currentColor;
  border-left: 1.8px solid currentColor;
}

.case-floating-nav__icon--left::before {
  transform: rotate(-45deg);
}

.case-floating-nav__icon--right::before {
  left: 4px;
  transform: rotate(135deg);
}

@media (max-width: 1320px) {
  .projects__grid {
    grid-template-columns: minmax(0, 628px);
  }
}

@media (max-width: 1280px) and (min-width: 1101px) {
  .case-project {
    padding-top: clamp(40px, calc(40px + (100vw - 1100px) * 0.222), 80px);
  }

  .case-project__card {
    min-height: clamp(500px, calc(500px + (100vw - 1100px) * 0.428), 577px);
  }
}

@media (max-width: 1100px) {
  .hero__title {
    font-size: 40px;
    white-space: normal;
  }

  .hero__tags {
    flex-wrap: wrap;
  }

  .case-project {
    padding: 80px 20px 0;
  }

  .case-project__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    height: clamp(328px, calc(328px + (100vw - 640px) * 0.509), 562px);
    min-height: 0;
    padding: clamp(16px, calc(16px + (100vw - 640px) * 0.04), 32px) clamp(16px, calc(16px + (100vw - 640px) * 0.02), 24px) 0;
    gap: clamp(32px, calc(32px + (100vw - 640px) * 0.02), 40px);
  }

  .case-project__details {
    width: min(100%, 720px);
  }

  .case-project__title {
    max-width: clamp(326px, calc(326px + (100vw - 640px) * 1.1), 720px);
    font-size: clamp(30px, calc(30px + (100vw - 640px) * 0.017), 36px);
    line-height: clamp(32px, calc(32px + (100vw - 640px) * 0.033), 44px);
  }

  .case-project__subtitle {
    max-width: clamp(326px, calc(326px + (100vw - 640px) * 0.6), 720px);
    font-size: clamp(15px, calc(15px + (100vw - 640px) * 0.003), 16px);
    line-height: clamp(20px, calc(20px + (100vw - 640px) * 0.006), 22px);
  }

  .case-project__visual {
    width: clamp(310px, calc(310px + (100vw - 640px) * 1.587), 1040px);
    max-width: 100%;
    height: auto;
    margin-top: 0;
  }

  .case-project__image-frame {
    position: relative;
    left: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1040 / 382;
    transform: none;
  }

  .case-project__image {
    top: -13.2%;
    height: 199.33%;
  }
  
  .experience-item {
    grid-template-columns: 200px minmax(0, 1fr);
    grid-template-areas:
      "company role"
      "details details";
    column-gap: 40px;
    row-gap: 16px;
  }
}

@media (max-width: 900px) {
    .header .container {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0;
      }
    
      .brand {
        display: none;
      }
    
      .contacts {
        width: auto;
        justify-content: center;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
        margin: 0 auto;
      }
  

  .hero__title {
    font-size: 36px;
  }

  .hero__description {
    font-size: 20px;
    line-height: 1.4;
  }

  .projects {
    padding: 120px 20px;
  }

  .project-card {
    width: 100%;
    padding-right: 24px;
    padding-left: 24px;
  }

  .project-card__details {
    width: 100%;
    max-width: 380px;
  }

  .project-card__image-frame {
    width: 100%;
    max-width: 530px;
  }

  .case-summary--stat-pair .case-summary__stat {
    height: 156px;
  }

  .case-table-origin__image {
    width: 100%;
    height: auto;
    aspect-ratio: 800 / 200;
  }

  .case-table-system__image-row {
    flex-direction: row;
  }

  .case-table-system__image--search,
  .case-table-system__image--actions {
    flex: 1 1 0;
    width: auto;
    height: auto;
    aspect-ratio: 472 / 353;
  }

  .case-design-product__image {
    flex: 1 1 0;
    width: auto;
    height: auto;
    aspect-ratio: 472 / 400;
  }

  .case-origin__diagram,
  .case-flow__image--empty,
  .case-flow__image--groups,
  .case-flow__image--rules {
    width: 100%;
    max-width: 100%;
    box-sizing: content-box;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .case-origin__diagram::-webkit-scrollbar,
  .case-flow__image--empty::-webkit-scrollbar,
  .case-flow__image--groups::-webkit-scrollbar,
  .case-flow__image--rules::-webkit-scrollbar {
    display: none;
  }

  .case-origin__diagram picture,
  .case-origin__diagram img {
    width: 960px;
    max-width: none;
  }

  .case-flow__image--setup {
    height: auto;
    aspect-ratio: 960 / 741;
  }

  .case-flow__image--empty img,
  .case-flow__image--groups img,
  .case-flow__image--rules img {
    position: static;
    max-width: none;
    object-fit: cover;
  }

  .case-flow__image--empty {
    height: 333px;
    aspect-ratio: auto;
  }

  .case-flow__image--empty img {
    width: 800px;
    height: 333px;
  }

  .case-flow__image--groups {
    height: 595px;
  }

  .case-flow__image--groups img {
    width: 800px;
    height: 595px;
  }

  .case-flow__image--rules {
    height: 521px;
  }

  .case-flow__image--rules img {
    width: 800px;
    height: 521px;
  }

  .case-scrollbar {
    position: relative;
    display: block;
    width: 100%;
    height: 6px;
    margin-top: -12px;
    border-radius: 999px;
    background-color: #282828;
    overflow: hidden;
    touch-action: none;
  }

  .case-scrollbar__thumb {
    position: absolute;
    top: 0px;
    left: 0;
    width: 40px;
    height: 6px;
    border-radius: 999px;
    background-color: #eaeaea;
  }

  .experience {
    padding: 0 20px 120px;
  }

  .skills {
    padding: 0 16px 0;
  }

  .skills__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 100%;
  }

  .skills-group {
    gap: 24px;
    min-height: 0;
  }

  .skills-group__title {
    font-size: 20px;
  }

  .skills-group__list {
    gap: 8px;
    width: 100%;
  }

  .footer {
    padding: 0 16px;
  }

  .footer__inner {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    padding: 80px 0;
  }

  .footer__copyright {
    order: 2;
    gap: 24px;
  }

  .footer__mark {
    width: 59px;
    height: 36px;
  }

  .footer__contacts {
    order: 1;
    width: auto;
    justify-content: center;
    gap: 12px;
    flex-wrap: nowrap;
  }
}

@media (max-width: 900px) and (min-width: 824px) {
  .case-project__visual {
    width: min(100%, calc(100vw - 84px));
  }
}

@media (max-width: 640px) {
  .case-page main {
    padding-bottom: 88px;
  }

  .case-floating-nav {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .hero {
    padding: 40px 16px 0;
  }

  .hero__media {
    overflow: hidden;
  }

  .hero__media-inner {
    width: 358px;
    height: 216px;
    max-width: 100%;
  }

  .hero__video {
    position: absolute;
    top: 0;
    left: 50%;
    width: 389px;
    max-width: none;
    height: 216px;
    transform: translateX(-50%);
  }

  .hero__title {
    font-size: 32px;
  }

  .hero__tags {
    flex-wrap: wrap;
  }

  .hero__tag,
  .hero__tag--b2b,
  .hero__tag--highload,
  .hero__tag--saas,
  .hero__tag--systems {
    width: auto;
  }

  .hero__description {
    font-size: 16px;
    line-height: 22px;
  }

  .projects {
    padding: 80px 16px 0;
  }

  .projects__grid {
    gap: 24px;
  }

  .project-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 376px;
    padding: 32px 16px 0;
    gap: 40px;
  }

  .project-card__details {
    width: 326px;
    max-width: 100%;
    gap: 16px;
  }

  .project-card__skills {
    flex-wrap: nowrap;
    justify-content: center;
  }

  .project-card__title {
    max-width: none;
    font-size: 20px;
    line-height: 24px;
    white-space: normal;
  }

  .project-card__subtitle {
    max-width: 326px;
    font-size: 15px;
    line-height: 20px;
  }

  .project-card__copy {
    min-height: 96px;
  }

  .project-card__visual {
    width: 326px;
    height: 164px;
    margin-top: 0;
    padding-bottom: 0;
  }

  .project-card__visual::before {
    top: 96px;
    width: 470px;
    height: 360px;
    filter: blur(100px);
  }

  .project-card__image-frame {
    width: 316px;
    height: 242px;
    max-width: none;
  }

  .project-card__image {
    width: 103.16%;
    height: 99.98%;
    transform: translateX(-1.58%);
  }

  .project-card--design-system .project-card__image-frame {
    height: 174px;
    aspect-ratio: auto;
  }

  .project-card--design-system .project-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
  }

  .project-card--wmx .project-card__image-frame {
    height: 176px;
  }

  .case-project {
    padding: 40px 16px 0;
  }

  .case-project__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    height: 328px;
    min-height: 0;
    padding: 16px 16px 0;
    gap: 40px;
  }

  .case-project__copy {
    width: 100%;
  }

  .case-project__details {
    width: 326px;
    max-width: 100%;
    gap: 16px;
  }

  .case-project__skills {
    flex-wrap: nowrap;
    justify-content: center;
  }

  .case-project__title {
    max-width: 326px;
    font-size: 29px;
    line-height: 32px;
    font-weight: 600;
  }

  .case-project__subtitle {
    max-width: 326px;
    font-size: 15px;
    line-height: 20px;
    overflow-wrap: break-word;
  }

  .case-project__visual {
    width: 310px;
    max-width: 100%;
    height: 164px;
    margin-top: 0;
  }

  .case-project__visual::before {
    top: 96px;
    width: 470px;
    height: 360px;
    filter: blur(100px);
  }

  .case-project__image-frame {
    width: 310px;
    height: 176px;
    max-width: 100%;
  }

  .case-project__image {
    top: -7.88%;
    height: 118.97%;
  }

  .case-project--design-system .case-project__card {
    height: 305px;
    gap: 32px;
  }

  .case-project--design-system .case-project__visual {
    height: 117px;
  }

  .case-project--design-system .case-project__image-frame {
    width: 310px;
    height: 136px;
  }

  .case-project--design-system .case-project__image {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .case-summary {
    padding: 80px 16px 0;
  }

  .case-summary__inner {
    width: 358px;
    gap: 24px;
  }

  .case-summary__title {
    font-size: 24px;
  }

  .case-summary__heading {
    gap: 8px;
  }

  .case-summary__text p {
    color: #c4c5c6;
    font-size: 16px;
    line-height: 24px;
  }

  .case-summary__stats {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .case-summary__stat {
    flex: none;
    width: 100%;
    min-height: 156px;
    padding: 24px 40px;
  }

  .case-summary__stat-text {
    font-size: 16px;
  }

  .case-origin {
    padding: 80px 16px 0;
  }

  .case-origin__inner {
    width: 358px;
    gap: 24px;
  }

  .case-origin__intro,
  .case-origin__copy {
    width: 100%;
  }

  .case-origin__title {
    font-size: 24px;
  }

  .case-origin__subtitle {
    font-size: 18px;
  }

  .case-origin__text p {
    color: #c4c5c6;
    font-size: 16px;
    line-height: 24px;
  }

  .case-origin__section {
    gap: 16px;
  }

  .case-origin__diagram picture {
    display: block;
    width: 960px;
    height: 100%;
  }

  .case-origin__diagram img {
    position: static;
    display: block;
    width: 960px;
    max-width: none;
    height: 100%;
    object-fit: cover;
  }

  .case-origin__diagram--legacy {
    height: 271px;
  }

  .case-origin__diagram--group {
    height: 240px;
  }

  .case-flow {
    padding: 80px 16px 0;
  }

  .case-flow__inner {
    width: 358px;
    gap: 48px;
  }

  .case-flow__intro,
  .case-flow__copy {
    width: 100%;
    gap: 16px;
  }

  .case-flow__intro {
    gap: 24px;
  }

  .case-flow__title {
    font-size: 24px;
  }

  .case-flow__subtitle {
    font-size: 18px;
  }

  .case-flow__intro p,
  .case-flow__copy p {
    color: #c4c5c6;
    font-size: 16px;
    line-height: 24px;
  }

  .case-flow__step {
    align-items: flex-start;
    gap: 16px;
  }

  .case-flow__image--setup {
    width: 358px;
    height: 554px;
    border-radius: 16px;
  }

  .case-flow__image--setup > img {
    top: -0.01%;
    left: -111.71%;
    width: 211.71%;
    height: 100.01%;
  }

  .case-flow__setup-screen {
    width: 358px;
    height: 554px;
    border-width: 4px;
    border-radius: 16px;
  }

  .case-flow__setup-screen--secondary {
    top: 0;
    left: 0;
  }

  .case-flow__setup-screen--primary {
    display: none;
  }

  .case-flow__setup-screen img {
    top: -0.01%;
    left: -111.71%;
    width: 211.71%;
    height: 100.01%;
  }

  .case-flow__image--domains {
    width: 358px;
    height: 554px;
    border-radius: 16px;
  }

  .case-flow__image--domains img {
    width: 211.45%;
    max-width: none;
    height: 100.04%;
    position: absolute;
    top: -0.02%;
    left: -111.45%;
    object-fit: cover;
  }

  .case-result {
    padding: 80px 16px 0;
  }

  .case-result__inner {
    width: 358px;
    gap: 24px;
  }

  .case-result__heading {
    gap: 8px;
  }

  .case-result__title {
    font-size: 24px;
  }

  .case-result__text {
    color: #c4c5c6;
    font-size: 16px;
    line-height: 24px;
  }

  .case-result__stats {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .case-result__stat {
    flex: none;
    width: 100%;
    min-height: 156px;
    padding: 24px 40px;
  }

  .case-result__stat-text {
    font-size: 16px;
  }

  .case-table-origin {
    padding: 80px 16px 0;
  }

  .case-table-origin__inner {
    width: 358px;
    gap: 24px;
  }

  .case-table-origin__audit {
    gap: 16px;
  }

  .case-table-origin__section:first-child .case-table-origin__text {
    gap: 8px;
  }

  .case-table-origin__title {
    font-size: 24px;
  }

  .case-table-origin__subtitle {
    font-size: 18px;
  }

  .case-table-origin__text p {
    color: #c4c5c6;
    font-size: 16px;
    line-height: 24px;
  }

  .case-table-origin__image {
    width: 358px;
    height: 90px;
    border-radius: 16px;
  }

  .case-table-origin__images {
    gap: 8px;
  }

  .case-table-system {
    padding: 80px 16px 0;
  }

  .case-table-system__inner,
  .case-table-system__copy {
    width: 358px;
  }

  .case-table-system__title {
    font-size: 24px;
  }

  .case-table-system__text p {
    color: #c4c5c6;
    font-size: 16px;
    line-height: 24px;
  }

  .case-table-system__image {
    border-radius: 10px;
  }

  .case-design-architecture__image {
    border-radius: 16px;
  }

  .case-design-architecture .case-table-system__inner {
    gap: 16px;
  }

  .case-table-system__image-row {
    flex-direction: column;
  }

  .case-table-system__image--search,
  .case-table-system__image--actions {
    flex: none;
    width: 358px;
    height: 268px;
  }

  .case-design-product__image {
    flex: none;
    width: 358px;
    height: auto;
    aspect-ratio: 472 / 400;
  }

  .case-design-product .case-table-system__inner,
  .case-design-product .case-table-system__images {
    gap: 16px;
  }

  .case-design-product .case-table-system__image-row {
    gap: 16px;
  }

  .case-design-product__image--dashboard {
    order: 1;
    height: 304px;
    aspect-ratio: auto;
    border-radius: 16px;
  }

  .case-design-product__image--settings {
    order: 2;
    height: 303px;
    aspect-ratio: auto;
    border-radius: 16px;
  }

  .case-design-product .case-table-system__image--main {
    height: 194px;
    aspect-ratio: auto;
    border-radius: 16px;
  }

  .case-table-application {
    padding: 80px 16px 0;
  }

  .case-table-application__inner,
  .case-table-application__copy {
    width: 358px;
  }

  .case-table-application__inner,
  .case-table-application__images {
    gap: 16px;
  }

  .case-table-application__title {
    font-size: 24px;
  }

  .case-table-application__text p {
    color: #c4c5c6;
    font-size: 16px;
    line-height: 24px;
  }

  .case-table-application__image {
    width: 358px;
    border-radius: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .case-table-application__image::-webkit-scrollbar {
    display: none;
  }

  .case-table-application__image img {
    width: 800px;
    max-width: none;
    object-fit: cover;
  }

  .case-table-application__image--sensitivity {
    height: 266px;
    aspect-ratio: auto;
  }

  .case-table-application__image--attacks {
    height: 217px;
    aspect-ratio: auto;
  }

  .case-table-application__image--rules {
    height: 406px;
    aspect-ratio: auto;
  }

  .case-table-result {
    padding: 80px 16px 0;
  }

  .case-table-result__inner {
    width: 358px;
  }

  .case-table-result__heading {
    gap: 8px;
  }

  .case-table-result__title {
    font-size: 24px;
  }

  .case-table-result__text p {
    color: #c4c5c6;
    font-size: 16px;
    line-height: 24px;
  }

  .case-table-result__panel {
    grid-template-columns: 1fr;
    gap: 24px;
    width: 358px;
    max-width: 100%;
    padding: 40px;
  }

  .case-table-result__item + .case-table-result__item {
    padding-top: 24px;
  }

  .case-table-result__item + .case-table-result__item::before {
    top: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 1px;
  }

  .case-table-result__item-title {
    font-size: 26px;
  }

  .case-table-result__item-text {
    color: #babbbc;
    font-size: 18px;
    line-height: 26px;
  }

  .experience {
    padding: 80px 16px 0;
  }

  .experience__inner {
    gap: 40px;
  }

  .experience__title {
    font-size: 24px;
  }

  .experience__list {
    gap: 32px;
  }

  .experience-item {
    grid-template-columns: 1fr;
    grid-template-areas:
      "company"
      "role"
      "details";
    gap: 16px;
  }

  .experience-item__position,
  .experience-item__company {
    font-size: 18px;
  }

  .experience-item__duration {
    font-size: 16px;
  }

  .experience-item__details ul {
    font-size: 16px;
    line-height: 24px;
  }

  .skills {
    padding: 80px 16px 0;
  }

  .skills__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 100%;
  }

  .skills-group {
    gap: 24px;
    min-height: 0;
  }

  .skills-group__title {
    font-size: 20px;
  }

  .skills-group__list {
    gap: 8px;
    width: 100%;
  }

  .footer {
    padding: 0 16px;
  }

  .footer__inner {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    padding: 80px 0;
  }

  .footer__copyright {
    order: 2;
    gap: 24px;
  }

  .footer__mark {
    width: 59px;
    height: 36px;
  }

  .footer__contacts {
    order: 1;
    width: auto;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .contacts__link {
    width: auto;
    min-width: 0;
    padding-right: 14px;
    padding-left: 16px;
  }

  .contacts__link--cv {
    min-width: 77px;
  }

  .contacts__link--telegram {
    min-width: 121px;
  }

  .contacts__link--email {
    min-width: 93px;
  }

  .contacts__text-desktop {
    display: none;
  }

  .contacts__text-mobile {
    display: inline;
  }

  .brand__name {
    font-size: 20px;
  }
}

@media (min-width: 641px) {
  .case-table-application__image + .case-scrollbar {
    display: none !important;
  }
}

@media (max-width: 1100px) {
  .case-project--table .case-project__details {
    width: min(100%, 753px);
  }

  .case-project--table .case-project__subtitle {
    max-width: clamp(326px, calc(326px + (100vw - 640px) * 0.86), 636px);
    font-size: clamp(15px, calc(15px + (100vw - 640px) * 0.008), 18px);
  }

  .case-project--table .case-project__image-frame {
    aspect-ratio: 1040 / 383;
  }

  .case-project--table .case-project__image {
    top: -24.8%;
    left: -0.06%;
    width: 100.12%;
    height: 177.81%;
  }
}

@media (max-width: 640px) {
  .case-project--table .case-project__image {
    top: -0.73%;
    left: -0.06%;
    width: 100.12%;
    height: 115.17%;
  }

  .case-summary--stat-pair .case-summary__stat:first-child {
    padding-right: 32px;
    padding-left: 32px;
  }

  .case-summary--result .case-summary__stat:first-child {
    padding-right: 40px;
    padding-left: 40px;
  }

  .case-summary--stat-pair .case-summary__stats {
    gap: 8px;
  }

  .case-summary--stat-pair .case-summary__stat-text::first-letter {
    text-transform: uppercase;
  }
}

@media (max-width: 641px) {
  .case-project__subtitle {
    display: none;
  }
}