.hero {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2rem 1.25rem; position: relative;
}
.hero .logo { width: clamp(88px, 22vw, 124px); filter: drop-shadow(0 0 28px rgba(232,200,135,.45)); animation: rise 1.2s ease both, float 7s ease-in-out 1.2s infinite; }
.hero h1 {
  font-family: var(--font-title); font-weight: 600;
  font-size: clamp(3.8rem, 17vw, 8rem); letter-spacing: .26em; padding-left: .26em; line-height: 1;
  margin-top: 1.2rem;
  background: linear-gradient(180deg, #FBF1D6 0%, #E8C887 45%, #B8914A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: rise 1.2s .12s ease both;
}
.arabic { font-size: 1.6rem; color: var(--gold); opacity: .6; margin-top: .3rem; font-family: "Segoe UI", "Noto Naskh Arabic", serif; animation: rise 1.2s .25s ease both; }
.tagline { height: 3.4rem; margin: 2rem 0 2.4rem; position: relative; width: min(92vw, 600px); animation: rise 1.2s .4s ease both; }
.tagline span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-title); font-style: italic; font-weight: 500;
  font-size: clamp(1.4rem, 5vw, 2.1rem); color: var(--ivory);
  opacity: 0; transform: translateY(8px); transition: opacity 1.3s ease, transform 1.3s ease;
}
.tagline span.on { opacity: 1; transform: none; }
.hero .btn { padding: 1rem 2.6rem; font-size: 1.02rem; border-radius: 14px; animation: rise 1.2s .55s ease both; }
.hero .btn::after { content: "→"; transition: transform .25s; }
.hero .btn:hover::after { transform: translateX(4px); }

@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }