{"id":1698,"date":"2026-10-12T06:06:50","date_gmt":"2026-10-12T06:06:50","guid":{"rendered":"https:\/\/web.annulartechnologies.com\/staging\/device-management-system\/"},"modified":"2026-10-20T18:20:05","modified_gmt":"2026-10-20T18:20:05","slug":"device-management-system","status":"publish","type":"page","link":"https:\/\/web.annulartechnologies.com\/staging\/device-management-system\/","title":{"rendered":"Device Management System"},"content":{"rendered":"<div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container hundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-padding-top:0px;--awb-padding-right:0px;--awb-padding-bottom:0px;--awb-padding-left:0px;--awb-margin-top:0px;--awb-margin-bottom:0px;--awb-background-color:#ffffff;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-align-content-flex-start fusion-flex-content-wrap\" style=\"width:104% !important;max-width:104% !important;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-flex-column fusion-flex-align-self-stretch\" style=\"--awb-padding-top:0px;--awb-padding-right:0px;--awb-padding-bottom:0px;--awb-padding-left:0px;--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-flex-justify-content-flex-start fusion-content-layout-column\"><!-- =========================================================\n ANNULAR TECHNOLOGIES | DEVICE MANAGEMENT SYSTEM\n Professional Responsive UI | WordPress + Avada\n Replace the existing page Code Block with this entire code.\n========================================================= -->\n\n<style>\n\/* =========================================================\n   1. PAGE FOUNDATION\n========================================================= *\/\n.dms-page-wrapper {\n  --dms-blue: #175cff;\n  --dms-blue-dark: #1047d9;\n  --dms-blue-light: #eff5ff;\n  --dms-text: #172033;\n  --dms-muted: #5f6b7c;\n  --dms-border: #e4eaf2;\n  --dms-surface: #f7f9fc;\n  --dms-white: #ffffff;\n\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  background: var(--dms-white);\n  color: var(--dms-text);\n  font-family: \"Inter\", \"Plus Jakarta Sans\", Arial, sans-serif;\n  font-size: 15px;\n  line-height: 1.7;\n  -webkit-font-smoothing: antialiased;\n  overflow: clip;\n}\n\n.dms-page-wrapper *,\n.dms-page-wrapper *::before,\n.dms-page-wrapper *::after {\n  box-sizing: border-box;\n}\n\n.dms-page-wrapper img {\n  display: block;\n  max-width: 100%;\n}\n\n.dms-page-wrapper h1,\n.dms-page-wrapper h2,\n.dms-page-wrapper h3,\n.dms-page-wrapper h4,\n.dms-page-wrapper p {\n  font-family: inherit;\n}\n\n.dms-page-wrapper h1,\n.dms-page-wrapper h2,\n.dms-page-wrapper h3,\n.dms-page-wrapper h4 {\n  color: var(--dms-text);\n  letter-spacing: -0.025em;\n}\n\n.dms-page-wrapper a {\n  text-decoration: none;\n}\n\n.dms-container {\n  width: 100%;\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 0 26px;\n}\n\n.dms-section {\n  padding: 84px 0;\n}\n\n.dms-section-alt {\n  background: var(--dms-surface);\n  border-top: 1px solid #edf1f6;\n  border-bottom: 1px solid #edf1f6;\n}\n\n\/* =========================================================\n   2. SECTION HEADERS\n========================================================= *\/\n.dms-section-header {\n  max-width: 760px;\n  margin: 0 auto 42px;\n  text-align: center;\n}\n\n.dms-section-header h2 {\n  margin: 0 0 14px;\n  font-size: clamp(27px, 3vw, 36px);\n  font-weight: 750;\n  line-height: 1.22;\n}\n\n.dms-section-header h2 span,\n.dms-highlight {\n  color: var(--dms-blue);\n}\n\n.dms-section-header p {\n  max-width: 680px;\n  margin: 0 auto;\n  color: var(--dms-muted);\n  font-size: 15px;\n  line-height: 1.8;\n}\n\n\/* =========================================================\n   3. BUTTONS\n========================================================= *\/\n.dms-btn-group {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 12px;\n  margin-top: 28px;\n}\n\n.dms-btn-primary,\n.dms-btn-secondary {\n  display: inline-flex;\n  min-height: 46px;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  padding: 12px 21px;\n  border: 1px solid transparent;\n  border-radius: 7px;\n  font-family: inherit;\n  font-size: 13.5px;\n  font-weight: 700;\n  line-height: 1.35;\n  text-align: center;\n  cursor: pointer;\n  transition: background-color .2s ease,\n              border-color .2s ease,\n              color .2s ease,\n              transform .2s ease,\n              box-shadow .2s ease;\n}\n\n.dms-btn-primary {\n  background: var(--dms-blue);\n  border-color: var(--dms-blue);\n  color: #ffffff !important;\n  box-shadow: 0 5px 14px rgba(23, 92, 255, .15);\n}\n\n.dms-btn-primary:hover {\n  background: var(--dms-blue-dark);\n  border-color: var(--dms-blue-dark);\n  color: #ffffff !important;\n  transform: translateY(-1px);\n  box-shadow: 0 7px 18px rgba(23, 92, 255, .2);\n}\n\n.dms-btn-secondary {\n  background: #ffffff;\n  border-color: #d5deea;\n  color: var(--dms-text) !important;\n}\n\n.dms-btn-secondary:hover {\n  background: var(--dms-blue-light);\n  border-color: #b9ceff;\n  color: var(--dms-blue) !important;\n  transform: translateY(-1px);\n}\n\n.dms-btn-primary:focus-visible,\n.dms-btn-secondary:focus-visible {\n  outline: 3px solid #a8c3ff;\n  outline-offset: 3px;\n}\n\n\/* =========================================================\n   4. HERO\n========================================================= *\/\n.dms-hero-section {\n  position: relative;\n  padding: 24px 0 76px;\n  background:\n    radial-gradient(\n      ellipse at 85% 40%,\n      rgba(214, 230, 255, .58) 0%,\n      rgba(244, 248, 255, .35) 37%,\n      #ffffff 75%\n    );\n  border-bottom: 1px solid var(--dms-border);\n}\n\n.dms-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 9px;\n  margin-bottom: 34px;\n  color: #7a8596;\n  font-size: 12px;\n}\n\n.dms-breadcrumb a {\n  color: #69778a;\n}\n\n.dms-breadcrumb a:hover,\n.dms-breadcrumb .curr {\n  color: var(--dms-blue);\n}\n\n.dms-breadcrumb .curr {\n  font-weight: 700;\n}\n\n.dms-hero-grid {\n  display: grid;\n  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);\n  align-items: center;\n  gap: 56px;\n}\n\n.dms-hero-content {\n  min-width: 0;\n}\n\n.dms-hero-content h1 {\n  max-width: 620px;\n  margin: 0 0 21px;\n  font-size: clamp(33px, 3.5vw, 45px);\n  font-weight: 780;\n  line-height: 1.15;\n  letter-spacing: -.04em;\n}\n\n.dms-hero-content h1 span {\n  color: var(--dms-blue);\n}\n\n.dms-hero-content > p {\n  max-width: 570px;\n  margin: 0;\n  color: var(--dms-muted);\n  font-size: 15.5px;\n  line-height: 1.85;\n}\n\n.dms-hero-image-frame {\n  position: relative;\n  min-width: 0;\n  padding: 8px;\n  background: #ffffff;\n  border: 1px solid var(--dms-border);\n  border-radius: 15px;\n  box-shadow: 0 18px 48px rgba(28, 48, 82, .09);\n}\n\n.dms-hero-image-frame img {\n  width: 100%;\n  aspect-ratio: 6 \/ 4.6;\n  object-fit: cover;\n  object-position: center;\n  border-radius: 10px;\n}\n\n\/* =========================================================\n   5. OVERVIEW\n========================================================= *\/\n.dms-overview-section {\n  background: #ffffff;\n}\n\n.dms-overview-box {\n  max-width: 980px;\n  margin: 0 auto;\n  padding: 32px 38px;\n  background: linear-gradient(135deg, #f8faff, #f2f6ff);\n  border: 1px solid #e0e9fa;\n  border-radius: 13px;\n  text-align: center;\n}\n\n.dms-overview-box p {\n  margin: 0;\n  color: #46556a;\n  font-size: 16px;\n  line-height: 1.9;\n}\n\n\/* =========================================================\n   6. KEY CAPABILITIES\n========================================================= *\/\n.dms-cap-grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: 19px;\n}\n\n.dms-cap-card {\n  min-width: 0;\n  padding: 25px 22px;\n  background: #ffffff;\n  border: 1px solid var(--dms-border);\n  border-radius: 12px;\n  transition: border-color .2s ease,\n              box-shadow .2s ease,\n              transform .2s ease;\n}\n\n.dms-cap-card:hover {\n  border-color: #b9ceff;\n  box-shadow: 0 12px 28px rgba(30, 64, 125, .07);\n  transform: translateY(-3px);\n}\n\n.dms-cap-icon {\n  display: flex;\n  width: 44px;\n  height: 44px;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 19px;\n  background: var(--dms-blue-light);\n  border: 1px solid #dbe6ff;\n  border-radius: 10px;\n  color: var(--dms-blue);\n  font-size: 17px;\n}\n\n.dms-cap-card h4 {\n  margin: 0 0 9px;\n  font-size: 15px;\n  font-weight: 750;\n  line-height: 1.45;\n}\n\n.dms-cap-card p {\n  margin: 0;\n  color: var(--dms-muted);\n  font-size: 13px;\n  line-height: 1.8;\n}\n\n\/* =========================================================\n   7. DEVICE LIFECYCLE\n========================================================= *\/\n.dms-lifecycle-grid {\n  display: grid;\n  grid-template-columns: repeat(5, minmax(0, 1fr));\n  gap: 16px;\n}\n\n.dms-step-card {\n  position: relative;\n  min-width: 0;\n  padding: 25px 17px;\n  background: #ffffff;\n  border: 1px solid var(--dms-border);\n  border-radius: 12px;\n  text-align: center;\n  transition: border-color .2s ease,\n              box-shadow .2s ease,\n              transform .2s ease;\n}\n\n.dms-step-card:hover {\n  border-color: #b9ceff;\n  box-shadow: 0 10px 24px rgba(30, 64, 125, .06);\n  transform: translateY(-3px);\n}\n\n.dms-step-num {\n  display: flex;\n  width: 39px;\n  height: 39px;\n  align-items: center;\n  justify-content: center;\n  margin: 0 auto 16px;\n  border-radius: 10px;\n  background: var(--dms-blue);\n  color: #ffffff;\n  font-size: 14px;\n  font-weight: 800;\n}\n\n.dms-step-card h3 {\n  margin: 0 0 8px;\n  font-size: 16px;\n  font-weight: 750;\n}\n\n.dms-step-card p {\n  margin: 0;\n  color: var(--dms-muted);\n  font-size: 12.5px;\n  line-height: 1.75;\n}\n\n\/* =========================================================\n   8. BUSINESS USE CASES\n========================================================= *\/\n.dms-usecases-grid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 16px;\n}\n\n.dms-usecase-box {\n  display: flex;\n  min-width: 0;\n  min-height: 90px;\n  align-items: center;\n  gap: 15px;\n  padding: 20px;\n  background: #ffffff;\n  border: 1px solid var(--dms-border);\n  border-radius: 11px;\n  transition: border-color .2s ease,\n              box-shadow .2s ease;\n}\n\n.dms-usecase-box:hover {\n  border-color: #b9ceff;\n  box-shadow: 0 8px 22px rgba(30, 64, 125, .06);\n}\n\n.dms-usecase-icon {\n  display: flex;\n  width: 42px;\n  height: 42px;\n  flex: 0 0 42px;\n  align-items: center;\n  justify-content: center;\n  border-radius: 10px;\n  background: var(--dms-blue-light);\n  color: var(--dms-blue);\n  font-size: 16px;\n}\n\n.dms-usecase-box h4 {\n  margin: 0;\n  font-size: 13.5px;\n  font-weight: 700;\n  line-height: 1.6;\n}\n\n\/* =========================================================\n   9. BUSINESS BENEFITS\n========================================================= *\/\n.dms-benefits-strip {\n  max-width: 900px;\n  margin: 0 auto;\n  padding: 25px;\n  background: #ffffff;\n  border: 1px solid var(--dms-border);\n  border-radius: 13px;\n}\n\n.dms-benefits-list {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 12px;\n}\n\n.dms-benefit-row {\n  display: flex;\n  min-width: 0;\n  align-items: flex-start;\n  gap: 13px;\n  padding: 16px;\n  background: #f8faff;\n  border: 1px solid #edf1f7;\n  border-radius: 9px;\n}\n\n.dms-benefit-check {\n  display: flex;\n  width: 27px;\n  height: 27px;\n  flex: 0 0 27px;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  background: #eaf1ff;\n  color: var(--dms-blue);\n  font-size: 11px;\n}\n\n.dms-benefit-row h3 {\n  margin: 2px 0 0;\n  font-size: 13px;\n  font-weight: 700;\n  line-height: 1.7;\n}\n\n\/* =========================================================\n   10. TECHNOLOGY STACK\n========================================================= *\/\n.dms-tech-grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: 17px;\n  max-width: 1060px;\n  margin: 0 auto;\n}\n\n.dms-tech-card {\n  min-width: 0;\n  padding: 25px 19px;\n  background: #ffffff;\n  border: 1px solid var(--dms-border);\n  border-radius: 12px;\n  text-align: center;\n  transition: border-color .2s ease,\n              box-shadow .2s ease;\n}\n\n.dms-tech-card:hover {\n  border-color: #b9ceff;\n  box-shadow: 0 10px 24px rgba(30, 64, 125, .06);\n}\n\n.dms-tech-badge-role {\n  display: inline-flex;\n  align-items: center;\n  margin-bottom: 14px;\n  padding: 5px 10px;\n  border-radius: 5px;\n  background: var(--dms-blue-light);\n  color: var(--dms-blue);\n  font-size: 10px;\n  font-weight: 800;\n  letter-spacing: .08em;\n  text-transform: uppercase;\n}\n\n.dms-tech-card h3 {\n  margin: 0 0 9px;\n  font-size: 16px;\n  font-weight: 750;\n  line-height: 1.45;\n}\n\n.dms-tech-card p {\n  margin: 0;\n  color: var(--dms-muted);\n  font-size: 12.5px;\n  line-height: 1.8;\n}\n\n\/* =========================================================\n   11. WHY ANNULAR\n========================================================= *\/\n.dms-why-grid {\n  display: grid;\n  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);\n  align-items: center;\n  gap: 55px;\n}\n\n.dms-why-content h2 {\n  margin: 0 0 18px;\n  font-size: clamp(28px, 3vw, 37px);\n  font-weight: 750;\n  line-height: 1.24;\n}\n\n.dms-why-content h2 span {\n  color: var(--dms-blue);\n}\n\n.dms-why-lead {\n  margin: 0;\n  color: var(--dms-muted);\n  font-size: 15px;\n  line-height: 1.9;\n}\n\n.dms-why-visual-frame {\n  padding: 7px;\n  background: #ffffff;\n  border: 1px solid var(--dms-border);\n  border-radius: 14px;\n  box-shadow: 0 16px 38px rgba(28, 48, 82, .08);\n}\n\n.dms-why-visual-frame img {\n  width: 100%;\n  aspect-ratio: 5 \/ 4;\n  object-fit: cover;\n  object-position: center;\n  border-radius: 9px;\n}\n\n\/* =========================================================\n   12. FAQ ACCORDION\n========================================================= *\/\n.dms-accordion {\n  display: flex;\n  max-width: 850px;\n  flex-direction: column;\n  gap: 12px;\n  margin: 0 auto;\n}\n\n.dms-accordion-item {\n  overflow: hidden;\n  background: #ffffff;\n  border: 1px solid var(--dms-border);\n  border-radius: 10px;\n  transition: border-color .2s ease,\n              box-shadow .2s ease;\n}\n\n.dms-accordion-item.active {\n  border-color: #c8d8ff;\n  box-shadow: 0 5px 18px rgba(30, 64, 125, .04);\n}\n\n.dms-accordion-header {\n  display: flex;\n  width: 100%;\n  min-height: 66px;\n  align-items: center;\n  justify-content: space-between;\n  gap: 20px;\n  padding: 19px 22px;\n  background: #ffffff;\n  border: 0;\n  color: var(--dms-text);\n  font: inherit;\n  text-align: left;\n  cursor: pointer;\n}\n\n.dms-accordion-header h3 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 700;\n  line-height: 1.6;\n}\n\n.dms-accordion-icon {\n  display: flex;\n  width: 29px;\n  height: 29px;\n  flex: 0 0 29px;\n  align-items: center;\n  justify-content: center;\n  border-radius: 7px;\n  background: #f0f4fa;\n  color: #53647a;\n  font-size: 12px;\n  transition: transform .2s ease,\n              background-color .2s ease,\n              color .2s ease;\n}\n\n.dms-accordion-item.active .dms-accordion-icon {\n  background: var(--dms-blue);\n  color: #ffffff;\n  transform: rotate(180deg);\n}\n\n.dms-accordion-body {\n  padding: 0 22px 21px;\n  color: var(--dms-muted);\n  font-size: 14px;\n  line-height: 1.85;\n}\n\n.dms-accordion-body[hidden] {\n  display: none !important;\n}\n\n\/* =========================================================\n   13. FINAL CALL TO ACTION\n========================================================= *\/\n.dms-cta-section {\n  padding: 78px 0;\n  background:\n    radial-gradient(\n      ellipse at 50% 0%,\n      rgba(211, 227, 255, .55),\n      transparent 68%\n    ),\n    #f5f8ff;\n  border-top: 1px solid #e4eaf5;\n  text-align: center;\n}\n\n.dms-cta-inner {\n  max-width: 800px;\n  margin: 0 auto;\n}\n\n.dms-cta-inner h2 {\n  margin: 0 0 15px;\n  font-size: clamp(28px, 3vw, 37px);\n  font-weight: 780;\n  line-height: 1.25;\n}\n\n.dms-cta-inner > p {\n  max-width: 650px;\n  margin: 0 auto;\n  color: var(--dms-muted);\n  font-size: 15px;\n  line-height: 1.85;\n}\n\n.dms-shared-cta-box {\n  margin-top: 34px;\n  padding: 28px;\n  background: #ffffff;\n  border: 1px solid var(--dms-border);\n  border-radius: 12px;\n  box-shadow: 0 10px 28px rgba(28, 48, 82, .05);\n}\n\n.dms-shared-cta-box h4 {\n  margin: 0 0 8px;\n  font-size: 17px;\n  font-weight: 750;\n}\n\n.dms-shared-cta-box p {\n  margin: 0 0 20px;\n  color: var(--dms-muted);\n  font-size: 13.5px;\n  line-height: 1.8;\n}\n\n.dms-cta-inner .dms-btn-group {\n  justify-content: center;\n}\n\n\/* =========================================================\n   14. RESPONSIVE DESIGN\n========================================================= *\/\n@media (max-width: 1100px) {\n  .dms-hero-grid {\n    gap: 35px;\n  }\n\n  .dms-cap-grid,\n  .dms-tech-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n\n  .dms-lifecycle-grid {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n\n  .dms-usecases-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n\n  .dms-why-grid {\n    gap: 35px;\n  }\n}\n\n@media (max-width: 767px) {\n  .dms-container {\n    padding-right: 20px;\n    padding-left: 20px;\n  }\n\n  .dms-section {\n    padding: 58px 0;\n  }\n\n  .dms-hero-section {\n    padding: 22px 0 55px;\n  }\n\n  .dms-breadcrumb {\n    margin-bottom: 25px;\n    font-size: 11px;\n  }\n\n  .dms-hero-grid,\n  .dms-why-grid {\n    grid-template-columns: minmax(0, 1fr);\n    gap: 30px;\n  }\n\n  .dms-hero-content h1 {\n    font-size: clamp(30px, 7vw, 36px);\n  }\n\n  .dms-hero-content > p {\n    font-size: 14.5px;\n  }\n\n  .dms-hero-image-frame img {\n    aspect-ratio: 5 \/ 4;\n  }\n\n  .dms-section-header {\n    margin-bottom: 30px;\n  }\n\n  .dms-section-header h2,\n  .dms-why-content h2,\n  .dms-cta-inner h2 {\n    font-size: 28px;\n  }\n\n  .dms-section-header p {\n    font-size: 14px;\n  }\n\n  .dms-overview-box {\n    padding: 24px 20px;\n  }\n\n  .dms-overview-box p {\n    font-size: 14px;\n    text-align: left;\n  }\n\n  .dms-cap-grid,\n  .dms-tech-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 12px;\n  }\n\n  .dms-cap-card {\n    padding: 19px 16px;\n  }\n\n  .dms-cap-card h4 {\n    font-size: 14px;\n  }\n\n  .dms-cap-card p {\n    font-size: 12.5px;\n  }\n\n  .dms-lifecycle-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 12px;\n  }\n\n  .dms-step-card {\n    padding: 20px 14px;\n  }\n\n  .dms-usecases-grid {\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  .dms-benefits-strip {\n    padding: 14px;\n  }\n\n  .dms-benefits-list {\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  .dms-benefit-row {\n    padding: 13px;\n  }\n\n  .dms-tech-card {\n    padding: 20px 14px;\n  }\n\n  .dms-tech-card h3 {\n    font-size: 14px;\n  }\n\n  .dms-why-visual-frame img {\n    aspect-ratio: 5 \/ 4;\n  }\n\n  .dms-accordion-header {\n    min-height: 60px;\n    padding: 16px;\n    gap: 12px;\n  }\n\n  .dms-accordion-header h3 {\n    font-size: 13px;\n  }\n\n  .dms-accordion-body {\n    padding: 0 16px 18px;\n    font-size: 13px;\n  }\n\n  .dms-cta-section {\n    padding: 58px 0;\n  }\n\n  .dms-shared-cta-box {\n    padding: 22px 17px;\n  }\n\n  .dms-btn-group {\n    gap: 10px;\n  }\n\n  .dms-btn-primary,\n  .dms-btn-secondary {\n    min-height: 44px;\n    padding: 11px 16px;\n    font-size: 12.5px;\n  }\n}\n\n@media (max-width: 420px) {\n  .dms-container {\n    padding-right: 16px;\n    padding-left: 16px;\n  }\n\n  .dms-cap-grid,\n  .dms-tech-grid,\n  .dms-lifecycle-grid {\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  .dms-cap-card {\n    padding: 22px;\n  }\n\n  .dms-cap-card h4 {\n    font-size: 15px;\n  }\n\n  .dms-cap-card p {\n    font-size: 13px;\n  }\n\n  .dms-step-card {\n    text-align: left;\n  }\n\n  .dms-step-num {\n    margin-left: 0;\n  }\n\n  .dms-btn-group {\n    align-items: stretch;\n    flex-direction: column;\n  }\n\n  .dms-btn-primary,\n  .dms-btn-secondary {\n    width: 100%;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dms-page-wrapper *,\n  .dms-page-wrapper *::before,\n  .dms-page-wrapper *::after {\n    scroll-behavior: auto !important;\n    animation-duration: .01ms !important;\n    transition-duration: .01ms !important;\n  }\n}\n\n\/* ==========================================================================\n   STANDARDIZED PRIMARY & SECONDARY BUTTON SYSTEM\n   Primary:\n     Background: var(--adm-blue-primary) -> #0052FF\n     Button text: var(--adm-white) -> #FFFFFF\n     Hover background: var(--adm-blue-deep) -> #003087\n     Border: rgba(255, 255, 255, 0.3)\n     Hover shadow: rgba(0, 82, 255, 0.42)\n   Secondary:\n     Background: #FFFFFF | Text: #0F172A | Border: #CBD5E1\n     Hover background: #F8FAFC | Hover text: #2563EB\n   ========================================================================== *\/\n.dms-btn-primary {\n  background: #0052ff !important;\n  color: #ffffff !important;\n  border: 1px solid rgba(255, 255, 255, 0.3) !important;\n  box-shadow: 0 8px 24px -2px rgba(0, 82, 255, 0.28) !important;\n  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;\n  text-decoration: none !important;\n}\n\n.dms-btn-primary:hover {\n  background: #003087 !important;\n  color: #ffffff !important;\n  border-color: rgba(255, 255, 255, 0.3) !important;\n  transform: translateY(-2px) !important;\n  box-shadow: 0 12px 30px -2px rgba(0, 82, 255, 0.42) !important;\n  text-decoration: none !important;\n}\n\n.dms-btn-primary svg, .dms-btn-primary span {\n  color: #ffffff !important;\n  -webkit-text-fill-color: #ffffff !important;\n}\n\n.dms-btn-secondary {\n  background: #ffffff !important;\n  color: #0f172a !important;\n  border: 1.5px solid #cbd5e1 !important;\n  border-color: #cbd5e1 !important;\n  transition: all 0.2s ease !important;\n  text-decoration: none !important;\n}\n\n.dms-btn-secondary:hover {\n  background: #f8fafc !important;\n  color: #2563eb !important;\n  border-color: #cbd5e1 !important;\n  transform: translateY(-2px) !important;\n  text-decoration: none !important;\n}\n\n.dms-btn-secondary svg, .dms-btn-secondary span {\n  color: #0f172a !important;\n  -webkit-text-fill-color: #0f172a !important;\n}\n\n.dms-btn-secondary:hover svg, .dms-btn-secondary:hover span {\n  color: #2563eb !important;\n  -webkit-text-fill-color: #2563eb !important;\n}\n\n\/* ==========================================================================\n   STANDARDIZED HEADINGS ACCENT TEXT GRADIENT\n   Starting blue: #0052FF | Ending deep blue: #002B80 | Angle: 135deg\n   ========================================================================== *\/\n.dms-section-header h2 span,\n.dms-hero-content h1 span,\n.dms-why-content h2 span,\n.dms-highlight,\n.dms-page-wrapper h1 span,\n.dms-page-wrapper h2 span {\n  background: linear-gradient(135deg, #0052ff 0%, #002b80 100%) !important;\n  -webkit-background-clip: text !important;\n  -webkit-text-fill-color: transparent !important;\n  background-clip: text !important;\n  color: transparent !important;\n  display: inline-block !important;\n}\n\n<\/style>\n\n<div class=\"dms-page-wrapper\">\n\n  <!-- 1. HERO -->\n  <section class=\"dms-hero-section\">\n    <div class=\"dms-container\">\n\n      <nav class=\"dms-breadcrumb\" aria-label=\"Breadcrumb\">\n        <a href=\"https:\/\/web.annulartechnologies.com\/staging\/\">Home<\/a>\n        <span aria-hidden=\"true\">\/<\/span>\n        <span>Products<\/span>\n        <span aria-hidden=\"true\">\/<\/span>\n        <span class=\"curr\">Device Management System<\/span>\n      <\/nav>\n\n      <div class=\"dms-hero-grid\">\n        <div class=\"dms-hero-content\">\n\n          <h1>\n            Manage and Secure Android Devices from\n            <span>One Centralized Platform<\/span>\n          <\/h1>\n\n          <p>\n            Simplify the way your organization deploys, monitors and\n            manages Android devices. Device Management System helps\n            IT teams manage device configurations, applications,\n            security policies and device status from a centralized\n            management environment.\n          <\/p>\n\n          <div class=\"dms-btn-group\">\n            <a href=\"#dms-contact\" class=\"dms-btn-primary\">\n              Talk to Our Team\n              <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\"\n                fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n                stroke-linecap=\"round\" stroke-linejoin=\"round\"\n                aria-hidden=\"true\">\n                <path d=\"M5 12h14\"><\/path>\n                <path d=\"m12 5 7 7-7 7\"><\/path>\n              <\/svg>\n            <\/a>\n          <\/div>\n        <\/div>\n\n        <div class=\"dms-hero-image-frame\">\n          <img decoding=\"async\"\n            src=\"https:\/\/web.annulartechnologies.com\/staging\/wp-content\/uploads\/2026\/10\/quantem-dms-hero-1.png\"\n            alt=\"Device management command center\"\n            width=\"600\"\n            height=\"460\"\n            fetchpriority=\"high\"\n          \/>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 2. OVERVIEW -->\n  <section class=\"dms-section dms-overview-section\" id=\"dms-overview\">\n    <div class=\"dms-container\">\n\n      <div class=\"dms-section-header\">\n        <h2>Enterprise Mobile & <span>Endpoint Control<\/span><\/h2>\n      <\/div>\n\n      <div class=\"dms-overview-box\">\n        <p>\n          Device Management System is an enterprise device management\n          platform designed to help organizations manage mobile and\n          endpoint devices throughout their lifecycle. It brings device\n          provisioning, application management, security enforcement,\n          remote support and monitoring into a centralized workflow,\n          helping IT teams maintain visibility and manage devices more\n          efficiently.\n        <\/p>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <!-- 3. KEY CAPABILITIES -->\n  <section class=\"dms-section dms-section-alt\" id=\"dms-capabilities\">\n    <div class=\"dms-container\">\n\n      <div class=\"dms-section-header\">\n        <h2>Comprehensive Controls for <span>Your Device Fleet<\/span><\/h2>\n        <p>\n          Explore eight core capabilities designed to give IT\n          administrators centralized control and visibility.\n        <\/p>\n      <\/div>\n\n      <div class=\"dms-cap-grid\">\n\n        <article class=\"dms-cap-card\">\n          <div class=\"dms-cap-icon\" aria-hidden=\"true\">\n            <i class=\"fas fa-desktop\"><\/i>\n          <\/div>\n          <h4>Centralized Device Monitoring and Management<\/h4>\n          <p>View and manage enrolled devices from a central dashboard.<\/p>\n        <\/article>\n\n        <article class=\"dms-cap-card\">\n          <div class=\"dms-cap-icon\" aria-hidden=\"true\">\n            <i class=\"fas fa-cogs\"><\/i>\n          <\/div>\n          <h4>Device Enrollment and Provisioning<\/h4>\n          <p>\n            Prepare devices with required applications, settings and\n            policies before assignment.\n          <\/p>\n        <\/article>\n\n        <article class=\"dms-cap-card\">\n          <div class=\"dms-cap-icon\" aria-hidden=\"true\">\n            <i class=\"fas fa-cubes\"><\/i>\n          <\/div>\n          <h4>Application Deployment and Updates<\/h4>\n          <p>\n            Distribute approved business applications and manage\n            updates remotely.\n          <\/p>\n        <\/article>\n\n        <article class=\"dms-cap-card\">\n          <div class=\"dms-cap-icon\" aria-hidden=\"true\">\n            <i class=\"fas fa-tablet-alt\"><\/i>\n          <\/div>\n          <h4>Kiosk Mode and Digital Signage<\/h4>\n          <p>\n            Configure supported devices for dedicated business use,\n            including kiosks, POS terminals and digital signage.\n          <\/p>\n        <\/article>\n\n        <article class=\"dms-cap-card\">\n          <div class=\"dms-cap-icon\" aria-hidden=\"true\">\n            <i class=\"fas fa-shield-alt\"><\/i>\n          <\/div>\n          <h4>Device Security and Policy Enforcement<\/h4>\n          <p>\n            Apply device restrictions and security settings according\n            to organizational requirements.\n          <\/p>\n        <\/article>\n\n        <article class=\"dms-cap-card\">\n          <div class=\"dms-cap-icon\" aria-hidden=\"true\">\n            <i class=\"fas fa-map-marker-alt\"><\/i>\n          <\/div>\n          <h4>Asset Tracking and Location Monitoring<\/h4>\n          <p>\n            Maintain visibility into device inventory and location\n            information where supported and enabled.\n          <\/p>\n        <\/article>\n\n        <article class=\"dms-cap-card\">\n          <div class=\"dms-cap-icon\" aria-hidden=\"true\">\n            <i class=\"fas fa-user-shield\"><\/i>\n          <\/div>\n          <h4>BYOD Work Profile Management<\/h4>\n          <p>\n            Support work-profile use cases that separate business\n            information from personal use on supported Android devices.\n          <\/p>\n        <\/article>\n\n        <article class=\"dms-cap-card\">\n          <div class=\"dms-cap-icon\" aria-hidden=\"true\">\n            <i class=\"fas fa-headset\"><\/i>\n          <\/div>\n          <h4>Remote Support and Troubleshooting<\/h4>\n          <p>\n            Help IT teams diagnose supported device issues without\n            always requiring an onsite visit.\n          <\/p>\n        <\/article>\n\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 4. DEVICE LIFECYCLE -->\n  <section class=\"dms-section\" id=\"dms-lifecycle\">\n    <div class=\"dms-container\">\n\n      <div class=\"dms-section-header\">\n        <h2>Manage the <span>Device Lifecycle<\/span><\/h2>\n        <p>\n          A unified five-stage lifecycle covering initial registration\n          through secure decommissioning.\n        <\/p>\n      <\/div>\n\n      <div class=\"dms-lifecycle-grid\">\n\n        <article class=\"dms-step-card\">\n          <div class=\"dms-step-num\">01<\/div>\n          <h3>Enroll<\/h3>\n          <p>Register devices through supported enrollment methods.<\/p>\n        <\/article>\n\n        <article class=\"dms-step-card\">\n          <div class=\"dms-step-num\">02<\/div>\n          <h3>Provision<\/h3>\n          <p>Configure applications, network settings and policies.<\/p>\n        <\/article>\n\n        <article class=\"dms-step-card\">\n          <div class=\"dms-step-num\">03<\/div>\n          <h3>Deploy<\/h3>\n          <p>\n            Assign configured devices to employees, teams or specific\n            business functions.\n          <\/p>\n        <\/article>\n\n        <article class=\"dms-step-card\">\n          <div class=\"dms-step-num\">04<\/div>\n          <h3>Manage<\/h3>\n          <p>\n            Monitor status, apply policies, update applications and\n            troubleshoot issues.\n          <\/p>\n        <\/article>\n\n        <article class=\"dms-step-card\">\n          <div class=\"dms-step-num\">05<\/div>\n          <h3>Retire<\/h3>\n          <p>\n            Remove organizational access and business data according\n            to the approved retirement process.\n          <\/p>\n        <\/article>\n\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 5. BUSINESS USE CASES -->\n  <section class=\"dms-section dms-section-alt\" id=\"dms-usecases\">\n    <div class=\"dms-container\">\n\n      <div class=\"dms-section-header\">\n        <h2>Designed for <span>Business Device Use Cases<\/span><\/h2>\n      <\/div>\n\n      <div class=\"dms-usecases-grid\">\n\n        <div class=\"dms-usecase-box\">\n          <div class=\"dms-usecase-icon\" aria-hidden=\"true\">\n            <i class=\"fas fa-building\"><\/i>\n          <\/div>\n          <h4>Company-owned Android devices<\/h4>\n        <\/div>\n\n        <div class=\"dms-usecase-box\">\n          <div class=\"dms-usecase-icon\" aria-hidden=\"true\">\n            <i class=\"fas fa-id-badge\"><\/i>\n          <\/div>\n          <h4>\n            Employee devices using supported work-profile or BYOD\n            configurations\n          <\/h4>\n        <\/div>\n\n        <div class=\"dms-usecase-box\">\n          <div class=\"dms-usecase-icon\" aria-hidden=\"true\">\n            <i class=\"fas fa-store\"><\/i>\n          <\/div>\n          <h4>Dedicated devices and kiosk deployments<\/h4>\n        <\/div>\n\n        <div class=\"dms-usecase-box\">\n          <div class=\"dms-usecase-icon\" aria-hidden=\"true\">\n            <i class=\"fas fa-cash-register\"><\/i>\n          <\/div>\n          <h4>Point-of-sale and frontline devices<\/h4>\n        <\/div>\n\n        <div class=\"dms-usecase-box\">\n          <div class=\"dms-usecase-icon\" aria-hidden=\"true\">\n            <i class=\"fas fa-tv\"><\/i>\n          <\/div>\n          <h4>Digital signage and supported Android endpoints<\/h4>\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 6. BUSINESS BENEFITS -->\n  <section class=\"dms-section\" id=\"dms-benefits\">\n    <div class=\"dms-container\">\n\n      <div class=\"dms-section-header\">\n        <h2>Measurable Outcomes for <span>IT Operations<\/span><\/h2>\n      <\/div>\n\n      <div class=\"dms-benefits-strip\">\n        <div class=\"dms-benefits-list\">\n\n          <div class=\"dms-benefit-row\">\n            <div class=\"dms-benefit-check\" aria-hidden=\"true\">\n              <i class=\"fas fa-check\"><\/i>\n            <\/div>\n            <h3>Centralized visibility into managed devices<\/h3>\n          <\/div>\n\n          <div class=\"dms-benefit-row\">\n            <div class=\"dms-benefit-check\" aria-hidden=\"true\">\n              <i class=\"fas fa-check\"><\/i>\n            <\/div>\n            <h3>More consistent application deployment and configuration<\/h3>\n          <\/div>\n\n          <div class=\"dms-benefit-row\">\n            <div class=\"dms-benefit-check\" aria-hidden=\"true\">\n              <i class=\"fas fa-check\"><\/i>\n            <\/div>\n            <h3>Reduced manual effort for routine device administration<\/h3>\n          <\/div>\n\n          <div class=\"dms-benefit-row\">\n            <div class=\"dms-benefit-check\" aria-hidden=\"true\">\n              <i class=\"fas fa-check\"><\/i>\n            <\/div>\n            <h3>Greater control over device policies and approved applications<\/h3>\n          <\/div>\n\n          <div class=\"dms-benefit-row\">\n            <div class=\"dms-benefit-check\" aria-hidden=\"true\">\n              <i class=\"fas fa-check\"><\/i>\n            <\/div>\n            <h3>A more structured approach to device lifecycle management<\/h3>\n          <\/div>\n\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 7. TECHNOLOGY STACK -->\n  <section class=\"dms-section dms-section-alt\" id=\"dms-tech\">\n    <div class=\"dms-container\">\n\n      <div class=\"dms-section-header\">\n        <h2>Enterprise <span>Technology Stack<\/span><\/h2>\n        <p>\n          The Annular corporate brochure lists the following technology\n          stack for the device management project.\n        <\/p>\n      <\/div>\n\n      <div class=\"dms-tech-grid\">\n\n        <article class=\"dms-tech-card\">\n          <span class=\"dms-tech-badge-role\">Frontend<\/span>\n          <h3>React.js<\/h3>\n          <p>Responsive administrator console and fleet management portal.<\/p>\n        <\/article>\n\n        <article class=\"dms-tech-card\">\n          <span class=\"dms-tech-badge-role\">Backend<\/span>\n          <h3>Java, Spring Boot and REST APIs<\/h3>\n          <p>Backend services and APIs for device management workflows.<\/p>\n        <\/article>\n\n        <article class=\"dms-tech-card\">\n          <span class=\"dms-tech-badge-role\">Database<\/span>\n          <h3>PostgreSQL<\/h3>\n          <p>Relational database for device records and management data.<\/p>\n        <\/article>\n\n        <article class=\"dms-tech-card\">\n          <span class=\"dms-tech-badge-role\">Mobile<\/span>\n          <h3>Android<\/h3>\n          <p>Mobile platform for supported device management capabilities.<\/p>\n        <\/article>\n\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 8. WHY ANNULAR -->\n \n\n  <!-- 9. FREQUENTLY ASKED QUESTIONS -->\n  <section class=\"dms-section dms-section-alt\" id=\"dms-faqs\">\n    <div class=\"dms-container\">\n\n      <div class=\"dms-section-header\">\n        <h2>Common <span>Questions<\/span><\/h2>\n        <p>\n          Find answers to common questions about device management\n          and supported deployment scenarios.\n        <\/p>\n      <\/div>\n\n      <div class=\"dms-accordion\">\n\n        <div class=\"dms-accordion-item active\">\n          <button\n            class=\"dms-accordion-header\"\n            type=\"button\"\n            aria-expanded=\"true\"\n          >\n            <h3>\n              What can Device Management System help organizations manage?\n            <\/h3>\n            <span class=\"dms-accordion-icon\" aria-hidden=\"true\">\n              <i class=\"fas fa-chevron-down\"><\/i>\n            <\/span>\n          <\/button>\n          <div class=\"dms-accordion-body\">\n            It supports centralized management activities such as\n            device monitoring, application deployment, policy\n            enforcement and device lifecycle administration.\n          <\/div>\n        <\/div>\n\n        <div class=\"dms-accordion-item\">\n          <button\n            class=\"dms-accordion-header\"\n            type=\"button\"\n            aria-expanded=\"false\"\n          >\n            <h3>Can it support kiosk deployments?<\/h3>\n            <span class=\"dms-accordion-icon\" aria-hidden=\"true\">\n              <i class=\"fas fa-chevron-down\"><\/i>\n            <\/span>\n          <\/button>\n          <div class=\"dms-accordion-body\" hidden>\n            Kiosk mode and digital signage management are listed in\n            the project materials. Supported device models and\n            configurations should be confirmed during product evaluation.\n          <\/div>\n        <\/div>\n\n        <div class=\"dms-accordion-item\">\n          <button\n            class=\"dms-accordion-header\"\n            type=\"button\"\n            aria-expanded=\"false\"\n          >\n            <h3>Does it support BYOD?<\/h3>\n            <span class=\"dms-accordion-icon\" aria-hidden=\"true\">\n              <i class=\"fas fa-chevron-down\"><\/i>\n            <\/span>\n          <\/button>\n          <div class=\"dms-accordion-body\" hidden>\n            The project materials list BYOD work-profile management.\n            Available controls depend on the device and supported\n            Android configuration.\n          <\/div>\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 10. FINAL CTA -->\n  <section class=\"dms-cta-section\" id=\"dms-contact\">\n    <div class=\"dms-container\">\n\n      <div class=\"dms-cta-inner\">\n\n        <h2>Bring Your Android Device Fleet Into View<\/h2>\n\n        <p>\n          Looking to improve visibility and control across your\n          Android device fleet? Contact Annular to discuss your\n          device management requirements.\n        <\/p>\n\n        <div class=\"dms-shared-cta-box\">\n          <h4>Have a product requirement or want to learn more?<\/h4>\n          <p>\n            Contact Annular Technologies to discuss the product,\n            confirm available capabilities and explore a suitable\n            next step.\n          <\/p>\n\n          <div class=\"dms-btn-group\">\n            <a\n              href=\"https:\/\/web.annulartechnologies.com\/staging\/contact\/\"\n              class=\"dms-btn-primary\"\n            >\n              Contact Us\n            <\/a>\n\n            \n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n<\/div>\n\n<!-- =========================================================\n PAGE INTERACTIONS\n========================================================= -->\n<script>\n(function () {\n  \"use strict\";\n\n  function initializeDmsPage() {\n    const page = document.querySelector(\".dms-page-wrapper\");\n\n    if (!page || page.dataset.dmsInitialized === \"true\") {\n      return;\n    }\n\n    page.dataset.dmsInitialized = \"true\";\n\n    \/* Accessible FAQ accordion *\/\n    const items = page.querySelectorAll(\".dms-accordion-item\");\n\n    items.forEach(function (item) {\n      const button = item.querySelector(\".dms-accordion-header\");\n      const body = item.querySelector(\".dms-accordion-body\");\n\n      if (!button || !body) {\n        return;\n      }\n\n      button.addEventListener(\"click\", function () {\n        const willOpen = !item.classList.contains(\"active\");\n\n        items.forEach(function (otherItem) {\n          const otherButton =\n            otherItem.querySelector(\".dms-accordion-header\");\n          const otherBody =\n            otherItem.querySelector(\".dms-accordion-body\");\n\n          otherItem.classList.remove(\"active\");\n\n          if (otherButton) {\n            otherButton.setAttribute(\"aria-expanded\", \"false\");\n          }\n\n          if (otherBody) {\n            otherBody.hidden = true;\n          }\n        });\n\n        if (willOpen) {\n          item.classList.add(\"active\");\n          button.setAttribute(\"aria-expanded\", \"true\");\n          body.hidden = false;\n        }\n      });\n    });\n  }\n\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\n      \"DOMContentLoaded\",\n      initializeDmsPage\n    );\n  } else {\n    initializeDmsPage();\n  }\n})();\n<\/script><\/div><\/div><\/div><\/div>\n<div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-2 fusion-flex-container hundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-padding-top:0px;--awb-padding-right:0px;--awb-padding-bottom:0px;--awb-padding-left:0px;--awb-margin-top:0px;--awb-margin-bottom:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"width:104% !important;max-width:104% !important;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-1 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-padding-top:0px;--awb-padding-right:0px;--awb-padding-bottom:0px;--awb-padding-left:0px;--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-flex-justify-content-flex-start fusion-content-layout-column\"><!-- =====================================================\n ANNULAR TECHNOLOGIES | TWO-STEP CONSULTATION POPUP\n WordPress \/ Avada + EmailJS + Email OTP\n Responsive Form + PODS \/ Annular Domain Detection\n===================================================== -->\n\n<style>\n#annular-open {\n  display:inline-flex;align-items:center;justify-content:center;\n  min-height:48px;padding:13px 25px;border:0;border-radius:30px;\n  max-width: 40%;\n  background:#175cff;color:#fff;font-family:inherit;font-size:14px;\n  font-weight:600;cursor:pointer;transition:.2s;\n}\n#annular-open:hover {background:#1048d8;transform:translateY(-1px)}\n\nhtml.annular-popup-open,body.annular-popup-open {\n  overflow:hidden!important;\n}\n\n#annular-modal,#annular-thankyou-modal {\n  display:none;position:fixed!important;inset:0!important;\n  z-index:2147483647!important;width:100%!important;height:100vh!important;\n  height:100dvh!important;box-sizing:border-box!important;padding:16px!important;\n  align-items:center!important;justify-content:center!important;\n  overflow-y:auto!important;background:rgba(15,23,42,.68);\n}\n#annular-modal.is-open,#annular-thankyou-modal.is-open {\n  display:flex!important;\n}\n\n#annular-modal .annular-card {\n  position:relative;width:100%;max-width:480px;\n  max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);\n  box-sizing:border-box;margin:auto;padding:27px;\n  overflow-y:auto;overscroll-behavior:contain;\n  border:1px solid #eaecf0;border-radius:20px;\n  background:#fff;color:#171717;box-shadow:0 20px 70px #0003;\n}\n\n#annular-modal h3 {\n  margin:0 42px 8px 0;color:#171717;font-size:25px;\n  font-weight:700;line-height:1.3;\n}\n#annular-modal .annular-description {\n  margin:0 0 20px;color:#667085;font-size:13px;line-height:1.7;\n}\n\n#annular-close,#annular-thankyou-close {\n  position:absolute;top:12px;right:12px;display:flex;\n  align-items:center;justify-content:center;width:34px;height:34px;\n  padding:0;border:0;border-radius:50%;background:#f3f4f6;\n  color:#4b5563;font-size:24px;cursor:pointer;\n}\n#annular-close:hover,#annular-thankyou-close:hover {\n  background:#e5e7eb;\n}\n\n#annular-modal .annular-progress {\n  display:flex;align-items:center;gap:10px;margin:0 0 20px;\n}\n#annular-modal .annular-progress-line {\n  flex:1;height:3px;border-radius:5px;background:#e5e7eb;\n}\n#annular-modal .annular-progress-line.active {\n  background:#175cff;\n}\n#annular-modal .annular-step-label {\n  margin-bottom:8px;color:#175cff;font-size:11px;font-weight:700;\n  letter-spacing:1px;text-transform:uppercase;\n}\n#annular-modal #annular-form {\n  width:100%;margin:0;\n}\n#annular-modal .annular-screen[hidden],\n#annular-modal #annular-otp-area[hidden] {\n  display:none!important;\n}\n#annular-modal .annular-field {\n  width:100%;min-width:0;margin:0 0 16px;\n}\n#annular-modal label {\n  display:block;margin-bottom:7px;color:#344054;font-size:13px;\n  font-weight:600;line-height:1.4;\n}\n#annular-modal input,#annular-modal textarea {\n  display:block;width:100%;min-width:0;min-height:46px;\n  box-sizing:border-box;margin:0;padding:12px 14px;\n  border:1px solid #d0d5dd;border-radius:11px;background:#fff;\n  color:#171717;font-family:inherit;font-size:14px;line-height:1.5;\n  box-shadow:none;transition:border-color .2s,box-shadow .2s;\n}\n#annular-modal textarea {\n  min-height:105px;resize:vertical;\n}\n#annular-modal input::placeholder,\n#annular-modal textarea::placeholder {\n  color:#98a2b3;\n}\n#annular-modal input:focus,#annular-modal textarea:focus {\n  border-color:#175cff;outline:none;box-shadow:0 0 0 3px #175cff1f;\n}\n#annular-modal button,#annular-thankyou-modal button {\n  font-family:inherit;\n}\n\n#annular-modal .annular-inline-row {\n  display:flex;align-items:stretch;gap:8px;width:100%;\n}\n#annular-modal .annular-inline-row input {\n  flex:1 1 auto;width:100%;\n}\n#annular-send-otp,#annular-verify {\n  display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;\n  min-height:46px;padding:10px 14px;border:0;border-radius:25px;\n  background:#eaf0ff;color:#175cff;font-size:12px;font-weight:700;\n  white-space:nowrap;cursor:pointer;\n}\n#annular-send-otp:hover:not(:disabled),\n#annular-verify:hover:not(:disabled) {\n  background:#d9e5ff;\n}\n#annular-send-otp:disabled,#annular-verify:disabled {\n  opacity:.5;cursor:not-allowed;\n}\n#annular-otp-area {\n  margin:0 0 16px;padding:15px;border:1px solid #e4e9f2;\n  border-radius:14px;background:#f8faff;\n}\n#annular-modal #annular-otp {\n  letter-spacing:5px;font-size:17px;font-weight:700;\n}\n\n#annular-next,#annular-submit,#annular-back {\n  display:inline-flex;align-items:center;justify-content:center;\n  min-height:47px;box-sizing:border-box;padding:12px 18px;\n  border:0;border-radius:28px;font-size:14px;font-weight:700;\n  cursor:pointer;transition:background .2s,opacity .2s;\n}\n#annular-next,#annular-submit {\n  width:100%;background:#175cff;color:#fff;\n}\n#annular-next:hover:not(:disabled),\n#annular-submit:hover:not(:disabled) {\n  background:#1048d8;\n}\n#annular-next:disabled,#annular-submit:disabled {\n  opacity:.5;cursor:not-allowed;\n}\n#annular-back {\n  flex:0 0 auto;background:#f2f4f7;color:#344054;\n}\n#annular-back:hover {\n  background:#e4e7ec;\n}\n#annular-step2-actions {\n  display:flex;gap:10px;margin-top:8px;\n}\n#annular-step2-actions #annular-submit {\n  flex:1;\n}\n#annular-status {\n  margin-top:12px;color:#475569;font-size:12px;line-height:1.6;\n  overflow-wrap:anywhere;\n}\n#annular-status:empty {\n  display:none;\n}\n#annular-status.success {\n  color:#087443;\n}\n#annular-status.error {\n  color:#b42318;\n}\n\n#annular-thankyou-modal .annular-thankyou-card {\n  position:relative;width:100%;max-width:420px;box-sizing:border-box;\n  margin:auto;padding:40px 30px 30px;border:1px solid #eaecf0;\n  border-radius:22px;background:#fff;color:#171717;text-align:center;\n  box-shadow:0 24px 80px #0005;animation:annular-thankyou-in .25s ease-out;\n}\n#annular-thankyou-modal .annular-success-icon {\n  display:flex;align-items:center;justify-content:center;width:66px;height:66px;\n  margin:0 auto 20px;border:1px solid #b7ebcf;border-radius:50%;\n  background:#ecfdf3;color:#087443;font-size:34px;font-weight:700;\n}\n#annular-thankyou-modal h3 {\n  margin:0 0 12px;font-size:25px;font-weight:700;\n}\n#annular-thankyou-modal .annular-thankyou-message {\n  margin:0 auto 24px;max-width:320px;color:#667085;font-size:14px;line-height:1.8;\n}\n#annular-thankyou-modal .annular-thankyou-button {\n  width:100%;min-height:46px;padding:12px 20px;border:0;border-radius:28px;\n  background:#175cff;color:#fff;font-size:14px;font-weight:700;cursor:pointer;\n}\n#annular-thankyou-modal .annular-thankyou-button:hover {\n  background:#1048d8;\n}\n@keyframes annular-thankyou-in {\n  from {opacity:0;transform:translateY(12px) scale(.98)}\n  to {opacity:1;transform:translateY(0) scale(1)}\n}\n\n@media(max-width:600px) {\n  #annular-modal {padding:10px!important}\n  #annular-modal .annular-card {\n    max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);\n    padding:22px 17px;border-radius:17px;\n  }\n  #annular-modal h3 {font-size:22px}\n  #annular-modal .annular-description {margin-bottom:16px}\n  #annular-modal input,#annular-modal textarea {font-size:16px}\n  #annular-modal .annular-inline-row {gap:6px}\n  #annular-send-otp,#annular-verify {padding:9px 10px;font-size:11px}\n  #annular-thankyou-modal .annular-thankyou-card {padding:36px 22px 24px}\n}\n@media(max-height:650px) {\n  #annular-modal {align-items:flex-start!important;padding:10px!important}\n  #annular-modal .annular-card {\n    max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);\n    margin:0 auto;padding-top:18px;padding-bottom:18px;\n  }\n  #annular-modal .annular-field {margin-bottom:12px}\n}\n<\/style>\n\n<!-- OPEN BUTTON -->\n\n\n<!-- CONSULTATION POPUP -->\n<div id=\"annular-modal\" role=\"dialog\" aria-modal=\"true\"\n     aria-labelledby=\"annular-title\" aria-hidden=\"true\">\n  <div class=\"annular-card\">\n    <button id=\"annular-close\" type=\"button\" aria-label=\"Close form\">\u00d7<\/button>\n\n    <h3 id=\"annular-title\">Talk to Our Team<\/h3>\n    <p class=\"annular-description\">\n      Share your requirements and our team will get in touch.\n    <\/p>\n\n    <div class=\"annular-progress\" aria-label=\"Form progress\">\n      <div id=\"annular-progress-1\" class=\"annular-progress-line active\"><\/div>\n      <div id=\"annular-progress-2\" class=\"annular-progress-line\"><\/div>\n    <\/div>\n\n    <form id=\"annular-form\">\n      <!-- STEP 1 -->\n      <section id=\"annular-screen-1\" class=\"annular-screen\">\n        <div class=\"annular-step-label\">Step 1 of 2<\/div>\n\n        <div class=\"annular-field\">\n          <label for=\"annular-name\">Full Name *<\/label>\n          <input id=\"annular-name\" name=\"user_name\" type=\"text\"\n                 placeholder=\"Enter your full name\" autocomplete=\"name\"\n                 maxlength=\"120\" required>\n        <\/div>\n\n        <div class=\"annular-field\">\n          <label for=\"annular-email\">Email *<\/label>\n          <div class=\"annular-inline-row\">\n            <input id=\"annular-email\" name=\"user_email\" type=\"email\"\n                   placeholder=\"Enter your email address\" autocomplete=\"email\"\n                   maxlength=\"254\" required>\n            <button id=\"annular-send-otp\" type=\"button\" disabled>Send OTP<\/button>\n          <\/div>\n        <\/div>\n\n        <div id=\"annular-otp-area\" hidden>\n          <div class=\"annular-field\">\n            <label for=\"annular-otp\">Enter Email OTP *<\/label>\n            <div class=\"annular-inline-row\">\n              <input id=\"annular-otp\" name=\"otp\" type=\"text\"\n                     inputmode=\"numeric\" autocomplete=\"one-time-code\"\n                     maxlength=\"6\" pattern=\"[0-9]{6}\" placeholder=\"6-digit OTP\">\n              <button id=\"annular-verify\" type=\"button\">Verify<\/button>\n            <\/div>\n          <\/div>\n          <p style=\"margin:0;color:#667085;font-size:12px;line-height:1.6\">\n            Check your inbox and spam folder for the verification code.\n          <\/p>\n        <\/div>\n\n        <button id=\"annular-next\" type=\"button\" disabled style=\"margin-top:8px\">\n          Continue \u2192\n        <\/button>\n      <\/section>\n\n      <!-- STEP 2 -->\n      <section id=\"annular-screen-2\" class=\"annular-screen\" hidden>\n        <div class=\"annular-step-label\">Step 2 of 2<\/div>\n        <p style=\"margin:0 0 17px;color:#667085;font-size:13px;line-height:1.6\">\n          Your email is verified. Tell us a little more about your requirements.\n        <\/p>\n\n        <div class=\"annular-field\">\n          <label for=\"annular-mobile\">Mobile Number *<\/label>\n          <input id=\"annular-mobile\" name=\"user_mobile\" type=\"tel\"\n                 placeholder=\"Enter your mobile number\" autocomplete=\"tel\"\n                 maxlength=\"20\" pattern=\"[+]?[0-9 ()-]{7,20}\"\n                 title=\"Enter a valid mobile number.\" required>\n        <\/div>\n\n        <div class=\"annular-field\">\n          <label for=\"annular-help\">How Can We Help? *<\/label>\n          <textarea id=\"annular-help\" name=\"message\"\n                    placeholder=\"Tell us about your project or requirements\"\n                    maxlength=\"4000\" required><\/textarea>\n        <\/div>\n\n        <div id=\"annular-step2-actions\">\n          <button id=\"annular-back\" type=\"button\">\u2190 Back<\/button>\n          <button id=\"annular-submit\" type=\"submit\" disabled>Submit Enquiry<\/button>\n        <\/div>\n      <\/section>\n\n      <div id=\"annular-status\" role=\"status\" aria-live=\"polite\"><\/div>\n    <\/form>\n  <\/div>\n<\/div>\n\n<!-- THANK-YOU POPUP -->\n<div id=\"annular-thankyou-modal\" role=\"dialog\" aria-modal=\"true\"\n     aria-labelledby=\"annular-thankyou-title\"\n     aria-describedby=\"annular-thankyou-description\" aria-hidden=\"true\">\n  <div class=\"annular-thankyou-card\">\n    <button id=\"annular-thankyou-close\" type=\"button\"\n            aria-label=\"Close thank-you message\">\u00d7<\/button>\n\n    <div class=\"annular-success-icon\" aria-hidden=\"true\">\u2713<\/div>\n    <h3 id=\"annular-thankyou-title\">Thank You!<\/h3>\n    <p id=\"annular-thankyou-description\" class=\"annular-thankyou-message\">\n      Your consultation request has been submitted successfully.\n      Our team will review your requirements and get in touch with you soon.\n    <\/p>\n    <button id=\"annular-thankyou-done\" type=\"button\"\n            class=\"annular-thankyou-button\">Done<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@emailjs\/browser@4\/dist\/email.min.js\"><\/script>\n\n<script>\n(() => {\n  \"use strict\";\n\n  \/* EMAILJS SETTINGS *\/\n  const SERVICE_ID = \"service_56m8mns\";\n  const PUBLIC_KEY = \"7krsXzZ1B4qnPrCGC\";\n  const OTP_TEMPLATE_ID = \"template_6r4w7s6\";\n  const ENQUIRY_TEMPLATE_ID = \"template_ol5pw49\";\n\n  \/* WEBSITE DETECTION *\/\n  const hostname = window.location.hostname.toLowerCase().replace(\/\\.$\/, \"\");\n\n  const isPods = [\n    \"pods.annulartechnologies.com\",\n    \"www.pods.annulartechnologies.com\"\n  ].includes(hostname);\n\n  const isAnnular = [\n    \"annulartechnologies.com\",\n    \"www.annulartechnologies.com\",\n    \"web.annulartechnologies.com\"\n  ].includes(hostname);\n\n  const $ = id => document.getElementById(id);\n\n  const openButton = $(\"annular-open\") || { addEventListener: () => {}, focus: () => {} };\n  let currentServiceContext = \"Quantem (Device Management System)\";\n  let currentTitleContext = \"Talk to Our Team\";\n  const modal = $(\"annular-modal\");\n  const thankyouModal = $(\"annular-thankyou-modal\");\n  const form = $(\"annular-form\");\n\n  const nameInput = $(\"annular-name\");\n  const emailInput = $(\"annular-email\");\n  const mobileInput = $(\"annular-mobile\");\n  const helpInput = $(\"annular-help\");\n  const otpArea = $(\"annular-otp-area\");\n  const otpInput = $(\"annular-otp\");\n\n  const sendButton = $(\"annular-send-otp\");\n  const verifyButton = $(\"annular-verify\");\n  const nextButton = $(\"annular-next\");\n  const backButton = $(\"annular-back\");\n  const submitButton = $(\"annular-submit\");\n  const status = $(\"annular-status\");\n\n  let currentOTP = \"\";\n  let verifiedEmail = \"\";\n  let otpExpiresAt = 0;\n  let otpAttempts = 0;\n  let resendAvailableAt = 0;\n  let resendTimer = null;\n  let sendingOTP = false;\n  let sendingEnquiry = false;\n  let requestVersion = 0;\n  let previousFocus = null;\n  let previousBodyOverflow = \"\";\n  let previousHtmlOverflow = \"\";\n\n  \/* Move popups outside Avada containers *\/\n  document.body.appendChild(modal);\n  document.body.appendChild(thankyouModal);\n\n  function setStatus(message, type = \"\") {\n    status.textContent = message;\n    status.className = type;\n  }\n\n  function getEmail() {\n    return emailInput.value.trim().toLowerCase();\n  }\n\n  function emailJSReady() {\n    return Boolean(window.emailjs &&\n      typeof window.emailjs.send === \"function\");\n  }\n\n  if (emailJSReady()) {\n    window.emailjs.init({ publicKey: PUBLIC_KEY });\n  } else {\n    setStatus(\"Email service failed to load. Refresh the page and try again.\", \"error\");\n  }\n\n  \/* Enable OTP only when the email is valid *\/\n  function updateSendButton() {\n    const validEmail =\n      emailInput.value.trim() !== \"\" && emailInput.checkValidity();\n\n    const coolingDown = Date.now() < resendAvailableAt;\n\n    sendButton.disabled =\n      !validEmail || sendingOTP || sendingEnquiry || coolingDown;\n  }\n\n  \/* Enable Continue only when name and verified email are valid *\/\n  function updateContinueButton() {\n    const nameValid = nameInput.value.trim().length > 0;\n\n    const verificationValid =\n      verifiedEmail !== \"\" &&\n      verifiedEmail === getEmail() &&\n      Date.now() < otpExpiresAt;\n\n    nextButton.disabled = !(\n      nameValid && verificationValid && !sendingEnquiry\n    );\n  }\n\n  \/*\n   * IMPORTANT FIX:\n   * Submit is enabled only when:\n   * 1. Email has been verified and OTP is not expired.\n   * 2. Mobile number is valid.\n   * 3. Message is not empty.\n   * 4. No enquiry is currently being submitted.\n   *\/\n  function updateSubmitButton() {\n    const verificationValid =\n      verifiedEmail !== \"\" &&\n      verifiedEmail === getEmail() &&\n      currentOTP !== \"\" &&\n      Date.now() < otpExpiresAt;\n\n    const mobileValid =\n      mobileInput.value.trim() !== \"\" &&\n      mobileInput.checkValidity();\n\n    const messageValid =\n      helpInput.value.trim().length > 0;\n\n    submitButton.disabled = !(\n      verificationValid &&\n      mobileValid &&\n      messageValid &&\n      !sendingEnquiry\n    );\n  }\n\n  function lockPageScroll() {\n    previousBodyOverflow = document.body.style.overflow;\n    previousHtmlOverflow = document.documentElement.style.overflow;\n\n    document.documentElement.classList.add(\"annular-popup-open\");\n    document.body.classList.add(\"annular-popup-open\");\n\n    document.documentElement.style.overflow = \"hidden\";\n    document.body.style.overflow = \"hidden\";\n  }\n\n  function unlockPageScroll() {\n    document.documentElement.classList.remove(\"annular-popup-open\");\n    document.body.classList.remove(\"annular-popup-open\");\n\n    document.documentElement.style.overflow = previousHtmlOverflow;\n    document.body.style.overflow = previousBodyOverflow;\n  }\n\n  function openModal() {\n    previousFocus = document.activeElement;\n    lockPageScroll();\n\n    modal.classList.add(\"is-open\");\n    modal.setAttribute(\"aria-hidden\", \"false\");\n\n    requestAnimationFrame(() =>\n      nameInput.focus({ preventScroll: true })\n    );\n  }\n\n  function closeModal() {\n    modal.classList.remove(\"is-open\");\n    modal.setAttribute(\"aria-hidden\", \"true\");\n\n    if (!thankyouModal.classList.contains(\"is-open\")) {\n      unlockPageScroll();\n    }\n\n    if (previousFocus && typeof previousFocus.focus === \"function\") {\n      previousFocus.focus({ preventScroll: true });\n    }\n  }\n\n  \n  function openModalWithConfig(title, service) {\n    if (title) {\n      currentTitleContext = title;\n      const titleEl = $(\"annular-title\");\n      if (titleEl) titleEl.textContent = title;\n    }\n    if (service) {\n      currentServiceContext = service;\n    }\n    openModal();\n  }\n\n  \/\/ Attach global click listener for trigger buttons\n  const triggerList = [\".dms-btn-primary\",\".dms-btn-secondary\",\"a[href=\\\"#dms-contact\\\"]\",\"a[href*=\\\"\/contact\/\\\"]\"];\n  document.addEventListener(\"click\", function(event) {\n    const selectorStr = triggerList.join(\", \");\n    if (!selectorStr) return;\n    const trigger = event.target.closest(selectorStr);\n    if (trigger) {\n      event.preventDefault();\n      \/\/ Extract clean text from clicked button (stripping arrow icons like \u2192, \u2197)\n      const rawText = (trigger.innerText || \"\").replace(\/[\\u2190-\\u21FF\\u27F0-\\u27FF\\u2900-\\u297F\u2192\u2197\u2190\u25ba]\/g, \"\").trim();\n      const customTitle = trigger.getAttribute(\"data-modal-title\") || \n                          (rawText.length >= 3 && rawText.length <= 60 ? rawText : \"Talk to Our Team\");\n      const customService = trigger.getAttribute(\"data-service\") || \"Quantem (Device Management System)\";\n      openModalWithConfig(customTitle, customService);\n    }\n  });\n\n  openButton.addEventListener(\"click\", openModal);\n  $(\"annular-close\").addEventListener(\"click\", closeModal);\n\n  modal.addEventListener(\"click\", event => {\n    if (event.target === modal) closeModal();\n  });\n\n  function showThankYou() {\n    modal.classList.remove(\"is-open\");\n    modal.setAttribute(\"aria-hidden\", \"true\");\n\n    thankyouModal.classList.add(\"is-open\");\n    thankyouModal.setAttribute(\"aria-hidden\", \"false\");\n\n    requestAnimationFrame(() =>\n      $(\"annular-thankyou-done\").focus({ preventScroll: true })\n    );\n  }\n\n  function closeThankYou() {\n    thankyouModal.classList.remove(\"is-open\");\n    thankyouModal.setAttribute(\"aria-hidden\", \"true\");\n\n    unlockPageScroll();\n    openButton.focus({ preventScroll: true });\n  }\n\n  $(\"annular-thankyou-close\").addEventListener(\"click\", closeThankYou);\n  $(\"annular-thankyou-done\").addEventListener(\"click\", closeThankYou);\n\n  thankyouModal.addEventListener(\"click\", event => {\n    if (event.target === thankyouModal) closeThankYou();\n  });\n\n  document.addEventListener(\"keydown\", event => {\n    if (event.key !== \"Escape\") return;\n\n    if (thankyouModal.classList.contains(\"is-open\")) {\n      closeThankYou();\n    } else if (modal.classList.contains(\"is-open\")) {\n      closeModal();\n    }\n  });\n\n  function clearResendTimer() {\n    if (resendTimer) {\n      clearInterval(resendTimer);\n      resendTimer = null;\n    }\n  }\n\n  function resetVerification(message = \"\", type = \"\") {\n    requestVersion++;\n\n    currentOTP = \"\";\n    verifiedEmail = \"\";\n    otpExpiresAt = 0;\n    otpAttempts = 0;\n\n    otpArea.hidden = true;\n    otpInput.value = \"\";\n\n    verifyButton.disabled = false;\n\n    clearResendTimer();\n\n    updateSendButton();\n    updateContinueButton();\n    updateSubmitButton();\n\n    setStatus(message, type);\n  }\n\n  \/* Email edits invalidate the previous verification *\/\n  emailInput.addEventListener(\"input\", () => {\n    if (currentOTP || verifiedEmail || !otpArea.hidden) {\n      resetVerification(\n        \"Email changed. Please request a new OTP.\",\n        \"error\"\n      );\n    } else {\n      updateSendButton();\n      updateContinueButton();\n      updateSubmitButton();\n    }\n  });\n\n  nameInput.addEventListener(\"input\", updateContinueButton);\n\n  \/* CRITICAL FIX: update Submit whenever these fields change *\/\n  mobileInput.addEventListener(\"input\", updateSubmitButton);\n  mobileInput.addEventListener(\"change\", updateSubmitButton);\n  helpInput.addEventListener(\"input\", updateSubmitButton);\n  helpInput.addEventListener(\"change\", updateSubmitButton);\n\n  function generateOTP() {\n    if (!window.crypto || !window.crypto.getRandomValues) {\n      throw new Error(\"Secure random number generation is unavailable.\");\n    }\n\n    const values = new Uint32Array(1);\n    window.crypto.getRandomValues(values);\n\n    return String(values[0] % 1000000).padStart(6, \"0\");\n  }\n\n  \/* SEND OTP *\/\n  sendButton.addEventListener(\"click\", async () => {\n    if (!emailJSReady()) {\n      setStatus(\"Email service is unavailable. Please refresh and try again.\", \"error\");\n      return;\n    }\n\n    if (!emailInput.checkValidity()) {\n      emailInput.reportValidity();\n      updateSendButton();\n      return;\n    }\n\n    if (sendingOTP || sendingEnquiry) return;\n\n    if (Date.now() < resendAvailableAt) {\n      setStatus(\n        \"Please wait \" +\n        Math.ceil((resendAvailableAt - Date.now()) \/ 1000) +\n        \" seconds before requesting another OTP.\",\n        \"error\"\n      );\n\n      updateSendButton();\n      return;\n    }\n\n    const email = getEmail();\n    const version = ++requestVersion;\n\n    sendingOTP = true;\n    updateSendButton();\n\n    currentOTP = \"\";\n    verifiedEmail = \"\";\n    otpExpiresAt = 0;\n    otpAttempts = 0;\n\n    otpArea.hidden = true;\n    otpInput.value = \"\";\n\n    updateContinueButton();\n    updateSubmitButton();\n\n    setStatus(\"Sending OTP...\");\n\n    try {\n      const otp = generateOTP();\n\n      await window.emailjs.send(\n        SERVICE_ID,\n        OTP_TEMPLATE_ID,\n        {\n          email: email,\n          passcode: otp,\n          time: new Date(Date.now() + 5 * 60 * 1000)\n            .toLocaleTimeString()\n        }\n      );\n\n      if (version !== requestVersion) return;\n\n      if (getEmail() !== email) {\n        setStatus(\"Email changed. Please request a new OTP.\", \"error\");\n        return;\n      }\n\n      currentOTP = otp;\n      otpExpiresAt = Date.now() + 5 * 60 * 1000;\n      resendAvailableAt = Date.now() + 60000;\n\n      otpArea.hidden = false;\n\n      otpInput.focus({ preventScroll: true });\n\n      setStatus(\"OTP sent. Please check your email.\", \"success\");\n\n      clearResendTimer();\n\n      \/*\n       * Also refresh validation periodically so an expired OTP\n       * cannot leave the Submit button enabled.\n       *\/\n      resendTimer = setInterval(() => {\n        updateSendButton();\n        updateContinueButton();\n        updateSubmitButton();\n\n        if (Date.now() >= resendAvailableAt) {\n          resendAvailableAt = 0;\n          updateSendButton();\n        }\n\n        if (Date.now() >= otpExpiresAt) {\n          clearResendTimer();\n\n          if (verifiedEmail) {\n            verifiedEmail = \"\";\n            updateContinueButton();\n            updateSubmitButton();\n\n            setStatus(\n              \"OTP expired. Please request a new OTP to continue.\",\n              \"error\"\n            );\n          } else {\n            updateSubmitButton();\n          }\n        }\n      }, 1000);\n\n    } catch (error) {\n      console.error(\"OTP EmailJS error:\", error);\n\n      setStatus(\n        \"Unable to send OTP. Check your EmailJS service and OTP template.\",\n        \"error\"\n      );\n\n    } finally {\n      sendingOTP = false;\n      updateSendButton();\n      updateContinueButton();\n      updateSubmitButton();\n    }\n  });\n\n  \/* VERIFY OTP *\/\n  verifyButton.addEventListener(\"click\", () => {\n    const email = getEmail();\n    const enteredOTP = otpInput.value.trim();\n\n    if (!currentOTP || Date.now() >= otpExpiresAt) {\n      resetVerification(\"OTP expired. Please request a new OTP.\", \"error\");\n      return;\n    }\n\n    if (otpAttempts >= 5) {\n      resetVerification(\"Too many attempts. Please request a new OTP.\", \"error\");\n      return;\n    }\n\n    otpAttempts++;\n\n    if (!\/^\\d{6}$\/.test(enteredOTP) || enteredOTP !== currentOTP) {\n      verifiedEmail = \"\";\n\n      updateContinueButton();\n      updateSubmitButton();\n\n      if (otpAttempts >= 5) {\n        resetVerification(\n          \"Too many attempts. Please request a new OTP.\",\n          \"error\"\n        );\n      } else {\n        setStatus(\"Incorrect OTP. Please try again.\", \"error\");\n      }\n\n      return;\n    }\n\n    verifiedEmail = email;\n    verifyButton.disabled = true;\n\n    updateContinueButton();\n    updateSubmitButton();\n\n    setStatus(\"Email verified successfully.\", \"success\");\n  });\n\n  \/* STEP NAVIGATION *\/\n  nextButton.addEventListener(\"click\", () => {\n    if (!nameInput.checkValidity()) {\n      nameInput.reportValidity();\n      return;\n    }\n\n    if (!verifiedEmail || verifiedEmail !== getEmail()) {\n      setStatus(\"Please verify your email before continuing.\", \"error\");\n      return;\n    }\n\n    if (Date.now() >= otpExpiresAt) {\n      resetVerification(\"OTP expired. Please request a new OTP.\", \"error\");\n      return;\n    }\n\n    $(\"annular-screen-1\").hidden = true;\n    $(\"annular-screen-2\").hidden = false;\n\n    $(\"annular-progress-2\").classList.add(\"active\");\n\n    setStatus(\"\");\n\n    updateSubmitButton();\n\n    mobileInput.focus({ preventScroll: true });\n  });\n\n  backButton.addEventListener(\"click\", () => {\n    $(\"annular-screen-2\").hidden = true;\n    $(\"annular-screen-1\").hidden = false;\n\n    $(\"annular-progress-2\").classList.remove(\"active\");\n\n    setStatus(\"\");\n\n    updateContinueButton();\n    updateSubmitButton();\n  });\n\n  \/* SUBMIT ENQUIRY *\/\n  form.addEventListener(\"submit\", async event => {\n    event.preventDefault();\n\n    if (sendingEnquiry) return;\n\n    \/*\n     * Revalidate at submission time instead of trusting\n     * the button's disabled state alone.\n     *\/\n    updateSubmitButton();\n\n    if (!form.checkValidity()) {\n      form.reportValidity();\n      return;\n    }\n\n    const name = nameInput.value.trim();\n    const email = getEmail();\n    const mobile = mobileInput.value.trim();\n    const message = helpInput.value.trim();\n\n    if (!name || !email || !mobile || !message) {\n      setStatus(\n        \"Name, email, mobile number, and message are required.\",\n        \"error\"\n      );\n      return;\n    }\n\n    if (\n      !verifiedEmail ||\n      verifiedEmail !== email ||\n      !currentOTP ||\n      Date.now() >= otpExpiresAt\n    ) {\n      resetVerification(\n        \"Please verify your email before submitting.\",\n        \"error\"\n      );\n\n      $(\"annular-screen-2\").hidden = true;\n      $(\"annular-screen-1\").hidden = false;\n      $(\"annular-progress-2\").classList.remove(\"active\");\n\n      return;\n    }\n\n    if (!mobileInput.checkValidity()) {\n      mobileInput.reportValidity();\n      return;\n    }\n\n    if (!emailJSReady()) {\n      setStatus(\"Email service is unavailable. Please try again.\", \"error\");\n      return;\n    }\n\n    sendingEnquiry = true;\n\n    updateSubmitButton();\n    updateSendButton();\n\n    setStatus(\"Submitting your enquiry...\");\n\n    try {\n      await window.emailjs.send(\n        SERVICE_ID,\n        ENQUIRY_TEMPLATE_ID,\n        {\n          \/*\n           * Annular domain: company fields are populated.\n           * PODS domain: company fields are blank.\n           *\/\n          website_name: isAnnular ? \"Annular Technologies\" : \"\",\n          company_name: isAnnular ? \"Annular Technologies\" : \"\",\n\n          user_name: name,\n          user_email: email,\n          user_mobile: mobile,\n          service_name: currentServiceContext,\n          service_title: currentTitleContext,\n          message: \"[Product: \" + currentServiceContext + \" | \" + currentTitleContext + \"]\\n\" + message\n        }\n      );\n\n      form.reset();\n\n      clearResendTimer();\n\n      currentOTP = \"\";\n      verifiedEmail = \"\";\n      otpExpiresAt = 0;\n      otpAttempts = 0;\n      resendAvailableAt = 0;\n\n      $(\"annular-screen-1\").hidden = false;\n      $(\"annular-screen-2\").hidden = true;\n\n      $(\"annular-progress-1\").classList.add(\"active\");\n      $(\"annular-progress-2\").classList.remove(\"active\");\n\n      otpArea.hidden = true;\n      verifyButton.disabled = false;\n\n      updateSendButton();\n      updateContinueButton();\n      updateSubmitButton();\n\n      setStatus(\"\");\n\n      showThankYou();\n\n    } catch (error) {\n      console.error(\"Consultation EmailJS error:\", error);\n\n      setStatus(\n        \"Unable to submit your enquiry. Check your EmailJS template settings and try again.\",\n        \"error\"\n      );\n\n    } finally {\n      sendingEnquiry = false;\n\n      updateSendButton();\n      updateContinueButton();\n      updateSubmitButton();\n    }\n  });\n\n  \/* INITIAL STATE *\/\n  updateSendButton();\n  updateContinueButton();\n  updateSubmitButton();\n\n})();\n<\/script>\n<\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"100-width.php","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"footnotes":""},"class_list":["post-1698","page","type-page","status-publish","hentry"],"acf":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/web.annulartechnologies.com\/staging\/wp-json\/wp\/v2\/pages\/1698","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/web.annulartechnologies.com\/staging\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/web.annulartechnologies.com\/staging\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/web.annulartechnologies.com\/staging\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/web.annulartechnologies.com\/staging\/wp-json\/wp\/v2\/comments?post=1698"}],"version-history":[{"count":25,"href":"https:\/\/web.annulartechnologies.com\/staging\/wp-json\/wp\/v2\/pages\/1698\/revisions"}],"predecessor-version":[{"id":2634,"href":"https:\/\/web.annulartechnologies.com\/staging\/wp-json\/wp\/v2\/pages\/1698\/revisions\/2634"}],"wp:attachment":[{"href":"https:\/\/web.annulartechnologies.com\/staging\/wp-json\/wp\/v2\/media?parent=1698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}