:root {
  color-scheme: dark;
  --canvas: #0b0d18;
  --text: #f5f4fa;
  --muted: #b4b2c3;
  --green: #17e5a2;
  --violet: #c35cff;
  --lavender: #c0adff;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--canvas); }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(ellipse at 0% 0%, rgb(0 220 155 / 33%), transparent 30%),
    radial-gradient(ellipse at 100% 100%, rgb(155 25 255 / 33%), transparent 32%),
    radial-gradient(ellipse at 50% 50%, #17172b 0, var(--canvas) 70%);
  font: 16px/1.5 Arial, Helvetica, sans-serif;
}

.topline {
  position: fixed;
  z-index: 1;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, #17dba1, #168fc2 52%, #ac92ff);
}

.poster {
  width: min(100%, 1120px);
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(28px, 5vh, 52px) clamp(22px, 6vw, 80px) 34px;
  display: grid;
  grid-template-rows: repeat(6, auto);
  justify-items: center;
  align-content: center;
  text-align: center;
}

.brand {
  display: block;
  width: min(100%, 300px);
  height: auto;
  margin: 0 0 clamp(16px, 2vh, 22px);
}

.status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(14px, 1.8vh, 20px);
  padding: 8px 23px;
  border: 2px solid #be54ff;
  border-radius: 999px;
  background: rgb(111 32 160 / 24%);
  box-shadow: 0 0 9px #d239ff, 0 0 25px rgb(195 92 255 / 65%), inset 0 0 16px rgb(195 92 255 / 22%);
  color: #fff;
  font-size: clamp(.82rem, 2.2vw, 1.2rem);
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

h1 {
  max-width: 19ch;
  margin: 0;
  font-size: clamp(2.35rem, 6.3vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -.052em;
}

h1 span { color: var(--green); }

.intro {
  max-width: 62ch;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: clamp(1.03rem, 1.7vw, 1.28rem);
  line-height: 1.55;
}

.hero-art {
  display: block;
  width: min(100%, min(46vh, 440px));
  max-height: 46vh;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 38px rgb(5 7 13 / 32%));
}

.protocols {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 30px);
  margin: 12px 0 0;
  color: #eee9fc;
  font-size: clamp(1.05rem, 2.3vw, 1.45rem);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.protocol-saml { color: var(--green); }
.protocol-divider { color: #f5f1ff; }
.protocol-oidc { color: var(--lavender); }

@media (max-width: 640px) {
  .poster {
    min-height: 100svh;
    padding: 30px 22px 28px;
    grid-template-rows: repeat(6, auto);
  }

  .brand { width: min(100%, 240px); margin-bottom: 18px; }
  .status { gap: 8px; margin-bottom: 16px; padding: 8px 15px; letter-spacing: .04em; }
  h1 { max-width: 13ch; font-size: clamp(2.45rem, 11vw, 3.7rem); }
  .intro { max-width: 38ch; margin-top: 12px; font-size: 1rem; }
  .hero-art { width: min(100%, min(40svh, 350px)); max-height: 40svh; }
  .protocols { margin-top: 12px; font-size: 1.05rem; }
}