/* css for logo text */
 .logo-text {
     color: light-dark(#038ef7, mediumspringgreen);
 }

 /* hero title animation */

 .hero-title {
     display: flex;
     gap: 05px;
     position: relative;
     /* Ensures children can move in 3D space */
     max-width: max-content;
     margin-inline: auto;
     /* Enable 3D transformations for children */
     transform-style: preserve-3d;
     perspective: 1000px;
     /* Adjust perspective for more/less depth */
     /* Center the title and allow space for the underline */
 }

 .word {
     display: inline-block;
     opacity: 0;
     /* Start invisible and ready for animation */
 }

 /* 3D ENTRY ANIMATION */
 @keyframes zoomIn {
     0% {
         opacity: 0;
         transform: translateY(20px) translateZ(500px) scale(0.8);
     }

     100% {
         opacity: 1;
         transform: translateY(0) translateZ(0) scale(1);
     }
 }

 /* Staggered starts */
 .is-visible .word-plan {
     animation: zoomIn .4S cubic-bezier(.16, 1, .3, 1) forwards;
 }

 .is-visible .word-focus {
     animation: zoomIn .4S cubic-bezier(.16, 1, .3, 1) 500ms forwards;
 }

 .is-visible .word-achieve {
     animation: zoomIn .4S cubic-bezier(.16, 1, .3, 1) 900ms forwards;
 }

 /* THE EXPANDING UNDERLINE */
 .is-visible .underline {
     position: absolute;
     bottom: -8px;
     left: 0;
     height: 4px;
     background: light-dark(#3AAA35, #5d5f6c);
     width: 0;
     border-radius: 4px;
     animation: growLine 2.8s cubic-bezier(.45, 0, .55, 1) forwards;
     animation-delay: 400ms;
     display: none;
 }

 @keyframes growLine {
     0% {
         width: 0;
     }

     100% {
         width: 100%;
     }
 }

 @keyframes fadeIn {
     0% {
         transform: translateY(12px);
         opacity: 0;
     }

     100% {
         transform: translateY(0);
         opacity: 1;
     }
 }

 .hero-subtitle.is-visible {
     opacity: 0;
     animation: fadeIn 0.5s forwards;
     animation-delay: 1.1s;
 }

 @keyframes glow {
     0% {
         /* Starting tight: solid emerald green */
         box-shadow: 0 0 0 0px rgba(46, 204, 113, 0.6),
             0 0 0 0px rgba(46, 204, 113, 0.3);
     }

     50% {
         /* Middle spread: fading out */
         box-shadow: 0 0 0 10px rgba(46, 204, 113, 0.1),
             0 0 0 10px rgba(46, 204, 113, 0);
     }

     100% {
         /* Total fade out */
         box-shadow: 0 0 0 0 rgba(46, 204, 113, 0),
             0 0 0 0 rgba(46, 204, 113, 0);
     }
 }

 .cta.is-visible {
     animation: glow 1.8s ease-in;
     animation-delay: 1.5s;
     animation-iteration-count: 1;

 }

 .subheadline {
     font-weight: 300;
     /* Nunito Light */
     font-size: 1.4rem;
     line-height: 1.6;
 }

 /* 3D Animation States */
 .reveal {
     opacity: 0;
     filter: blur(10px);
     transform: translateZ(-100px) translateY(20px);
     transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
     display: block;
 }

 .reveal.active {
     opacity: 1;
     filter: blur(0);
     transform: translateZ(0) translateY(0);
 }

 .problem {
     color: var(--text-dim);
 }

 .solution {
     color: var(--accent);
     margin-top: 10px;
     font-weight: 400;
     /* Slight bump for focus */
 }

 /* The "FocusLine" Progress Line under the text */
 .line-loader {
     width: 0%;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--accent), transparent);
     margin: 30px auto;
     transition: width 1.5s ease 1s;
 }

 .line-loader.active {
     width: 100%;
 }