.main-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #e3f2fd;
  color: #1976d2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 20px;
}

.hero-aiedge-banner {
  position: relative !important;
  width: min(1180px, calc(100% - 40px)) !important;
  margin: 0 auto 40px auto !important;
  height: 520px !important;
  min-height: 520px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  background: #020a19 !important;
  border-radius: var(--radius-box, 16px) !important;
  box-shadow: 0 16px 40px rgba(0, 10, 30, 0.15) !important;
  color: #ffffff !important;
}

main {
  background-color: #ffffff !important;
}

.hero-slider-container {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}

.hero-aiedge-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-in-out;
  background-size: cover !important;
  background-position: center right !important;
}

.hero-aiedge-bg.active {
  opacity: 1;
  visibility: visible;
}

.hero-aiedge-bg::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, rgba(2, 10, 25, 0.94) 0%, rgba(2, 10, 25, 0.65) 55%, rgba(2, 10, 25, 0.2) 100%) !important;
}

.hero-aiedge-content {
  position: relative !important;
  z-index: 3 !important;
  max-width: 680px !important;
  min-height: 280px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding-left: 20px !important;
}

.hero-text-item {
  width: 100% !important;
}

.hero-text-item h1 {
  font-size: 2.7rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  margin: 0 0 16px 0 !important;
  min-height: 2.6em !important;
  display: block !important;
}

.hero-text-item h1 span {
  display: block !important;
  color: #38d3ff !important;
  margin-top: 4px !important;
}

.hero-text-item p {
  font-size: 1.05rem !important;
  color: rgba(255, 255, 255, 0.85) !important;
  line-height: 1.65 !important;
  margin: 0 0 24px 0 !important;
  min-height: 3.3em !important;
}

.hero-aiedge-dots {
  position: absolute !important;
  bottom: 25px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.hero-aiedge-dots .dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.3) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.hero-aiedge-dots .dot.active {
  width: 28px !important;
  border-radius: 14px !important;
  background: #38d3ff !important;
  box-shadow: 0 0 12px rgba(56, 211, 255, 0.8) !important;
}

.ai-erp10-page .hero-aiedge-banner {
  height: 520px !important;
  min-height: 520px !important;
  margin: 0 auto 40px auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

.ai-erp10-page .hero-aiedge-content {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
  min-height: auto !important;
}

body.ai-erp10-page .hero-aiedge-banner,
.hero-aiedge-banner {
  margin-top: 20px !important;
  margin-bottom: 0 !important;
}

main {
  overflow: visible !important;
  background-color: #ffffff !important;
}

.subnav-bar {
  position: sticky !important;
  top: 78px !important;
  z-index: 99 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  margin-top: 12px !important;
  margin-bottom: 20px !important;
  padding: 8px 0 !important;
}

header,
#shared-header,
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background-color: #ffffff !important;
}

section[id],
body.ai-erp10-page #overview {
  scroll-margin-top: 130px !important;
  padding-top: 20px !important;
}

.scroll-top-btn {
  position: fixed !important;
  bottom: 30px !important;
  right: 30px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: #1976d2 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 6px 16px rgba(25, 118, 210, 0.4) !important;
  cursor: pointer !important;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2rem !important;
}

.scroll-top-btn.active {
  opacity: 1 !important;
  visibility: visible !important;
}

.scroll-top-btn:hover {
  background: #1565c0 !important;
  transform: translateY(-3px) !important;
}

.mui-capa-card {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: var(--radius-box, 16px) !important;
  padding: 35px 30px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
}

.mui-capa-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 14px 35px rgba(25, 118, 210, 0.1) !important;
  border-color: #bbdefb !important;
}

.capa-badge {
  display: inline-block !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
}

body,
main,
#shared-header,
header,
.site-header {
  background-color: #ffffff !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.hero-aiedge-banner,
body.ai-erp10-page .hero-aiedge-banner,
body.pms-page .hero-aiedge-banner,
body.ai-vecs-page .hero-aiedge-banner {
  margin-top: 20px !important;
  margin-bottom: 0 !important;
}

.subnav-bar {
  margin-top: 12px !important;
  margin-bottom: 20px !important;
  padding: 8px 0 !important;
  background: rgba(255, 255, 255, 0.98) !important;
}

body.ai-erp10-page #overview,
body.ai-erp10-page section:first-of-type {
  padding-top: 30px !important;
  margin-top: 0 !important;
}

.grid-4col-wrapper {
  align-items: flex-start !important;
}

.grid-4col-wrapper .lineup-col-card {
  height: auto !important;
  align-self: flex-start !important;
}

.grid-4col-wrapper .lineup-col-header {
  height: 110px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
}

.grid-4col-wrapper .lineup-item {
  min-height: 52px !important;
  padding: 8px 10px !important;
}

.grid-4col-wrapper .item-title {
  white-space: normal !important;
  word-break: keep-all !important;
  font-size: 0.85rem !important;
  line-height: 1.25 !important;
}

.grid-4col-wrapper .header-red h3,
.grid-4col-wrapper .header-red .fas,
.grid-4col-wrapper .header-red .lineup-more-btn {
  color: #d32f2f !important;
}

@media screen and (max-width: 900px) {
.hero-aiedge-banner.home-hero {
  height: auto !important;
  min-height: 520px !important;
  max-height: none !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 32px 0 24px !important;
}

.home-hero > .container {
  width: calc(100% - 48px) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  padding: 0 !important;
  flex: 1 0 auto !important;
  display: flex !important;
  align-items: center !important;
}

.home-hero .hero-aiedge-content {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  justify-content: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.home-hero .hero-text-item {
  grid-area: 1 / 1 !important;
  position: relative !important;
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow-wrap: anywhere;
}

.home-hero .hero-text-item.active-text {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 1;
}

.home-hero .hero-text-item > div {
  max-width: 100% !important;
  box-sizing: border-box !important;
  flex-wrap: wrap !important;
}

.home-hero .hero-text-item .btn {
  max-width: 100% !important;
  box-sizing: border-box !important;
  white-space: normal !important;
}

.home-hero > .hero-aiedge-dots {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  margin: 24px 0 0 !important;
  padding: 0 !important;
  height: 10px !important;
}
}