/* 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 .2s cubic-bezier(.16, 1, .3, 1) forwards;
     -webkit-animation: zoomIn .2s cubic-bezier(.16, 1, .3, 1) forwards;
}

 .is-visible .word-focus {
     animation: zoomIn .2s cubic-bezier(.16, 1, .3, 1) 300ms forwards;
     -webkit-animation: zoomIn .2s cubic-bezier(.16, 1, .3, 1) 300ms forwards;
}

 .is-visible .word-achieve {
     animation: zoomIn .2s cubic-bezier(.16, 1, .3, 1) 400ms forwards;
     -webkit-animation: zoomIn .2s cubic-bezier(.16, 1, .3, 1) 400ms 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 1s ease .4s;
     -webkit-transition: width 1s ease .4s;
     -moz-transition: width 1s ease .4s;
     -ms-transition: width 1s ease .4s;
     -o-transition: width 1s ease .4s;
}

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

 /* Why FocusLine */
 .why-focusline {
     position: relative;
     display: grid;
     grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
     gap: clamp(48px, 8vw, 96px);
     align-items: center;
     margin: 96px auto 112px;
     padding: clamp(40px, 6vw, 72px);
     overflow: hidden;
     text-align: left;
     border: 1px solid var(--border-subtle);
     border-radius: 32px;
     background:
         radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 35%),
         var(--card-bg);
 }

 .why-focusline::before {
     content: "";
     position: absolute;
     inset: 0;
     pointer-events: none;
     background-image: linear-gradient(color-mix(in srgb, var(--border-subtle) 42%, transparent) 1px, transparent 1px),
         linear-gradient(90deg, color-mix(in srgb, var(--border-subtle) 42%, transparent) 1px, transparent 1px);
     background-size: 44px 44px;
     mask-image: linear-gradient(to left, rgba(0, 0, 0, .5), transparent 70%);
 }

 .why-focusline__content,
 .why-focusline__visual {
     position: relative;
     z-index: 1;
 }

 .why-focusline__eyebrow {
     width: max-content;
     margin: 0 0 18px;
     padding: 7px 12px;
     color: var(--accent);
     font-size: .78rem;
     font-weight: 700;
     letter-spacing: .12em;
     text-transform: uppercase;
     border: 1px solid var(--border-accent);
     border-radius: 999px;
     background: color-mix(in srgb, var(--accent) 8%, transparent);
 }

 .why-focusline h2 {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 16px;
     margin: 0;
     font-size: clamp(2.15rem, 4.5vw, 4rem);
     line-height: .98;
     letter-spacing: -.045em;
 }

 .why-focusline__title-main {
     max-width: 760px;
 }

 .why-focusline__title-main em {
     position: relative;
     display: inline-block;
     color: var(--accent);
     font-style: normal;
     isolation: isolate;
 }

 .why-focusline__title-main em::after {
     content: "";
     position: absolute;
     z-index: -1;
     right: -.05em;
     bottom: .02em;
     left: -.05em;
     height: .18em;
     border-radius: 999px;
     background: color-mix(in srgb, var(--accent) 24%, transparent);
     transform: rotate(-1.5deg);
 }

 .why-focusline__title-contrast {
     display: inline-flex;
     gap: .25em;
     align-items: center;
     padding: 9px 14px;
     color: var(--text-muted);
     font-size: clamp(.86rem, 1.5vw, 1rem);
     font-weight: 500;
     line-height: 1;
     letter-spacing: .01em;
     border: 1px solid var(--border-subtle);
     border-radius: 999px;
     background: color-mix(in srgb, var(--card) 65%, transparent);
 }

 .why-focusline__title-contrast > span {
     position: relative;
 }

 .why-focusline__title-contrast > span::after {
     content: "";
     position: absolute;
     top: 52%;
     right: -.08em;
     left: -.08em;
     height: 2px;
     border-radius: 999px;
     background: color-mix(in srgb, var(--text-muted) 72%, transparent);
     transform: rotate(-4deg);
 }

 .why-focusline__intro {
     max-width: 620px;
     margin: 26px 0 30px;
     color: var(--text-muted);
     font-size: clamp(1rem, 1.7vw, 1.15rem);
     line-height: 1.7;
 }

 .why-focusline__benefits {
     display: grid;
     gap: 16px;
     margin: 0 0 34px;
     padding: 0;
     list-style: none;
 }

 .why-focusline__benefits li {
     display: flex;
     gap: 13px;
     align-items: flex-start;
     color: var(--text-muted);
     line-height: 1.5;
 }

 .why-focusline__benefits strong {
     color: var(--text-primary);
     font-weight: 600;
 }

 .why-focusline__check {
     display: grid;
     flex: 0 0 24px;
     width: 24px;
     height: 24px;
     place-items: center;
     color: var(--success);
     font-size: .78rem;
     font-weight: 800;
     border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
     border-radius: 50%;
     background: color-mix(in srgb, var(--success) 10%, transparent);
 }

 .why-focusline__cta {
     display: inline-flex;
     gap: 12px;
     align-items: center;
     padding: 13px 0 8px;
     color: var(--text-primary);
     font-weight: 650;
     text-decoration: none;
     border-bottom: 2px solid var(--accent);
     transition: gap .2s ease, color .2s ease;
 }

 .why-focusline__cta:hover {
     gap: 17px;
     color: var(--accent);
 }

 .why-focusline__visual {
     transform: rotate(1.5deg);
 }

 .achievement-card {
     padding: clamp(22px, 3.5vw, 34px);
     border: 1px solid var(--border-accent);
     border-radius: 24px;
     background: light-dark(rgba(255, 255, 255, .9), rgba(18, 18, 18, .9));
     box-shadow: 0 28px 70px color-mix(in srgb, var(--accent) 15%, transparent);
 }

 .achievement-card__topline,
 .achievement-card__progress-copy {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .achievement-card__topline {
     padding-bottom: 22px;
     color: var(--text-muted);
     font-size: .7rem;
     font-weight: 700;
     letter-spacing: .12em;
 }

 .achievement-card__status {
     display: inline-flex;
     gap: 7px;
     align-items: center;
     letter-spacing: normal;
     text-transform: none;
 }

 .achievement-card__status i {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--success-light);
     box-shadow: 0 0 0 4px color-mix(in srgb, var(--success-light) 12%, transparent);
 }

 .achievement-card__goal {
     padding: 25px 0 32px;
     border-top: 1px solid var(--border-subtle);
 }

 .achievement-card__label,
 .achievement-card__finish span {
     display: block;
     margin-bottom: 8px;
     color: var(--text-muted);
     font-size: .78rem;
 }

 .achievement-card__goal strong {
     display: block;
     font-size: clamp(1.35rem, 2.5vw, 1.85rem);
     line-height: 1.25;
 }

 .achievement-card__progress-copy {
     margin-bottom: 10px;
     color: var(--text-muted);
     font-size: .84rem;
 }

 .achievement-card__progress-copy strong {
     color: var(--success);
     font-size: 1rem;
 }

 .achievement-card__track {
     height: 10px;
     overflow: hidden;
     border-radius: 999px;
     background: color-mix(in srgb, var(--text-muted) 15%, transparent);
 }

 .achievement-card__track span {
     display: block;
     width: 100%;
     height: 100%;
     border-radius: inherit;
     background: linear-gradient(90deg, var(--accent), var(--success-light));
     box-shadow: 0 0 18px color-mix(in srgb, var(--success-light) 45%, transparent);
 }

 .achievement-card__finish {
     display: flex;
     gap: 14px;
     align-items: center;
     margin-top: 28px;
     padding: 18px;
     border: 1px solid color-mix(in srgb, var(--success) 28%, transparent);
     border-radius: 16px;
     background: color-mix(in srgb, var(--success) 7%, transparent);
 }

 .achievement-card__finish span {
     margin-bottom: 3px;
 }

 .achievement-card__finish strong {
     display: block;
     font-size: .95rem;
 }

 .achievement-card__seal {
     display: grid;
     flex: 0 0 42px;
     width: 42px;
     height: 42px;
     place-items: center;
     color: white;
     font-weight: 800;
     border-radius: 50%;
     background: var(--success);
     box-shadow: 0 8px 20px color-mix(in srgb, var(--success) 30%, transparent);
 }

 .why-focusline__note {
     margin: 18px 18px 0 0;
     color: var(--text-muted);
     font-size: .85rem;
     text-align: right;
 }

 .why-focusline__note span {
     display: inline-block;
     margin-right: 5px;
     color: var(--accent);
     font-size: 1.1rem;
 }

 @media (max-width: 860px) {
     .why-focusline {
         grid-template-columns: 1fr;
         gap: 50px;
         margin-top: 72px;
         padding: clamp(28px, 7vw, 48px);
     }

     .why-focusline__visual {
         width: min(100%, 560px);
         margin-inline: auto;
     }
 }

 @media (max-width: 520px) {
     .why-focusline {
         margin-bottom: 80px;
         padding: 28px 20px;
         border-radius: 22px;
     }

     .why-focusline h2 {
         font-size: 2.15rem;
     }

     .why-focusline__visual {
         transform: none;
     }

     .achievement-card {
         padding: 20px;
     }

     .achievement-card__topline {
         gap: 12px;
         letter-spacing: .08em;
     }
 }

 @media (prefers-reduced-motion: reduce) {
     .why-focusline__cta {
         transition: none;
     }
 }