/* ==========================================================================
   Nervecell - Section-Specific Styles
   ========================================================================== */

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

/* Hero Section — Deep Indigo background */
.hero-section {
  background: #181042;
  padding: 40px 0 60px 0;
}

.hero-heading {
  text-align: center;
  margin-bottom: 30px;
}

.hero-heading h1 {
  font-weight: 900;
  font-size: 48px;
  line-height: 1.15;
  color: #fff;
}

.hero-heading h1 span {
  color: #C2A8E2;
}

.hero-subheading {
  font-size: 20px;
  color: #C5CBD5;
  text-align: center;
  margin-top: 10px;
  line-height: 1.5;
  font-weight: 400;
}

.hero-content {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 30px;
}

.hero-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero-left .video-placeholder {
  flex: 1;
}

.hero-right {
  flex: 0 0 380px;
  display: flex;
}

/* Video placeholder */
.video-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C5CBD5;
  font-size: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
}

.video-placeholder:hover {
  border-color: rgba(255, 255, 255, 0.25);
}

/* Hero testimonials */
.hero-testimonials {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero-testimonial-box {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px 18px;
}

.hero-testimonial-stars {
  color: #e8c31e;
  font-size: 16px;
  margin-bottom: 6px;
}

.hero-testimonial-box p {
  color: #C5CBD5;
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 6px;
}

.hero-testimonial-box span {
  font-size: 13px;
  color: #888;
}

.hero-testimonial-box strong {
  color: #fff;
}

/* Hero offer card */
.hero-card {
  background: #fff;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: none;
  outline: 2px solid rgba(194, 168, 226, 0.35);
  outline-offset: 4px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}

.hero-card-header {
  background: #181042;
  padding: 14px 20px;
  color: #fff;
  font-weight: 900;
  font-size: 22px;
  text-align: center;
  line-height: 1.3;
}

.hero-card-header p { margin: 0; }

.hero-card-body {
  padding: 20px 20px 18px;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero-product-img {
  max-width: 85%;
  height: 160px;
  object-fit: contain;
  margin: 0 auto 14px;
  display: block;
}

/* Bonuses section */
.hero-card-bonuses {
  margin: 0 0 14px;
  padding: 12px 0 0;
  border-top: 1px solid #eee;
}

.hero-card-bonuses-title {
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #181042;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.hero-card-bonuses-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.hero-bonus {
  position: relative;
  border: 1px solid #eee;
  padding: 10px 8px;
  background: #F5F5F8;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-bonus-tag {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: #181042;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 2px 8px;
  text-transform: uppercase;
}

.hero-bonus img {
  display: block;
  flex: 0 0 auto;
  max-width: 40px;
  height: auto;
}

.hero-bonus-text { text-align: left; min-width: 0; }

.hero-bonus-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #181042;
  text-transform: uppercase;
  margin: 0;
}

.hero-bonus-name {
  font-size: 12px;
  font-weight: 700;
  color: #333;
  line-height: 1.2;
  margin: 2px 0 0;
}

/* CTA and trust */
.hero-card-trust {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.hero-card-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-card-trust-item span {
  font-size: 11px;
  line-height: 1.3;
  color: #999;
  text-align: center;
  font-weight: 500;
}

.hc-offer-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
}

.hc-label {
  font-size: 15px;
  font-weight: 700;
  color: #181042;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hc-savings {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: #181042;
  padding: 4px 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hc-bonuses {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.hc-bonus-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #f5f5f8;
}

.hc-bonus-item img {
  width: 44px;
  height: auto;
  flex-shrink: 0;
}

.hc-bonus-free {
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: #181042;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.hc-bonus-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #333;
  line-height: 1.2;
}

.hc-cta {
  display: block;
  width: 100%;
  padding: 16px 0;
  background: #181042;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.hc-cta:hover {
  background: #0d0a2a;
}

.hc-trust {
  margin: 14px 0 0;
  font-size: 11px;
  color: #999;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.hero-testimonials {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

.hero-testimonial-box {
  border: 1px solid rgba(194, 168, 226, 0.4);
  border-radius: 10px;
  padding: 16px 20px;
  color: var(--color-pure-white);
}

.hero-testimonial-stars {
  color: #ffc107;
  font-size: 18px;
  margin-bottom: 6px;
  letter-spacing: 2px;
}

.hero-testimonial-box p {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 8px;
}

.hero-testimonial-box span {
  font-size: 14px;
  opacity: 0.85;
}

.hero-testimonial-box span strong {
  opacity: 1;
}

/* ==========================================================================
   PRICING SECTION
   ========================================================================== */

.pricing-section {
  padding: 60px 0;
}

.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.section-header h2 {
  color: var(--color-deep-indigo);
  font-size: 36px;
  font-weight: 700;
}

.section-header p {
  color: #888;
  margin-top: 10px;
  font-size: 18px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 20px;
  align-items: start;
}

/* ==========================================================================
   GUARANTEE SECTION
   ========================================================================== */

.guarantee-section {
  background: var(--color-pure-white);
  padding: 60px 0;
}

.guarantee-title {
  text-align: center;
  color: #091B0D;
  font-size: 38px;
  font-weight: 900;
  line-height: 1.3;
  margin-bottom: 30px;
}

.guarantee-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
}

.guarantee-badge-img {
  width: 180px;
  height: 180px;
  flex-shrink: 0;
}

.guarantee-copy {
  font-size: 18px;
  line-height: 1.5;
  color: #333;
  max-width: 700px;
}

.guarantee-copy strong {
  color: #091B0D;
}

.guarantee-fda-icons {
  display: block;
  margin: 35px auto 0;
  max-width: 700px;
  width: 100%;
}

.guarantee-mfg {
  text-align: center;
  font-size: 16px;
  color: #333;
  margin-top: 25px;
}

.guarantee-mfg strong {
  color: #091B0D;
}

/* ==========================================================================
   BONUSES SECTION
   ========================================================================== */

.bonuses-section {
  padding: 60px 0;
}

.bonuses-section h2 {
  text-align: center;
  color: var(--color-deep-indigo);
  margin-bottom: 30px;
}

.bonuses-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.bonus-card {
  background: var(--color-pure-white);
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}

.bonus-card .bonus-cta {
  margin-top: auto;
  align-self: center;
}

.bonus-image {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.bonus-image img {
  display: block;
  max-width: 100%;
  max-height: 260px;
  height: auto;
  width: auto;
}

.bonus-card h3 {
  font-size: 21px;
  margin-bottom: 12px;
  color: var(--color-deep-indigo);
  line-height: 1.3;
}

.bonus-price {
  display: inline-block;
  margin-left: 6px;
  font-size: 18px;
  color: #555;
  font-weight: 600;
}

.bonus-price strong {
  color: #c0392b;
  font-weight: 900;
}

.bonus-card p {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 12px;
}

.bonus-cta {
  display: inline-block;
  text-decoration: none;
  margin-top: 18px;
  padding: 12px 22px;
  background: linear-gradient(135deg, #ffd54a, #ffb300);
  color: var(--color-deep-indigo);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(255, 179, 0, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
  border: 2px solid #ffb300;
}

/* ==========================================================================
   SHIPPING STRIP
   ========================================================================== */

.shipping-strip {
  background: var(--color-royal-purple);
  padding: 30px 0;
}

.shipping-strip-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
}

.shipping-seal-img {
  width: 90px;
  height: 90px;
  flex-shrink: 0;
}

.shipping-strip-text {
  text-align: left;
}

.shipping-strip h3 {
  color: var(--color-pure-white);
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 4px;
  line-height: 1.3;
}

.shipping-highlight {
  color: #fff000;
}

.shipping-strip p {
  color: var(--color-pure-white);
  font-size: 17px;
  line-height: 1.4;
}

.shipping-sub {
  font-size: 15px;
  opacity: 0.75;
  font-weight: 400;
  margin-top: 2px;
}

/* ==========================================================================
   ABOUT SECTION
   ========================================================================== */

.about-section {
  overflow: hidden;
}

/* Header banner */
.about-header {
  background: linear-gradient(135deg, var(--color-deep-indigo), var(--color-royal-purple));
  padding: 45px 0 40px;
  color: var(--color-pure-white);
}

.about-date {
  font-size: 16px;
  font-weight: 600;
  color: #fff000;
  margin-bottom: 12px;
  font-style: italic;
}

.about-header h2 {
  font-size: 38px;
  font-weight: 900;
  line-height: 1.25;
}

.about-underline {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.about-subtitle {
  font-size: 20px;
  margin-top: 12px;
  opacity: 0.9;
}

/* Content Block 1: Text over background image */

.about-hero-text p {
  font-size: 17px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 16px;
}

/* Content area */
.about-content {
  background: var(--color-pure-white);
  padding: 56px 0 40px;
}

/* Editorial two-column blocks */
.about-block {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
  margin: 0 0 36px;
}

.about-block__media {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
}

.about-block--media-left {
  grid-template-columns: 0.85fr 1.15fr;
}

.about-block--media-left .about-block__media { order: 0; }
.about-block--media-left .about-block__body  { order: 1; }

.about-block__media {
  margin: 0;
}

.about-block__media img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 440px;
  margin: 0 auto;
  border-radius: 18px;
}

.about-block__body > *:first-child { margin-top: 0; }
.about-block__body > *:last-child  { margin-bottom: 0; }

.about-block__body p {
  margin-bottom: 26px;
}

/* Text styles */
.about-content p {
  font-size: 17px;
  line-height: 1.65;
  color: #444;
  margin-bottom: 16px;
}

.about-content h3 {
  font-size: 26px;
  font-weight: 800;
  color: var(--color-deep-indigo);
  margin-bottom: 15px;
}

.about-highlight {
  background: rgba(75, 46, 140, 0.06);
  border-left: 4px solid var(--color-royal-purple);
  padding: 12px 16px;
  border-radius: 0 6px 6px 0;
  color: var(--color-deep-indigo);
  overflow: hidden;
}

.about-good-news {
  color: var(--color-royal-purple);
  font-size: 19px;
}

/* Quote callout */
.quote-callout {
  clear: both;
  border-left: 4px solid var(--color-royal-purple);
  padding: 15px 20px;
  margin: 30px 0;
  font-style: italic;
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-deep-indigo);
  background: rgba(75, 46, 140, 0.04);
  border-radius: 0 8px 8px 0;
}

.quote-callout p {
  margin: 0;
}

/* ==========================================================================
   PRODUCT INTRO SECTION
   ========================================================================== */

.product-intro-section {
  background:
    radial-gradient(circle at 78% 45%, rgba(150, 100, 230, 0.35), transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(80, 50, 160, 0.25), transparent 50%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 0),
    var(--color-deep-indigo);
  background-size: auto, auto, 28px 28px, auto;
  padding: 110px 0 120px;
  color: var(--color-pure-white);
  position: relative;
  overflow: hidden;
}

.product-intro-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 75% 50%, rgba(180, 130, 255, 0.18), transparent 35%);
  pointer-events: none;
}

.product-intro-section::after {
  content: "";
  position: absolute;
  right: -120px;
  top: 50%;
  transform: translateY(-50%);
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(140, 90, 220, 0.35), transparent 65%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.product-intro-content {
  position: relative;
  z-index: 1;
}

.product-intro-text {
  max-width: 620px;
}

.product-intro-lead {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 1px;
  opacity: 0.7;
  margin-bottom: 8px;
}

.product-intro-name {
  font-size: 64px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 28px;
}

.product-intro-name .highlight {
  background: var(--gradient-highlight);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.product-intro-text p {
  font-size: 19px;
  line-height: 1.65;
  margin-bottom: 22px;
  color: rgba(255, 255, 255, 0.88);
}

.product-intro-text p:last-child {
  margin-bottom: 0;
}

.product-intro-bottle {
  position: absolute;
  right: -160px;
  top: 50%;
  transform: translateY(-50%);
  width: 520px;
}

.product-intro-bottle .bottle {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(-12deg);
  filter:
    drop-shadow(0 40px 50px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 60px rgba(160, 110, 240, 0.35));
}

.product-intro-seal {
  position: absolute;
  top: 30px;
  left: 0;
  width: 170px;
  height: auto;
  transform: rotate(-14deg);
  filter:
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 20px rgba(255, 220, 120, 0.25));
  z-index: 2;
}

/* ==========================================================================
   INGREDIENTS SECTION
   ========================================================================== */

.ingredients-section {
  padding: 60px 0;
}

.ingredients-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
}

.ingredients-grid .ingredient-card {
  flex: 0 0 calc((100% - 60px) / 3);
  max-width: calc((100% - 60px) / 3);
}

.ingredient-card {
  text-align: center;
  padding: 20px;
}

.ingredient-img-wrapper {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 15px;
}

.ingredient-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ingredient-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-deep-indigo);
  margin-bottom: 10px;
}

