.wdash-page {
  padding: 24px 0 40px;
  background: linear-gradient(180deg, rgba(10,24,66,.28), rgba(10,24,66,.6)), url('/images/dashboard/weather-dashboard-bg.webp') center / cover no-repeat;
  background-color: #19315d;
  background-attachment: fixed;
}
.wdash-launch-wrap { margin-bottom: 22px; }
.wdash-cta-section {
  padding: 22px 26px;
  border: 1px solid rgba(78,202,255,.4);
  border-radius: 18px;
  background: linear-gradient(120deg, #00167a, #0a3771);
  box-shadow: 0 8px 30px rgba(0,8,40,.3);
}
.wdash-cta-inner { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 24px; }
.wdash-cta-badge { display: inline-flex; align-items: center; gap: 7px; color: #a6e7ff; font-size: .8rem; font-weight: 600; margin-bottom: 6px; }
.wdash-cta-title { font-family: 'Poppins', sans-serif; font-size: clamp(1.15rem,2vw,1.5rem); color: #fff; font-weight: 600; margin: 0 0 6px; line-height: 1.4; }
.wdash-cta-subtitle { color: #e2ecff; font-size: 1rem; line-height: 1.65; margin: 0; max-width: 650px; }
.wdash-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; min-height: 44px; border-radius: 12px; background: #72d8ff; color: #00164f; font-weight: 700; font-size: 1rem; text-decoration: none; transition: background .2s, transform .2s; }
.wdash-cta-btn:hover { color: #00164f; background: #a3e6ff; transform: translateY(-2px); }
.wdash-cta-btn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.wdash-content-panel { background: #fff; border: 1px solid #dce6f4; border-radius: 18px; padding: 28px 32px; box-shadow: 0 10px 36px rgba(0,8,40,.3); }
.wdash-page .internal-page-section { padding-top: 0 !important; background: transparent; }
#weather-dashboard-description { color: #26364c; font-size: 1.1rem; line-height: 1.65; overflow-wrap: anywhere; }
#weather-dashboard-description p,
#weather-dashboard-description li { font-size: 1.1rem; line-height: 1.65; }
#weather-dashboard-description p { padding-bottom: 0; }
#weather-dashboard-description p:last-child { margin-bottom: 0; }
#weather-dashboard-description h2, #weather-dashboard-description h3 { color: #00167a; line-height: 1.4; text-align: start; }
#weather-dashboard-description h2::before, #weather-dashboard-description h2::after { display: none; }
#weather-dashboard-description a { color: #005da8; text-decoration: underline; text-underline-offset: 3px; }
.wdash-feature-pills { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 24px; padding-top: 22px; border-top: 1px solid #e0e9f3; }
.wdash-pill { display: flex; align-items: center; gap: 12px; border: 1px solid #c9dff1; border-radius: 12px; padding: 14px; background: #f0f7ff; color: #173a6c; font-size: 1rem; font-weight: 500; }
.wdash-pill i { color: #006ca8; flex-shrink: 0; width: 22px; text-align: center; }
.wdash-pill:nth-child(2n) { background: #eefaf7; border-color: #c6e8df; }
.wdash-pill.wdash-pill-revealed {
  animation:
    wdash-box-reveal 600ms cubic-bezier(.22, 1, .36, 1) var(--wdash-reveal-delay, 0ms) both,
    wdash-box-glow 4s ease-in-out calc(var(--wdash-reveal-delay, 0ms) + 600ms) infinite;
  transition: background-color 250ms ease, border-color 250ms ease;
}
@keyframes wdash-box-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(0,143,226,0); }
  50% { box-shadow: 0 4px 16px rgba(0,143,226,.18); }
}
@media (hover: hover) {
  .wdash-pill.wdash-pill-revealed:hover {
    background-color: #dcefff;
    border-color: #008fe2;
    translate: 0 -4px;
  }
}
.wdash-pill { transition: translate 250ms ease, background-color 250ms ease, border-color 250ms ease; }
@keyframes wdash-box-reveal {
  from { opacity: 0; transform: translateY(22px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Keep the labels steady while each instrument suggests its weather signal. */
.wdash-pill .fa-temperature-half { animation: wdash-temperature 3s ease-in-out infinite; }
.wdash-pill .fa-droplet { animation: wdash-rainfall 2.6s ease-in-out infinite; }
.wdash-pill .fa-wind { animation: wdash-wind 3s ease-in-out infinite; }
.wdash-pill .fa-eye { animation: wdash-visibility 4s ease-in-out infinite; }
.wdash-pill .fa-cloud-bolt { animation: wdash-thunderstorm 4s ease-in-out infinite; }
@keyframes wdash-temperature {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); color: #b45309; }
}
@keyframes wdash-rainfall {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(3px); }
}
@keyframes wdash-wind {
  0%, 100% { transform: translateX(-2px); }
  50% { transform: translateX(4px); }
}
@keyframes wdash-visibility {
  0%, 40%, 60%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(.65); }
}
@keyframes wdash-thunderstorm {
  0%, 42%, 54%, 100% { transform: scale(1); color: #006ca8; }
  46%, 50% { transform: scale(1.12); color: #b45309; }
}
@media (max-width: 991.98px) {
  .wdash-page { background-attachment: scroll; }
  .wdash-cta-inner { grid-template-columns: 1fr; gap: 16px; }
  .wdash-cta-btn { justify-self: start; }
  .wdash-feature-pills { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 575.98px) {
  .wdash-page { padding: 16px 0 24px; }
  .wdash-launch-wrap { margin-bottom: 16px; }
  .wdash-cta-section, .wdash-content-panel { padding: 20px; border-radius: 14px; }
  .wdash-feature-pills { grid-template-columns: 1fr; gap: 8px; }
  .wdash-cta-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .wdash-pill.wdash-pill-revealed { animation: none; }
  .wdash-pill { transition: none; }
  .wdash-pill.wdash-pill-revealed:hover { translate: none; }
  .wdash-pill i { animation: none !important; }
  .wdash-cta-btn { transition: none; }
  .wdash-cta-btn:hover { transform: none; }
  .wdash-page .upanimation { opacity: 1; transform: none; }
}