:root {
  --pink: #e91e8c;
  --orange: #f5821f;
  --yellow: #f7c93b;
  --green: #6cc24a;
  --blue: #2f8fd6;
  --purple: #7c4dbe;
  --navy: #14285c;
  --bg: #fbfaf8;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(circle at 20% 15%, #fff8ec 0%, var(--bg) 45%, #f3f6fb 100%);
  color: var(--navy);
  position: relative;
  overflow: hidden;
  padding: 24px;
}

.notes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.note {
  position: absolute;
  font-size: 3rem;
  opacity: 0.16;
  animation: float 7s ease-in-out infinite;
}

.note-1 { top: 8%;  left: 8%;  color: var(--pink);   animation-delay: 0s; }
.note-2 { top: 18%; left: 82%; color: var(--orange); animation-delay: 1.2s; }
.note-3 { top: 72%; left: 12%; color: var(--yellow); animation-delay: 2.1s; font-size: 3.6rem; }
.note-4 { top: 80%; left: 78%; color: var(--green);  animation-delay: 0.6s; }
.note-5 { top: 45%; left: 4%;  color: var(--blue);   animation-delay: 1.8s; font-size: 2.4rem; }
.note-6 { top: 40%; left: 92%; color: var(--purple);  animation-delay: 2.8s; font-size: 2.4rem; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-18px) rotate(4deg); }
}

.card {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 30px 60px -20px rgba(20, 40, 92, 0.18), 0 0 0 1px rgba(20, 40, 92, 0.04);
  max-width: 560px;
  width: 100%;
  padding: 48px 40px 40px;
  text-align: center;
}

.logo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 24px;
  box-shadow: 0 12px 24px -10px rgba(20, 40, 92, 0.25);
}

.eyebrow {
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--purple);
}

h1 {
  margin: 0 0 16px;
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  line-height: 1.25;
  color: var(--navy);
}

.lede {
  margin: 0 auto 24px;
  max-width: 420px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #444d6b;
}

.divider {
  height: 4px;
  width: 88px;
  margin: 0 auto 20px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--pink), var(--orange), var(--yellow), var(--green), var(--blue), var(--purple));
}

.contact {
  margin: 0;
  font-size: 0.95rem;
  color: #5b6180;
}

.contact a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}

.contact a:hover {
  text-decoration: underline;
}

.footer {
  position: relative;
  z-index: 1;
  margin-top: 28px;
  font-size: 0.8rem;
  color: #8890ab;
  text-align: center;
}

@media (max-width: 480px) {
  .card {
    padding: 36px 24px 32px;
  }
  .logo {
    width: 128px;
    height: 128px;
  }
}