.ingredient-dose {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-royal-purple);
  display: block;
}

.ingredient-latin {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  color: var(--color-royal-purple);
}

.ingredient-card p {
  font-size: 16px;
  line-height: 24px;
  color: #555;
}

/* ==========================================================================
   BENEFITS SECTION
   ========================================================================== */

.benefits-section {
  background: var(--color-off-white);
  padding: 60px 0;
}

.benefits-section h2 {
  text-align: center;
  color: var(--color-deep-indigo);
  margin-bottom: 40px;
  font-size: 36px;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.benefit-card {
  text-align: center;
  padding: 25px 15px;
}

.benefit-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
  color: var(--color-royal-purple);
  display: flex;
  align-items: center;
  justify-content: center;
}

.benefit-icon svg {
  width: 40px;
  height: 40px;
}

.benefit-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.benefit-card h4 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-deep-indigo);
}

/* ==========================================================================
   TESTIMONIALS SECTION
   ========================================================================== */

.testimonials-section {
  padding: 70px 0;
  background: var(--color-pure-white);
}

.testimonials-section h2 {
  text-align: center;
  color: var(--color-deep-indigo);
  margin-bottom: 24px;
  font-size: 38px;
  font-weight: 900;
  line-height: 1.25;
}

.testi-accent {
  display: block;
  color: var(--color-royal-purple);
}

