.why { padding: 100px 0; background: linear-gradient(180deg, var(--soft-aqua) 0%, var(--cream) 100%); }
.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 64px; }
.benefit-card { background: #fff; border-radius: 20px; padding: 28px 24px; border: 1px solid rgba(0, 79, 95, 0.08); transition: transform .18s ease, box-shadow .18s ease; }
.benefit-card:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(0, 79, 95, 0.28); }
.benefit-card img { margin-bottom: 16px; }
.benefit-card h3 { font-size: 16px; font-family: 'Nunito', sans-serif; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.benefit-card p { font-size: 13.8px; color: #516774; }
.monitor-panel { background: var(--navy); border-radius: 28px; padding: 52px 48px; color: #fff; }
.monitor-panel .mp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 34px; flex-wrap: wrap; }
.monitor-panel h3 { font-family: 'Oxygen', sans-serif; color: #fff; font-size: 24px; margin-bottom: 8px; }
.monitor-panel .mp-head p { color: rgba(255, 255, 255, 0.65); font-size: 14.5px; max-width: 420px; }
.monitor-panel .sensor-strip { background: rgba(255, 255, 255, 0.06); border-radius: 18px; padding: 20px; }
.monitor-panel .sensor-strip img { border-radius: 10px; height: auto; width: 100%; }
.monitor-tags { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.monitor-tags span { font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.16); padding: 8px 14px; border-radius: 100px; }
@media (max-width:900px) {
 .benefit-grid { grid-template-columns: repeat(2, 1fr); }
.monitor-panel { padding: 34px 24px; }
 }
@media (max-width:560px) {
 .benefit-grid { grid-template-columns: 1fr; }
 }