.moscow-v4.moscow-services-catalog .services-showcase-hero {
  --hero-blue: #2765ff;
  --hero-violet: #7048f5;
  --hero-mint: #20d6a0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(510px, .94fr) minmax(560px, 1.06fr);
  grid-template-rows: 1fr auto;
  width: min(1780px, calc(100% - 32px));
  min-height: 570px;
  margin: 0 auto;
  padding: 60px 62px 34px;
  overflow: hidden;
  color: #070b15;
  background:
    radial-gradient(circle at 64% 22%, rgba(112, 72, 245, .12), transparent 25%),
    radial-gradient(circle at 75% 8%, rgba(32, 214, 160, .13), transparent 22%),
    linear-gradient(180deg, #fbfcff 0%, #fff 73%, #f7faff 100%);
}

.services-showcase-hero::before {
  content: "";
  position: absolute;
  right: -4%;
  bottom: -35%;
  width: 64%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(185, 198, 222, .34), rgba(234, 239, 247, .08) 58%, transparent 72%);
  filter: blur(7px);
  pointer-events: none;
}

.services-showcase-copy,
.services-showcase-visual,
.services-showcase-trust,
.services-showcase-mobile-links { position: relative; z-index: 1; }

.services-showcase-copy {
  z-index: 2;
  align-self: center;
  min-width: 0;
  padding: 8px 0 10px;
}

.services-showcase-kicker {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 34px;
  color: #7b8498;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
  white-space: nowrap;
}

