body {
     font-family: "Manrope", sans-serif;
     overflow-x: hidden;
 }

 /* Hide default cursor where custom cursors are active */
 #hero-section,
 #hero-section *,
 .hover-reveal,
 .hover-reveal * {
     cursor: none !important;
 }

 /* Animated Staggered Letters */
 @keyframes wave {

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

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

 .animate-wave {
     display: inline-block;
     animation: wave 2s ease-in-out infinite;
 }

 /* 1. Orange Arrow Tracker */
 #cursor-arrow-tracker {
     position: fixed;
     top: 0;
     left: 0;
     pointer-events: none;
     z-index: 9999;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 /* 2. Big Reveal Circle Tracker */
 #cursor-reveal-tracker {
     position: fixed;
     top: 0;
     left: 0;
     pointer-events: none;
     z-index: 9998;
     transform: translate(-50%, -50%);
     width: 0px;
     height: 0px;
     border-radius: 50%;
     border: 1px solid rgba(255, 255, 255, 0.5);
     opacity: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1), height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
     mix-blend-mode: difference;
     color: white;
 }

 #cursor-reveal-tracker.is-revealing {
     width: 90px;
     height: 90px;
     opacity: 1;
 }

 @media (min-width: 768px) {
     #cursor-reveal-tracker.is-revealing {
         width: 140px;
         height: 140px;
     }
 }

 /* Fixed Spin Animation */
 @keyframes spin-slow {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 .animate-spin-slow {
     animation: spin-slow 8s linear infinite;
     transform-origin: center center;
 }

 .cursor-blink::after {
     content: "▮";
     animation: blink 1s step-start infinite;
 }

 /* Vertical grid lines */
 .grid-overlay {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     pointer-events: none;
     z-index: 50;
 }

 .grid-line-light {
     border-right: 1px solid var(--tw-colors-site-gridLight);
 }

 .grid-line-dark {
     border-right: 1px solid var(--tw-colors-site-gridDark);
 }

 .grid-overlay div:first-child {
     border-left: 1px solid transparent;
 }

 /* Code Bounding Box */
 .bounding-box {
     border: 2px solid #3b5af1;
     position: relative;
 }

 .handle {
     position: absolute;
     width: 8px;
     height: 8px;
     background: white;
     border: 2px solid #3b5af1;
     transition: all 0.3s ease;
 }

 .handle-tl {
     top: -5px;
     left: -5px;
 }

 .handle-tr {
     top: -5px;
     right: -5px;
 }

 .handle-bl {
     bottom: -5px;
     left: -5px;
 }

 .handle-br {
     bottom: -5px;
     right: -5px;
 }

 .bounding-box:hover .handle {
     transform: scale(1.5);
 }

 .img-fallback {
     background-color: #e2e8f0;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #94a3b8;
     font-size: 0.7rem;
     font-family: monospace;
 }

 /* Scroll Reveal Classes */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
 }

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

 /* Hide Scrollbar for carousels */
 .hide-scrollbar::-webkit-scrollbar {
     display: none;
 }

 .hide-scrollbar {
     -ms-overflow-style: none;
     scrollbar-width: none;
 }

 /* Glassmorphic Abacus Beads */
 .abacus-bead {
     position: absolute;
     border-radius: 50%;
     transition: left 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s ease-out, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
     cursor: pointer;
 }

 .abacus-bead:hover {
     transform: scale(1.6);
     background-color: #3b5af1 !important;
     box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
     z-index: 50;
 }

 /* Refined Tech Green (#47fc5c) with Thin Border, Soft Blur & Low Shadow */
 .text-pixel-style {
     color: #47fc5c;
     font-family: "JetBrains Mono", monospace;
     font-weight: 800;
     letter-spacing: -0.04em;
     text-shadow:
         -1px -1px 0 #020617, 1px -1px 0 #020617, -1px 1px 0 #020617, 1px 1px 0 #020617,
         3px 3px 0 rgba(2, 6, 23, 0.15), 6px 6px 0 rgba(2, 6, 23, 0.08),
         0px 4px 12px rgba(71, 252, 92, 0.25);
     position: relative;
     display: inline-block;
     transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
 }

 .text-pixel-style:hover {
     color: #71ff83;
     transform: translate(-2px, -2px);
     text-shadow:
         -1px -1px 0 #020617, 1px -1px 0 #020617, -1px 1px 0 #020617, 1px 1px 0 #020617,
         5px 5px 0 rgba(59, 130, 246, 0.15),
         10px 10px 0 rgba(2, 6, 23, 0.1),
         0px 6px 16px rgba(71, 252, 92, 0.4);
 }

 /* Dark Mode Override for ABACUS text border */
 .dark .text-pixel-style {
     text-shadow:
         -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff,
         3px 3px 0 rgba(255, 255, 255, 0.15), 6px 6px 0 rgba(255, 255, 255, 0.08),
         0px 4px 12px rgba(71, 252, 92, 0.25);
 }

 .dark .text-pixel-style:hover {
     text-shadow:
         -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff,
         5px 5px 0 rgba(59, 130, 246, 0.3),
         10px 10px 0 rgba(255, 255, 255, 0.1),
         0px 6px 16px rgba(71, 252, 92, 0.4);
 }

 /* Horizontal Scroll Hider for the Team Carousel */
 .team-carousel::-webkit-scrollbar {
     display: none;
 }

 .team-carousel {
     -ms-overflow-style: none;
     /* IE and Edge */
     scrollbar-width: none;
     /* Firefox */
 }


 /* CUSTOM DAY/NIGHT ANIMATED TOGGLE SWITCH     */

 .switch {
     position: relative;
     display: inline-block;
     width: 60px;
     height: 34px;
 }

 .switch .theme-checkbox {
     opacity: 0;
     width: 0;
     height: 0;
 }

 .theme-slider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #2196f3;
     transition: 0.4s;
     z-index: 0;
     overflow: hidden;
     border-radius: 34px;
 }

 .sun-moon {
     position: absolute;
     content: "";
     height: 26px;
     width: 26px;
     left: 4px;
     bottom: 4px;
     background-color: yellow;
     transition: 0.4s;
     border-radius: 50%;
 }

 .theme-checkbox:checked+.theme-slider {
     background-color: black;
 }

 .theme-checkbox:focus+.theme-slider {
     box-shadow: 0 0 1px #2196f3;
 }

 .theme-checkbox:checked+.theme-slider .sun-moon {
     transform: translateX(26px);
     background-color: white;
     animation: rotate-center 0.6s ease-in-out both;
 }

 .moon-dot {
     opacity: 0;
     transition: 0.4s;
     fill: gray;
 }

 .theme-checkbox:checked+.theme-slider .sun-moon .moon-dot {
     opacity: 1;
 }

 .mdot-1 {
     left: 10px;
     top: 3px;
     position: absolute;
     width: 6px;
     height: 6px;
     z-index: 4;
 }

 .mdot-2 {
     left: 2px;
     top: 10px;
     position: absolute;
     width: 10px;
     height: 10px;
     z-index: 4;
 }

 .mdot-3 {
     left: 16px;
     top: 18px;
     position: absolute;
     width: 3px;
     height: 3px;
     z-index: 4;
 }

 .lray-1 {
     left: -8px;
     top: -8px;
     position: absolute;
     width: 43px;
     height: 43px;
     z-index: -1;
     fill: white;
     opacity: 10%;
 }

 .lray-2 {
     left: -50%;
     top: -50%;
     position: absolute;
     width: 55px;
     height: 55px;
     z-index: -1;
     fill: white;
     opacity: 10%;
 }

 .lray-3 {
     left: -18px;
     top: -18px;
     position: absolute;
     width: 60px;
     height: 60px;
     z-index: -1;
     fill: white;
     opacity: 10%;
 }

 .cloud-light {
     position: absolute;
     fill: #eee;
     animation-name: cloud-move;
     animation-duration: 6s;
     animation-iteration-count: infinite;
 }

 .cloud-dark {
     position: absolute;
     fill: #ccc;
     animation-name: cloud-move;
     animation-duration: 6s;
     animation-iteration-count: infinite;
     animation-delay: 1s;
 }

 .cld-1 {
     left: 30px;
     top: 15px;
     width: 40px;
 }

 .cld-2 {
     left: 44px;
     top: 10px;
     width: 20px;
 }

 .cld-3 {
     left: 18px;
     top: 24px;
     width: 30px;
 }

 .cld-4 {
     left: 36px;
     top: 18px;
     width: 40px;
 }

 .cld-5 {
     left: 48px;
     top: 14px;
     width: 20px;
 }

 .cld-6 {
     left: 22px;
     top: 26px;
     width: 30px;
 }

 @keyframes cloud-move {
     0% {
         transform: translateX(0px);
     }

     40% {
         transform: translateX(4px);
     }

     80% {
         transform: translateX(-4px);
     }

     100% {
         transform: translateX(0px);
     }
 }

 .stars {
     transform: translateY(-32px);
     opacity: 0;
     transition: 0.4s;
 }

 .star {
     fill: white;
     position: absolute;
     transition: 0.4s;
     animation-name: star-twinkle;
     animation-duration: 2s;
     animation-iteration-count: infinite;
 }

 .theme-checkbox:checked+.theme-slider .stars {
     transform: translateY(0);
     opacity: 1;
 }

 .str-1 {
     width: 20px;
     top: 2px;
     left: 3px;
     animation-delay: 0.3s;
 }

 .str-2 {
     width: 6px;
     top: 16px;
     left: 3px;
 }

 .str-3 {
     width: 12px;
     top: 20px;
     left: 10px;
     animation-delay: 0.6s;
 }

 .str-4 {
     width: 18px;
     top: 0px;
     left: 18px;
     animation-delay: 1.3s;
 }

 @keyframes star-twinkle {
     0% {
         transform: scale(1);
     }

     40% {
         transform: scale(1.2);
     }

     80% {
         transform: scale(0.8);
     }

     100% {
         transform: scale(1);
     }
 }


 /* PREMIUM UIVERSE STAR RATING SYSTEM             */

 .rating {
     display: flex;
     flex-direction: row-reverse;
     gap: 0.3rem;
     --stroke: #94a3b8;
     /* Default Tailwind slate-400 */
     --fill: #ffc73a;
     align-items: center;
 }

 .dark .rating {
     --stroke: #475569;
     /* Dark mode slate-600 */
 }

 .rating input {
     appearance: unset;
     display: none;
 }

 .rating label {
     cursor: pointer;
 }

 .rating svg {
     width: 2.5rem;
     height: 2.5rem;
     overflow: visible;
     fill: transparent;
     stroke: var(--stroke);
     stroke-linejoin: bevel;
     stroke-dasharray: 12;
     animation: idle 4s linear infinite;
     transition: stroke 0.2s, fill 0.5s;
 }

 @keyframes idle {
     from {
         stroke-dashoffset: 24;
     }
 }

 .rating label:hover svg {
     stroke: var(--fill);
 }

 .rating input:checked~label svg {
     transition: 0s;
     animation: idle 4s linear infinite, yippee 0.75s backwards;
     fill: var(--fill);
     stroke: var(--fill);
     stroke-opacity: 0;
     stroke-dasharray: 0;
     stroke-linejoin: miter;
     stroke-width: 8px;
 }

 @keyframes yippee {
     0% {
         transform: scale(1);
         fill: var(--fill);
         fill-opacity: 0;
         stroke-opacity: 1;
         stroke: var(--stroke);
         stroke-dasharray: 10;
         stroke-width: 1px;
         stroke-linejoin: bevel;
     }

     30% {
         transform: scale(0);
         fill: var(--fill);
         fill-opacity: 0;
         stroke-opacity: 1;
         stroke: var(--stroke);
         stroke-dasharray: 10;
         stroke-width: 1px;
         stroke-linejoin: bevel;
     }

     30.1% {
         stroke: var(--fill);
         stroke-dasharray: 0;
         stroke-linejoin: miter;
         stroke-width: 8px;
     }

     60% {
         transform: scale(1.2);
         fill: var(--fill);
     }
 }

 .input-error {
     border-color: #ef4444 !important;
     background-color: #fef2f2 !important;
 }

 .input-error:focus {
     box-shadow: 0 0 0 1px #ef4444 !important;
 }

 .dark .input-error {
     border-color: #ef4444 !important;
     background-color: rgba(225, 29, 72, 0.05) !important;
 }

 .dark .input-error:focus {
     box-shadow: 0 0 0 1px #ef4444 !important;
 }

 .input-success {
     border-color: #10b981 !important;
     background-color: #ecfdf5 !important;
 }

 .input-success:focus {
     box-shadow: 0 0 0 1px #10b981 !important;
 }

 .dark .input-success {
     border-color: #10b981 !important;
     background-color: rgba(16, 185, 129, 0.05) !important;
 }

 .dark .input-success:focus {
     box-shadow: 0 0 0 1px #10b981 !important;
 }

 /* Custom Scrollbar for Modal */
 .modal-scroll::-webkit-scrollbar {
     width: 4px;
 }

 .modal-scroll::-webkit-scrollbar-track {
     background: rgba(0, 0, 0, 0.05);
     border-radius: 10px;
 }

 .dark .modal-scroll::-webkit-scrollbar-track {
     background: rgba(255, 255, 255, 0.02);
 }

 .modal-scroll::-webkit-scrollbar-thumb {
     background: #3b5af1;
     border-radius: 10px;
 }

 /* Futuristic Button Loading Animation */
 .btn-loading {
     pointer-events: none;
     position: relative;
     color: transparent !important;
 }

 .btn-loading::after {
     content: "EXECUTING...";
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-family: "JetBrains Mono", monospace;
     font-weight: 800;
     letter-spacing: 0.1em;
     background-image: linear-gradient(-45deg,
             rgba(255, 255, 255, 0.15) 25%,
             transparent 25%,
             transparent 50%,
             rgba(255, 255, 255, 0.15) 50%,
             rgba(255, 255, 255, 0.15) 75%,
             transparent 75%,
             transparent);
     background-size: 2rem 2rem;
     animation: strip-move 1s linear infinite;
 }

 @keyframes strip-move {
     0% {
         background-position: 2rem 0;
     }

     100% {
         background-position: 0 0;
     }
 }


 /* 3D NEUMORPHIC USER CAPSULE                     */

 .neu-capsule {
     background-color: #f8fafc;
     /* Matches site-light */
     border-radius: 50px;
     box-shadow: inset 4px 4px 10px #cbd5e1, inset -4px -4px 10px #ffffff;
     border: 2px solid #e2e8f0;
     transition: all 0.2s ease-in-out;
 }

 .neu-capsule:hover {
     box-shadow: inset 2px 2px 5px #cbd5e1, inset -2px -2px 5px #ffffff, 4px 4px 10px #cbd5e1, -4px -4px 10px #ffffff;
 }

 /* Dark Mode Neumorphism translation */
 .dark .neu-capsule {
     background-color: #0a0f1c;
     /* Matches dark menu bg */
     border: 2px solid #1f2937;
     box-shadow: inset 4px 4px 10px #030509, inset -4px -4px 10px #11192f;
 }

 .dark .neu-capsule:hover {
     box-shadow: inset 2px 2px 5px #030509, inset -2px -2px 5px #11192f, 4px 4px 10px #030509, -4px -4px 10px #11192f;
 }



 /* ULTRA-PREMIUM ANIMATED TOAST NOTIFICATIONS     */

 #toast-container {
     position: fixed;
     top: 24px;
     right: 24px;
     z-index: 999999;
     display: flex;
     flex-direction: column;
     gap: 16px;
     pointer-events: none;
 }

 .toast-card {
     width: 360px;
     min-height: 80px;
     border-radius: 16px;
     background: rgba(255, 255, 255, 0.85);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
     position: relative;
     display: flex;
     align-items: center;
     padding: 16px 20px;
     pointer-events: auto;
     /* Starts pushed out and scaled down */
     transform: translateX(120%) scale(0.8);
     opacity: 0;
     /* Elastic bounce effect */
     transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease-out;
     overflow: hidden;
 }

 .dark .toast-card {
     background: rgba(10, 15, 28, 0.85);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
 }

 .toast-card.show {
     transform: translateX(0) scale(1);
     opacity: 1;
 }

 .toast-card.hide {
     transform: translateX(120%) scale(0.9);
     opacity: 0;
     transition: transform 0.4s ease-in, opacity 0.3s ease-in;
 }

 /* The Glowing Accent Line */
 .toast-accent {
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 4px;
 }

 /* The Animated Countdown Progress Bar */
 .toast-progress {
     position: absolute;
     bottom: 0;
     left: 0;
     height: 3px;
     background: currentColor;
     opacity: 0.8;
     border-radius: 0 4px 4px 0;
     animation: toastProgress 7s linear forwards;
 }

 @keyframes toastProgress {
     0% {
         width: 100%;
     }

     100% {
         width: 0%;
     }
 }

 /* Pulsing Icon Container */
 .toast-icon-wrap {
     width: 42px;
     height: 42px;
     border-radius: 12px;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-shrink: 0;
     margin-right: 16px;
     position: relative;
 }

 /* The Glow behind the icon */
 .toast-icon-wrap::after {
     content: '';
     position: absolute;
     inset: -4px;
     border-radius: 16px;
     background: inherit;
     filter: blur(8px);
     opacity: 0.6;
     z-index: -1;
     animation: pulse-glow 2s infinite alternate ease-in-out;
 }

 @keyframes pulse-glow {
     0% {
         opacity: 0.3;
         transform: scale(0.9);
     }

     100% {
         opacity: 0.7;
         transform: scale(1.1);
     }
 }

 .toast-icon {
     width: 22px;
     height: 22px;
     color: white;
 }

 /* Text Styles */
 .toast-content {
     flex-grow: 1;
     display: flex;
     flex-direction: column;
     gap: 4px;
 }

 .toast-title {
     font-size: 14px;
     font-weight: 800;
     margin: 0;
     font-family: "JetBrains Mono", monospace;
     letter-spacing: 0.05em;
     color: #0f172a;
     text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
 }

 .dark .toast-title {
     color: #f8fafc;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
 }

 .toast-msg {
     font-size: 12px;
     font-weight: 600;
     margin: 0;
     color: #64748b;
     font-family: "Manrope", sans-serif;
     line-height: 1.4;
 }

 .dark .toast-msg {
     color: #94a3b8;
 }

 /* Spinning Close Button */
 .toast-close {
     width: 28px;
     height: 28px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #94a3b8;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
     background: rgba(0, 0, 0, 0.05);
     flex-shrink: 0;
     margin-left: 8px;
 }

 .dark .toast-close {
     background: rgba(255, 255, 255, 0.05);
 }

 .toast-close:hover {
     background: rgba(239, 68, 68, 0.15);
     color: #ef4444;
     transform: rotate(90deg) scale(1.1);
 }

 /* Theme Color Variants */
 .toast-success .toast-accent {
     background: #10b981;
     box-shadow: 0 0 15px #10b981;
 }

 .toast-success .toast-progress {
     color: #10b981;
 }

 .toast-success .toast-icon-wrap {
     background: linear-gradient(135deg, #059669, #34d399);
 }

 .toast-error .toast-accent {
     background: #ef4444;
     box-shadow: 0 0 15px #ef4444;
 }

 .toast-error .toast-progress {
     color: #ef4444;
 }

 .toast-error .toast-icon-wrap {
     background: linear-gradient(135deg, #dc2626, #f87171);
 }

 .toast-warning .toast-accent {
     background: #f59e0b;
     box-shadow: 0 0 15px #f59e0b;
 }

 .toast-warning .toast-progress {
     color: #f59e0b;
 }

 .toast-warning .toast-icon-wrap {
     background: linear-gradient(135deg, #d97706, #fbbf24);
 }

 .toast-info .toast-accent {
     background: #3b5af1;
     box-shadow: 0 0 15px #3b5af1;
 }

 .toast-info .toast-progress {
     color: #3b5af1;
 }

 .toast-info .toast-icon-wrap {
     background: linear-gradient(135deg, #2563eb, #60a5fa);
 }

 /* 1. Full-Screen Feedback Loader (ABACUS Text) */
 .feedback-loader {
     --main-size: 4em;
     /* Locked to keep clip-path math stable */
     --text-color: #ffffff;
     --shine-color: rgba(255, 255, 255, 0.4);
     --shadow-color: #3b5af1;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
     position: relative;
     font-size: var(--main-size);
     font-weight: 900;
     text-transform: uppercase;
     color: var(--text-color);
     width: 7.3em;
     height: 1.2em;
     filter: drop-shadow(0 0 0.05em var(--shine-color));
     margin: 0 auto;
     /* Force Scale Up for Mobile */
     transform: scale(1.6);
 }

 /* Force Even Bigger Scale for PC/Tablets */
 @media (min-width: 768px) {
     .feedback-loader {
         transform: scale(3);
     }
 }

 .feedback-loader .text {
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     white-space: nowrap;
     overflow: hidden;
     position: absolute;
 }

 .feedback-loader .text:nth-child(1) {
     clip-path: polygon(0% 0%, 11.11% 0%, 11.11% 100%, 0% 100%);
     font-size: calc(var(--main-size) / 20);
     margin-left: -2.1em;
     opacity: 0.6;
 }

 .feedback-loader .text:nth-child(2) {
     clip-path: polygon(11.11% 0%, 22.22% 0%, 22.22% 100%, 11.11% 100%);
     font-size: calc(var(--main-size) / 16);
     margin-left: -0.98em;
     opacity: 0.7;
 }

 .feedback-loader .text:nth-child(3) {
     clip-path: polygon(22.22% 0%, 33.33% 0%, 33.33% 100%, 22.22% 100%);
     font-size: calc(var(--main-size) / 13);
     margin-left: -0.33em;
     opacity: 0.8;
 }

 .feedback-loader .text:nth-child(4) {
     clip-path: polygon(33.33% 0%, 44.44% 0%, 44.44% 100%, 33.33% 100%);
     font-size: calc(var(--main-size) / 11);
     margin-left: -0.05em;
     opacity: 0.9;
 }

 .feedback-loader .text:nth-child(5) {
     clip-path: polygon(44.44% 0%, 55.55% 0%, 55.55% 100%, 44.44% 100%);
     font-size: calc(var(--main-size) / 10);
     margin-left: 0em;
     opacity: 1;
 }

 .feedback-loader .text:nth-child(6) {
     clip-path: polygon(55.55% 0%, 66.66% 0%, 66.66% 100%, 55.55% 100%);
     font-size: calc(var(--main-size) / 11);
     margin-left: 0.05em;
     opacity: 0.9;
 }

 .feedback-loader .text:nth-child(7) {
     clip-path: polygon(66.66% 0%, 77.77% 0%, 77.77% 100%, 66.66% 100%);
     font-size: calc(var(--main-size) / 13);
     margin-left: 0.33em;
     opacity: 0.8;
 }

 .feedback-loader .text:nth-child(8) {
     clip-path: polygon(77.77% 0%, 88.88% 0%, 88.88% 100%, 77.77% 100%);
     font-size: calc(var(--main-size) / 16);
     margin-left: 0.98em;
     opacity: 0.7;
 }

 .feedback-loader .text:nth-child(9) {
     clip-path: polygon(88.88% 0%, 100% 0%, 100% 100%, 88.88% 100%);
     font-size: calc(var(--main-size) / 20);
     margin-left: 2.1em;
     opacity: 0.6;
 }

 .feedback-loader .text span {
     animation: fb-scroll 2s cubic-bezier(0.1, 0.6, 0.9, 0.4) infinite, fb-shadow 2s cubic-bezier(0.1, 0.6, 0.9, 0.4) infinite;
 }

 .feedback-loader .text:nth-child(1) span {
     background: linear-gradient(to right, var(--text-color) 4%, var(--shadow-color) 7%);
     background-size: 200% auto;
     background-clip: text;
     color: transparent;
 }

 .feedback-loader .text:nth-child(2) span {
     background: linear-gradient(to right, var(--text-color) 9%, var(--shadow-color) 13%);
     background-size: 200% auto;
     background-clip: text;
     color: transparent;
 }

 .feedback-loader .text:nth-child(3) span {
     background: linear-gradient(to right, var(--text-color) 15%, var(--shadow-color) 18%);
     background-size: 200% auto;
     background-clip: text;
     color: transparent;
 }

 .feedback-loader .text:nth-child(4) span {
     background: linear-gradient(to right, var(--text-color) 20%, var(--shadow-color) 23%);
     background-size: 200% auto;
     background-clip: text;
     color: transparent;
 }

 .feedback-loader .text:nth-child(6) span {
     background: linear-gradient(to right, var(--shadow-color) 29%, var(--text-color) 32%);
     background-size: 200% auto;
     background-clip: text;
     color: transparent;
 }

 .feedback-loader .text:nth-child(7) span {
     background: linear-gradient(to right, var(--shadow-color) 34%, var(--text-color) 37%);
     background-size: 200% auto;
     background-clip: text;
     color: transparent;
 }

 .feedback-loader .text:nth-child(8) span {
     background: linear-gradient(to right, var(--shadow-color) 39%, var(--text-color) 42%);
     background-size: 200% auto;
     background-clip: text;
     color: transparent;
 }

 .feedback-loader .text:nth-child(9) span {
     background: linear-gradient(to right, var(--shadow-color) 45%, var(--text-color) 48%);
     background-size: 200% auto;
     background-clip: text;
     color: transparent;
 }

 .feedback-loader .line {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     height: 0.05em;
     width: calc(var(--main-size) / 2);
     margin-top: 0.9em;
     border-radius: 0.05em;
 }

 .feedback-loader .line::before {
     content: "";
     position: absolute;
     height: 100%;
     width: 100%;
     background-color: var(--text-color);
     opacity: 0.3;
 }

 .feedback-loader .line::after {
     content: "";
     position: absolute;
     height: 100%;
     width: 100%;
     background-color: var(--text-color);
     border-radius: 0.05em;
     transform: translateX(-90%);
     animation: fb-wobble 2s cubic-bezier(0.5, 0.8, 0.5, 0.2) infinite;
 }

 @keyframes fb-wobble {
     0% {
         transform: translateX(-90%);
     }

     50% {
         transform: translateX(90%);
     }

     100% {
         transform: translateX(-90%);
     }
 }

 @keyframes fb-scroll {
     0% {
         transform: translateX(-100%);
     }

     100% {
         transform: translateX(100%);
     }
 }

 @keyframes fb-shadow {
     0% {
         background-position: -98% 0;
     }

     100% {
         background-position: 102% 0;
     }
 }

 /* 2. Update Profile Loader (Spinning Dashes - FIXED) */
 .update-loader-wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100%;
     position: relative;
     width: 100%;
 }

 .dash {
     margin: 0 4px;
     width: 12px;
     height: 4px;
     border-radius: 4px;
     background: #ffffff;
     box-shadow: #ffffff 0 0 8px 0;
 }

 .first {
     margin-right: -6px;
     transform-origin: center left;
     animation: dash-spin 3s linear infinite;
 }

 .seconde {
     transform-origin: center right;
     animation: dash-spin2 3s linear infinite;
     animation-delay: .2s;
 }

 .third {
     transform-origin: center right;
     animation: dash-spin3 3s linear infinite;
     animation-delay: .3s;
 }

 .fourth {
     transform-origin: center right;
     animation: dash-spin4 3s linear infinite;
     animation-delay: .4s;
 }

 @keyframes dash-spin {
     0% {
         transform: rotate(0deg);
     }

     25% {
         transform: rotate(360deg);
     }

     30% {
         transform: rotate(370deg);
     }

     35% {
         transform: rotate(360deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 @keyframes dash-spin2 {
     0% {
         transform: rotate(0deg);
     }

     20% {
         transform: rotate(0deg);
     }

     30% {
         transform: rotate(-180deg);
     }

     35% {
         transform: rotate(-190deg);
     }

     40% {
         transform: rotate(-180deg);
     }

     78% {
         transform: rotate(-180deg);
     }

     95% {
         transform: rotate(-360deg);
     }

     98% {
         transform: rotate(-370deg);
     }

     100% {
         transform: rotate(-360deg);
     }
 }

 @keyframes dash-spin3 {
     0% {
         transform: rotate(0deg);
     }

     27% {
         transform: rotate(0deg);
     }

     40% {
         transform: rotate(180deg);
     }

     45% {
         transform: rotate(190deg);
     }

     50% {
         transform: rotate(180deg);
     }

     62% {
         transform: rotate(180deg);
     }

     75% {
         transform: rotate(360deg);
     }

     80% {
         transform: rotate(370deg);
     }

     85% {
         transform: rotate(360deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 @keyframes dash-spin4 {
     0% {
         transform: rotate(0deg);
     }

     38% {
         transform: rotate(0deg);
     }

     60% {
         transform: rotate(-360deg);
     }

     65% {
         transform: rotate(-370deg);
     }

     75% {
         transform: rotate(-360deg);
     }

     100% {
         transform: rotate(-360deg);
     }
 }

 /* 3. Register Loader (Orbiting Dots - ALREADY WORKING) */
 .register-loader {
     color: #fff;
     width: 4px;
     aspect-ratio: 1;
     border-radius: 50%;
     margin: 0 auto;
     animation: l37-1 0.75s infinite linear alternate, l37-2 1.5s infinite linear;
 }

 @keyframes l37-1 {

     0%,
     20% {
         box-shadow: 15px 0 0 2px, 5px 0 0 2px, -5px 0 0 2px, -15px 0 0 2px;
     }

     60%,
     100% {
         box-shadow: 6px 0 0 2px, 7px 0 0 4px, -7px 0 0 4px, -6px 0 0 2px;
     }
 }

 @keyframes l37-2 {

     0%,
     25% {
         transform: rotate(0);
     }

     50%,
     100% {
         transform: rotate(0.5turn);
     }
 }

 /* 4. Login Loader (Radial Dots - FIXED) */
 .login-loader {
     width: 22px;
     height: 22px;
     display: grid;
     margin: 0 auto;
     flex-shrink: 0;
 }

 .login-loader::before,
 .login-loader::after {
     content: "";
     grid-area: 1/1;
     --c: radial-gradient(farthest-side, #ffffff 92%, rgba(255, 255, 255, 0));
     background: var(--c) 50% 0, var(--c) 50% 100%, var(--c) 100% 50%, var(--c) 0 50%;
     background-size: 6px 6px;
     background-repeat: no-repeat;
     animation: login-spin 1s infinite;
 }

 .login-loader::before {
     margin: 3px;
     filter: hue-rotate(45deg);
     background-size: 4px 4px;
     animation-timing-function: linear;
 }

 @keyframes login-spin {
     100% {
         transform: rotate(.5turn);
     }
 }


 /* CREATIVE SECTION UI & GLASSMORPHISM            */


 /* Floating Background Orbs */
 .ambient-orb {
     position: absolute;
     border-radius: 50%;
     filter: blur(60px);
     opacity: 0.4;
     animation: float-orb 10s ease-in-out infinite alternate;
     z-index: 0;
     pointer-events: none;
 }

 .dark .ambient-orb {
     opacity: 0.2;
 }

 @keyframes float-orb {
     0% {
         transform: translate(0, 0) scale(1);
     }

     100% {
         transform: translate(30px, -50px) scale(1.2);
     }
 }

 /* Frosted Glass Quote Cards */
 .glass-quote-card {
     background: rgba(255, 255, 255, 0.4);
     backdrop-filter: blur(24px);
     -webkit-backdrop-filter: blur(24px);
     border: 1px solid rgba(255, 255, 255, 0.6);
     box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
     border-radius: 2rem;
     position: relative;
     overflow: hidden;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .dark .glass-quote-card {
     background: rgba(10, 15, 28, 0.4);
     border: 1px solid rgba(255, 255, 255, 0.05);
     box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
 }

 .glass-quote-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 40px 0 rgba(59, 130, 246, 0.15);
 }

 /* Massive Quote Watermark */
 .quote-watermark {
     position: absolute;
     font-size: 15rem;
     font-family: serif;
     line-height: 1;
     top: -40px;
     left: 10px;
     opacity: 0.04;
     z-index: 0;
     pointer-events: none;
     background: linear-gradient(180deg, var(--tw-colors-site-blue), transparent);
     background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .dark .quote-watermark {
     opacity: 0.08;
 }

 /* Avatar Floating Effect */
 .avatar-float {
     animation: float-avatar 6s ease-in-out infinite;
 }

 @keyframes float-avatar {

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

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


 /* HIGH-SPEED PARACHUTE LOADER ANIMATIONS         */


 /* Sway with a slight vertical bounce to simulate air resistance */
 @keyframes parachute-sway {

     0%,
     100% {
         transform: rotate(-8deg) translateY(0px);
     }

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

 .animate-sway {
     animation: parachute-sway 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
     transform-origin: top center;
 }

 /* High-speed upward movement for clouds and stars */
 @keyframes high-speed-up {
     0% {
         transform: translateY(150%) scale(0.9);
         opacity: 0;
     }

     15% {
         opacity: 1;
     }

     85% {
         opacity: 1;
     }

     100% {
         transform: translateY(-150%) scale(1.1);
         opacity: 0;
     }
 }

 .parallax-particle {
     position: absolute;
     animation: high-speed-up linear infinite;
     will-change: transform;
 }

 /* Anime-style wind speed lines */
 @keyframes wind-rush {
     0% {
         transform: translateY(200%);
         opacity: 0;
     }

     20% {
         opacity: 0.8;
     }

     80% {
         opacity: 0.8;
     }

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

 .wind-line {
     position: absolute;
     width: 2px;
     background: linear-gradient(to top, transparent, currentColor, transparent);
     animation: wind-rush linear infinite;
     will-change: transform;
 }

 /* ========================================== */
 /* Animated Filter Buttons */
 /* ========================================== */
 .anim-btn {
     height: 42px;
     /* Fixed height for the slide effect */
     min-width: 140px;
     border-radius: 50px;
     position: relative;
     overflow: hidden;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .anim-btn span {
     display: block;
     width: 100%;
     text-align: center;
     transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: absolute;
     left: 0;
     transform: translateY(-50%);
 }

 .btn-text-one {
     top: 50%;
 }

 /* Text two is always white because it sits on the dark blue background */
 .btn-text-two {
     top: 150%;
     color: #ffffff !important;
 }

 /* Hover State */
 .anim-btn:hover .btn-text-one {
     top: -50%;
 }

 .anim-btn:hover .btn-text-two {
     top: 50%;
 }

 .anim-btn:hover {
     background: linear-gradient(to top, #00154c, #12376e, #23487f);
     border-color: transparent !important;
     box-shadow: 0 10px 20px rgba(18, 55, 110, 0.3);
 }

 /*   ACTIVE STATE FIX (Works perfectly in Light & Dark Mode) */
 .anim-active-btn {
     background: linear-gradient(to top, #00154c, #12376e, #23487f) !important;
     border-color: transparent !important;
     box-shadow: 0 10px 20px rgba(18, 55, 110, 0.4) !important;
 }

 /* Locks the slide animation in the "up" position */
 .anim-active-btn .btn-text-one {
     top: -50%;
 }

 .anim-active-btn .btn-text-two {
     top: 50%;
 }

 /* ========================================== */
 /* Animated CTA Button (Explore More) */
 /* ========================================== */
 .cta {
     border: none;
     background: none;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
 }

 .cta span {
     padding-bottom: 7px;
     letter-spacing: 4px;
     font-size: 14px;
     padding-right: 15px;
     text-transform: uppercase;
     font-weight: 700;
 }

 .cta svg {
     transform: translateX(-8px);
     transition: all 0.3s ease;
     fill: currentColor;
     /* Automatically matches text color */
 }

 .cta:hover svg {
     transform: translateX(0);
 }

 .cta:active svg {
     transform: scale(0.9);
 }

 .hover-underline-animation {
     position: relative;
     padding-bottom: 7px;
 }

 .hover-underline-animation:after {
     content: "";
     position: absolute;
     width: 100%;
     transform: scaleX(0);
     height: 2px;
     bottom: 0;
     left: 0;
     background-color: currentColor;
     /* Automatically matches text color */
     transform-origin: bottom right;
     transition: transform 0.25s ease-out;
 }

 .cta:hover .hover-underline-animation:after {
     transform: scaleX(1);
     transform-origin: bottom left;
 }

 @keyframes pulse {

     0%,
     100% {
         transform: scale(1);
     }

     50% {
         transform: scale(0.98);
     }
 }

 .animate-pulse {
     animation: pulse 0.5s infinite;
 }