:root{
  --ink:#101a38;
  --muted:#69718e;
  --cyan:#25c9dc;
  --purple:#6962ed;
  --pink:#e457c5;
  --green:#14a87d;
  --amber:#b67818;
  --red:#c94f68;
}

*{
  box-sizing:border-box;
}

body{
  margin:0;

  min-height:100vh;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color:var(--ink);

  background:
    radial-gradient(
      circle at 8% 9%,
      rgba(38,203,220,.18),
      transparent 31%
    ),
    radial-gradient(
      circle at 91% 38%,
      rgba(111,92,239,.17),
      transparent 36%
    ),
    radial-gradient(
      circle at 45% 95%,
      rgba(229,86,195,.12),
      transparent 40%
    ),
    linear-gradient(
      155deg,
      #f8fdff,
      #eff7ff 35%,
      #f6f2ff 69%,
      #fff5fb
    );
}

.shell{
  width:min(
    1080px,
    calc(100% - 28px)
  );

  margin:0 auto;

  padding:22px 0 60px;
}

.top{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding:12px 15px;

  border:
    1px solid
    rgba(255,255,255,.86);

  border-radius:20px;

  background:
    rgba(255,255,255,.65);

  box-shadow:
    0 14px 40px
    rgba(43,53,106,.07);

  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

.brand{
  color:var(--ink);
  text-decoration:none;
  font-weight:900;
}

.nav a{
  margin-left:12px;

  color:#535b79;

  text-decoration:none;

  font-size:11px;
  font-weight:800;
}

.hero,
.section{
  border:
    1px solid
    rgba(255,255,255,.87);

  background:
    rgba(255,255,255,.72);

  box-shadow:
    0 18px 48px
    rgba(42,52,102,.065);

  backdrop-filter:blur(17px);
  -webkit-backdrop-filter:blur(17px);
}

.hero{
  margin-top:18px;

  padding:
    clamp(
      28px,
      5vw,
      55px
    );

  border-radius:29px;
}

.hero h1{
  margin:0;

  font-size:
    clamp(
      40px,
      7vw,
      72px
    );

  line-height:.96;

  letter-spacing:-.055em;
}

.gradient{
  background:
    linear-gradient(
      105deg,
      var(--cyan),
      var(--purple) 52%,
      var(--pink)
    );

  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero p{
  max-width:730px;

  color:var(--muted);

  font-size:13px;

  line-height:1.7;
}

.summary{
  display:inline-flex;
  align-items:center;
  gap:9px;

  margin-top:10px;

  padding:10px 14px;

  border-radius:999px;

  background:
    rgba(20,168,125,.09);

  color:#087256;

  font-size:11px;

  font-weight:900;
}

.dot{
  width:9px;
  height:9px;

  border-radius:50%;

  background:#1cc99b;
}

.section{
  margin-top:17px;

  padding:
    clamp(
      20px,
      4vw,
      34px
    );

  border-radius:23px;
}

.section h2{
  margin:
    0 0 17px;

  font-size:
    clamp(
      23px,
      4vw,
      34px
    );

  letter-spacing:-.04em;
}

.services{
  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:9px;
}

.service{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap:15px;

  padding:15px;

  border-radius:15px;

  background:
    rgba(249,250,255,.77);

  border:
    1px solid
    rgba(73,83,137,.08);
}

.service strong{
  display:block;

  font-size:12px;
}

.service small{
  display:block;

  margin-top:4px;

  color:var(--muted);

  font-size:10px;

  line-height:1.45;
}

.badge{
  align-self:start;

  padding:6px 9px;

  border-radius:999px;

  white-space:nowrap;

  font-size:8px;

  font-weight:900;

  letter-spacing:.045em;

  text-transform:uppercase;
}

.operational{
  background:
    rgba(20,168,125,.10);

  color:#087256;
}

.degraded,
.maintenance{
  background:
    rgba(182,120,24,.11);

  color:#84560d;
}

.partial_outage,
.major_outage{
  background:
    rgba(201,79,104,.10);

  color:#a23f55;
}

.incident{
  padding:17px;

  margin-top:10px;

  border-radius:16px;

  border:
    1px solid
    rgba(74,83,137,.09);

  background:
    rgba(250,251,255,.78);
}

.incident-head{
  display:flex;
  justify-content:space-between;
  gap:15px;
}

.incident h3{
  margin:0;

  font-size:14px;
}

.incident p,
.empty,
.meta,
.update{
  color:var(--muted);

  font-size:11px;

  line-height:1.65;
}

.update{
  margin-top:8px;

  padding:10px 12px;

  border-radius:11px;

  background:
    rgba(102,94,231,.05);
}

.footer{
  padding:30px 10px 5px;

  text-align:center;

  color:#737b94;

  font-size:10px;
}

.footer a{
  color:#625be4;
  text-decoration:none;
}

@media(max-width:700px){

  .shell{
    width:
      calc(100% - 18px);

    padding-top:9px;
  }

  .top{
    border-radius:16px;
  }

  .nav a{
    margin-left:6px;

    font-size:9px;
  }

  .hero{
    border-radius:22px;
  }

  .services{
    grid-template-columns:1fr;
  }

  .section{
    border-radius:18px;
  }

}