/* Base resets and box-sizing */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background: #f7f8fa;
  color: #333;
}
/* Center container */
.page-container {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 1rem;
}
/* Card styling */
.card {
  background: #fff; border-radius: 8px;
  padding: 2rem; max-width: 400px; width: 100%;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
/* Progress bar */
.progress-bar {
  display: flex; justify-content: space-between;
  counter-reset: step; margin-bottom: 1.5rem; padding: 0;
}
.progress-bar .step {
  list-style: none; text-align: center; position: relative;
  flex: 1; font-size: 0.8rem; color: #999;
}
.progress-bar .step::before {
  content: counter(step); counter-increment: step;
  width: 32px; height: 32px; line-height: 32px;
  border: 2px solid #ccc; border-radius: 50%;
  background: #fff; margin: 0 auto 0.5rem;
  animation: fadeInCircle 0.4s ease forwards;
}
.progress-bar .step::after {
  content: ''; position: absolute; top: 16px; left: 50%;
  width: 100%; height: 2px; background: #ccc;
  transform-origin: left; transform: scaleX(0);
  animation: drawLine 0.4s ease forwards;
}
.progress-bar .step:last-child::after { display: none; }
.progress-bar .step.completed::before,
.progress-bar .step.completed::after {
  border-color: #FFB300; background: #FFB300; color: #fff;
}
.progress-bar .step.completed::after { background: #FFB300; }
.progress-bar .step:nth-child(1)::before { animation-delay: 0.2s; }
.progress-bar .step:nth-child(1)::after  { animation-delay: 0.6s; }
.progress-bar .step:nth-child(2)::before { animation-delay: 1.0s; }
.progress-bar .step:nth-child(2)::after  { animation-delay: 1.4s; }

@keyframes drawLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fadeInCircle { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }

/* Logo and heading */
.logo { text-align: center; margin-bottom: 1rem; }
.logo img { max-width: 180px; height: auto; }
.logo-heading { font-size: 1.25rem; font-weight: 600; margin-top: 0.5rem; }

/* Intro text */
.form-intro { text-align: center; color: #666; font-size: 0.9rem; margin-bottom: 1.5rem; }

/* Form elements */
.invitation-input {
  width: 100%; padding: 0.75rem 1rem; font-size: 1rem;
  border: 1px solid #ccc; border-radius: 4px; margin-bottom: 0.5rem;
}
.invitation-input:focus { outline: none; border-color: #3182ce; }

/* Helper and feedback */
.helper-link { text-align: center; margin-bottom: 1.5rem; }
.helper-link a { font-size: 0.85rem; color: #3182ce; text-decoration: none; }
.feedback { font-size: 0.85rem; margin-bottom: 0.5rem; height: 1em; }
.feedback.success { color: #38a169; }
.feedback.error { color: #e53e3e; }

/* Button */
.btn {
  display: block; width: 100%; padding: 0.75rem;
  background: #FFB300; color: #fff;
  font-size: 1rem; text-align: center;
  border: none; border-radius: 4px; cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.btn:hover { background: #e6a200; transform: translateY(-1px); }

/* Responsive tweak */
@media (max-width: 480px) {
  .card { padding: 1.5rem; }
}

/* Progress bar active step */
.progress-bar .step.active::before {
  border-color: #FFB300;
  background: #fff;
  color: #FFB300;
}
/* Modal styles */
#nda-modal .modal-close {
  position: absolute; top: 1rem; right: 1rem;
  font-size: 1.5rem; cursor: pointer;
}
#nda-modal .modal-iframe {
  border: none; flex: 1;
}

/* Progress Bar Styling */
.progress-bar {
  display: flex;
  justify-content: space-between;
  margin: 20px auto 30px;
  padding: 0;
  list-style: none;
  counter-reset: step;
  position: relative;
  max-width: 320px;
}

.progress-bar::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 5%;
  width: 90%;
  height: 3px;
  background-color: #eee;
  z-index: 0;
  transform: translateY(-50%);
}

.step {
  position: relative;
  z-index: 1;
  text-align: center;
  width: 33.33%;
  color: #999;
  font-weight: 500;
  transition: all 0.3s ease;
}

.step::before {
  content: counter(step);
  counter-increment: step;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 50%;
  display: block;
  text-align: center;
  margin: 0 auto 6px;
  background-color: #ccc;
  color: white;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.step.completed {
  color: #f5a100;
}

.step.completed::before {
  background-color: #f5a100;
  transform: scale(1.1);
}

.step.active {
  color: #f5a100;
}

.step.active::before {
  background-color: #ffa600;
  transform: scale(1.2);
}
/* Redesigned Progress Bar */
.progress-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px auto 40px;
  max-width: 360px;
  position: relative;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}

.circle {
  width: 30px;
  height: 30px;
  background-color: #ccc;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.label {
  margin-top: 6px;
  font-size: 14px;
  color: #777;
}

.progress-line {
  flex: 1;
  height: 3px;
  background-color: #eee;
  margin: 0 8px;
  transition: background-color 0.3s ease;
}

.progress-step.completed .circle,
.progress-step.active .circle {
  background-color: #f5a100;
  transform: scale(1.1);
}

.progress-step.completed .label,
.progress-step.active .label {
  color: #f5a100;
}
/* Progress Bar Animations */
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.85; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes fillLine {
  0% { background-color: #eee; width: 0; }
  100% { background-color: #f5a100; width: 100%; }
}

.progress-step.completed .circle,
.progress-step.active .circle {
  animation: pulse 0.6s ease-in-out;
}

.progress-line {
  position: relative;
  overflow: hidden;
  background-color: #eee;
}

.progress-line::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background-color: #f5a100;
  transform: scaleX(0);
  transform-origin: left;
  animation: fillLine 1s forwards;
}

.progress-step.completed .label,
.progress-step.active .label {
  transition: color 0.3s ease-in-out;
}
/* Progress Bar Polished Animations */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.9; }
}

@keyframes fillLine {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.progress-step.completed .circle,
.progress-step.active .circle {
  animation: pulse 0.6s ease-in-out;
}

.progress-line {
  position: relative;
  height: 3px;
  background-color: #eee;
  flex: 1;
  margin: 0 8px;
  overflow: hidden;
}

.progress-line::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background-color: #f5a100;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s ease-in-out;
}

/* When parent has class .progress-animate, animate the fill */
.progress-wrapper.animate .progress-line::after {
  transform: scaleX(1);
}
/* Progress Bar Structure */
.progress-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px auto 40px;
  max-width: 360px;
  position: relative;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
}

.circle {
  width: 30px;
  height: 30px;
  background-color: #ccc;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.label {
  margin-top: 6px;
  font-size: 14px;
  color: #777;
  transition: color 0.3s ease;
}

.progress-line {
  position: relative;
  height: 3px;
  flex: 1;
  margin: 0 8px;
  background-color: #eee;
  overflow: hidden;
}

.progress-line::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 0%;
  background-color: #f5a100;
  transition: width 0.6s ease-in-out;
  top: 0;
  left: 0;
}

.progress-step.completed .circle {
  background-color: #f5a100;
  transform: scale(1.05);
}

.progress-step.completed .label {
  color: #f5a100;
}

.progress-step.active .circle {
  background-color: #ffa600;
  transform: scale(1.1);
}

.progress-step.active .label {
  color: #ffa600;
}


#nda-modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

#nda-modal.active {
  display: flex;
}

#nda-modal .modal-content {
  background: #fff;
  width: 677px; /* Match screenshot width */
  height: 867px; /* Match screenshot height */
  max-width: 100%;
  max-height: 100%;
  overflow-y: auto;
  border-radius: 12px;
  position: relative;
  padding: 20px 20px 8px 20px;
  box-shadow: 0 0 40px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
}



canvas {
  width: 600px !important;
  height: 130px !important;
  border: none;
  display: block;
  margin: 0 auto;
}