/* Global variables and Resets */
:root {
  /* iOS System Fonts */
  --font-ios: -apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif;
  
  /* System Colors */
  --ios-blue: #007AFF;
  --ios-green: #34C759;
  --ios-red: #FF3B30;
  --ios-gray: #8E8E93;
  --ios-background: #F2F2F7;
}

body {
  font-family: var(--font-ios);
  background-color: #111; /* Dark background for the "desk" behind the phone */
  margin: 0;
  padding: 0;
  overflow: hidden; /* Prevent scrolling on the desk */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Scrollbar hiding for a cleaner mobile look */
::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

/* Smooth fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}