/* CodingMaxima Enterprise header and hero */
.index-page .header {
  --nav-color: #35435b;
  --nav-hover-color: #2457c5;
  --nav-dropdown-hover-color: #2457c5;
  --accent-color: #2858ce;
  --contrast-color: #fff;
  background: rgba(247, 250, 255, .94);
  padding: 12px 0;
  box-shadow: 0 1px 0 #dce5f2;
}
.index-page .header > .container-fluid {
  min-height: 66px;
  padding: 8px 20px;
  border: 1px solid #e4eaf4;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(28, 54, 101, .06);
}
.index-page .header .logo { flex-shrink: 0; gap: 10px; }
.index-page .header .logo img { display: block; max-height: none; width: 112px; height: auto; margin: 0; }
.brand-divider { width: 1px; height: 28px; background: #d9e2ef; }
.brand-enterprise { color: #40567a; font: 600 11px var(--nav-font); letter-spacing: .08em; text-transform: uppercase; }
@media (min-width: 1200px) {
  .index-page .navmenu > ul > li { padding: 0 8px; }
  .index-page .navmenu a, .index-page .navmenu a:focus { font-size: 13px; font-weight: 500; }
  .index-page .navmenu > ul > li > a.nav-cta { padding: 12px 16px; border-radius: 9px; color: #fff; background: #2858ce; }
  .index-page .navmenu > ul > li > a.nav-cta:hover { color: #fff; background: #1f45a9; }
  .index-page .navmenu a.nav-cta i { margin-left: 9px; font-size: 15px; }
}
.index-page .mobile-nav-toggle { color: #243b60; }
.index-page.mobile-nav-active .mobile-nav-toggle { color: #fff; }
.index-page .hero {
  --background-color: #f5f8fe;
  --heading-color: #172744;
  --default-color: #56667e;
  background: radial-gradient(circle at 88% 18%, #e4efff 0, transparent 34%), linear-gradient(135deg, #f9fbff, #f0f5fd);
  min-height: 0;
  padding: 125px 0 85px;
  overflow: hidden;
}
.index-page .hero::before { display: none; }
.index-page .hero .container { position: relative; z-index: 1; }
.index-page .hero .hero-waves { height: 60px; pointer-events: none; }
.index-page .hero .wave1 use { fill: #c9ddfa; opacity: .7; }
.index-page .hero .wave2 use { fill: #dceafb; opacity: .85; }
.index-page .hero .wave3 use { fill: #fff; opacity: 1; }
.index-page .hero .hero-eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 24px; color: #365a9b; font: 700 11px var(--nav-font); letter-spacing: .14em; }
.eyebrow-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #3971e6; box-shadow: 0 0 0 5px #e4edff; }
.index-page .hero h1 { max-width: 640px; margin: 0; color: #172744; font: 700 clamp(40px, 4.3vw, 60px)/1.13 var(--heading-font); letter-spacing: -.035em; }
.index-page .hero h1 span { color: #2858ce; border-bottom: 0; text-decoration: none; }
.index-page .hero .hero-intro { max-width: 540px; margin: 24px 0 0; color: #596b84; font-size: 18px; line-height: 1.75; }
.index-page .hero .hero-actions { gap: 16px; margin-top: 32px; }
.index-page .hero .btn-get-started, .hero-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 50px; padding: 13px 20px; border-radius: 9px; font: 600 14px var(--nav-font); transition: .2s ease; }
.index-page .hero .btn-get-started { margin: 0; background: #2858ce; color: #fff; box-shadow: 0 8px 18px #2858ce26; }
.index-page .hero .btn-get-started:hover { background: #1f45a9; color: #fff; }
.hero-secondary { color: #334e78; border: 1px solid #d5e0f1; background: #fff; }
.hero-secondary:hover { color: #244caa; border-color: #a9bde4; }
.learning-visual { padding: 22px; border: 1px solid #d5e2f6; border-radius: 22px; background: #e8f0fc; box-shadow: 0 24px 60px #294b8220; }
.visual-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 18px; color: #526b96; font: 700 10px var(--nav-font); letter-spacing: .1em; }
.visual-top i { margin-right: 6px; color: #366ad4; font-size: 15px; }
.visual-mark { color: #6c8cbd; font: 700 18px monospace; }
.visual-window { overflow: hidden; border: 1px solid #dce5f3; border-radius: 14px; background: #fff; box-shadow: 0 12px 28px #2f4b7612; }
.window-heading { display: flex; align-items: center; gap: 12px; padding: 14px 17px; border-bottom: 1px solid #e7edf6; color: #7787a1; font: 11px var(--nav-font); }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #ef9e9c; }
.window-dots i:nth-child(2) { background: #ebcc84; }
.window-dots i:nth-child(3) { background: #8bc9b0; }
.window-label { margin-left: auto; color: #8391a8; font-size: 9px; letter-spacing: .08em; }
.visual-content { padding: 28px 24px 30px; }
.visual-kicker { color: #5076c2; font: 700 10px var(--nav-font); letter-spacing: .12em; }
.index-page .hero .visual-content h2 { margin: 10px 0 8px; color: #1b2e4e; font: 700 24px var(--heading-font); }
.visual-content p { margin: 0; color: #71809a; font-size: 13px; line-height: 1.6; }
.visual-flow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 26px; }
.visual-flow div { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 15px 5px 12px; border: 1px solid #e2eaf7; border-radius: 10px; background: #f7faff; color: #415b83; font-size: 11px; font-weight: 600; }
.visual-flow div i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #e6efff; color: #3466d0; font-size: 18px; }
.flow-arrow { color: #a4b5cf; }
.visual-footer { display: flex; align-items: center; gap: 12px; padding: 20px 3px 0; }
.visual-footer-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 10px; background: #d7e5fc; color: #3466d0; font-size: 19px; }
.visual-footer p { margin: 0; color: #667b9c; font-size: 12px; line-height: 1.5; }
.visual-footer strong { color: #2f4e7d; }
.visual-footer-arrow { margin-left: auto; color: #7292c7; }
/* Keep the wave visible on shorter laptop viewports. */
@media (min-width: 992px) and (max-height: 700px) {
  .index-page .hero { padding: 110px 0 68px; }
  .index-page .hero h1 { font-size: clamp(40px, 3.8vw, 52px); }
  .index-page .hero .hero-intro { margin-top: 18px; }
  .index-page .hero .hero-actions { margin-top: 22px; }
  .learning-visual { padding: 16px; }
  .visual-top { margin-bottom: 12px; }
  .visual-content { padding: 18px 20px; }
  .visual-flow { margin-top: 16px; }
  .visual-flow div { padding: 10px 5px; }
  .visual-footer { padding-top: 12px; }
}
@media (max-width: 1199px) { .index-page .header > .container-fluid { width: calc(100% - 32px); } }
@media (max-width: 991px) { .index-page .hero { padding: 120px 0 100px; } .learning-visual { max-width: 580px; } }
@media (max-width: 575px) {
  .index-page .header { padding: 8px 0; }
  .index-page .header > .container-fluid { min-height: 60px; padding: 6px 12px; }
  .index-page .header .logo img { width: 95px; }
  .brand-enterprise { font-size: 10px; }
  .index-page .hero { padding: 105px 0 90px; }
  .index-page .hero h1 { font-size: 39px; }
  .index-page .hero .hero-intro { font-size: 16px; }
  .learning-visual { padding: 15px; }
  .visual-content { padding: 24px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .index-page .hero a { transition: none; }
  .index-page .hero .hero-waves use { animation: none; }
}