.testi-polaroids {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
  margin: 10px auto 36px;
}

.testi-polaroids .polaroid {
  width: 200px;
  height: 220px;
  object-fit: cover;
  object-position: center top;
  padding: 8px 8px 16px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
  border-radius: 4px;
}

.testi-polaroids .polaroid:nth-child(1) { transform: rotate(-4deg); }
.testi-polaroids .polaroid:nth-child(2) { transform: rotate(2deg); }
.testi-polaroids .polaroid:nth-child(3) { transform: rotate(-2deg); }

.testimonials-grid {
  display: block;
  max-width: 860px;
  margin: 0 auto;
}

.testi-card {
  border: 2px solid var(--color-royal-purple);
  border-radius: 14px;
  padding: 32px 30px;
  margin-top: 22px;
  background: #fff;
  overflow: hidden;
}

.testi-card::after {
  content: "";
  display: table;
  clear: both;
}

.testi-photo {
  float: right;
  width: 150px;
  margin: 0 -6px 10px 28px;
  padding: 6px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  position: relative;
}

.testi-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.testi-title {
  font-size: 26px;
  line-height: 1.3;
  font-weight: 800;
  color: var(--color-deep-indigo);
  margin-bottom: 12px;
}

.testi-stars {
  color: #f5b50a;
  font-size: 22px;
  letter-spacing: 3px;
  margin-bottom: 14px;
}

