:root {
  color-scheme: light;
  --bg: #ffe7f7;
  --surface: rgba(255, 244, 251, 0.96);
  --surface-strong: rgba(255, 248, 252, 0.99);
  --text: #5e1e56;
  --muted: #aa72a5;
  --accent: #e83998;
  --accent-strong: #d21f86;
  --shadow: 0 30px 80px rgba(255, 156, 214, 0.2);
}

* {
  box-sizing: border-box;
}

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

body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 15% 15%, rgba(255, 175, 225, 0.8), transparent 22%),
    radial-gradient(circle at 85% 30%, rgba(255, 235, 245, 0.85), transparent 22%),
    radial-gradient(circle at 30% 70%, rgba(255, 220, 239, 0.72), transparent 20%),
    radial-gradient(circle at 70% 80%, rgba(255, 200, 230, 0.5), transparent 18%),
    repeating-conic-gradient(from 90deg at 48% 52%, rgba(255, 235, 246, 0.22) 0deg 24deg, transparent 24deg 44deg, rgba(255, 235, 246, 0.22) 44deg 62deg, transparent 62deg 86deg, rgba(255, 235, 246, 0.18) 86deg 120deg, transparent 120deg 144deg, rgba(255, 235, 246, 0.18) 144deg 170deg, transparent 170deg 194deg, rgba(255, 235, 246, 0.14) 194deg 220deg, transparent 220deg 244deg, rgba(255, 235, 246, 0.12) 244deg 270deg, transparent 270deg 294deg, rgba(255, 235, 246, 0.1) 294deg 320deg, transparent 320deg 360deg),
    linear-gradient(180deg, var(--bg) 0%, #fff1fb 48%, #fff8fe 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

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

.hero {
  width: min(520px, 100%);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

body.page-loaded .hero {
  opacity: 1;
  transform: translateY(0);
}

.hero-card {
  position: relative;
  padding: 32px 24px 28px;
  border-radius: 32px;
  background: var(--surface);
  border: 1px solid rgba(232, 61, 152, 0.2);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  overflow: hidden;
}

.hero-avatar {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid rgba(255, 255, 255, 0.95);
  background: #ffdaee;
  box-shadow: 0 0 0 8px rgba(255, 160, 213, 0.18);
  margin: 0 auto 20px;
  transition: transform 0.35s ease;
}

.hero-card:hover .hero-avatar {
  transform: translateY(-4px) scale(1.02);
}

.hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-copy {
  text-align: center;
  position: relative;
  z-index: 1;
}

.eyebrow {
  margin: 0 0 12px;
  font-size: 2rem;
  letter-spacing: 0.17em;
  color: var(--text);
}

.hero-copy h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: var(--text);
  text-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.hero-actions {
  display: grid;
  gap: 14px;
  margin: 32px 0 24px;
}

#first-button {
  border-width: 2px;
}

.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 22px;
  border-radius: 22px;
  text-decoration: none;
  color: var(--text);
  background: linear-gradient(145deg, rgba(255, 248, 253, 0.98) 0%, rgba(255, 228, 244, 0.93) 100%);
  border: 1px solid rgba(232, 61, 152, 0.25);
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.action-button:hover,
.action-button:focus-visible {
  transform: translateY(-2px);
  background: linear-gradient(145deg, rgba(255, 238, 249, 0.99) 0%, rgba(255, 210, 236, 0.96) 100%);
  border-color: rgba(232, 61, 152, 0.45);
  box-shadow: 0 12px 28px rgba(255, 159, 215, 0.18);
}

.hero-socials {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.social-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border-radius: 20px;
  border: 1px solid rgba(232, 61, 152, 0.24);
  background: linear-gradient(145deg, rgba(255, 250, 254, 0.97) 0%, rgba(255, 232, 246, 0.90) 100%);
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.25s ease, color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.social-button:hover,
.social-button:focus-visible {
  transform: translateY(-2px);
  color: var(--text);
  border-color: rgba(232, 61, 152, 0.45);
  background: linear-gradient(145deg, rgba(255, 242, 251, 0.98) 0%, rgba(255, 218, 240, 0.93) 100%);
}

@media (max-width: 480px) {
  .hero-card {
    padding: 28px 18px 24px;
  }

  .hero-actions {
    gap: 12px;
  }

  .social-button {
    min-height: 48px;
    font-size: 0.92rem;
  }
}