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

 body {
   font-family: 'Inter', sans-serif;
   background: #f8faf9;
   background-image:
     radial-gradient(at 20% 30%, rgba(34, 139, 114, 0.06) 0px, transparent 50%),
     radial-gradient(at 80% 70%, rgba(52, 168, 137, 0.05) 0px, transparent 50%),
     radial-gradient(at 50% 50%, rgba(34, 139, 114, 0.03) 0px, transparent 50%);
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 2rem 1rem;
   color: #1a2e27;
 }

 .container {
   max-width: 680px;
   width: 100%;
   background: #ffffff;
   border-radius: 24px;
   box-shadow:
     0 1px 2px rgba(0, 0, 0, 0.03),
     0 8px 16px rgba(0, 0, 0, 0.04),
     0 24px 48px rgba(34, 139, 114, 0.08);
   overflow: hidden;
   animation: slideUp 0.6s ease-out;
   border: 1px solid rgba(34, 139, 114, 0.08);
 }

 @keyframes slideUp {
   from {
     opacity: 0;
     transform: translateY(30px);
   }

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

 .header {
   background: linear-gradient(135deg, #228b72 0%, #1a7560 100%);
   padding: 3.5rem 2.5rem;
   text-align: center;
   position: relative;
   overflow: hidden;
 }

 .header::before {
   content: '';
   position: absolute;
   top: -50%;
   right: -10%;
   width: 300px;
   height: 300px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 50%;
   animation: float 6s ease-in-out infinite;
 }

 .header::after {
   content: '';
   position: absolute;
   bottom: -30%;
   left: -5%;
   width: 200px;
   height: 200px;
   background: rgba(255, 255, 255, 0.08);
   border-radius: 50%;
   animation: float 8s ease-in-out infinite;
   animation-delay: 1s;
 }

 @keyframes float {

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

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

 .header h1 {
   font-family: 'Fraunces', serif;
   font-size: 2.5rem;
   font-weight: 700;
   color: #ffffff;
   margin-bottom: 0.5rem;
   position: relative;
   z-index: 1;
 }

 .header p {
   color: rgba(255, 255, 255, 0.95);
   font-size: 1.05rem;
   position: relative;
   z-index: 1;
 }

 .form-content {
   padding: 2.5rem;
 }

 .progress-bar {
   height: 4px;
   background: #e8f3ef;
   border-radius: 2px;
   margin-bottom: 2rem;
   overflow: hidden;
 }

 .progress-fill {
   height: 100%;
   background: linear-gradient(90deg, #228b72 0%, #34a889 100%);
   width: 0%;
   transition: width 0.4s ease;
   border-radius: 2px;
 }

 .form-section {
   opacity: 0;
   animation: fadeIn 0.5s ease-out forwards;
   animation-delay: 0.2s;
 }

 @keyframes fadeIn {
   to {
     opacity: 1;
   }
 }

 .form-group {
   margin-bottom: 1.75rem;
 }

 label {
   display: block;
   font-weight: 600;
   font-size: 0.9rem;
   color: #1a2e27;
   margin-bottom: 0.5rem;
   letter-spacing: 0.01em;
 }

 .required {
   color: #228b72;
   margin-left: 2px;
 }

 input,
 select,
 textarea {
   width: 100%;
   padding: 0.95rem 1.1rem;
   border: 2px solid #dae8e3;
   border-radius: 12px;
   font-size: 1rem;
   font-family: 'Inter', sans-serif;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   background: #f8fdfb;
   color: #1a2e27;
 }

 input:focus,
 select:focus,
 textarea:focus {
   outline: none;
   border-color: #228b72;
   background: #ffffff;
   box-shadow:
     0 0 0 4px rgba(34, 139, 114, 0.1),
     0 2px 8px rgba(34, 139, 114, 0.08);
   transform: translateY(-1px);
 }

 input:hover,
 select:hover,
 textarea:hover {
   border-color: #b8d4cb;
 }

 textarea {
   resize: vertical;
   min-height: 100px;
 }

 .form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1.25rem;
 }

 .radio-group {
   display: flex;
   gap: 1rem;
   flex-wrap: wrap;
 }

 .radio-option {
   position: relative;
 }

 .radio-option input[type="radio"] {
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
 }

 .radio-label {
   display: inline-block;
   padding: 0.7rem 1.5rem;
   border: 2px solid #dae8e3;
   border-radius: 12px;
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   background: #f8fdfb;
   font-weight: 500;
   font-size: 0.95rem;
   position: relative;
   overflow: hidden;
 }

 .radio-label::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, #228b72 0%, #1a7560 100%);
   opacity: 0;
   transition: opacity 0.3s ease;
   z-index: 0;
 }

 .radio-label span {
   position: relative;
   z-index: 1;
 }

 .radio-option input[type="radio"]:checked+.radio-label::before {
   opacity: 1;
 }

 .radio-option input[type="radio"]:checked+.radio-label {
   border-color: #228b72;
   color: #ffffff;
   transform: scale(1.05);
   box-shadow: 0 4px 12px rgba(34, 139, 114, 0.3);
 }

 .radio-label:hover {
   border-color: #228b72;
   transform: translateY(-2px);
 }

 .checkbox-group {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
 }

 .checkbox-option {
   display: flex;
   align-items: center;
   gap: 0.75rem;
 }

 .checkbox-option input[type="checkbox"] {
   width: 20px;
   height: 20px;
   cursor: pointer;
   accent-color: #228b72;
 }

 .checkbox-option label {
   margin: 0;
   font-weight: 500;
   cursor: pointer;
 }

 .info-box {
   background: #f0f9f6;
   border-left: 4px solid #34a889;
   padding: 1rem 1.25rem;
   border-radius: 8px;
   margin-bottom: 1.75rem;
   font-size: 0.9rem;
   color: #2d5a4d;
   animation: slideIn 0.5s ease-out;
 }

 @keyframes slideIn {
   from {
     opacity: 0;
     transform: translateX(-20px);
   }

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

 .submit-btn {
   width: 100%;
   padding: 1.1rem;
   background: linear-gradient(135deg, #228b72 0%, #1a7560 100%);
   color: #ffffff;
   border: none;
   border-radius: 12px;
   font-size: 1.05rem;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
   font-family: 'Inter', sans-serif;
   box-shadow: 0 4px 12px rgba(34, 139, 114, 0.3);
   margin-top: 1rem;
 }

 .submit-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(34, 139, 114, 0.4);
 }

 .submit-btn:active {
   transform: translateY(0);
 }

 .success-message {
   display: none;
   text-align: center;
   padding: 3rem 2rem;
   animation: fadeIn 0.6s ease-out;
 }

 .success-message.active {
   display: block;
 }

 .success-icon {
   width: 80px;
   height: 80px;
   background: linear-gradient(135deg, #228b72 0%, #34a889 100%);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 1.5rem;
   animation: scaleIn 0.5s ease-out;
 }

 @keyframes scaleIn {
   from {
     transform: scale(0);
   }

   to {
     transform: scale(1);
   }
 }

 .success-icon::after {
   content: '✓';
   font-size: 2.5rem;
   color: #ffffff;
 }

 .success-message h2 {
   font-family: 'Fraunces', serif;
   font-size: 2rem;
   color: #1a2e27;
   margin-bottom: 0.75rem;
 }

 .success-message p {
   color: #2d5a4d;
   font-size: 1.05rem;
   line-height: 1.6;
 }

 @media (max-width: 640px) {
   .header h1 {
     font-size: 2rem;
   }

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

   .form-content {
     padding: 1.75rem;
   }

   .radio-group {
     flex-direction: column;
   }
 }

 .progress-fill-confirmation {
  width: 100%;
 }