:root {
  --main-bg: #000D24;
  --surface-bg: #101A2A;
  --primary-accent: #1A3A5D;
  --secondary-accent: #3B5B7E;
  --highlight-accent: #2EC4B6; /* Teal accent */
  --text-primary: #F4F7FA;
  --text-secondary: #B0B8C1;
  --border-color: #22304A;
  --error: #E57373;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--text-primary);
  background-color: var(--main-bg);
}

h1, h2, h3 {
  font-family: 'DM Sans', sans-serif;
  color: var(--text-primary);
}

a {
  color: var(--highlight-accent);
  text-decoration: underline;
}

a:hover, a:focus {
  color: var(--secondary-accent);
}

.hero-section {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--primary-accent);
  color: var(--text-primary);
  padding: 4rem 2rem;
  align-items: center;
  justify-content: space-between;
  border-radius: 1rem;
  box-shadow: 0 2px 16px 0 rgba(0,0,0,0.12);
  width: 100%; /* Ensure full width */
}

.hero-content {
  width: 100%;      /* Take full width of hero-section */
  max-width: none;  /* Remove previous max-width if set */
}

.hero-content h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text-primary);
}

.hero-content img {
  width: 100%;      /* Image fills the hero-content */
  max-width: 100%;  /* Prevent overflow */
  height: auto;     /* Maintain aspect ratio */
  display: block;   /* Remove inline gap */
  border-radius: 0.75rem;
  background: var(--surface-bg);
  border: 1px solid var(--border-color);
  margin-bottom: 2rem; /* Optional: spacing below image */
}

.subhead {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  color: var(--text-secondary);
  width: 100%;
  display: block;
  box-sizing: border-box;
}

.cta-buttons a {
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  margin-right: 1rem;
  display: inline-block;
  transition: background 0.2s, color 0.2s, border 0.2s;
}

.btn-primary {
  background-color: var(--highlight-accent);
  color: var(--main-bg);
  border: none;
}

.btn-primary:hover {
  background-color: var(--secondary-accent);
  color: var(--text-primary);
}

.btn-secondary {
  background-color: transparent;
  border: 2px solid var(--highlight-accent);
  color: var(--highlight-accent);
}

.btn-secondary:hover {
  background-color: var(--surface-bg);
  color: var(--text-primary);
  border-color: var(--secondary-accent);
}

.hero-visual img {
  max-width: 400px;
  width: 100%;
  margin-top: 2rem;
  border-radius: 0.75rem;
  background: var(--surface-bg);
  border: 1px solid var(--border-color);
}

.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center; /* Optional: for vertical centering if you want it */
  width: 100%;
  margin: 0 auto;
  text-align: center; /* Fallback for inline elements */
}

section, .card, .panel {
  background: var(--surface-bg);
  color: var(--text-primary);
  border-radius: 0.75rem;
  box-shadow: 0 1px 8px 0 rgba(0,0,0,0.10);
  margin-bottom: 2rem;
  padding: 2rem;
}

.text-secondary {
  color: var(--text-secondary);
}

.text-error {
  color: var(--error);
}

hr, .divider {
  border-color: var(--border-color);
}

blockquote {
  border-left: 4px solid var(--highlight-accent);
  background: var(--surface-bg);
  color: var(--text-secondary);
  padding-left: 1rem;
  font-style: italic;
}

::-webkit-scrollbar {
  background: var(--surface-bg);
  width: 12px;
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 6px;
}

.top-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 48px; /* Increased padding for a larger banner */
  background: var(--main-bg); /* Use the main background color */
  border-bottom: 1px solid var(--border-color); /* Use theme border */
}

.banner-img-left,
.banner-img-right {
  height: 350px; /* Increased image height */
  width: auto;
}

.waitlist-section {
  padding: 4rem 2rem;
  text-align: center;
  max-width: 960px;
  margin: 0 auto 2rem auto;
  background: var(--primary-green-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

  .waitlist-section h3 {
    color: var(--primary-green);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
  }

  .waitlist-section .form-group label {
    color: var(--bs-dark);
    font-weight: 500;
  }

  .waitlist-section .form-control {
    margin-bottom: 0.5rem;
  }

  .waitlist-section .btn-primary {
    margin-top: 1.5rem;
    padding: 0.75rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 2rem;
  }

  .waitlist-section .alert {
    max-width: 400px;
    margin: 1rem auto 2rem auto;
  }

.waitlist-form-row {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* <-- changed from center */
  margin-bottom: 1.25rem;
}

.waitlist-label {
  flex: 0 0 110px;
  max-width: 110px;
  text-align: right;
  margin-right: 0.75rem;
  font-weight: 500;
  color: var(--bs-dark);
  font-size: 1rem;
  line-height: 1.2;
  height: 1.5em; /* Limit to one line of text */
  overflow: hidden; /* Hide overflow text */
  white-space: nowrap; /* Prevent wrapping */
  display: flex; /* Align label content vertically */
  align-items: flex-end; /* Center text vertically */
}

.waitlist-input {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  height: 2.5rem; /* or use a value that matches your design */
  min-height: 2.5rem;
  max-height: 2.5rem;
  line-height: 1.5;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  resize: none;
  overflow-y: hidden;
}

.waitlist-radio-option {
  display: flex;
  align-items: center; /* Vertically center radio and text */
  gap: 0.5rem; /* Space between radio and text */
  margin-bottom: 0.25rem;
  font-size: 1rem;
  white-space: nowrap; /* Keep on one line, remove if you want wrapping */
  justify-content: flex-start; /* Left-justify */
}

.waitlist-label-block {
  flex: none !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  text-align: left;
  margin-right: 0;
  margin-bottom: 0.25rem;
  white-space: normal; /* allow wrapping if needed */
  overflow: visible;
  color: var(--bs-dark);
  font-weight: 500;
}

.waitlist-radio-group {
  padding-left: 125px; /* Align with label width */
  text-align: left; /* Ensure left alignment */
  display: block; /* Prevent centering by flex */
}

@media (max-width: 600px) {
  .waitlist-radio-group {
    padding-left: 0; /* Remove padding for mobile */
  }
}

@media (max-width: 600px) {
  .waitlist-form-row,
  .waitlist-form-row.mb-3 {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 0 !important; /* Remove Bootstrap's margin */
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box;
  }

  @media (max-width: 600px) {
    .waitlist-label {
      flex: none !important;
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      margin-bottom: 0.15rem;
      margin-right: 0;
      text-align: left;
      overflow: hidden;
      white-space: nowrap;
      display: flex;
      align-items: center;
      font-size: 1rem;
    }
  }

  .waitlist-input {
    max-width: 100%;
    height: 2.5rem;
    min-height: 2.5rem;
    max-height: 2.5rem;
    line-height: 1.5;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }

  .banner-img-right {
    display: none;
  }
  .top-banner {
    padding-left: 8px;   /* Minimize left padding */
    padding-right: 16px; /* Optionally reduce right padding */
  }
}