.testi-quote {
  font-size: 19px;
  line-height: 1.55;
  font-style: italic;
  color: #444;
  margin-bottom: 22px;
}

.testi-signature {
  font-size: 16px;
  line-height: 1.5;
  color: #575757;
}

.testi-signature span {
  font-weight: 800;
  color: #000;
  font-size: 18px;
}

/* ==========================================================================
   FAQ SECTION
   ========================================================================== */

.faq-section {
  padding: 80px 0;
}

.faq-layout {
  display: flex;
  gap: 50px;
  align-items: stretch;
}

.faq-left {
  flex: 0 0 38%;
  position: relative;
  text-align: left;
  display: flex;
  flex-direction: column;
}

.faq-left h2 {
  font-size: 44px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--color-deep-indigo);
  margin-bottom: 24px;
  text-align: left;
}

.faq-bottle {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-bottle .bottle {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  transform: rotate(-12deg);
  filter:
    drop-shadow(0 30px 40px rgba(0, 0, 0, 0.25))
    drop-shadow(0 0 50px rgba(160, 110, 240, 0.25));
}

.faq-seal {
  position: absolute;
  top: 24px;
  right: 0;
  width: 150px;
  height: auto;
  transform: rotate(-14deg);
  filter:
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35))
    drop-shadow(0 0 18px rgba(255, 220, 120, 0.2));
  z-index: 2;
}

