@keyframes spin-slow {
   to {
     transform: rotate(360deg);
   }
 }

 @keyframes pulse-ring {
   0% {
     transform: scale(0.85);
     opacity: 0.6;
   }

   50% {
     transform: scale(1.05);
     opacity: 0.2;
   }

   100% {
     transform: scale(0.85);
     opacity: 0.6;
   }
 }

 @keyframes float {

   0%,
   100% {
     transform: translateY(0px);
   }

   50% {
     transform: translateY(-8px);
   }
 }

 @keyframes blink {

   0%,
   100% {
     opacity: 1;
   }

   50% {
     opacity: 0;
   }
 }

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

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 @keyframes bar-grow {
   from {
     width: 0;
   }

   to {
     width: var(--w);
   }
 }

 @keyframes dot-bounce {

   0%,
   80%,
   100% {
     transform: scale(0.8);
     opacity: 0.4;
   }

   40% {
     transform: scale(1.1);
     opacity: 1;
   }
 }

 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 body,
 .wrap {
   font-family: var(--font-display);
   color: var(--color-text-primary);
 }

 .wrap {
   padding: 2.5rem 1.5rem 2rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0;
   max-width: 640px;
   margin: 0 auto;
 }

 .icon-area {
   position: relative;
   width: 96px;
   height: 96px;
   display: flex;
   align-items: center;
   justify-content: center;
   animation: float 3.6s ease-in-out infinite;
   margin-bottom: 1.75rem;
 }

 .ring {
   position: absolute;
   inset: -10px;
   border-radius: 50%;
   border: 2px solid #7F77DD44;
   animation: pulse-ring 2.8s ease-in-out infinite;
 }

 .ring2 {
   inset: -22px;
   border-color: #7F77DD22;
   animation-delay: 0.6s;
   animation-duration: 3.4s;
 }

 .icon-circle {
   width: 96px;
   height: 96px;
   border-radius: 50%;
   background: linear-gradient(135deg, #EEEDFE 0%, #CECBF6 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1.5px solid #AFA9EC66;
 }

 .icon-circle i {
   font-size: 38px;
   color: #534AB7;
   animation: spin-slow 8s linear infinite;
 }

 .badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: var(--color-background-secondary);
   border: 0.5px solid var(--color-border-secondary);
   border-radius: 999px;
   padding: 4px 14px;
   font-size: 11px;
   font-family: var(--font-display);
   letter-spacing: 0.08em;
   color: var(--color-text-secondary);
   margin-bottom: 1rem;
   animation: fade-up 0.5s ease both;
 }

 .badge-dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #EF9F27;
   animation: blink 1.4s ease-in-out infinite;
 }

 h1 {
   font-size: 26px;
   font-weight: 600;
   text-align: center;
   line-height: 1.3;
   color: var(--color-text-primary);
   margin-bottom: 0.6rem;
   animation: fade-up 0.55s 0.1s ease both;
 }

 .sub {
   font-size: 14px;
   color: var(--color-text-secondary);
   text-align: center;
   line-height: 1.7;
   max-width: 400px;
   margin-bottom: 2rem;
   animation: fade-up 0.55s 0.18s ease both;
 }

 .progress-wrap {
   width: 100%;
   max-width: 380px;
   margin-bottom: 2rem;
   animation: fade-up 0.55s 0.24s ease both;
 }

 .progress-header {
   display: flex;
   justify-content: space-between;
   font-size: 12px;
   font-family: var(--font-display);
   color: var(--color-text-secondary);
   margin-bottom: 6px;
 }

 .progress-bar-bg {
   height: 6px;
   border-radius: 999px;
   background: var(--color-background-secondary);
   border: 0.5px solid var(--color-border-tertiary);
   overflow: hidden;
 }

 .progress-bar-fill {
   --w: 62%;
   height: 100%;
   border-radius: 999px;
   background: linear-gradient(90deg, #7F77DD, #AFA9EC);
   width: 0;
   animation: bar-grow 1.4s 0.6s cubic-bezier(.22, 1, .36, 1) forwards;
 }

 .stages {
   width: 100%;
   max-width: 420px;
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-bottom: 2rem;
   animation: fade-up 0.55s 0.3s ease both;
 }

 .stage-row {
   display: flex;
   align-items: center;
   gap: 12px;
   background: var(--color-background-secondary);
   border: 0.5px solid var(--color-border-tertiary);
   border-radius: var(--border-radius-md);
   padding: 10px 14px;
 }

 .stage-icon {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   font-size: 13px;
 }

 .stage-icon.done {
   background: #EAF3DE;
   color: #3B6D11;
 }

 .stage-icon.active {
   background: #EEEDFE;
   color: #534AB7;
 }

 .stage-icon.pending {
   background: var(--color-background-primary);
   color: var(--color-text-secondary);
   border: 0.5px solid var(--color-border-secondary);
 }

 .stage-label {
   flex: 1;
   font-size: 13px;
   font-weight: 400;
 }

 .stage-status {
   font-size: 11px;
   font-family: var(--font-display);
 }

 .stage-status.done {
   color: #3B6D11;
 }

 .stage-status.active {
   color: #534AB7;
 }

 .stage-status.pending {
   color: var(--color-text-secondary);
 }

 .dots {
   display: inline-flex;
   gap: 3px;
   vertical-align: middle;
   margin-left: 2px;
 }

 .dots span {
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background: #534AB7;
   display: inline-block;
   animation: dot-bounce 1.4s ease-in-out infinite;
 }

 .dots span:nth-child(2) {
   animation-delay: 0.2s;
 }

 .dots span:nth-child(3) {
   animation-delay: 0.4s;
 }

 .info-row {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 12px;
   color: var(--color-text-secondary);
   animation: fade-up 0.55s 0.38s ease both;
 }

 .info-row i {
   font-size: 13px;
   color: #7F77DD;
 }

 .divider {
   width: 100%;
   max-width: 420px;
   border: none;
   border-top: 0.5px solid var(--color-border-tertiary);
   margin: 1.5rem 0;
 }

 .contact-block {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 13px;
   color: var(--color-text-secondary);
   animation: fade-up 0.55s 0.44s ease both;
   text-align: center;
   flex-direction: column;
 }

 .contact-block i {
   color: #7F77DD;
   font-size: 15px;
 }

 .contact-link {
   color: #534AB7;
   text-decoration: none;
   font-weight: 400;
 }

 .contact-link:hover {
   text-decoration: underline;
 }