/* Файл оформляет лендинг ANSA: compact-features.css из макета ANSA, пути ресурсов переведены на /assets. */
/* Four compact feature cards, half the original illustration-card height. */
.landing .l-service-features { margin-top: 72px; scroll-margin-top: 88px; }
.landing .l-service-features-heading { text-align: center; margin-bottom: 32px; }
.landing .l-service-features-heading .l-section-label { margin-bottom: 16px; }
.landing .l-service-features-heading h2 { font-size: 30px; line-height: 1.2; font-weight: 500; letter-spacing: -.4px; }
.landing .l-service-features .l-why-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 904px;
  margin: 0 auto;
}
.landing .l-service-features .l-why {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 62px;
  width: 100%;
  height: 240px;
  padding: 16px;
  border-radius: 14px;
  min-width: 0;
}
.landing .l-service-features .l-why-copy { margin-top: 0; padding-top: 12px; }
.landing .l-service-features .l-why h3 { font-size: 14px; line-height: 18px; letter-spacing: -.2px; font-weight: 500; white-space: nowrap; }
.landing .l-service-features .l-why-copy p { margin-top: 6px; font-size: 12px; line-height: 16px; letter-spacing: 0; color: #afa4ac; }
.landing .l-service-features .l-why-protection h3 { font-size: 13px; letter-spacing: -.3px; }
.landing .l-feature-symbol-stage { display: grid; place-items: center; min-height: 0; }
/* Animate HTML layers: SVG child transforms and animated filters can force
   Safari to repaint the entire illustration instead of compositing its motion. */
.landing .l-feature-art { position: relative; width: 96px; height: 96px; }
.landing .l-feature-symbol { display: block; width: 100%; height: 100%; overflow: visible; }
.landing :is(.l-conversation-bars, .l-slider-knobs) { position: absolute; inset: 0; }
.landing .l-conversation-bars > span {
  position: absolute;
  width: 2.8%;
  border-radius: 2px;
  background: #f2b0c2;
  transform-origin: center;
  animation: ansa-conversation-pulse 2.4s ease-in-out infinite !important;
  animation-play-state: paused !important;
}
.landing .l-conversation-bars > span:nth-child(1) { left: 30.6%; top: 44.6%; height: 10.8%; }
.landing .l-conversation-bars > span:nth-child(2) { left: 39.6%; top: 37.6%; height: 24.8%; animation-delay: -.4s !important; }
.landing .l-conversation-bars > span:nth-child(3) { left: 48.6%; top: 32.6%; height: 34.8%; animation-delay: -.8s !important; }
.landing .l-conversation-bars > span:nth-child(4) { left: 57.6%; top: 38.6%; height: 22.8%; animation-delay: -1.2s !important; }
.landing .l-conversation-bars > span:nth-child(5) { left: 66.6%; top: 43.6%; height: 12.8%; animation-delay: -1.6s !important; }
.landing .l-slider-knobs > span {
  position: absolute;
  width: 14.4%;
  height: 14.4%;
  border: 2.304px solid #f0a8bc;
  border-radius: 50%;
  background: #42202e;
  animation: ansa-slider-drift 4.2s ease-in-out infinite !important;
  animation-play-state: paused !important;
}
.landing .l-slider-knobs > span:nth-child(1) { left: 29.8%; top: 20.8%; }
.landing .l-slider-knobs > span:nth-child(2) { left: 56.8%; top: 42.8%; animation-name: ansa-slider-drift-short !important; animation-delay: -1.4s !important; }
.landing .l-slider-knobs > span:nth-child(3) { left: 37.8%; top: 64.8%; animation-delay: -2.8s !important; }
.landing .l-lock-motion {
  animation: ansa-lock-float 3.6s ease-in-out infinite !important;
  animation-play-state: paused !important;
}
.landing .l-lock-motion::before {
  content: "";
  position: absolute;
  inset: -12px;
  background: radial-gradient(ellipse, #f29fbd38, #f29fbd00 65%);
  animation: ansa-lock-glow 3.6s ease-in-out infinite !important;
  animation-play-state: paused !important;
}
.landing .is-animating :is(.l-conversation-bars > span, .l-slider-knobs > span, .l-lock-motion) {
  animation-play-state: running !important;
  will-change: transform, opacity;
}
.landing .is-animating .l-lock-motion::before { animation-play-state: running !important; will-change: opacity; }
@keyframes ansa-conversation-pulse {
  0%, 100% { transform: translate3d(0, 0, 0) scaleY(.6); opacity: .6; }
  50% { transform: translate3d(0, 0, 0) scaleY(1); opacity: 1; }
}
@keyframes ansa-slider-drift {
  0%, 100% { transform: translate3d(-11.52px, 0, 0); }
  50% { transform: translate3d(11.52px, 0, 0); }
}
@keyframes ansa-slider-drift-short {
  0%, 100% { transform: translate3d(-9.6px, 0, 0); }
  50% { transform: translate3d(9.6px, 0, 0); }
}
@keyframes ansa-lock-float {
  0%, 100% { transform: translate3d(0, 1.92px, 0) scale(1); opacity: .75; }
  50% { transform: translate3d(0, -4.8px, 0) scale(1.05); opacity: 1; }
}
@keyframes ansa-lock-glow { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.landing .l-why-uptime::before { background-image: radial-gradient(ellipse at 50% 20%, #a8264570, transparent 65%); }
.landing .l-why-protection::before { background-image: radial-gradient(ellipse at 50% 35%, #bb385070, transparent 65%); }
.landing :is(.l-uptime-stage, .l-protection-stage) { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.landing .l-uptime-stage { flex-direction: column; gap: 16px; }
.landing .l-uptime-number {
  position: relative;
  font-size: 52px;
  line-height: 1;
  font-weight: 590;
  letter-spacing: -3px;
}
.landing :is(.l-uptime-number, .l-uptime-highlight) {
  background: linear-gradient(110deg, #9e455c 10%, #ffe2e9 40%, #ed8ca3 60%, #9e455c 90%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.landing :is(.l-uptime-number, .l-uptime-highlight) > span:not(.l-uptime-highlight) { font-weight: 300; padding: 0 3px; color: #be7085; }
/* Crossfade two static text gradients instead of repainting background-position. */
.landing .l-uptime-highlight {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(110deg, #ed8ca3 10%, #9e455c 40%, #ffe2e9 60%, #ed8ca3 90%);
  animation: ansa-uptime-shine 5s ease-in-out infinite !important;
  animation-play-state: paused !important;
}
.landing .l-uptime-track { display: flex; gap: 5px; }
.landing .l-uptime-track > span {
  width: 13px;
  height: 4px;
  border-radius: 3px;
  background: #ed8ca3;
  box-shadow: 0 0 8px #d4547550;
  animation: ansa-uptime-pulse 2.8s ease-in-out infinite !important;
  animation-play-state: paused !important;
}
.landing .l-uptime-track > span:nth-child(2) { animation-delay: -.4s !important; }
.landing .l-uptime-track > span:nth-child(3) { animation-delay: -.8s !important; }
.landing .l-uptime-track > span:nth-child(4) { animation-delay: -1.2s !important; }
.landing .l-uptime-track > span:nth-child(5) { animation-delay: -1.6s !important; }
.landing .l-uptime-track > span:nth-child(6) { animation-delay: -2s !important; }
.landing .l-uptime-track > span:nth-child(7) { animation-delay: -2.4s !important; }
.landing .is-animating :is(.l-uptime-highlight, .l-uptime-track > span) { animation-play-state: running !important; will-change: opacity; }
@keyframes ansa-uptime-shine { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes ansa-uptime-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (max-width: 1100px) {
  .landing .l-service-features .l-why-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 600px; }
}
@media (max-width: 480px) {
  .landing .l-service-features-heading h2 { font-size: 26px; }
  .landing .l-service-features .l-why-cards { grid-template-columns: 1fr; max-width: 320px; gap: 14px; }
  .landing .l-service-features .l-why { height: 240px; }
}