:root{
  --navy:#0f1c2e;
  --blue:#2b6cb0;
  --coral:#e76f51;
  --bg1:#f7f3ff;
  --bg2:#eef6ff;
  --glass: rgba(255,255,255,.55);
  --border: rgba(15,28,46,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--navy);
  background:
    radial-gradient(900px 500px at 18% 20%, rgba(43,108,176,.22), transparent 55%),
    radial-gradient(900px 500px at 85% 30%, rgba(231,111,81,.18), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

.wrap{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:28px 16px;
}

.card{
  width:min(720px, 100%);
  padding:28px 26px;
  border-radius:22px;
  background: var(--glass);
  border: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px rgba(0,0,0,.12);
  text-align:center;
  position:relative;
  overflow:hidden;
}

.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(240px 140px at 20% 20%, rgba(43,108,176,.30), transparent 70%),
    radial-gradient(240px 140px at 80% 30%, rgba(231,111,81,.26), transparent 70%);
  filter: blur(18px);
  opacity:.75;
  pointer-events:none;
}

.brand{position:relative; z-index:1}
.logo{
  width:140px;
  height:auto;
  display:inline-block;
  margin:6px auto 10px;
}

h1{
  position:relative; z-index:1;
  font-family: "Playfair Display", serif;
  font-size: clamp(28px, 3.4vw, 40px);
  margin:10px 0 8px;
  letter-spacing:.2px;
}

p{
  position:relative; z-index:1;
  margin:0 auto 16px;
  max-width: 52ch;
  line-height:1.6;
  opacity:.92;
}

.status{
  position:relative; z-index:1;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(15,28,46,.08);
  margin: 8px 0 18px;
  font-weight:600;
  font-size: 14px;
}

.dot{
  width:10px; height:10px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--blue), var(--coral));
  box-shadow: 0 0 0 6px rgba(43,108,176,.10);
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse{
  0%,100%{ transform:scale(1); opacity:1 }
  50%{ transform:scale(1.15); opacity:.8 }
}

.actions{
  position:relative; z-index:1;
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 6px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  text-decoration:none;
  font-weight:700;
  border: 1px solid rgba(255,255,255,.40);
  background: linear-gradient(135deg, var(--blue), var(--coral));
  color:#fff;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  transition: transform .18s ease, box-shadow .18s ease;
}

.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 50px rgba(0,0,0,.20);
}

.btn.ghost{
  background: rgba(255,255,255,.55);
  color: var(--navy);
  border: 1px solid rgba(15,28,46,.12);
  box-shadow:none;
}

.btn.ghost:hover{
  transform: translateY(-2px);
}

.foot{
  position:relative; z-index:1;
  margin-top:18px;
  font-size:13px;
  opacity:.7;
}