:root {
  --gold-1: #ffd94d; /* light */
  --gold-2: #d4af37; /* classic */
  --bg: linear-gradient(135deg,var(--gold-1),var(--gold-2));
  --text: #2b2b2b;
}

html,body {height:100%;margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial}
body {
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:24px;
}

.card {
  background:rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  border-radius:16px;
  padding:28px 28px;
  box-shadow:0 10px 30px rgba(0,0,0,0.12);
  max-width:880px;
  width:100%;
  text-align:center;
}

/* Make logo responsive */
.logo {
  max-width: 220px;
  width: 100%;
  height: auto;
  margin: 0 auto 16px;
  display: block;
}

h1 {
  margin:6px 0 8px;
  font-size:clamp(20px,4.5vw,32px);
  letter-spacing:-0.02em;
}

p {margin:0 0 14px;font-size:clamp(14px,2.2vw,16px);opacity:0.95}

.actions {
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  margin-top:16px
}

.actions span {
  font-size:16px;
  font-weight:500;
  color:#2b2b2b;
}

.actions a svg {
  vertical-align:middle;
}

@media (prefers-reduced-motion: no-preference) {
  .card{transform:translateY(4px);transition:transform .35s ease, box-shadow .35s ease}
  .card:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(0,0,0,0.18)}
}