/* ============================================================
   Luran AI Care Navigation — new section styles
   Reuses tokens from style.css (--rose, --sage, --gold, --cream,
   --charcoal, --font-heading, --font-body). Load AFTER style.min.css.
   Premium maternal-care / calm healthtech direction.
   ============================================================ */

/* ---------- Layout helpers ---------- */
.ai-section { padding: var(--spacing-xl) 0; }
.ai-section--tight { padding: var(--spacing-lg) 0; }
.ai-section--cream { background: var(--cream); }
.ai-section--soft { background: linear-gradient(180deg, #fff 0%, var(--cream) 100%); }
.ai-section--sage { background: rgba(139,168,136,0.08); }
.ai-section--navy { background: var(--charcoal); color: #fff; }
.ai-section--navy .section-title,
.ai-section--navy .section-subtitle { color: #fff; }
.ai-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: var(--spacing-sm);
}
.ai-lede {
  max-width: 640px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--dark-gray);
}
.ai-centered { text-align: center; }
.ai-centered .ai-lede { margin-left: auto; margin-right: auto; }

/* ---------- Hero Video Section ---------- */
.hero-video-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-video-container {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(63,58,55,0.75) 0%, rgba(63,58,55,0.55) 50%, rgba(139,168,136,0.35) 100%);
  z-index: 1;
}
.hero-video-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  padding: 8rem var(--spacing-md) 6rem;
  text-align: center;
  color: #fff;
}
.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  background: rgba(255,255,255,0.12);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  margin-bottom: var(--spacing-md);
  backdrop-filter: blur(4px);
}
.hero-video-content h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  line-height: 1.1;
  font-weight: 500;
  margin-bottom: var(--spacing-md);
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,0.2);
}
.hero-accent {
  font-style: italic;
  color: var(--rose);
}
.hero-lead {
  font-size: 1.15rem;
  line-height: 1.7;
  max-width: 640px;
  margin: 0 auto var(--spacing-lg);
  color: rgba(255,255,255,0.92);
  font-weight: 300;
}
.hero-cta-row {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--spacing-xl);
}
.hero-cta-row .btn {
  min-width: 240px;
  padding: 1rem 2rem;
}
.hero-cta-row .btn-outline {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.4);
}
.hero-cta-row .btn-outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.6);
}
.hero-trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  justify-content: center;
  padding-top: var(--spacing-lg);
  border-top: 1px solid rgba(255,255,255,0.15);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.85);
}
.trust-check {
  color: var(--sage);
  font-weight: 600;
}
@media (max-width: 768px) {
  .hero-video-content {
    padding: 6rem var(--spacing-sm) 4rem;
  }
  .hero-cta-row {
    flex-direction: column;
    align-items: center;
  }
  .hero-cta-row .btn {
    width: 100%;
    max-width: 320px;
  }
  .hero-trust-bar {
    gap: var(--spacing-sm);
  }
}

/* ---------- Old Hero (deprecated) ---------- */
.ai-hero {
  position: relative;
  padding: 7rem 0 5rem;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(216,183,179,0.35), transparent 60%),
    radial-gradient(900px 500px at 0% 10%, rgba(139,168,136,0.18), transparent 55%),
    var(--cream);
  overflow: hidden;
}
.ai-hero-inner { max-width: 980px; margin: 0 auto; text-align: center; padding: 0 var(--spacing-md); }
.ai-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.08;
  color: var(--charcoal);
  margin-bottom: var(--spacing-md);
  font-weight: 600;
}
.ai-hero .ai-hero-sub {
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--dark-gray);
  max-width: 680px;
  margin: 0 auto var(--spacing-lg);
}
.ai-cta-group {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--spacing-lg);
}
.ai-cta-group .btn { min-width: 220px; }

/* ---------- Trust badges ---------- */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
  margin-top: var(--spacing-md);
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid rgba(63,58,55,0.10);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  color: var(--charcoal);
  box-shadow: 0 2px 10px rgba(63,58,55,0.05);
}
.trust-badge .tb-icon { color: var(--sage); font-size: 1rem; }

/* ---------- Generic card grid ---------- */
.ai-grid { display: grid; gap: var(--spacing-md); margin-top: var(--spacing-lg); }
.ai-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ai-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ai-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .ai-grid--3, .ai-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ai-grid--2, .ai-grid--3, .ai-grid--4 { grid-template-columns: 1fr; }
}

