/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    padding-top: 60px; /* Adjust for fixed header */
}


/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, #0A1B45 0%, #0A1B45 50%, #0A1B45 100%);
    padding: 20px 20px 0px 20px; /* no extra bottom padding */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    z-index: 1;
}

.hero-content {
    max-width: 800px;
    margin: 10px auto 0 auto;
    animation: fadeInUp 1s ease-out;
}

.hero-title {
    font-size: 4rem;
    font-weight: 800;
    color: #ffd600;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 5px;
    line-height: 1.1;
}

.hero-subtitle {
    font-size: 4rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
    line-height: 1.1;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.hero-description {
    font-size: 1.3rem;
    color: #e8eaf6;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
    font-weight: 300;
}

/* Hero Animation */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Form Container */
.form-container {
    max-width: 550px;
    width: 90%;
    background: white;
    padding: 40px;
    box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
    text-align: center;
    z-index: 10;
    position: relative;
    margin: -220px auto 20px auto; /* desktop overlap, starts right after hero paragraph */
}

.form-container h2 {
    margin: 0;
    font-size: 20px;
}

.form-container p {
    font-size: 12px;
    color: gray;
    margin-bottom: 20px;
}

/* Inputs, selects, textareas */
.form-container input,
.form-container select,
.form-container textarea {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 14px;
    box-sizing: border-box;
}

.form-container textarea {
    height: 80px;
    resize: none;
}

/* Phone container */
.phone-container {
    display: flex;
    margin: 5px 0;
}

.phone-container select {
    width: 25%;
    min-width: 60px;
    margin-right: 5px;
}

.phone-container input {
    width: calc(75% - 5px);
}

/* Button */
.form-container button {
    background-color: #ffcd00;
    border: none;
    color: black;
    padding: 12px;
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
}

.form-container button:hover {
    background-color: #e6b800;
}

/* Ransom Section */
.ransom-pancake-section {
    text-align: center;
    padding: 20px 20px;
    max-width: 800px;
    width: 100%;
    margin: auto;
    
}

.ransom-toast-as-seen-in {
    font-size: 14px;
    color: #333;
    margin-bottom: 50px;
}

.ransom-toast-as-seen-in span {
    margin: 0 5px;
}

.ransom-burrito-heading {
    font-size: 32px;
    font-weight: bold;
    color: #000;
    margin-bottom: 30px;
}

.ransom-taco-logos-wrapper {
  overflow: hidden;
  max-width: 900px; /* width of 3 logos */
  margin: 0 auto;
}

.ransom-taco-logos {
  display: flex;
  transition: transform 0.3s ease;
}

.ransom-waffle-logo {
  min-width: 300px; /* width of one logo */
  text-align: center;
  
}

.ransom-cookie-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 400px;
  margin: 20px auto 0;
}

.center-dots {
  display: flex;
  gap: 8px;               /* space between dots */
}

.ransom-arrow-marshmallow {
  font-weight: bold;
  font-size: 25px;
  cursor: pointer;
}

.ransom-dot-chocolate {
  width: 12px;            /* dot width */
  height: 12px;           /* dot height */
  background-color: #ccc; /* dot color */
  border-radius: 50%;     /* makes it a circle */
  display: inline-block;  /* so it behaves like a dot */
}
/* Responsive Adjustments */
@media (max-width: 768px) {
    header { padding: 15px 20px; }

    .hero-section {
        padding: 20px 15px 0px 15px; /* no bottom padding */
    }

    .hero-title, .hero-subtitle { font-size: 2.5rem; }
    .hero-description { font-size: 1.1rem; }

    .form-container {
        padding: 30px;
        margin: -150px auto 20px auto; /* reduce overlap so it doesn't cover hero paragraph */
    }
}

@media (max-width: 480px) {
    .hero-section {
        padding: 15px 15px 0px 15px; /* no bottom padding */
    }

    .hero-title, .hero-subtitle { font-size: 2rem; }
    .hero-description { font-size: 1rem; }

    .form-container {
        padding: 20px;
        margin: -100px auto 20px auto; /* further reduce overlap */
    }

    .phone-container { flex-wrap: wrap; }
    .phone-container select,
    .phone-container input {
        width: 100%;
        margin-right: 0;
    }
}

