/* ML page: theme #004c8f only + neutrals. No orange or temporary logo colors.
   Gradients, glows, section dividers, scroll reveal, hover animations. */

.ml-page {
  --ml-primary: #004c8f;
  --ml-primary-rgb: 0, 76, 143;
  --ml-primary-dark: #003d73;
  --ml-primary-light: #0066b3;
  --ml-primary-bg: rgba(0, 76, 143, 0.08);
  --ml-primary-bg-strong: rgba(0, 76, 143, 0.12);
  --ml-text: #1e1e1e;
  --ml-text-muted: #4a5056;
  --ml-shadow: 0 4px 20px rgba(var(--ml-primary-rgb), 0.1);
  --ml-shadow-hover: 0 12px 36px rgba(var(--ml-primary-rgb), 0.2);
  --ml-glow: 0 0 24px rgba(var(--ml-primary-rgb), 0.12);
  --ml-radius: 16px;
  --ml-radius-lg: 20px;
}

/* ----- Hero: gradient overlay (blue tones only) ----- */
.ml-page .ml-hero {
  position: relative;
  overflow: hidden;
}
.ml-page .ml-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(var(--ml-primary-rgb), 0.14) 0%, transparent 50%),
    linear-gradient(225deg, rgba(var(--ml-primary-rgb), 0.06) 0%, transparent 55%),
    linear-gradient(180deg, transparent 55%, rgba(var(--ml-primary-rgb), 0.05) 100%);
  pointer-events: none;
  z-index: 0;
}
.ml-page .ml-hero .container {
  position: relative;
  z-index: 1;
}
.ml-page .ai-hero-kicker {
  color: var(--ml-primary);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.ml-page .ai-hero-title {
  color: var(--ml-text);
}
.ml-page .ai-hero-title .brand-third {
  color: var(--ml-primary);
}
.ml-page .section-kicker {
  color: var(--ml-primary);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.ml-page .ml-section h2 {
  color: var(--ml-primary);
  font-weight: 700;
}

/* ----- Section backgrounds: alternating (whites, light grays, subtle blues) ----- */
.ml-page .ml-section.ai-section {
  background: #fff;
  position: relative;
}
.ml-page .ml-section.ai-section-alt {
  background: linear-gradient(180deg, #f8fafc 0%, #eef6fc 50%, #f0f7fc 100%);
  position: relative;
}
.ml-page .ml-section:nth-of-type(even):not(.ai-section-alt) {
  background: linear-gradient(180deg, #fafbfd 0%, #f0f7fc 100%);
}
.ml-page .ml-section:nth-of-type(odd):not(.ai-section-alt):not(.ml-hero) {
  background: #fff;
}

/* ----- Section dividers: wave shape (blue-themed) ----- */
.ml-page .ml-section {
  position: relative;
}
.ml-page .ml-section::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 24c150-24 150 24 300 24s150-24 300-24 150 24 300 24 150-24 300-24 150 24 300 24v24H0V24z'/%3E%3C/svg%3E") no-repeat center bottom;
  background-size: 100% 48px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.98;
}
.ml-page .ml-section.ai-section-alt::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath fill='%23f0f7fc' d='M0 24c150-24 150 24 300 24s150-24 300-24 150 24 300 24 150-24 300-24 150 24 300 24v24H0V24z'/%3E%3C/svg%3E") no-repeat center bottom;
  background-size: 100% 48px;
}
.ml-page .ml-section:last-of-type::after,
.ml-page .ml-cta-section::after {
  display: none;
}
.ml-page .ml-section > .container {
  position: relative;
  z-index: 1;
}

/* ----- Cards: blue gradient bar, soft shadow, rounded, hover lift ----- */
.ml-page .ai-highlight-card,
.ml-page .ai-career-card,
.ml-page .ai-benefit-card {
  border-radius: var(--ml-radius-lg);
  box-shadow: var(--ml-shadow);
  border: 1px solid rgba(var(--ml-primary-rgb), 0.1);
  background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
  padding: 1.5rem;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative;
  overflow: hidden;
}
.ml-page .ai-highlight-card::before,
.ml-page .ai-career-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ml-primary) 0%, var(--ml-primary-light) 100%);
  border-radius: var(--ml-radius-lg) var(--ml-radius-lg) 0 0;
}
.ml-page .ai-highlight-card:hover,
.ml-page .ai-career-card:hover,
.ml-page .ai-benefit-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--ml-shadow-hover), var(--ml-glow);
  border-color: rgba(var(--ml-primary-rgb), 0.2);
}