.faq-cta {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 20px 28px;
  font-size: 20px;
  text-align: center;
  box-sizing: border-box;
}

.faq-cta-arrow {
  display: inline-block;
  margin-left: 10px;
  animation: faqArrowSlide 1.2s ease-in-out infinite;
}

@keyframes faqArrowSlide {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(8px); }
}

.faq-right {
  flex: 1;
  min-width: 0;
}

/* ==========================================================================
   SCIENTIFIC REFERENCES SECTION
   ========================================================================== */

.references-section {
  background: var(--color-off-white);
  padding: 40px 0;
}

.nervecell-label-img {
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
}

.references-section h2 {
  text-align: center;
  color: var(--color-deep-indigo);
  margin-bottom: 10px;
}

.references-disclaimer {
  text-align: center;
  font-size: 14px;
  color: #888;
  margin-bottom: 25px;
}

.references-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.references-col ol {
  padding-left: 20px;
  font-size: 13px;
  color: #666;
  line-height: 22px;
  list-style: decimal;
}

.references-col li {
  margin-bottom: 10px;
}

/* === SCIENTIFIC REFERENCES SECTION (replicado do leanzene) ============= */

.scientific-references {
  padding: 0 0 64px;
  background: #fff;
}

.scientific-references__label {
  font-size: 13px;
  font-weight: 700;
  color: #aaa;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 20px;
}

.scientific-references__logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: center;
  justify-items: center;
  margin-bottom: 12px;
}

.scientific-references__logos img {
  max-height: 60px;
  width: auto;
}

.scientific-references__disclaimer {
  font-size: 12px;
  color: #bbb;
  text-align: center;
  margin-bottom: 24px;
}

.scientific-references__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.scientific-references__cols p {
  font-size: 12px;
  color: #aaa;
  line-height: 1.65;
  margin-bottom: 10px;
}

/* Inline citation markers (used inside .quote-callout <p>) */
.cite-marker {
  display: inline;
  font-size: 0.6em;
  vertical-align: super;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-royal-purple);
  margin-left: 2px;
  font-feature-settings: "lnum";
  border-bottom: 1px dotted transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.cite-marker:hover {
  color: var(--color-deep-indigo);
  border-bottom-color: currentColor;
}

/* Inline reference paragraph (nested INSIDE each .quote-callout) */
.quote-callout .quote-reference {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 12px;
  font-style: italic;
  line-height: 1.6;
  color: #6f6884;
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px dashed rgba(75, 46, 140, 0.18);
}

.quote-callout .quote-reference__label {
  color: var(--color-royal-purple);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.01em;
  margin-right: 2px;
}

.quote-callout .quote-reference em {
  font-style: italic;
  color: var(--color-deep-indigo);
}

.quote-callout .quote-reference__link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--color-royal-purple);
  text-decoration: none;
  border-bottom: 1px dotted rgba(75, 46, 140, 0.45);
  padding-bottom: 1px;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 600;
  margin-left: 6px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.quote-callout .quote-reference__link svg {
  transition: transform 0.18s ease;
  margin-bottom: -1px;
}

.quote-callout .quote-reference__link:hover {
  color: var(--color-deep-indigo);
  border-bottom-color: currentColor;
}

.quote-callout .quote-reference__link:hover svg {
  transform: translate(2px, -2px);
}

@media (max-width: 600px) {
  .quote-callout .quote-reference {
    font-size: 11.5px;
    padding-top: 10px;
    margin-top: 12px;
  }
  .quote-callout .quote-reference__link {
    margin-left: 0;
    margin-top: 2px;
  }
}

@media (max-width: 600px) {
  .scientific-references__cols {
    grid-template-columns: 1fr;
  }
  .scientific-references__logos {
    grid-template-columns: repeat(2, 1fr);
  }
}
