/* ======================================
   MOBVOI LANDING PAGES — mobvoi-landing.css
   Theme navy: #1C1F82
   ====================================== */

/* ── Page base ── */
.ml-page {
  background: white;
  color: #1a1a1a;
}

/* ── Header: default black logo + black text, with smooth transition ── */
.ml-page .logo img {
  filter: invert(1);
  transition: filter 0.45s ease;
}
.ml-page .nav a {
  color: #1a1a1a;
}
.ml-page .nav a:hover { background-size: 100% 1px; }
.ml-page .nav a.active { font-weight: 700; }

/* ── Header over dark section → white text ── */
.ml-page .header--inverted .logo img { filter: invert(0); }
.ml-page .header--inverted .nav a   { color: #ffffff; }
.ml-page .header--inverted .nav a:hover { background-size: 100% 1px; }

/* ══════════════════════════════════════
   ① HERO
   ══════════════════════════════════════ */
.ml-hero {
  width: 100%;
  height: 100vh;
  min-height: 600px;
  background: #1C1F82;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 80px 120px 40px; /* top = header height */
  box-sizing: border-box;
}

.ml-hero-text {
  flex: 1;
}
.ml-hero-text h1 {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  color: white;
  line-height: 1.2;
  margin: 0;
}

.ml-hero-mockup {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}
.ml-hero-mockup img {
  max-width: 100%;
  max-height: calc(100vh - 160px);
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

/* ══════════════════════════════════════
   SHARED SECTION STYLES
   ══════════════════════════════════════ */
.ml-section {
  background: white;
  padding: 60px 120px;
  margin-top: 100px;
}

.ml-section-title {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 600;
  color: #2c2c2c;
  margin: 0 0 20px;
  line-height: 1.2;
}

.ml-body {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.75;
  color: #444444;
  margin: 0 0 14px;
}
.ml-body:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════
   ② FROM BRAND TO VISUAL
   ══════════════════════════════════════ */
.ml-brand-section {
  padding: 0;
  margin-top: 0;
  display: flex;
  flex-direction: column;
}

/* White top: text left + phone image right */
.ml-brand-top {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 0 120px;
  height: 440px;
  overflow: hidden;
}

.ml-brand-text {
  flex: 0 0 280px;
}

.ml-brand-phone {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: 100%;
  margin: 0;
  padding: 0;
}
.ml-brand-phone img {
  width: 100%;
  max-width: 560px;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Dark navy bottom: brand table image */
.ml-brand-bottom {
  background: #1C1F82;
}
.ml-brand-bottom img {
  width: 100%;
  height: auto;
  display: block;
}

/* ══════════════════════════════════════
   ③④⑤ SPLIT SECTIONS (text left, image right)
   flex values set inline per Figma proportions
   ══════════════════════════════════════ */
.ml-split-section {
  display: flex;
  gap: 40px;
  align-items: center;
}

.ml-split-left {
  /* flex set inline */
  min-width: 0;
}

.ml-split-right {
  /* flex set inline */
  min-width: 0;
}
.ml-split-right img {
  width: 100%;
  height: auto;
  display: block;
}

/* ══════════════════════════════════════
   CAROUSEL — white background
   ══════════════════════════════════════ */
.ml-page .more-section {
  background: white;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.ml-page .more-heading { color: #6b6b6b; }

/* ══════════════════════════════════════
   SCROLL FADE-IN ANIMATION
   ══════════════════════════════════════ */
.ml-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.ml-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}