@media (max-width: 236px) {
    header {
        padding: 10px 10px;
        flex-direction: column;
        gap: 10px;
    }

    .logo img { height: 20px; }
    .nav-icons { gap: 10px; }
    .nav-icons img { width: 15px; height: 15px; }

    .hero-section { padding: 10px 10px 0px 10px; }

    .hero-title, .hero-subtitle { font-size: 1.5rem; }
    .hero-description {
        font-size: 0.9rem;
        max-width: 100%;
    }

    .form-container {
        padding: 15px;
        margin: -80px auto 20px auto; /* minimal overlap on ultra-small screens */
    }

    .form-container h2 { font-size: 16px; }
    .form-container p { font-size: 10px; }

    .form-container input,
    .form-container select,
    .form-container textarea {
        font-size: 12px;
        padding: 8px;
    }

    .form-container button {
        font-size: 12px;
        padding: 10px;
    }

    .phone-container { flex-direction: column; }
    .phone-container select,
    .phone-container input {
        width: 100%;
        min-width: auto;
    }

    .ransom-pancake-section { padding: 10px; }
    .ransom-toast-as-seen-in { font-size: 12px; margin-bottom: 20px; }
    .ransom-burrito-heading { font-size: 20px; margin-bottom: 15px; }
    .ransom-taco-logos { flex-direction: column; gap: 20px; }
    .ransom-waffle-logo { font-size: 18px; }
    .ransom-syrup-icon { font-size: 16px; }
    .ransom-cookie-navigation { font-size: 18px; gap: 5px; }
    .ransom-dot-chocolate { font-size: 8px; }
}

/* Desktop-specific layout */
@media (min-width: 769px) {
    .hero-section {
        min-height: 500px; /* Taller hero */
        padding-bottom: 0px;
        padding-top: 100px; /* space for fixed header + breathing room */
    }
}



.ransom-toast-as-seen-in {
  margin-left: 150px; /* shifts the logos to the right */
  display: flex;
  align-items: center;
  gap: 15px; /* space between logos */
}

.ransom-toast-as-seen-in .seen-logo {
  height: 80px; /* adjust size as needed */
  object-fit: contain;
}

/* Responsive for smaller screens */
@media (max-width: 768px) {
  .ransom-toast-as-seen-in {
    margin-left: 10px; /* smaller shift */
    justify-content: center; /* center logos on mobile */
    flex-wrap: wrap; /* wrap if needed */
    gap: 0px; /* reduce spacing on mobile */
  }

  .ransom-toast-as-seen-in .seen-logo {
    height: 60px; /* smaller logos on mobile */
  }
  
}


/* CSS */
#investigation-offer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 20px;
  background-color: white;
  font-family: 'Arial', sans-serif;
  gap: 40px;
}

.offer-overview {
  background-color: white;
  padding: 50px 90px;
  max-width: 600px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

.offer-overview h2 {
  color: #0A1B45;
  font-size: 35px;
  font-weight: 700;
  margin-bottom: 15px;
}

.offer-overview p {
  font-size: 16px;
  color: #555555;
  line-height: 1.6;
}

/* Purchase heading */
.purchase-heading {
  font-size: 25px;
  font-weight: 700;
  color: #0A1B45;
  text-align: center;
  margin-bottom: 10px;
}

/* Purchase text */
.purchase-text {
  font-size: 16px;
  color: #555555;
  line-height: 1.6;
  max-width: 600px;
  text-align: center;
  margin-top: -40px;
}
.funny-circle-section {
    padding: 20px;
    text-align: center;
    background-color: white;
    margin-bottom: 50px; /* less space below */
    margin-top: -50px; /* pulls section upward */
}

.funny-circle-container {
    display: inline-block;
}

.funny-circle-image {
    max-width: 1000px;
    width: 100%;
    height: auto;
}

/* Small devices (phones) */
@media (max-width: 600px) {
    .funny-circle-section {
        margin-top: -80px; /* move even more up on small screens */
    }
    .funny-circle-image {
        max-width: 3200px; /* allow bigger size */
        width: 110%; /* slightly oversize for emphasis */
    }
}




#banana-pricing-zone {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  font-family: Arial, sans-serif;
  padding: 50px;
  
  
}

.burrito-box {
  border: 1px solid #cbd5e1;
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  
}

.burrito-box h2 {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #0f172a;
}

.funky-price {
  font-size: 2rem;
  font-weight: bold;
  color: #0f172a;
  margin-bottom: 5px;
}

.tiny-pickle {
  color: #64748b;
  font-size: 0.9rem;
  margin-bottom: 15px;
  display: block;
}

.spaghetti-line {
  border: none;
  border-top: 1px solid #cbd5e1;
  margin: 10px 0 15px;
}