.services-showcase-kicker span:first-child { color: #172034; }
.services-showcase-kicker i { width: 68px; height: 1px; background: #d4d9e3; }
.services-showcase-mobile-kicker { display: none; }

.moscow-v4.moscow-services-catalog .services-showcase-hero h1 {
  max-width: 720px;
  margin: 0;
  color: #05070c;
  font: 800 clamp(59px, 5.5vw, 86px)/.94 "Onest", Arial, sans-serif;
  letter-spacing: -.065em;
}

.services-showcase-hero h1 span { display: none; }

.moscow-v4.moscow-services-catalog .services-showcase-lead {
  margin: 25px 0 0;
  color: #5e6678;
  font: 400 clamp(21px, 2vw, 31px)/1.23 "Onest", Arial, sans-serif;
  letter-spacing: -.03em;
}

.services-showcase-actions { display: flex; gap: 22px; margin-top: 36px; }
.services-showcase-actions > * {
  min-height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 0 34px;
  border: 1px solid #aeb5c3;
  border-radius: 13px;
  color: #0b0f18;
  background: rgba(255, 255, 255, .78);
  font: 750 16px/1 "Onest", Arial, sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.services-showcase-actions > *:hover { transform: translateY(-2px); border-color: #758096; box-shadow: 0 13px 30px rgba(54, 72, 107, .11); }
.services-showcase-actions .services-showcase-primary {
  min-width: 292px;
  border-color: transparent;
  background: linear-gradient(105deg, #68eabd 0%, #1ed7a3 58%, #10cfa3 100%);
  box-shadow: 0 17px 36px rgba(25, 208, 156, .23);
}
.services-showcase-actions span { font-size: 24px; font-weight: 400; }

.services-showcase-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: 790px;
  margin-top: 50px;
}
.services-showcase-proof > div { display: flex; gap: 17px; min-width: 0; padding: 0 24px; border-right: 1px solid #d9dee7; }
.services-showcase-proof > div:first-child { padding-left: 0; }
.services-showcase-proof > div:last-child { padding-right: 0; border-right: 0; }
.services-proof-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #06b67f;
  background: linear-gradient(145deg, #dbfff2, #eefdf8);
}
.services-proof-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.services-showcase-proof p { margin: 1px 0 0; }
.services-showcase-proof strong,
.services-showcase-proof p span { display: block; }
.services-showcase-proof strong { margin-bottom: 6px; font: 750 13px/1.2 "Onest", Arial, sans-serif; white-space: nowrap; }
.services-showcase-proof p span { color: #81899a; font: 400 11px/1.45 "Onest", Arial, sans-serif; }

.services-showcase-visual { min-width: 0; min-height: 470px; }
.services-showcase-glow {
  position: absolute;
  top: -110px;
  left: 3%;
  width: 85%;
  aspect-ratio: 1.3;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(211, 255, 244, .8), rgba(226, 225, 255, .76));
  filter: blur(2px);
  transform: rotate(8deg);
}
.services-showcase-laptop {
  position: absolute;
  top: 24px;
  right: 5%;
  width: 92%;
  aspect-ratio: 1.55;
  padding: 15px 15px 24px;
  border: 3px solid #4b5361;
  border-radius: 24px 24px 13px 13px;
  background: linear-gradient(145deg, #292f3b, #69717d 45%, #2b303a);
  box-shadow: 0 32px 60px rgba(31, 44, 69, .24);
  transform: perspective(1200px) rotateY(-3deg) rotateZ(-1deg);
  transform-origin: bottom center;
}
.services-showcase-laptop::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -5%;
  bottom: -28px;
  left: -5%;
  height: 34px;
  border-radius: 3px 3px 21px 21px;
  background: linear-gradient(180deg, #e6e9ef, #9da6b3 55%, #e6e9ef 58%, #b8c0ca);
  box-shadow: 0 14px 20px rgba(36, 45, 61, .18);
}
.services-showcase-laptop::before {
  content: "";
  position: absolute;
  z-index: 3;
  bottom: -13px;
  left: 42%;
  width: 16%;
  height: 5px;
  border-radius: 0 0 7px 7px;
  background: #848d99;
}
.services-laptop-camera { position: absolute; top: 6px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: #8993a3; transform: translateX(-50%); }
.services-laptop-screen { height: 100%; overflow: hidden; border-radius: 10px 10px 5px 5px; background: #fff; }
.services-laptop-screen picture,
.services-laptop-screen img { display: block; width: 100%; height: auto; }

.services-showcase-phone {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 8px;
  width: 150px;
  height: 302px;
  padding: 27px 14px 15px;
  overflow: hidden;
  border: 8px solid #222933;
  border-radius: 25px;
  color: #151927;
  background: linear-gradient(180deg, #fff, #f5f7ff);
  box-shadow: 0 22px 35px rgba(20, 27, 43, .25);
  transform: rotate(1.5deg);
}
.services-phone-speaker { position: absolute; top: 7px; left: 50%; width: 38px; height: 5px; border-radius: 999px; background: #111722; transform: translateX(-50%); }
.services-phone-brand { display: flex; align-items: center; gap: 4px; font-size: 8px; font-weight: 800; }
.services-phone-brand b { color: #6751f6; font-size: 18px; font-style: italic; }
.services-phone-brand i { margin-left: auto; font-style: normal; }
.services-showcase-phone > strong { display: block; margin-top: 33px; font: 800 14px/1.05 "Onest", Arial, sans-serif; letter-spacing: -.04em; }
.services-showcase-phone > small { display: block; margin-top: 12px; color: #6c7486; font-size: 7px; line-height: 1.35; }
.services-showcase-phone > button { min-height: 27px; margin-top: 15px; padding: 0 12px; border: 0; border-radius: 4px; color: #fff; background: linear-gradient(90deg, #315cf7, #7244ec); font-size: 7px; }
.services-phone-people { display: flex; margin-top: 21px; }
.services-phone-people i { width: 18px; height: 18px; margin-right: -5px; border: 2px solid #fff; border-radius: 50%; background: linear-gradient(145deg, #ffd2bb, #59443e); }
.services-phone-people i:nth-child(2) { background: linear-gradient(145deg, #efd2b7, #1d2439); }
.services-phone-people i:nth-child(3) { background: linear-gradient(145deg, #f6c3ab, #7c4b34); }
.services-phone-total { display: block; margin-top: 9px; font-size: 8px; }
.services-phone-total small { display: block; margin-top: 2px; color: #70788a; font-size: 6px; font-weight: 400; }

.services-showcase-note {
  position: absolute;
  z-index: 5;
  top: 4px;
  right: -12px;
  color: #68789c;
  font: italic 21px/1.08 "Segoe Print", "Comic Sans MS", cursive;
  transform: rotate(4deg);
}
.services-showcase-note span { display: block; margin: -2px 0 0 18px; color: #4266e6; font-size: 52px; line-height: .8; transform: rotate(-22deg); }
.services-showcase-trust,
.services-showcase-mobile-links { display: none; }

@media (max-width: 1240px) {
  .moscow-v4.moscow-services-catalog .services-showcase-hero { grid-template-columns: minmax(450px, .95fr) minmax(480px, 1.05fr); padding-inline: 42px; }
  .services-showcase-kicker { gap: 12px; font-size: 8px; }
  .services-showcase-kicker i { width: 38px; }
  .services-showcase-proof > div { padding-inline: 14px; }
  .services-showcase-proof strong { font-size: 11px; }
  .services-showcase-phone { right: -7px; transform: scale(.9) rotate(1.5deg); transform-origin: bottom right; }
  .services-showcase-note { display: none; }
}

@media (max-width: 900px) {
  .moscow-v4.moscow-services-catalog .services-showcase-hero {
    display: block;
    width: calc(100% - 24px);
    min-height: 0;
    padding: 42px 24px 30px;
    border-radius: 0;
    background:
      radial-gradient(circle at 76% 31%, rgba(112, 72, 245, .13), transparent 25%),
      radial-gradient(circle at 42% 68%, rgba(32, 214, 160, .13), transparent 28%),
      linear-gradient(180deg, #fbfcff, #f9fbff 72%, #fff);
  }
  .services-showcase-kicker { display: none; }
  .services-showcase-mobile-kicker {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 9px 16px;
    border-radius: 999px;
    color: #b11d25;
    background: #ffebed;
    font-size: 12px;
    line-height: 1.2;
  }
  .services-showcase-mobile-kicker i { width: 8px; height: 8px; border-radius: 50%; background: #ed1c24; box-shadow: 0 0 0 5px rgba(237, 28, 36, .07); }
  .moscow-v4.moscow-services-catalog .services-showcase-hero h1 { max-width: 690px; font-size: clamp(48px, 9.4vw, 72px); }
  .services-showcase-hero h1 span { display: inline; background: linear-gradient(90deg, #5e4ef0 0%, #4a5df4 55%, #1679f6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .moscow-v4.moscow-services-catalog .services-showcase-lead { font-size: clamp(20px, 3.3vw, 28px); }
  .services-showcase-actions { max-width: 680px; }
  .services-showcase-actions > * { flex: 1 1 0; min-width: 0; }
  .services-showcase-proof { display: none; }
  .services-showcase-visual { min-height: 510px; margin-top: 34px; }
  .services-showcase-laptop { top: 26px; right: 5%; width: 90%; transform: none; }
  .services-showcase-phone { right: 2%; bottom: 28px; width: 142px; height: 286px; transform: none; }
  .services-showcase-trust { display: block; margin: 2px 0 27px; color: #778196; }
  .services-showcase-trust > span { display: block; margin-bottom: 18px; font-size: 13px; }
  .services-showcase-trust > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .services-showcase-trust b { color: #717b8d; font: 750 clamp(15px, 3.2vw, 24px)/1 "Onest", Arial, sans-serif; }
  .services-showcase-mobile-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 22px 12px;
    border: 1px solid #eef0f6;
    border-radius: 22px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 14px 42px rgba(73, 88, 119, .08);
  }
  .services-showcase-mobile-links a { min-width: 0; color: #151923; text-align: center; text-decoration: none; font-size: 11px; line-height: 1.2; }
  .services-showcase-mobile-links i { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 10px; border-radius: 50%; color: #245ff4; background: #edf3ff; font-size: 22px; font-style: normal; }
  .services-showcase-mobile-links a:nth-child(2) i { color: #04b58a; background: #e6fff7; }
  .services-showcase-mobile-links a:nth-child(3) i { color: #f66b2b; background: #fff1e9; }
  .services-showcase-mobile-links a:nth-child(4) i { color: #7048f5; background: #f1edff; }
}

@media (max-width: 620px) {
  .moscow-v4.moscow-services-catalog .services-showcase-hero { width: calc(100% - 16px); padding: 28px 14px 22px; }
  .services-showcase-mobile-kicker { max-width: 100%; padding: 8px 12px; font-size: 10px; }
  .moscow-v4.moscow-services-catalog .services-showcase-hero h1 { font-size: clamp(42px, 12vw, 58px); line-height: .96; }
  .moscow-v4.moscow-services-catalog .services-showcase-lead { margin-top: 18px; font-size: clamp(17px, 5.1vw, 23px); line-height: 1.3; }
  .services-showcase-actions { gap: 10px; margin-top: 27px; }
  .services-showcase-actions > * { min-height: 54px; padding: 0 13px; border-radius: 10px; gap: 10px; font-size: 12px; white-space: nowrap; }
  .services-showcase-actions .services-showcase-primary { min-width: 0; flex: 1.25 1 0; }
  .services-showcase-actions span { font-size: 18px; }
  .services-showcase-visual { min-height: 370px; margin-top: 24px; }
  .services-showcase-laptop { top: 24px; right: 1%; width: 98%; padding: 8px 8px 14px; border-width: 2px; border-radius: 15px 15px 8px 8px; }
  .services-showcase-laptop::after { bottom: -17px; height: 21px; }
  .services-showcase-laptop::before { bottom: -8px; height: 3px; }
  .services-laptop-screen { border-radius: 6px 6px 3px 3px; }
  .services-showcase-phone { right: 1%; bottom: 27px; width: 108px; height: 218px; padding: 20px 10px 9px; border-width: 6px; border-radius: 19px; }
  .services-phone-speaker { top: 5px; width: 28px; height: 4px; }
  .services-phone-brand { font-size: 6px; }
  .services-phone-brand b { font-size: 13px; }
  .services-showcase-phone > strong { margin-top: 20px; font-size: 10px; }
  .services-showcase-phone > small { margin-top: 7px; font-size: 5.5px; }
  .services-showcase-phone > button { min-height: 21px; margin-top: 9px; padding-inline: 8px; font-size: 5.5px; }
  .services-phone-people { margin-top: 11px; }
  .services-phone-people i { width: 14px; height: 14px; }
  .services-phone-total { margin-top: 5px; font-size: 6px; }
  .services-phone-total small { font-size: 4.5px; }
  .services-showcase-trust { margin-top: -5px; }
  .services-showcase-trust > span { margin-bottom: 15px; font-size: 11px; }
  .services-showcase-trust b { font-size: clamp(13px, 4vw, 19px); }
  .services-showcase-mobile-links { padding: 18px 5px; border-radius: 18px; }
  .services-showcase-mobile-links a { font-size: 9px; }
  .services-showcase-mobile-links i { width: 39px; height: 39px; margin-bottom: 8px; font-size: 18px; }
}

@media (max-width: 430px) {
  .services-showcase-actions { flex-direction: column; }
  .services-showcase-actions > * { width: 100%; flex-basis: auto; }
  .services-showcase-visual { min-height: 330px; }
  .services-showcase-trust > div { gap: 6px; }
  .services-showcase-mobile-links span { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .services-showcase-actions > * { transition: none; }
}
