@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1300px; }
}
.title-wrap h1 { font-size: 50px; font-weight: 600; line-height: 140%; letter-spacing: -0.5px; color: #fff; position: relative; z-index: 99; margin: 0; }
/* .title-wrap h1 span { color: var(--primarycolor); font-family: var(--primaryfont); } */
.dots { position: relative; }
.common-media { padding: 60px 0 7px 0; }
@media screen and (max-width:1199px) {
  .common-media { padding: 55px 0px 12px 0; }
}
@media screen and (max-width:991px) {
  .common-media { padding: 50px 0 26px 0; }
}
@media screen and (max-width:767px) {
  .common-media { padding: 45px 0px 37px 0; }
}
@media (max-width:576px) {
  .common-media { padding: 35px 0; }
}
@media (max-width:480px) {
  .common-media { padding: 25px 0; }
}
.title-wrap .h4 .dots { left: 0; top: 6px; width: 8px; height: 8px; border-radius: 100%; background: var(--primarycolor); display: block; }
.title-wrap .h4 { font-size: 14px; color: #4C596D; font-weight: 500; line-height: 150%; position: relative; padding-bottom: 15px; display: flex; gap: 10px; margin: 0; }
.details-img-wrap img { margin: 0; }
.banner-right-content { padding: 24px 16px; background: rgba(255, 108, 26, 0.05); }
.banner-right-content .h3, .banner-right-content h3 { color: #192A44; font-size: 22px; font-weight: 600; line-height: 29px; padding-bottom: 24px; margin-bottom: 0; }
.banner-right-content p { color: #192A44; font-size: 14px; font-weight: 400; line-height: 22px; }
.author-main { margin-top: 10px; }
audio { width: 500px; height: 60px; }
.blog-author-detail p a { color: #192A44; font-size: 20px; font-weight: 600; line-height: 40px; }
.blog-author-detail p a:hover { color: #ff6c1a; }
.author-detail { color: #192A44; font-size: 18px; font-weight: 400; line-height: 24px; }
.blogs-main-content-wrap { margin-top: 85px; }
.blog-post-content ul li, .blog-post-content ol li, .blog-post-content p { color: #192A44; font-size: 18px; font-weight: 400; line-height: 35px; padding-bottom: 14px; }
label { color: #192A44; font-size: 18px; font-weight: 400; padding-bottom: 14px; }
li b, p b { font-weight: 600; }
@media (max-width:1199px) {
  .banner-right-content .h3, .banner-right-content h3 { font-size: 20px; font-weight: 600; line-height: 24px; margin-bottom: 0; }
  .title-wrap h1 { font-size: 34px; line-height: 132%; }
  audio { width: 400px; height: 50px; }
  .ai-cta .title-wrap { padding: 50px 0px 50px 50px; }
  .blogs-main-content-wrap { margin-top: 60px; }
}
@media (max-width:991px) {
  audio { width: 300px; height: 50px; }
  .blogs-main-content-wrap { margin-top: 50px; }
}
.blog-post-content .h2, .blog-post-content h2 { color: #192A44; font-size: 26px; font-weight: 700; line-height: 36px; padding-bottom: 20px; }
.blog-post-content h3, .blog-post-content .h3 { color: #192A44; font-size: 22px; font-weight: 700; line-height: normal; padding: 10px 0 10px 0px; }
.blog-post-content h4, .blog-post-content .h4 { color: #192A44; font-size: 20px; font-weight: 600; line-height: normal; padding: 10px 0px; }
@media (max-width: 767px) {
  .blog-post-content .h2, .blog-post-content h2 { font-size: 22px; }
  .blog-post-content h3, .blog-post-content .h3 { font-size: 18px; }
}
@media (max-width: 480px) {
  .blog-post-content .h2, .blog-post-content h2 { font-size: 20px; }
}
.sub-titles { color: #192A44; font-size: 18px; font-weight: 600; line-height: normal; margin-bottom: 10px; }
/* Table of contents start */
.table-of-content-section { position: sticky; top: 100px; }
.blog-toc { border: 3px solid #FF6C1A66; border-radius: 15px; padding-top: 10px; }
.recent-blogs-head .h2 { color: #192A44; font-size: 20px; font-weight: 700; line-height: 150%; padding-left: 20px; }
.sidebar-blogs-single .h4 { margin-bottom: 0; }
.smart-header .h4 { display: block; color: #192A44; font-size: 16px; font-weight: 400; line-height: 25px; padding: 10px 25px; border-radius: 4px; width: 100%; margin-bottom: 0; }
.sidebar-blogs-single .h4 a { display: block; color: #192A44; font-size: 16px; font-weight: 400; line-height: 25px; padding: 10px 25px; border-radius: 4px; width: 100%; }
.smart-image { padding: 10px 10px 0 10px; }
.smart-image img { border-radius: 15px; }
.smart-blog-first { cursor: pointer; }
.popular-item:hover .popular-number { color: #FF8A3D !important; transition: 0.3s ease-in-out; }
.popular-item:hover .h4 { color: #FF8A3D; transition: 0.3s ease-in-out; }
.toc-scroll .menu-link.active { background: rgba(255, 108, 26, 0.15); color: #FF6C1A; font-weight: 600; }
.toc-scroll { display: flex; flex-direction: column; gap: 3px; }
.table-responsive.ai-table td, .table-responsive.ai-table th { padding: 14px; text-align: start; border: 1px solid #E5E7EB; }
.ai-table .table th { font-size: 16px; font-weight: 600; background: rgba(255, 108, 26, 0.10); color: #FF6C1A; }
.ai-table .table td ul li, .ai-table .table td { font-size: 18px; font-weight: 400; }
.ai-table .table td.spark { min-width: 250px; }
.ai-table .table { font-size: 20px; border-collapse: separate; border-spacing: 0; border-radius: 20px 20px 0px 0px; overflow: hidden; border: 1px solid #E5E7EB; min-width: 800px !important; }
@media (max-width:1199px) {
  .ai-table .table td ul li, .ai-table .table td { font-size: 16px; }
  .smart-header .h4 { padding: 10px 15px; }
}
/* CTA STart */
.ai-cta-request { border-radius: 24px; border: 1.5px solid #E5E7EB; background: rgba(255, 108, 26, 0.02); padding: 50px 60px; max-width: 830px; margin: 0 auto; }
.multimodal-cta-heading span { color: #ff6c1a; }
@media (max-width:1199px) {
  .ai-cta-request { padding: 40px 50px; }
}
@media (max-width:991px) {
  .blog-post-content .h2, .blog-post-content h2 { font-size: 24px; line-height: 32px; }
  .ai-table .table td.spark { min-width: auto; }
  .ai-cta-request { padding: 40px; border-radius: 10px; }
  .title-wrap h1 { font-size: 30px; }
  .ai-table { margin-bottom: 20px; }
  .ai-table .table td ul li, .ai-table .table td { font-size: 16px; font-weight: 400; }
  .blog-video iframe { height: 270px !important; }
  .smart-image { padding: 0; }
  .recent-blogs-head .h2 { padding: 0px 0px 10px 0px; }
}
@media (max-width: 700px) {
  .ai-cta-request { padding: 35px 40px; margin: 0; }
  .title-wrap h1 { font-size: 28px; }
  .blog-author-detail img { width: 33px !important; height: 33px !important; }
  .blog-author-detail p a { font-size: 18px; line-height: 130%; }
  .author-detail { font-size: 16px; }
  .blogs-main-content-wrap { margin-top: 35px; }
  .blog-post-content .h2, .blog-post-content h2 { font-size: 22px; line-height: 28px; }
  .blog-post-content ul li, .blog-post-content ol li, .blog-post-content p { font-size: 17px; line-height: 150%; }
  label { font-size: 17px; }
  .blog-post-content h4, .blog-post-content .h4 { font-size: 18px; }
  .blog-post-content .h2 { text-align: center !important; }
  .ai-cta .title-wrap { padding: 26px; }
  .blog-post-content h3, .blog-post-content .h3 { font-size: 18px; padding: 25px 0 5px 0px; }
}
@media (max-width: 575px) {
  .title-wrap h1 { font-size: 26px; }
  .author-detail { font-size: 14px; }
  audio { height: 40px; }
  .blog-video iframe { height: 250px !important; }
}
@media (max-width: 480px) {
  .ai-cta-request { padding: 30px 15px; border-radius: 16px; }
  .title-wrap h1 { font-size: 24px; }
  .blog-post-content .h2, .blog-post-content h2 { font-size: 20px; line-height: 26px; padding-bottom: 15px; }
  .blog-post-content ul li, .blog-post-content ol li, .blog-post-content p { font-size: 16px; }
  label { font-size: 16px; }
  .sub-titles { font-size: 16px; }
  .blog-post-content h4, .blog-post-content .h4 { font-size: 17px; }
  .banner-cta-btns a { font-size: 12px; }
}
/* CTA End */
/* CTA Start */
.ai-cta-main { padding: 70px 0; }
.ai-cta { border: 1px solid #E5E7EB; border-radius: 15px; background: rgba(255, 108, 26, 0.02); min-height: 336px; margin: 0 auto; }
.ai-cta .title-wrap { padding: 0 0 0 45px; }
.ai-cta-imgs { border-radius: 0px 15px 15px 0px; }
@media (max-width: 1199px) {
  .ai-cta .title-wrap h2 { font-size: 24px; }
  .ai-cta-main { padding-top: 0; }
  /* .ai-cta .title-wrap {padding: 80px 0 70px 70px;} */
}
@media (max-width: 991px) {
  .ai-cta .title-wrap { padding: 40px; }
  .ai-cta-main { padding: 0 0 60px; }
  .ai-cta { margin: 0px; }
}
@media (max-width: 767px) {
  .ai-cta .title-wrap h2 { font-size: 22px; }
  .ai-cta .title-wrap { padding: 40px; }
}
@media (max-width: 480px) {
  .ai-cta .title-wrap h2 { font-size: 20px; }
  .ai-cta .title-wrap { padding: 30px 20px; }
  .ai-cta-main { padding: 0 0 45px; }
}
/* CTA End */
/* banner-cta-btns style start here */
.banner-cta-btns { flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 20px; }
.banner-cta-btns a { display: block; padding: 8px 20px; border-radius: 8px; font-size: 16px; font-weight: 600; transition: all 0.5s; }
.banner-cta-btns a:first-child { border: 1px solid #ff6c1a; background: rgba(255, 108, 26, 0.10); color: #ff6c1a; }
.banner-cta-btns a:hover { color: #fff; background: #ff6c1a; }
.banner-cta-btns a:hover svg path { stroke: #fff; }
.banner-list p { color: #192A44; font-size: 14px; font-weight: 600; }
.banner-list p span { color: #FF6C1A; }
@media (max-width:1199px) {
  .banner-cta-btns a { font-size: 15px; padding: 12px; }
  .banner-list p { font-size: 12px; }
  .ai-cta { min-height: auto; }
}
@media (max-width: 991px) {
  .banner-cta-btns a { padding: 10px 12px; }
}
@media (max-width:767px) {
  .banner-cta-btns a { font-size: 14px; }
}
/* Blog Scroll Section style start here */
.blog-section .blog-card { padding-bottom: 0; }
.blog-section .blog-card figure { margin-bottom: 0; }
.blog-section .desc { padding: 15px; background: #f7f7f7; border: 1px solid #ededed; }
.blog-section .bolg-category-title .h4, .blog-section .bolg-category-title h4 { font-size: 14px; line-height: 21px; font-weight: 600; color: #192a44; padding-right: 10px; margin: 0; }
.blog-section .blog-card .bolg-category-title img { visibility: hidden; }
.blog-section .blog-card:hover .bolg-category-title img { transition: 1s ease-in-out; visibility: visible; }
.blog-section .blog-card h3, .blog-section .blog-card .h3 { color: var(--secondrycolor); font-size: 20px; font-weight: 600; line-height: 150%; transition: .3s ease-in-out; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 60px; margin: 0 !important; padding: 0; }
.blog-section .blog-card:hover h3 { color: var(--primarycolor); }
@media screen and (max-width:1199px) {
  .blog-section .blog-card h3, .blog-section .blog-card .h3 { font-size: 18px; min-height: 54px; }
}
@media screen and (max-width:767px) {
  .blog-section { padding-left: 12px !important; padding-right: 12px !important; }
  .blog-section .blog-card h3, .blog-section .blog-card .h3 { font-size: 17px; min-height: 50px; }
}
@media screen and (max-width:480px) {
  .blog-section .desc { padding: 10px; }
  .blog-section .bolg-category-title .h4, .blog-section .bolg-category-title h4 { font-size: 13px; }
  .blog-section .blog-card h3, .blog-section .blog-card .h3 { font-size: 15px; min-height: 45px; }
}
/* Blog Scroll Section style ends here */
.pros-cons { background-color: #f3f6f9; }
.list-img.tick li:before { background: url(../images/tick.svg) no-repeat left top; }
.list-img.exclamation li:before { background: url(../images/exclamation-red.svg) no-repeat left top; }
/* FAQ Start */
.faq-assist-heading { color: #192A44; font-size: 32px; font-weight: 700; line-height: 1.3; letter-spacing: 0; position: relative; display: inline-block; max-width: 760px; margin: 0 auto; }
.faq-assist-heading span:first-child { color: #FF6C1A; }
.faq-assist-heading .dots { display: inline-block; width: 26px; height: 26px; border-radius: 50%; background: #FF6C1A; margin-left: 4px; transform: translateY(5px); }
.faq .accordion-item { border: 0; border-bottom: 1px solid #E5E7EB; }
.faq .accordion-item:last-child { border-bottom: 0; }
.faq .accordion-button { font-size: 20px; color: #4C596D; padding: 30px 0; gap: 5px; }
.faq .accordion-button:not(.collapsed) { font-weight: 600; color: #111928; background-color: transparent; box-shadow: 0 0 0 0; }
.faq .accordion-button::after { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.0007 0.0820312C8.10555 0.0820312 0.0839844 8.1036 0.0839844 17.9987C0.0839844 27.8939 8.10555 35.9154 18.0007 35.9154C27.8958 35.9154 35.9173 27.8939 35.9173 17.9987C35.9173 8.1036 27.8958 0.0820312 18.0007 0.0820312ZM19.6673 11.332C19.6673 10.4116 18.9212 9.66536 18.0007 9.66536C17.0802 9.66536 16.334 10.4116 16.334 11.332V16.332H11.334C10.4135 16.332 9.66732 17.0782 9.66732 17.9987C9.66732 18.9192 10.4135 19.6654 11.334 19.6654H16.334V24.6654C16.334 25.5859 17.0802 26.332 18.0007 26.332C18.9212 26.332 19.6673 25.5859 19.6673 24.6654V19.6654H24.6673C25.5878 19.6654 26.334 18.9192 26.334 17.9987C26.334 17.0782 25.5878 16.332 24.6673 16.332H19.6673V11.332Z" fill="%23FF6C1A" fill-opacity="0.2"/></svg>'); width: 40px; height: 40px; background-size: 40px; }
.faq .accordion-button:not(.collapsed)::after { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.0007 2.08203C10.1056 2.08203 2.08398 10.1036 2.08398 19.9987C2.08398 29.8939 10.1056 37.9154 20.0007 37.9154C29.8958 37.9154 37.9173 29.8939 37.9173 19.9987C37.9173 10.1036 29.8958 2.08203 20.0007 2.08203ZM13.334 18.332C12.4135 18.332 11.6673 19.0782 11.6673 19.9987C11.6673 20.9192 12.4135 21.6654 13.334 21.6654H26.6673C27.5878 21.6654 28.334 20.9192 28.334 19.9987C28.334 19.0782 27.5878 18.332 26.6673 18.332H13.334Z" fill="%23FF6C1A"/></svg>'); }
.faq .accordion-button:focus { box-shadow: 0 0 0 0; }
.faq .accordion-body { padding: 0 0 30px; }
.faq .accordion-body p { color: #192A44; font-size: 18px; font-weight: 400; line-height: 162%; }
/* FAQ End */
@media (max-width: 767px) {
  .faq .accordion-button { font-size: 18px; padding: 20px 0; }
  .faq .accordion-body p { font-size: 17px; }
}
@media (max-width: 576px) {
  .faq .accordion-button { font-size: 16px; padding: 20px 0; }
  .faq .accordion-body p { font-size: 15px; }
  .faq .accordion-button::after { width: 30px; height: 30px; background-size: 30px; }
}
/* Footer Start */
.lines-white hr { background: #D1D5DB; }
.social-icons ul li a { transition: 0.3s ease-in-out; }
.social-icons ul li a:hover svg path { fill: #ff6c1a; }
.footer-heading ul li a:hover { font-weight: 400 !important; }
@media screen and (max-width: 991px) {
  .footer-heading p { padding-bottom: 25px !important; }
  .lines-white hr { margin: 0 0 25px; }
}
/* Footer End */
/* Table of Contents style start here */
body button.btn.btn-toc { background: #ff6c1a !important; color: #fff !important; border-radius: 0; position: relative; }
body button.btn.btn-toc.dropdown-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-bottom: 0; border-left: 0.3em solid transparent; }
.toc-main { position: relative; margin-top: 30px; margin-bottom: -60px; z-index: 1; }
.btn-toc { background: #ff6c1a !important; color: #fff !important; border-radius: 0; }
.btn-toc .btn.show { color: #fff !important; }
.btn-toc.dropdown-menu.show { position: relative !important; transform: translate(0, 0) !important; transition: all 2s ease-in-out; }
.btn-toc.toc-tab-menu.dropdown-menu.show { position: relative !important; top: 0 !important; left: 0 !important; transform: none !important; max-height: 300px !important; overflow-y: auto !important; }
.btn-toc.toc-tab-menu.dropdown-menu.show::-webkit-scrollbar { width: 5px !important; }
.btn-toc.toc-tab-menu.dropdown-menu.show::-webkit-scrollbar-thumb { background-color: #ff6c1a !important; border-radius: 20px !important; }
.btn-toc.dropdown-menu { width: 100%; background: #f3f6f9 !important; border-radius: 6px; padding: 25px; }
.btn-toc.dropdown-menu li { list-style: disc; list-style-position: inside; color: #000; }
.btn-toc.dropdown-menu li a { font-size: 16px; color: #4c596d !important; }
.btn-toc.dropdown-menu li a:hover { color: #ff6c1a !important; }
@media (max-width:991px) {
  .toc-main { margin-bottom: -40px; }
  .table-of-content-section { top: 20px; }
}
@media (max-width:767px) {
  .toc-main { margin-bottom: -20px; }
  .btn-toc.dropdown-menu li a { font-size: 14px; }
  .btn-toc.dropdown-menu { padding: 15px; }
}
@media (max-width:576px) {
  .btn-toc.dropdown-menu { padding: 10px; }
}
.ai-table::-webkit-scrollbar { background-color: #e5e7eb; width: 5px; height: 5px; /* width of the entire scrollbar */; }
.ai-table::-webkit-scrollbar-thumb { background-color: #ff6c1a; border-radius: 6px; width: 5px; height: 5px; }
/* Keep TOC labels in logical LTR order even inside RTL scroll containers */
.blog-toc .menu-link { direction: ltr; unicode-bidi: isolate; text-align: left; display: block; }
.toc-scroll .toc-subitems .menu-link.active { background: transparent; }
.toc-subitems li { list-style: none; position: relative; padding-left: 30px; }
.toc-scroll .toc-subitems li .menu-link.active::before { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 100%; background: #ff6c1a; left: 15px; top: 12px; transform: translate(-50%, -50%); }
.toc-subitems { flex-direction: column; gap: 10px; margin: 10px 0; }
.custom-scroll { max-height: 300px; overflow-y: auto; padding-right: 6px; direction: rtl; text-align: end; scrollbar-width: none; -ms-overflow-style: none; }
.custom-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.custom-scroll::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 20px; }
.custom-scrolls { max-height: 600px; overflow-y: auto; padding-right: 6px; direction: rtl; text-align: end; position: sticky; top: 100px; scrollbar-width: thin; scrollbar-color: #ff6c1a transparent; }
.custom-scrolls::-webkit-scrollbar { width: 5px; }
.custom-scrolls::-webkit-scrollbar-thumb { background-color: #ff6c1a; border-radius: 20px; }
.popular-number { margin: auto; color: #FF6C1A66; font-size: 32px; font-weight: 700; display: flex; justify-content: center; align-items: center; }
.popular-section { border: 3px solid #FF6C1A66; padding: 10px; border-radius: 15px; }
.horizontal-line { margin: 30px 0px; height: 0px; border-top: 0 solid #e6e8ea; position: relative; height: 2px; opacity: 1; background: #e6e8ea; }
.horizontal-lines { margin: 30px 0px 20px 0px; height: 0px; border-top: 0 solid #e6e8ea; position: relative; height: 2px; opacity: 1; background: #e6e8ea; }
.horizontal-lines:before, .horizontal-lines:after, .horizontal-line:before, .horizontal-line:after { width: 35px; height: 2px; background: #ff6c1a; content: ""; position: absolute; left: 0; top: 0; }
.horizontal-lines:after, .horizontal-line:after { width: 6px; background: #fff; left: 35px; }
.responsive-height { height: auto; /* mobile (default) */; }
@media (min-width: 768px) {
  .responsive-height { height: 100%; /* tablet + desktops */; }
}
.toc-subitems { display: none; }
/* End */
/* how-to-build-deploy-spring-boot-application blog Start */
.content-main { border-radius: 15px; background: #2b2f35; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
.content-main:hover { transform: translateY(-3px); }
.content-copy { padding: 10px 15px; border-radius: 15px 15px 0 0; border-bottom: 1px solid #ffddb9; }
.content-body { padding: 15px 15px; }
.content-body p { color: #ffddb9; }
.copy-wrapper { position: relative; display: flex; align-items: center; justify-content: center; font-size: 14px; border-radius: 8px; color: #fff; background: #ff6c1a; padding: 3px 10px; cursor: pointer; }
.copy-wrapper:hover { background-color: #e65a00; }
.content-body pre::-webkit-scrollbar { height: 4px; }
.content-body pre::-webkit-scrollbar-thumb { background-color: #ff6c1a; border-radius: 20px; }
.content-body pre code { color: #ffddb9; }
.copy-main { position: absolute; right: 10px; top: 10px; }
.copy-tooltip { position: absolute; top: -30px; right: 0; background-color: #fff; color: #000; padding: 4px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(5px); transition: opacity 0.3s ease, transform 0.3s ease; z-index: 10; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
.copy-tooltip.show { opacity: 1; transform: translateY(0); }
@media (max-width:991px) {
  .copy-main { position: relative; right: 10px; top: 10px; display: flex; justify-content: end; margin-bottom: 5px; }
}
/* End */
.author-detail-img { width: calc(100% - 70px); & img { width: 100%; }; }
@media (max-width:991px) {
  .author-detail-img { width: auto; & img { width: auto; }; }
}
@media (max-width:700px) {
  .author-detail-img { width: calc(100% - 70px); & img { width: 100% !important; height: auto !important; }; }
}
.banner-new { background-color: #4c596d; align-items: center; justify-content: center; }
/* .banner-image { width: calc(100% - 250px); } */
.blog-banner-header { background-color: #192A44; height: 430px; padding: 20px; }
.blog-banner { height: 100%; }
@media(max-width:1199px) {
  .blog-banner-header { height: auto; }
  .blog-banner { height: auto; }
}
@media(max-width: 991px) {
  .popular-number { text-align: end; margin: 0; }
}
@media(max-width:576px) {
  .blog-header h1 { text-align: center !important; margin: auto !important; }
  .blog-banner-header { display: flex; align-items: center; height: 200px; }
  .blog-banner { display: block; align-items: center !important; margin: auto; }
  .banner-image { display: none; }
}
@media (max-width:991px) {
  .popular-content hr { border-top: 0 solid #e6e8ea; position: relative; height: 2px; opacity: 1; background: #e6e8ea; margin: 70px 0px 10px 0px; }
  .popular-content hr:before, .popular-content hr:after { width: 35px; height: 2px; background: #ff6c1a; content: ""; position: absolute; left: 0; top: 0; }
  .popular-content hr:after { width: 6px; background: #fff; left: 35px; }
}
@media (max-width: 480px) {
  .popular-content hr { margin: 40px 0px 60px 0px; }
}
.recommend { display: flex; border-radius: 24px; border: 1.5px solid #ff6c1a; background: rgba(255, 108, 26, 0.02); padding: 30px 40px; max-width: 830px; margin: 0 auto; flex-direction: row; background: linear-gradient(240deg, #ffe6cf, #fff2e8); }
/* recommend section Start */
.recommend h4 { padding: 10px 0 5px 0 !important; }
.recommend h5 { font-size: 14px !important; padding: 7px !important; border-radius: 24px; font-size: 12px; font-weight: 600; color: #ff7a00; background: linear-gradient(180deg, #ffe6cf); width: fit-content; }
.recommend p { font-size: 16px; padding: 0px; }
@media (max-width: 1199px) {
  .recommend { padding: 20px 24px; }
}
@media (max-width: 767px) {
  .recommend { flex-direction: column; padding: 16px 18px; }
  .recommend p { padding-bottom: 10px; }
}
@media (max-width: 567px) {
  .banner-cta-btns a { padding: 8px 10px; }
}
/* recommend section End */
/* protips section Start */
.protips { display: flex; border-radius: 24px; border: 1.5px solid #2563EB; background: rgba(255, 108, 26, 0.02); padding: 30px 40px; max-width: 830px; margin: 0 auto; flex-direction: row; background: linear-gradient(180deg, #DCE6F6 10%, #FFFFFF 100%); }
.protips span { color: #2563EB !important; }
.protips p { color: #2563EB !important; }
.protips ul li { color: #2563EB !important; }
.protips h4,.protips .h4 { color: #2563EB !important; }
.protips.orange { background: linear-gradient(180deg, #FFE6CF 10%, #FFFFFF 100%); border: 1.5px solid #FF6C1A; }
.protips.orange span { color: #FF6C1A !important; }
.protips.orange p { color: #FF6C1A !important; }
.protips.orange ul li { color: #FF6C1A !important; }
.protips.orange h4, .protips.orange .h4 { color: #FF6C1A !important; }
@media (max-width: 1199px) {
  .protips { padding: 20px 24px; }
}
@media (max-width: 767px) {
  .protips { padding: 16px 18px; }
}
/* protips section End */
/* quote section Start */
.quote-box { background: #f5f5f5; border-left: 4px solid #F97316; padding: 16px 18px; font-style: italic; font-family: "Georgia", "Times New Roman", serif; color: #1F2937; font-size: 20px; max-width: 880px; margin: 10px 0; }
@media (max-width: 1199px) {
  .quote-box { max-width: 100%; font-size: 18px; }
}
@media (max-width: 767px) {
  .quote-box { max-width: 100%; font-size: 16px; }
}
/* quote section End */
/* preferred notes Start */
.preferred-box { padding: 20px 24px!important; margin: 15px 0px!important; background-color: transparent; border-left: 4px solid transparent; transition: background-color 0.4s ease, border-left 0.4s ease, transform 0.3s ease; }
.preferred-box { border-left: 4px solid #FF6C1A; background-color: #f3f7ff; transform: translateY(-2px); }
.preferred-box:hover { transform: translateY(-4px); }
/* preferred notes End */
/* important notes Start */
.important-box { border-left: 4px solid #FF6C1A; padding: 5px 20px; margin: 10px 0; }
@media (max-width: 767px) {
  .important-box { border-left: 3px solid #FF6C1A; padding: 3px 8px; }
}
/* important notes End */
/* Quick Facts Start */
.quick-facts-card { margin: 24px 0 8px; padding: 24px 26px; border: 1px solid rgba(255, 108, 26, 0.18); border-left: 5px solid #FF6C1A; border-radius: 14px; background: linear-gradient(135deg, #fffaf6 0%, #ffffff 58%, #f7fbff 100%); box-shadow: 0 16px 34px rgba(25, 42, 68, 0.08); }
.quick-facts-card h3 { padding: 0 !important; margin: 0 0 18px !important; color: #10153f !important; font-size: 22px !important; line-height: 1.3 !important; font-weight: 800 !important; }
.quick-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.quick-facts p { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 10px; margin: 0 !important; padding: 12px 14px !important; border: 1px solid #edf2f7; border-radius: 10px; background: rgba(255, 255, 255, 0.78); color: #192A44; font-size: 15px !important; line-height: 1.5 !important; box-shadow: 0 8px 18px rgba(25, 42, 68, 0.05); }
.quick-facts p span { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: rgba(255, 108, 26, 0.10); font-size: 18px; line-height: 1; }
.fact-item { display: flex; align-items: center; gap: 10px; }
.fact-item span { font-size: 18px; }
@media (max-width: 991px) {
  .quick-facts { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .quick-facts-card { padding: 18px 16px; border-radius: 12px; }
  .quick-facts-card h3 { font-size: 19px !important; }
  .fact-item span { font-size: 17px; }
}
@media (max-width: 480px) {
  .quick-facts p { grid-template-columns: 30px minmax(0, 1fr); padding: 10px 11px !important; font-size: 14px !important; }
  .quick-facts p span { width: 30px; height: 30px; font-size: 16px; }
  .fact-item span { font-size: 16px; }
}
/* Quick Facts End */
/* Cost Checklist UI Start */
.cost-feature-list { display: flex; flex-wrap: wrap; gap: 10px 12px; list-style: none !important; padding: 0 !important; margin: 12px 0 24px 0 !important; }
.cost-feature-list li { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: rgba(255, 108, 26, 0.08) !important; border: 1px solid rgba(255, 108, 26, 0.25) !important; color: #192A44 !important; font-size: 15px !important; font-weight: 500 !important; padding: 6px 14px !important; border-radius: 30px !important; line-height: 1.4 !important; }
.cost-feature-list li svg { flex-shrink: 0; }
@media (max-width: 767px) {
  .cost-feature-list { gap: 8px 10px; margin: 10px 0 20px 0 !important; }
  .cost-feature-list li { font-size: 14px !important; padding: 5px 12px !important; }
}
/* Cost Checklist UI End */
/* Interactive Feature Explorer Styling */
.ai-feature-explorer { background: #FFFFFF; border: 1px solid #E2E8F0 !important; }
.ai-fe-header { background: #172640 !important; }
.btn-fe-pill { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #E2E8F0; font-size: 12px; font-weight: 600; white-space: nowrap; border-radius: 20px; transition: all 0.2s ease; }
.btn-fe-pill:hover, .btn-fe-pill.active { background: #FF6C1A; border-color: #FF6C1A; color: #FFFFFF; box-shadow: 0 4px 12px rgba(255, 108, 26, 0.3); }
.ai-fe-item { background: #FFFFFF; border: 1px solid #CBD5E1; border-radius: 8px; margin-bottom: 8px; overflow: hidden; transition: all 0.25s ease; }
.ai-fe-item:last-child { margin-bottom: 0; }
.ai-fe-item.active { border-color: #FF6C1A; box-shadow: 0 3px 12px rgba(255, 108, 26, 0.12); }
.ai-fe-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #FFFFFF; border: none; cursor: pointer; font-size: 14.5px; font-weight: 600; color: #0F172A; line-height: 1.4; position: relative; z-index: 2; transition: background 0.2s ease, color 0.2s ease; text-align: left; }
.ai-fe-trigger:hover { background: #F8FAFC; }
.ai-fe-item.active .ai-fe-trigger { background: #FFF7ED; color: #C2410C; border-bottom: 1px solid #FFEDD5; }
.ai-fe-icon { font-size: 15px; }
.ai-fe-chevron { font-size: 11px; color: #94A3B8; transition: transform 0.3s ease; }
.ai-fe-item.active .ai-fe-chevron { transform: rotate(180deg); color: #FF6C1A; }
.ai-fe-content { display: none; padding: 12px 16px 16px 16px; background: #FFFFFF; position: relative; z-index: 1; }
.ai-fe-item.active .ai-fe-content { display: block; animation: fadeInSlide 0.3s ease-out forwards; }
@keyframes fadeInSlide {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.ai-fe-box { padding: 12px 14px; border-radius: 8px; height: 100%; }
.chatbot-box { background: #F1F5F9; border: 1px solid #CBD5E1; }
.agent-box { background: linear-gradient(135deg, rgba(255, 108, 26, 0.08) 0%, rgba(255, 108, 26, 0.02) 100%); border: 1.5px solid #FF6C1A; }
.ai-fe-box-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
/* Responsive Typography Matching Multimodal AI Agents standard */
.ai-fe-text { font-size: 13.5px; color: #334155; margin-bottom: 0; line-height: 1.5; }
.ai-fe-box-header strong { font-size: 14px; font-weight: 700; }
.ai-fe-title { font-size: 18px; font-weight: 600; color: #192A44; }
/* Core Concepts Explorer Styling */
.ai-concepts-container { font-family: inherit; }
.btn-concept-pill { background: #FFFFFF; color: #475569; border: 1px solid #CBD5E1; font-weight: 600; font-size: 15px; padding: 9px 18px; border-radius: 8px; transition: all 0.25s ease; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.btn-concept-pill .pill-num { background: #E2E8F0; color: #334155; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 4px; transition: all 0.25s ease; }
.btn-concept-pill:hover { border-color: #FF6C1A; color: #FF6C1A; }
.btn-concept-pill.active { background: #172640 !important; color: #FFFFFF !important; border-color: #172640 !important; box-shadow: 0 4px 12px rgba(23, 38, 64, 0.2); }
.btn-concept-pill.active .pill-num { background: #FF6C1A !important; color: #FFFFFF !important; }
.concept-card { display: none; background: #FFFDFB; position: relative; border: 1.5px solid #FF6C1A !important; box-shadow: 0 10px 25px rgba(255, 108, 26, 0.12); }
.concept-card.active-card { display: block; animation: conceptFadeIn 0.35s ease-out forwards; }
@keyframes conceptFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.concept-card h3 { color: #192A44; font-size: 22px; font-weight: 700; margin-bottom: 0; line-height: normal; }
.concept-card p { color: #192A44; font-size: 18px; font-weight: 400; line-height: 1.6; }
.concept-card .concept-icon { font-size: 26px; }
.concept-quote-box { background: #FFF7ED; border-left: 4px solid #FF6C1A; color: #1F2937; font-size: 18px; line-height: 1.6; }
.concept-quote-box .italic { font-style: italic; font-weight: 500; }
/* Multimodal Responsive Breakpoints */
@media (max-width: 991px) {
  .concept-card h3 { font-size: 20px; }
  .concept-card p { font-size: 17px; }
  .ai-fe-text { font-size: 15px; }
}
@media (max-width: 767px) {
  .concept-pills-bar { overflow-x: auto; white-space: nowrap; padding: 6px !important; gap: 6px !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .concept-pills-bar::-webkit-scrollbar { display: none; }
  .btn-concept-pill { font-size: 13px; padding: 7px 12px; white-space: nowrap; flex: 1 1 auto; justify-content: center; gap: 6px; }
  .btn-concept-pill .pill-num { font-size: 10.5px; padding: 2px 5px; }
  .concept-card h3 { font-size: 18px; }
  .concept-card p { font-size: 17px; line-height: 1.5; }
  .concept-quote-box { font-size: 16px; padding: 12px 14px !important; }
  .concept-card .concept-icon { font-size: 22px; }
  .ai-fe-title { font-size: 15px; }
}
@media (max-width: 480px) {
  .btn-concept-pill { font-size: 12px; padding: 6px 10px; }
  .btn-concept-pill .pill-num { font-size: 10px; }
  .concept-card h3 { font-size: 18px; }
  .concept-card p { font-size: 16px; }
  .concept-quote-box { font-size: 15px; }
  .ai-fe-text { font-size: 14px; }
}
/* Horizontal Process Infographic Component Styling */
.ai-process-infographic { font-family: inherit; }
.process-stepper-wrapper { background: #F8FAFC; padding: 24px 36px !important; }
.process-track-line { position: absolute; top: 43px; left: 55px; right: 55px; height: 3px; background: #E2E8F0; z-index: 1; border-radius: 2px; transform: translateY(-50%); }
.process-progress-bar { height: 100%; background: #FF6C1A; border-radius: 2px; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.process-nodes-container { z-index: 2; }
.process-node { background: transparent; border: none; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: default; pointer-events: none; padding: 0; transition: all 0.25s ease; user-select: none; }
.process-node .node-circle { width: 38px; height: 38px; border-radius: 50%; background: #FFFFFF; border: 2px solid #CBD5E1; color: #475569; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); }
.process-node .node-label { font-size: 12px; font-weight: 600; color: #64748B; white-space: nowrap; transition: color 0.25s ease; }
.process-node:hover .node-circle { border-color: #FF6C1A; color: #FF6C1A; }
.process-node.completed .node-circle { border-color: #FF6C1A; color: #FF6C1A; }
.process-node.active .node-circle { background: #FF6C1A !important; border-color: #FF6C1A !important; color: #FFFFFF !important; box-shadow: 0 4px 12px rgba(255, 108, 26, 0.4); transform: scale(1.12); }
.process-node.active .node-label { color: #FF6C1A !important; font-weight: 700; }
/* Step Pane Detail Display */
.process-step-pane { display: none; }
.process-step-pane.active { display: block; animation: stepFadeIn 0.35s ease-out forwards; }
@keyframes stepFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.step-num-badge { background: #172640; color: #FF6C1A; font-weight: 700; font-size: 11px; padding: 4px 10px; border-radius: 6px; letter-spacing: 0.5px; }
.step-header-icon { font-size: 24px; }
.step-desc { color: #192A44; font-size: 16px; line-height: 1.6; margin-bottom: 0; }
.step-example-box { background: #FFF7ED; border-left: 4px solid #FF6C1A; color: #1F2937; font-size: 14.5px; line-height: 1.5; }
.process-grid-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.process-grid-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); }
/* Responsive Process Stepper */
@media (max-width: 991px) {
  .process-node .node-label { font-size: 11px; }
  .process-node .node-circle { width: 34px; height: 34px; font-size: 12px; }
  .process-track-line { top: 29px; }
}
@media (max-width: 767px) {
  .process-track-line { display: none; }
  .process-stepper-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 12px !important; }
  .process-stepper-wrapper::-webkit-scrollbar { display: none; }
  .process-nodes-container { gap: 12px; justify-content: flex-start !important; }
  .process-node { flex-direction: row; background: #FFFFFF; border: 1px solid #CBD5E1; padding: 6px 12px; border-radius: 20px; gap: 8px; }
  .process-node .node-circle { width: 24px; height: 24px; font-size: 10px; border-width: 1px; box-shadow: none; }
  .process-node.active { background: #172640; border-color: #172640; }
  .process-node.active .node-label { color: #FFFFFF !important; }
  .process-node.active .node-circle { transform: scale(1); }
  .step-desc { font-size: 15px; }
}
/* Process Header View Switch Buttons Hover & Active States */
.process-header .btn-outline-light, #processViewTimeline, #processViewGrid { color: #FFFFFF !important; border-color: rgba(255, 255, 255, 0.35) !important; background-color: transparent !important; transition: all 0.25s ease !important; }
.process-header .btn-outline-light:hover, .process-header .btn-outline-light:focus, #processViewTimeline:hover, #processViewGrid:hover { color: #FFFFFF !important; background-color: #FF6C1A !important; border-color: #FF6C1A !important; box-shadow: 0 4px 12px rgba(255, 108, 26, 0.35) !important; }
.process-header .btn-outline-light.active, #processViewTimeline.active, #processViewGrid.active { color: #FFFFFF !important; background-color: #FF6C1A !important; border-color: #FF6C1A !important; box-shadow: 0 4px 12px rgba(255, 108, 26, 0.4) !important; }
/* Grid View Layout: Above 1400px -> 3 3 2, Below 1400px -> 2 2 2 2 */
@media (min-width: 1401px) {
  #processGridView .row > [class*="col-"] { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; width: 33.333333% !important; }
}
@media (max-width: 1400px) {
  #processGridView .row > [class*="col-"] { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; }
}
@media (max-width: 576px) {
  #processGridView .row > [class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
}
/* Process Infographic Navigation Controls (Prev / Next Buttons) */
#btnPrevStep { background-color: #FFFFFF !important; color: #172640 !important; border: 1px solid #CBD5E1 !important; font-weight: 600 !important; font-size: 13px !important; padding: 7px 18px !important; border-radius: 6px !important; transition: all 0.25s ease !important; }
#btnPrevStep:hover:not(:disabled), #btnPrevStep:focus:not(:disabled) { background-color: #172640 !important; color: #FFFFFF !important; border-color: #172640 !important; box-shadow: 0 4px 12px rgba(23, 38, 64, 0.2) !important; }
#btnPrevStep:disabled { background-color: #F8FAFC !important; color: #94A3B8 !important; border-color: #E2E8F0 !important; opacity: 0.65 !important; cursor: not-allowed !important; box-shadow: none !important; }
#btnNextStep { background-color: #FF6C1A !important; color: #FFFFFF !important; border: 1px solid #FF6C1A !important; font-weight: 600 !important; font-size: 13px !important; padding: 7px 20px !important; border-radius: 6px !important; transition: all 0.25s ease !important; box-shadow: 0 2px 6px rgba(255, 108, 26, 0.25) !important; }
#btnNextStep:hover:not(:disabled), #btnNextStep:focus:not(:disabled) { background-color: #E05508 !important; color: #FFFFFF !important; border-color: #E05508 !important; box-shadow: 0 4px 14px rgba(255, 108, 26, 0.4) !important; }
#btnNextStep:disabled { background-color: #FFC09F !important; color: #FFFFFF !important; border-color: #FFC09F !important; opacity: 0.7 !important; cursor: not-allowed !important; box-shadow: none !important; }
/* Interactive AI Agent Architecture Diagram Styling */
.ai-arch-infographic { border-color: #E2E8F0 !important; }
.arch-node-card { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; transition: all 0.25s ease !important; cursor: pointer !important; display: flex; flex-direction: column; justify-content: space-between; }
.arch-node-card:hover { border-color: #FF6C1A !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 108, 26, 0.15) !important; }
.arch-node-card.active { background: #172640 !important; border-color: #172640 !important; box-shadow: 0 4px 14px rgba(23, 38, 64, 0.3) !important; }
.arch-node-card .arch-node-title { font-size: 13px; font-weight: 700; color: #1E293B; margin-bottom: 2px; transition: color 0.25s ease; }
.arch-node-card .arch-node-sub { font-size: 11px; color: #64748B; transition: color 0.25s ease; }
.arch-node-card.active .arch-node-title, .arch-node-card.active .arch-node-sub { color: #FFFFFF !important; }
.arch-step-badge { font-size: 9px; font-weight: 700; background: #F1F5F9; color: #475569; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.5px; transition: all 0.25s ease; }
.arch-node-card.active .arch-step-badge { background: #FF6C1A !important; color: #FFFFFF !important; }
.arch-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #CBD5E1; transition: all 0.25s ease; }
.arch-node-card.active .arch-status-dot { background: #FF6C1A; box-shadow: 0 0 8px #FF6C1A; }
.arch-layer-pane { display: none; }
.arch-layer-pane.active { display: block; animation: fadeInPane 0.3s ease-in-out; }
/* Architecture Nav Buttons */
#btnArchPrev { background-color: #FFFFFF !important; color: #172640 !important; border: 1px solid #CBD5E1 !important; font-weight: 600 !important; font-size: 13px !important; padding: 7px 18px !important; border-radius: 6px !important; transition: all 0.25s ease !important; }
#btnArchPrev:hover:not(:disabled), #btnArchPrev:focus:not(:disabled) { background-color: #172640 !important; color: #FFFFFF !important; border-color: #172640 !important; box-shadow: 0 4px 12px rgba(23, 38, 64, 0.2) !important; }
#btnArchPrev:disabled { background-color: #F8FAFC !important; color: #94A3B8 !important; border-color: #E2E8F0 !important; opacity: 0.65 !important; cursor: not-allowed !important; box-shadow: none !important; }
#btnArchNext { background-color: #FF6C1A !important; color: #FFFFFF !important; border: 1px solid #FF6C1A !important; font-weight: 600 !important; font-size: 13px !important; padding: 7px 20px !important; border-radius: 6px !important; transition: all 0.25s ease !important; box-shadow: 0 2px 6px rgba(255, 108, 26, 0.25) !important; }
#btnArchNext:hover:not(:disabled), #btnArchNext:focus:not(:disabled) { background-color: #E05508 !important; color: #FFFFFF !important; border-color: #E05508 !important; box-shadow: 0 4px 14px rgba(255, 108, 26, 0.4) !important; }
#btnArchNext:disabled { background-color: #FFC09F !important; color: #FFFFFF !important; border-color: #FFC09F !important; opacity: 0.7 !important; cursor: not-allowed !important; box-shadow: none !important; }
/* Distinct Interactive Architecture Diagram Styling (#item-6) */
.arch-blueprint-card { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); overflow: hidden; }
.arch-header-banner { background: linear-gradient(135deg, #172640 0%, #0F172A 100%); padding: 20px 24px; border-bottom: 3px solid #FF6C1A; }
.arch-tabs-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 16px; background: #F8FAFC; border-bottom: 1px solid #E2E8F0; }
@media (max-width: 1200px) {
  .arch-tabs-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 576px) {
  .arch-tabs-grid { grid-template-columns: repeat(2, 1fr); }
}
.arch-tab-btn { background: #FFFFFF; border: 1px solid #E2E8F0 !important; border-radius: 8px !important; padding: 12px 10px !important; text-align: left; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; cursor: pointer !important; position: relative; }
.arch-tab-btn:hover { border-color: #FF6C1A !important; background: #FFF9F5 !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 108, 26, 0.12) !important; }
.arch-tab-btn.active { background: #172640 !important; border-color: #172640 !important; box-shadow: 0 4px 14px rgba(23, 38, 64, 0.25) !important; }
.arch-layer-pill { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #FF6C1A; background: rgba(255, 108, 26, 0.1); padding: 2px 6px; border-radius: 4px; display: inline-block; margin-bottom: 6px; transition: all 0.25s ease; }
.arch-tab-btn.active .arch-layer-pill { background: #FF6C1A !important; color: #FFFFFF !important; }
.arch-tab-title { font-size: 13px; font-weight: 700; color: #1E293B; margin: 0; line-height: 1.2; transition: color 0.25s ease; }
.arch-tab-btn.active .arch-tab-title { color: #FFFFFF !important; }
.arch-display-pane { padding: 28px 24px; display: none; animation: archFadeIn 0.3s ease-in-out; }
.arch-display-pane.active { display: block; }
@keyframes archFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.arch-layer-tag { font-size: 11px; font-weight: 700; background: #172640; color: #FFFFFF; padding: 4px 10px; border-radius: 6px; letter-spacing: 0.5px; }
.arch-nav-bar { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; margin-top: 24px; border-top: 1px solid #E2E8F0; }
#btnArchPrevDistinct { background: #FFFFFF !important; color: #172640 !important; border: 1px solid #CBD5E1 !important; font-weight: 600 !important; font-size: 13px !important; padding: 8px 18px !important; border-radius: 6px !important; transition: all 0.25s ease !important; }
#btnArchPrevDistinct:hover:not(:disabled) { background: #172640 !important; color: #FFFFFF !important; border-color: #172640 !important; }
#btnArchPrevDistinct:disabled { background: #F8FAFC !important; color: #94A3B8 !important; border-color: #E2E8F0 !important; opacity: 0.6 !important; cursor: not-allowed !important; }
#btnArchNextDistinct { background: #FF6C1A !important; color: #FFFFFF !important; border: 1px solid #FF6C1A !important; font-weight: 600 !important; font-size: 13px !important; padding: 8px 20px !important; border-radius: 6px !important; transition: all 0.25s ease !important; box-shadow: 0 2px 8px rgba(255, 108, 26, 0.25) !important; }
#btnArchNextDistinct:hover:not(:disabled) { background: #E05508 !important; border-color: #E05508 !important; box-shadow: 0 4px 14px rgba(255, 108, 26, 0.4) !important; }
#btnArchNextDistinct:disabled { background: #FFC09F !important; border-color: #FFC09F !important; opacity: 0.7 !important; cursor: not-allowed !important; }
/* Interactive Architecture Matrix Component Styling (#item-6) */
.arch-matrix-card { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; border-left: 4px solid #CBD5E1 !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; cursor: pointer !important; }
.arch-matrix-card:hover { border-left-color: #FF6C1A !important; transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06) !important; }
.arch-matrix-card.active { background: #FFF9F5 !important; border-color: #FF6C1A !important; border-left: 4px solid #FF6C1A !important; box-shadow: 0 6px 20px rgba(255, 108, 26, 0.15) !important; }
.arch-badge { font-size: 10px; font-weight: 700; color: #475569; background: #F1F5F9; padding: 3px 8px; border-radius: 4px; letter-spacing: 0.5px; transition: all 0.25s ease; }
.arch-matrix-card.active .arch-badge { background: #FF6C1A !important; color: #FFFFFF !important; }
.arch-pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #CBD5E1; transition: all 0.25s ease; }
.arch-matrix-card.active .arch-pulse-dot { background: #FF6C1A; box-shadow: 0 0 8px #FF6C1A; }
.arch-spotlight-pane { display: none; }
.arch-spotlight-pane.active { display: block; animation: matrixFade 0.3s ease-in-out; }
@keyframes matrixFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
#btnMatrixPrev { background-color: #FFFFFF !important; color: #172640 !important; border: 1px solid #CBD5E1 !important; font-weight: 600 !important; font-size: 13px !important; padding: 7px 18px !important; border-radius: 6px !important; transition: all 0.25s ease !important; }
#btnMatrixPrev:hover:not(:disabled), #btnMatrixPrev:focus:not(:disabled) { background-color: #172640 !important; color: #FFFFFF !important; border-color: #172640 !important; box-shadow: 0 4px 12px rgba(23, 38, 64, 0.2) !important; }
#btnMatrixPrev:disabled { background-color: #F8FAFC !important; color: #94A3B8 !important; border-color: #E2E8F0 !important; opacity: 0.65 !important; cursor: not-allowed !important; box-shadow: none !important; }
#btnMatrixNext { background-color: #FF6C1A !important; color: #FFFFFF !important; border: 1px solid #FF6C1A !important; font-weight: 600 !important; font-size: 13px !important; padding: 7px 20px !important; border-radius: 6px !important; transition: all 0.25s ease !important; box-shadow: 0 2px 6px rgba(255, 108, 26, 0.25) !important; }
#btnMatrixNext:hover:not(:disabled), #btnMatrixNext:focus:not(:disabled) { background-color: #E05508 !important; color: #FFFFFF !important; border-color: #E05508 !important; box-shadow: 0 4px 14px rgba(255, 108, 26, 0.4) !important; }
#btnMatrixNext:disabled { background-color: #FFC09F !important; color: #FFFFFF !important; border-color: #FFC09F !important; opacity: 0.7 !important; cursor: not-allowed !important; box-shadow: none !important; }
/* Split-Pane Navigation Architecture Component Styling (#item-6) */
.arch-split-container { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); overflow: hidden; }
.arch-split-nav-item { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; border-radius: 8px !important; padding: 14px 16px !important; text-align: left; transition: all 0.25s ease !important; cursor: pointer !important; width: 100%; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; }
.arch-split-nav-item:last-child { margin-bottom: 0; }
.arch-split-nav-item:hover { border-color: #FF6C1A !important; background: #FFF9F5 !important; transform: translateX(4px); }
.arch-split-nav-item.active { background: #172640 !important; border-color: #172640 !important; box-shadow: 0 4px 14px rgba(23, 38, 64, 0.2) !important; }
.arch-split-num { font-size: 11px; font-weight: 700; color: #FF6C1A; background: rgba(255, 108, 26, 0.1); padding: 3px 8px; border-radius: 4px; letter-spacing: 0.5px; transition: all 0.25s ease; }
.arch-split-nav-item.active .arch-split-num { background: #FF6C1A !important; color: #FFFFFF !important; }
.arch-split-title { font-size: 14px; font-weight: 700; color: #1E293B; margin: 0; transition: color 0.25s ease; }
.arch-split-nav-item.active .arch-split-title { color: #FFFFFF !important; }
.arch-split-arrow { font-size: 14px; color: #94A3B8; transition: all 0.25s ease; }
.arch-split-nav-item:hover .arch-split-arrow { color: #FF6C1A; transform: translateX(3px); }
.arch-split-nav-item.active .arch-split-arrow { color: #FF6C1A !important; transform: translateX(3px); }
.arch-split-feature-card { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 10px; padding: 28px 24px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.arch-split-pane { display: none; }
.arch-split-pane.active { display: block; animation: splitFadeIn 0.3s ease-in-out; }
@keyframes splitFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
#btnSplitPrev { background-color: #FFFFFF !important; color: #172640 !important; border: 1px solid #CBD5E1 !important; font-weight: 600 !important; font-size: 13px !important; padding: 7px 18px !important; border-radius: 6px !important; transition: all 0.25s ease !important; }
#btnSplitPrev:hover:not(:disabled) { background-color: #172640 !important; color: #FFFFFF !important; border-color: #172640 !important; }
#btnSplitPrev:disabled { background-color: #F8FAFC !important; color: #94A3B8 !important; border-color: #E2E8F0 !important; opacity: 0.65 !important; cursor: not-allowed !important; }
#btnSplitNext { background-color: #FF6C1A !important; color: #FFFFFF !important; border: 1px solid #FF6C1A !important; font-weight: 600 !important; font-size: 13px !important; padding: 7px 20px !important; border-radius: 6px !important; transition: all 0.25s ease !important; box-shadow: 0 2px 6px rgba(255, 108, 26, 0.25) !important; }
#btnSplitNext:hover:not(:disabled) { background-color: #E05508 !important; border-color: #E05508 !important; box-shadow: 0 4px 14px rgba(255, 108, 26, 0.4) !important; }
#btnSplitNext:disabled { background-color: #FFC09F !important; border-color: #FFC09F !important; opacity: 0.7 !important; cursor: not-allowed !important; }
/* Updated Split Navigation Architecture Styling (#item-6) */
.arch-split-container { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 12px; box-shadow: 0 4px 20px rgba(23, 38, 64, 0.08); overflow: hidden; }
.arch-split-header { background: linear-gradient(135deg, #FFF7F1 0%, #F7FAFF 100%) !important; border-bottom: 3px solid #FF6C1A !important; }
.arch-split-header h3 { color: #11173B !important; }
.arch-split-nav-item { background: #F8FAFC !important; border: 1px solid #CBD5E1 !important; border-radius: 8px !important; padding: 14px 16px !important; text-align: left; transition: all 0.25s ease !important; cursor: pointer !important; width: 100%; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.arch-split-nav-item:last-child { margin-bottom: 0; }
.arch-split-nav-item:hover { background: #FF6C1A !important; border-color: #FF6C1A !important; transform: translateX(4px); box-shadow: 0 4px 12px rgba(255, 108, 26, 0.25) !important; }
.arch-split-nav-item:hover .arch-split-num { background: #FFFFFF !important; color: #FF6C1A !important; }
.arch-split-nav-item:hover .arch-split-title { color: #FFFFFF !important; }
.arch-split-nav-item:hover .arch-split-arrow { color: #FFFFFF !important; transform: translateX(3px); }
.arch-split-nav-item.active { background: #FF6C1A !important; border-color: #FF6C1A !important; box-shadow: 0 4px 14px rgba(255, 108, 26, 0.3) !important; }
.arch-split-num { font-size: 11px; font-weight: 800; color: #FF6C1A; background: rgba(255, 108, 26, 0.12); padding: 3px 8px; border-radius: 4px; letter-spacing: 0.5px; transition: all 0.25s ease; }
.arch-split-nav-item.active .arch-split-num { background: #FFFFFF !important; color: #FF6C1A !important; }
.arch-split-title { font-size: 14px; font-weight: 700; color: #172640; margin: 0; transition: color 0.25s ease; }
.arch-split-nav-item.active .arch-split-title { color: #FFFFFF !important; }
.arch-split-arrow { font-size: 14px; color: #64748B; font-weight: 700; transition: all 0.25s ease; }
.arch-split-nav-item.active .arch-split-arrow { color: #FFFFFF !important; transform: translateX(3px); }
.arch-split-feature-card { background: #FFF9F5; border: 1px solid #FFE4D6; border-left: 4px solid #FF6C1A; border-radius: 10px; padding: 20px 24px !important; height: auto !important; min-height: auto !important; }
.arch-split-pane .step-desc { margin-bottom: 0 !important; }
/* Mobile Accordion View Styling (< 992px) */
.arch-mobile-acc-item { margin-bottom: 10px; }
.arch-mobile-acc-item:last-child { margin-bottom: 0; }
.arch-mobile-acc-btn { background: #F8FAFC !important; border: 1px solid #CBD5E1 !important; border-radius: 8px !important; padding: 14px 16px !important; text-align: left; transition: all 0.25s ease !important; cursor: pointer !important; width: 100%; display: flex; align-items: center; justify-content: space-between; }
.arch-mobile-acc-btn.active { background: #FF6C1A !important; border-color: #FF6C1A !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.arch-mobile-acc-btn.active .arch-split-num { background: #FFFFFF !important; color: #FF6C1A !important; }
.arch-mobile-acc-btn.active .arch-split-title { color: #FFFFFF !important; }
.arch-mobile-acc-icon { font-size: 12px; color: #64748B; transition: transform 0.25s ease, color 0.25s ease; }
.arch-mobile-acc-btn.active .arch-mobile-acc-icon { color: #FFFFFF !important; transform: rotate(180deg); }
.arch-mobile-acc-body { display: none; background: #FFF9F5; border: 1px solid #FFE4D6; border-top: none; border-left: 4px solid #FF6C1A; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; padding: 18px 20px; }
.arch-mobile-acc-body.active { display: block; animation: splitFadeIn 0.25s ease-in-out; }
/* Compact Single-Line Process Stepper Navigation (< 576px) */
@media (max-width: 576px) {
  .process-stepper-container .border-top { padding-top: 12px !important; }
  #btnPrevStep, #btnNextStep { white-space: nowrap !important; padding: 5px 10px !important; font-size: 12px !important; line-height: 1.2 !important; border-radius: 6px !important; }
  #stepCounterText { font-size: 12px !important; white-space: nowrap !important; }
}
/* ========================================================================== INTERACTIVE CIRCLE INFOGRAPHIC COMPONENT (#item-7) ========================================================================== */
.agent-circle-container { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 16px; box-shadow: 0 10px 30px rgba(23, 38, 64, 0.05); overflow: hidden; }
/* Circular Nodes Selection Ring */
.agent-circle-nodes-wrap { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; position: relative; padding: 10px 0; }
.agent-circle-node { background: #F8FAFC; border: 2px solid #CBD5E1; border-radius: 50%; width: 80px; height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; padding: 0; color: #172640; text-decoration: none; }
.agent-circle-node .node-num { font-size: 16px; font-weight: 800; line-height: 1; color: #172640; transition: color 0.25s ease; }
.agent-circle-node .node-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: #64748B; margin-top: 3px; text-align: center; max-width: 65px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.25s ease; }
.agent-circle-node:hover { border-color: #FF6C1A; background: #FFF9F5; transform: translateY(-4px) scale(1.06); box-shadow: 0 8px 20px rgba(255, 108, 26, 0.18); }
.agent-circle-node:hover .node-num { color: #FF6C1A; }
.agent-circle-node.active { background: #FF6C1A !important; border-color: #FF6C1A !important; border-width: 3px !important; transform: scale(1.12); box-shadow: 0 10px 25px rgba(255, 108, 26, 0.25); }
.agent-circle-node.active .node-num { color: #FFFFFF !important; }
.agent-circle-node.active .node-label { color: #FFFFFF !important; }
/* Detail Display Spotlight Card */
.agent-circle-detail-card { background: #FFF9F5; border: 1px solid #FFE4D6; border-left: 5px solid #FF6C1A; border-radius: 12px; padding: 24px 28px; min-height: 200px; display: flex; flex-direction: column; justify-content: center; transition: all 0.3s ease; }
.agent-circle-pane { display: none; animation: splitFadeIn 0.3s ease-in-out; }
.agent-circle-pane.active { display: block; }
.agent-good-for-box { background: #FFFFFF; border: 1px solid #FFD0B5; border-radius: 8px; padding: 14px 18px; margin-top: 14px; }
@media (max-width: 767px) {
  .agent-circle-nodes-wrap { gap: 10px; }
  .agent-circle-node { width: 64px; height: 64px; }
  .agent-circle-node .node-num { font-size: 14px; }
  .agent-circle-node .node-label { font-size: 8px; max-width: 52px; }
  .agent-circle-detail-card { padding: 18px 20px; }
}
/* ========================================================================== TRUE CIRCULAR ORBIT INFOGRAPHIC COMPONENT (#item-7) ========================================================================== */
.agent-orbit-wrapper { background: linear-gradient(135deg, #FFF7F1 0%, #F8FAFC 100%); border: 1px solid #E2E8F0; border-radius: 20px; box-shadow: 0 10px 30px rgba(25, 42, 68, 0.05); overflow: hidden; }
/* Circular Orbit Radar Stage */
.agent-orbit-stage { position: relative; width: 320px; height: 320px; margin: 20px auto; }
/* Dotted Orbit Ring Line */
.agent-orbit-ring-line { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 250px; height: 250px; border: 2px dashed rgba(255, 108, 26, 0.4); border-radius: 50%; pointer-events: none; animation: orbitSpin 60s linear infinite; }
@keyframes orbitSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Center Core Pulse Hub */
.agent-orbit-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle, #FF6C1A 0%, #E05508 100%); box-shadow: 0 0 25px rgba(255, 108, 26, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #FFFFFF; text-align: center; z-index: 5; transition: all 0.3s ease; }
.agent-orbit-core .core-badge { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; opacity: 0.9; }
.agent-orbit-core .core-title { font-size: 16px; font-weight: 800; line-height: 1; margin-top: 2px; }
/* Satellite Orbit Nodes (Positioned on the 250px circle) */
.orbit-node { position: absolute; width: 68px; height: 68px; border-radius: 50%; background: #FFFFFF; border: 2px solid #CBD5E1; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 10; color: #192A44; box-shadow: 0 4px 12px rgba(25, 42, 68, 0.08); }
.orbit-node .node-num { font-size: 14px; font-weight: 800; line-height: 1; color: #FF6C1A; }
.orbit-node .node-text { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: #64748B; margin-top: 2px; white-space: nowrap; }
/* Precise Positions on 320x320 Canvas */
.orbit-node.n1 { top: 10px; left: 50%; transform: translateX(-50%); }
.orbit-node.n2 { top: 60px; right: 15px; }
.orbit-node.n3 { bottom: 60px; right: 15px; }
.orbit-node.n4 { bottom: 10px; left: 50%; transform: translateX(-50%); }
.orbit-node.n5 { bottom: 60px; left: 15px; }
.orbit-node.n6 { top: 60px; left: 15px; }
/* Hover & Active States */
.orbit-node:hover { background: #FFF7ED; border-color: #FF6C1A; transform: scale(1.12); }
.orbit-node.n1:hover { transform: translateX(-50%) scale(1.12); }
.orbit-node.n4:hover { transform: translateX(-50%) scale(1.12); }
.orbit-node.active { background: #FF6C1A !important; border-color: #FFFFFF !important; box-shadow: 0 0 25px rgba(255, 108, 26, 0.6), 0 0 0 4px rgba(255, 108, 26, 0.2) !important; transform: scale(1.2) !important; }
.orbit-node.n1.active { transform: translateX(-50%) scale(1.2) !important; }
.orbit-node.n4.active { transform: translateX(-50%) scale(1.2) !important; }
.orbit-node.active .node-num, .orbit-node.active .node-text { color: #FFFFFF !important; }
/* Right Side Detail Light Card */
.agent-orbit-detail-box { background: #FFF9F5; border: 1px solid #FFE4D6; border-left: 5px solid #FF6C1A; border-radius: 16px; padding: 28px 32px; min-height: 240px; display: flex; flex-direction: column; justify-content: center; }
.orbit-pane { display: none; animation: orbitFade 0.35s ease-out; }
.orbit-pane.active { display: block; }
@keyframes orbitFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.orbit-usecase-box { background: #FFFFFF; border: 1px solid #FFD0B5; border-radius: 10px; padding: 14px 18px; margin-top: 16px; }
.agent-orbit-detail-box h3, .agent-orbit-detail-box .text-white { color: #11173B !important; }
.agent-orbit-detail-box p, .agent-orbit-detail-box .text-white-50 { color: #334155 !important; }
.agent-orbit-detail-box .orbit-usecase-heading, .agent-orbit-detail-box .text-warning { color: #FF6C1A !important; }
/* Responsive adjust for mobile */
@media (max-width: 576px) {
  .agent-orbit-stage { width: 270px; height: 270px; }
  .agent-orbit-ring-line { width: 210px; height: 210px; }
  .agent-orbit-core { width: 85px; height: 85px; }
  .orbit-node { width: 56px; height: 56px; }
  .orbit-node .node-num { font-size: 12px; }
  .orbit-node .node-text { font-size: 8px; }
  .orbit-node.n2 { top: 50px; right: 5px; }
  .orbit-node.n3 { bottom: 50px; right: 5px; }
  .orbit-node.n5 { bottom: 50px; left: 5px; }
  .orbit-node.n6 { top: 50px; left: 5px; }
  .agent-orbit-detail-box { padding: 20px; }
}
/* ========================================================================== Interactive Industry Illustration Infographic Component (#item-10) ========================================================================== */
.industry-infographic-wrapper { background: linear-gradient(135deg, #FFF7F1 0%, #F8FAFC 100%); border: 1px solid #E2E8F0; border-radius: 20px; box-shadow: 0 10px 30px rgba(25, 42, 68, 0.05); position: relative; overflow: hidden; }
.industry-infographic-wrapper::before { content: ''; position: absolute; top: -50px; right: -50px; width: 250px; height: 250px; background: radial-gradient(circle, rgba(255, 108, 26, 0.15) 0%, rgba(255, 108, 26, 0) 70%); pointer-events: none; }
.industry-infographic-wrapper h3, .industry-infographic-wrapper .text-white { color: #11173B !important; }
.industry-infographic-wrapper p, .industry-infographic-wrapper .text-white-50, .industry-infographic-wrapper .text-slate-300 { color: #334155 !important; }
/* Horizontal Industry Selector Bar */
.industry-nav-bar { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: #FF6C1A rgba(0, 0, 0, 0.05); }
.industry-nav-bar::-webkit-scrollbar { height: 4px; }
.industry-nav-bar::-webkit-scrollbar-thumb { background: #FF6C1A; border-radius: 4px; }
.industry-nav-btn { display: inline-flex; align-items: center; gap: 8px; background: #FFFFFF; border: 1px solid #CBD5E1; color: #475569; padding: 8px 16px; border-radius: 30px; font-size: 13px; font-weight: 600; white-space: nowrap; transition: all 0.3s ease; cursor: pointer; flex-shrink: 0; }
.industry-nav-btn:hover { background: #FFF7ED; border-color: #FF6C1A; color: #FF6C1A; }
.industry-nav-btn.active { background: linear-gradient(135deg, #FF6C1A 0%, #E05505 100%); border-color: #FF6C1A; color: #FFFFFF; box-shadow: 0 4px 15px rgba(255, 108, 26, 0.4); }
.industry-nav-btn .ind-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
/* Main Display Box */
.industry-showcase-box { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 16px; box-shadow: 0 4px 12px rgba(25, 42, 68, 0.04); }
.industry-pane { display: none; animation: fadeInPane 0.4s ease forwards; }
.industry-pane.active { display: block; }
@keyframes fadeInPane {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Vector Illustration Container */
.industry-illustration-card { background: #FFF9F5; border: 1px solid #FFE4D6; border-radius: 16px; padding: 30px 20px; text-align: center; position: relative; }
.illustration-svg-wrap { width: 110px; height: 110px; margin: 0 auto 15px auto; display: flex; align-items: center; justify-content: center; background: #FFFFFF; border: 2px solid rgba(255, 108, 26, 0.4); border-radius: 50%; box-shadow: 0 0 25px rgba(255, 108, 26, 0.15); transition: transform 0.4s ease; }
.industry-pane.active .illustration-svg-wrap { animation: floatIllustration 3s ease-in-out infinite alternate; }
@keyframes floatIllustration {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}
.usecase-tag-list { display: flex; flex-direction: column; gap: 10px; }
.usecase-tag-item { display: flex; align-items: flex-start; gap: 12px; background: #FFF9F5; border: 1px solid #FFE4D6; border-radius: 10px; padding: 12px 16px; color: #334155; font-size: 14px; line-height: 1.5; transition: all 0.25s ease; }
.usecase-tag-item:hover { background: #FFF0E6; border-color: #FF6C1A; transform: translateX(4px); }
.usecase-tag-item .check-icon { color: #FF6C1A; font-weight: bold; font-size: 16px; line-height: 1; margin-top: 2px; flex-shrink: 0; }
.usecase-tag-item a { color: #FF6C1A; text-decoration: underline; font-weight: 600; }
.usecase-tag-item a:hover { color: #FF8A47; }
/* Bottom Grid Cards Switcher */
.industry-grid-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.ind-grid-card { background: #FFFFFF; border: 1px solid #CBD5E1; border-radius: 10px; padding: 10px; text-align: center; cursor: pointer; transition: all 0.25s ease; color: #334155; }
.ind-grid-card:hover { background: #FFF7ED; border-color: #FF6C1A; color: #FF6C1A; transform: translateY(-2px); }
.ind-grid-card.active { background: #FF6C1A !important; border-color: #FF6C1A !important; color: #FFFFFF !important; }
.ind-grid-card .icon-box { font-size: 20px; margin-bottom: 4px; }
.ind-grid-card .title-box { font-size: 11px; font-weight: 600; color: inherit; line-height: 1.2; }
.ind-grid-card.active .title-box { color: #FFFFFF; }
@media (max-width: 768px) {
  .industry-grid-nav { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .industry-grid-nav { grid-template-columns: repeat(2, 1fr); }
}
/* ========================================================================== New Interactive Industry Bento Dashboard UI (#item-10) - Light Orange Wrapper ========================================================================== */
.ind-bento-wrapper { background: linear-gradient(135deg, #FFF3EB 0%, #FFE6D5 100%) !important; border: 1px solid #FFC8AE !important; border-radius: 24px !important; padding: 30px !important; box-shadow: 0 15px 35px rgba(255, 108, 26, 0.15) !important; position: relative !important; overflow: hidden !important; }
.ind-bento-wrapper::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 4px !important; background: linear-gradient(90deg, #FF6C1A 0%, #FF9E66 50%, #FF6C1A 100%) !important; }
.ind-bento-header { display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 15px !important; margin-bottom: 25px !important; border-bottom: 1px solid rgba(255, 108, 26, 0.25) !important; padding-bottom: 18px !important; }
.ind-bento-header .text-white-50 { color: #5C3D2E !important; font-weight: 600 !important; }
.ind-bento-title-badge { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: #FF6C1A !important; border: 1px solid #E0550B !important; color: #FFFFFF !important; font-size: 13px !important; font-weight: 700 !important; padding: 6px 14px !important; border-radius: 20px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; box-shadow: 0 4px 12px rgba(255, 108, 26, 0.3) !important; }
#btnToggleAllIndBento { background: #FF6C1A !important; color: #FFFFFF !important; border: none !important; font-weight: 700 !important; border-radius: 20px !important; font-size: 12px !important; padding: 6px 16px !important; box-shadow: 0 4px 12px rgba(255, 108, 26, 0.3) !important; transition: all 0.25s ease !important; }
#btnToggleAllIndBento:hover { background: #E0550B !important; transform: translateY(-2px) !important; }
.ind-bento-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
@media (max-width: 991px) {
  .ind-bento-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 767px) {
  .ind-bento-grid { grid-template-columns: 1fr !important; }
  .ind-bento-wrapper { padding: 18px !important; }
}
/* Dark Bento Cards inside Light Orange Wrapper */
.ind-bento-card { background: #0B132B !important; border: 1px solid rgba(255, 108, 26, 0.3) !important; border-radius: 16px !important; padding: 22px !important; transition: all 0.3s ease !important; cursor: pointer !important; position: relative !important; display: flex !important; flex-direction: column !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important; }
.ind-bento-card:hover { background: #111E3D !important; border-color: #FF6C1A !important; transform: translateY(-4px) !important; box-shadow: 0 12px 25px rgba(0, 0, 0, 0.35) !important; }
.ind-bento-card.active { background: #152449 !important; border: 2px solid #FF6C1A !important; box-shadow: 0 0 25px rgba(255, 108, 26, 0.4) !important; }
.ind-bento-card-top { display: flex !important; align-items: center !important; justify-content: flex-end !important; margin-bottom: 10px !important; }
.ind-bento-card .ind-bento-num { font-size: 13px !important; font-weight: 800 !important; color: #FF6C1A !important; letter-spacing: 1px !important; background: rgba(255, 108, 26, 0.18) !important; padding: 3px 10px !important; border-radius: 12px !important; }
.ind-bento-card .ind-bento-heading { font-size: 20px !important; font-weight: 800 !important; color: #FFFFFF !important; margin-bottom: 10px !important; line-height: 1.3 !important; }
.ind-bento-card .ind-bento-desc { font-size: 14px !important; color: #CBD5E1 !important; font-weight: 400 !important; line-height: 1.6 !important; margin-bottom: 16px !important; flex-grow: 1 !important; }
.ind-bento-toggle-btn { display: flex !important; align-items: center !important; justify-content: space-between !important; font-size: 13px !important; font-weight: 700 !important; color: #FF6C1A !important; padding-top: 12px !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; transition: color 0.25s ease !important; }
.ind-bento-toggle-btn .arrow-icon { transition: transform 0.3s ease !important; font-size: 14px !important; }
.ind-bento-card.active .ind-bento-toggle-btn .arrow-icon { transform: rotate(180deg) !important; }
/* Expanded Use Cases Container */
.ind-bento-cases-body { max-height: 0 !important; overflow: hidden !important; transition: max-height 0.4s ease, opacity 0.3s ease !important; opacity: 0 !important; }
.ind-bento-card.active .ind-bento-cases-body { max-height: 600px !important; opacity: 1 !important; margin-top: 15px !important; padding-top: 15px !important; border-top: 1px dashed rgba(255, 108, 26, 0.4) !important; }
.ind-case-list { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.ind-case-item { display: flex !important; align-items: flex-start !important; gap: 10px !important; font-size: 13.5px !important; color: #F8FAFC !important; line-height: 1.5 !important; background: rgba(15, 23, 42, 0.8) !important; padding: 10px 12px !important; border-radius: 8px !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; }
.ind-case-item .bullet { color: #FF6C1A !important; font-weight: bold !important; font-size: 15px !important; flex-shrink: 0 !important; margin-top: 1px !important; }
.ind-case-item a { color: #FF6C1A !important; text-decoration: underline !important; font-weight: 700 !important; }
.ind-case-item a:hover { color: #FF8A47 !important; }
/* ========================================================================== Section #item-12: Razor-Sharp 3D Interactive Challenge Flip Deck ========================================================================== */
.challenges-flip-wrapper { background: linear-gradient(135deg, #FFF3EB 0%, #FFE6D5 100%) !important; border: 1px solid #FFC8AE !important; border-radius: 24px !important; padding: 30px !important; box-shadow: 0 15px 35px rgba(255, 108, 26, 0.15) !important; margin: 25px 0 !important; position: relative !important; overflow: hidden !important; }
.challenges-flip-wrapper::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 4px !important; background: linear-gradient(90deg, #FF6C1A 0%, #FF9E66 50%, #FF6C1A 100%) !important; }
.challenges-flip-header { display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 15px !important; margin-bottom: 25px !important; border-bottom: 1px solid rgba(255, 108, 26, 0.25) !important; padding-bottom: 16px !important; }
.challenges-flip-badge { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: #FF6C1A !important; border: 1px solid #E0550B !important; color: #FFFFFF !important; font-size: 13px !important; font-weight: 700 !important; padding: 6px 14px !important; border-radius: 20px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; box-shadow: 0 4px 12px rgba(255, 108, 26, 0.3) !important; }
.challenges-flip-header .sub-text { color: #5C3D2E !important; font-weight: 600 !important; font-size: 13px !important; }
.flip-cards-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 22px !important; }
@media (max-width: 767px) {
  .flip-cards-grid { grid-template-columns: 1fr !important; }
  .challenges-flip-wrapper { padding: 18px !important; }
}
/* Crisp Flip Card Container */
.flip-card { background-color: transparent !important; min-height: 250px !important; perspective: 1000px !important; cursor: pointer !important; position: relative !important; isolation: isolate !important; }
.flip-card::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 5 !important; border: 2px solid #FF6C1A !important; border-radius: 18px !important; background: linear-gradient(135deg, #0B132B 0%, #111E3D 100%) !important; opacity: 0 !important; pointer-events: none !important; transform: perspective(1000px) rotateY(0deg) !important; transform-origin: center !important; backface-visibility: hidden !important; box-shadow: 0 12px 28px rgba(255, 108, 26, 0.24) !important; }
.flip-card.is-flipping::after { animation: crisp-card-flip 0.56s cubic-bezier(0.4, 0, 0.2, 1) !important; }
@keyframes crisp-card-flip {
  0% { opacity: 0; transform: perspective(1000px) rotateY(0deg); }
  18% { opacity: 1; }
  49% { opacity: 1; background: linear-gradient(135deg, #0B132B 0%, #111E3D 100%); transform: perspective(1000px) rotateY(88deg); }
  51% { opacity: 1; background: linear-gradient(135deg, #111E3D 0%, #0B132B 100%); transform: perspective(1000px) rotateY(92deg); }
  82% { opacity: 1; }
  100% { opacity: 0; transform: perspective(1000px) rotateY(180deg); }
}
.flip-card-inner { position: relative !important; width: 100% !important; height: 100% !important; text-align: left !important; transition: none !important; transform: none !important; transform-style: flat !important; border-radius: 18px !important; }
.flip-card.flipped .flip-card-inner { transform: none !important; }
/* Razor-Sharp Front & Back Faces */
.flip-card-front, .flip-card-back { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; border-radius: 18px !important; padding: 24px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; transform: none !important; transition: opacity 0.08s linear, visibility 0.08s linear !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important; }
/* Front Side */
.flip-card-front { background: #0B132B !important; border: 1.5px solid rgba(255, 108, 26, 0.4) !important; opacity: 1 !important; visibility: visible !important; transform: none !important; }
.flip-card.flipped .flip-card-front { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.flip-card:hover .flip-card-front { border-color: #FF6C1A !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35) !important; }
.flip-card-top { display: flex !important; align-items: center !important; justify-content: flex-start !important; }
.flip-risk-tag { font-size: 11px !important; font-weight: 800 !important; color: #FFFFFF !important; background: #FF6C1A !important; padding: 5px 12px !important; border-radius: 12px !important; letter-spacing: 1px !important; }
.flip-card-title { font-size: 20px !important; font-weight: 800 !important; color: #FFFFFF !important; margin-top: 15px !important; margin-bottom: 15px !important; line-height: 1.35 !important; }
.flip-action-hint { display: flex !important; align-items: center !important; justify-content: space-between !important; font-size: 13px !important; font-weight: 700 !important; color: #FFFFFF !important; background: #FF6C1A !important; padding: 10px 16px !important; border-radius: 20px !important; margin-top: auto !important; box-shadow: 0 4px 12px rgba(255, 108, 26, 0.35) !important; }
.flip-card:hover .flip-action-hint { background: #E0550B !important; }
/* Back Side */
.flip-card-back { background: #111E3D !important; border: 2px solid #FF6C1A !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: none !important; }
.flip-card.flipped .flip-card-back { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
@media (prefers-reduced-motion: reduce) {
  .flip-card.is-flipping::after { animation: none !important; }
}
.flip-card-back-header { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 12px !important; padding-bottom: 8px !important; border-bottom: 1px dashed rgba(255, 108, 26, 0.4) !important; }
.flip-card-back-title { font-size: 17px !important; font-weight: 800 !important; color: #FFFFFF !important; margin-bottom: 0 !important; }
.flip-card-desc { font-size: 14px !important; color: #E2E8F0 !important; line-height: 1.65 !important; margin-bottom: 12px !important; flex-grow: 1 !important; }
.flip-back-action { display: flex !important; align-items: center !important; justify-content: space-between !important; font-size: 12.5px !important; font-weight: 700 !important; color: #FFFFFF !important; background: #FF6C1A !important; padding: 8px 14px !important; border-radius: 8px !important; margin-top: auto !important; }
/* ========================================================================== Toggle All Buttons High-Contrast Styling (#aiFeToggleAll & Section Buttons) ========================================================================== */
#aiFeToggleAll, #btnToggleAllIndBento, #btnFlipAllChallenges { background: #FF6C1A !important; color: #FFFFFF !important; border: 1px solid #E0550B !important; font-weight: 700 !important; border-radius: 20px !important; font-size: 12px !important; padding: 6px 16px !important; box-shadow: 0 4px 12px rgba(255, 108, 26, 0.3) !important; transition: all 0.25s ease !important; cursor: pointer !important; }
#aiFeToggleAll:hover, #btnToggleAllIndBento:hover, #btnFlipAllChallenges:hover { background: #E0550B !important; color: #FFFFFF !important; border-color: #C44600 !important; box-shadow: 0 6px 16px rgba(255, 108, 26, 0.5) !important; transform: translateY(-2px) !important; }
/* Challenge Map UI */
.challenge-map-wrapper { position: relative; border: 1px solid rgba(255, 108, 26, 0.22); border-radius: 22px; padding: 26px; background: linear-gradient(135deg, rgba(255, 108, 26, 0.08) 0%, rgba(255, 255, 255, 0.96) 45%, rgba(25, 42, 68, 0.06) 100%); box-shadow: 0 18px 42px rgba(25, 42, 68, 0.10); }
.challenge-map-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 108, 26, 0.18); }
.challenge-map-badge { display: inline-flex; align-items: center; min-height: 30px; padding: 6px 13px; border-radius: 999px; background: #ff6c1a; color: #fff; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; }
.challenge-map-subtitle { margin-top: 8px; color: #4c596d; font-size: 14px; line-height: 1.55; }
.challenge-map-count { flex: 0 0 auto; color: #192a44; font-size: 13px; font-weight: 800; padding: 8px 12px; border-radius: 999px; background: #fff; border: 1px solid rgba(25, 42, 68, 0.12); }
.challenge-map-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.challenge-map-card { position: relative; min-height: 210px; padding: 20px; border: 1px solid rgba(25, 42, 68, 0.12); border-radius: 16px; background: #fff; box-shadow: 0 12px 28px rgba(25, 42, 68, 0.08); overflow: hidden; cursor: pointer; transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease; }
.challenge-map-card:focus { outline: 3px solid rgba(255, 108, 26, 0.28); outline-offset: 3px; }
.challenge-map-card:hover, .challenge-map-card:focus { transform: translateY(-3px); border-color: rgba(255, 108, 26, 0.5); box-shadow: 0 18px 34px rgba(255, 108, 26, 0.16); }
.challenge-map-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.challenge-map-index { color: #ff6c1a; font-size: 28px; font-weight: 900; line-height: 1; }
.challenge-map-level { color: #fff; background: #192a44; border-radius: 999px; padding: 5px 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.35px; }
.challenge-map-card h3 { margin: 0 0 14px; padding: 0 !important; color: #192a44; font-size: 19px; line-height: 1.35; font-weight: 800; }
.challenge-meter { height: 8px; border-radius: 999px; background: rgba(25, 42, 68, 0.10); overflow: hidden; }
.challenge-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff6c1a 0%, #ff9a4f 100%); }
.challenge-map-preview { margin: 14px 0 0 !important; padding: 0 !important; color: #4c596d !important; font-size: 14px !important; line-height: 1.5 !important; }
.challenge-map-detail { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.26s ease, opacity 0.2s ease, margin-top 0.2s ease; }
.challenge-map-card:hover .challenge-map-detail, .challenge-map-card:focus .challenge-map-detail, .challenge-map-card:focus-within .challenge-map-detail { max-height: 190px; opacity: 1; margin-top: 14px; }
.challenge-map-detail p { margin: 0 !important; padding: 14px 0 0 !important; border-top: 1px solid rgba(255, 108, 26, 0.18); color: #192a44 !important; font-size: 14px !important; line-height: 1.65 !important; }
.challenge-map-card:nth-child(5) { grid-column: 1 / -1; }
@media (max-width: 767px) {
  .challenge-map-wrapper { padding: 18px; border-radius: 18px; }
  .challenge-map-header { align-items: flex-start; flex-direction: column; }
  .challenge-map-grid { grid-template-columns: 1fr; }
  .challenge-map-card { min-height: auto; padding: 18px; }
  .challenge-map-card:nth-child(5) { grid-column: auto; }
}
/* ========================================================================== Extracted Component & Utility Styles (Replaces Inline Styles) ========================================================================== */
iframe[data-testid="embed-iframe"] { border-radius: 12px !important; }
.badge-tech-subtitle { font-size: 11px !important; letter-spacing: 0.5px !important; }
.bg-navy-header { background: #172640 !important; }
.bg-navy-header-orange { background: #172640 !important; border-bottom: 3px solid #FF6C1A !important; }
.orbit-desc { font-size: 15px !important; line-height: 1.6 !important; }
.orbit-usecase-heading { font-size: 13px !important; }
.orbit-usecase-desc { font-size: 14px !important; }
.ind-bento-subtext { font-size: 13px !important; }
/* Challenge meter widths */
.meter-w-92 { width: 92% !important; }
.meter-w-84 { width: 84% !important; }
.meter-w-88 { width: 88% !important; }
.meter-w-76 { width: 76% !important; }
.meter-w-90 { width: 90% !important; }

/* Light header treatment for comparison and roadmap widgets */
.ai-feature-explorer .ai-fe-header,
.ai-process-infographic .process-header.bg-navy-header {
  background: linear-gradient(135deg, #FFF7F1 0%, #F7FAFF 100%) !important;
  border-bottom: 1px solid rgba(255, 108, 26, 0.18) !important;
  color: #11173B !important;
}

.ai-feature-explorer .ai-fe-header h3,
.ai-feature-explorer .ai-fe-header .text-white,
.ai-process-infographic .process-header h3,
.ai-process-infographic .process-header .text-white {
  color: #11173B !important;
}

.ai-feature-explorer .ai-fe-header .badge-tech-subtitle,
.ai-process-infographic .process-header .badge-tech-subtitle {
  background: #FFE8D8 !important;
  color: #FF6C1A !important;
  border: 1px solid rgba(255, 108, 26, 0.22) !important;
}

.ai-feature-explorer #aiFeToggleAll {
  background: #FF6C1A !important;
  color: #FFFFFF !important;
  border-color: #FF6C1A !important;
}

/* ========================================================================== AI INDUSTRY COMMAND CENTER COMPONENT (#item-10) ========================================================================== */
.cmd-center-wrapper { background: linear-gradient(135deg, #FFF7F1 0%, #F8FAFC 100%); border: 1px solid #E2E8F0; border-radius: 20px; box-shadow: 0 10px 30px rgba(25, 42, 68, 0.05); overflow: hidden; }
.cmd-center-header { background: linear-gradient(135deg, #FFF7F1 0%, #F7FAFF 100%) !important; border-bottom: 2px solid rgba(255, 108, 26, 0.2) !important; }
.cmd-stage-container { width: 100%; height: 480px; background: #FFFFFF; border: 1px solid #FFE4D6; border-radius: 16px; position: relative; overflow: hidden; }
.cmd-svg-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.cmd-svg-canvas line.active-ray { stroke: #FF6C1A !important; stroke-width: 1.8 !important; stroke-dasharray: none !important; filter: drop-shadow(0 0 4px rgba(255, 108, 26, 0.5)); }
.cmd-hub-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle, #FF6C1A 0%, #E05508 100%); box-shadow: 0 0 25px rgba(255, 108, 26, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #FFFFFF; text-align: center; z-index: 10; animation: hubPulse 3s ease-in-out infinite alternate; }
@keyframes hubPulse { 0% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 25px rgba(255, 108, 26, 0.4); } 100% { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 0 35px rgba(255, 108, 26, 0.6); } }
.cmd-hub-badge { font-size: 9px; font-weight: 800; letter-spacing: 1px; opacity: 0.9; }
.cmd-hub-title { font-size: 15px; font-weight: 800; line-height: 1.1; margin-top: 1px; }
.cmd-node { position: absolute; transform: translate(-50%, -50%); width: 96px; height: 48px; border-radius: 10px; background: #FFFFFF; border: 2px solid #CBD5E1; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 12; box-shadow: 0 4px 12px rgba(25, 42, 68, 0.08); padding: 3px 5px; text-align: center; }
.cmd-node-num { font-size: 9.5px; font-weight: 800; color: #FF6C1A; line-height: 1; }
.cmd-node-title { font-size: 10.5px; font-weight: 700; color: #192A44; line-height: 1.15; margin-top: 1px; white-space: normal; max-width: 88px; text-align: center; }
.cmd-node:hover { border-color: #FF6C1A; background: #FFF7ED; transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 6px 16px rgba(255, 108, 26, 0.2); }
.cmd-node.active { background: #FF6C1A !important; border-color: #FF6C1A !important; transform: translate(-50%, -50%) scale(1.06) !important; box-shadow: 0 8px 20px rgba(255, 108, 26, 0.4) !important; }
.cmd-node.active .cmd-node-num, .cmd-node.active .cmd-node-title { color: #FFFFFF !important; }
.cmd-detail-card { background: #FFFFFF; border: 1px solid #FFE4D6; border-left: 5px solid #FF6C1A; border-radius: 16px; padding: 24px 28px; box-shadow: 0 6px 20px rgba(25, 42, 68, 0.05); min-height: 480px; display: flex; flex-direction: column; justify-content: center; transition: all 0.3s ease; }

.cmd-usecase-box { background: #FFF9F5; border: 1px solid #FFE4D6; border-radius: 12px; padding: 16px; }
.cmd-usecase-list { display: flex; flex-direction: column; gap: 10px; }
.cmd-usecase-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: #334155; line-height: 1.4; }
.cmd-usecase-item .bullet { color: #FF6C1A; font-weight: bold; font-size: 14px; line-height: 1; margin-top: 2px; flex-shrink: 0; }
.cmd-usecase-item a { color: #FF6C1A; text-decoration: underline; font-weight: 600; }


/* Responsive adjustments for Tablet and Mobile viewports */
@media (max-width: 991px) {
  .cmd-stage-container { height: 460px; margin-bottom: 20px; }
  .cmd-detail-card { min-height: auto; padding: 20px; }
  .cmd-node { width: 84px; height: 44px; }
  .cmd-node-title { font-size: 9.5px; max-width: 78px; }
}

@media (max-width: 575px) {
  .cmd-stage-container { height: 370px; margin-bottom: 16px; }
  .cmd-hub-core { width: 68px; height: 68px; }
  .cmd-hub-badge { font-size: 7.5px; letter-spacing: 0.5px; }
  .cmd-hub-title { font-size: 10.5px; }
  .cmd-node { width: 70px; height: 36px; padding: 2px 2px; border-radius: 7px; border-width: 1.5px; }
  .cmd-node-num { font-size: 7.5px; }
  .cmd-node-title { font-size: 7.5px; max-width: 66px; line-height: 1.05; margin-top: 1px; }
}