.taco-title {
  font-weight: bold;
  margin-bottom: 10px;
  color: #0f172a;
}

.taco-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.taco-list li {
  font-size: 0.95rem;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.taco-list li::before {
  content: "• ";
  color: #475569;
}

.yolo-button {
  background: #0f172a;
  color: white;
  padding: 12px 0;
  display: block;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  margin-top: 15px;
}
.yolo-button:hover {
  background: #1e293b;
}

.smurf-special {
  background: #1d4ed8;
  color: white;
}

.smurf-special h2 {
  color: white;
}

.banana-text {
  font-size: 0.95rem;
  line-height: 1.4;
  margin-bottom: 15px;
}

.smurf-button {
  background: #ffcd00;
  color: #1d4ed8;
}
.smurf-button:hover {
  background: #ffcd00;
}
/* Pricing Zone - Desktop / Tablet default */
#banana-pricing-zone {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* two columns */
  gap: 20px;
  font-family: Arial, sans-serif;
  padding: 50px;
}

/* On small devices -> single column */
@media (max-width: 600px) {
  #banana-pricing-zone {
    grid-template-columns: 1fr; /* one column only */
    padding: 20px; /* smaller padding for mobile */
  }
}
 .notice-wrapper {
  text-align: center;
  margin: 0 auto;
  padding: 15px;
  max-width: 900px;
  border-top: 1px solid #ccd1d9;
  border-bottom: 1px solid #ccd1d9;
}


    .notice-text {
      font-size: 15px;
      line-height: 1.6;
      color: #8a8fa3;
    }

    .notice-text a {
      color: #4a6fa5;
      text-decoration: underline;
    }

    .notice-text a:hover {
      color: #2d4d77;
    }





    .how-it-works {
      max-width: 700px;
      margin: 60px auto;
      padding: 0 20px;
      text-align: center;
    }

    .how-it-works h2 {
      font-size: 28px;
      font-weight: bold;
      margin-bottom: 40px;
      color: #0d1b2a;
    }

    .how-it-works-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr); /* always 2 columns */
      gap: 25px;
    }

    @media (max-width: 700px) {
      .how-it-works-grid {
        grid-template-columns: 1fr; /* stack on small screens */
      }
    }

    .how-it-works-box {
      background: #fff;
      border: 1px solid #dcdcdc;
      border-radius: 6px;
      padding: 25px 20px;
      text-align: left;
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .how-it-works-box:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    }

    .how-it-works-box h3 {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 12px;
      color: #0d1b2a;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .how-it-works-box p {
      font-size: 15px;
      line-height: 1.6;
      color: #444;
    }

    .how-it-works-box .icon {
      width: 22px;
      height: 22px;
      display: inline-block;
    }



    
    .money-section {
      background-color: #0a1e5c; /* dark navy blue */
      color: #fff;
      text-align: center;
      padding: 70px 20px;
    }

    .money-section h2 {
      font-size: 28px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .money-section .last-update {
      font-size: 14px;
      font-style: italic;
      color: #cfd6e3;
      margin-bottom: 25px;
    }

    .money-section .amount {
      font-size: 40px;
      font-weight: 800;
      color: #ffd700; /* gold/yellow */
      margin-bottom: 25px;
    }

    .money-section p {
      max-width: 700px;
      margin: 0 auto 35px auto;
      font-size: 16px;
      line-height: 1.6;
      color: #e2e6f1;
    }

    .money-section .cta-button {
      display: inline-block;
      background-color: #ffd700;
      color: #0a1e5c;
      font-size: 16px;
      font-weight: bold;
      text-decoration: none;
      padding: 14px 28px;
      border-radius: 3px;
      transition: background-color 0.3s ease, transform 0.2s ease;
    }

    .money-section .cta-button:hover {
      background-color: #ffcc00;
      transform: translateY(-3px);
    }


  
/* Shared Section Style */
.cloudWorkWithUs {
  text-align: center;
  padding: 3rem 1rem;
  background: #fff;
  font-family: Arial, sans-serif;
  color: #1a1a1a;

}

/* Wrapper */
.blockchainHandshakeWrapper {
  max-width: 650px;
  margin: 0 auto;
}

/* Icon */
.quantumHandshakeIcon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

/* Title */
.neuralTitle {
  font-size: 1.6rem;
  font-weight: 700;
  color: #0b1c48;
  margin-bottom: 1rem;
}

/* Paragraph */
.neuralText {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: #333;
}

/* Button */
.quantumBtn {
  display: inline-block;
  padding: 1.0rem 6.9rem;
  border: 2px solid #0b1c48;
  color: #0b1c48;
  text-decoration: none;
  font-weight: 600;
  border-radius: 1px;
  transition: all 0.3s ease;
}

.quantumBtn:hover {
  background: #0b1c48;
  color: #fff;
}

/* Section */

/* Section */
#aiConsultationModule.quantumConsultation {
  background-color: red;
  text-align: center;
  padding: 2rem 1rem; /* Reduced from 4rem to 2rem */
  font-family: Arial, sans-serif;
  color: #fff;
}

