/* Monitoring Solutions section. Tokens: navy #0d1b2a, gold #f1b621, navy text on gold. */
:root { --mon-navy: #0d1b2a; --mon-navy-2: #16304a; --mon-gold: #f1b621; --mon-ink: #0d1b2a; --mon-muted: #4a5663; --mon-line: #e3e7ec; --mon-soft: #f4f6f8; }
.mon-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.mon-reveal.is-visible { opacity: 1; transform: none; }
.mon-reveal.d1 { transition-delay: .08s; } .mon-reveal.d2 { transition-delay: .16s; }

.mon-hero { min-height: 46vh; background-image: none; }
.mon-hero .ind-hero-overlay { background: linear-gradient(135deg, #0d1b2a 0%, #0d1b2a 55%, #16304a 100%); }
.mon-hero .btn-mon-ghost { margin-left: .75rem; }
.mon-crumb { font-size: .8rem; color: rgba(255,255,255,.65); margin-bottom: .75rem; }
.mon-crumb a { color: var(--mon-gold); }

.mon-status { background: var(--mon-soft); border-left: 4px solid var(--mon-gold); padding: 1.1rem 1.4rem; border-radius: 6px; margin: 0; font-size: .9rem; color: var(--mon-ink); line-height: 1.65; }
.mon-status strong { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; background: var(--mon-gold); color: var(--mon-navy); padding: .12rem .55rem; border-radius: 20px; margin-right: .5rem; }
.mon-status-wrap { padding: 28px 0 0; background: #fff; }

.mon-block { padding: 80px 0; }
.mon-block--soft { background: var(--mon-soft); }
.mon-block--navy { background: var(--mon-navy); }
.mon-block--navy .ind-section-title { color: #fff; }
.mon-block--navy .ind-section-subtitle { color: rgba(255,255,255,.7); }

.mon-demo-frame { border: 1px solid rgba(241,182,33,.4); border-radius: 14px; overflow: hidden; background: var(--mon-navy); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.mon-demo-frame iframe { display: block; width: 100%; height: 560px; border: 0; background: var(--mon-navy); }
.mon-demo-scope { font-size: .82rem; color: rgba(255,255,255,.7); text-align: center; margin: 1rem auto 0; max-width: 720px; line-height: 1.6; }
.mon-demo-links { margin-top: 1rem; text-align: center; }
.mon-demo-links a { color: var(--mon-gold); font-weight: 700; font-size: .92rem; margin: 0 .75rem; }
.mon-nodemo { border: 1px dashed rgba(241,182,33,.55); border-radius: 14px; padding: 2.2rem 1.6rem; text-align: center; color: #fff; background: rgba(255,255,255,.03); }
.mon-nodemo h3 { color: var(--mon-gold); font-size: 1.15rem; font-weight: 700; margin-bottom: .6rem; }
.mon-nodemo p { color: rgba(255,255,255,.78); max-width: 680px; margin: 0 auto .8rem; line-height: 1.7; font-size: .92rem; }
.mon-nodemo a { color: var(--mon-gold); font-weight: 700; }

.mon-arch { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: .5rem; margin-top: 2rem; }
.mon-arch-step { background: var(--mon-soft); border: 1px solid var(--mon-line); border-left: 3px solid var(--mon-gold); border-radius: 8px; padding: 1.1rem 1.2rem; flex: 1 1 150px; max-width: 220px; text-align: center; }
.mon-arch-step i { color: var(--mon-gold); font-size: 1.4rem; display: block; margin-bottom: .5rem; }
.mon-arch-step h6 { font-size: .84rem; font-weight: 700; color: var(--mon-ink); margin-bottom: .3rem; }
.mon-arch-step p { font-size: .75rem; color: var(--mon-muted); margin: 0; line-height: 1.45; }
.mon-arch-arrow { color: var(--mon-gold); align-self: center; }

.mon-kit-card { background: #fff; border-radius: 8px; padding: 1.5rem 1.35rem; border-top: 3px solid var(--mon-gold); height: 100%; width: 100%; }
.mon-kit-card i { color: var(--mon-gold); font-size: 1.2rem; display: block; margin-bottom: .6rem; }
.mon-kit-card h5 { font-size: .92rem; font-weight: 700; color: var(--mon-ink); margin-bottom: .5rem; }
.mon-kit-card p { font-size: .82rem; color: var(--mon-muted); line-height: 1.6; margin: 0 0 .8rem; }
.mon-chip { display: inline-block; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .16rem .55rem; border-radius: 20px; background: var(--mon-soft); color: var(--mon-ink); border: 1px solid #c9d0d8; }
.mon-chip--gold { background: var(--mon-gold); color: var(--mon-navy); border-color: var(--mon-gold); }

.mon-roi-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 1.6rem 1.3rem; text-align: center; height: 100%; width: 100%; }
.mon-roi-card .roi-figure { font-size: 1.7rem; font-weight: 700; color: var(--mon-gold); margin-bottom: .5rem; }
.mon-roi-card p { font-size: .85rem; color: rgba(255,255,255,.75); line-height: 1.6; margin: 0; }
.mon-calc { background: #fff; color: var(--mon-ink); border-radius: 10px; padding: 1.6rem 1.5rem; margin-top: 1.5rem; }
.mon-calc h4 { font-size: 1rem; font-weight: 700; margin-bottom: .25rem; }
.mon-calc .mon-calc-tag { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--mon-gold); color: var(--mon-navy); padding: .12rem .5rem; border-radius: 20px; }
.mon-calc label { font-size: .78rem; font-weight: 600; display: block; margin: .8rem 0 .25rem; }
.mon-calc input { width: 100%; border: 1px solid #c9d0d8; border-radius: 4px; padding: .5rem .65rem; font-size: .95rem; color: var(--mon-ink); }
.mon-calc-out { margin-top: 1.1rem; padding: .9rem 1rem; background: var(--mon-soft); border-left: 4px solid var(--mon-gold); font-weight: 700; border-radius: 4px; }
.mon-calc-note { font-size: .74rem; color: var(--mon-muted); margin: .7rem 0 0; line-height: 1.55; }
.mon-roi-note { font-size: .78rem; color: rgba(255,255,255,.55); text-align: center; margin-top: 1.5rem; font-style: italic; }

.mon-cta { padding: 72px 0; background: var(--mon-gold); text-align: center; }
.mon-cta h2 { font-size: 2rem; font-weight: 700; color: var(--mon-navy); margin-bottom: .75rem; }
.mon-cta p { color: rgba(13,27,42,.82); max-width: 580px; margin: 0 auto 2rem; line-height: 1.7; }
.mon-cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn-mon-dark { display: inline-block; background: var(--mon-navy); color: var(--mon-gold); font-weight: 700; padding: .85rem 2.25rem; border-radius: 4px; border: 2px solid var(--mon-navy); text-decoration: none; }
.btn-mon-dark:hover { color: var(--mon-gold); text-decoration: none; background: #081320; }
.btn-mon-outline { display: inline-block; background: transparent; color: var(--mon-navy); font-weight: 700; padding: .85rem 2.25rem; border-radius: 4px; border: 2px solid var(--mon-navy); text-decoration: none; }
.btn-mon-outline:hover { background: var(--mon-navy); color: var(--mon-gold); text-decoration: none; }
.btn-mon-ghost { display: inline-block; color: #fff; font-weight: 700; padding: .75rem 1.75rem; border-radius: 4px; border: 2px solid rgba(255,255,255,.6); text-decoration: none; }
.btn-mon-ghost:hover { color: var(--mon-gold); border-color: var(--mon-gold); text-decoration: none; }

/* Index */
.mon-card { display: block; background: #fff; border: 1px solid var(--mon-line); border-top: 3px solid var(--mon-gold); border-radius: 10px; padding: 1.5rem 1.4rem; height: 100%; width: 100%; text-decoration: none; color: inherit; transition: transform .25s, box-shadow .25s; }
a.mon-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.09); text-decoration: none; }
.mon-card--rnd { border-top-color: #aeb6bf; }
.mon-card .mon-card-icon { width: 46px; height: 46px; border-radius: 8px; background: rgba(241,182,33,.16); display: flex; align-items: center; justify-content: center; margin-bottom: .9rem; }
.mon-card .mon-card-icon i { color: var(--mon-navy); font-size: 1.2rem; }
.mon-card h3 { font-size: 1.02rem; font-weight: 700; color: var(--mon-ink); margin: .5rem 0 .45rem; }
.mon-card p { font-size: .84rem; color: var(--mon-muted); line-height: 1.6; margin: 0 0 .7rem; }
.mon-card .mon-card-dev { font-size: .76rem; color: var(--mon-muted); border-top: 1px solid var(--mon-line); padding-top: .6rem; margin-bottom: .6rem; }
.mon-card .mon-link { color: var(--mon-navy); font-weight: 700; font-size: .82rem; border-bottom: 2px solid var(--mon-gold); }
.mon-group-head { margin: 0 0 1.5rem; }
.mon-group-head h2 { font-size: 1.6rem; font-weight: 700; color: var(--mon-ink); }
.mon-group-head p { color: var(--mon-muted); max-width: 720px; line-height: 1.65; }
.mon-pack { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.5rem; }
.mon-pack div { flex: 1 1 150px; max-width: 200px; background: #fff; border: 1px solid var(--mon-line); border-radius: 8px; padding: 1rem; text-align: center; font-size: .82rem; color: var(--mon-ink); }
.mon-pack i { display: block; color: var(--mon-gold); font-size: 1.3rem; margin-bottom: .4rem; }

@media (max-width: 767px) {
  .mon-block { padding: 56px 0; }
  .mon-hero h1 { font-size: 1.9rem; }
  .mon-hero .btn-mon-ghost { margin: .75rem 0 0; }
  .mon-arch { flex-direction: column; align-items: stretch; }
  .mon-arch-step { max-width: none; flex-basis: auto; }
  .mon-arch-arrow { transform: rotate(90deg); align-self: center; }
  .mon-demo-frame iframe { height: 520px; }
  .mon-cta h2 { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) { .mon-reveal { opacity: 1; transform: none; transition: none; } }