:root{
  --dc-blue:#0174C3;
  --dc-electric:#0F9DFF;
  --dc-gray:#48565E;
  --bg:#ffffff;
  --text:#0b1b2a;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(closest-side at 20% 20%, rgba(15,157,255,0.2), transparent 65%),
    radial-gradient(closest-side at 75% 20%, rgba(1,116,195,0.15), transparent 70%),
    var(--bg);
  display:grid;
  place-items:center;
}

.wrap{
  width:100%;
  padding:20px;
  display:grid;
  place-items:center;
}

.card{
  width:min(900px,100%);
  background:rgba(255,255,255,0.95);
  border-radius:24px;
  padding:40px 30px 50px;
  text-align:center;
  box-shadow:0 30px 60px rgba(1,116,195,0.15);
}

.brand{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  margin-bottom:40px;
  flex-wrap:wrap;
}

.mark{
  width:52px;
  height:52px;
  border-radius:18px;
  background:radial-gradient(circle at 30% 25%, var(--dc-electric), var(--dc-blue));
  box-shadow:0 15px 35px rgba(1,116,195,0.3);
}

.title{
  font-weight:800;
  font-size:20px;
  max-width:700px;
}

.subtitle{
  font-size:14px;
  color:var(--dc-gray);
}

.status{
  font-size: clamp(48px, 7vw, 80px);
  font-weight:800;
  margin-bottom:20px;
}

.status--https{
  color:#0b7a3e;
}

.status--http{
  color:#b42318;
}

.details{
  font-size:18px;
  color:var(--dc-gray);
  margin-bottom:30px;
}

.seal{
  margin-top:20px;
  display:flex;
  justify-content:center;
}