/* ==========================================================================
   Mobile Development Page — Clean CSS (2026 redesign)
   ========================================================================== */

body {
  background-color: #fff;
}

.content {
  overflow: hidden;
}

/* ---------- Override old section min-height ---------- */
.content section {
  min-height: auto;
}

/* ---------- Global font normalization ---------- */
.content,
.content p,
.content li,
.content span,
.content a,
.content div,
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content section,
.content button {
  font-family: Inter, sans-serif;
}

/* ==========================================================================
   Why Trembit — match case-study-cards design language
   ========================================================================== */

section.why-trembit {
  background: linear-gradient(160deg, #131217 0%, #1a1040 50%, #211260 100%);
  padding: 80px 0;
}

@media (max-width: 575px) {
  section.why-trembit {
    padding: 48px 0;
  }
}

/* Title */
section.why-trembit .h2-standardized,
section.why-trembit .h2-standardized.white,
section.why-trembit h2 {
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 48px;
}

@media (max-width: 575px) {
  section.why-trembit .h2-standardized,
  section.why-trembit h2 {
    font-size: 28px;
  }
}

/* Metric numbers (h3) — smaller, gradient */
section.why-trembit .h3-standardized {
  font-size: 36px;
  font-weight: 800;
  background: linear-gradient(135deg, #F6583E 0%, #F78E1A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 6px;
  text-transform: none;
}

@media (max-width: 970px) {
  section.why-trembit .h3-standardized {
    font-size: 30px;
  }
}

/* Metric label (span inside h3) — white, normal weight */
section.why-trembit .h3-standardized span {
  display: block;
  -webkit-text-fill-color: #fff;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
}

/* Metric subheading (h4) — gradient like numbers */
section.why-trembit .h4-standardized,
section.why-trembit h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #F6583E 0%, #F78E1A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Metric description (p) */
section.why-trembit .metric-description p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  line-height: 1.6;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.6);
}

/* Cards — match case-study-cards dark card style */
section.why-trembit ul {
  gap: 24px;
}

section.why-trembit ul li {
  padding: 32px 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 4px solid #F78E1A;
  transition: all 0.3s ease;
}

section.why-trembit ul li:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

/* CTA button */
section.why-trembit .btn-primary {
  background: linear-gradient(135deg, #F6583E 0%, #F78E1A 100%);
  border: none;
}

/* ==========================================================================
   Educational Columns (Engagement Models) — dark variant override
   ========================================================================== */

section.edu-columns.edu-columns--alt {
  background: linear-gradient(160deg, #131217 0%, #1a1040 50%, #211260 100%);
  padding: 60px 0 60px;
}

section.edu-columns.edu-columns--alt .edu-columns__title {
  margin-bottom: 32px;
}

section.edu-columns.edu-columns--alt .edu-columns__grid {
  gap: 32px;
}

section.edu-columns.edu-columns--alt .edu-columns__title {
  color: #fff;
}

section.edu-columns.edu-columns--alt .edu-columns__title::before {
  background: linear-gradient(90deg, #FFB40F, #F78E1A);
}

section.edu-columns.edu-columns--alt .edu-columns__col-title {
  color: #fff;
}

section.edu-columns.edu-columns--alt .edu-columns__col-text p {
  color: rgba(255, 255, 255, 0.6);
  opacity: 1;
}

section.edu-columns.edu-columns--alt .edu-columns__col-text strong {
  color: #F78E1A;
}

/* ---------- FAQ: ensure Inter font ---------- */
section .qna h3,
section .qna p,
.faq-block h3,
.faq-block p {
  font-family: Inter, sans-serif;
}