:root {
  --cream: #faf9f6;
  --teal: #14b8a6;
  --sky: #0ea5e9;
}

* { font-family: 'Vazirmatn', Tahoma, sans-serif; }

body {
  margin: 0;
  color: #334155;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(14,165,233,0.14), transparent 60%),
    radial-gradient(1000px 500px at 10% 5%, rgba(20,184,166,0.16), transparent 60%),
    linear-gradient(180deg, #f4fbfa 0%, var(--cream) 40%, #ffffff 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* Serenity orb */
.serenity-orb {
  width: 84px;
  height: 84px;
  border-radius: 9999px;
  background: radial-gradient(circle at 35% 30%, #7dd3fc, #14b8a6 70%, #0e7490);
  box-shadow: 0 0 0 10px rgba(20,184,166,0.10), 0 0 40px rgba(14,165,233,0.35);
  animation: breathe 5s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 8px rgba(20,184,166,0.10), 0 0 30px rgba(14,165,233,0.30); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 16px rgba(20,184,166,0.06), 0 0 55px rgba(14,165,233,0.45); }
}

/* Floating hearts */
.hearts-layer {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.floating-heart {
  position: absolute; bottom: -30px; color: rgba(45,212,191,0.35);
  animation: floatUp linear infinite;
}
@keyframes floatUp {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  15% { opacity: 0.7; }
  85% { opacity: 0.5; }
  100% { transform: translateY(-380px) rotate(25deg); opacity: 0; }
}

/* Reveal on load */
.reveal { opacity: 0; transform: translateY(18px); animation: reveal 0.7s ease forwards; }
.reveal-1 { animation-delay: 0.12s; }
.reveal-2 { animation-delay: 0.24s; }
.reveal-3 { animation-delay: 0.36s; }
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }

/* Buttons + cards tactile */
.cta-zoom:active { transform: scale(0.97); }
.cta-zoom { position: relative; }
.connect-card:active { transform: scale(0.97); }
.connect-card:hover { transform: translateY(-4px); }

.toast-fixed {
  position: fixed; left: 0; right: 0; bottom: 24px;
  display: flex; justify-content: center; z-index: 50;
  animation: toastIn 0.25s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

a { text-decoration: none; }