.indicators-strip {
  padding: 2.2rem clamp(1.25rem, 5vw, 5rem);
  background: #f4f7f5;
}

.indicators-shell {
  position: relative;
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.4rem;
  padding: 1.55rem 1.7rem;
  overflow: hidden;
  border: 1px solid #ffffff1f;
  border-radius: 18px;
  background: linear-gradient(115deg, #063b2b, #07543b 70%, #096445);
  color: #fff;
  box-shadow: 0 16px 38px #062d2326;
}

.indicators-icon {
  position: relative;
  z-index: 2;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid #ffffff2b;
  border-radius: 14px;
  background: #ffffff12;
  color: #f2c94c;
}

.indicators-icon svg {
  width: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.indicators-copy { position: relative; z-index: 2; }
.indicators-label { margin: 0 0 .28rem; color: #f2c94c; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.indicators-copy h2 { margin: 0 0 .35rem; font-size: clamp(1.25rem, 2.25vw, 1.85rem); line-height: 1.18; }
.indicators-copy > p:last-child { max-width: 735px; margin: 0; color: #d6e7df; font-size: .92rem; line-height: 1.55; }

.indicators-button {
  position: relative;
  z-index: 2;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: .85rem 1.05rem;
  border: 1px solid #ffffff38;
  border-radius: 10px;
  background: #fff;
  color: #0a4a34;
  font-size: .88rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}

.indicators-button svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .3s ease; }
.indicators-button:hover, .indicators-button:focus-visible { background: #f2c94c; transform: translateY(-2px); box-shadow: 0 10px 24px #001b142e; }
.indicators-button:hover svg, .indicators-button:focus-visible svg { transform: translateX(3px); }

.indicators-texture { position: absolute; inset: 0; pointer-events: none; }
.indicators-texture::before, .indicators-texture::after { content: ""; position: absolute; width: 240px; height: 1px; right: 19%; top: 28%; background: linear-gradient(90deg, transparent, #f2c94c66, transparent); transform: rotate(-18deg); }
.indicators-texture::after { right: 7%; top: 76%; background: linear-gradient(90deg, transparent, #df5b4952, transparent); transform: rotate(13deg); }
.indicators-texture i { position: absolute; width: 6px; height: 6px; border-radius: 50%; opacity: .45; }
.indicators-texture i:nth-child(1) { right: 31%; top: 24%; background: #f2c94c; }
.indicators-texture i:nth-child(2) { right: 19%; top: 51%; background: #e45643; }
.indicators-texture i:nth-child(3) { right: 11%; top: 69%; background: #ef8b38; }
.indicators-texture i:nth-child(4) { left: 7%; bottom: 14%; background: #67b878; }

@media (max-width: 760px) {
  .indicators-shell { grid-template-columns: auto 1fr; }
  .indicators-button { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 520px) {
  .indicators-strip { padding: 1.5rem 1rem; }
  .indicators-shell { grid-template-columns: 1fr; padding: 1.35rem; }
  .indicators-icon { width: 50px; height: 50px; }
  .indicators-button { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .indicators-button, .indicators-button svg { transition: none; }
  .indicators-button:hover, .indicators-button:focus-visible, .indicators-button:hover svg, .indicators-button:focus-visible svg { transform: none; }
}