body {
   margin: 0;
   /* overflow-x: hidden;
   overflow-y: scroll; */
   background: #020617;
   font-family: Arial, Helvetica, sans-serif;
   scrollbar-width: none;
   /* Firefox */
   -ms-overflow-style: none;
 }

 /* Hide scrollbar but keep scrolling enabled */

 html,
 body {
   overflow-y: auto;
   overflow-x: auto;
   scrollbar-width: none;
   /* Firefox */
   -ms-overflow-style: none;
   /* IE & Edge */
 }

 /* Chrome, Safari */
 html::-webkit-scrollbar,
 body::-webkit-scrollbar {
   display: none;
 }

 body::-webkit-scrollbar {
   display: none;
   /* Chrome, Safari */
 }

 /* SPLASH SCREEN */

 #splash {
   position: fixed;
   width: 100%;
   height: 100vh;
   background: #020617;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 999;
   transition: opacity 1s ease;
 }

 .background {
   position: absolute;
   width: 100%;
   height: 100%;
   background:
     radial-gradient(circle at top left, #0f766e33, transparent 30%),
     radial-gradient(circle at bottom right, #0891b233, transparent 30%),
     radial-gradient(circle at center, #1e293b, #020617 70%);
 }

 .glow {
   position: absolute;
   width: 500px;
   height: 500px;
   background: #06b6d4;
   filter: blur(140px);
   opacity: 0.15;
   animation: pulse 4s infinite alternate;
 }

 @keyframes pulse {
   from {
     transform: scale(1);
   }

   to {
     transform: scale(1.2);
   }
 }

 .letter {
   opacity: 0;
   display: inline-block;
   animation: reveal 0.5s forwards;
   color: white;
   text-shadow: 0 0 20px rgba(6, 182, 212, 0.7);
 }

 .letter:nth-child(1) {
   animation-delay: 0s;
 }

 .letter:nth-child(2) {
   animation-delay: 0.12s;
 }

 .letter:nth-child(3) {
   animation-delay: 0.24s;
 }

 .letter:nth-child(4) {
   animation-delay: 0.36s;
 }

 .letter:nth-child(5) {
   animation-delay: 0.48s;
 }

 .letter:nth-child(6) {
   animation-delay: 0.60s;
 }

 .letter:nth-child(7) {
   animation-delay: 0.72s;
 }

 .letter:nth-child(8) {
   animation-delay: 0.84s;
 }

 @keyframes reveal {

   from {
     opacity: 0;
     transform: translateY(40px) scale(0.8);
     filter: blur(10px);
   }

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

 .subtitle {
   opacity: 0;
   animation: fade 1s forwards;
   animation-delay: 1.2s;
 }

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

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

 /* MAIN SCREEN */

 #mainScreen {
   display: none;
   background: #0f172a;
   color: white;
 }

 .namehere {
   font-family: sans-serif;
   font-weight: 800;
   background: linear-gradient(to right, #63E6FF, #B7B1F7);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   display: inline-block;
 }

 .form {
   background-color: #0f172a;
   border-color: #232f4f;
 }

 #incomeSlider {
   width: 100%;
   appearance: none;
   background: transparent;
   cursor: pointer;
 }

 /* Track */
 #incomeSlider::-webkit-slider-runnable-track {
   height: 3px;
   background: #d1d5db;
   border-radius: 999px;
 }

 /* Thumb */
 #incomeSlider::-webkit-slider-thumb {
   appearance: none;
   margin-top: -3.5px;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #22d3ee;
   box-shadow:
     0 0 10px #22d3ee,
     0 0 20px #22d3ee;
 }

 /* Firefox */
 #incomeSlider::-moz-range-track {
   height: 3px;
   background: #d1d5db;
 }

 #incomeSlider::-moz-range-thumb {
   width: 20px;
   height: 20px;
   border: none;
   border-radius: 50%;
   background: #22d3ee;
   box-shadow:
     0 0 10px #22d3ee,
     0 0 20px #22d3ee;
 }

 /* Page 3 Meter  */

 .feature-gauge-wrapper {
   position: relative;
   width: 220px;
   height: 120px;
 }

 .feature-gauge-svg {
   width: 100%;
   height: 100%;
   overflow: visible;
 }

 .feature-gauge-bg {
   fill: none;
   stroke: #13284f;
   stroke-width: 14;
   stroke-linecap: round;
 }

 .feature-gauge-progress {
   fill: none;
   stroke-width: 14;
   stroke-linecap: round;
   stroke-dasharray: 377;
   stroke-dashoffset: 377;
   transition:
     stroke-dashoffset 0.35s ease,
     stroke 0.25s ease;
   filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.15));
 }

 .text-cyan-300,
 .text-green-300,
 .text-pink-300,
 .text-red-400 {

   transition:
     color 0.3s ease,
     text-shadow 0.3s ease;
 }

 .text-cyan-300 {
   text-shadow: 0 0 12px rgba(34, 211, 238, 0.6);
 }

 .text-green-300 {
   text-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
 }

 .text-pink-300 {
   text-shadow: 0 0 10px rgba(244, 114, 182, 0.5);
 }

 .text-red-400 {
   text-shadow: 0 0 10px rgba(248, 113, 113, 0.5);
 }

 .filter-active {
   background: linear-gradient(to right, #00d2ff, #8b5cf6);
   border: 1px solid #22d3ee;
   color: white;
   box-shadow: 0 0 10px rgba(34, 211, 238, 0.35);
 }

 .sliderwrap input[type="range"] {
   width: 100%;
   max-width: 100%;
 }

 .sliderwrap {
   width: 100%;
   overflow: hidden;
 }