body {
     min-height: 100vh;
     background: linear-gradient(45deg, #1a365d, #2563eb, #1e40af);
     position: relative;
     overflow-x: auto;
 }

 /* 3D Background Elements */
 .bg-shapes {
     position: fixed;
     width: 100%;
     height: 100%;
     z-index: 0;
 }

 .bg-shape {
     position: absolute;
     background: rgba(255, 255, 255, 0.03);
     backdrop-filter: blur(3px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     animation: floatShape 20s infinite linear;
 }

 @keyframes floatShape {
     0% {
         transform: rotate(0deg) translate(0, 0) rotate(0deg);
     }

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

 .card-wrapper {
     position: relative;
     width: 95%;
     max-width: 42rem;
     margin: 1rem auto;
     perspective: 1000px;
 }

 .card-shine {
     background: rgba(255, 255, 255, 0.95);
     border-radius: 20px;
     box-shadow:
         0 0 20px rgba(0, 0, 0, 0.1),
         0 10px 20px rgba(0, 0, 0, 0.1),
         0 20px 40px rgba(0, 0, 0, 0.1);
     transform-style: preserve-3d;
     transition: transform 0.3s ease;
 }

 .card-shine:hover {
     /* transform: translateY(-5px) rotateX(2deg) rotateY(2deg); */
 }

 .input-wrapper {
     transform-style: preserve-3d;
     transition: transform 0.3s ease;
 }

 .input-focus:focus {
     transform: translateZ(10px);
     box-shadow:
         0 0 0 2px rgba(37, 99, 235, 0.2),
         0 10px 20px rgba(0, 0, 0, 0.1);
 }

 .btn-3d {
     position: relative;
     transform-style: preserve-3d;
     transition: all 0.3s ease;
 }

 .btn-3d:hover {
     transform: translateY(-3px) translateZ(10px);
 }

 .btn-3d:active {
     transform: translateY(2px) translateZ(5px);
 }

 /* Animated Background */
 .animated-bg {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     background:
         radial-gradient(circle at 30% 30%, rgba(37, 99, 235, 0.4) 0%, transparent 70%),
         radial-gradient(circle at 70% 70%, rgba(29, 78, 216, 0.4) 0%, transparent 70%);
     filter: blur(30px);
 }

 body {
     min-height: 100vh;
     background: linear-gradient(45deg, #922424, #734f42);
     position: relative;
     overflow: auto;
 }

 .animated-background {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
 }

 .animated-background::before {
     content: '';
     position: absolute;
     width: 200%;
     height: 200%;
     top: -50%;
     left: -50%;
     background: radial-gradient(circle, transparent 20%, #922424 20%, #922424 80%, transparent 80%, transparent),
         radial-gradient(circle, transparent 20%, #734f42 20%, #734f42 80%, transparent 80%, transparent) 50px 50px;
     background-size: 100px 100px;
     animation: backgroundAnimation 4s linear infinite;
     opacity: 0.1;
 }

 @keyframes backgroundAnimation {
     0% {
         transform: rotate(0deg);
     }

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

 .wave {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 100px;
     background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.05' d='M0,128L48,144C96,160,192,192,288,192C384,192,480,160,576,144C672,128,768,128,864,144C960,160,1056,192,1152,186.7C1248,181,1344,139,1392,117.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
     background-size: 1440px 100px;
     animation: waveAnimation 10s linear infinite;
 }

 @keyframes waveAnimation {
     0% {
         background-position-x: 0;
     }

     100% {
         background-position-x: 1440px;
     }
 }

 .floating-particles {
     position: fixed;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     pointer-events: none;
 }

 .particle {
     position: absolute;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     animation: float 6s infinite;
 }

 @keyframes float {

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

     50% {
         transform: translateY(-60vh) rotate(180deg);
         opacity: 0.5;
     }
 }

 .page-container {
     min-height: 100vh;
     display: grid;
     place-items: center;
     padding: 1rem;
 }

 .card-wrapper {
     position: relative;
     width: 95%;
     max-width: 42rem;
     margin: 1rem auto;
     perspective: 1000px;
 }

 .card-shine {
     background: rgba(255, 255, 255, 0.95);
     border-radius: 20px;
     box-shadow:
         0 0 20px rgba(0, 0, 0, 0.1),
         0 10px 20px rgba(0, 0, 0, 0.1),
         0 20px 40px rgba(0, 0, 0, 0.1);
     transform-style: preserve-3d;
     transition: transform 0.3s ease;
 }

 .card-shine:hover {
     /* transform: translateY(-5px) rotateX(2deg) rotateY(2deg); */
 }

 .form-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
     gap: clamp(1rem, 2vw, 1.5rem);
 }

 .input-wrapper {
     position: relative;
     transition: all 0.3s ease;
     transform-style: preserve-3d;
 }

 .input-wrapper:focus-within {
     transform: translateY(-2px);
 }

 .input-icon {
     position: absolute;
     right: 1rem;
     top: 50%;
     transform: translateY(-50%);
     color: #922424;
     transition: all 0.3s ease;
 }

 @media (max-width: 640px) {
     .card-wrapper {
         width: 100%;
         margin: 0;
         border-radius: 0;
     }

     .form-grid {
         grid-template-columns: 1fr;
     }

     .input-wrapper input {
         font-size: 16px;
         /* Prevents zoom on mobile */
     }
 }

 @media (min-width: 1024px) {
     .card-wrapper {
         padding: 2.5rem;
     }
 }