* { box-sizing: border-box; }

:root {
  --blue: #b9e2ed;
  --blue-deep: #356f7b;
  --blue-ink: #244f59;
  --cream: #fffdf7;
  --yellow: #efb52b;
  --orange: #ed7b32;
  --green: #71876c;
  --shadow: rgba(38, 74, 80, .16);
}

html, body { min-height: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--blue-ink);
  background:
    radial-gradient(circle at 8% 12%, rgba(239,181,43,.17) 0 5px, transparent 6px),
    radial-gradient(circle at 93% 17%, rgba(237,123,50,.15) 0 7px, transparent 8px),
    radial-gradient(circle at 10% 83%, rgba(185,226,237,.65) 0 9px, transparent 10px),
    linear-gradient(145deg, #eef9fb, #fffaf0 52%, #fdf4e9);
}

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

.card {
  width: min(100%, 520px);
  position: relative;
  overflow: hidden;
  padding: 28px 24px 24px;
  border: 1px solid rgba(53,111,123,.18);
  border-radius: 30px;
  background: rgba(255,253,247,.96);
  box-shadow: 0 22px 60px var(--shadow);
}

.card::before,
.card::after {
  content: "✿  ·  ❀  ·  ✿";
  position: absolute;
  color: rgba(237,123,50,.42);
  letter-spacing: 6px;
  font-size: 18px;
}
.card::before { top: 14px; left: 16px; }
.card::after { bottom: 13px; right: 12px; color: rgba(239,181,43,.5); }

.brand-art {
  margin: 0 auto 8px;
  max-width: 445px;
}

.brand-art img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

.tagline {
  margin: 4px 0 2px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2em;
  color: var(--orange);
}

.subtag {
  margin: 0 0 24px;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-style: italic;
  color: var(--green);
}

.links { display: grid; gap: 12px; }

.button {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  min-height: 62px;
  padding: 10px 12px;
  border: 1.5px solid rgba(53,111,123,.28);
  border-radius: 17px;
  background: #fff;
  color: var(--blue-ink);
  text-decoration: none;
  text-align: center;
  font-weight: 750;
  box-shadow: 0 7px 18px rgba(53,111,123,.08);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.button::after {
  content: "›";
  font-size: 28px;
  font-weight: 400;
  color: var(--orange);
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
  border-color: var(--yellow);
  box-shadow: 0 10px 24px rgba(53,111,123,.14);
}

.button.primary {
  border-color: var(--yellow);
  background: linear-gradient(135deg, #fff8dc, #fff);
}

.icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--blue-deep);
  font-size: 20px;
  font-family: Arial, sans-serif;
  font-weight: 800;
}

footer {
  padding: 24px 12px 4px;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--green);
}

footer p { margin: 0 0 5px; }
footer .small {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-deep);
}

@media (max-width: 420px) {
  .page { padding: 14px 10px; }
  .card { padding: 24px 16px 20px; border-radius: 24px; }
  .button { min-height: 58px; font-size: 15px; }
  .tagline { font-size: 11px; }
}