/* Title */
.consultTitle {
  font-size: 1.6rem; /* slightly smaller */
  font-weight: 700;
  margin-bottom: 0.5rem; /* reduced margin */
}

/* Subtext */
.consultSubtext {
  font-size: 0.95rem;
  line-height: 1.4;
  margin-bottom: 1.2rem; /* reduced margin */
  color: #ddd;
}

/* Button */
.consultBtn {
  width: 100%;
  max-width: 320px; /* slightly narrower */
  padding: 0.7rem;  /* reduced from 0.9rem */
  background: #ffd900;
  color: #000;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}
/* Section */
#aiConsultationModule.quantumConsultation {
  background-color: #0b1c48;
  text-align: center;
  padding: 1.5rem 1rem; /* compact vertical spacing */
  font-family: Arial, sans-serif;
  color: #fff;
}

/* Wrapper */
.blockchainConsultationWrapper {
  max-width: 600px;
  margin: 0 auto;
}

/* Title */
.consultTitle {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

/* Subtext */
.consultSubtext {
  font-size: 0.95rem;
  line-height: 1.3;
  margin-bottom: 0.8rem;
  color: #ddd;
}

/* Form */
.consultForm {
  display: flex;
  flex-direction: column;
  align-items: center; /* centers select and button */
  gap: 0.6rem; /* spacing between fields */
}

/* Select */
.consultSelect {
  width: 100%;
  max-width: 320px;
  padding: 0.6rem;
  font-size: 0.9rem;
  border: none;
  border-radius: 4px;
  background: #f5f5f5;
  color: #333;
  cursor: pointer;
  margin: 0 auto; /* ensures it's centered */
}

/* Button */
.consultBtn {
  width: 100%;
  max-width: 320px;
  padding: 0.6rem;
  background: #ffd900;
  color: #000;
  font-weight: 700;
  font-size: 0.9rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.consultBtn:hover {
  background: #e6c700;
}




* Section */
#aiVideoReviewModule.quantumVideoReviews {
  background: #fff;
  text-align: center;
  padding: 3rem 1rem;
  font-family: Arial, sans-serif;
}
.blockchainReviewWrapper { max-width: 800px; margin: 0 auto; }
.reviewTitle { font-size: 1.8rem; font-weight: 700; color: #0b1c48; margin-bottom: 2rem; }

/* Viewport hides overflow */
.carouselViewport { overflow: hidden; width: 100%; }

/* Carousel track */
.reviewCarousel {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%; /* Set to 100% to resolve percentages properly */
  gap: 1.5rem;
}

/* Card: 2 per row */
.reviewCard {
  flex: 0 0 calc((100% - 1.5rem) / 2);
  height: 230px;
  border-radius: 6px;
  overflow: hidden;
}
.reviewCard iframe { width: 100%; height: 100%; border: none; }

/* Navigation */
.carouselNav { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-top: 1.5rem; }
.reviewDots .dot { display: inline-block; width: 10px; height: 10px; background: #ccc; border-radius: 50%; margin: 0 4px; cursor: pointer; }
.reviewDots .active { background: #0b1c48; }
.navBtn { font-size: 1.5rem; border: none; background: none; color: #0b1c48; cursor: pointer; }
.navBtn:hover { color: #ffd900; }

.reviewBtn {
  display: inline-block;
  padding: 0.79rem 2.9rem;
  border: 2px solid #0b1c48;
  color: #0b1c48;
  text-decoration: none;
  font-weight: 600;
  border-radius: 1px;
  transition: all 0.3s ease;
  align-items: center;
  margin-top: 30px;
}
.reviewBtn:hover {
  background: #0b1c48;
  color: #fff;
}
.blockchainReviewWrapper {
  text-align: center; /* centers inline-block elements like your button */
}

@media screen and (max-width: 768px) {
  .reviewCarousel {
    display: flex;
    gap: 16px;              /* spacing between videos */
  }

  .reviewCard {
    flex: 0 0 100%;         /* one video per view */
  }

  .reviewCard iframe {
    width: 90%;
    height: 200px;          /* adjust height for mobile */
  }
}





.scam-types {
  text-align: center;
  padding: 40px 20px;
  font-family: Arial, sans-serif;
}

.scam-types h2 {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 30px;
  color: #0A1B45;
}

.scam-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 400px;
  margin: 0 auto;
  border: 1px solid #ccc;
}

.scam-item {
  padding: 25px 15px;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  color: #0A1B45;
  background: #fff;
  transition: all 0.3s ease;
}

.scam-item i {
  font-size: 28px;
  margin-bottom: 10px;
  color: #0A1B45;
  transition: color 0.3s ease;
}

.scam-item p {
  margin: 0;
  transition: color 0.3s ease;
}

.scam-item:hover {
  background: #0A1B45; /* Blue background */
  color: #fff; /* Change text color */
}

.scam-item:hover i,
.scam-item:hover p {
  color: #fff; /* White icon + text */
}


.faq-section {
  max-width: 700px;
  margin: 50px auto;
  font-family: Arial, sans-serif;
}

.faq-section h2 {
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 30px;
  color: #0A1B45;
}

.faq-item {
  border-bottom: 1px solid #ddd;
}

.faq-question {
  width: 100%;
  padding: 15px;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  background: none;
  border: none;
  outline: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  color: #0A1B45;
}

.faq-question i {
  transition: transform 0.3s ease;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  padding: 0 15px;
}

.faq-answer p {
  margin: 20px 0; /* Adds vertical space between paragraphs */
  color: #333;
  font-family: 'Arial', sans-serif; /* Change font type */
  line-height: 1.6; /* Optional: improves readability */
}


/* When active */
.faq-item.active .faq-answer {
  max-height: 200px;
}

.faq-item.active .faq-question i {
  transform: rotate(180deg);
}






.molecule-container {
  width: 80%;
  max-width: 900px;
  margin: 0 auto; /* centers the container horizontally */
  text-align: center; /* keeps the text inside centered */
}


    .molecule-container h2 {
      font-size: 2em;
      margin-bottom: 2em;
      color: #1a202c;
    }

    .electron-wrapper {
      position: relative;
      overflow: hidden;
    }

    .atom-grid {
      display: flex;
      transition: transform 0.5s ease-in-out;
      gap: 20px;
    }

    .nucleus-card {
      background-color: #fff;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      flex-shrink: 0;
      width: calc(50% - 10px);
      display: flex;
      flex-direction: column;
      text-align: left;
    }

    .proton-image {
      width: 100%;
      height: 200px;
      background-color: #e6e9f2;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }

    .proton-image img {
      width: 100%;
      height: auto;
      object-fit: contain;
      filter: grayscale(100%) brightness(120%);
    }

    .neutron-content {
      padding: 20px;
    }

    .electron-date {
      display: flex;
      align-items: center;
      color: #718096;
      font-size: 0.9em;
      margin-bottom: 10px;
    }

    .electron-date svg {
      margin-right: 8px;
      fill: #718096;
    }

    .neutron-title {
      font-size: 1.2em;
      font-weight: bold;
      color: #2d3748;
      line-height: 1.4;
    }

    .ion-nav {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 2em;
      color: #718096;
    }

    .ion-nav svg {
      cursor: pointer;
      margin: 0 20px;
      fill: #718096;
    }

    .covalent-dots {
      display: flex;
      gap: 10px;
    }

    .electron-dot {
      width: 8px;
      height: 8px;
      background-color: #cbd5e0;
      border-radius: 50%;
    }

    .electron-dot.active {
      background-color: #4a5568;
    }








:root {
      --brand: #0b1c48;
      --muted: #f5f5f5;
      --accent: #ffd300;
      --accent-hover: #ffbf00;
      --text: #0b1c48;
      --radius: 1px;     
      --border: #e5e7eb;
      --shadow: 0 10px 25px rgba(0,0,0,.06);
    }

    * { box-sizing: border-box; }

    
.quantum-container {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;   /* ⬅ horizontally centers */
}

    .quantum-container { width: 100%; max-width: 760px; }
    .neutron-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: clamp(18px, 3.5vw, 28px);
      
    }
    .photon-header { text-align: center; margin-bottom: 18px; }
    .photon-header h2 { margin: 0 0 6px; font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; color: var(--brand); }
    .photon-header p { margin: 0; color: #475569; font-size: 14px; }

    form { display: flex; flex-direction: column; gap: 14px; }
    .wave-row { display: flex; gap: 14px; }
    .field-quark { flex: 1; }

    .orbit-wrapper { position: relative; width: 100%; }
    .orbit-wrapper select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      width: 100%;
      padding: 12px 40px 12px 14px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: var(--muted);
      font-size: 14px;
      outline: none;
    }
    .orbit-wrapper select:focus {
      background: #fff;
      border-color: #c7d2fe;
      box-shadow: 0 0 0 4px rgba(99,102,241,.15);
    }
    .orbit-wrapper::after {
      content: "▼";
      font-size: 15px;
      color: #555;
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
    }

    input, textarea {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--muted);
      font-size: 14px;
      outline: none;
    }
    input:focus, textarea:focus {
      background: #fff;
      border-color: #c7d2fe;
      box-shadow: 0 0 0 4px rgba(99,102,241,.15);
    }
    textarea { resize: vertical; min-height: 120px; }

    .signal-group { display: flex; gap: 10px; }
    .signal-code { width: 110px; }
    .signal-number { flex: 1; }

   .button-container {
  display: flex;
  justify-content: center; /* centers horizontally */
  margin-top: 20px;        /* optional spacing */
}

button[type="submit"] {
  background: linear-gradient(135deg, #ffd300, #ffbf00);
  color: #0b1c48;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 24px;
  border: none;
  border-radius: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);

  width: 300px;          /* fixed width */
  max-width: 100%;       /* responsive */
  text-align: center;
}

button[type="submit"]:hover {
  background: linear-gradient(135deg, #ffd300, #ffd300);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}


    @media (max-width: 768px) {
      .wave-row { flex-direction: column; }
      .signal-group { flex-direction: column; gap: 14px; }
      .signal-code { width: 100%; }
    }





    /* Base footer */
    .footer { font-family: Arial, sans-serif; color: #fff; }
    .footer-legal {
      background: #0a1124;
      text-align: center;
      line-height: 1.6;
      font-size: 16px;
      padding: 20px;
    }
    .footer-main { background: #0a1124; padding: 20px; }
    .footer-main .section {
      max-width: 650px;
      margin: 0 auto;
      padding: 0 20px;
    }

    /* Dropdown header */
    .footer-dropdown {
      border-bottom: 1px solid #555;
    }
    .footer-dropdown h3 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
      font-weight: bold;
      margin: 0;
      padding: 12px 0;
      cursor: pointer;
    }

    /* Chevron icon */
    .chevron-icon {
      width: 24px;
      height: 24px;
      transition: transform 0.3s ease;
    }
    .chevron-icon.rotated { transform: rotate(180deg); }

    /* Dropdown content */
    .dropdown-content {
      display: none;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
      font-size: 15px;
      padding: 0;
      margin: 0;
    }
    .dropdown-content.open { display: block; padding: 10px 0; }

    /* Footer links */
    .footer-links {
      margin-top: 20px;
    }
    .footer-links a {
      display: block;
      padding: 10px 0;
      color: #69b4ff;
      text-decoration: none;
      font-size: 16px;
    }

    /* Footer bottom */
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
    }
    .footer-bottom img { height: 30px; width: auto; margin-left: 10px; }

    /* Disclaimer */
    .footer-disclaimer {
      background: #19284c;
      color: #fff;
      padding: 20px;
      text-align: center;
      line-height: 1.6;
    }
    .partner-logos {
  display: flex;
  justify-content: center; /* keeps everything centered */
  align-items: center;     /* vertically centers logos if they differ in height */
  gap: 15px;
  margin: 10px 0 20px;
}

.partner-logos img {
  max-width: 120px; /* reduce size (adjust as needed) */
  height: auto;     /* keeps aspect ratio */
  object-fit: contain; /* ensures logos don’t stretch */
}

    .footer-disclaimer a { color: #69b4ff; text-decoration: underline; }






    .wave-row {
  display: flex;
  gap: 10px; /* space between fields */
  align-items: center; /* vertically center inputs if heights differ */
  /* optional: set a min-height for the row itself */
  min-height: 60px;
}

.wave-row .field-quark input {
  height: 50px;      /* set the desired input height */
  padding: 0 10px;   /* horizontal padding inside input */
  font-size: 16px;   /* adjust text size */
  box-sizing: border-box; /* ensures padding doesn’t exceed height */
  border-radius: 5px; /* optional: rounded corners */
}