.ai-card {
  background: #fff;
  border: 1px solid rgba(63,58,55,0.08);
  border-radius: 18px;
  padding: var(--spacing-md);
  box-shadow: 0 4px 22px rgba(63,58,55,0.04);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.ai-card:hover { transform: translateY(-4px); box-shadow: 0 12px 34px rgba(63,58,55,0.10); }
.ai-card .ai-card-icon {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(216,183,179,0.18);
  color: var(--charcoal);
  font-size: 1.4rem;
  margin-bottom: var(--spacing-sm);
}
.ai-card h3 { font-family: var(--font-heading); font-size: 1.25rem; color: var(--charcoal); margin-bottom: 0.5rem; }
.ai-card p { color: var(--dark-gray); line-height: 1.65; font-size: 0.97rem; margin: 0; }
.ai-card .ai-card-tag {
  display: inline-block; margin-top: var(--spacing-sm);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--sage); text-transform: uppercase;
}

/* ---------- Assessment-first output examples ---------- */
.output-card { text-align: left; }
.output-card .oc-index {
  font-family: var(--font-heading);
  font-size: 1.5rem; color: var(--rose); margin-bottom: 0.3rem;
}

/* ---------- How Luran AI works (steps) ---------- */
.ai-steps { counter-reset: step; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--spacing-sm); margin-top: var(--spacing-lg); }
@media (max-width: 900px) { .ai-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ai-steps { grid-template-columns: 1fr; } }
.ai-step {
  background: #fff;
  border: 1px solid rgba(63,58,55,0.08);
  border-radius: 16px;
  padding: var(--spacing-md);
  position: relative;
}
.ai-step .step-num {
  font-family: var(--font-heading);
  font-size: 2rem; color: var(--sage); line-height: 1; margin-bottom: 0.6rem;
}
.ai-step h3 { font-size: 1.1rem; color: var(--charcoal); margin-bottom: 0.4rem; font-family: var(--font-body); font-weight: 600; }
.ai-step p { font-size: 0.92rem; color: var(--dark-gray); line-height: 1.6; margin: 0; }

/* ---------- Care pathways ---------- */
.pathway-card { display: flex; flex-direction: column; gap: 0.5rem; }
.pathway-card .pw-meta { font-size: 0.8rem; color: var(--medium-gray); line-height: 1.5; }
.pathway-card .pw-meta strong { color: var(--charcoal); font-weight: 600; }
.pathway-card .pw-icon { font-size: 1.6rem; }
.pathway-card h3 { font-family: var(--font-heading); font-size: 1.2rem; color: var(--charcoal); margin: 0; }

/* ---------- Care Intelligence data moat ---------- */
.intel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-sm); margin-top: var(--spacing-lg); }
@media (max-width: 800px) { .intel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .intel-grid { grid-template-columns: 1fr; } }
.intel-item {
  display: flex; align-items: center; gap: 0.75rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px; padding: 0.85rem 1rem; color: #fff;
}
.intel-item .ii-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); flex: none; }
.intel-item span { font-size: 0.95rem; }

/* ---------- B2B entry cards ---------- */
.b2b-card { text-align: center; }
.b2b-card .b2b-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.b2b-card a.b2b-link { color: var(--sage); font-weight: 600; text-decoration: none; font-size: 0.92rem; }
.b2b-card a.b2b-link:hover { text-decoration: underline; }

/* ---------- Split feature (image + text) ---------- */
.ai-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--spacing-lg); align-items: center; margin-top: var(--spacing-lg); }
@media (max-width: 800px) { .ai-split { grid-template-columns: 1fr; } }
.ai-split .ai-split-media {
  border-radius: 20px; min-height: 320px;
  background: linear-gradient(135deg, rgba(216,183,179,0.5), rgba(139,168,136,0.4));
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem;
}
.ai-split ul.ai-checklist { list-style: none; padding: 0; margin: var(--spacing-md) 0 0; }
.ai-split ul.ai-checklist li { position: relative; padding-left: 1.8rem; margin-bottom: 0.7rem; color: var(--dark-gray); line-height: 1.6; }
.ai-split ul.ai-checklist li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--sage); font-weight: 700;
}

