.hero-scroll-hint {
     position: absolute;
     bottom: 40px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 2;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     animation: fade-up 1s 1s ease both;
 }

 .scroll-line {
     width: 1px;
     height: 50px;
     background: linear-gradient(to bottom, var(--cyan), transparent);
     animation: scroll-pulse 2s ease-in-out infinite;
 }

 @keyframes scroll-pulse {

     0%,
     100% {
         transform: scaleY(1);
         opacity: 0.7
     }

     50% {
         transform: scaleY(1.3);
         opacity: 1
     }
 }

 .scroll-label {
     font-size: 0.62rem;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     color: var(--text-2);
 }

 /* Hero stats */
 .hero-stats {
     position: absolute;
     bottom: 40px;
     right: 48px;
     z-index: 2;
     display: flex;
     gap: 32px;
     animation: fade-up 0.8s 0.6s ease both;
 }

 .hero-stat {
     text-align: right;
 }

 .hero-stat-num {
     font-size: 1.6rem;
     font-weight: 800;
     color: var(--text);
     line-height: 1;
 }

 .hero-stat-num span {
     color: var(--cyan);
 }

 .hero-stat-label {
     font-size: 0.68rem;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: var(--text-2);
     margin-top: 2px;
 }

 /* ─── Reveal animations ─── */
 .reveal {
     opacity: 0;
     transform: translateY(32px);
     transition: opacity 0.7s ease, transform 0.7s ease;
 }

 .reveal.visible {
     opacity: 1;
     transform: none;
 }

 .reveal-left {
     opacity: 0;
     transform: translateX(-32px);
     transition: opacity 0.7s ease, transform 0.7s ease;
 }

 .reveal-left.visible {
     opacity: 1;
     transform: none;
 }

 .reveal-right {
     opacity: 0;
     transform: translateX(32px);
     transition: opacity 0.7s ease, transform 0.7s ease;
 }

 .reveal-right.visible {
     opacity: 1;
     transform: none;
 }

 .delay-1 {
     transition-delay: 0.1s !important;
 }

 .delay-2 {
     transition-delay: 0.2s !important;
 }

 .delay-3 {
     transition-delay: 0.3s !important;
 }

 .delay-4 {
     transition-delay: 0.4s !important;
 }

 .delay-5 {
     transition-delay: 0.5s !important;
 }

 /* Keyframes for initial loads */
 @keyframes fade-up {
     from {
         opacity: 0;
         transform: translateY(20px)
     }

     to {
         opacity: 1;
         transform: none
     }
 }

 @keyframes fade-down {
     from {
         opacity: 0;
         transform: translateY(-20px)
     }

     to {
         opacity: 1;
         transform: none
     }
 }