/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  padding: 5rem 0 5.5rem;
  background:
    radial-gradient(900px 420px at 85% -8%, var(--brand-soft) 0, rgba(232,243,238,0) 60%),
    radial-gradient(700px 380px at 0% 110%, var(--brand-tint) 0, rgba(241,248,244,0) 55%),
    var(--white);
}
.hero__title {
  font-size: clamp(2.3rem, 4.6vw, 3.55rem);
  line-height: 1.08; font-weight: 700; letter-spacing: -.02em;
  margin-bottom: 1.1rem;
}
.hero__title .hl { color: var(--brand); position: relative; }
.hero__lead { font-size: 1.12rem; color: var(--muted); max-width: 33rem; margin-bottom: 1.8rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.6rem; }
.hero__points { list-style: none; display: flex; flex-wrap: wrap; gap: 1.2rem; padding: 0; margin: 0; }
.hero__points li { font-size: .92rem; font-weight: 500; color: var(--body); display: flex; align-items: center; gap: .4rem; }
.hero__points i { color: var(--brand); }

/* Signature: status panel */
.status-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-md);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}
.status-panel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--brand), #43c98c);
}
.status-panel__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.3rem; flex-wrap: wrap; gap: .5rem; }
.status-panel__title { font-family: var(--font-mono); font-size: .85rem; color: var(--ink); font-weight: 700; }
.status-panel__title i { color: var(--brand); }
.status-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--brand-soft); color: var(--brand-dark);
  font-size: .72rem; font-weight: 700; padding: .3rem .65rem; border-radius: 999px;
}
.status-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: #25b574; animation: pulse 2s infinite; }

.status-uptime { text-align: center; padding: .6rem 0 1.3rem; border-bottom: 1px dashed var(--line); margin-bottom: 1.2rem; }
.status-uptime__num { font-family: var(--font-mono); font-size: 3rem; font-weight: 700; color: var(--brand); line-height: 1; }
.status-uptime__num .pct { font-size: 1.6rem; }
.status-uptime__label { font-size: .82rem; color: var(--muted); margin-top: .35rem; }

.ping-grid { display: grid; gap: .85rem; }
.ping-row { display: grid; grid-template-columns: 1.5rem 1fr 4.5rem 3.4rem; align-items: center; gap: .6rem; font-size: .85rem; }
.ping-row__flag { font-size: 1rem; }
.ping-row__loc { color: var(--ink); font-weight: 500; }
.ping-row__bar { height: 7px; background: var(--brand-soft); border-radius: 99px; overflow: hidden; }
.ping-row__fill { display: block; height: 100%; width: 30%; background: linear-gradient(90deg, var(--brand), #3cbf85); border-radius: 99px; transition: width .6s ease; }
.ping-row__ms { font-family: var(--font-mono); font-size: .8rem; color: var(--brand-dark); text-align: right; font-weight: 700; }

.status-panel__foot { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.status-panel__foot span { font-size: .74rem; color: var(--muted); font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; }
.status-panel__foot i { color: var(--brand); }