/* ---------- Final CTA band ---------- */
.ai-final {
  background: linear-gradient(135deg, var(--charcoal) 0%, #2c2825 100%);
  color: #fff; text-align: center; padding: var(--spacing-xl) 0;
}
.ai-final h2 { font-family: var(--font-heading); color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: var(--spacing-sm); }
.ai-final p { color: rgba(255,255,255,0.8); max-width: 620px; margin: 0 auto var(--spacing-md); line-height: 1.7; }
.ai-final .ai-cta-group .btn-secondary { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.4); }
.ai-final .ai-cta-group .btn-secondary:hover { background: rgba(255,255,255,0.1); }

/* ---------- Disclaimer ---------- */
.ai-disclaimer {
  font-size: 0.82rem;
  color: var(--medium-gray);
  line-height: 1.6;
  max-width: 760px;
  margin: var(--spacing-md) auto 0;
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid rgba(63,58,55,0.10);
  text-align: center;
}
.ai-disclaimer strong { color: var(--dark-gray); }

/* ---------- Page hero (inner pages) ---------- */
.ai-page-hero { background: linear-gradient(180deg, var(--cream), #fff); padding: 6rem 0 3rem; text-align: center; }
.ai-page-hero h1 { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem); color: var(--charcoal); margin-bottom: var(--spacing-sm); }
.ai-page-hero p { max-width: 640px; margin: 0 auto; color: var(--dark-gray); font-size: 1.1rem; line-height: 1.7; }

/* ---------- Form niceties (assessment) ---------- */
.ai-form-wrap { max-width: 760px; margin: var(--spacing-lg) auto 0; background: #fff; border: 1px solid rgba(63,58,55,0.10); border-radius: 20px; padding: var(--spacing-lg); box-shadow: 0 8px 30px rgba(63,58,55,0.05); }
.ai-form-wrap .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-sm); }
.ai-form-wrap .form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.ai-form-wrap .form-group.full-width { grid-column: 1 / -1; }
.ai-form-wrap label { font-size: 0.9rem; font-weight: 600; color: var(--charcoal); }
.ai-form-wrap input, .ai-form-wrap select, .ai-form-wrap textarea {
  font-family: var(--font-body); font-size: 0.95rem; padding: 0.7rem 0.85rem;
  border: 1px solid rgba(63,58,55,0.18); border-radius: 10px; background: #fff; color: var(--charcoal);
}
.ai-form-wrap input:focus, .ai-form-wrap select:focus, .ai-form-wrap textarea:focus { outline: 2px solid var(--sage); border-color: var(--sage); }
.ai-form-wrap .form-helper { font-size: 0.8rem; color: var(--medium-gray); margin: 0.2rem 0 0; }
.ai-form-wrap .btn-full-width { grid-column: 1 / -1; width: 100%; }
@media (max-width: 600px) { .ai-form-wrap .form-grid { grid-template-columns: 1fr; } }
.ai-form-success { display: none; text-align: center; padding: var(--spacing-md); }
.ai-form-success.show { display: block; }
.ai-form-success .ok-icon { font-size: 2.4rem; color: var(--sage); }

/* ---------- Nav tweak: keep new nav consistent ---------- */
.nav-links .nav-link.active { color: var(--sage); }

/* ---------- Testimonials ---------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}
.testimonial-card {
  background: #fff;
  border: 1px solid rgba(63,58,55,0.08);
  border-radius: 16px;
  padding: var(--spacing-md);
}
.testimonial-stars { color: var(--gold); font-size: 1rem; margin-bottom: var(--spacing-sm); }
.testimonial-quote {
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--dark-gray);
  font-style: italic;
  margin-bottom: var(--spacing-md);
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--rose);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.testimonial-author strong { display: block; font-size: 0.95rem; color: var(--charcoal); }
.testimonial-author span { font-size: 0.82rem; color: var(--medium-gray); }
@media (max-width: 900px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .testimonial-grid { grid-template-columns: 1fr; } }

/* ---------- Instagram Grid ---------- */
.insta-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}
.insta-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
}
.insta-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.insta-item:hover img { transform: scale(1.05); }
.insta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(63,58,55,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: #fff;
  font-weight: 600;
}
.insta-item:hover .insta-overlay { opacity: 1; }
@media (max-width: 900px) { .insta-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .insta-grid { grid-template-columns: repeat(2, 1fr); } }