/* ----- Icons: blue-tinted background, drop shadow, soft glow ----- */
.ml-page .ai-highlight-icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--ml-primary-bg-strong) 0%, var(--ml-primary-bg) 100%);
  box-shadow: 0 4px 12px rgba(var(--ml-primary-rgb), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.ml-page .ai-highlight-card h3 {
  color: var(--ml-primary);
  font-weight: 700;
}
.ml-page .ai-career-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.12));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--ml-primary-bg-strong) 0%, var(--ml-primary-bg) 100%);
  box-shadow: 0 4px 16px rgba(var(--ml-primary-rgb), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.ml-page .ai-career-role {
  color: var(--ml-primary);
  font-weight: 700;
}
.ml-page .ai-benefit-check {
  background: linear-gradient(145deg, var(--ml-primary) 0%, var(--ml-primary-dark) 100%) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(var(--ml-primary-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ----- Curriculum: blue number circle, rounded card ----- */
.ml-page .ai-curriculum-item {
  border-radius: var(--ml-radius);
  border: 1px solid rgba(var(--ml-primary-rgb), 0.1);
  background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
  box-shadow: var(--ml-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ml-page .ai-curriculum-item:hover {
  transform: translateX(6px);
  box-shadow: var(--ml-shadow-hover);
}
.ml-page .ai-curriculum-num {
  background: linear-gradient(145deg, var(--ml-primary) 0%, var(--ml-primary-dark) 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(var(--ml-primary-rgb), 0.3);
}
.ml-page .ai-curriculum-body h3 {
  color: var(--ml-primary);
  font-weight: 700;
}

/* ----- CTA box: blue gradient only ----- */
.ml-page .ai-cta-section {
  position: relative;
}
.ml-page .ai-cta-box {
  border-radius: var(--ml-radius-lg);
  background: linear-gradient(135deg, var(--ml-primary) 0%, var(--ml-primary-dark) 50%, #003060 100%);
  border: none;
  box-shadow: 0 16px 48px rgba(var(--ml-primary-rgb), 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  padding: 2.5rem 2rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.ml-page .ai-cta-box::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.06) 100%);
  pointer-events: none;
  border-radius: 0 var(--ml-radius-lg) var(--ml-radius-lg) 0;
}
.ml-page .ai-cta-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 56px rgba(var(--ml-primary-rgb), 0.45), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}
.ml-page .ai-cta-title {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.ml-page .ai-cta-sub {
  color: rgba(255, 255, 255, 0.92);
}
.ml-page .ai-cta-btn {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--ml-primary) !important;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ml-page .ai-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  background: #f8fafc !important;
  border-color: #f8fafc !important;
  color: var(--ml-primary-dark) !important;
}

/* ----- Buttons: primary blue, secondary outline blue ----- */
.ml-page .btn-axon-primary,
.ml-page .ai-cta-main,
.ml-page .ai-cta-btn {
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ml-page .btn-axon-primary,
.ml-page .ai-cta-main {
  background: linear-gradient(145deg, var(--ml-primary) 0%, var(--ml-primary-dark) 100%) !important;
  border-color: var(--ml-primary) !important;
  box-shadow: 0 4px 16px rgba(var(--ml-primary-rgb), 0.35);
}
.ml-page .btn-axon-primary:hover,
.ml-page .ai-cta-main:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(var(--ml-primary-rgb), 0.45);
}
.ml-page .ai-cta-secondary {
  border-color: var(--ml-primary);
  color: var(--ml-primary);
}
.ml-page .ai-cta-secondary:hover {
  background: var(--ml-primary-bg);
  border-color: var(--ml-primary);
  color: var(--ml-primary-dark);
}

/* ----- Images: rounded, shadow, subtle zoom on hover ----- */
.ml-page .ml-hero-image-wrap,
.ml-page .ml-project-img-wrap,
.ml-page .ml-img-contain {
  overflow: hidden;
  border-radius: var(--ml-radius-lg);
  box-shadow: var(--ml-shadow), 0 0 40px rgba(var(--ml-primary-rgb), 0.08);
  transition: box-shadow 0.4s ease;
}
.ml-page .ml-hero-image-wrap img,
.ml-page .ml-project-img-wrap img,
.ml-page .ml-img-contain img {
  transition: transform 0.4s ease;
}
.ml-page .ml-hero-image-wrap:hover,
.ml-page .ml-project-img-wrap:hover,
.ml-page .ml-img-contain:hover {
  box-shadow: var(--ml-shadow-hover), 0 0 48px rgba(var(--ml-primary-rgb), 0.12);
}
.ml-page .ml-hero-image-wrap:hover img,
.ml-page .ml-project-img-wrap:hover img,
.ml-page .ml-img-contain:hover img {
  transform: scale(1.05);
}
@media (max-width: 991.98px) {
  .ml-page .ml-hero-image-wrap:hover img,
  .ml-page .ml-hero-float img {
    transform: none;
  }
}

/* ----- Text contrast ----- */
.ml-page .ml-section .text-muted {
  color: var(--ml-text-muted) !important;
}
.ml-page .ml-section .lead {
  color: var(--ml-text);
}

/* ----- Scroll reveal: fade-in on scroll ----- */
.ml-page .ml-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.ml-page .ml-reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ----- Decorative blob divider (blue theme) ----- */
.ml-page .ml-section.ml-section-divider::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 60px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath fill='%23eef6fc' d='M0 30 Q300 0 600 30 T1200 30 V60 H0 Z'/%3E%3C/svg%3E") no-repeat center top;
  background-size: 100% 60px;
  pointer-events: none;
  z-index: 0;
}