STYLED - Add CSS hero entrance, title halo, and scroll cue

Replace the framer-motion hero entrance with pure-CSS staggered animations so
the hero is painted immediately instead of flashing blank until hydration.
Add a focused brand glow behind the hero title and an animated scroll cue at
the bottom of the home hero. Entrance and cue respect prefers-reduced-motion.

app/globals.css

@@ -422,6 +422,95 @@ html[lang="ar"] .eyebrow {
     }
   }
 
+  /* ---- Hero entrance (pure CSS so it never flashes blank before hydration) ---- */
+  .hero-rise {
+    opacity: 0;
+    animation: hero-rise-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
+  }
+
+  .hero-content > *:nth-child(1) {
+    animation-delay: 0.06s;
+  }
+  .hero-content > *:nth-child(2) {
+    animation-delay: 0.14s;
+  }
+  .hero-content > *:nth-child(3) {
+    animation-delay: 0.22s;
+  }
+  .hero-content > *:nth-child(4) {
+    animation-delay: 0.3s;
+  }
+  .hero-content > *:nth-child(5) {
+    animation-delay: 0.38s;
+  }
+  .hero-content > *:nth-child(6) {
+    animation-delay: 0.46s;
+  }
+
+  @keyframes hero-rise-in {
+    from {
+      opacity: 0;
+      transform: translateY(18px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* Focused glow directly behind the hero title */
+  .hero-title {
+    position: relative;
+    isolation: isolate;
+  }
+
+  .hero-title::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 46%;
+    z-index: -1;
+    width: 84%;
+    height: 74%;
+    transform: translate(-50%, -50%);
+    background: radial-gradient(closest-side, hsl(var(--brand-primary) / 0.2), transparent 78%);
+    filter: blur(48px);
+    pointer-events: none;
+  }
+
+  .dark .hero-title::before {
+    background: radial-gradient(closest-side, hsl(var(--brand-primary) / 0.3), transparent 78%);
+  }
+
+  /* Scroll cue pinned to the bottom of the home hero */
+  .hero-scroll-anchor {
+    position: absolute;
+    bottom: 1.5rem;
+    left: 50%;
+    z-index: 10;
+    transform: translateX(-50%);
+    opacity: 0;
+    animation: hero-fade-in 0.6s ease 0.7s forwards;
+  }
+
+  .hero-scroll-anchor:hover {
+    transform: translateX(-50%) translateY(2px);
+  }
+
+  @keyframes hero-fade-in {
+    to {
+      opacity: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hero-rise,
+    .hero-scroll-anchor {
+      animation: none;
+      opacity: 1;
+    }
+  }
+
   .hero-title-line {
     display: inline-block;
     padding-inline: 0.02em;