/* تصميم بسيط لصفحة "قريباً" */
:root {
  --bg: #0f172a;
  --accent: #3b82f6;
  --text: #e5e7eb;
  --muted: #94a3b8;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--text);
  font-family: "Cairo", system-ui, -apple-system, sans-serif;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  animation: bgShift 8s ease-in-out infinite alternate;
}

.hero {
  position: relative;
  padding: 60px 32px;
  max-width: 560px;
  animation: fadeIn 1s ease 0.1s both;
}

.badge {
  width: 16px;
  height: 16px;
  background: var(--accent);
  border-radius: 50%;
  margin: 0 auto 14px;
  box-shadow: 0 0 0 10px rgba(59, 130, 246, 0.12);
}

.title {
  margin: 0 0 12px;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: 0.4px;
  animation: riseIn 1s ease 0.25s both, glow 3s ease-in-out 1s infinite alternate;
}

.subtitle {
  margin: 0;
  font-size: clamp(18px, 3vw, 22px);
  color: var(--muted);
  animation: riseIn 1s ease 0.45s both;
}

@keyframes bgShift {
  from {
    background-color: #0f172a;
  }
  to {
    background-color: #0c1424;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes glow {
  from {
    text-shadow: 0 0 0 rgba(59, 130, 246, 0.2);
  }
  to {
    text-shadow: 0 0 18px rgba(59, 130, 246, 0.28);
  }
}