{"id":1946,"date":"2026-10-13T09:14:31","date_gmt":"2026-10-13T09:14:31","guid":{"rendered":"https:\/\/web.annulartechnologies.com\/staging\/animal-management-system\/"},"modified":"2026-10-20T18:20:09","modified_gmt":"2026-10-20T18:20:09","slug":"animal-management-system","status":"publish","type":"page","link":"https:\/\/web.annulartechnologies.com\/staging\/animal-management-system\/","title":{"rendered":"Animal 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\"><style id=\"ams-master-styles\">\n\/* Scoped styles: preserve Avada header, footer and layout *\/\n#main .ams-page-wrapper {\n  --ams-blue: #0284c7;\n  --ams-blue-dark: #0369a1;\n  --ams-blue-soft: #f0f9ff;\n  --ams-ink: #172033;\n  --ams-muted: #5f6b7c;\n  --ams-border: #e3e9f2;\n  --ams-surface: #f7f9fc;\n  width: 100%;\n  color: var(--ams-ink);\n  background: #fff;\n  font-family: 'Plus Jakarta Sans', Inter, Arial, sans-serif;\n  font-size: 15px;\n  line-height: 1.7;\n  -webkit-font-smoothing: antialiased;\n  overflow: clip;\n}\n\n.ams-page-wrapper *,\n.ams-page-wrapper *::before,\n.ams-page-wrapper *::after {\n  box-sizing: border-box;\n}\n\n.ams-page-wrapper img {\n  display: block;\n  max-width: 100%;\n  height: auto;\n}\n\n.ams-page-wrapper h1,\n.ams-page-wrapper h2,\n.ams-page-wrapper h3,\n.ams-page-wrapper h4,\n.ams-page-wrapper p {\n  font-family: inherit;\n}\n\n.ams-page-wrapper h1,\n.ams-page-wrapper h2,\n.ams-page-wrapper h3,\n.ams-page-wrapper h4 {\n  color: var(--ams-ink);\n  letter-spacing: -.025em;\n}\n\n.ams-page-wrapper a {\n  text-decoration: none;\n}\n\n.ams-container {\n  width: 100%;\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 0 26px;\n}\n\n.ams-section-header {\n  max-width: 760px;\n  margin: 0 auto 38px;\n  text-align: center;\n}\n\n.ams-section-header h2 {\n  margin: 0 0 13px;\n  font-size: clamp(27px, 3vw, 36px);\n  font-weight: 760;\n  line-height: 1.23;\n}\n\n.ams-section-header h2 span {\n  color: var(--ams-blue);\n}\n\n.ams-section-header p {\n  max-width: 690px;\n  margin: 0 auto;\n  color: var(--ams-muted);\n  font-size: 15px;\n  line-height: 1.8;\n}\n\n.ams-btn-group {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 12px;\n  margin-top: 27px;\n}\n\n.ams-btn-primary,\n.ams-btn-secondary {\n  display: inline-flex;\n  min-height: 46px;\n  align-items: center;\n  justify-content: center;\n  gap: 9px;\n  padding: 12px 20px;\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.4;\n  text-align: center;\n  cursor: pointer;\n  transition: background-color .2s, border-color .2s, color .2s,\n    transform .2s, box-shadow .2s;\n}\n\n.ams-btn-primary {\n  color: #fff !important;\n  background: var(--ams-blue) !important;\n  border-color: var(--ams-blue) !important;\n  box-shadow: 0 5px 14px #0284c726;\n}\n\n.ams-btn-primary:hover {\n  color: #fff !important;\n  background: var(--ams-blue-dark) !important;\n  border-color: var(--ams-blue-dark) !important;\n  transform: translateY(-1px);\n}\n\n.ams-btn-secondary {\n  color: var(--ams-ink) !important;\n  background: #fff !important;\n  border-color: #d3dce8 !important;\n}\n\n.ams-btn-secondary:hover {\n  color: var(--ams-blue) !important;\n  background: var(--ams-blue-soft) !important;\n  border-color: #7dd3fc !important;\n  transform: translateY(-1px);\n}\n\n.ams-btn-primary:focus-visible,\n.ams-btn-secondary:focus-visible,\n.ams-accordion-header:focus-visible {\n  outline: 3px solid #7dd3fc;\n  outline-offset: 3px;\n}\n\n\/* Hero *\/\n.ams-hero-section {\n  position: relative;\n  padding: 24px 0 72px;\n  overflow: hidden;\n  background: radial-gradient(\n    ellipse at 82% 40%,\n    #c8e4ff99,\n    #f7faff59 42%,\n    #fff 76%\n  );\n  border-bottom: 1px solid var(--ams-border);\n}\n\n.ams-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 9px;\n  margin-bottom: 30px;\n  color: #788497;\n  font-size: 12px;\n}\n\n.ams-breadcrumb a {\n  color: #68768a;\n}\n\n.ams-breadcrumb a:hover,\n.ams-breadcrumb span.curr {\n  color: var(--ams-blue);\n}\n\n.ams-breadcrumb span.curr {\n  font-weight: 700;\n}\n\n.ams-hero-grid {\n  display: grid;\n  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);\n  align-items: center;\n  gap: 48px;\n}\n\n.ams-hero-content {\n  min-width: 0;\n}\n\n.ams-hero-content h1 {\n  max-width: 630px;\n  margin: 0 0 19px;\n  font-size: clamp(32px, 3.5vw, 44px);\n  font-weight: 780;\n  line-height: 1.15;\n  letter-spacing: -.04em;\n}\n\n.ams-hero-content h1 span {\n  color: var(--ams-blue);\n}\n\n.ams-hero-content p {\n  max-width: 590px;\n  margin: 0;\n  color: #536175;\n  font-size: 15px;\n  line-height: 1.85;\n}\n\n.ams-hero-image-frame,\n.ams-ops-image-frame {\n  min-width: 0;\n  padding: 7px;\n  overflow: hidden;\n  background: #fff;\n  border: 1px solid var(--ams-border);\n  border-radius: 14px;\n  box-shadow: 0 16px 40px #19305517;\n}\n\n.ams-hero-image-frame img {\n  width: 100%;\n  aspect-ratio: 6 \/ 4.6;\n  object-fit: cover;\n  object-position: center;\n  border-radius: 9px;\n}\n\n\/* Overview *\/\n.ams-overview-section {\n  padding: 76px 0;\n  background: #fff;\n  border-bottom: 1px solid #edf1f6;\n}\n\n.ams-overview-box {\n  max-width: 1000px;\n  margin: 0 auto;\n  padding: 30px 34px;\n  background: linear-gradient(135deg, #f8faff, #f0f6ff);\n  border: 1px solid #dbeafe;\n  border-radius: 12px;\n}\n\n.ams-overview-box p {\n  margin: 0;\n  color: #46556a;\n  font-size: 15px;\n  line-height: 1.9;\n  text-align: center;\n}\n\n\/* Sections *\/\n.ams-capabilities-section,\n.ams-audience-section,\n.ams-operations-section,\n.ams-benefits-section,\n.ams-tech-section,\n.ams-faqs-section {\n  padding: 78px 0;\n  border-bottom: 1px solid var(--ams-border);\n}\n\n.ams-capabilities-section,\n.ams-operations-section,\n.ams-tech-section {\n  background: var(--ams-surface);\n}\n\n.ams-audience-section,\n.ams-benefits-section,\n.ams-faqs-section {\n  background: #fff;\n}\n\n\/* Capability cards *\/\n.ams-cap-grid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 18px;\n}\n\n.ams-cap-card {\n  min-width: 0;\n  padding: 24px 22px;\n  background: #fff;\n  border: 1px solid var(--ams-border);\n  border-radius: 11px;\n  transition: border-color .2s, box-shadow .2s, transform .2s;\n}\n\n.ams-cap-card:hover {\n  border-color: #bae6fd;\n  box-shadow: 0 10px 26px #1e407d12;\n  transform: translateY(-2px);\n}\n\n.ams-cap-icon {\n  display: flex;\n  width: 43px;\n  height: 43px;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 17px;\n  border: 1px solid #bae6fd;\n  border-radius: 9px;\n  background: var(--ams-blue-soft);\n  color: var(--ams-blue);\n  font-size: 17px;\n}\n\n.ams-cap-card h4 {\n  margin: 0 0 8px;\n  font-size: 15px;\n  font-weight: 750;\n  line-height: 1.45;\n}\n\n.ams-cap-card p {\n  margin: 0;\n  color: var(--ams-muted);\n  font-size: 13px;\n  line-height: 1.8;\n}\n\n\/* Audience *\/\n.ams-audience-grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: 17px;\n}\n\n.ams-audience-card {\n  min-width: 0;\n  padding: 25px 18px;\n  background: #fff;\n  border: 1px solid var(--ams-border);\n  border-radius: 11px;\n  text-align: center;\n  transition: border-color .2s, box-shadow .2s, transform .2s;\n}\n\n.ams-audience-card:hover {\n  border-color: #bae6fd;\n  box-shadow: 0 10px 24px #1e407d0f;\n  transform: translateY(-2px);\n}\n\n.ams-audience-icon {\n  display: flex;\n  width: 48px;\n  height: 48px;\n  align-items: center;\n  justify-content: center;\n  margin: 0 auto 15px;\n  border: 1px solid #bae6fd;\n  border-radius: 12px;\n  background: var(--ams-blue-soft);\n  color: var(--ams-blue);\n  font-size: 19px;\n}\n\n.ams-audience-card h3 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 720;\n  line-height: 1.6;\n}\n\n\/* Operational workflow *\/\n.ams-ops-grid {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  align-items: center;\n  gap: 38px;\n}\n\n.ams-ops-flow {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.ams-ops-card {\n  display: flex;\n  min-width: 0;\n  align-items: flex-start;\n  gap: 15px;\n  padding: 17px 18px;\n  background: #fff;\n  border: 1px solid var(--ams-border);\n  border-radius: 10px;\n  transition: border-color .2s, box-shadow .2s;\n}\n\n.ams-ops-card:hover {\n  border-color: #bae6fd;\n  box-shadow: 0 7px 18px #1e407d0f;\n}\n\n.ams-ops-num {\n  display: flex;\n  width: 32px;\n  height: 32px;\n  flex: 0 0 32px;\n  align-items: center;\n  justify-content: center;\n  margin-top: 1px;\n  border-radius: 8px;\n  background: var(--ams-blue-soft);\n  border: 1px solid #bae6fd;\n  color: var(--ams-blue);\n  font-size: 12px;\n  font-weight: 800;\n}\n\n.ams-ops-text h4 {\n  margin: 0 0 4px;\n  font-size: 14px;\n  font-weight: 750;\n}\n\n.ams-ops-text p {\n  margin: 0;\n  color: var(--ams-muted);\n  font-size: 12.5px;\n  line-height: 1.75;\n}\n\n.ams-ops-image-frame img {\n  width: 100%;\n  aspect-ratio: 5 \/ 4.2;\n  object-fit: cover;\n  object-position: center;\n  border-radius: 9px;\n}\n\n\/* Benefits *\/\n.ams-benefits-grid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 15px;\n}\n\n.ams-benefit-card {\n  display: flex;\n  min-width: 0;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 20px 18px;\n  background: #fff;\n  border: 1px solid var(--ams-border);\n  border-radius: 10px;\n  transition: border-color .2s, box-shadow .2s;\n}\n\n.ams-benefit-card:hover {\n  border-color: #bae6fd;\n  box-shadow: 0 8px 20px #1e407d0d;\n}\n\n.ams-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  margin-top: 1px;\n  border-radius: 50%;\n  background: var(--ams-blue-soft);\n  color: var(--ams-blue);\n  font-size: 11px;\n}\n\n.ams-benefit-card h4 {\n  margin: 0;\n  color: #334155;\n  font-size: 13px;\n  font-weight: 680;\n  line-height: 1.7;\n}\n\n\/* Technology *\/\n.ams-tech-grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: 17px;\n}\n\n.ams-tech-card {\n  min-width: 0;\n  padding: 24px 18px;\n  background: #fff;\n  border: 1px solid var(--ams-border);\n  border-radius: 11px;\n  text-align: center;\n  transition: border-color .2s, box-shadow .2s;\n}\n\n.ams-tech-card:hover {\n  border-color: #bae6fd;\n  box-shadow: 0 10px 24px #1e407d0f;\n}\n\n.ams-tech-role {\n  display: inline-block;\n  margin-bottom: 13px;\n  padding: 5px 9px;\n  border: 1px solid #bae6fd;\n  border-radius: 5px;\n  background: var(--ams-blue-soft);\n  color: var(--ams-blue);\n  font-size: 10px;\n  font-weight: 800;\n  letter-spacing: .08em;\n  text-transform: uppercase;\n}\n\n.ams-tech-card h3 {\n  margin: 0 0 8px;\n  font-size: 15px;\n  font-weight: 750;\n  line-height: 1.5;\n}\n\n.ams-tech-card p {\n  margin: 0;\n  color: var(--ams-muted);\n  font-size: 12.5px;\n  line-height: 1.8;\n}\n\n\/* FAQ accordion *\/\n.ams-accordion {\n  display: flex;\n  max-width: 850px;\n  flex-direction: column;\n  gap: 11px;\n  margin: 0 auto;\n}\n\n.ams-accordion-item {\n  overflow: hidden;\n  background: #fff;\n  border: 1px solid var(--ams-border);\n  border-radius: 10px;\n  transition: border-color .2s, box-shadow .2s;\n}\n\n.ams-accordion-item.active {\n  border-color: #bae6fd;\n  box-shadow: 0 5px 18px #1e407d0a;\n}\n\n.ams-accordion-header {\n  display: flex;\n  width: 100%;\n  min-height: 62px;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  padding: 17px 20px;\n  border: 0;\n  background: #fff;\n  color: var(--ams-ink);\n  font: inherit;\n  text-align: left;\n  cursor: pointer;\n}\n\n.ams-accordion-header h3 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 720;\n  line-height: 1.6;\n}\n\n.ams-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: 11px;\n  transition: transform .2s, background-color .2s, color .2s;\n}\n\n.ams-accordion-item.active .ams-accordion-icon {\n  transform: rotate(180deg);\n  background: var(--ams-blue);\n  color: #fff;\n}\n\n.ams-accordion-body {\n  padding: 0 20px 19px;\n  color: var(--ams-muted);\n  font-size: 13.5px;\n  line-height: 1.85;\n}\n\n.ams-accordion-body[hidden] {\n  display: none !important;\n}\n\n\/* Final call to action *\/\n.ams-cta-section {\n  padding: 78px 0;\n  background: linear-gradient(180deg, #f7f9fc, #fff);\n}\n\n.ams-cta-inner {\n  max-width: 900px;\n  margin: 0 auto;\n  text-align: center;\n}\n\n.ams-cta-inner h2 {\n  margin: 0 0 14px;\n  font-size: clamp(28px, 3vw, 37px);\n  font-weight: 780;\n  line-height: 1.25;\n}\n\n.ams-cta-inner > p {\n  max-width: 700px;\n  margin: 0 auto;\n  color: var(--ams-muted);\n  font-size: 15px;\n  line-height: 1.85;\n}\n\n.ams-shared-cta-box {\n  margin-top: 30px;\n  padding: 32px 28px;\n  border: 1px solid #dce5f1;\n  border-radius: 13px;\n  background: #fff;\n  box-shadow: 0 10px 28px #1c30520d;\n  color: var(--ams-ink);\n  text-align: center;\n}\n\n.ams-shared-cta-box h4 {\n  margin: 0 0 8px;\n  font-size: 19px;\n  font-weight: 760;\n}\n\n.ams-shared-cta-box p {\n  max-width: 650px;\n  margin: 0 auto 20px;\n  color: var(--ams-muted);\n  font-size: 13.5px;\n  line-height: 1.8;\n}\n\n.ams-shared-cta-box .ams-btn-group {\n  justify-content: center;\n  margin-top: 0;\n}\n\n\/* Responsive layout *\/\n@media (max-width: 1024px) {\n  .ams-hero-grid,\n  .ams-ops-grid {\n    gap: 28px;\n  }\n\n  .ams-cap-grid,\n  .ams-benefits-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n\n  .ams-audience-grid,\n  .ams-tech-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n\n@media (max-width: 767px) {\n  .ams-container {\n    padding-right: 20px;\n    padding-left: 20px;\n  }\n\n  .ams-hero-section {\n    padding: 20px 0 52px;\n  }\n\n  .ams-breadcrumb {\n    margin-bottom: 24px;\n    font-size: 11px;\n  }\n\n  .ams-hero-grid,\n  .ams-ops-grid {\n    grid-template-columns: minmax(0, 1fr);\n    gap: 28px;\n  }\n\n  .ams-hero-content h1 {\n    font-size: clamp(30px, 7vw, 36px);\n  }\n\n  .ams-hero-content p {\n    font-size: 14px;\n  }\n\n  .ams-section-header {\n    margin-bottom: 29px;\n  }\n\n  .ams-section-header h2 {\n    font-size: 28px;\n  }\n\n  .ams-section-header p {\n    font-size: 14px;\n  }\n\n  .ams-overview-section,\n  .ams-capabilities-section,\n  .ams-audience-section,\n  .ams-operations-section,\n  .ams-benefits-section,\n  .ams-tech-section,\n  .ams-faqs-section,\n  .ams-cta-section {\n    padding: 56px 0;\n  }\n\n  .ams-overview-box {\n    padding: 23px 20px;\n  }\n\n  .ams-overview-box p {\n    font-size: 14px;\n    text-align: left;\n  }\n\n  .ams-cap-grid,\n  .ams-benefits-grid,\n  .ams-audience-grid,\n  .ams-tech-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 12px;\n  }\n\n  .ams-cap-card {\n    padding: 19px 16px;\n  }\n\n  .ams-cap-card h4 {\n    font-size: 14px;\n  }\n\n  .ams-cap-card p {\n    font-size: 12.5px;\n  }\n\n  .ams-audience-card,\n  .ams-tech-card {\n    padding: 20px 14px;\n  }\n\n  .ams-benefit-card {\n    padding: 15px 13px;\n    gap: 9px;\n  }\n\n  .ams-benefit-card h4 {\n    font-size: 12px;\n  }\n\n  .ams-accordion-header {\n    min-height: 58px;\n    padding: 15px;\n    gap: 12px;\n  }\n\n  .ams-accordion-header h3 {\n    font-size: 13px;\n  }\n\n  .ams-accordion-body {\n    padding: 0 15px 16px;\n    font-size: 13px;\n  }\n\n  .ams-shared-cta-box {\n    padding: 24px 18px;\n  }\n}\n\n@media (max-width: 420px) {\n  .ams-container {\n    padding-right: 16px;\n    padding-left: 16px;\n  }\n\n  .ams-cap-grid,\n  .ams-audience-grid,\n  .ams-benefits-grid,\n  .ams-tech-grid {\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  .ams-cap-card {\n    padding: 21px;\n  }\n\n  .ams-benefit-card {\n    padding: 16px;\n  }\n\n  .ams-btn-group {\n    align-items: stretch;\n    flex-direction: column;\n  }\n\n  .ams-btn-primary,\n  .ams-btn-secondary {\n    width: 100%;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ams-page-wrapper *,\n  .ams-page-wrapper *::before,\n  .ams-page-wrapper *::after {\n    transition-duration: .01ms !important;\n    animation-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.ams-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.ams-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.ams-btn-primary svg, .ams-btn-primary span {\n  color: #ffffff !important;\n  -webkit-text-fill-color: #ffffff !important;\n}\n\n.ams-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.ams-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.ams-btn-secondary svg, .ams-btn-secondary span {\n  color: #0f172a !important;\n  -webkit-text-fill-color: #0f172a !important;\n}\n\n.ams-btn-secondary:hover svg, .ams-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.ams-section-header h2 span,\n.ams-hero-content h1 span,\n.ams-page-wrapper h1 span,\n.ams-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=\"ams-page-wrapper\">\n\n  <!-- 1. HERO SECTION -->\n  <section class=\"ams-hero-section\">\n    <div class=\"ams-container\">\n      <div class=\"ams-breadcrumb\">\n        <a href=\"https:\/\/web.annulartechnologies.com\/staging\/\">Home<\/a>\n        <i class=\"fas fa-chevron-right\" style=\"font-size:10px;\"><\/i>\n        <span>Products<\/span>\n        <i class=\"fas fa-chevron-right\" style=\"font-size:10px;\"><\/i>\n        <span class=\"curr\">Animal Management System<\/span>\n      <\/div>\n\n      <div class=\"ams-hero-grid\">\n        <div class=\"ams-hero-content\">\n<h1>Digitize Pet Licensing and <span>Animal Welfare Management<\/span><\/h1>\n\n          <p>Bring pet registration, licensing, vaccination tracking, microchipping, veterinary services and animal welfare operations into a coordinated digital platform. Animal Management System is based on Annular\u2019s Petcare project described in the corporate brochure.<\/p>\n\n          <div class=\"ams-btn-group\">\n            <a href=\"https:\/\/web.annulartechnologies.com\/staging\/contact\/\" class=\"ams-btn-primary\">Discuss Your Requirements<\/a>\n            <a href=\"https:\/\/web.annulartechnologies.com\/staging\/contact\/\" class=\"ams-btn-secondary\">Contact Our Team<\/a>\n          <\/div>\n        <\/div>\n\n        <div class=\"ams-hero-image-frame\">\n          <img decoding=\"async\" src=\"https:\/\/web.annulartechnologies.com\/staging\/wp-content\/uploads\/2026\/10\/prani-animal-management-hero.png\" alt=\"Animal Management System Petcare Platform\" width=\"600\" height=\"440\">\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 2. OVERVIEW -->\n  <section class=\"ams-overview-section\" id=\"ams-overview\">\n    <div class=\"ams-container\">\n      <div class=\"ams-overview-box\">\n<p>The Petcare project in Annular\u2019s corporate brochure is described as an AI-powered Pet Licensing and Animal Welfare Management Platform developed for municipalities and animal welfare organizations. It is designed to digitize pet registration, licensing, vaccination tracking, microchipping, veterinary services, complaint management and animal welfare operations. The platform aims to improve compliance, streamline citizen services and promote responsible pet ownership through intelligent automation and real-time analytics.<\/p>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 3. KEY CAPABILITIES -->\n  <section class=\"ams-capabilities-section\" id=\"ams-capabilities\">\n    <div class=\"ams-container\">\n      <div class=\"ams-section-header\">\n<h2>Key Platform <span>Capabilities<\/span><\/h2>\n        <p>End-to-end municipal and citizen services connecting pet records, healthcare compliance, and operational animal welfare management.<\/p>\n      <\/div>\n\n      <div class=\"ams-cap-grid\">\n        <div class=\"ams-cap-card\">\n          <div class=\"ams-cap-icon\"><i class=\"fas fa-paw\"><\/i><\/div>\n          <h4>Pet Registration<\/h4>\n          <p>Maintain digital records for registered pets.<\/p>\n        <\/div>\n\n        <div class=\"ams-cap-card\">\n          <div class=\"ams-cap-icon\"><i class=\"fas fa-id-card\"><\/i><\/div>\n          <h4>Pet Licensing<\/h4>\n          <p>Support digital licensing workflows for pet owners and administering organizations.<\/p>\n        <\/div>\n\n        <div class=\"ams-cap-card\">\n          <div class=\"ams-cap-icon\"><i class=\"fas fa-syringe\"><\/i><\/div>\n          <h4>Vaccination Tracking<\/h4>\n          <p>Record and track vaccination information.<\/p>\n        <\/div>\n\n        <div class=\"ams-cap-card\">\n          <div class=\"ams-cap-icon\"><i class=\"fas fa-microchip\"><\/i><\/div>\n          <h4>Microchipping Records<\/h4>\n          <p>Maintain relevant microchipping information as part of animal records.<\/p>\n        <\/div>\n\n        <div class=\"ams-cap-card\">\n          <div class=\"ams-cap-icon\"><i class=\"fas fa-stethoscope\"><\/i><\/div>\n          <h4>Veterinary Services<\/h4>\n          <p>Support information and workflows related to veterinary services.<\/p>\n        <\/div>\n\n        <div class=\"ams-cap-card\">\n          <div class=\"ams-cap-icon\"><i class=\"fas fa-clipboard-list\"><\/i><\/div>\n          <h4>Complaint Management<\/h4>\n          <p>Digitize the handling of animal-related complaints.<\/p>\n        <\/div>\n\n        <div class=\"ams-cap-card\">\n          <div class=\"ams-cap-icon\"><i class=\"fas fa-heart\"><\/i><\/div>\n          <h4>Animal Welfare Operations<\/h4>\n          <p>Support operational processes for municipalities and animal welfare organizations.<\/p>\n        <\/div>\n\n        <div class=\"ams-cap-card\">\n          <div class=\"ams-cap-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n          <h4>Digitalized KYC and CAN<\/h4>\n          <p>The brochure lists digitalized KYC and CAN as part of the mobile app solution.<\/p>\n        <\/div>\n\n        <div class=\"ams-cap-card\">\n          <div class=\"ams-cap-icon\"><i class=\"fas fa-user-shield\"><\/i><\/div>\n          <h4>Role-Based Administration<\/h4>\n          <p>The brochure lists user registration, zonal-level admin login and super-admin login.<\/p>\n        <\/div>\n\n        <div class=\"ams-cap-card\">\n          <div class=\"ams-cap-icon\"><i class=\"fas fa-language\"><\/i><\/div>\n          <h4>Multilingual Support<\/h4>\n          <p>The brochure lists multilingual support for the mobile application.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 4. WHO IT IS DESIGNED FOR -->\n  <section class=\"ams-audience-section\" id=\"ams-audience\">\n    <div class=\"ams-container\">\n      <div class=\"ams-section-header\">\n<h2>Who It Is <span>Designed For<\/span><\/h2>\n        <p>Purpose-built for public administration bodies, welfare teams, and citizen services coordination.<\/p>\n      <\/div>\n\n      <div class=\"ams-audience-grid\">\n        <div class=\"ams-audience-card\">\n          <div class=\"ams-audience-icon\"><i class=\"fas fa-landmark\"><\/i><\/div>\n          <h3>Municipalities and local government bodies<\/h3>\n        <\/div>\n\n        <div class=\"ams-audience-card\">\n          <div class=\"ams-audience-icon\"><i class=\"fas fa-hands-helping\"><\/i><\/div>\n          <h3>Animal welfare organizations<\/h3>\n        <\/div>\n\n        <div class=\"ams-audience-card\">\n          <div class=\"ams-audience-icon\"><i class=\"fas fa-file-contract\"><\/i><\/div>\n          <h3>Teams involved in pet registration and licensing<\/h3>\n        <\/div>\n\n        <div class=\"ams-audience-card\">\n          <div class=\"ams-audience-icon\"><i class=\"fas fa-users-cog\"><\/i><\/div>\n          <h3>Organizations coordinating animal-related citizen services<\/h3>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 5. HOW IT SUPPORTS OPERATIONS -->\n  <section class=\"ams-operations-section\" id=\"ams-operations\">\n    <div class=\"ams-container\">\n      <div class=\"ams-section-header\">\n<h2>How It <span>Supports Operations<\/span><\/h2>\n        <p>A structured 5-step operational framework from initial intake to centralized administration.<\/p>\n      <\/div>\n\n      <div class=\"ams-ops-grid\">\n        <div class=\"ams-ops-flow\">\n          <div class=\"ams-ops-card\">\n            <div class=\"ams-ops-num\">1<\/div>\n            <div class=\"ams-ops-text\">\n              <h4>Register<\/h4>\n              <p>Capture pet and owner information through the relevant registration workflow.<\/p>\n            <\/div>\n          <\/div>\n\n          <div class=\"ams-ops-card\">\n            <div class=\"ams-ops-num\">2<\/div>\n            <div class=\"ams-ops-text\">\n              <h4>Maintain Records<\/h4>\n              <p>Organize licensing, vaccination and microchipping details.<\/p>\n            <\/div>\n          <\/div>\n\n          <div class=\"ams-ops-card\">\n            <div class=\"ams-ops-num\">3<\/div>\n            <div class=\"ams-ops-text\">\n              <h4>Coordinate Services<\/h4>\n              <p>Support veterinary service and animal welfare workflows.<\/p>\n            <\/div>\n          <\/div>\n\n          <div class=\"ams-ops-card\">\n            <div class=\"ams-ops-num\">4<\/div>\n            <div class=\"ams-ops-text\">\n              <h4>Manage Requests<\/h4>\n              <p>Record and manage animal-related complaints.<\/p>\n            <\/div>\n          <\/div>\n\n          <div class=\"ams-ops-card\">\n            <div class=\"ams-ops-num\">5<\/div>\n            <div class=\"ams-ops-text\">\n              <h4>Administer<\/h4>\n              <p>Provide separate access for relevant administrative roles.<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"ams-ops-image-frame\">\n          <img decoding=\"async\" src=\"https:\/\/web.annulartechnologies.com\/staging\/wp-content\/uploads\/2026\/10\/animal-management-system-architecture.jpg\" alt=\"Animal Management Operations Architecture\" width=\"550\" height=\"420\">\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 6. BUSINESS AND PUBLIC-SERVICE BENEFITS -->\n  <section class=\"ams-benefits-section\" id=\"ams-benefits\">\n    <div class=\"ams-container\">\n      <div class=\"ams-section-header\">\n<h2>Business and <span>Public-Service Benefits<\/span><\/h2>\n        <p>Driving operational transparency, civic compliance, and enhanced care coordination.<\/p>\n      <\/div>\n\n      <div class=\"ams-benefits-grid\">\n        <div class=\"ams-benefit-card\">\n          <div class=\"ams-benefit-check\"><i class=\"fas fa-check\"><\/i><\/div>\n          <h4>More organized digital records for pet-related services<\/h4>\n        <\/div>\n\n        <div class=\"ams-benefit-card\">\n          <div class=\"ams-benefit-check\"><i class=\"fas fa-check\"><\/i><\/div>\n          <h4>Clearer workflows for licensing and vaccination tracking<\/h4>\n        <\/div>\n\n        <div class=\"ams-benefit-card\">\n          <div class=\"ams-benefit-check\"><i class=\"fas fa-check\"><\/i><\/div>\n          <h4>Centralized information to support animal welfare operations<\/h4>\n        <\/div>\n\n        <div class=\"ams-benefit-card\">\n          <div class=\"ams-benefit-check\"><i class=\"fas fa-check\"><\/i><\/div>\n          <h4>Structured complaint management<\/h4>\n        <\/div>\n\n        <div class=\"ams-benefit-card\">\n          <div class=\"ams-benefit-check\"><i class=\"fas fa-check\"><\/i><\/div>\n          <h4>Improved access to digitized citizen services<\/h4>\n        <\/div>\n\n        <div class=\"ams-benefit-card\">\n          <div class=\"ams-benefit-check\"><i class=\"fas fa-check\"><\/i><\/div>\n          <h4>Support for responsible pet ownership and compliance processes<\/h4>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 7. TECHNOLOGY STACK -->\n  <section class=\"ams-tech-section\" id=\"ams-tech\">\n    <div class=\"ams-container\">\n      <div class=\"ams-section-header\">\n<h2>Underlying Architecture<\/h2>\n        <p>The Annular corporate brochure lists the following technology stack for the Petcare project: Frontend: React.js; Database: PostgreSQL; Backend: Java, Spring Boot and REST API; Mobile: Flutter.<\/p>\n      <\/div>\n\n      <div class=\"ams-tech-grid\">\n        <div class=\"ams-tech-card\">\n          <span class=\"ams-tech-role\">Frontend<\/span>\n          <h3>React.js<\/h3>\n          <p>Web portal for municipal administration, citizen registration, and reporting.<\/p>\n        <\/div>\n\n        <div class=\"ams-tech-card\">\n          <span class=\"ams-tech-role\">Database<\/span>\n          <h3>PostgreSQL<\/h3>\n          <p>Relational database for animal profiles, microchip IDs, and vaccination logs.<\/p>\n        <\/div>\n\n        <div class=\"ams-tech-card\">\n          <span class=\"ams-tech-role\">Backend<\/span>\n          <h3>Java, Spring Boot & REST API<\/h3>\n          <p>Scalable enterprise microservices powering multi-tenant municipal workflows.<\/p>\n        <\/div>\n\n        <div class=\"ams-tech-card\">\n          <span class=\"ams-tech-role\">Mobile<\/span>\n          <h3>Flutter<\/h3>\n          <p>Cross-platform mobile application supporting citizen services and field operations.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 8. FAQS -->\n  <section class=\"ams-faqs-section\" id=\"ams-faqs\">\n    <div class=\"ams-container\">\n      <div class=\"ams-section-header\">\n<h2>Frequently Asked Questions<\/h2>\n      <\/div>\n\n      <div class=\"ams-accordion\">\n        <div class=\"ams-accordion-item active\">\n          <button class=\"ams-accordion-header\" type=\"button\" aria-expanded=\"true\">\n            <h3>Who is Animal Management System intended for?<\/h3>\n            <span class=\"ams-accordion-icon\" aria-hidden=\"true\"><i class=\"fas fa-chevron-down\"><\/i><\/span>\n          <\/button>\n          <div class=\"ams-accordion-body\">\n            The source project is described as designed for municipalities and animal welfare organizations.\n          <\/div>\n        <\/div>\n\n        <div class=\"ams-accordion-item\">\n          <button class=\"ams-accordion-header\" type=\"button\" aria-expanded=\"false\">\n            <h3>What information can the platform help digitize?<\/h3>\n            <span class=\"ams-accordion-icon\" aria-hidden=\"true\"><i class=\"fas fa-chevron-down\"><\/i><\/span>\n          <\/button>\n          <div class=\"ams-accordion-body\" hidden>\n            The Petcare project description includes pet registration, licensing, vaccination tracking, microchipping, veterinary services, complaint management and animal welfare operations.\n          <\/div>\n        <\/div>\n\n        <div class=\"ams-accordion-item\">\n          <button class=\"ams-accordion-header\" type=\"button\" aria-expanded=\"false\">\n            <h3>Does it include administrative roles?<\/h3>\n            <span class=\"ams-accordion-icon\" aria-hidden=\"true\"><i class=\"fas fa-chevron-down\"><\/i><\/span>\n          <\/button>\n          <div class=\"ams-accordion-body\" hidden>\n            The brochure lists user registration, zonal-level admin login and super-admin login.\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 9. FINAL CTA -->\n  <section class=\"ams-cta-section\" id=\"ams-contact\">\n    <div class=\"ams-container\">\n      <div class=\"ams-cta-inner\">\n<h2>Modernize Your Municipal Pet Care Operations<\/h2>\n        <p>Looking to digitize pet licensing or animal welfare workflows? Contact Annular to discuss your organization\u2019s requirements.<\/p>\n\n        <div class=\"ams-shared-cta-box\">\n          <h4>Have a product requirement or want to learn more?<\/h4>\n          <p>Contact Annular Technologies to discuss the product, confirm available capabilities and explore a suitable next step.<\/p>\n\n          <div class=\"ams-btn-group\">\n            <a href=\"https:\/\/web.annulartechnologies.com\/staging\/contact\/\" class=\"ams-btn-primary\">Contact Us<\/a>\n            <a href=\"https:\/\/web.annulartechnologies.com\/staging\/contact\/\" class=\"ams-btn-secondary\">Request a Demo<\/a>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n<\/div>\n\n<script>\n(function () {\n  \"use strict\";\n\n  function initAnimalManagementPage() {\n    const page = document.querySelector(\".ams-page-wrapper\");\n\n    if (!page || page.dataset.amsInitialized === \"true\") {\n      return;\n    }\n\n    page.dataset.amsInitialized = \"true\";\n\n    const items = page.querySelectorAll(\".ams-accordion-item\");\n\n    items.forEach(function (item, index) {\n      const button = item.querySelector(\".ams-accordion-header\");\n      const body = item.querySelector(\".ams-accordion-body\");\n\n      if (!button || !body) {\n        return;\n      }\n\n      const bodyId = body.id || \"ams-faq-answer-\" + (index + 1);\n      body.id = bodyId;\n\n      button.setAttribute(\"aria-controls\", bodyId);\n\n      const initiallyOpen = item.classList.contains(\"active\");\n\n      button.setAttribute(\n        \"aria-expanded\",\n        initiallyOpen ? \"true\" : \"false\"\n      );\n\n      body.hidden = !initiallyOpen;\n\n      button.addEventListener(\"click\", function () {\n        const shouldOpen = !item.classList.contains(\"active\");\n\n        items.forEach(function (otherItem) {\n          const otherButton = otherItem.querySelector(\".ams-accordion-header\");\n          const otherBody = otherItem.querySelector(\".ams-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 (shouldOpen) {\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      initAnimalManagementPage,\n      { once: true }\n    );\n  } else {\n    initAnimalManagementPage();\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\">Discuss Your Requirements<\/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 = \"Prani (Animal Management System)\";\n  let currentTitleContext = \"Discuss Your Requirements\";\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 = [\".ams-btn-primary\",\".ams-btn-secondary\",\"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 : \"Discuss Your Requirements\");\n      const customService = trigger.getAttribute(\"data-service\") || \"Prani (Animal 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-1946","page","type-page","status-publish","hentry"],"acf":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/web.annulartechnologies.com\/staging\/wp-json\/wp\/v2\/pages\/1946","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=1946"}],"version-history":[{"count":17,"href":"https:\/\/web.annulartechnologies.com\/staging\/wp-json\/wp\/v2\/pages\/1946\/revisions"}],"predecessor-version":[{"id":2635,"href":"https:\/\/web.annulartechnologies.com\/staging\/wp-json\/wp\/v2\/pages\/1946\/revisions\/2635"}],"wp:attachment":[{"href":"https:\/\/web.annulartechnologies.com\/staging\/wp-json\/wp\/v2\/media?parent=1946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}