{"id":2267,"date":"2026-08-21T02:24:13","date_gmt":"2026-08-21T02:24:13","guid":{"rendered":"https:\/\/zenithtechmatrix.com\/?page_id=2267"},"modified":"2026-10-14T12:22:41","modified_gmt":"2026-10-14T12:22:41","slug":"ss","status":"publish","type":"page","link":"https:\/\/zenithtechmatrix.com\/?page_id=2267","title":{"rendered":"Services"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2267\" class=\"elementor elementor-2267\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e467d39 e-con e-atomic-element e-flexbox-base e-default-div e-3612a20 \" data-id=\"e467d39\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"e467d39\">\n    \t\t<div class=\"elementor-element elementor-element-1c47271 elementor-widget elementor-widget-html\" data-id=\"1c47271\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"ztm-light-hero\">\n\n  <div class=\"ztm-light-hero-inner\">\n\n    <!-- =====================================================\n         LEFT SIDE \u2014 ORIGINAL CODE\n         NOTHING CHANGED\n    ===================================================== -->\n\n    <div class=\"ztm-light-hero-content\">\n\n      <div class=\"ztm-light-eyebrow\">\n        \u2726 CREATIVE PRODUCTION FOR DIGITAL BRANDS\n      <\/div>\n\n      <h1>\n        Ads That Get\n        <span class=\"ztm-blue\">Attention.<\/span><br>\n        Creatives That\n        <span class=\"ztm-green\">Get Results.<\/span>\n      <\/h1>\n\n      <p class=\"ztm-light-description\">\n        We create scroll-stopping video ads and premium social creatives\n        that help businesses look professional, build trust, and turn\n        attention into real customers.\n      <\/p>\n\n      <div class=\"ztm-light-actions\">\n\n        <a\n          href=\"https:\/\/wa.me\/923274893933?text=Hi%20ZTM%2C%20I%27m%20interested%20in%20your%20Creative%20Production%20Services.\"\n          class=\"ztm-light-btn ztm-light-primary\">\n          Start Your Project\n          <span>\u2192<\/span>\n        <\/a>\n\n        <a\n          href=\"#Creative work by ZTM\"\n          class=\"ztm-light-btn ztm-light-secondary\">\n          View Our Work\n          <span>\u2197<\/span>\n        <\/a>\n\n      <\/div>\n\n      <div class=\"ztm-light-trust\">\n\n        <div>\n          <strong>\u2726<\/strong>\n          <span>Creative Strategy<\/span>\n        <\/div>\n\n        <div>\n          <strong>\u2726<\/strong>\n          <span>Premium Production<\/span>\n        <\/div>\n\n        <div>\n          <strong>\u2726<\/strong>\n          <span>Social-Ready Content<\/span>\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- =====================================================\n         RIGHT SIDE \u2014 ONLY THIS VISUAL HAS BEEN REPLACED\n         USING THE SECOND CODE'S ANIMATION\n    ===================================================== -->\n\n    <div class=\"ztm-light-visual\">\n\n      <!-- Soft brand glow -->\n      <div class=\"ztm-new-light ztm-new-light-blue\"><\/div>\n      <div class=\"ztm-new-light ztm-new-light-green\"><\/div>\n\n      <!-- Decorative background grid -->\n      <div class=\"ztm-new-grid-lines\"><\/div>\n\n\n      <!-- MAIN ANIMATED CREATIVE -->\n\n      <a href=\"#see-our-work\" class=\"ztm-performance-card\">\n\n        <div class=\"ztm-card-header\">\n\n          <div class=\"ztm-card-status\">\n            <span><\/span>\n            LIVE CREATIVE PERFORMANCE\n          <\/div>\n\n          <div class=\"ztm-card-brand\">\n            ZTM\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"ztm-card-title\">\n\n          <small>AD CREATIVE<\/small>\n\n          <h2>\n            ATTENTION\n            <span>\u2192 INTEREST<\/span>\n            <strong>\u2192 ACTION<\/strong>\n          <\/h2>\n\n        <\/div>\n\n\n        <!-- GROWTH GRAPH -->\n\n        <div class=\"ztm-growth-area\">\n\n          <div class=\"ztm-growth-label\">\n\n            <span>CAMPAIGN GROWTH<\/span>\n\n            <b>+84%<\/b>\n\n          <\/div>\n\n\n          <svg\n            class=\"ztm-growth-chart\"\n            viewBox=\"0 0 500 190\"\n            preserveAspectRatio=\"none\"\n          >\n\n            <line x1=\"0\" y1=\"160\" x2=\"500\" y2=\"160\"\/>\n            <line x1=\"0\" y1=\"120\" x2=\"500\" y2=\"120\"\/>\n            <line x1=\"0\" y1=\"80\" x2=\"500\" y2=\"80\"\/>\n            <line x1=\"0\" y1=\"40\" x2=\"500\" y2=\"40\"\/>\n\n\n            <path\n              class=\"ztm-chart-blue\"\n              d=\"M0 158\n                 C55 155 70 145 105 150\n                 C145 155 155 130 190 132\n                 C230 135 245 112 275 118\n                 C315 125 320 88 355 94\n                 C390 100 400 68 430 55\n                 C455 45 475 27 500 10\"\n            \/>\n\n\n            <path\n              class=\"ztm-chart-green\"\n              d=\"M0 175\n                 C55 172 80 168 115 160\n                 C150 153 175 150 205 138\n                 C240 126 265 120 295 108\n                 C330 94 350 88 380 70\n                 C420 48 455 30 500 12\"\n            \/>\n\n\n            <path\n              class=\"ztm-chart-active\"\n              d=\"M0 175\n                 C55 172 80 168 115 160\n                 C150 153 175 150 205 138\n                 C240 126 265 120 295 108\n                 C330 94 350 88 380 70\n                 C420 48 455 30 500 12\"\n            \/>\n\n          <\/svg>\n\n\n          <div class=\"ztm-chart-point\"><\/div>\n\n        <\/div>\n\n\n        <!-- RESULT BOXES -->\n\n        <div class=\"ztm-results\">\n\n          <div>\n            <small>REACH<\/small>\n            <b>+72%<\/b>\n          <\/div>\n\n          <div>\n            <small>ENGAGEMENT<\/small>\n            <b>+91%<\/b>\n          <\/div>\n\n          <div>\n            <small>CONVERSION<\/small>\n            <b>+84%<\/b>\n          <\/div>\n\n        <\/div>\n\n\n        <!-- CARD CTA -->\n\n        <div class=\"ztm-card-cta\">\n\n          <span>VIEW PROJECT<\/span>\n\n          <b>\u2197<\/b>\n\n        <\/div>\n\n      <\/a>\n\n\n      <!-- FLOATING LABELS -->\n\n      <div class=\"ztm-float ztm-float-top\">\n\n        <div class=\"ztm-float-icon blue\">\n          \u2726\n        <\/div>\n\n        <div>\n          <b>STOP THE SCROLL<\/b>\n          <small>Creative Hook<\/small>\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"ztm-float ztm-float-right\">\n\n        <div class=\"ztm-float-icon green\">\n          \u2197\n        <\/div>\n\n        <div>\n          <b>SALES GROWTH<\/b>\n          <small>Campaign Result<\/small>\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"ztm-float ztm-float-bottom\">\n\n        <div class=\"ztm-float-icon blue\">\n          \u2713\n        <\/div>\n\n        <div>\n          <b>BUILT TO CONVERT<\/b>\n          <small>Ad Strategy<\/small>\n        <\/div>\n\n      <\/div>\n\n\n      <!-- MINI ZTM ELEMENT -->\n\n      <div class=\"ztm-mini-orb\">\n        <span>ZTM<\/span>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<style>\n\n\/* =========================================================\n   ORIGINAL HERO \u2014 NOTHING CHANGED ON LEFT\n========================================================= *\/\n\n.ztm-light-hero {\n\n  width: 100%;\n\n  background: #ffffff;\n\n  padding: 82px 20px 75px;\n\n  overflow: hidden;\n\n  font-family: Arial, Helvetica, sans-serif;\n\n  position: relative;\n}\n\n\n.ztm-light-hero *,\n.ztm-light-hero *::before,\n.ztm-light-hero *::after {\n\n  box-sizing: border-box;\n\n}\n\n\n.ztm-light-hero-inner {\n\n  max-width: 1180px;\n\n  margin: auto;\n\n  display: grid;\n\n  grid-template-columns: 1fr 1fr;\n\n  gap: 65px;\n\n  align-items: center;\n\n}\n\n\n\n\/* =========================================================\n   LEFT SIDE \u2014 EXACTLY ORIGINAL\n========================================================= *\/\n\n.ztm-light-hero-content {\n\n  position: relative;\n\n  z-index: 5;\n\n}\n\n\n.ztm-light-eyebrow {\n\n  display: inline-flex;\n\n  align-items: center;\n\n  padding: 7px 13px;\n\n  border: 1px solid rgba(0,174,239,.28);\n\n  border-radius: 30px;\n\n  background: rgba(0,174,239,.035);\n\n  color: #009DD8;\n\n  font-size: 10px;\n\n  font-weight: 800;\n\n  letter-spacing: 1.35px;\n\n  margin-bottom: 20px;\n\n}\n\n\n.ztm-light-hero h1 {\n\n  margin: 0;\n\n  color: #10142B;\n\n  font-size: clamp(43px, 5vw, 66px);\n\n  line-height: 1.04;\n\n  font-weight: 900;\n\n  letter-spacing: -2.4px;\n\n}\n\n\n.ztm-blue {\n\n  color: #00AEEF;\n\n}\n\n\n.ztm-green {\n\n  color: #72E600;\n\n}\n\n\n.ztm-light-description {\n\n  max-width: 570px;\n\n  margin: 24px 0 30px;\n\n  color: #62697D;\n\n  font-size: 16px;\n\n  line-height: 1.75;\n\n}\n\n\n.ztm-light-actions {\n\n  display: flex;\n\n  flex-wrap: wrap;\n\n  gap: 12px;\n\n}\n\n\n.ztm-light-btn {\n\n  min-height: 48px;\n\n  padding: 13px 21px;\n\n  display: inline-flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  gap: 10px;\n\n  border-radius: 8px;\n\n  text-decoration: none !important;\n\n  font-size: 13px;\n\n  font-weight: 800;\n\n  transition:\n\n    transform .25s ease,\n\n    box-shadow .25s ease,\n\n    background .25s ease;\n\n}\n\n\n.ztm-light-primary {\n\n  background: #00AEEF;\n\n  color: #ffffff !important;\n\n  box-shadow:\n\n    0 9px 25px rgba(0,174,239,.20);\n\n}\n\n\n.ztm-light-primary:hover {\n\n  transform: translateY(-3px);\n\n  box-shadow:\n\n    0 14px 32px rgba(0,174,239,.27);\n\n  background: #009DD8;\n\n}\n\n\n.ztm-light-secondary {\n\n  background: #ffffff;\n\n  color: #11182F !important;\n\n  border: 1px solid #DDE2EC;\n\n}\n\n\n.ztm-light-secondary:hover {\n\n  transform: translateY(-3px);\n\n  border-color: #00AEEF;\n\n  box-shadow:\n\n    0 9px 25px rgba(15,30,70,.08);\n\n}\n\n\n.ztm-light-trust {\n\n  margin-top: 32px;\n\n  display: flex;\n\n  flex-wrap: wrap;\n\n  gap: 18px;\n\n}\n\n\n.ztm-light-trust div {\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 6px;\n\n  color: #737A8C;\n\n  font-size: 10px;\n\n  font-weight: 700;\n\n}\n\n\n.ztm-light-trust strong {\n\n  color: #72E600;\n\n}\n\n\n\n\/* =========================================================\n   RIGHT VISUAL\n   \u2014 NEW ANIMATION ONLY\n========================================================= *\/\n\n.ztm-light-visual {\n\n  min-height: 560px;\n\n  position: relative;\n\n  width: 100%;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n}\n\n\n\n\/* =========================================================\n   BRAND GLOW\n========================================================= *\/\n\n.ztm-new-light {\n\n  position: absolute;\n\n  border-radius: 50%;\n\n  filter: blur(75px);\n\n  pointer-events: none;\n\n}\n\n\n.ztm-new-light-blue {\n\n  width: 300px;\n\n  height: 300px;\n\n  top: 70px;\n\n  right: 40px;\n\n  background: #05BFF9;\n\n  opacity: .13;\n\n}\n\n\n.ztm-new-light-green {\n\n  width: 260px;\n\n  height: 260px;\n\n  bottom: 45px;\n\n  left: 70px;\n\n  background: #8EF012;\n\n  opacity: .11;\n\n}\n\n\n\n\/* =========================================================\n   GRID\n========================================================= *\/\n\n.ztm-new-grid-lines {\n\n  position: absolute;\n\n  width: 430px;\n\n  height: 430px;\n\n  border-radius: 50%;\n\n  opacity: .32;\n\n  background-image:\n\n    linear-gradient(\n      rgba(5,191,249,.08) 1px,\n      transparent 1px\n    ),\n\n    linear-gradient(\n      90deg,\n      rgba(5,191,249,.08) 1px,\n      transparent 1px\n    );\n\n  background-size: 35px 35px;\n\n  transform:\n    perspective(500px)\n    rotateX(55deg)\n    rotateZ(-8deg);\n\n}\n\n\n\n\/* =========================================================\n   MAIN PERFORMANCE CARD\n========================================================= *\/\n\n.ztm-performance-card {\n\n  position: relative;\n\n  z-index: 5;\n\n  width: 410px;\n\n  min-height: 445px;\n\n  padding: 25px;\n\n  border-radius: 25px;\n\n  background:\n    linear-gradient(\n      145deg,\n      #121212,\n      #050505\n    );\n\n  border: 1px solid rgba(255,255,255,.12);\n\n  box-shadow:\n\n    0 35px 80px rgba(0,0,0,.22),\n\n    0 0 55px rgba(5,191,249,.07);\n\n  text-decoration: none;\n\n  color: #ffffff;\n\n  transform: rotate(-2deg);\n\n  transition: .45s ease;\n\n  overflow: hidden;\n\n}\n\n\n.ztm-performance-card::before {\n\n  content: \"\";\n\n  position: absolute;\n\n  width: 170px;\n\n  height: 170px;\n\n  top: -90px;\n\n  right: -60px;\n\n  border-radius: 50%;\n\n  background: #05BFF9;\n\n  filter: blur(65px);\n\n  opacity: .12;\n\n}\n\n\n.ztm-performance-card:hover {\n\n  transform:\n    rotate(0deg)\n    translateY(-8px);\n\n  box-shadow:\n\n    0 40px 90px rgba(0,0,0,.27),\n\n    0 0 65px rgba(142,240,18,.1);\n\n}\n\n\n\n\/* =========================================================\n   CARD HEADER\n========================================================= *\/\n\n.ztm-card-header {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: space-between;\n\n}\n\n\n.ztm-card-status {\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 8px;\n\n  color: #8b8b8b;\n\n  font-size: 8px;\n\n  font-weight: 800;\n\n  letter-spacing: 1.3px;\n\n}\n\n\n.ztm-card-status span {\n\n  width: 6px;\n\n  height: 6px;\n\n  border-radius: 50%;\n\n  background: #8EF012;\n\n  box-shadow:\n    0 0 12px rgba(142,240,18,.8);\n\n  animation:\n    ztmNewBlink 1.8s ease-in-out infinite;\n\n}\n\n\n@keyframes ztmNewBlink {\n\n  0%,100% {\n    opacity: .45;\n  }\n\n  50% {\n    opacity: 1;\n  }\n\n}\n\n\n.ztm-card-brand {\n\n  color: #05BFF9;\n\n  font-size: 13px;\n\n  font-weight: 900;\n\n  letter-spacing: 2px;\n\n}\n\n\n\n\/* =========================================================\n   CARD TITLE\n========================================================= *\/\n\n.ztm-card-title {\n\n  padding-top: 35px;\n\n}\n\n\n.ztm-card-title small {\n\n  color: #05BFF9;\n\n  font-size: 9px;\n\n  font-weight: 800;\n\n  letter-spacing: 2px;\n\n}\n\n\n.ztm-card-title h2 {\n\n  margin: 12px 0 0;\n\n  font-size: 34px;\n\n  line-height: 1.04;\n\n  font-weight: 900;\n\n  letter-spacing: -1px;\n\n}\n\n\n.ztm-card-title h2 span {\n\n  display: block;\n\n  color: #05BFF9;\n\n}\n\n\n.ztm-card-title h2 strong {\n\n  display: block;\n\n  color: #8EF012;\n\n}\n\n\n\n\/* =========================================================\n   GROWTH GRAPH\n========================================================= *\/\n\n.ztm-growth-area {\n\n  position: relative;\n\n  margin-top: 27px;\n\n  padding: 15px 0 5px;\n\n}\n\n\n.ztm-growth-label {\n\n  display: flex;\n\n  justify-content: space-between;\n\n  align-items: center;\n\n  position: relative;\n\n  z-index: 3;\n\n}\n\n\n.ztm-growth-label span {\n\n  color: #777;\n\n  font-size: 7px;\n\n  letter-spacing: 1.2px;\n\n  font-weight: 800;\n\n}\n\n\n.ztm-growth-label b {\n\n  color: #8EF012;\n\n  font-size: 12px;\n\n}\n\n\n.ztm-growth-chart {\n\n  width: 100%;\n\n  height: 150px;\n\n  margin-top: -5px;\n\n  overflow: visible;\n\n}\n\n\n.ztm-growth-chart line {\n\n  stroke: rgba(255,255,255,.07);\n\n  stroke-width: 1;\n\n}\n\n\n.ztm-chart-blue,\n.ztm-chart-green,\n.ztm-chart-active {\n\n  fill: none;\n\n  stroke-linecap: round;\n\n  stroke-linejoin: round;\n\n}\n\n\n.ztm-chart-blue {\n\n  stroke: #05BFF9;\n\n  stroke-width: 3;\n\n  opacity: .28;\n\n}\n\n\n.ztm-chart-green {\n\n  stroke: #8EF012;\n\n  stroke-width: 3;\n\n  opacity: .35;\n\n}\n\n\n.ztm-chart-active {\n\n  stroke: #8EF012;\n\n  stroke-width: 4;\n\n  stroke-dasharray: 700;\n\n  stroke-dashoffset: 700;\n\n  animation:\n    ztmChartDraw 4.5s ease-in-out infinite;\n\n  filter:\n    drop-shadow(\n      0 0 7px rgba(142,240,18,.6)\n    );\n\n}\n\n\n@keyframes ztmChartDraw {\n\n  0% {\n\n    stroke-dashoffset: 700;\n\n    opacity: .2;\n\n  }\n\n  45%,75% {\n\n    stroke-dashoffset: 0;\n\n    opacity: 1;\n\n  }\n\n  100% {\n\n    stroke-dashoffset: -700;\n\n    opacity: .2;\n\n  }\n\n}\n\n\n\n\/* =========================================================\n   MOVING POINT\n========================================================= *\/\n\n.ztm-chart-point {\n\n  position: absolute;\n\n  right: 1%;\n\n  top: 65px;\n\n  width: 11px;\n\n  height: 11px;\n\n  border-radius: 50%;\n\n  background: #8EF012;\n\n  box-shadow:\n\n    0 0 0 5px rgba(142,240,18,.1),\n\n    0 0 20px rgba(142,240,18,.8);\n\n  animation:\n    ztmPointMove 4.5s ease-in-out infinite;\n\n}\n\n\n@keyframes ztmPointMove {\n\n  0% {\n\n    right: 1%;\n\n    top: 65px;\n\n    opacity: 0;\n\n  }\n\n  25% {\n\n    right: 27%;\n\n    top: 100px;\n\n    opacity: 1;\n\n  }\n\n  50% {\n\n    right: 50%;\n\n    top: 125px;\n\n  }\n\n  75% {\n\n    right: 75%;\n\n    top: 145px;\n\n  }\n\n  100% {\n\n    right: 98%;\n\n    top: 175px;\n\n    opacity: 0;\n\n  }\n\n}\n\n\n\n\/* =========================================================\n   RESULTS\n========================================================= *\/\n\n.ztm-results {\n\n  display: grid;\n\n  grid-template-columns:\n    repeat(3,1fr);\n\n  gap: 9px;\n\n  margin-top: 5px;\n\n}\n\n\n.ztm-results div {\n\n  padding: 11px 9px;\n\n  border-radius: 10px;\n\n  background:\n    rgba(255,255,255,.035);\n\n  border:\n    1px solid rgba(255,255,255,.08);\n\n}\n\n\n.ztm-results small {\n\n  display: block;\n\n  color: #777;\n\n  font-size: 7px;\n\n  letter-spacing: .7px;\n\n}\n\n\n.ztm-results b {\n\n  display: block;\n\n  margin-top: 5px;\n\n  color: #ffffff;\n\n  font-size: 13px;\n\n}\n\n\n.ztm-results div:nth-child(2) b {\n\n  color: #05BFF9;\n\n}\n\n\n.ztm-results div:nth-child(3) b {\n\n  color: #8EF012;\n\n}\n\n\n\n\/* =========================================================\n   CARD CTA\n========================================================= *\/\n\n.ztm-card-cta {\n\n  position: absolute;\n\n  left: 25px;\n\n  right: 25px;\n\n  bottom: 20px;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: space-between;\n\n  padding: 12px 14px;\n\n  border-radius: 11px;\n\n  background:\n    linear-gradient(\n      90deg,\n      rgba(5,191,249,.15),\n      rgba(142,240,18,.12)\n    );\n\n  border:\n    1px solid rgba(5,191,249,.25);\n\n  font-size: 9px;\n\n  font-weight: 800;\n\n  letter-spacing: 1px;\n\n}\n\n\n.ztm-card-cta b {\n\n  color: #8EF012;\n\n  font-size: 17px;\n\n  transition: .3s ease;\n\n}\n\n\n.ztm-performance-card:hover\n.ztm-card-cta b {\n\n  transform:\n    translate(3px,-3px);\n\n}\n\n\n\n\/* =========================================================\n   FLOATING LABELS\n========================================================= *\/\n\n.ztm-float {\n\n  position: absolute;\n\n  z-index: 8;\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 10px;\n\n  padding: 11px 14px;\n\n  border-radius: 13px;\n\n  background:\n    rgba(8,8,8,.94);\n\n  border:\n    1px solid rgba(255,255,255,.1);\n\n  box-shadow:\n    0 18px 40px rgba(0,0,0,.16);\n\n  backdrop-filter: blur(10px);\n\n  animation:\n    ztmFloatNew 4.8s ease-in-out infinite;\n\n}\n\n\n.ztm-float b {\n\n  display: block;\n\n  color: #ffffff;\n\n  font-size: 8px;\n\n  letter-spacing: .6px;\n\n}\n\n\n.ztm-float small {\n\n  display: block;\n\n  margin-top: 4px;\n\n  color: #777;\n\n  font-size: 7px;\n\n}\n\n\n.ztm-float-icon {\n\n  width: 29px;\n\n  height: 29px;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  border-radius: 9px;\n\n  font-size: 13px;\n\n  font-weight: 900;\n\n}\n\n\n.ztm-float-icon.blue {\n\n  color: #05BFF9;\n\n  background:\n    rgba(5,191,249,.1);\n\n  border:\n    1px solid rgba(5,191,249,.2);\n\n}\n\n\n.ztm-float-icon.green {\n\n  color: #8EF012;\n\n  background:\n    rgba(142,240,18,.1);\n\n  border:\n    1px solid rgba(142,240,18,.2);\n\n}\n\n\n.ztm-float-top {\n\n  top: 75px;\n\n  left: 0;\n\n}\n\n\n.ztm-float-right {\n\n  right: -5px;\n\n  top: 220px;\n\n  animation-delay: -1.6s;\n\n}\n\n\n.ztm-float-bottom {\n\n  bottom: 70px;\n\n  left: 25px;\n\n  animation-delay: -3s;\n\n}\n\n\n@keyframes ztmFloatNew {\n\n  0%,100% {\n\n    transform:\n      translateY(0);\n\n  }\n\n  50% {\n\n    transform:\n      translateY(-8px);\n\n  }\n\n}\n\n\n\n\/* =========================================================\n   MINI ZTM ORB\n========================================================= *\/\n\n.ztm-mini-orb {\n\n  position: absolute;\n\n  right: 45px;\n\n  bottom: 65px;\n\n  z-index: 3;\n\n  width: 43px;\n\n  height: 43px;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  border-radius: 12px;\n\n  background: #071b35;\n\n  border:\n    1px solid rgba(5,191,249,.3);\n\n  box-shadow:\n    0 12px 30px rgba(0,0,0,.12);\n\n  transform:\n    rotate(8deg);\n\n  animation:\n    ztmMiniNew 4s ease-in-out infinite;\n\n}\n\n\n.ztm-mini-orb span {\n\n  color: #ffffff;\n\n  font-size: 10px;\n\n  font-weight: 900;\n\n  letter-spacing: 1px;\n\n}\n\n\n@keyframes ztmMiniNew {\n\n  0%,100% {\n\n    transform:\n      rotate(8deg)\n      translateY(0);\n\n  }\n\n  50% {\n\n    transform:\n      rotate(3deg)\n      translateY(-7px);\n\n  }\n\n}\n\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 900px) {\n\n  .ztm-light-hero-inner {\n\n    grid-template-columns: 1fr;\n\n    gap: 45px;\n\n    text-align: center;\n\n  }\n\n\n  .ztm-light-description {\n\n    margin-left: auto;\n\n    margin-right: auto;\n\n  }\n\n\n  .ztm-light-actions {\n\n    justify-content: center;\n\n  }\n\n\n  .ztm-light-trust {\n\n    justify-content: center;\n\n  }\n\n\n  .ztm-light-visual {\n\n    min-height: 530px;\n\n  }\n\n}\n\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 600px) {\n\n  .ztm-light-hero {\n\n    padding: 55px 16px 60px;\n\n  }\n\n\n  .ztm-light-hero h1 {\n\n    font-size: 39px;\n\n    letter-spacing: -1.3px;\n\n  }\n\n\n  .ztm-light-description {\n\n    font-size: 14px;\n\n    line-height: 1.65;\n\n  }\n\n\n  .ztm-light-actions {\n\n    width: 100%;\n\n    max-width: 360px;\n\n    margin-left: auto;\n\n    margin-right: auto;\n\n    flex-direction: column;\n\n  }\n\n\n  .ztm-light-btn {\n\n    width: 100%;\n\n  }\n\n\n  .ztm-light-trust {\n\n    flex-direction: column;\n\n    align-items: center;\n\n    gap: 9px;\n\n  }\n\n\n  .ztm-light-visual {\n\n    min-height: 440px;\n\n    margin-top: 5px;\n\n  }\n\n\n  .ztm-performance-card {\n\n    width: calc(100% - 45px);\n\n    min-height: 390px;\n\n    padding: 20px;\n\n    transform: rotate(0deg);\n\n  }\n\n\n  .ztm-performance-card:hover {\n\n    transform:\n      translateY(-4px);\n\n  }\n\n\n  .ztm-card-title {\n\n    padding-top: 25px;\n\n  }\n\n\n  .ztm-card-title h2 {\n\n    font-size: 27px;\n\n  }\n\n\n  .ztm-growth-chart {\n\n    height: 125px;\n\n  }\n\n\n  .ztm-results {\n\n    gap: 6px;\n\n  }\n\n\n  .ztm-results div {\n\n    padding: 9px 6px;\n\n  }\n\n\n  .ztm-results b {\n\n    font-size: 11px;\n\n  }\n\n\n  .ztm-float {\n\n    transform: scale(.82);\n\n  }\n\n\n  .ztm-float-top {\n\n    left: -7px;\n\n    top: 45px;\n\n  }\n\n\n  .ztm-float-right {\n\n    right: -12px;\n\n    top: 175px;\n\n  }\n\n\n  .ztm-float-bottom {\n\n    left: -5px;\n\n    bottom: 40px;\n\n  }\n\n\n  .ztm-mini-orb {\n\n    right: 5px;\n\n    bottom: 30px;\n\n    transform: scale(.8);\n\n  }\n\n}\n\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 390px) {\n\n  .ztm-light-hero h1 {\n\n    font-size: 34px;\n\n  }\n\n\n  .ztm-performance-card {\n\n    width: calc(100% - 25px);\n\n  }\n\n\n  .ztm-float {\n\n    transform: scale(.72);\n\n  }\n\n\n  .ztm-float-right {\n\n    right: -25px;\n\n  }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-64ed7fd e-con e-atomic-element e-flexbox-base e-default-div e-54269b8 \" data-id=\"64ed7fd\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"64ed7fd\">\n    \t\t<div class=\"elementor-element elementor-element-4939e2d elementor-widget elementor-widget-html\" data-id=\"4939e2d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>ZTM - Your Brand Deserves Better Creative<\/title>\r\n<style>\r\n\/* =========================\r\n   ORIGINAL ZTM STYLES (PRESERVED)\r\n========================= *\/\r\n* { margin: 0; padding: 0; }\r\nbody { font-family: Arial, Helvetica, sans-serif; background: #ffffff; }\r\n\r\n.ztm-help-section {\r\n  width: 100%;\r\n  padding: 95px 20px;\r\n  background: #ffffff;\r\n  font-family: Arial, Helvetica, sans-serif;\r\n  overflow: hidden;\r\n  box-sizing: border-box;\r\n}\r\n.ztm-help-section *,\r\n.ztm-help-section *::before,\r\n.ztm-help-section *::after { box-sizing: border-box; }\r\n.ztm-help-container { width: 100%; max-width: 1180px; margin: 0 auto; }\r\n\r\n.ztm-help-header { max-width: 760px; margin: 0 auto 55px; text-align: center; }\r\n.ztm-eyebrow {\r\n  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 17px;\r\n  color: #111111; font-size: 11px; font-weight: 800; letter-spacing: 2px;\r\n}\r\n.ztm-dot {\r\n  width: 8px; height: 8px; border-radius: 50%; background: #8EF012;\r\n  box-shadow: 0 0 12px rgba(142,240,18,0.55);\r\n}\r\n.ztm-help-header h2 {\r\n  margin: 0 0 18px; color: #111111; font-size: 44px;\r\n  line-height: 1.14; font-weight: 800; letter-spacing: -1.2px;\r\n}\r\n.ztm-help-header h2 span { display: block; color: #05BFF9; }\r\n.ztm-help-header p {\r\n  max-width: 690px; margin: 0 auto; color: #666666;\r\n  font-size: 15px; line-height: 1.75;\r\n}\r\n\r\n.ztm-help-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 22px;\r\n}\r\n.ztm-help-card {\r\n  position: relative; min-height: 330px; padding: 30px;\r\n  background: #ffffff; border: 1px solid #e7e7e7; border-radius: 20px;\r\n  box-shadow: 0 10px 35px rgba(0,0,0,0.055); overflow: hidden;\r\n  display: flex; flex-direction: column;\r\n  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;\r\n}\r\n.ztm-help-card:hover {\r\n  transform: translateY(-7px);\r\n  border-color: rgba(5,191,249,0.45);\r\n  box-shadow: 0 20px 45px rgba(0,0,0,0.09);\r\n}\r\n.ztm-featured-card {\r\n  border: 1px solid rgba(5,191,249,0.55);\r\n  box-shadow: 0 15px 45px rgba(5,191,249,0.10), 0 5px 20px rgba(142,240,18,0.05);\r\n}\r\n.ztm-card-glow {\r\n  position: absolute; width: 180px; height: 180px; top: -90px; right: -70px;\r\n  border-radius: 50%;\r\n  background: radial-gradient(circle, rgba(5,191,249,0.16) 0%, rgba(5,191,249,0) 70%);\r\n  pointer-events: none;\r\n}\r\n.ztm-card-top {\r\n  display: flex; align-items: flex-start; justify-content: space-between;\r\n  margin-bottom: 30px;\r\n}\r\n.ztm-card-top > span {\r\n  color: #cfcfcf; font-size: 12px; font-weight: 800; letter-spacing: 1px;\r\n}\r\n.ztm-icon {\r\n  width: 58px; height: 58px; display: flex; align-items: center; justify-content: center;\r\n  border-radius: 15px; color: #05BFF9; background: rgba(5,191,249,0.08);\r\n  border: 1px solid rgba(5,191,249,0.14); transition: all 0.3s ease;\r\n}\r\n.ztm-help-card:hover .ztm-icon {\r\n  color: #111111; background: #8EF012; border-color: #8EF012;\r\n  transform: translateY(-2px);\r\n}\r\n.ztm-icon svg { width: 28px; height: 28px; }\r\n.ztm-help-card h3 {\r\n  margin: 0 0 13px; color: #111111; font-size: 22px;\r\n  line-height: 1.3; font-weight: 800; letter-spacing: -0.3px;\r\n}\r\n.ztm-help-card p { margin: 0; color: #666666; font-size: 14px; line-height: 1.7; }\r\n\r\n.ztm-tag-row, .ztm-platform-row {\r\n  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px;\r\n}\r\n.ztm-mini-tag {\r\n  padding: 6px 12px; border: 1px solid #eaeaea; border-radius: 30px;\r\n  background: #fafafa; color: #444444; font-size: 10px; font-weight: 700;\r\n}\r\n.ztm-platform-badge {\r\n  display: inline-flex; align-items: center; gap: 7px;\r\n  padding: 7px 13px 7px 8px; border: 1px solid #eaeaea; border-radius: 30px;\r\n  background: #fafafa; color: #333333; font-size: 11px; font-weight: 700;\r\n}\r\n.ztm-platform-badge svg { flex: 0 0 auto; border-radius: 50%; }\r\n\r\n.ztm-card-footer {\r\n  margin-top: auto; padding-top: 25px;\r\n  display: flex; align-items: center; justify-content: space-between;\r\n  border-top: 1px solid #eeeeee;\r\n}\r\n.ztm-card-footer span { color: #777777; font-size: 11px; font-weight: 700; }\r\n.ztm-card-footer i {\r\n  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;\r\n  border-radius: 50%; color: #111111; background: #8EF012;\r\n  font-size: 14px; font-style: normal; font-weight: 800;\r\n}\r\n\r\n.ztm-service-line {\r\n  margin-top: 25px; padding: 24px 28px;\r\n  display: flex; align-items: center; justify-content: space-between; gap: 30px;\r\n  border: 1px solid #e8e8e8; border-radius: 17px; background: #fafafa;\r\n}\r\n.ztm-service-heading { min-width: 245px; }\r\n.ztm-service-heading span {\r\n  display: block; margin-bottom: 6px; color: #05BFF9;\r\n  font-size: 10px; font-weight: 800; letter-spacing: 1.7px;\r\n}\r\n.ztm-service-heading strong { color: #222222; font-size: 14px; line-height: 1.4; }\r\n.ztm-service-list {\r\n  display: flex; align-items: center; justify-content: flex-end;\r\n  flex-wrap: wrap; gap: 9px;\r\n}\r\n.ztm-service-item {\r\n  display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px;\r\n  border: 1px solid #e5e5e5; border-radius: 30px; background: #ffffff;\r\n  color: #444444; font-size: 11px; font-weight: 700; transition: all 0.25s ease;\r\n}\r\n.ztm-service-item:hover {\r\n  color: #111111; border-color: #8EF012;\r\n  background: rgba(142,240,18,0.10); transform: translateY(-2px);\r\n}\r\n.ztm-service-item span {\r\n  width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%;\r\n  background: #8EF012; box-shadow: 0 0 7px rgba(142,240,18,0.5);\r\n}\r\n.ztm-platform-item svg { flex: 0 0 auto; border-radius: 50%; }\r\n.ztm-platform-item:hover { border-color: #05BFF9; background: rgba(5,191,249,0.08); }\r\n\r\n\/* =========================\r\n   SCHOOL CARD (PRESERVED + BADGE)\r\n========================= *\/\r\n.ztm-school-card { cursor: pointer; }\r\n.ztm-school-card .ztm-icon { color: #8EF012; background: rgba(142,240,18,0.10); border-color: rgba(142,240,18,0.20); }\r\n.ztm-school-card:hover .ztm-icon { color: #ffffff; background: #05BFF9; border-color: #05BFF9; }\r\n.ztm-school-card .ztm-card-glow {\r\n  background: radial-gradient(circle, rgba(142,240,18,0.18) 0%, rgba(142,240,18,0) 70%);\r\n}\r\n.ztm-school-subtitle {\r\n  display: block; color: #05BFF9; font-size: 11px; font-weight: 800;\r\n  letter-spacing: 0.5px; margin-bottom: 6px; text-transform: uppercase;\r\n}\r\n.ztm-school-tap {\r\n  display: inline-flex; align-items: center; gap: 6px;\r\n  color: #05BFF9; font-size: 11px; font-weight: 800; letter-spacing: 0.5px;\r\n}\r\n.ztm-school-tap .ztm-tap-arrow {\r\n  display: inline-block; transition: transform 0.3s ease;\r\n  animation: ztmTapPulse 1.6s ease-in-out infinite;\r\n}\r\n.ztm-school-card:hover .ztm-tap-arrow { transform: translateX(4px); }\r\n@keyframes ztmTapPulse {\r\n  0%, 100% { opacity: 1; transform: translateX(0); }\r\n  50% { opacity: 0.6; transform: translateX(3px); }\r\n}\r\n\r\n.ztm-school-badge {\r\n  position: absolute; top: 16px; right: 16px; z-index: 3;\r\n  padding: 9px 12px 8px;\r\n  background: linear-gradient(135deg, #E63946 0%, #C1121F 100%);\r\n  border-radius: 11px; color: #ffffff; text-align: center; line-height: 1;\r\n  box-shadow: 0 6px 18px rgba(230, 57, 70, 0.35), inset 0 1px 0 rgba(255,255,255,0.25);\r\n  pointer-events: none; transition: transform 0.3s ease;\r\n}\r\n.ztm-school-card:hover .ztm-school-badge { transform: scale(1.04); }\r\n.ztm-school-badge::before {\r\n  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;\r\n  border-radius: 11px 11px 0 0;\r\n  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0));\r\n  pointer-events: none;\r\n}\r\n.ztm-school-badge .ztm-badge-big {\r\n  display: block; font-size: 17px; font-weight: 900; letter-spacing: -0.5px;\r\n  margin-bottom: 3px; text-shadow: 0 1px 2px rgba(0,0,0,0.15);\r\n}\r\n.ztm-school-badge .ztm-badge-mid {\r\n  display: block; font-size: 7.5px; font-weight: 800; letter-spacing: 1.2px;\r\n  opacity: 0.95; margin-bottom: 1px;\r\n}\r\n.ztm-school-badge .ztm-badge-small {\r\n  display: block; font-size: 6.5px; font-weight: 700; letter-spacing: 1px;\r\n  opacity: 0.8; text-transform: uppercase;\r\n}\r\n.ztm-school-card .ztm-card-top > span { display: none; }\r\n\r\n\/* =========================\r\n   MODAL OVERLAY\r\n========================= *\/\r\n.ztm-modal-overlay {\r\n  position: fixed; inset: 0; z-index: 9999;\r\n  background: rgba(10, 18, 28, 0.75);\r\n  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);\r\n  opacity: 0; pointer-events: none;\r\n  transition: opacity 0.35s ease;\r\n  overflow-y: auto;\r\n}\r\n.ztm-modal-overlay.ztm-active { opacity: 1; pointer-events: auto; }\r\n.ztm-modal-overlay.ztm-active .ztm-modal-panel {\r\n  transform: translateY(0); opacity: 1;\r\n}\r\n.ztm-modal-panel {\r\n  width: 100%; min-height: 100vh;\r\n  background: #ffffff;\r\n  transform: translateY(30px); opacity: 0;\r\n  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;\r\n  position: relative;\r\n}\r\n.ztm-modal-close {\r\n  position: fixed; top: 20px; right: 20px; z-index: 10001;\r\n  width: 48px; height: 48px; border-radius: 50%;\r\n  background: #ffffff; border: 1px solid #e7e7e7;\r\n  box-shadow: 0 8px 24px rgba(0,0,0,0.12);\r\n  display: flex; align-items: center; justify-content: center;\r\n  cursor: pointer; transition: all 0.25s ease;\r\n  color: #111111; font-size: 20px; font-weight: 800;\r\n}\r\n.ztm-modal-close:hover {\r\n  background: #8EF012; border-color: #8EF012; transform: rotate(90deg);\r\n}\r\n.ztm-modal-inner {\r\n  max-width: 1180px; margin: 0 auto; padding: 60px 24px 80px;\r\n}\r\n\r\n\/* Modal hero *\/\r\n.ztm-m-hero { text-align: center; padding: 40px 0 50px; }\r\n.ztm-m-eyebrow {\r\n  display: inline-flex; align-items: center; gap: 10px;\r\n  padding: 8px 16px; border: 1px solid rgba(5,191,249,0.3);\r\n  border-radius: 30px; background: rgba(5,191,249,0.06);\r\n  color: #05BFF9; font-size: 11px; font-weight: 800; letter-spacing: 2px;\r\n  margin-bottom: 22px;\r\n}\r\n.ztm-m-eyebrow .ztm-dot { width: 7px; height: 7px; }\r\n.ztm-m-hero h1 {\r\n  font-size: 48px; line-height: 1.1; font-weight: 800;\r\n  color: #111111; letter-spacing: -1.5px; margin: 0 0 16px;\r\n}\r\n.ztm-m-hero h1 em { font-style: normal; color: #05BFF9; }\r\n.ztm-m-hero p.lead {\r\n  font-size: 16px; color: #666666; max-width: 620px;\r\n  margin: 0 auto 40px; line-height: 1.7;\r\n}\r\n\r\n\/* Animated flow *\/\r\n.ztm-flow {\r\n  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;\r\n  gap: 10px; margin-top: 30px;\r\n}\r\n.ztm-flow-node {\r\n  padding: 12px 18px; border-radius: 12px;\r\n  background: #ffffff; border: 1px solid #e7e7e7;\r\n  color: #111111; font-size: 12px; font-weight: 800;\r\n  letter-spacing: 0.5px; box-shadow: 0 6px 18px rgba(0,0,0,0.05);\r\n  opacity: 0; transform: translateY(10px);\r\n  animation: ztmNodeIn 0.5s ease forwards;\r\n}\r\n.ztm-flow-node:nth-child(1) { animation-delay: 0.1s; border-color: #05BFF9; color: #05BFF9; }\r\n.ztm-flow-node:nth-child(3) { animation-delay: 0.3s; }\r\n.ztm-flow-node:nth-child(5) { animation-delay: 0.5s; border-color: #8EF012; color: #111111; }\r\n.ztm-flow-node:nth-child(7) { animation-delay: 0.7s; }\r\n.ztm-flow-node:nth-child(9) { animation-delay: 0.9s; border-color: #05BFF9; color: #05BFF9; }\r\n.ztm-flow-node:nth-child(11) { animation-delay: 1.1s; background: #8EF012; color: #111111; border-color: #8EF012; }\r\n.ztm-flow-arrow {\r\n  color: #05BFF9; font-weight: 800; font-size: 16px;\r\n  opacity: 0; animation: ztmNodeIn 0.4s ease forwards;\r\n}\r\n.ztm-flow-arrow:nth-child(2) { animation-delay: 0.2s; }\r\n.ztm-flow-arrow:nth-child(4) { animation-delay: 0.4s; }\r\n.ztm-flow-arrow:nth-child(6) { animation-delay: 0.6s; }\r\n.ztm-flow-arrow:nth-child(8) { animation-delay: 0.8s; }\r\n.ztm-flow-arrow:nth-child(10) { animation-delay: 1.0s; }\r\n@keyframes ztmNodeIn { to { opacity: 1; transform: translateY(0); } }\r\n\r\n\/* Section blocks *\/\r\n.ztm-m-block { margin-top: 70px; }\r\n.ztm-m-block-head { text-align: center; margin-bottom: 40px; }\r\n.ztm-m-block-head .eyebrow {\r\n  display: inline-block; color: #05BFF9; font-size: 11px;\r\n  font-weight: 800; letter-spacing: 2px; margin-bottom: 10px;\r\n}\r\n.ztm-m-block-head h2 {\r\n  font-size: 34px; font-weight: 800; color: #111111;\r\n  letter-spacing: -1px; line-height: 1.15; margin: 0 0 10px;\r\n}\r\n.ztm-m-block-head h2 em { font-style: normal; color: #05BFF9; }\r\n.ztm-m-block-head p { color: #666666; font-size: 14px; max-width: 560px; margin: 0 auto; line-height: 1.7; }\r\n\r\n\/* How it works stages *\/\r\n.ztm-stages {\r\n  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;\r\n}\r\n.ztm-stage {\r\n  padding: 22px 18px; border: 1px solid #e7e7e7; border-radius: 16px;\r\n  background: #ffffff; cursor: pointer; transition: all 0.3s ease;\r\n  position: relative;\r\n}\r\n.ztm-stage:hover { border-color: #05BFF9; transform: translateY(-3px); box-shadow: 0 12px 28px rgba(5,191,249,0.12); }\r\n.ztm-stage.ztm-active {\r\n  border-color: #8EF012; background: linear-gradient(180deg, rgba(142,240,18,0.08), #ffffff);\r\n  box-shadow: 0 12px 28px rgba(142,240,18,0.15);\r\n}\r\n.ztm-stage-num {\r\n  font-size: 11px; font-weight: 800; color: #05BFF9; letter-spacing: 1.5px; margin-bottom: 8px;\r\n}\r\n.ztm-stage-title { font-size: 15px; font-weight: 800; color: #111111; line-height: 1.3; }\r\n.ztm-stage-desc {\r\n  margin-top: 14px; font-size: 12px; color: #666666; line-height: 1.65;\r\n  max-height: 0; overflow: hidden; transition: max-height 0.35s ease;\r\n}\r\n.ztm-stage.ztm-active .ztm-stage-desc { max-height: 200px; }\r\n\r\n\/* Growth visual *\/\r\n.ztm-growth-visual {\r\n  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;\r\n  gap: 14px; padding: 30px; border: 1px solid #e7e7e7; border-radius: 20px;\r\n  background: linear-gradient(135deg, rgba(5,191,249,0.04), rgba(142,240,18,0.04));\r\n}\r\n.ztm-growth-node {\r\n  padding: 16px 22px; border-radius: 14px; background: #ffffff;\r\n  border: 1px solid #e7e7e7; text-align: center; min-width: 120px;\r\n  box-shadow: 0 6px 18px rgba(0,0,0,0.04); transition: all 0.3s ease;\r\n}\r\n.ztm-growth-node:hover { transform: translateY(-4px); border-color: #05BFF9; }\r\n.ztm-growth-node .label {\r\n  font-size: 10px; color: #05BFF9; font-weight: 800; letter-spacing: 1.5px; margin-bottom: 4px;\r\n}\r\n.ztm-growth-node .value { font-size: 14px; font-weight: 800; color: #111111; }\r\n.ztm-growth-arrow { color: #8EF012; font-size: 20px; font-weight: 800; }\r\n\r\n\/* Map \/ local area *\/\r\n.ztm-map-wrap {\r\n  display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center;\r\n}\r\n.ztm-map-visual {\r\n  position: relative; aspect-ratio: 1\/1; max-width: 420px; margin: 0 auto;\r\n  background: radial-gradient(circle at center, rgba(5,191,249,0.08), rgba(5,191,249,0.02));\r\n  border-radius: 50%; border: 1px dashed rgba(5,191,249,0.3);\r\n}\r\n.ztm-map-ring {\r\n  position: absolute; border: 1px dashed rgba(5,191,249,0.25); border-radius: 50%;\r\n  top: 50%; left: 50%; transform: translate(-50%, -50%);\r\n}\r\n.ztm-map-ring.r1 { width: 35%; height: 35%; border-color: rgba(142,240,18,0.5); }\r\n.ztm-map-ring.r2 { width: 55%; height: 55%; }\r\n.ztm-map-ring.r3 { width: 75%; height: 75%; }\r\n.ztm-map-ring.r4 { width: 95%; height: 95%; }\r\n.ztm-map-center {\r\n  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\r\n  width: 60px; height: 60px; border-radius: 50%;\r\n  background: linear-gradient(135deg, #05BFF9, #8EF012);\r\n  display: flex; align-items: center; justify-content: center;\r\n  color: #ffffff; font-size: 10px; font-weight: 800; letter-spacing: 1px;\r\n  box-shadow: 0 0 0 8px rgba(5,191,249,0.15), 0 0 0 16px rgba(5,191,249,0.08);\r\n  text-align: center; line-height: 1.1;\r\n}\r\n.ztm-map-dot {\r\n  position: absolute; width: 10px; height: 10px; border-radius: 50%;\r\n  background: #05BFF9; box-shadow: 0 0 0 4px rgba(5,191,249,0.2);\r\n  animation: ztmDotPulse 2s ease-in-out infinite;\r\n}\r\n.ztm-map-dot:nth-child(odd) { background: #8EF012; box-shadow: 0 0 0 4px rgba(142,240,18,0.2); }\r\n@keyframes ztmDotPulse {\r\n  0%, 100% { transform: scale(1); opacity: 1; }\r\n  50% { transform: scale(1.3); opacity: 0.7; }\r\n}\r\n.ztm-map-label {\r\n  position: absolute; font-size: 10px; font-weight: 800; color: #111111;\r\n  background: #ffffff; padding: 3px 8px; border-radius: 10px;\r\n  border: 1px solid #e7e7e7;\r\n}\r\n.ztm-map-info h3 { font-size: 22px; font-weight: 800; color: #111111; margin-bottom: 12px; letter-spacing: -0.3px; }\r\n.ztm-map-info p { font-size: 14px; color: #666666; line-height: 1.7; margin-bottom: 18px; }\r\n.ztm-map-formula {\r\n  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;\r\n  padding: 16px; background: #fafafa; border: 1px solid #e7e7e7; border-radius: 14px;\r\n}\r\n.ztm-map-formula .chip {\r\n  padding: 8px 12px; background: #ffffff; border: 1px solid #e7e7e7;\r\n  border-radius: 10px; font-size: 11px; font-weight: 700; color: #111111;\r\n}\r\n.ztm-map-formula .plus { color: #05BFF9; font-weight: 800; }\r\n.ztm-map-formula .result {\r\n  margin-left: auto; padding: 8px 14px; background: #8EF012;\r\n  border-radius: 10px; font-size: 11px; font-weight: 800; color: #111111;\r\n}\r\n\r\n\/* Creative options *\/\r\n.ztm-creative-grid {\r\n  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;\r\n}\r\n.ztm-creative-card {\r\n  padding: 24px 20px; border: 1px solid #e7e7e7; border-radius: 18px;\r\n  background: #ffffff; transition: all 0.3s ease; cursor: default;\r\n}\r\n.ztm-creative-card:hover {\r\n  transform: translateY(-5px); border-color: #05BFF9;\r\n  box-shadow: 0 14px 30px rgba(5,191,249,0.12);\r\n}\r\n.ztm-creative-visual {\r\n  height: 90px; border-radius: 12px; margin-bottom: 16px;\r\n  display: flex; align-items: center; justify-content: center;\r\n  position: relative; overflow: hidden;\r\n}\r\n.ztm-creative-visual.video { background: linear-gradient(135deg, #05BFF9, #4C63D2); }\r\n.ztm-creative-visual.static { background: linear-gradient(135deg, #8EF012, #05BFF9); }\r\n.ztm-creative-visual.motion { background: linear-gradient(135deg, #F47133, #BC3081); }\r\n.ztm-creative-visual.ai { background: linear-gradient(135deg, #111111, #05BFF9); }\r\n.ztm-creative-visual svg { width: 36px; height: 36px; color: #ffffff; }\r\n.ztm-creative-card h4 { font-size: 15px; font-weight: 800; color: #111111; margin-bottom: 6px; }\r\n.ztm-creative-card p { font-size: 12px; color: #666666; line-height: 1.6; }\r\n\r\n\/* Video vs Post *\/\r\n.ztm-compare {\r\n  display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: stretch;\r\n}\r\n.ztm-compare-col {\r\n  padding: 26px; border-radius: 18px; border: 1px solid #e7e7e7;\r\n  background: #ffffff;\r\n}\r\n.ztm-compare-col.video { border-color: rgba(5,191,249,0.4); background: linear-gradient(180deg, rgba(5,191,249,0.05), #ffffff); }\r\n.ztm-compare-col.post { border-color: rgba(142,240,18,0.4); background: linear-gradient(180deg, rgba(142,240,18,0.05), #ffffff); }\r\n.ztm-compare-col h4 {\r\n  font-size: 13px; font-weight: 800; letter-spacing: 2px; margin-bottom: 16px;\r\n}\r\n.ztm-compare-col.video h4 { color: #05BFF9; }\r\n.ztm-compare-col.post h4 { color: #111111; }\r\n.ztm-compare-col ul { list-style: none; padding: 0; margin: 0; }\r\n.ztm-compare-col li {\r\n  padding: 10px 0; font-size: 13px; color: #333333; font-weight: 700;\r\n  border-bottom: 1px dashed #eeeeee; display: flex; align-items: center; gap: 10px;\r\n}\r\n.ztm-compare-col li:last-child { border-bottom: none; }\r\n.ztm-compare-col li::before {\r\n  content: ''; width: 6px; height: 6px; border-radius: 50%;\r\n  background: #8EF012; flex: 0 0 6px;\r\n}\r\n.ztm-compare-vs {\r\n  display: flex; align-items: center; justify-content: center;\r\n  font-size: 14px; font-weight: 800; color: #05BFF9;\r\n}\r\n.ztm-compare-note {\r\n  margin-top: 20px; text-align: center; font-size: 13px;\r\n  color: #666666; font-style: italic;\r\n}\r\n\r\n\/* Meta ads visual *\/\r\n.ztm-meta-flow {\r\n  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;\r\n  gap: 12px; padding: 26px;\r\n  border: 1px solid #e7e7e7; border-radius: 18px; background: #fafafa;\r\n}\r\n.ztm-meta-node {\r\n  padding: 14px 18px; border-radius: 12px; background: #ffffff;\r\n  border: 1px solid #e7e7e7; font-size: 12px; font-weight: 800;\r\n  display: flex; align-items: center; gap: 8px;\r\n}\r\n.ztm-meta-node.platforms { border-color: #05BFF9; color: #05BFF9; }\r\n.ztm-meta-node.creative { border-color: #8EF012; color: #111111; }\r\n.ztm-meta-node.result { background: #111111; color: #8EF012; border-color: #111111; }\r\n.ztm-meta-arrow { color: #05BFF9; font-weight: 800; }\r\n.ztm-meta-note {\r\n  margin-top: 20px; text-align: center; padding: 14px;\r\n  background: rgba(5,191,249,0.06); border: 1px dashed rgba(5,191,249,0.3);\r\n  border-radius: 12px; font-size: 12px; color: #111111; font-weight: 700;\r\n}\r\n.ztm-meta-note strong { color: #05BFF9; }\r\n\r\n\/* Budget slider *\/\r\n.ztm-budget-wrap {\r\n  padding: 30px; border-radius: 20px;\r\n  background: linear-gradient(135deg, #ffffff, #fafafa);\r\n  border: 1px solid #e7e7e7;\r\n}\r\n.ztm-budget-slider {\r\n  width: 100%; -webkit-appearance: none; appearance: none;\r\n  height: 8px; border-radius: 10px;\r\n  background: linear-gradient(90deg, #05BFF9, #8EF012);\r\n  outline: none; margin: 20px 0;\r\n}\r\n.ztm-budget-slider::-webkit-slider-thumb {\r\n  -webkit-appearance: none; appearance: none;\r\n  width: 26px; height: 26px; border-radius: 50%;\r\n  background: #ffffff; border: 3px solid #05BFF9;\r\n  cursor: pointer; box-shadow: 0 4px 14px rgba(5,191,249,0.4);\r\n  transition: transform 0.2s ease;\r\n}\r\n.ztm-budget-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }\r\n.ztm-budget-slider::-moz-range-thumb {\r\n  width: 26px; height: 26px; border-radius: 50%;\r\n  background: #ffffff; border: 3px solid #05BFF9;\r\n  cursor: pointer; box-shadow: 0 4px 14px rgba(5,191,249,0.4);\r\n}\r\n.ztm-budget-range {\r\n  display: flex; justify-content: space-between;\r\n  font-size: 11px; color: #888888; font-weight: 700;\r\n}\r\n.ztm-budget-display {\r\n  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 24px;\r\n}\r\n.ztm-budget-stat {\r\n  padding: 18px; border-radius: 14px; background: #ffffff;\r\n  border: 1px solid #e7e7e7;\r\n}\r\n.ztm-budget-stat .label {\r\n  font-size: 10px; color: #05BFF9; font-weight: 800;\r\n  letter-spacing: 1.5px; margin-bottom: 6px;\r\n}\r\n.ztm-budget-stat .value { font-size: 22px; font-weight: 800; color: #111111; }\r\n.ztm-budget-stat .value small { font-size: 12px; color: #888888; font-weight: 700; }\r\n.ztm-budget-stat.highlight {\r\n  background: linear-gradient(135deg, #8EF012, #05BFF9);\r\n  border-color: transparent;\r\n}\r\n.ztm-budget-stat.highlight .label { color: #ffffff; opacity: 0.85; }\r\n.ztm-budget-stat.highlight .value { color: #ffffff; }\r\n\r\n\/* Service options *\/\r\n.ztm-service-options {\r\n  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;\r\n}\r\n.ztm-service-opt {\r\n  padding: 28px 22px; border-radius: 18px; border: 2px solid #e7e7e7;\r\n  background: #ffffff; cursor: pointer; transition: all 0.3s ease;\r\n  text-align: center; position: relative;\r\n}\r\n.ztm-service-opt:hover { border-color: #05BFF9; transform: translateY(-4px); }\r\n.ztm-service-opt.ztm-selected {\r\n  border-color: #8EF012;\r\n  background: linear-gradient(180deg, rgba(142,240,18,0.08), #ffffff);\r\n  box-shadow: 0 14px 30px rgba(142,240,18,0.18);\r\n}\r\n.ztm-service-opt .check {\r\n  position: absolute; top: 14px; right: 14px;\r\n  width: 24px; height: 24px; border-radius: 50%;\r\n  background: #e7e7e7; color: #ffffff; font-size: 14px; font-weight: 800;\r\n  display: flex; align-items: center; justify-content: center;\r\n  transition: all 0.25s ease;\r\n}\r\n.ztm-service-opt.ztm-selected .check { background: #8EF012; color: #111111; }\r\n.ztm-service-opt .opt-icon {\r\n  width: 56px; height: 56px; margin: 0 auto 14px;\r\n  border-radius: 14px; background: rgba(5,191,249,0.08);\r\n  display: flex; align-items: center; justify-content: center;\r\n  color: #05BFF9;\r\n}\r\n.ztm-service-opt.ztm-selected .opt-icon { background: #8EF012; color: #111111; }\r\n.ztm-service-opt h4 { font-size: 15px; font-weight: 800; color: #111111; margin-bottom: 6px; }\r\n.ztm-service-opt p { font-size: 12px; color: #666666; line-height: 1.6; }\r\n\r\n\/* Special offer *\/\r\n.ztm-offer {\r\n  padding: 40px; border-radius: 22px; text-align: center;\r\n  background: linear-gradient(135deg, #111111 0%, #0a1a2e 100%);\r\n  color: #ffffff; position: relative; overflow: hidden;\r\n}\r\n.ztm-offer::before {\r\n  content: ''; position: absolute; top: -50%; right: -20%;\r\n  width: 400px; height: 400px; border-radius: 50%;\r\n  background: radial-gradient(circle, rgba(142,240,18,0.2), transparent 70%);\r\n}\r\n.ztm-offer::after {\r\n  content: ''; position: absolute; bottom: -50%; left: -20%;\r\n  width: 400px; height: 400px; border-radius: 50%;\r\n  background: radial-gradient(circle, rgba(5,191,249,0.2), transparent 70%);\r\n}\r\n.ztm-offer > * { position: relative; z-index: 1; }\r\n.ztm-offer .badge {\r\n  display: inline-block; padding: 6px 14px; border-radius: 30px;\r\n  background: rgba(142,240,18,0.15); border: 1px solid rgba(142,240,18,0.4);\r\n  color: #8EF012; font-size: 11px; font-weight: 800; letter-spacing: 2px; margin-bottom: 16px;\r\n}\r\n.ztm-offer h2 {\r\n  font-size: 38px; font-weight: 800; margin: 0 0 10px; letter-spacing: -1px;\r\n}\r\n.ztm-offer h2 em { font-style: normal; color: #8EF012; }\r\n.ztm-offer p { color: rgba(255,255,255,0.75); font-size: 14px; margin-bottom: 10px; }\r\n.ztm-offer .code-hint {\r\n  display: inline-block; margin: 6px 0 20px;\r\n  padding: 8px 18px; border-radius: 10px;\r\n  background: rgba(255,255,255,0.08); border: 1px dashed rgba(255,255,255,0.3);\r\n  color: #ffffff; font-size: 13px; font-weight: 800; letter-spacing: 2px;\r\n}\r\n.ztm-offer .code-hint strong { color: #8EF012; }\r\n.ztm-offer-btn {\r\n  display: inline-flex; align-items: center; gap: 10px;\r\n  padding: 14px 28px; border-radius: 30px; border: none;\r\n  background: #8EF012; color: #111111; font-size: 13px; font-weight: 800;\r\n  letter-spacing: 1px; cursor: pointer; transition: all 0.3s ease;\r\n}\r\n.ztm-offer-btn:hover { background: #ffffff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(142,240,18,0.3); }\r\n\r\n\/* Order builder *\/\r\n.ztm-builder {\r\n  padding: 30px; border-radius: 20px; border: 1px solid #e7e7e7; background: #fafafa;\r\n}\r\n.ztm-builder-steps {\r\n  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px;\r\n}\r\n.ztm-builder-step {\r\n  padding: 18px; border-radius: 14px; background: #ffffff; border: 1px solid #e7e7e7;\r\n}\r\n.ztm-builder-step label {\r\n  display: block; font-size: 10px; color: #05BFF9; font-weight: 800;\r\n  letter-spacing: 1.5px; margin-bottom: 8px;\r\n}\r\n.ztm-builder-step select, .ztm-builder-step input, .ztm-builder-step textarea {\r\n  width: 100%; padding: 10px 12px; border-radius: 10px;\r\n  border: 1px solid #e7e7e7; background: #ffffff;\r\n  font-size: 13px; font-weight: 700; color: #111111;\r\n  font-family: inherit; cursor: pointer; box-sizing: border-box;\r\n}\r\n.ztm-builder-step select:focus, .ztm-builder-step input:focus, .ztm-builder-step textarea:focus {\r\n  outline: none; border-color: #05BFF9;\r\n}\r\n\r\n\/* Website Plans *\/\r\n.ztm-web-plans {\r\n  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px;\r\n}\r\n.ztm-web-plan {\r\n  padding: 24px 20px; border: 1px solid #e7e7e7; border-radius: 18px;\r\n  background: #ffffff; position: relative; transition: all 0.3s ease;\r\n  display: flex; flex-direction: column; cursor: pointer;\r\n}\r\n.ztm-web-plan:hover {\r\n  border-color: #05BFF9; transform: translateY(-4px);\r\n  box-shadow: 0 12px 28px rgba(5,191,249,0.12);\r\n}\r\n.ztm-web-plan.ztm-web-selected {\r\n  border-color: #8EF012;\r\n  background: linear-gradient(180deg, rgba(142,240,18,0.06), #ffffff);\r\n  box-shadow: 0 12px 28px rgba(142,240,18,0.15);\r\n}\r\n.ztm-web-plan-badge {\r\n  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);\r\n  background: #8EF012; color: #111111; font-size: 10px; font-weight: 800;\r\n  padding: 4px 12px; border-radius: 20px; letter-spacing: 1px;\r\n}\r\n.ztm-web-plan-header h4 {\r\n  font-size: 14px; font-weight: 800; color: #111111;\r\n  margin-bottom: 8px; letter-spacing: 0.5px;\r\n}\r\n.ztm-web-price {\r\n  font-size: 24px; font-weight: 800; color: #05BFF9; margin-bottom: 8px;\r\n}\r\n.ztm-web-plan-header p {\r\n  font-size: 12px; color: #666666; line-height: 1.5;\r\n  margin-bottom: 16px; min-height: 36px;\r\n}\r\n.ztm-web-features {\r\n  list-style: none; padding: 0; margin: 0 0 20px 0; flex: 1;\r\n}\r\n.ztm-web-features li {\r\n  font-size: 12px; color: #333333; padding: 6px 0;\r\n  border-bottom: 1px dashed #eeeeee; display: flex;\r\n  align-items: flex-start; gap: 8px; line-height: 1.4;\r\n}\r\n.ztm-web-features li:last-child { border-bottom: none; }\r\n.ztm-web-features li::before {\r\n  content: '\u2713'; color: #8EF012; font-weight: 800; flex: 0 0 14px;\r\n}\r\n.ztm-web-select-btn {\r\n  width: 100%; padding: 12px; border-radius: 10px;\r\n  border: 1px solid #e7e7e7; background: #ffffff;\r\n  color: #111111; font-size: 12px; font-weight: 800;\r\n  cursor: pointer; transition: all 0.25s ease;\r\n}\r\n.ztm-web-plan.ztm-web-selected .ztm-web-select-btn {\r\n  background: #8EF012; border-color: #8EF012; color: #111111;\r\n}\r\n.ztm-web-select-btn:hover { border-color: #05BFF9; color: #05BFF9; }\r\n.ztm-web-plan.ztm-web-selected .ztm-web-select-btn:hover {\r\n  background: #05BFF9; border-color: #05BFF9; color: #ffffff;\r\n}\r\n\r\n\/* Summary *\/\r\n.ztm-summary {\r\n  padding: 24px; border-radius: 16px; background: #ffffff;\r\n  border: 1px solid #e7e7e7; margin-top: 20px;\r\n}\r\n.ztm-summary h4 {\r\n  font-size: 12px; color: #05BFF9; font-weight: 800;\r\n  letter-spacing: 2px; margin-bottom: 16px;\r\n}\r\n.ztm-summary-row {\r\n  display: flex; justify-content: space-between; align-items: center;\r\n  padding: 10px 0; border-bottom: 1px dashed #eeeeee;\r\n  font-size: 13px;\r\n}\r\n.ztm-summary-row:last-child { border-bottom: none; }\r\n.ztm-summary-row .k { color: #666666; font-weight: 600; }\r\n.ztm-summary-row .v { color: #111111; font-weight: 800; }\r\n.ztm-summary-row.total {\r\n  margin-top: 10px; padding-top: 16px; border-top: 2px solid #111111; border-bottom: none;\r\n}\r\n.ztm-summary-row.total .k { font-size: 14px; color: #111111; font-weight: 800; }\r\n.ztm-summary-row.total .v { font-size: 20px; color: #05BFF9; }\r\n.ztm-summary-row.discount .v { color: #8EF012; }\r\n.ztm-summary-row.fee-note .k { font-size: 10px; color: #888888; font-weight: 600; font-style: italic; }\r\n.ztm-summary-row.fee-note .v { font-size: 10px; color: #888888; font-weight: 600; font-style: italic; }\r\n\r\n.ztm-referral {\r\n  margin-top: 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;\r\n}\r\n.ztm-referral input {\r\n  flex: 1; min-width: 180px; padding: 12px 14px; border-radius: 10px;\r\n  border: 1px solid #e7e7e7; background: #ffffff;\r\n  font-size: 13px; font-weight: 700; font-family: inherit;\r\n  text-transform: uppercase; letter-spacing: 1px;\r\n}\r\n.ztm-referral input:focus { outline: none; border-color: #05BFF9; }\r\n.ztm-referral button {\r\n  padding: 12px 20px; border-radius: 10px; border: none;\r\n  background: #111111; color: #ffffff; font-size: 12px; font-weight: 800;\r\n  cursor: pointer; transition: all 0.25s ease;\r\n}\r\n.ztm-referral button:hover { background: #05BFF9; }\r\n.ztm-referral-msg {\r\n  margin-top: 8px; font-size: 11px; font-weight: 700;\r\n}\r\n.ztm-referral-msg.ok { color: #8EF012; }\r\n.ztm-referral-msg.err { color: #F47133; }\r\n.ztm-referral-msg.hint { color: #05BFF9; }\r\n\r\n.ztm-whatsapp-btn {\r\n  display: flex; align-items: center; justify-content: center; gap: 12px;\r\n  width: 100%; margin-top: 24px; padding: 18px;\r\n  border-radius: 14px; border: none;\r\n  background: linear-gradient(135deg, #25D366, #128C7E);\r\n  color: #ffffff; font-size: 15px; font-weight: 800; letter-spacing: 0.5px;\r\n  cursor: pointer; transition: all 0.3s ease;\r\n  box-shadow: 0 10px 24px rgba(37,211,102,0.3);\r\n}\r\n.ztm-whatsapp-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(37,211,102,0.4); }\r\n.ztm-whatsapp-btn svg { width: 22px; height: 22px; }\r\n\r\n\/* =========================\r\n   RESPONSIVE\r\n========================= *\/\r\n@media (max-width: 900px) {\r\n  .ztm-help-grid { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }\r\n  .ztm-help-card { min-height: 0; }\r\n  .ztm-service-line { flex-direction: column; align-items: flex-start; }\r\n  .ztm-service-list { justify-content: flex-start; }\r\n\r\n  .ztm-modal-inner { padding: 50px 18px 70px; }\r\n  .ztm-m-hero h1 { font-size: 34px; }\r\n  .ztm-m-block-head h2 { font-size: 26px; }\r\n  .ztm-stages { grid-template-columns: repeat(2, 1fr); }\r\n  .ztm-creative-grid { grid-template-columns: repeat(2, 1fr); }\r\n  .ztm-map-wrap { grid-template-columns: 1fr; }\r\n  .ztm-compare { grid-template-columns: 1fr; }\r\n  .ztm-compare-vs { padding: 10px 0; }\r\n  .ztm-service-options { grid-template-columns: repeat(2, 1fr); }\r\n  .ztm-builder-steps { grid-template-columns: 1fr; }\r\n  .ztm-budget-display { grid-template-columns: 1fr; }\r\n  .ztm-offer { padding: 30px 20px; }\r\n  .ztm-offer h2 { font-size: 28px; }\r\n  \r\n  .ztm-web-plans { grid-template-columns: 1fr; }\r\n  .ztm-web-why-grid { grid-template-columns: 1fr !important; }\r\n}\r\n@media (max-width: 600px) {\r\n  .ztm-m-hero h1 { font-size: 28px; }\r\n  .ztm-m-block-head h2 { font-size: 22px; }\r\n  .ztm-flow { gap: 6px; }\r\n  .ztm-flow-node { padding: 9px 12px; font-size: 10px; }\r\n  .ztm-flow-arrow { font-size: 12px; }\r\n  .ztm-modal-close { top: 14px; right: 14px; width: 42px; height: 42px; }\r\n  .ztm-stages { grid-template-columns: 1fr; }\r\n  .ztm-creative-grid { grid-template-columns: 1fr; }\r\n  .ztm-growth-visual { padding: 18px; }\r\n  .ztm-growth-node { min-width: 90px; padding: 12px 14px; }\r\n  .ztm-growth-node .value { font-size: 12px; }\r\n  .ztm-service-options { grid-template-columns: 1fr; }\r\n\r\n  .ztm-school-badge {\r\n    top: 14px; right: 14px; padding: 7px 10px 6px; border-radius: 9px;\r\n  }\r\n  .ztm-school-badge .ztm-badge-big { font-size: 14px; margin-bottom: 2px; }\r\n  .ztm-school-badge .ztm-badge-mid { font-size: 6.5px; letter-spacing: 1px; }\r\n  .ztm-school-badge .ztm-badge-small { font-size: 5.8px; }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- ============================================================\r\n     ORIGINAL ZTM SECTION (PRESERVED + ONE NEW CARD)\r\n============================================================ -->\r\n<section class=\"ztm-help-section\">\r\n  <div class=\"ztm-help-container\">\r\n    <!-- HEADER -->\r\n    <div class=\"ztm-help-header\">\r\n      <div class=\"ztm-eyebrow\">\r\n        <span class=\"ztm-dot\"><\/span>\r\n        HOW CAN WE HELP YOU?\r\n      <\/div>\r\n      <h2>\r\n        Your Brand Deserves\r\n        <span>Better Creative.<\/span>\r\n      <\/h2>\r\n      <p>\r\n        From scroll-stopping video ads to full-scale Meta advertising campaigns,\r\n        ZTM creates the content and runs the ads that make your brand impossible to ignore.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <!-- SERVICE CARDS -->\r\n    <div class=\"ztm-help-grid\">\r\n      <!-- CARD 01 \u2014 CREATIVE PRODUCTION -->\r\n      <div class=\"ztm-help-card ztm-featured-card\">\r\n        <div class=\"ztm-card-glow\"><\/div>\r\n        <div class=\"ztm-card-top\">\r\n          <div class=\"ztm-icon\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n              <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"3\" stroke=\"currentColor\" stroke-width=\"1.8\"\/>\r\n              <path d=\"M10 9L15 12L10 15V9Z\" fill=\"currentColor\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n          <span>01<\/span>\r\n        <\/div>\r\n        <h3>Creative Production<\/h3>\r\n        <p>\r\n          Video ads, product creatives, AI UGC, cinematic commercials and CGI \u2014\r\n          professionally produced content designed for every platform.\r\n        <\/p>\r\n        <div class=\"ztm-tag-row\">\r\n          <span class=\"ztm-mini-tag\">Video Ads<\/span>\r\n          <span class=\"ztm-mini-tag\">Product Ads<\/span>\r\n          <span class=\"ztm-mini-tag\">AI UGC<\/span>\r\n          <span class=\"ztm-mini-tag\">CGI<\/span>\r\n        <\/div>\r\n        <div class=\"ztm-card-footer\">\r\n          <span>7 Creative Formats<\/span>\r\n          <i>\u2197<\/i>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- CARD 02 \u2014 META ADS MANAGEMENT -->\r\n      <div class=\"ztm-help-card ztm-featured-card\">\r\n        <div class=\"ztm-card-glow\"><\/div>\r\n        <div class=\"ztm-card-top\">\r\n          <div class=\"ztm-icon\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n              <path d=\"M4 18V10M9 18V6M14 18V13M19 18V8\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/>\r\n              <circle cx=\"19\" cy=\"6\" r=\"1.6\" fill=\"currentColor\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n          <span>02<\/span>\r\n        <\/div>\r\n        <h3>Meta Ads Management<\/h3>\r\n        <p>\r\n          We plan, launch and manage your advertising campaigns across Meta's\r\n          network \u2014 reaching your audience where they spend the most time.\r\n        <\/p>\r\n        <div class=\"ztm-platform-row\">\r\n          <div class=\"ztm-platform-badge\">\r\n            <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\">\r\n              <path fill=\"#1877F2\" d=\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z\"\/>\r\n            <\/svg>\r\n            Facebook\r\n          <\/div>\r\n          <div class=\"ztm-platform-badge\">\r\n            <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\">\r\n              <defs>\r\n                <linearGradient id=\"ztmIgGrad\" x1=\"0%\" y1=\"100%\" x2=\"100%\" y2=\"0%\">\r\n                  <stop offset=\"0%\" stop-color=\"#FED576\"\/>\r\n                  <stop offset=\"26%\" stop-color=\"#F47133\"\/>\r\n                  <stop offset=\"61%\" stop-color=\"#BC3081\"\/>\r\n                  <stop offset=\"100%\" stop-color=\"#4C63D2\"\/>\r\n                <\/linearGradient>\r\n              <\/defs>\r\n              <rect x=\"1\" y=\"1\" width=\"22\" height=\"22\" rx=\"6\" fill=\"url(#ztmIgGrad)\"\/>\r\n              <rect x=\"6.5\" y=\"6.5\" width=\"11\" height=\"11\" rx=\"3.5\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.6\"\/>\r\n              <circle cx=\"12\" cy=\"12\" r=\"3\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.6\"\/>\r\n              <circle cx=\"16.6\" cy=\"7.4\" r=\"1.1\" fill=\"#fff\"\/>\r\n            <\/svg>\r\n            Instagram\r\n          <\/div>\r\n          <div class=\"ztm-platform-badge\">\r\n            <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\">\r\n              <circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"#25D366\"\/>\r\n              <path fill=\"#fff\" d=\"M12 5.5a6.5 6.5 0 00-5.6 9.8L5.5 18.5l3.3-.9A6.5 6.5 0 1012 5.5zm3.9 9.2c-.2.5-1 .9-1.4.9-.4.1-.8.1-1.3-.1-.3-.1-.7-.2-1.2-.5-2.1-.9-3.5-3-3.6-3.1-.1-.1-.9-1.2-.9-2.3 0-1.1.6-1.6.8-1.9.2-.2.5-.3.6-.3h.5c.1 0 .3 0 .5.4.2.4.6 1.4.7 1.5.1.1.1.3 0 .4-.1.1-.1.2-.3.4-.1.2-.3.3-.4.5-.1.1-.3.3-.1.6.2.3.8 1.2 1.6 2 1.1 1 2 1.3 2.3 1.4.3.1.5.1.6-.1.2-.2.6-.7.8-1 .2-.2.4-.2.6-.1.2.1 1.4.7 1.6.8.2.1.4.2.4.3.1.2.1.5-.1 1z\"\/>\r\n            <\/svg>\r\n            WhatsApp\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"ztm-card-footer\">\r\n          <span>Full Campaign Management<\/span>\r\n          <i>\u2197<\/i>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- CARD 03 \u2014 SCHOOL & ACADEMIES -->\r\n      <div class=\"ztm-help-card ztm-featured-card ztm-school-card\" id=\"ztmOpenSchool\">\r\n        <div class=\"ztm-card-glow\"><\/div>\r\n        <div class=\"ztm-school-badge\" aria-hidden=\"true\">\r\n          <span class=\"ztm-badge-big\">20% OFF<\/span>\r\n          <span class=\"ztm-badge-mid\">SCHOOL &amp; ACADEMY<\/span>\r\n          <span class=\"ztm-badge-small\">SPECIAL PLAN<\/span>\r\n        <\/div>\r\n        <div class=\"ztm-card-top\">\r\n          <div class=\"ztm-icon\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n              <path d=\"M12 3L2 8l10 5 10-5-10-5z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/>\r\n              <path d=\"M6 10.5v5c0 1.5 2.7 3 6 3s6-1.5 6-3v-5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n              <path d=\"M22 8v6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n          <span>03<\/span>\r\n        <\/div>\r\n        <h3>School &amp; Academies<\/h3>\r\n        <span class=\"ztm-school-subtitle\">Special Digital Growth Plans<\/span>\r\n        <p>\r\n          Target local parents, promote admissions, create professional ads\r\n          and grow your school's digital presence.\r\n        <\/p>\r\n        <div class=\"ztm-card-footer\">\r\n          <span class=\"ztm-school-tap\">\r\n            VIEW SCHOOL PLAN <span class=\"ztm-tap-arrow\">\u2192<\/span>\r\n          <\/span>\r\n          <i>\u2197<\/i>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- WHAT WE CREATE -->\r\n    <div class=\"ztm-service-line\">\r\n      <div class=\"ztm-service-heading\">\r\n        <span>WHAT WE CREATE<\/span>\r\n        <strong>Creative solutions for modern brands.<\/strong>\r\n      <\/div>\r\n      <div class=\"ztm-service-list\">\r\n        <div class=\"ztm-service-item\"><span><\/span>Video Ads<\/div>\r\n        <div class=\"ztm-service-item\"><span><\/span>Product Ads<\/div>\r\n        <div class=\"ztm-service-item\"><span><\/span>AI UGC \/ Avatar<\/div>\r\n        <div class=\"ztm-service-item\"><span><\/span>Cinematic Commercials<\/div>\r\n        <div class=\"ztm-service-item\"><span><\/span>3D \/ CGI Creatives<\/div>\r\n        <div class=\"ztm-service-item\"><span><\/span>Explainer Ads<\/div>\r\n        <div class=\"ztm-service-item\"><span><\/span>Static &amp; Motion Creatives<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- WHERE WE ADVERTISE -->\r\n    <div class=\"ztm-service-line\">\r\n      <div class=\"ztm-service-heading\">\r\n        <span>WHERE WE ADVERTISE<\/span>\r\n        <strong>Campaigns managed end-to-end on Meta.<\/strong>\r\n      <\/div>\r\n      <div class=\"ztm-service-list\">\r\n        <div class=\"ztm-service-item ztm-platform-item\">\r\n          <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\">\r\n            <path fill=\"#1877F2\" d=\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z\"\/>\r\n          <\/svg>\r\n          Facebook\r\n        <\/div>\r\n        <div class=\"ztm-service-item ztm-platform-item\">\r\n          <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\">\r\n            <defs>\r\n              <linearGradient id=\"ztmIgGradSmall\" x1=\"0%\" y1=\"100%\" x2=\"100%\" y2=\"0%\">\r\n                <stop offset=\"0%\" stop-color=\"#FED576\"\/>\r\n                <stop offset=\"26%\" stop-color=\"#F47133\"\/>\r\n                <stop offset=\"61%\" stop-color=\"#BC3081\"\/>\r\n                <stop offset=\"100%\" stop-color=\"#4C63D2\"\/>\r\n              <\/linearGradient>\r\n            <\/defs>\r\n            <rect x=\"1\" y=\"1\" width=\"22\" height=\"22\" rx=\"6\" fill=\"url(#ztmIgGradSmall)\"\/>\r\n            <rect x=\"6.5\" y=\"6.5\" width=\"11\" height=\"11\" rx=\"3.5\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.6\"\/>\r\n            <circle cx=\"12\" cy=\"12\" r=\"3\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.6\"\/>\r\n            <circle cx=\"16.6\" cy=\"7.4\" r=\"1.1\" fill=\"#fff\"\/>\r\n          <\/svg>\r\n          Instagram\r\n        <\/div>\r\n        <div class=\"ztm-service-item ztm-platform-item\">\r\n          <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\">\r\n            <circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"#25D366\"\/>\r\n            <path fill=\"#fff\" d=\"M12 5.5a6.5 6.5 0 00-5.6 9.8L5.5 18.5l3.3-.9A6.5 6.5 0 1012 5.5zm3.9 9.2c-.2.5-1 .9-1.4.9-.4.1-.8.1-1.3-.1-.3-.1-.7-.2-1.2-.5-2.1-.9-3.5-3-3.6-3.1-.1-.1-.9-1.2-.9-2.3 0-1.1.6-1.6.8-1.9.2-.2.5-.3.6-.3h.5c.1 0 .3 0 .5.4.2.4.6 1.4.7 1.5.1.1.1.3 0 .4-.1.1-.1.2-.3.4-.1.2-.3.3-.4.5-.1.1-.3.3-.1.6.2.3.8 1.2 1.6 2 1.1 1 2 1.3 2.3 1.4.3.1.5.1.6-.1.2-.2.6-.7.8-1 .2-.2.4-.2.6-.1.2.1 1.4.7 1.6.8.2.1.4.2.4.3.1.2.1.5-.1 1z\"\/>\r\n          <\/svg>\r\n          WhatsApp\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- ============================================================\r\n     SCHOOL & ACADEMIES MODAL EXPERIENCE\r\n============================================================ -->\r\n<div class=\"ztm-modal-overlay\" id=\"ztmSchoolModal\">\r\n  <button class=\"ztm-modal-close\" id=\"ztmCloseSchool\" aria-label=\"Close\">\u2715<\/button>\r\n  <div class=\"ztm-modal-panel\">\r\n    <div class=\"ztm-modal-inner\">\r\n\r\n      <!-- HERO -->\r\n      <div class=\"ztm-m-hero\">\r\n        <div class=\"ztm-m-eyebrow\">\r\n          <span class=\"ztm-dot\"><\/span>\r\n          ZTM SCHOOL &amp; ACADEMY GROWTH PLAN\r\n        <\/div>\r\n        <h1>Put Your School in Front of the <em>Right Local Audience.<\/em><\/h1>\r\n        <p class=\"lead\">Creative + Targeted Digital Advertising + Campaign Management \u2014 built for schools, academies and colleges that want real admissions enquiries.<\/p>\r\n\r\n        <div class=\"ztm-flow\" id=\"ztmFlow\">\r\n          <div class=\"ztm-flow-node\">SCHOOL<\/div>\r\n          <div class=\"ztm-flow-arrow\">\u2193<\/div>\r\n          <div class=\"ztm-flow-node\">CREATIVE<\/div>\r\n          <div class=\"ztm-flow-arrow\">\u2193<\/div>\r\n          <div class=\"ztm-flow-node\">LOCAL TARGETING<\/div>\r\n          <div class=\"ztm-flow-arrow\">\u2193<\/div>\r\n          <div class=\"ztm-flow-node\">META ADS<\/div>\r\n          <div class=\"ztm-flow-arrow\">\u2193<\/div>\r\n          <div class=\"ztm-flow-node\">PARENTS \/ STUDENTS<\/div>\r\n          <div class=\"ztm-flow-arrow\">\u2193<\/div>\r\n          <div class=\"ztm-flow-node\">ENQUIRIES<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- HOW IT WORKS -->\r\n      <div class=\"ztm-m-block\">\r\n        <div class=\"ztm-m-block-head\">\r\n          <span class=\"eyebrow\">HOW IT WORKS<\/span>\r\n          <h2>Seven simple stages. <em>One clear result.<\/em><\/h2>\r\n          <p>Click any stage to see what happens at that step.<\/p>\r\n        <\/div>\r\n        <div class=\"ztm-stages\" id=\"ztmStages\">\r\n          <div class=\"ztm-stage ztm-active\" data-desc=\"We study your school, your strengths, your location and the parents you want to reach.\">\r\n            <div class=\"ztm-stage-num\">STAGE 01<\/div>\r\n            <div class=\"ztm-stage-title\">Understand Your School<\/div>\r\n            <div class=\"ztm-stage-desc\">We study your school, your strengths, your location and the parents you want to reach.<\/div>\r\n          <\/div>\r\n          <div class=\"ztm-stage\" data-desc=\"We design video ads, static creatives and motion content that reflect your school's identity.\">\r\n            <div class=\"ztm-stage-num\">STAGE 02<\/div>\r\n            <div class=\"ztm-stage-title\">Create Your Creative<\/div>\r\n            <div class=\"ztm-stage-desc\">We design video ads, static creatives and motion content that reflect your school's identity.<\/div>\r\n          <\/div>\r\n          <div class=\"ztm-stage\" data-desc=\"We plan the radius around your school \u2014 3 km, 5 km, 10 km or 15 km \u2014 based on where your families live.\">\r\n            <div class=\"ztm-stage-num\">STAGE 03<\/div>\r\n            <div class=\"ztm-stage-title\">Select Location<\/div>\r\n            <div class=\"ztm-stage-desc\">We plan the radius around your school \u2014 3 km, 5 km, 10 km or 15 km \u2014 based on where your families live.<\/div>\r\n          <\/div>\r\n          <div class=\"ztm-stage\" data-desc=\"Parents of school-age children, specific interests, income groups and local behaviours.\">\r\n            <div class=\"ztm-stage-num\">STAGE 04<\/div>\r\n            <div class=\"ztm-stage-title\">Select Audience<\/div>\r\n            <div class=\"ztm-stage-desc\">Parents of school-age children, specific interests, income groups and local behaviours.<\/div>\r\n          <\/div>\r\n          <div class=\"ztm-stage\" data-desc=\"You decide your daily Meta ad spend. We recommend what works best for your goals.\">\r\n            <div class=\"ztm-stage-num\">STAGE 05<\/div>\r\n            <div class=\"ztm-stage-title\">Set Budget<\/div>\r\n            <div class=\"ztm-stage-desc\">You decide your daily Meta ad spend. We recommend what works best for your goals.<\/div>\r\n          <\/div>\r\n          <div class=\"ztm-stage\" data-desc=\"We launch the campaign on Facebook, Instagram and WhatsApp \u2014 fully managed by ZTM.\">\r\n            <div class=\"ztm-stage-num\">STAGE 06<\/div>\r\n            <div class=\"ztm-stage-title\">Launch Campaign<\/div>\r\n            <div class=\"ztm-stage-desc\">We launch the campaign on Facebook, Instagram and WhatsApp \u2014 fully managed by ZTM.<\/div>\r\n          <\/div>\r\n          <div class=\"ztm-stage\" data-desc=\"We track enquiries, optimise creatives and improve results every week.\">\r\n            <div class=\"ztm-stage-num\">STAGE 07<\/div>\r\n            <div class=\"ztm-stage-title\">Monitor &amp; Optimize<\/div>\r\n            <div class=\"ztm-stage-desc\">We track enquiries, optimise creatives and improve results every week.<\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- GROWTH VISUAL -->\r\n      <div class=\"ztm-m-block\">\r\n        <div class=\"ztm-m-block-head\">\r\n          <span class=\"eyebrow\">THE GROWTH PATH<\/span>\r\n          <h2>From <em>awareness<\/em> to admission conversation.<\/h2>\r\n        <\/div>\r\n        <div class=\"ztm-growth-visual\">\r\n          <div class=\"ztm-growth-node\"><div class=\"label\">STEP 1<\/div><div class=\"value\">School<\/div><\/div>\r\n          <div class=\"ztm-growth-arrow\">\u2192<\/div>\r\n          <div class=\"ztm-growth-node\"><div class=\"label\">STEP 2<\/div><div class=\"value\">Awareness<\/div><\/div>\r\n          <div class=\"ztm-growth-arrow\">\u2192<\/div>\r\n          <div class=\"ztm-growth-node\"><div class=\"label\">STEP 3<\/div><div class=\"value\">Interest<\/div><\/div>\r\n          <div class=\"ztm-growth-arrow\">\u2192<\/div>\r\n          <div class=\"ztm-growth-node\"><div class=\"label\">STEP 4<\/div><div class=\"value\">Website \/ WhatsApp<\/div><\/div>\r\n          <div class=\"ztm-growth-arrow\">\u2192<\/div>\r\n          <div class=\"ztm-growth-node\"><div class=\"label\">STEP 5<\/div><div class=\"value\">Enquiry<\/div><\/div>\r\n          <div class=\"ztm-growth-arrow\">\u2192<\/div>\r\n          <div class=\"ztm-growth-node\"><div class=\"label\">STEP 6<\/div><div class=\"value\">Admission<\/div><\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- LOCAL AREA TARGETING -->\r\n      <div class=\"ztm-m-block\">\r\n        <div class=\"ztm-m-block-head\">\r\n          <span class=\"eyebrow\">LOCAL AREA TARGETING<\/span>\r\n          <h2>Campaigns planned <em>around your school.<\/em><\/h2>\r\n          <p>We target parents and families in the radius that matters \u2014 not random cities.<\/p>\r\n        <\/div>\r\n        <div class=\"ztm-map-wrap\">\r\n          <div class=\"ztm-map-visual\">\r\n            <div class=\"ztm-map-ring r4\"><\/div>\r\n            <div class=\"ztm-map-ring r3\"><\/div>\r\n            <div class=\"ztm-map-ring r2\"><\/div>\r\n            <div class=\"ztm-map-ring r1\"><\/div>\r\n            <div class=\"ztm-map-center\">YOUR<br>SCHOOL<\/div>\r\n            <div class=\"ztm-map-dot\" style=\"top:22%; left:50%;\"><\/div>\r\n            <div class=\"ztm-map-dot\" style=\"top:50%; left:18%;\"><\/div>\r\n            <div class=\"ztm-map-dot\" style=\"top:50%; left:82%;\"><\/div>\r\n            <div class=\"ztm-map-dot\" style=\"top:78%; left:50%;\"><\/div>\r\n            <div class=\"ztm-map-dot\" style=\"top:30%; left:28%;\"><\/div>\r\n            <div class=\"ztm-map-dot\" style=\"top:30%; left:72%;\"><\/div>\r\n            <div class=\"ztm-map-dot\" style=\"top:70%; left:28%;\"><\/div>\r\n            <div class=\"ztm-map-dot\" style=\"top:70%; left:72%;\"><\/div>\r\n            <div class=\"ztm-map-label\" style=\"top:30%; left:52%;\">3 KM<\/div>\r\n            <div class=\"ztm-map-label\" style=\"top:20%; left:52%;\">5 KM<\/div>\r\n            <div class=\"ztm-map-label\" style=\"top:10%; left:52%;\">10 KM<\/div>\r\n            <div class=\"ztm-map-label\" style=\"top:2%; left:52%;\">15 KM<\/div>\r\n          <\/div>\r\n          <div class=\"ztm-map-info\">\r\n            <h3>Reach the families around you.<\/h3>\r\n            <p>Campaign targeting can be planned around the school's relevant local area. We combine location, audience, objective and budget into a focused Meta campaign.<\/p>\r\n            <div class=\"ztm-map-formula\">\r\n              <span class=\"chip\">Location<\/span>\r\n              <span class=\"plus\">+<\/span>\r\n              <span class=\"chip\">Audience<\/span>\r\n              <span class=\"plus\">+<\/span>\r\n              <span class=\"chip\">Objective<\/span>\r\n              <span class=\"plus\">+<\/span>\r\n              <span class=\"chip\">Budget<\/span>\r\n              <span class=\"result\">\u2192 Meta Campaign<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- CREATIVE OPTIONS -->\r\n      <div class=\"ztm-m-block\">\r\n        <div class=\"ztm-m-block-head\">\r\n          <span class=\"eyebrow\">CREATIVE OPTIONS<\/span>\r\n          <h2>Four formats. <em>One powerful campaign.<\/em><\/h2>\r\n          <p>Pick the creative style that matches your admissions goal.<\/p>\r\n        <\/div>\r\n        <div class=\"ztm-creative-grid\">\r\n          <div class=\"ztm-creative-card\">\r\n            <div class=\"ztm-creative-visual video\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M8 5v14l11-7L8 5z\" fill=\"currentColor\"\/><\/svg>\r\n            <\/div>\r\n            <h4>Video Ads<\/h4>\r\n            <p>Storytelling, school environment, facilities, programs and admissions campaigns.<\/p>\r\n          <\/div>\r\n          <div class=\"ztm-creative-card\">\r\n            <div class=\"ztm-creative-visual static\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\" fill=\"currentColor\"\/><path d=\"M21 15l-5-5L5 21\" stroke=\"currentColor\" stroke-width=\"2\"\/><\/svg>\r\n            <\/div>\r\n            <h4>Static Posts<\/h4>\r\n            <p>Admissions announcements, events, dates, offers and important information.<\/p>\r\n          <\/div>\r\n          <div class=\"ztm-creative-card\">\r\n            <div class=\"ztm-creative-visual motion\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\r\n            <\/div>\r\n            <h4>Motion Creatives<\/h4>\r\n            <p>Attention-grabbing social content with animation and kinetic typography.<\/p>\r\n          <\/div>\r\n          <div class=\"ztm-creative-card\">\r\n            <div class=\"ztm-creative-visual ai\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"8\" r=\"4\" stroke=\"currentColor\" stroke-width=\"2\"\/><path d=\"M4 21c0-4 4-6 8-6s8 2 8 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\r\n            <\/div>\r\n            <h4>AI \/ UGC Style Ads<\/h4>\r\n            <p>Suitable promotional concepts using AI avatars and creator-style content.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- VIDEO VS POST -->\r\n      <div class=\"ztm-m-block\">\r\n        <div class=\"ztm-m-block-head\">\r\n          <span class=\"eyebrow\">VIDEO VS POST<\/span>\r\n          <h2>Two formats. <em>Different jobs.<\/em><\/h2>\r\n        <\/div>\r\n        <div class=\"ztm-compare\">\r\n          <div class=\"ztm-compare-col video\">\r\n            <h4>VIDEO<\/h4>\r\n            <ul>\r\n              <li>Attention<\/li>\r\n              <li>Story<\/li>\r\n              <li>Facilities<\/li>\r\n              <li>Programs<\/li>\r\n              <li>Admissions<\/li>\r\n            <\/ul>\r\n          <\/div>\r\n          <div class=\"ztm-compare-vs\">VS<\/div>\r\n          <div class=\"ztm-compare-col post\">\r\n            <h4>POST<\/h4>\r\n            <ul>\r\n              <li>Announcement<\/li>\r\n              <li>Offer<\/li>\r\n              <li>Date<\/li>\r\n              <li>Event<\/li>\r\n              <li>Admission Message<\/li>\r\n            <\/ul>\r\n          <\/div>\r\n        <\/div>\r\n        <p class=\"ztm-compare-note\">You can use one format or combine multiple creatives depending on the campaign.<\/p>\r\n      <\/div>\r\n\r\n      <!-- META ADS VISUAL -->\r\n      <div class=\"ztm-m-block\">\r\n        <div class=\"ztm-m-block-head\">\r\n          <span class=\"eyebrow\">META ADS FLOW<\/span>\r\n          <h2>From platform to <em>enquiry.<\/em><\/h2>\r\n        <\/div>\r\n        <div class=\"ztm-meta-flow\">\r\n          <div class=\"ztm-meta-node platforms\">\r\n            <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path fill=\"#1877F2\" d=\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z\"\/><\/svg>\r\n            Facebook\r\n          <\/div>\r\n          <div class=\"ztm-meta-node platforms\">\r\n            <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><rect x=\"1\" y=\"1\" width=\"22\" height=\"22\" rx=\"6\" fill=\"url(#ztmIgGrad)\"\/><rect x=\"6.5\" y=\"6.5\" width=\"11\" height=\"11\" rx=\"3.5\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.6\"\/><circle cx=\"12\" cy=\"12\" r=\"3\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.6\"\/><\/svg>\r\n            Instagram\r\n          <\/div>\r\n          <div class=\"ztm-meta-node platforms\">\r\n            <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"#25D366\"\/><path fill=\"#fff\" d=\"M12 5.5a6.5 6.5 0 00-5.6 9.8L5.5 18.5l3.3-.9A6.5 6.5 0 1012 5.5z\"\/><\/svg>\r\n            WhatsApp\r\n          <\/div>\r\n          <div class=\"ztm-meta-arrow\">\u2193<\/div>\r\n          <div class=\"ztm-meta-node\">Target Audience<\/div>\r\n          <div class=\"ztm-meta-arrow\">\u2193<\/div>\r\n          <div class=\"ztm-meta-node creative\">Creative<\/div>\r\n          <div class=\"ztm-meta-arrow\">\u2193<\/div>\r\n          <div class=\"ztm-meta-node\">Campaign<\/div>\r\n          <div class=\"ztm-meta-arrow\">\u2193<\/div>\r\n          <div class=\"ztm-meta-node result\">Enquiries<\/div>\r\n        <\/div>\r\n        <div class=\"ztm-meta-note\">\r\n          <strong>Important:<\/strong> ZTM Service Fee \u2260 Meta Advertising Spend. Your ad budget goes directly to Meta.\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- BUDGET VISUALIZER -->\r\n      <div class=\"ztm-m-block\">\r\n        <div class=\"ztm-m-block-head\">\r\n          <span class=\"eyebrow\">BUDGET VISUALIZER<\/span>\r\n          <h2>Slide to see your <em>estimated investment.<\/em><\/h2>\r\n          <p>Move the slider to plan your daily Meta ad spend.<\/p>\r\n        <\/div>\r\n        <div class=\"ztm-budget-wrap\">\r\n          <input type=\"range\" min=\"300\" max=\"5000\" step=\"100\" value=\"1000\" class=\"ztm-budget-slider\" id=\"ztmBudgetSlider\">\r\n          <div class=\"ztm-budget-range\">\r\n            <span>Rs. 300 \/ day<\/span>\r\n            <span>Rs. 5,000+ \/ day<\/span>\r\n          <\/div>\r\n          <div class=\"ztm-budget-display\">\r\n            <div class=\"ztm-budget-stat\">\r\n              <div class=\"label\">DAILY BUDGET<\/div>\r\n              <div class=\"value\">Rs. <span id=\"ztmDailyBudget\">1,000<\/span><\/div>\r\n            <\/div>\r\n            <div class=\"ztm-budget-stat\">\r\n              <div class=\"label\">EST. 30-DAY AD SPEND<\/div>\r\n              <div class=\"value\">Rs. <span id=\"ztmMonthlyAd\">30,000<\/span><\/div>\r\n            <\/div>\r\n            <div class=\"ztm-budget-stat\">\r\n              <div class=\"label\">ZTM MANAGEMENT FEE<\/div>\r\n              <div class=\"value\">Rs. <span id=\"ztmMgmtFee\">15,000<\/span><\/div>\r\n            <\/div>\r\n            <div class=\"ztm-budget-stat highlight\">\r\n              <div class=\"label\">EST. CAMPAIGN INVESTMENT<\/div>\r\n              <div class=\"value\">Rs. <span id=\"ztmTotalInvest\">45,000<\/span> <small>\/ 30 days<\/small><\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- SERVICE OPTIONS -->\r\n      <div class=\"ztm-m-block\">\r\n        <div class=\"ztm-m-block-head\">\r\n          <span class=\"eyebrow\">SERVICE OPTIONS<\/span>\r\n          <h2>Pick what your school <em>needs right now.<\/em><\/h2>\r\n        <\/div>\r\n        <div class=\"ztm-service-options\" id=\"ztmServiceOpts\">\r\n          <div class=\"ztm-service-opt\" data-service=\"Website Development\">\r\n            <div class=\"check\">\u2713<\/div>\r\n            <div class=\"opt-icon\">\r\n              <svg viewBox=\"0 0 24 24\" width=\"26\" height=\"26\" fill=\"none\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><path d=\"M3 9h18\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><path d=\"M9 21V9\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><\/svg>\r\n            <\/div>\r\n            <h4>Website Development<\/h4>\r\n            <p>Professional school website development.<\/p>\r\n          <\/div>\r\n          <div class=\"ztm-service-opt\" data-service=\"Creative Production\">\r\n            <div class=\"check\">\u2713<\/div>\r\n            <div class=\"opt-icon\">\r\n              <svg viewBox=\"0 0 24 24\" width=\"26\" height=\"26\" fill=\"none\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"3\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><path d=\"M10 9L15 12L10 15V9Z\" fill=\"currentColor\"\/><\/svg>\r\n            <\/div>\r\n            <h4>Creative Production<\/h4>\r\n            <p>Video ads, static posts, motion creatives.<\/p>\r\n          <\/div>\r\n          <div class=\"ztm-service-opt\" data-service=\"Meta Ads Management\">\r\n            <div class=\"check\">\u2713<\/div>\r\n            <div class=\"opt-icon\">\r\n              <svg viewBox=\"0 0 24 24\" width=\"26\" height=\"26\" fill=\"none\"><path d=\"M4 18V10M9 18V6M14 18V13M19 18V8\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/><circle cx=\"19\" cy=\"6\" r=\"1.6\" fill=\"currentColor\"\/><\/svg>\r\n            <\/div>\r\n            <h4>Meta Ads Management<\/h4>\r\n            <p>ZTM manages the agreed Meta campaign.<\/p>\r\n          <\/div>\r\n          <div class=\"ztm-service-opt ztm-selected\" data-service=\"Complete Growth\">\r\n            <div class=\"check\">\u2713<\/div>\r\n            <div class=\"opt-icon\">\r\n              <svg viewBox=\"0 0 24 24\" width=\"26\" height=\"26\" fill=\"none\"><path d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n            <\/div>\r\n            <h4>Complete Growth<\/h4>\r\n            <p>Website + Creative + Ads Management.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- SPECIAL OFFER -->\r\n      <div class=\"ztm-m-block\">\r\n        <div class=\"ztm-offer\">\r\n          <span class=\"badge\">SCHOOL &amp; ACADEMY SPECIAL OFFER<\/span>\r\n          <h2><em>20% OFF<\/em> ZTM Service Fees<\/h2>\r\n          <p>Use the official coupon code below at checkout.<\/p>\r\n          <div class=\"code-hint\">CODE: <strong>ZTMMUF<\/strong><\/div>\r\n          <p style=\"font-size:12px; opacity:0.7; margin-bottom:20px;\">First 10 School \/ Academy clients only. Discount applies to ZTM service fees only \u2014 not Meta ad spend.<\/p>\r\n          <button class=\"ztm-offer-btn\" id=\"ztmClaimOffer\">GO TO ORDER BUILDER \u2192<\/button>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- ORDER BUILDER -->\r\n      <div class=\"ztm-m-block\">\r\n        <div class=\"ztm-m-block-head\">\r\n          <span class=\"eyebrow\">ORDER BUILDER<\/span>\r\n          <h2>Build your <em>school campaign.<\/em><\/h2>\r\n          <p>Fill in the details \u2014 your summary updates live.<\/p>\r\n        <\/div>\r\n        <div class=\"ztm-builder\">\r\n          <div class=\"ztm-builder-steps\">\r\n            <div class=\"ztm-builder-step\">\r\n              <label>1. SCHOOL NAME<\/label>\r\n              <input type=\"text\" id=\"ztmSchoolName\" placeholder=\"e.g. City Grammar School\">\r\n            <\/div>\r\n            <div class=\"ztm-builder-step\">\r\n              <label>YOUR WHATSAPP NUMBER *<\/label>\r\n              <input type=\"tel\" id=\"ztmClientWhatsapp\" placeholder=\"03XX XXXXXXX\" pattern=\"[0-9+\\-\\s()]{10,20}\" title=\"Enter a valid WhatsApp number, e.g. 03XX XXXXXXX\" inputmode=\"tel\" required>\r\n            <\/div>\r\n            <div class=\"ztm-builder-step\">\r\n              <label>2. SERVICE<\/label>\r\n              <select id=\"ztmService\">\r\n                <option value=\"Website Development\">Website Development<\/option>\r\n                <option value=\"Creative Only\">Creative Only<\/option>\r\n                <option value=\"Ads Management\">Ads Management<\/option>\r\n                <option value=\"Website + Creative\">Website + Creative<\/option>\r\n                <option value=\"Website + Ads Management\">Website + Ads Management<\/option>\r\n                <option value=\"Creative + Ads Management\">Creative + Ads Management<\/option>\r\n                <option value=\"Website + Creative + Ads Management\" selected>Complete Growth (Website + Creative + Ads)<\/option>\r\n              <\/select>\r\n            <\/div>\r\n            <div class=\"ztm-builder-step\" id=\"ztmWebPlanStep\">\r\n              <label>3. WEBSITE PLAN<\/label>\r\n              <select id=\"ztmWebPlan\">\r\n                <option value=\"starter\">Starter Website \u2014 Rs. 35,000<\/option>\r\n                <option value=\"professional\" selected>Professional Website \u2014 Rs. 55,000<\/option>\r\n                <option value=\"advanced\">Advanced Website \u2014 Rs. 115,000<\/option>\r\n              <\/select>\r\n            <\/div>\r\n            <div class=\"ztm-builder-step\">\r\n              <label>4. CREATIVE TYPE<\/label>\r\n              <select id=\"ztmCreative\">\r\n                <option>Video<\/option>\r\n                <option>Static Post<\/option>\r\n                <option>Motion Creative<\/option>\r\n                <option>Multiple Creatives<\/option>\r\n                <option>Not Sure<\/option>\r\n              <\/select>\r\n            <\/div>\r\n            <div class=\"ztm-builder-step\">\r\n              <label>5. CAMPAIGN GOAL<\/label>\r\n              <select id=\"ztmGoal\">\r\n                <option>Awareness<\/option>\r\n                <option>Traffic<\/option>\r\n                <option>Engagement<\/option>\r\n                <option>Leads<\/option>\r\n                <option>Not Sure<\/option>\r\n              <\/select>\r\n            <\/div>\r\n            <div class=\"ztm-builder-step\">\r\n              <label>6. TARGET AREA<\/label>\r\n              <input type=\"text\" id=\"ztmArea\" placeholder=\"e.g. Gulshan, Karachi \u2014 5 km\">\r\n            <\/div>\r\n            <div class=\"ztm-builder-step\">\r\n              <label>7. DAILY META BUDGET (Rs.)<\/label>\r\n              <input type=\"number\" id=\"ztmDailyInput\" value=\"1000\" min=\"300\" step=\"100\">\r\n            <\/div>\r\n            <div class=\"ztm-builder-step\">\r\n              <label>8. CAMPAIGN DURATION<\/label>\r\n              <select id=\"ztmDuration\">\r\n                <option value=\"15\">15 Days<\/option>\r\n                <option value=\"30\" selected>30 Days<\/option>\r\n                <option value=\"60\">60 Days<\/option>\r\n                <option value=\"90\">90 Days<\/option>\r\n              <\/select>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- WEBSITE WHY SECTION -->\r\n          <div class=\"ztm-web-why\" id=\"ztmWebWhy\" style=\"display: none; margin-top: 24px;\">\r\n            <h4 style=\"font-size: 14px; font-weight: 800; color: #111111; margin-bottom: 16px;\">WHY DOES YOUR SCHOOL NEED A WEBSITE?<\/h4>\r\n            <div class=\"ztm-web-why-grid\" style=\"display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;\">\r\n              <div style=\"padding: 16px; background: #ffffff; border: 1px solid #e7e7e7; border-radius: 12px;\">\r\n                <div style=\"font-size: 11px; color: #05BFF9; font-weight: 800; letter-spacing: 1px; margin-bottom: 6px;\">01 \u2014 BUILD TRUST<\/div>\r\n                <div style=\"font-size: 12px; color: #333333; line-height: 1.5;\">Parents see a professional online presence, building immediate credibility.<\/div>\r\n              <\/div>\r\n              <div style=\"padding: 16px; background: #ffffff; border: 1px solid #e7e7e7; border-radius: 12px;\">\r\n                <div style=\"font-size: 11px; color: #05BFF9; font-weight: 800; letter-spacing: 1px; margin-bottom: 6px;\">02 \u2014 SHOW YOUR SCHOOL<\/div>\r\n                <div style=\"font-size: 12px; color: #333333; line-height: 1.5;\">Programs, facilities, faculty, and achievements all in one place.<\/div>\r\n              <\/div>\r\n              <div style=\"padding: 16px; background: #ffffff; border: 1px solid #e7e7e7; border-radius: 12px;\">\r\n                <div style=\"font-size: 11px; color: #05BFF9; font-weight: 800; letter-spacing: 1px; margin-bottom: 6px;\">03 \u2014 GENERATE ENQUIRIES<\/div>\r\n                <div style=\"font-size: 12px; color: #333333; line-height: 1.5;\">Parents can easily contact via WhatsApp, form, or phone for admissions.<\/div>\r\n              <\/div>\r\n              <div style=\"padding: 16px; background: #ffffff; border: 1px solid #e7e7e7; border-radius: 12px;\">\r\n                <div style=\"font-size: 11px; color: #05BFF9; font-weight: 800; letter-spacing: 1px; margin-bottom: 6px;\">04 \u2014 SUPPORT YOUR ADS<\/div>\r\n                <div style=\"font-size: 12px; color: #333333; line-height: 1.5;\">Meta ads drive traffic to your website where parents get full information.<\/div>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- WEBSITE PLANS -->\r\n          <div class=\"ztm-web-plans\" id=\"ztmWebPlans\" style=\"display: none;\">\r\n            <div class=\"ztm-web-plan\" data-plan=\"starter\" data-price=\"35000\">\r\n              <div class=\"ztm-web-plan-header\">\r\n                <h4>STARTER WEBSITE<\/h4>\r\n                <div class=\"ztm-web-price\">PKR 35,000<\/div>\r\n                <p>For schools starting their online presence<\/p>\r\n              <\/div>\r\n              <ul class=\"ztm-web-features\">\r\n                <li>4\u20135 Pages (Home, About, Programs, Admissions, Contact)<\/li>\r\n                <li>WhatsApp Button &amp; Google Maps<\/li>\r\n                <li>Mobile Responsive Design<\/li>\r\n                <li>Basic SEO &amp; Contact Form<\/li>\r\n                <li>Domain &amp; Hosting Setup Guidance<\/li>\r\n              <\/ul>\r\n              <button class=\"ztm-web-select-btn\">SELECT STARTER<\/button>\r\n            <\/div>\r\n            <div class=\"ztm-web-plan ztm-web-selected\" data-plan=\"professional\" data-price=\"55000\">\r\n              <div class=\"ztm-web-plan-badge\">POPULAR<\/div>\r\n              <div class=\"ztm-web-plan-header\">\r\n                <h4>PROFESSIONAL WEBSITE<\/h4>\r\n                <div class=\"ztm-web-price\">PKR 55,000<\/div>\r\n                <p>For schools that want a stronger digital presence<\/p>\r\n              <\/div>\r\n              <ul class=\"ztm-web-features\">\r\n                <li>6\u20138 Pages with Custom Professional Design<\/li>\r\n                <li>Gallery, Faculty, Testimonials<\/li>\r\n                <li>WhatsApp Integration &amp; Admission Form<\/li>\r\n                <li>Better SEO &amp; Speed Optimization<\/li>\r\n                <li>Professional UI\/UX &amp; Mobile Optimization<\/li>\r\n              <\/ul>\r\n              <button class=\"ztm-web-select-btn\">SELECT PROFESSIONAL<\/button>\r\n            <\/div>\r\n            <div class=\"ztm-web-plan\" data-plan=\"advanced\" data-price=\"115000\">\r\n              <div class=\"ztm-web-plan-header\">\r\n                <h4>ADVANCED SCHOOL WEBSITE<\/h4>\r\n                <div class=\"ztm-web-price\">PKR 115,000<\/div>\r\n                <p>For schools ready for a complete digital platform<\/p>\r\n              <\/div>\r\n              <ul class=\"ztm-web-features\">\r\n                <li>10+ Custom Pages \/ Sections<\/li>\r\n                <li>Advanced Admission System &amp; Multiple Campuses<\/li>\r\n                <li>Faculty Profiles, Gallery, Blog\/News, Events<\/li>\r\n                <li>Advanced SEO, Performance &amp; Analytics<\/li>\r\n                <li>Future Expansion-ready Architecture<\/li>\r\n              <\/ul>\r\n              <button class=\"ztm-web-select-btn\">SELECT ADVANCED<\/button>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- WEBSITE DETAILS -->\r\n          <div class=\"ztm-web-details\" id=\"ztmWebDetails\" style=\"display: none; margin-top: 24px;\">\r\n            <h4 style=\"font-size: 14px; font-weight: 800; color: #111111; margin-bottom: 16px;\">WEBSITE DETAILS<\/h4>\r\n            <div class=\"ztm-builder-steps\">\r\n              <div class=\"ztm-builder-step\">\r\n                <label>Existing Website?<\/label>\r\n                <select id=\"ztmWebExisting\">\r\n                  <option>No<\/option>\r\n                  <option>Yes<\/option>\r\n                <\/select>\r\n              <\/div>\r\n              <div class=\"ztm-builder-step\">\r\n                <label>Number of Campuses<\/label>\r\n                <input type=\"number\" id=\"ztmWebCampuses\" value=\"1\" min=\"1\">\r\n              <\/div>\r\n              <div class=\"ztm-builder-step\">\r\n                <label>Preferred Domain Name<\/label>\r\n                <input type=\"text\" id=\"ztmWebDomain\" placeholder=\"e.g. www.schoolname.edu.pk\">\r\n              <\/div>\r\n              <div class=\"ztm-builder-step\">\r\n                <label>Do you have a Logo?<\/label>\r\n                <select id=\"ztmWebLogo\">\r\n                  <option>Yes<\/option>\r\n                  <option>No<\/option>\r\n                <\/select>\r\n              <\/div>\r\n              <div class=\"ztm-builder-step\">\r\n                <label>Do you have School Photos?<\/label>\r\n                <select id=\"ztmWebPhotos\">\r\n                  <option>Yes<\/option>\r\n                  <option>No<\/option>\r\n                <\/select>\r\n              <\/div>\r\n              <div class=\"ztm-builder-step\">\r\n                <label>Do you have Website Content?<\/label>\r\n                <select id=\"ztmWebContent\">\r\n                  <option>Yes<\/option>\r\n                  <option>No<\/option>\r\n                <\/select>\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"ztm-builder-step\" style=\"margin-top: 14px;\">\r\n              <label>Required Features (Check all that apply)<\/label>\r\n              <div style=\"display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;\">\r\n                <label style=\"display: flex; align-items: center; gap: 6px; font-size: 12px; color: #333; font-weight: 600; cursor: pointer; background: #fafafa; padding: 6px 10px; border-radius: 8px; border: 1px solid #e7e7e7;\">\r\n                  <input type=\"checkbox\" class=\"ztm-web-feature-cb\" value=\"Admissions\"> Admissions\r\n                <\/label>\r\n                <label style=\"display: flex; align-items: center; gap: 6px; font-size: 12px; color: #333; font-weight: 600; cursor: pointer; background: #fafafa; padding: 6px 10px; border-radius: 8px; border: 1px solid #e7e7e7;\">\r\n                  <input type=\"checkbox\" class=\"ztm-web-feature-cb\" value=\"Programs\"> Programs\r\n                <\/label>\r\n                <label style=\"display: flex; align-items: center; gap: 6px; font-size: 12px; color: #333; font-weight: 600; cursor: pointer; background: #fafafa; padding: 6px 10px; border-radius: 8px; border: 1px solid #e7e7e7;\">\r\n                  <input type=\"checkbox\" class=\"ztm-web-feature-cb\" value=\"Faculty\"> Faculty\r\n                <\/label>\r\n                <label style=\"display: flex; align-items: center; gap: 6px; font-size: 12px; color: #333; font-weight: 600; cursor: pointer; background: #fafafa; padding: 6px 10px; border-radius: 8px; border: 1px solid #e7e7e7;\">\r\n                  <input type=\"checkbox\" class=\"ztm-web-feature-cb\" value=\"Gallery\"> Gallery\r\n                <\/label>\r\n                <label style=\"display: flex; align-items: center; gap: 6px; font-size: 12px; color: #333; font-weight: 600; cursor: pointer; background: #fafafa; padding: 6px 10px; border-radius: 8px; border: 1px solid #e7e7e7;\">\r\n                  <input type=\"checkbox\" class=\"ztm-web-feature-cb\" value=\"Testimonials\"> Testimonials\r\n                <\/label>\r\n                <label style=\"display: flex; align-items: center; gap: 6px; font-size: 12px; color: #333; font-weight: 600; cursor: pointer; background: #fafafa; padding: 6px 10px; border-radius: 8px; border: 1px solid #e7e7e7;\">\r\n                  <input type=\"checkbox\" class=\"ztm-web-feature-cb\" value=\"Events\"> Events\r\n                <\/label>\r\n                <label style=\"display: flex; align-items: center; gap: 6px; font-size: 12px; color: #333; font-weight: 600; cursor: pointer; background: #fafafa; padding: 6px 10px; border-radius: 8px; border: 1px solid #e7e7e7;\">\r\n                  <input type=\"checkbox\" class=\"ztm-web-feature-cb\" value=\"Blog\/News\"> Blog\/News\r\n                <\/label>\r\n                <label style=\"display: flex; align-items: center; gap: 6px; font-size: 12px; color: #333; font-weight: 600; cursor: pointer; background: #fafafa; padding: 6px 10px; border-radius: 8px; border: 1px solid #e7e7e7;\">\r\n                  <input type=\"checkbox\" class=\"ztm-web-feature-cb\" value=\"WhatsApp\"> WhatsApp\r\n                <\/label>\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"ztm-builder-step\" style=\"margin-top: 14px;\">\r\n              <label>Special Requirements<\/label>\r\n              <textarea id=\"ztmWebSpecial\" rows=\"3\" placeholder=\"Any specific requirements or notes...\"><\/textarea>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- SUMMARY -->\r\n          <div class=\"ztm-summary\">\r\n            <h4>YOUR SCHOOL ORDER<\/h4>\r\n            <div class=\"ztm-summary-row\"><span class=\"k\">School Name<\/span><span class=\"v\" id=\"sumSchool\">\u2014<\/span><\/div>\r\n            <div class=\"ztm-summary-row\"><span class=\"k\">Services<\/span><span class=\"v\" id=\"sumService\">Complete Growth<\/span><\/div>\r\n            <div class=\"ztm-summary-row\" id=\"sumWebPlanRow\"><span class=\"k\">Website Plan<\/span><span class=\"v\" id=\"sumWebPlan\">Professional Website<\/span><\/div>\r\n            <div class=\"ztm-summary-row\" id=\"sumWebFeeRow\"><span class=\"k\">Website Fee<\/span><span class=\"v\">Rs. <span id=\"sumWebFee\">55,000<\/span><\/span><\/div>\r\n            <div class=\"ztm-summary-row\" id=\"sumCreativeFeeRow\"><span class=\"k\">Creative Fee<\/span><span class=\"v\">Rs. <span id=\"sumCreativeFee\">20,000<\/span><\/span><\/div>\r\n            <div class=\"ztm-summary-row\" id=\"sumMgmtFeeRow\"><span class=\"k\">Ads Management<\/span><span class=\"v\">Rs. <span id=\"sumMgmtFee\">15,000<\/span><\/span><\/div>\r\n            <div class=\"ztm-summary-row\"><span class=\"k\">Meta Ad Spend<\/span><span class=\"v\">Rs. <span id=\"sumAdSpend\">30,000<\/span><\/span><\/div>\r\n            <div class=\"ztm-summary-row discount\"><span class=\"k\">Discount (on ZTM Fees)<\/span><span class=\"v\">- Rs. <span id=\"sumDiscount\">0<\/span><\/span><\/div>\r\n            <div class=\"ztm-summary-row fee-note\"><span class=\"k\">Discount applies to ZTM service fees only \u2014 not Meta ad spend.<\/span><span class=\"v\"><\/span><\/div>\r\n            <div class=\"ztm-summary-row total\"><span class=\"k\">Estimated Total<\/span><span class=\"v\">Rs. <span id=\"sumTotal\">102,000<\/span><\/span><\/div>\r\n          <\/div>\r\n\r\n          <div class=\"ztm-referral\">\r\n            <input type=\"text\" id=\"ztmReferral\" placeholder=\"Enter coupon code (e.g. ZTMMUF)\">\r\n            <button id=\"ztmApplyRef\">APPLY<\/button>\r\n          <\/div>\r\n          <div class=\"ztm-referral-msg\" id=\"ztmRefMsg\"><\/div>\r\n\r\n          <button class=\"ztm-whatsapp-btn\" id=\"ztmWhatsApp\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 5.5a6.5 6.5 0 00-5.6 9.8L5.5 18.5l3.3-.9A6.5 6.5 0 1012 5.5zm3.9 9.2c-.2.5-1 .9-1.4.9-.4.1-.8.1-1.3-.1-.3-.1-.7-.2-1.2-.5-2.1-.9-3.5-3-3.6-3.1-.1-.1-.9-1.2-.9-2.3 0-1.1.6-1.6.8-1.9.2-.2.5-.3.6-.3h.5c.1 0 .3 0 .5.4.2.4.6 1.4.7 1.5.1.1.1.3 0 .4-.1.1-.1.2-.3.4-.1.2-.3.3-.4.5-.1.1-.3.3-.1.6.2.3.8 1.2 1.6 2 1.1 1 2 1.3 2.3 1.4.3.1.5.1.6-.1.2-.2.6-.7.8-1 .2-.2.4-.2.6-.1.2.1 1.4.7 1.6.8.2.1.4.2.4.3.1.2.1.5-.1 1z\"\/><\/svg>\r\n            START MY SCHOOL CAMPAIGN \u2192\r\n          <\/button>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/* ============================================================\r\n   ZTM CONFIGURATION\r\n============================================================ *\/\r\nconst ZTM_CONFIG = {\r\n  whatsappNumber: '923274893933',\r\n  managementFee: 15000,\r\n  creativeFee: 20000,\r\n  referralCodes: {\r\n    'ZTMMUF': 20\r\n  }\r\n};\r\n\r\n\/* ============================================================\r\n   MODAL OPEN \/ CLOSE\r\n============================================================ *\/\r\nconst modal = document.getElementById('ztmSchoolModal');\r\nconst openBtn = document.getElementById('ztmOpenSchool');\r\nconst closeBtn = document.getElementById('ztmCloseSchool');\r\n\r\nfunction openModal() {\r\n  modal.classList.add('ztm-active');\r\n  document.body.style.overflow = 'hidden';\r\n  const flow = document.getElementById('ztmFlow');\r\n  flow.querySelectorAll('.ztm-flow-node, .ztm-flow-arrow').forEach(el => {\r\n    el.style.animation = 'none';\r\n    el.offsetHeight;\r\n    el.style.animation = '';\r\n  });\r\n}\r\nfunction closeModal() {\r\n  modal.classList.remove('ztm-active');\r\n  document.body.style.overflow = '';\r\n}\r\nopenBtn.addEventListener('click', openModal);\r\ncloseBtn.addEventListener('click', closeModal);\r\nmodal.addEventListener('click', (e) => {\r\n  if (e.target === modal) closeModal();\r\n});\r\ndocument.addEventListener('keydown', (e) => {\r\n  if (e.key === 'Escape' && modal.classList.contains('ztm-active')) closeModal();\r\n});\r\n\r\n\/* ============================================================\r\n   STAGES\r\n============================================================ *\/\r\ndocument.querySelectorAll('#ztmStages .ztm-stage').forEach(stage => {\r\n  stage.addEventListener('click', () => {\r\n    document.querySelectorAll('#ztmStages .ztm-stage').forEach(s => s.classList.remove('ztm-active'));\r\n    stage.classList.add('ztm-active');\r\n  });\r\n});\r\n\r\n\/* ============================================================\r\n   SERVICE OPTIONS\r\n============================================================ *\/\r\ndocument.querySelectorAll('#ztmServiceOpts .ztm-service-opt').forEach(opt => {\r\n  opt.addEventListener('click', () => {\r\n    document.querySelectorAll('#ztmServiceOpts .ztm-service-opt').forEach(o => o.classList.remove('ztm-selected'));\r\n    opt.classList.add('ztm-selected');\r\n    const service = opt.dataset.service;\r\n    const serviceSelect = document.getElementById('ztmService');\r\n    \r\n    if (service === 'Website Development') serviceSelect.value = 'Website Development';\r\n    else if (service === 'Creative Production') serviceSelect.value = 'Creative Only';\r\n    else if (service === 'Meta Ads Management') serviceSelect.value = 'Ads Management';\r\n    else if (service === 'Complete Growth') serviceSelect.value = 'Website + Creative + Ads Management';\r\n    \r\n    updateSummary();\r\n  });\r\n});\r\n\r\ndocument.getElementById('ztmService').addEventListener('change', function() {\r\n  const val = this.value;\r\n  document.querySelectorAll('#ztmServiceOpts .ztm-service-opt').forEach(o => o.classList.remove('ztm-selected'));\r\n  \r\n  if (val === 'Website Development') document.querySelector('[data-service=\"Website Development\"]').classList.add('ztm-selected');\r\n  else if (val === 'Creative Only') document.querySelector('[data-service=\"Creative Production\"]').classList.add('ztm-selected');\r\n  else if (val === 'Ads Management') document.querySelector('[data-service=\"Meta Ads Management\"]').classList.add('ztm-selected');\r\n  else if (val === 'Website + Creative + Ads Management') document.querySelector('[data-service=\"Complete Growth\"]').classList.add('ztm-selected');\r\n  \r\n  updateSummary();\r\n});\r\n\r\n\/* ============================================================\r\n   WEBSITE PLANS SELECTION\r\n============================================================ *\/\r\ndocument.querySelectorAll('.ztm-web-plan').forEach(plan => {\r\n  plan.addEventListener('click', () => {\r\n    document.querySelectorAll('.ztm-web-plan').forEach(p => p.classList.remove('ztm-web-selected'));\r\n    plan.classList.add('ztm-web-selected');\r\n    document.getElementById('ztmWebPlan').value = plan.dataset.plan;\r\n    updateSummary();\r\n  });\r\n});\r\n\r\ndocument.getElementById('ztmWebPlan').addEventListener('change', function() {\r\n  document.querySelectorAll('.ztm-web-plan').forEach(p => p.classList.remove('ztm-web-selected'));\r\n  const selected = document.querySelector(`.ztm-web-plan[data-plan=\"${this.value}\"]`);\r\n  if (selected) selected.classList.add('ztm-web-selected');\r\n  updateSummary();\r\n});\r\n\r\n\/* ============================================================\r\n   BUDGET SLIDER\r\n============================================================ *\/\r\nconst slider = document.getElementById('ztmBudgetSlider');\r\nconst dailyInput = document.getElementById('ztmDailyInput');\r\nfunction formatRs(n) { return Number(n).toLocaleString('en-PK'); }\r\n\r\nfunction syncBudget(val) {\r\n  document.getElementById('ztmDailyBudget').textContent = formatRs(val);\r\n  const duration = parseInt(document.getElementById('ztmDuration').value, 10);\r\n  const adSpend = val * duration;\r\n  document.getElementById('ztmMonthlyAd').textContent = formatRs(adSpend);\r\n  document.getElementById('ztmMgmtFee').textContent = formatRs(ZTM_CONFIG.managementFee);\r\n  document.getElementById('ztmTotalInvest').textContent = formatRs(adSpend + ZTM_CONFIG.managementFee);\r\n  dailyInput.value = val;\r\n  updateSummary();\r\n}\r\nslider.addEventListener('input', e => syncBudget(parseInt(e.target.value, 10)));\r\ndailyInput.addEventListener('input', e => {\r\n  let v = parseInt(e.target.value, 10) || 300;\r\n  if (v < 300) v = 300;\r\n  if (v > 5000) v = 5000;\r\n  slider.value = v;\r\n  syncBudget(v);\r\n});\r\n\r\n\/* ============================================================\r\n   ORDER BUILDER SUMMARY\r\n============================================================ *\/\r\nlet appliedDiscount = 0;\r\nlet appliedCoupon = '';\r\n\r\nfunction getWebsiteFee() {\r\n  const plan = document.getElementById('ztmWebPlan').value;\r\n  if (plan === 'starter') return 35000;\r\n  if (plan === 'professional') return 55000;\r\n  if (plan === 'advanced') return 115000;\r\n  return 0;\r\n}\r\n\r\nfunction updateSummary() {\r\n  const name = document.getElementById('ztmSchoolName').value.trim() || '\u2014';\r\n  const service = document.getElementById('ztmService').value;\r\n  const creative = document.getElementById('ztmCreative').value;\r\n  const goal = document.getElementById('ztmGoal').value;\r\n  const area = document.getElementById('ztmArea').value.trim() || '\u2014';\r\n  const daily = parseInt(dailyInput.value, 10) || 0;\r\n  const duration = parseInt(document.getElementById('ztmDuration').value, 10);\r\n  const webPlan = document.getElementById('ztmWebPlan').value;\r\n\r\n  const hasWebsite = service.includes('Website');\r\n  document.getElementById('ztmWebWhy').style.display = hasWebsite ? 'block' : 'none';\r\n  document.getElementById('ztmWebPlans').style.display = hasWebsite ? 'grid' : 'none';\r\n  document.getElementById('ztmWebDetails').style.display = hasWebsite ? 'block' : 'none';\r\n  document.getElementById('ztmWebPlanStep').style.display = hasWebsite ? 'block' : 'none';\r\n\r\n  const webPlanText = hasWebsite ? (webPlan === 'starter' ? 'Starter Website' : webPlan === 'professional' ? 'Professional Website' : 'Advanced Website') : '\u2014';\r\n  const webFee = hasWebsite ? getWebsiteFee() : 0;\r\n\r\n  document.getElementById('sumSchool').textContent = name;\r\n  document.getElementById('sumService').textContent = service;\r\n  { const el = document.getElementById('sumCreative'); if (el) el.textContent = creative; }\r\n  { const el = document.getElementById('sumGoal'); if (el) el.textContent = goal; }\r\n  { const el = document.getElementById('sumArea'); if (el) el.textContent = area; }\r\n  { const el = document.getElementById('sumDaily'); if (el) el.textContent = formatRs(daily); }\r\n  { const el = document.getElementById('sumDuration'); if (el) el.textContent = duration; }\r\n  \r\n  document.getElementById('sumWebPlanRow').style.display = hasWebsite ? 'flex' : 'none';\r\n  document.getElementById('sumWebPlan').textContent = webPlanText;\r\n  document.getElementById('sumWebFeeRow').style.display = webFee > 0 ? 'flex' : 'none';\r\n  document.getElementById('sumWebFee').textContent = formatRs(webFee);\r\n\r\n  let creativeFee = service.includes('Creative') ? 20000 : 0;\r\n  let managementFee = (service.includes('Ads Management') || service.includes('Complete')) ? 15000 : 0;\r\n  \r\n  document.getElementById('sumCreativeFeeRow').style.display = creativeFee > 0 ? 'flex' : 'none';\r\n  document.getElementById('sumCreativeFee').textContent = formatRs(creativeFee);\r\n  \r\n  document.getElementById('sumMgmtFeeRow').style.display = managementFee > 0 ? 'flex' : 'none';\r\n  document.getElementById('sumMgmtFee').textContent = formatRs(managementFee);\r\n\r\n  const ztmServiceSubtotal = webFee + creativeFee + managementFee;\r\n  const adSpend = daily * duration;\r\n  const discount = Math.round(ztmServiceSubtotal * appliedDiscount \/ 100);\r\n  const total = (ztmServiceSubtotal - discount) + adSpend;\r\n\r\n  document.getElementById('sumAdSpend').textContent = formatRs(adSpend);\r\n  document.getElementById('sumDiscount').textContent = formatRs(discount);\r\n  document.getElementById('sumTotal').textContent = formatRs(total);\r\n}\r\n\r\n['ztmSchoolName','ztmService','ztmCreative','ztmGoal','ztmArea','ztmDailyInput','ztmDuration','ztmWebPlan']\r\n  .forEach(id => document.getElementById(id).addEventListener('input', updateSummary));\r\n['ztmService','ztmCreative','ztmGoal','ztmDuration','ztmWebPlan']\r\n  .forEach(id => document.getElementById(id).addEventListener('change', updateSummary));\r\n\r\n\/* ============================================================\r\n   REFERRAL \/ COUPON CODES\r\n============================================================ *\/\r\nconst refInput = document.getElementById('ztmReferral');\r\nconst refBtn = document.getElementById('ztmApplyRef');\r\nconst refMsg = document.getElementById('ztmRefMsg');\r\n\r\nrefBtn.addEventListener('click', () => {\r\n  const code = refInput.value.trim().toUpperCase();\r\n  if (!code) {\r\n    refMsg.textContent = 'Please enter a coupon code.';\r\n    refMsg.className = 'ztm-referral-msg err';\r\n    return;\r\n  }\r\n  if (ZTM_CONFIG.referralCodes[code] !== undefined) {\r\n    appliedDiscount = ZTM_CONFIG.referralCodes[code];\r\n    appliedCoupon = code;\r\n    refMsg.textContent = `\u2713 Code applied \u2014 ${appliedDiscount}% discount on ZTM service fees`;\r\n    refMsg.className = 'ztm-referral-msg ok';\r\n    updateSummary();\r\n  } else {\r\n    appliedDiscount = 0;\r\n    appliedCoupon = '';\r\n    refMsg.textContent = '\u2715 Invalid coupon code.';\r\n    refMsg.className = 'ztm-referral-msg err';\r\n    updateSummary();\r\n  }\r\n});\r\n\r\nrefInput.addEventListener('keypress', (e) => {\r\n  if (e.key === 'Enter') {\r\n    e.preventDefault();\r\n    refBtn.click();\r\n  }\r\n});\r\n\r\ndocument.getElementById('ztmClaimOffer').addEventListener('click', () => {\r\n  refInput.value = '';\r\n  refInput.focus();\r\n  refMsg.textContent = 'Enter code ZTMMUF above and click APPLY to get 20% off ZTM service fees.';\r\n  refMsg.className = 'ztm-referral-msg hint';\r\n  document.querySelector('.ztm-builder').scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n});\r\n\r\n\/* ============================================================\r\n   WHATSAPP ORDER\r\n============================================================ *\/\r\nfunction ztmRef(){try{var u=new URLSearchParams(location.search).get('ref');if(u){localStorage.setItem('ztm_ref',u.replace(\/[^A-Za-z0-9]\/g,'').slice(0,12));}return localStorage.getItem('ztm_ref')||'';}catch(e){return '';}}\r\nconst ZTM_SB_URL = 'https:\/\/otbsvumischupdvorusq.supabase.co';\r\nconst ZTM_SB_KEY = 'sb_publishable_yrsEFtts8UVebfRx_Chi_w_spjcYCT-';\r\n\r\ndocument.getElementById('ztmWhatsApp').addEventListener('click', async () => {\r\n  const waInput = document.getElementById('ztmClientWhatsapp');\r\n  const nameInput = document.getElementById('ztmSchoolName');\r\n  if (!nameInput.value.trim()) {\r\n    nameInput.setCustomValidity('Please enter your school name.');\r\n    nameInput.reportValidity();\r\n    nameInput.setCustomValidity('');\r\n    return;\r\n  }\r\n  if (!waInput.checkValidity() || !waInput.value.trim()) {\r\n    waInput.reportValidity();\r\n    return;\r\n  }\r\n  \/\/ open the tab now (inside the click) so mobile browsers do not block it\r\n  const waWindow = window.open('', '_blank');\r\n  const name = document.getElementById('ztmSchoolName').value.trim() || '\u2014';\r\n  const service = document.getElementById('ztmService').value;\r\n  const creative = document.getElementById('ztmCreative').value;\r\n  const goal = document.getElementById('ztmGoal').value;\r\n  const area = document.getElementById('ztmArea').value.trim() || '\u2014';\r\n  const daily = dailyInput.value || '0';\r\n  const duration = document.getElementById('ztmDuration').value;\r\n  const coupon = appliedCoupon || 'None';\r\n  \r\n  const hasWebsite = service.includes('Website');\r\n  const webPlan = hasWebsite ? document.getElementById('ztmWebPlan').value : 'none';\r\n  const webPlanText = webPlan === 'starter' ? 'Starter Website' : webPlan === 'professional' ? 'Professional Website' : 'Advanced Website';\r\n  \r\n  let msg = `*NEW SCHOOL CAMPAIGN ORDER \u2014 ZTM*\\n\\n`;\r\n  msg += `*School Name:* ${name}\\n`;\r\n  msg += `*Services:* ${service}\\n`;\r\n  \r\n  if (hasWebsite) {\r\n    msg += `*Website Plan:* ${webPlanText}\\n`;\r\n    msg += `*Existing Website:* ${document.getElementById('ztmWebExisting').value}\\n`;\r\n    msg += `*Campuses:* ${document.getElementById('ztmWebCampuses').value}\\n`;\r\n    \r\n    const features = Array.from(document.querySelectorAll('.ztm-web-feature-cb:checked')).map(cb => cb.value).join(', ');\r\n    if (features) msg += `*Required Features:* ${features}\\n`;\r\n    \r\n    const special = document.getElementById('ztmWebSpecial').value.trim();\r\n    if (special) msg += `*Special Requirements:* ${special}\\n`;\r\n  }\r\n  \r\n  if (service.includes('Creative')) {\r\n    msg += `*Creative Type:* ${creative}\\n`;\r\n  }\r\n  if (service.includes('Ads Management') || service.includes('Complete')) {\r\n    msg += `*Campaign Goal:* ${goal}\\n`;\r\n    msg += `*Target Area:* ${area}\\n`;\r\n    msg += `*Daily Meta Budget:* Rs. ${daily}\\n`;\r\n    msg += `*Duration:* ${duration} Days\\n`;\r\n  }\r\n  \r\n  msg += `*Coupon Code:* ${coupon}\\n\\n`;\r\n  \r\n  const webFee = hasWebsite ? getWebsiteFee() : 0;\r\n  const creativeFee = service.includes('Creative') ? 20000 : 0;\r\n  const mgmtFee = (service.includes('Ads Management') || service.includes('Complete')) ? 15000 : 0;\r\n  const ztmSubtotal = webFee + creativeFee + mgmtFee;\r\n  const adSpend = (parseInt(daily) || 0) * parseInt(duration);\r\n  const discount = Math.round(ztmSubtotal * appliedDiscount \/ 100);\r\n  const total = (ztmSubtotal - discount) + adSpend;\r\n\r\n  if (webFee > 0) msg += `*Website Fee:* Rs. ${formatRs(webFee)}\\n`;\r\n  if (creativeFee > 0) msg += `*Creative Fee:* Rs. ${formatRs(creativeFee)}\\n`;\r\n  if (mgmtFee > 0) msg += `*Ads Management:* Rs. ${formatRs(mgmtFee)}\\n`;\r\n  if (adSpend > 0) msg += `*Meta Ad Spend:* Rs. ${formatRs(adSpend)}\\n`;\r\n  msg += `*Discount:* Rs. ${formatRs(discount)}\\n`;\r\n  msg += `*Estimated Total:* Rs. ${formatRs(total)}\\n\\n`;\r\n  \/\/ Save to Supabase (server generates the Order ID)\r\n  let orderCode = '';\r\n  try {\r\n    const controller = new AbortController();\r\n    const timer = setTimeout(() => controller.abort(), 8000);\r\n    const res = await fetch(ZTM_SB_URL + '\/rest\/v1\/rpc\/submit_order', {\r\n      method: 'POST',\r\n      headers: { 'apikey': ZTM_SB_KEY, 'Content-Type': 'application\/json' },\r\n      body: JSON.stringify({ p: {\r\n        service: 'school',\r\n        name: name,\r\n        whatsapp: waInput.value,\r\n        business: name,\r\n        total: String(ztmSubtotal - discount),\r\n        coupon: appliedCoupon || null,\r\n        source: location.href,\r\n        ref: ztmRef(),\r\n        website: '',\r\n        details: {\r\n          schoolName: name,\r\n          services: service,\r\n          websitePlan: hasWebsite ? webPlanText : null,\r\n          existingWebsite: hasWebsite ? document.getElementById('ztmWebExisting').value : null,\r\n          campuses: hasWebsite ? document.getElementById('ztmWebCampuses').value : null,\r\n          websiteFeatures: Array.from(document.querySelectorAll('.ztm-web-feature-cb:checked')).map(cb => cb.value),\r\n          specialRequirements: document.getElementById('ztmWebSpecial').value.trim(),\r\n          creativeType: service.includes('Creative') ? creative : null,\r\n          campaignGoal: (service.includes('Ads Management') || service.includes('Complete')) ? goal : null,\r\n          targetArea: area,\r\n          dailyBudget: parseInt(daily) || 0,\r\n          durationDays: parseInt(duration),\r\n          websiteFee: webFee,\r\n          creativeFee: creativeFee,\r\n          managementFee: mgmtFee,\r\n          metaAdSpend: adSpend,\r\n          discount: discount,\r\n          estimatedTotalWithAdSpend: total\r\n        } }\r\n      }),\r\n      signal: controller.signal\r\n    });\r\n    clearTimeout(timer);\r\n    if (res.ok) {\r\n      const out = await res.json();\r\n      if (out && out.order_code) orderCode = out.order_code;\r\n    }\r\n  } catch (err) { \/* WhatsApp still opens if saving fails *\/ }\r\n\r\n  msg += `Please confirm availability and next steps. Thank you.`;\r\n  if (orderCode) msg = `*Order ID:* ${orderCode}\\n` + msg;\r\n  msg = msg.replace('Please confirm', `*WhatsApp:* ${waInput.value}\\n\\nPlease confirm`);\r\n\r\n  const url = `https:\/\/wa.me\/${ZTM_CONFIG.whatsappNumber}?text=${encodeURIComponent(msg)}`;\r\n  if (waWindow) { waWindow.location.href = url; } else { window.open(url, '_blank'); }\r\n});\r\n\r\n\/* initial sync *\/\r\nsyncBudget(parseInt(slider.value, 10));\r\nupdateSummary();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-ca08c47 e-con e-atomic-element e-flexbox-base e-default-div e-0e1d3c7 \" data-id=\"ca08c47\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"ca08c47\" id=\"Creative work by ZTM\">\n    \t\t<div class=\"elementor-element elementor-element-cafcbfa elementor-widget elementor-widget-heading\" data-id=\"cafcbfa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Creative work by ZTM<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\n<hr class=\"e-f0e9574-feec19c e-divider-base\" data-interaction-id=\"f0e9574\" \/>\n\t\t\t\t\t\n<hr class=\"e-39bce87-9e8db83 e-divider-base\" data-interaction-id=\"39bce87\" \/>\n\t\t\t\t<div class=\"elementor-element elementor-element-8d2389a elementor-widget elementor-widget-text-editor\" data-id=\"8d2389a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center;\">\u00a0<\/p><p style=\"text-align: center;\">Real ads we&#8217;ve created<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-f13cb22 e-con e-atomic-element e-flexbox-base e-default-div e-2080e8d \" data-id=\"f13cb22\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"f13cb22\">\n    <div class=\"elementor-element elementor-element-50dae98 e-con e-atomic-element e-flexbox-base e-default-div e-b00af49 \" data-id=\"50dae98\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"50dae98\">\n    \t\t\t\t  \t<video\n    data-id=\"d8f672f\" data-interaction-id=\"d8f672f\"\n    data-e-type=\"e-self-hosted-video\" data-interactions=\"null\"\n    class=\"e-self-hosted-video-base\"\n\t\tclass=\"e-self-hosted-video-base\"\n\t\t\t\t\t\t\t\t\t\tcontrols\t\t\t\tcontrolslist=\"nodownload\"\t\tpreload=\"metadata\"\n\t>\n\t\t<source src=\"https:\/\/zenithtechmatrix.com\/wp-content\/uploads\/2026\/08\/Video-Project-3-2.mp4#t=0\">\n\t<\/video>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-1e9ce3a e-con e-atomic-element e-flexbox-base e-default-div e-2626731 \" data-id=\"1e9ce3a\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"1e9ce3a\">\n    \t\t\t\t  \t<video\n    data-id=\"23fa05a\" data-interaction-id=\"23fa05a\"\n    data-e-type=\"e-self-hosted-video\" data-interactions=\"null\"\n    class=\"e-self-hosted-video-base\"\n\t\tclass=\"e-self-hosted-video-base\"\n\t\t\t\t\t\t\t\t\t\tcontrols\t\t\t\tcontrolslist=\"nodownload\"\t\tpreload=\"metadata\"\n\t>\n\t\t<source src=\"https:\/\/zenithtechmatrix.com\/wp-content\/uploads\/2026\/09\/Make_similar_clothing_ad_202608250447.mp4#t=0\">\n\t<\/video>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-5cf373d e-con e-atomic-element e-flexbox-base e-default-div e-e6c8290 \" data-id=\"5cf373d\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"5cf373d\">\n    \t\t\t\t  \t<video\n    data-id=\"7a231a1\" data-interaction-id=\"7a231a1\"\n    data-e-type=\"e-self-hosted-video\" data-interactions=\"null\"\n    class=\"e-self-hosted-video-base\"\n\t\tclass=\"e-self-hosted-video-base\"\n\t\t\t\t\t\t\t\t\t\tcontrols\t\t\t\tcontrolslist=\"nodownload\"\t\tpreload=\"metadata\"\n\t>\n\t\t<source src=\"https:\/\/zenithtechmatrix.com\/wp-content\/uploads\/2026\/08\/Video-Project-3.mp4#t=0\">\n\t<\/video>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-94044b6 e-con e-atomic-element e-flexbox-base e-default-div e-05c0c6e \" data-id=\"94044b6\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"94044b6\">\n    \t\t\t\t  \t<video\n    data-id=\"b587b69\" data-interaction-id=\"b587b69\"\n    data-e-type=\"e-self-hosted-video\" data-interactions=\"null\"\n    class=\"e-self-hosted-video-base\"\n\t\tclass=\"e-self-hosted-video-base\"\n\t\t\t\t\t\t\t\t\t\tcontrols\t\t\t\tcontrolslist=\"nodownload\"\t\tpreload=\"metadata\"\n\t>\n\t\t<source src=\"https:\/\/zenithtechmatrix.com\/wp-content\/uploads\/2026\/08\/Video-Project-3-1.mp4#t=0\">\n\t<\/video>\n\t\t\t\t\t\t  \t<video\n    data-id=\"ff0b0a3\" data-interaction-id=\"ff0b0a3\"\n    data-e-type=\"e-self-hosted-video\" data-interactions=\"null\"\n    class=\"e-self-hosted-video-base\"\n\t\tclass=\"e-self-hosted-video-base\"\n\t\t\t\t\t\t\t\t\t\tcontrols\t\t\t\tcontrolslist=\"nodownload\"\t\tpreload=\"metadata\"\n\t>\n\t\t<source src=\"https:\/\/zenithtechmatrix.com\/wp-content\/uploads\/2026\/08\/ZTM_sneaker_commercial_advertise\u2026_202608252158.mp4#t=0\">\n\t<\/video>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-b742a10 e-con e-atomic-element e-flexbox-base e-default-div e-e1fdc16 \" data-id=\"b742a10\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"b742a10\">\n    \t\t\t\t  \t<video\n    data-id=\"4bbcbd9\" data-interaction-id=\"4bbcbd9\"\n    data-e-type=\"e-self-hosted-video\" data-interactions=\"null\"\n    class=\"e-self-hosted-video-base\"\n\t\tclass=\"e-self-hosted-video-base\"\n\t\t\t\t\t\t\t\t\t\tcontrols\t\t\t\tcontrolslist=\"nodownload\"\t\tpreload=\"metadata\"\n\t>\n\t\t<source src=\"https:\/\/zenithtechmatrix.com\/wp-content\/uploads\/2026\/08\/all-adds.mp4#t=0\">\n\t<\/video>\n\t\t\n<\/div>\n\n<\/div>\n<div class=\"elementor-element elementor-element-b53ab8c e-con e-atomic-element e-flexbox-base e-default-div e-f48574d \" data-id=\"b53ab8c\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"b53ab8c\">\n    \t\t<div class=\"elementor-element elementor-element-e6af8da elementor-widget elementor-widget-html\" data-id=\"e6af8da\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- =========================================================\r\n ZTM AD AGENCY \u2014 SMART PRICING + ORDER SYSTEM (v2 UPDATED)\r\n \u2726 Static \/ Motion Creative now has Sub-Selection\r\n \u2726 Single Static Post (no duration)\r\n \u2726 Motion Creative (with duration)\r\n \u2726 Improved \"AD CREATIVE\" messaging throughout\r\n ========================================================= -->\r\n\r\n<section class=\"ztm-pricing-system\" id=\"ztm-pricing\">\r\n\r\n  <div class=\"ztm-pricing-wrap\">\r\n\r\n    <!-- HEADER -->\r\n    <div class=\"ztm-pricing-head\">\r\n\r\n      <div class=\"ztm-pricing-eyebrow\">\r\n        \u2726 ZTM AD AGENCY\r\n      <\/div>\r\n\r\n      <h2>\r\n        Choose Your\r\n        <span class=\"ztm-p-blue\">Ad Creative.<\/span>\r\n      <\/h2>\r\n\r\n      <p>\r\n        Select your professional ad creative format and specifications,\r\n        then instantly configure your campaign\u2014no guesswork required.\r\n      <\/p>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- CATEGORY CARDS -->\r\n    <div class=\"ztm-category-grid\" id=\"ztmCategoryGrid\">\r\n\r\n      <button class=\"ztm-category-card active\"\r\n              type=\"button\"\r\n              data-category=\"ai-ugc\">\r\n\r\n        <div class=\"ztm-cat-icon ztm-icon-blue\">\r\n          <svg viewBox=\"0 0 24 24\" width=\"22\" height=\"22\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"3.4\"\/><path d=\"M5.5 20c1-3.5 3.8-5.5 6.5-5.5s5.5 2 6.5 5.5\"\/><path d=\"M18.5 4.5l.8 1.6 1.6.8-1.6.8-.8 1.6-.8-1.6-1.6-.8 1.6-.8z\"\/><\/svg>\r\n        <\/div>\r\n\r\n        <div class=\"ztm-cat-content\">\r\n          <span>AD CREATIVE<\/span>\r\n          <strong>AI UGC \/ Avatar Ad<\/strong>\r\n          <small>AI-powered spokesperson & performance creatives<\/small>\r\n        <\/div>\r\n\r\n        <div class=\"ztm-cat-arrow\">\u2192<\/div>\r\n      <\/button>\r\n\r\n\r\n      <button class=\"ztm-category-card\"\r\n              type=\"button\"\r\n              data-category=\"ai-product\">\r\n\r\n        <div class=\"ztm-cat-icon ztm-icon-green\">\r\n          <svg viewBox=\"0 0 24 24\" width=\"22\" height=\"22\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3z\"\/><path d=\"M4 7.5L12 12l8-4.5\"\/><path d=\"M12 12v9\"\/><\/svg>\r\n        <\/div>\r\n\r\n        <div class=\"ztm-cat-content\">\r\n          <span>AD CREATIVE<\/span>\r\n          <strong>AI Product Ad<\/strong>\r\n          <small>Premium product showcase advertising<\/small>\r\n        <\/div>\r\n\r\n        <div class=\"ztm-cat-arrow\">\u2192<\/div>\r\n      <\/button>\r\n\r\n\r\n      <button class=\"ztm-category-card\"\r\n              type=\"button\"\r\n              data-category=\"cinematic\">\r\n\r\n        <div class=\"ztm-cat-icon ztm-icon-blue\">\r\n          <svg viewBox=\"0 0 24 24\" width=\"22\" height=\"22\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 9.5l1.3-3.8a1 1 0 011-.7h13.4a1 1 0 011 1.3l-1 3.2\"\/><path d=\"M3 9.5h18V19a1 1 0 01-1 1H4a1 1 0 01-1-1V9.5z\"\/><path d=\"M6.5 5l2 4.5M11 5l2 4.5M15.5 5l2 4.5\"\/><\/svg>\r\n        <\/div>\r\n\r\n        <div class=\"ztm-cat-content\">\r\n          <span>AD CREATIVE<\/span>\r\n          <strong>AI Cinematic Commercial<\/strong>\r\n          <small>Story-driven premium advertising<\/small>\r\n        <\/div>\r\n\r\n        <div class=\"ztm-cat-arrow\">\u2192<\/div>\r\n      <\/button>\r\n\r\n\r\n      <button class=\"ztm-category-card\"\r\n              type=\"button\"\r\n              data-category=\"cgi\">\r\n\r\n        <div class=\"ztm-cat-icon ztm-icon-green\">\r\n          <svg viewBox=\"0 0 24 24\" width=\"22\" height=\"22\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4\" y=\"8\" width=\"10\" height=\"10\" rx=\"1\"\/><path d=\"M8 8l6-4h6v10l-6 4\"\/><path d=\"M14 8v10\"\/><\/svg>\r\n        <\/div>\r\n\r\n        <div class=\"ztm-cat-content\">\r\n          <span>AD CREATIVE<\/span>\r\n          <strong>3D \/ CGI Product Ad<\/strong>\r\n          <small>Advanced product animation & visualization<\/small>\r\n        <\/div>\r\n\r\n        <div class=\"ztm-cat-arrow\">\u2192<\/div>\r\n      <\/button>\r\n\r\n\r\n      <button class=\"ztm-category-card\"\r\n              type=\"button\"\r\n              data-category=\"explainer\">\r\n\r\n        <div class=\"ztm-cat-icon ztm-icon-blue\">\r\n          <svg viewBox=\"0 0 24 24\" width=\"22\" height=\"22\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"13\" rx=\"2.5\"\/><path d=\"M10 9.5l5 2.7-5 2.7v-5.4z\" fill=\"currentColor\" stroke=\"none\"\/><\/svg>\r\n        <\/div>\r\n\r\n        <div class=\"ztm-cat-content\">\r\n          <span>AD CREATIVE<\/span>\r\n          <strong>Animated Explainer Ad<\/strong>\r\n          <small>Animated storytelling for products & services<\/small>\r\n        <\/div>\r\n\r\n        <div class=\"ztm-cat-arrow\">\u2192<\/div>\r\n      <\/button>\r\n\r\n\r\n      <button class=\"ztm-category-card\"\r\n              type=\"button\"\r\n              data-category=\"human-ugc\">\r\n\r\n        <div class=\"ztm-cat-icon ztm-icon-green\">\r\n          <svg viewBox=\"0 0 24 24\" width=\"22\" height=\"22\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 8.5a1.5 1.5 0 011.5-1.5h2l1-2h7l1 2h2A1.5 1.5 0 0120 8.5V17a1.5 1.5 0 01-1.5 1.5h-13A1.5 1.5 0 014 17V8.5z\"\/><circle cx=\"12\" cy=\"12.5\" r=\"3.2\"\/><\/svg>\r\n        <\/div>\r\n\r\n        <div class=\"ztm-cat-content\">\r\n          <span>AD CREATIVE<\/span>\r\n          <strong>Human UGC<\/strong>\r\n          <small>Real creator-based social advertising<\/small>\r\n        <\/div>\r\n\r\n        <div class=\"ztm-cat-arrow\">\u2192<\/div>\r\n      <\/button>\r\n\r\n\r\n      <button class=\"ztm-category-card\"\r\n              type=\"button\"\r\n              data-category=\"static\">\r\n\r\n        <div class=\"ztm-cat-icon ztm-icon-blue\">\r\n          <svg viewBox=\"0 0 24 24\" width=\"22\" height=\"22\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"7\" width=\"14\" height=\"11\" rx=\"1.5\"\/><path d=\"M7 3h14v11\"\/><circle cx=\"7.5\" cy=\"11.5\" r=\"1.3\"\/><path d=\"M4 16l3-3 2.5 2.5L13 12l4 4\"\/><\/svg>\r\n        <\/div>\r\n\r\n        <div class=\"ztm-cat-content\">\r\n          <span>AD CREATIVE<\/span>\r\n          <strong>Social Media Creative<\/strong>\r\n          <small>Static posts & motion graphics<\/small>\r\n        <\/div>\r\n\r\n        <div class=\"ztm-cat-arrow\">\u2192<\/div>\r\n      <\/button>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- STATIC \/ MOTION SUBTYPE SELECTOR (Hidden by default) -->\r\n    <div class=\"ztm-subtype-selector\" id=\"ztmSubtypeSelector\" style=\"display:none;\">\r\n      <div class=\"ztm-subtype-title\">Select Your Social Media Creative Format<\/div>\r\n      <div class=\"ztm-subtype-grid\">\r\n        <button type=\"button\" class=\"ztm-subtype-card active\" data-subtype=\"static-post\">\r\n          <div class=\"ztm-subtype-icon\">\r\n            <svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"currentColor\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"\/><circle cx=\"7\" cy=\"9\" r=\"1.5\"\/><path d=\"M2 15l5-5 3 3 9-9v14H2z\" fill=\"#fff\" opacity=\".3\"\/><\/svg>\r\n          <\/div>\r\n          <strong>Single Static Post<\/strong>\r\n          <span>Professional social media advertising graphic<\/span>\r\n          <div class=\"ztm-subtype-price\">Rs. 4,999<\/div>\r\n        <\/button>\r\n\r\n        <button type=\"button\" class=\"ztm-subtype-card\" data-subtype=\"motion\">\r\n          <div class=\"ztm-subtype-icon\">\r\n            <svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"currentColor\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"\/><path d=\"M9 9l6 3-6 3V9z\" fill=\"#fff\"\/><\/svg>\r\n          <\/div>\r\n          <strong>Motion Creative<\/strong>\r\n          <span>Animated social media creative<\/span>\r\n          <div class=\"ztm-subtype-duration\">Choose duration below<\/div>\r\n        <\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n\r\n    <!-- PRICING PANEL -->\r\n    <div class=\"ztm-pricing-panel\">\r\n\r\n      <div class=\"ztm-selected-info\">\r\n\r\n        <div class=\"ztm-selected-visual ztm-visual-blue\" id=\"ztmSelectedVisual\"><\/div>\r\n\r\n        <div class=\"ztm-selected-text\">\r\n          <span class=\"ztm-small-label\">SELECTED AD CREATIVE<\/span>\r\n          <h3 id=\"ztmSelectedName\">AI UGC \/ Avatar Ad<\/h3>\r\n          <p id=\"ztmSelectedDescription\">\r\n            AI-powered spokesperson & performance creative.\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"ztm-starting-price\">\r\n          <span>STARTING FROM<\/span>\r\n          <strong id=\"ztmStartingPrice\">Rs. 2,999<\/strong>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- DURATION (Hidden for static posts) -->\r\n      <div class=\"ztm-duration-area\" id=\"ztmDurationArea\">\r\n\r\n        <div class=\"ztm-section-label\">\r\n          <span>01<\/span>\r\n          Choose Video Duration\r\n        <\/div>\r\n\r\n        <div class=\"ztm-duration-grid\">\r\n\r\n          <button type=\"button\" class=\"ztm-duration active\" data-duration=\"10\">\r\n            <strong>10s<\/strong>\r\n            <span id=\"price-10\">Rs. 2,999<\/span>\r\n          <\/button>\r\n\r\n          <button type=\"button\" class=\"ztm-duration\" data-duration=\"15\">\r\n            <strong>15s<\/strong>\r\n            <span id=\"price-15\">Rs. 3,299<\/span>\r\n          <\/button>\r\n\r\n          <button type=\"button\" class=\"ztm-duration\" data-duration=\"16\">\r\n            <strong>16s<\/strong>\r\n            <span id=\"price-16\">Rs. 3,499<\/span>\r\n            <em>BASE<\/em>\r\n          <\/button>\r\n\r\n          <button type=\"button\" class=\"ztm-duration\" data-duration=\"20\">\r\n            <strong>20s<\/strong>\r\n            <span id=\"price-20\">Rs. 4,299<\/span>\r\n          <\/button>\r\n\r\n          <button type=\"button\" class=\"ztm-duration\" data-duration=\"30\">\r\n            <strong>30s<\/strong>\r\n            <span id=\"price-30\">Rs. 6,299<\/span>\r\n          <\/button>\r\n\r\n          <button type=\"button\" class=\"ztm-duration\" data-duration=\"45\">\r\n            <strong>45s<\/strong>\r\n            <span id=\"price-45\">Rs. 9,299<\/span>\r\n          <\/button>\r\n\r\n          <button type=\"button\" class=\"ztm-duration\" data-duration=\"60\">\r\n            <strong>60s<\/strong>\r\n            <span id=\"price-60\">Rs. 12,299<\/span>\r\n          <\/button>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- MODE: JUST CREATE \/ CREATE + RUN -->\r\n      <div class=\"ztm-mode-area\">\r\n\r\n        <div class=\"ztm-section-label\" id=\"ztmModeLabel\">\r\n          <span>02<\/span>\r\n          What Would You Like To Do?\r\n        <\/div>\r\n\r\n        <div class=\"ztm-mode-grid\" id=\"ztmModeGrid\">\r\n\r\n          <button type=\"button\" class=\"ztm-mode-card active\" data-mode=\"create\">\r\n            <div class=\"ztm-mode-radio\"><\/div>\r\n            <div class=\"ztm-mode-content\">\r\n              <strong>Just Create My Ad<\/strong>\r\n              <span>We'll produce the creative and deliver it to you.<\/span>\r\n            <\/div>\r\n          <\/button>\r\n\r\n          <button type=\"button\" class=\"ztm-mode-card\" data-mode=\"create-run\">\r\n            <div class=\"ztm-mode-badge\">RECOMMENDED<\/div>\r\n            <div class=\"ztm-mode-radio\"><\/div>\r\n            <div class=\"ztm-mode-content\">\r\n              <strong>Create + Run My Ads<\/strong>\r\n              <span>We'll create the creative and manage your Meta advertising campaign.<\/span>\r\n            <\/div>\r\n          <\/button>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- ADS SETUP (revealed only for Create + Run) -->\r\n      <div class=\"ztm-ads-setup\" id=\"ztmAdsSetup\">\r\n        <div class=\"ztm-ads-inner\">\r\n\r\n          <div class=\"ztm-ads-block\">\r\n            <div class=\"ztm-subsection-label\">Where Would You Like To Advertise?<\/div>\r\n            <div class=\"ztm-pill-row\" id=\"ztmPlatformRow\">\r\n              <button type=\"button\" class=\"ztm-pill ztm-platform-pill active\" data-platform=\"facebook\"><span class=\"dot\"><\/span>Facebook<\/button>\r\n              <button type=\"button\" class=\"ztm-pill ztm-platform-pill active\" data-platform=\"instagram\"><span class=\"dot\"><\/span>Instagram<\/button>\r\n              <button type=\"button\" class=\"ztm-pill ztm-platform-pill active\" data-platform=\"whatsapp\"><span class=\"dot\"><\/span>WhatsApp<\/button>\r\n            <\/div>\r\n            <p class=\"ztm-ads-hint\">All three run through Meta's ad network from a single campaign.<\/p>\r\n          <\/div>\r\n\r\n          <div class=\"ztm-ads-block\">\r\n            <div class=\"ztm-subsection-label\">Campaign Goal<\/div>\r\n            <div class=\"ztm-pill-row\" id=\"ztmGoalRow\">\r\n              <button type=\"button\" class=\"ztm-pill ztm-goal-pill\" data-goal=\"Sales\">Sales<\/button>\r\n              <button type=\"button\" class=\"ztm-pill ztm-goal-pill\" data-goal=\"Awareness\">Awareness<\/button>\r\n              <button type=\"button\" class=\"ztm-pill ztm-goal-pill\" data-goal=\"Traffic\">Traffic<\/button>\r\n              <button type=\"button\" class=\"ztm-pill ztm-goal-pill\" data-goal=\"Engagement\">Engagement<\/button>\r\n              <button type=\"button\" class=\"ztm-pill ztm-goal-pill active\" data-goal=\"Leads\">Leads<\/button>\r\n              <button type=\"button\" class=\"ztm-pill ztm-goal-pill\" data-goal=\"App Promotion\">App Promotion<\/button>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"ztm-ads-block\">\r\n            <div class=\"ztm-subsection-label\">Daily Ad Budget<\/div>\r\n            <div class=\"ztm-budget-box\">\r\n              <div class=\"ztm-budget-top\">\r\n                <span class=\"ztm-small-label\">YOUR DAILY BUDGET<\/span>\r\n                <strong id=\"ztmBudgetDaily\">Rs. 1,000 \/ day<\/strong>\r\n              <\/div>\r\n              <input type=\"range\" class=\"ztm-slider\" id=\"ztmBudgetSlider\" min=\"300\" max=\"10000\" step=\"100\" value=\"1000\">\r\n              <div class=\"ztm-budget-30\" id=\"ztmBudget30day\">Estimated 30-day ad spend: Rs. 30,000<\/div>\r\n              <p class=\"ztm-budget-note\">*Ad spend is your advertising budget, billed directly by Meta, and is separate from ZTM's service fee.<\/p>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"ztm-ads-block\" style=\"margin-bottom:0;\">\r\n            <div class=\"ztm-subsection-label\">ZTM Ads Management Plan<\/div>\r\n            <div class=\"ztm-plan-grid\" id=\"ztmPlanGrid\">\r\n\r\n              <button type=\"button\" class=\"ztm-plan-card\" data-plan=\"starter\">\r\n                <strong>Starter<\/strong>\r\n                <span class=\"ztm-plan-price\">Rs. 15,000<small>\/mo<\/small><\/span>\r\n                <small>Best for testing Meta ads for the first time.<\/small>\r\n              <\/button>\r\n\r\n              <button type=\"button\" class=\"ztm-plan-card active\" data-plan=\"growth\">\r\n                <div class=\"ztm-plan-badge\">POPULAR<\/div>\r\n                <strong>Growth<\/strong>\r\n                <span class=\"ztm-plan-price\">Rs. 25,000<small>\/mo<\/small><\/span>\r\n                <small>Multi-platform campaigns with ongoing optimization.<\/small>\r\n              <\/button>\r\n\r\n              <button type=\"button\" class=\"ztm-plan-card\" data-plan=\"scale\">\r\n                <strong>Scale<\/strong>\r\n                <span class=\"ztm-plan-price\">Rs. 40,000<small>\/mo<\/small><\/span>\r\n                <small>Full management with dedicated strategy & reporting.<\/small>\r\n              <\/button>\r\n\r\n            <\/div>\r\n          <\/div>\r\n\r\n        <\/div>\r\n      <\/div>\r\n\r\n\r\n      <!-- LIVE ESTIMATE -->\r\n      <div class=\"ztm-estimate-box\">\r\n\r\n        <div class=\"ztm-estimate-rows\" id=\"ztmEstimateRows\"><\/div>\r\n\r\n        <div class=\"ztm-estimate-total\">\r\n          <span>ESTIMATED TOTAL<\/span>\r\n          <strong id=\"ztmEstimateTotal\">Rs. 2,999<\/strong>\r\n        <\/div>\r\n\r\n        <p class=\"ztm-estimate-split\" id=\"ztmEstimateSplit\"><\/p>\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- CTA -->\r\n      <button type=\"button\" class=\"ztm-order-btn\" id=\"ztmOpenOrder\">\r\n        <span id=\"ztmOrderBtnText\">Start Your Order<\/span>\r\n        <span>\u2192<\/span>\r\n      <\/button>\r\n\r\n      <p class=\"ztm-pricing-note\">\r\n        *Final quotation may vary depending on creative complexity,\r\n        scenes, revisions and special production requirements.\r\n      <\/p>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- INTERNATIONAL NOTE -->\r\n    <div class=\"ztm-market-note\">\r\n\r\n      <div class=\"ztm-market-icon\">\u2726<\/div>\r\n\r\n      <div>\r\n        <strong>International Market Benchmark<\/strong>\r\n        <p>\r\n          Professional advertising production pricing varies by\r\n          production complexity, creator fees and agency scope.\r\n        <\/p>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n\r\n  <!-- =====================================================\r\n       ORDER MODAL\r\n       ===================================================== -->\r\n\r\n  <div class=\"ztm-order-overlay\" id=\"ztmOrderOverlay\">\r\n\r\n    <div class=\"ztm-order-modal\">\r\n\r\n      <!-- MODAL HEADER -->\r\n      <div class=\"ztm-order-header\">\r\n\r\n        <div>\r\n          <span class=\"ztm-small-label\">ZTM AD AGENCY<\/span>\r\n          <h3>Tell Us About Your Project<\/h3>\r\n          <p>Just a few details to get your order started.<\/p>\r\n        <\/div>\r\n\r\n        <button type=\"button\"\r\n                class=\"ztm-close-order\"\r\n                id=\"ztmCloseOrder\">\r\n          \u00d7\r\n        <\/button>\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- PROGRESS -->\r\n      <div class=\"ztm-progress\">\r\n\r\n        <div class=\"ztm-progress-line\">\r\n          <span id=\"ztmProgressBar\"><\/span>\r\n        <\/div>\r\n\r\n        <div class=\"ztm-progress-text\">\r\n          <span id=\"ztmStepText\">Step 1 of 2<\/span>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- FORM -->\r\n      <form id=\"ztmOrderForm\">\r\n\r\n        <!-- STEP 1 -->\r\n        <div class=\"ztm-form-step active\" data-step=\"1\">\r\n\r\n          <div class=\"ztm-form-step-title\">\r\n            <span>01<\/span>\r\n            Your Project\r\n          <\/div>\r\n\r\n          <div class=\"ztm-contact-grid\">\r\n            <div class=\"ztm-form-group\">\r\n              <label>Client Name <b>*<\/b><\/label>\r\n              <input type=\"text\" name=\"clientName\" id=\"ztmClientName\" placeholder=\"Your name\" required>\r\n            <\/div>\r\n\r\n            <div class=\"ztm-form-group\">\r\n              <label>Brand Name <b>*<\/b><\/label>\r\n              <input type=\"text\" name=\"brandName\" id=\"ztmBrandName\" placeholder=\"Your brand name\" required>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"ztm-form-group\">\r\n            <label>WhatsApp Number <b>*<\/b><\/label>\r\n            <input type=\"tel\" name=\"whatsappNumber\" id=\"ztmWhatsappNumber\" placeholder=\"03XX XXXXXXX\" pattern=\"[0-9+\\-\\s()]{10,20}\" title=\"Enter a valid WhatsApp number, e.g. 03XX XXXXXXX\" inputmode=\"tel\" required>\r\n          <\/div>\r\n\r\n          <div class=\"ztm-form-group\">\r\n            <label>Company Name <span style=\"color:#9299AA;font-weight:700;\">(Optional)<\/span><\/label>\r\n            <input type=\"text\" name=\"companyName\" id=\"ztmCompanyName\" placeholder=\"Company \/ business name\">\r\n          <\/div>\r\n\r\n          <div class=\"ztm-form-group\">\r\n            <label>Website \/ Social Page <span style=\"color:#9299AA;font-weight:700;\">(Optional)<\/span><\/label>\r\n            <input type=\"text\" name=\"website\" id=\"ztmWebsite\" placeholder=\"https:\/\/... or @yourbrand\">\r\n          <\/div>\r\n\r\n          <div class=\"ztm-form-group\">\r\n            <label>What are you promoting? <b>*<\/b><\/label>\r\n            <input type=\"text\" name=\"productName\" id=\"ztmProductName\" placeholder=\"e.g. Smart Ceiling Fan\" required>\r\n          <\/div>\r\n\r\n          <div class=\"ztm-form-group\">\r\n            <label>Product \/ Service Description <b>*<\/b><\/label>\r\n            <textarea name=\"productDescription\" id=\"ztmProductDescription\" rows=\"3\" placeholder=\"Tell us the product, main features, offer or key information...\" required><\/textarea>\r\n          <\/div>\r\n\r\n          <div class=\"ztm-form-group\">\r\n            <label>What should the ad achieve? <b>*<\/b><\/label>\r\n            <select name=\"adObjective\" id=\"ztmAdObjective\" required>\r\n              <option value=\"Sales\">Increase Sales<\/option>\r\n              <option value=\"Leads\">Generate Leads<\/option>\r\n              <option value=\"Brand Awareness\">Brand Awareness<\/option>\r\n              <option value=\"Product Launch\">Product Launch<\/option>\r\n              <option value=\"Engagement\">Engagement<\/option>\r\n              <option value=\"Traffic\">Website \/ Traffic<\/option>\r\n              <option value=\"Social Media Content\">Social Media Content<\/option>\r\n            <\/select>\r\n          <\/div>\r\n\r\n          <div class=\"ztm-form-navigation\">\r\n            <button type=\"button\" class=\"ztm-next-btn\" data-next=\"2\">\r\n              Continue <span>\u2192<\/span>\r\n            <\/button>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n        <!-- STEP 2 -->\r\n        <div class=\"ztm-form-step\" data-step=\"2\">\r\n\r\n          <div class=\"ztm-form-step-title\">\r\n            <span>02<\/span>\r\n            Ad Requirements\r\n          <\/div>\r\n\r\n          <div class=\"ztm-selected-order-card\" id=\"ztmOrderSummary\"><\/div>\r\n\r\n          <div class=\"ztm-form-group\">\r\n            <label>Specific Requirements <span style=\"color:#9299AA;font-weight:700;\">(Optional)<\/span><\/label>\r\n            <textarea name=\"requirements\" id=\"ztmRequirements\" rows=\"3\" placeholder=\"Any specific hook, offer, scene, text, style, voiceover or reference...\"><\/textarea>\r\n          <\/div>\r\n\r\n          <div class=\"ztm-form-group\">\r\n            <label>Email <span style=\"color:#9299AA;font-weight:700;\">(Optional)<\/span><\/label>\r\n            <input type=\"email\" name=\"email\" id=\"ztmEmail\" placeholder=\"you@example.com\">\r\n          <\/div>\r\n\r\n          <div class=\"ztm-upload-box\">\r\n            <div class=\"ztm-upload-heading\">\r\n              <div>\r\n                <strong>Product Images <b style=\"color:#05BFF9;\">*<\/b><\/strong>\r\n                <small>Please provide 4\u20135 clear product images. At least 1 image is required.<\/small>\r\n              <\/div>\r\n              <span>4\u20135 Images<\/span>\r\n            <\/div>\r\n\r\n            <label class=\"ztm-upload-label\">\r\n              <input type=\"file\" id=\"ztmProductImages\" name=\"productImages\" accept=\"image\/jpeg,image\/png,image\/webp\" multiple>\r\n              <div class=\"ztm-upload-inner\">\r\n                <div class=\"ztm-upload-icon\">+<\/div>\r\n                <strong>Add Product Images<\/strong>\r\n                <span>JPG, PNG or WEBP \u00b7 Up to 5 images<\/span>\r\n              <\/div>\r\n            <\/label>\r\n\r\n            <div class=\"ztm-image-preview\" id=\"ztmImagePreview\"><\/div>\r\n\r\n            <div style=\"margin-top:9px;color:#7E8596;font-size:8px;line-height:1.5;text-align:center;\">\r\n              After you submit, WhatsApp will open with your complete order. Send the selected product images there as well.\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"ztm-form-navigation\">\r\n            <button type=\"button\" class=\"ztm-back-btn\" data-back=\"1\">\u2190 Back<\/button>\r\n            <button type=\"submit\" class=\"ztm-submit-btn\" id=\"ztmSubmitBtn\">\r\n              Send Order on WhatsApp <span>\u2197<\/span>\r\n            <\/button>\r\n          <\/div>\r\n\r\n          <div class=\"ztm-form-status\" id=\"ztmFormStatus\"><\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/form>\r\n\r\n\r\n      <!-- SUCCESS -->\r\n      <div class=\"ztm-success-screen\" id=\"ztmSuccess\">\r\n\r\n        <div class=\"ztm-success-icon\">\r\n          \u2713\r\n        <\/div>\r\n\r\n        <h3>Order Received!<\/h3>\r\n\r\n        <p>\r\n          Your order is ready. Tap the button below to open our WhatsApp chat with your complete order summary.\r\n        <\/p>\r\n\r\n        <div class=\"ztm-success-order\">\r\n          <span>ORDER ID<\/span>\r\n          <strong id=\"ztmSuccessOrderId\">ZTM-000000<\/strong>\r\n        <\/div>\r\n\r\n        <a\r\n          href=\"https:\/\/wa.me\/923274893933\"\r\n          target=\"_blank\"\r\n          class=\"ztm-whatsapp-btn\">\r\n\r\n          Open WhatsApp & Send Order\r\n          <span>\u2192<\/span>\r\n\r\n        <\/a>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   ZTM PRICING SYSTEM\r\n   ========================================================= *\/\r\n\r\n.ztm-pricing-system{\r\n  width:100%;\r\n  background:#ffffff;\r\n  padding:90px 20px;\r\n  font-family:Arial,Helvetica,sans-serif;\r\n  color:#10142B;\r\n  position:relative;\r\n  overflow:hidden;\r\n}\r\n\r\n.ztm-pricing-system *,\r\n.ztm-pricing-system *::before,\r\n.ztm-pricing-system *::after{\r\n  box-sizing:border-box;\r\n}\r\n\r\n.ztm-pricing-wrap{\r\n  max-width:1180px;\r\n  margin:0 auto;\r\n}\r\n\r\n\r\n\/* HEADER *\/\r\n\r\n.ztm-pricing-head{\r\n  text-align:center;\r\n  max-width:720px;\r\n  margin:0 auto 48px;\r\n}\r\n\r\n.ztm-pricing-eyebrow{\r\n  display:inline-flex;\r\n  padding:7px 14px;\r\n  border:1px solid rgba(5,191,249,.28);\r\n  background:rgba(5,191,249,.035);\r\n  border-radius:30px;\r\n  color:#009DD8;\r\n  font-size:10px;\r\n  font-weight:800;\r\n  letter-spacing:1.4px;\r\n  margin-bottom:18px;\r\n}\r\n\r\n.ztm-pricing-head h2{\r\n  margin:0;\r\n  font-size:clamp(38px,5vw,58px);\r\n  line-height:1.05;\r\n  letter-spacing:-2px;\r\n  font-weight:900;\r\n}\r\n\r\n.ztm-p-blue{\r\n  color:#05BFF9;\r\n}\r\n\r\n.ztm-pricing-head p{\r\n  max-width:650px;\r\n  margin:18px auto 0;\r\n  color:#697083;\r\n  font-size:15px;\r\n  line-height:1.7;\r\n}\r\n\r\n\r\n\/* CATEGORY GRID *\/\r\n\r\n.ztm-category-grid{\r\n  display:grid;\r\n  grid-template-columns:repeat(2,1fr);\r\n  gap:14px;\r\n  margin-bottom:28px;\r\n}\r\n\r\n.ztm-category-card{\r\n  width:100%;\r\n  min-height:90px;\r\n  border:1px solid #E1E6EF;\r\n  border-radius:15px;\r\n  background:#fff;\r\n  padding:15px;\r\n  display:flex;\r\n  align-items:center;\r\n  gap:13px;\r\n  text-align:left;\r\n  cursor:pointer;\r\n  transition:\r\n    transform .25s ease,\r\n    border-color .25s ease,\r\n    box-shadow .25s ease,\r\n    background .25s ease;\r\n}\r\n\r\n.ztm-category-card:hover{\r\n  transform:translateY(-2px);\r\n  border-color:#BFDDEA;\r\n  box-shadow:0 12px 28px rgba(20,35,70,.07);\r\n}\r\n\r\n.ztm-category-card.active{\r\n  border-color:#05BFF9;\r\n  background:linear-gradient(\r\n    135deg,\r\n    rgba(5,191,249,.045),\r\n    rgba(142,240,18,.035)\r\n  );\r\n  box-shadow:0 12px 32px rgba(5,191,249,.08);\r\n}\r\n\r\n.ztm-cat-icon{\r\n  width:43px;\r\n  height:43px;\r\n  flex:0 0 43px;\r\n  border-radius:12px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  font-size:17px;\r\n  font-weight:900;\r\n}\r\n\r\n.ztm-cat-icon svg{\r\n  display:block;\r\n}\r\n\r\n.ztm-icon-blue{\r\n  background:rgba(5,191,249,.10);\r\n  color:#05BFF9;\r\n}\r\n\r\n.ztm-icon-green{\r\n  background:rgba(142,240,18,.12);\r\n  color:#64B900;\r\n}\r\n\r\n.ztm-cat-content{\r\n  flex:1;\r\n  min-width:0;\r\n}\r\n\r\n.ztm-cat-content span{\r\n  display:block;\r\n  color:#9299AA;\r\n  font-size:7px;\r\n  font-weight:900;\r\n  letter-spacing:1.2px;\r\n  margin-bottom:4px;\r\n}\r\n\r\n.ztm-cat-content strong{\r\n  display:block;\r\n  color:#171D34;\r\n  font-size:14px;\r\n  font-weight:900;\r\n}\r\n\r\n.ztm-cat-content small{\r\n  display:block;\r\n  color:#7B8294;\r\n  font-size:10px;\r\n  line-height:1.4;\r\n  margin-top:4px;\r\n}\r\n\r\n.ztm-cat-arrow{\r\n  color:#05BFF9;\r\n  font-size:17px;\r\n  font-weight:900;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SUBTYPE SELECTOR FOR STATIC\/MOTION\r\n   ========================================================= *\/\r\n\r\n.ztm-subtype-selector{\r\n  padding:20px 0 28px;\r\n  margin-bottom:8px;\r\n  border-bottom:1px solid #EDF0F5;\r\n  animation:slideDown .3s ease;\r\n}\r\n\r\n@keyframes slideDown{\r\n  from{\r\n    opacity:0;\r\n    transform:translateY(-12px);\r\n  }\r\n  to{\r\n    opacity:1;\r\n    transform:translateY(0);\r\n  }\r\n}\r\n\r\n.ztm-subtype-title{\r\n  color:#20263A;\r\n  font-size:11px;\r\n  font-weight:900;\r\n  letter-spacing:.5px;\r\n  text-transform:uppercase;\r\n  margin-bottom:13px;\r\n  padding:0 0 8px;\r\n}\r\n\r\n.ztm-subtype-grid{\r\n  display:grid;\r\n  grid-template-columns:1fr 1fr;\r\n  gap:12px;\r\n}\r\n\r\n.ztm-subtype-card{\r\n  position:relative;\r\n  border:1px solid #E1E6EF;\r\n  border-radius:14px;\r\n  padding:16px;\r\n  background:#fff;\r\n  text-align:center;\r\n  cursor:pointer;\r\n  transition:.22s ease;\r\n  display:flex;\r\n  flex-direction:column;\r\n  align-items:center;\r\n}\r\n\r\n.ztm-subtype-card:hover{\r\n  border-color:#BFDDEA;\r\n  box-shadow:0 8px 20px rgba(5,191,249,.08);\r\n}\r\n\r\n.ztm-subtype-card.active{\r\n  border-color:#05BFF9;\r\n  background:linear-gradient(135deg,rgba(5,191,249,.045),rgba(142,240,18,.035));\r\n  box-shadow:0 12px 28px rgba(5,191,249,.08);\r\n}\r\n\r\n.ztm-subtype-icon{\r\n  width:38px;\r\n  height:38px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  border-radius:10px;\r\n  background:rgba(5,191,249,.10);\r\n  margin-bottom:10px;\r\n  color:#05BFF9;\r\n}\r\n\r\n.ztm-subtype-card strong{\r\n  display:block;\r\n  color:#171D34;\r\n  font-size:12px;\r\n  font-weight:900;\r\n  margin-bottom:5px;\r\n}\r\n\r\n.ztm-subtype-card span{\r\n  display:block;\r\n  color:#7B8294;\r\n  font-size:9px;\r\n  line-height:1.4;\r\n  margin-bottom:10px;\r\n}\r\n\r\n.ztm-subtype-price{\r\n  color:#05BFF9;\r\n  font-size:13px;\r\n  font-weight:900;\r\n}\r\n\r\n.ztm-subtype-duration{\r\n  color:#9299AA;\r\n  font-size:8px;\r\n  font-weight:800;\r\n  text-transform:uppercase;\r\n  letter-spacing:.5px;\r\n}\r\n\r\n\r\n\/* PRICING PANEL *\/\r\n\r\n.ztm-pricing-panel{\r\n  border:1px solid #E0E5ED;\r\n  border-radius:22px;\r\n  padding:26px;\r\n  background:#fff;\r\n  box-shadow:0 24px 60px rgba(18,31,68,.09);\r\n}\r\n\r\n.ztm-selected-info{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:16px;\r\n  padding-bottom:24px;\r\n  border-bottom:1px solid #EDF0F5;\r\n}\r\n\r\n.ztm-selected-visual{\r\n  width:52px;\r\n  height:52px;\r\n  flex:0 0 52px;\r\n  border-radius:14px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n}\r\n\r\n.ztm-visual-blue{\r\n  background:rgba(5,191,249,.10);\r\n  color:#05BFF9;\r\n}\r\n\r\n.ztm-visual-green{\r\n  background:rgba(142,240,18,.12);\r\n  color:#64B900;\r\n}\r\n\r\n.ztm-selected-text{\r\n  flex:1;\r\n  min-width:0;\r\n}\r\n\r\n.ztm-small-label{\r\n  display:block;\r\n  color:#9299AA;\r\n  font-size:8px;\r\n  font-weight:900;\r\n  letter-spacing:1.2px;\r\n}\r\n\r\n.ztm-selected-info h3{\r\n  margin:6px 0 5px;\r\n  font-size:23px;\r\n  font-weight:900;\r\n  color:#151B32;\r\n}\r\n\r\n.ztm-selected-info p{\r\n  margin:0;\r\n  color:#747C8E;\r\n  font-size:11px;\r\n}\r\n\r\n.ztm-starting-price{\r\n  text-align:right;\r\n  margin-left:auto;\r\n}\r\n\r\n.ztm-starting-price span{\r\n  display:block;\r\n  color:#9299AA;\r\n  font-size:7px;\r\n  font-weight:900;\r\n  letter-spacing:1px;\r\n  margin-bottom:5px;\r\n}\r\n\r\n.ztm-starting-price strong{\r\n  color:#05BFF9;\r\n  font-size:22px;\r\n  font-weight:900;\r\n}\r\n\r\n\r\n\/* SECTION LABEL (shared) *\/\r\n\r\n.ztm-duration-area{\r\n  padding:25px 0 4px;\r\n}\r\n\r\n.ztm-section-label{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:9px;\r\n  margin-bottom:13px;\r\n  color:#222940;\r\n  font-size:11px;\r\n  font-weight:900;\r\n}\r\n\r\n.ztm-section-label span{\r\n  width:24px;\r\n  height:24px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  border-radius:7px;\r\n  background:#F0FBFF;\r\n  color:#05BFF9;\r\n  font-size:8px;\r\n}\r\n\r\n.ztm-duration-grid{\r\n  display:grid;\r\n  grid-template-columns:repeat(7,1fr);\r\n  gap:8px;\r\n}\r\n\r\n.ztm-duration{\r\n  position:relative;\r\n  min-height:73px;\r\n  border:1px solid #E1E6EF;\r\n  background:#fff;\r\n  border-radius:11px;\r\n  cursor:pointer;\r\n  padding:12px 5px;\r\n  transition:.22s ease;\r\n}\r\n\r\n.ztm-duration strong{\r\n  display:block;\r\n  color:#20263B;\r\n  font-size:14px;\r\n  font-weight:900;\r\n}\r\n\r\n.ztm-duration span{\r\n  display:block;\r\n  color:#737B8D;\r\n  font-size:9px;\r\n  margin-top:6px;\r\n  font-weight:800;\r\n}\r\n\r\n.ztm-duration em{\r\n  position:absolute;\r\n  top:-7px;\r\n  right:7px;\r\n  padding:3px 5px;\r\n  border-radius:5px;\r\n  background:#8EF012;\r\n  color:#183400;\r\n  font-size:5px;\r\n  font-style:normal;\r\n  font-weight:900;\r\n}\r\n\r\n.ztm-duration:hover{\r\n  border-color:#05BFF9;\r\n}\r\n\r\n.ztm-duration.active{\r\n  background:#F3FCFF;\r\n  border:2px solid #05BFF9;\r\n}\r\n\r\n\r\n\/* MODE SELECTION *\/\r\n\r\n.ztm-mode-area{\r\n  padding:22px 0 4px;\r\n}\r\n\r\n.ztm-mode-grid{\r\n  display:grid;\r\n  grid-template-columns:1fr 1fr;\r\n  gap:12px;\r\n}\r\n\r\n.ztm-mode-card{\r\n  position:relative;\r\n  display:flex;\r\n  align-items:flex-start;\r\n  gap:12px;\r\n  text-align:left;\r\n  border:1px solid #E1E6EF;\r\n  border-radius:14px;\r\n  padding:16px;\r\n  background:#fff;\r\n  cursor:pointer;\r\n  transition:.22s ease;\r\n}\r\n\r\n.ztm-mode-card:hover{\r\n  border-color:#BFDDEA;\r\n}\r\n\r\n.ztm-mode-card.active{\r\n  border-color:#05BFF9;\r\n  background:linear-gradient(\r\n    135deg,\r\n    rgba(5,191,249,.045),\r\n    rgba(142,240,18,.035)\r\n  );\r\n  box-shadow:0 12px 28px rgba(5,191,249,.08);\r\n}\r\n\r\n.ztm-mode-radio{\r\n  width:18px;\r\n  height:18px;\r\n  flex:0 0 18px;\r\n  margin-top:2px;\r\n  border-radius:50%;\r\n  border:2px solid #C7CEDA;\r\n  position:relative;\r\n}\r\n\r\n.ztm-mode-card.active .ztm-mode-radio{\r\n  border-color:#05BFF9;\r\n}\r\n\r\n.ztm-mode-card.active .ztm-mode-radio::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:3px;\r\n  border-radius:50%;\r\n  background:#05BFF9;\r\n}\r\n\r\n.ztm-mode-content strong{\r\n  display:block;\r\n  color:#171D34;\r\n  font-size:13px;\r\n  font-weight:900;\r\n  margin-bottom:4px;\r\n}\r\n\r\n.ztm-mode-content span{\r\n  display:block;\r\n  color:#7B8294;\r\n  font-size:10px;\r\n  line-height:1.5;\r\n}\r\n\r\n.ztm-mode-badge{\r\n  position:absolute;\r\n  top:-9px;\r\n  right:12px;\r\n  background:#8EF012;\r\n  color:#183400;\r\n  font-size:6px;\r\n  font-weight:900;\r\n  letter-spacing:.6px;\r\n  padding:3px 7px;\r\n  border-radius:5px;\r\n}\r\n\r\n\r\n\/* ADS SETUP *\/\r\n\r\n.ztm-ads-setup{\r\n  max-height:0;\r\n  overflow:hidden;\r\n  transition:max-height .35s ease;\r\n}\r\n\r\n.ztm-ads-setup.open{\r\n  max-height:1400px;\r\n}\r\n\r\n.ztm-ads-inner{\r\n  padding-top:22px;\r\n  margin-top:18px;\r\n  border-top:1px solid #EDF0F5;\r\n}\r\n\r\n.ztm-ads-block{\r\n  margin-bottom:22px;\r\n}\r\n\r\n.ztm-subsection-label{\r\n  color:#20263A;\r\n  font-size:10px;\r\n  font-weight:900;\r\n  letter-spacing:.5px;\r\n  text-transform:uppercase;\r\n  margin-bottom:10px;\r\n}\r\n\r\n.ztm-ads-hint{\r\n  margin:9px 2px 0;\r\n  color:#8A91A2;\r\n  font-size:9px;\r\n  line-height:1.5;\r\n}\r\n\r\n.ztm-pill-row{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n  gap:8px;\r\n}\r\n\r\n.ztm-pill{\r\n  padding:9px 15px;\r\n  border:1px solid #E1E6EF;\r\n  border-radius:30px;\r\n  font-size:10px;\r\n  font-weight:800;\r\n  color:#4E5669;\r\n  cursor:pointer;\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:6px;\r\n  background:#fff;\r\n  transition:.2s ease;\r\n  font-family:Arial,Helvetica,sans-serif;\r\n}\r\n\r\n.ztm-pill .dot{\r\n  width:6px;\r\n  height:6px;\r\n  border-radius:50%;\r\n  background:currentColor;\r\n  opacity:0;\r\n}\r\n\r\n.ztm-pill.active{\r\n  border-color:#05BFF9;\r\n  background:rgba(5,191,249,.06);\r\n  color:#009DD8;\r\n}\r\n\r\n.ztm-pill.active .dot{\r\n  opacity:1;\r\n}\r\n\r\n.ztm-budget-box{\r\n  border:1px solid #E1E6EF;\r\n  border-radius:14px;\r\n  padding:18px;\r\n}\r\n\r\n.ztm-budget-top{\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  margin-bottom:14px;\r\n}\r\n\r\n.ztm-budget-top strong{\r\n  font-size:16px;\r\n  color:#171D34;\r\n  font-weight:900;\r\n}\r\n\r\n.ztm-slider{\r\n  -webkit-appearance:none;\r\n  appearance:none;\r\n  width:100%;\r\n  height:5px;\r\n  border-radius:10px;\r\n  background:#E7EBF2;\r\n  accent-color:#05BFF9;\r\n  cursor:pointer;\r\n}\r\n\r\n.ztm-slider::-webkit-slider-thumb{\r\n  -webkit-appearance:none;\r\n  appearance:none;\r\n  width:18px;\r\n  height:18px;\r\n  border-radius:50%;\r\n  background:#05BFF9;\r\n  border:3px solid #fff;\r\n  box-shadow:0 3px 10px rgba(5,191,249,.45);\r\n  cursor:pointer;\r\n}\r\n\r\n.ztm-budget-30{\r\n  margin-top:12px;\r\n  text-align:center;\r\n  font-size:11px;\r\n  color:#20263A;\r\n  font-weight:800;\r\n}\r\n\r\n.ztm-budget-note{\r\n  margin:10px 0 0;\r\n  text-align:center;\r\n  color:#8A91A2;\r\n  font-size:8px;\r\n  line-height:1.5;\r\n}\r\n\r\n.ztm-plan-grid{\r\n  display:grid;\r\n  grid-template-columns:repeat(3,1fr);\r\n  gap:10px;\r\n}\r\n\r\n.ztm-plan-card{\r\n  position:relative;\r\n  border:1px solid #E1E6EF;\r\n  border-radius:14px;\r\n  padding:16px 12px;\r\n  text-align:center;\r\n  cursor:pointer;\r\n  background:#fff;\r\n  transition:.22s ease;\r\n}\r\n\r\n.ztm-plan-card:hover{\r\n  border-color:#BFDDEA;\r\n}\r\n\r\n.ztm-plan-card.active{\r\n  border-color:#05BFF9;\r\n  background:linear-gradient(\r\n    180deg,\r\n    rgba(5,191,249,.05),\r\n    rgba(142,240,18,.03)\r\n  );\r\n  box-shadow:0 10px 25px rgba(5,191,249,.08);\r\n}\r\n\r\n.ztm-plan-badge{\r\n  position:absolute;\r\n  top:-9px;\r\n  left:50%;\r\n  transform:translateX(-50%);\r\n  background:#8EF012;\r\n  color:#183400;\r\n  font-size:6px;\r\n  font-weight:900;\r\n  letter-spacing:.5px;\r\n  padding:3px 8px;\r\n  border-radius:5px;\r\n}\r\n\r\n.ztm-plan-card strong{\r\n  display:block;\r\n  color:#171D34;\r\n  font-size:12px;\r\n  font-weight:900;\r\n  margin-bottom:8px;\r\n}\r\n\r\n.ztm-plan-price{\r\n  display:block;\r\n  color:#05BFF9;\r\n  font-size:16px;\r\n  font-weight:900;\r\n  margin-bottom:8px;\r\n}\r\n\r\n.ztm-plan-price small{\r\n  color:#9299AA;\r\n  font-size:8px;\r\n  font-weight:800;\r\n}\r\n\r\n.ztm-plan-card small{\r\n  display:block;\r\n  color:#7E8596;\r\n  font-size:8px;\r\n  line-height:1.5;\r\n}\r\n\r\n\r\n\/* ESTIMATE BOX *\/\r\n\r\n.ztm-estimate-box{\r\n  border-radius:13px;\r\n  background:#07113A;\r\n  color:#fff;\r\n  padding:20px;\r\n  margin-top:22px;\r\n}\r\n\r\n.ztm-estimate-rows{\r\n  display:flex;\r\n  flex-direction:column;\r\n  gap:12px;\r\n  margin-bottom:14px;\r\n}\r\n\r\n.ztm-estimate-row{\r\n  display:flex;\r\n  align-items:flex-start;\r\n  justify-content:space-between;\r\n  gap:14px;\r\n  font-size:11px;\r\n  color:#DCE1F0;\r\n  font-weight:800;\r\n}\r\n\r\n.ztm-estimate-row small{\r\n  display:block;\r\n  margin-top:3px;\r\n  color:#8B95B0;\r\n  font-size:8px;\r\n  font-weight:600;\r\n}\r\n\r\n.ztm-estimate-row strong{\r\n  color:#fff;\r\n  font-size:12px;\r\n  font-weight:900;\r\n  white-space:nowrap;\r\n}\r\n\r\n.ztm-estimate-total{\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  padding-top:14px;\r\n  border-top:1px solid rgba(255,255,255,.12);\r\n}\r\n\r\n.ztm-estimate-total span{\r\n  display:block;\r\n  color:#8B95B0;\r\n  font-size:7px;\r\n  font-weight:900;\r\n  letter-spacing:1.2px;\r\n}\r\n\r\n.ztm-estimate-total strong{\r\n  color:#8EF012;\r\n  font-size:25px;\r\n  font-weight:900;\r\n}\r\n\r\n.ztm-estimate-split{\r\n  margin:10px 0 0;\r\n  text-align:center;\r\n  color:#9AA3BC;\r\n  font-size:8.5px;\r\n  line-height:1.6;\r\n}\r\n\r\n\r\n\/* BUTTON *\/\r\n\r\n.ztm-order-btn{\r\n  width:100%;\r\n  min-height:54px;\r\n  border:0;\r\n  border-radius:10px;\r\n  margin-top:14px;\r\n  background:#05BFF9;\r\n  color:#fff;\r\n  font-size:13px;\r\n  font-weight:900;\r\n  cursor:pointer;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  gap:12px;\r\n  box-shadow:0 10px 28px rgba(5,191,249,.20);\r\n  transition:.25s ease;\r\n}\r\n\r\n.ztm-order-btn:hover{\r\n  transform:translateY(-2px);\r\n  background:#00AEE8;\r\n  box-shadow:0 15px 35px rgba(5,191,249,.27);\r\n}\r\n\r\n.ztm-order-btn span{\r\n  font-size:18px;\r\n}\r\n\r\n.ztm-pricing-note{\r\n  text-align:center;\r\n  margin:12px auto 0;\r\n  color:#8A91A2;\r\n  font-size:9px;\r\n  line-height:1.5;\r\n}\r\n\r\n\r\n\/* MARKET NOTE *\/\r\n\r\n.ztm-market-note{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:14px;\r\n  margin-top:18px;\r\n  padding:16px 18px;\r\n  border:1px solid #E7EBF1;\r\n  border-radius:13px;\r\n  background:#FBFCFE;\r\n}\r\n\r\n.ztm-market-icon{\r\n  width:35px;\r\n  height:35px;\r\n  flex:0 0 35px;\r\n  border-radius:9px;\r\n  background:rgba(142,240,18,.11);\r\n  color:#69B900;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n}\r\n\r\n.ztm-market-note strong{\r\n  color:#282F43;\r\n  font-size:10px;\r\n  font-weight:900;\r\n}\r\n\r\n.ztm-market-note p{\r\n  margin:4px 0 0;\r\n  color:#7E8596;\r\n  font-size:9px;\r\n  line-height:1.5;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ORDER MODAL (ALL SAME)\r\n   ========================================================= *\/\r\n\r\n.ztm-order-overlay{\r\n  position:fixed;\r\n  inset:0;\r\n  z-index:999999;\r\n  background:rgba(7,17,58,.58);\r\n  backdrop-filter:blur(8px);\r\n  display:none;\r\n  align-items:center;\r\n  justify-content:center;\r\n  padding:20px;\r\n  overflow-y:auto;\r\n}\r\n\r\n.ztm-order-overlay.open{\r\n  display:flex;\r\n}\r\n\r\n.ztm-order-modal{\r\n  width:min(650px,100%);\r\n  max-height:92vh;\r\n  overflow-y:auto;\r\n  background:#fff;\r\n  border-radius:22px;\r\n  box-shadow:0 35px 100px rgba(0,0,0,.22);\r\n  position:relative;\r\n  animation:ztmModalIn .3s ease;\r\n}\r\n\r\n@keyframes ztmModalIn{\r\n  from{\r\n    opacity:0;\r\n    transform:translateY(18px) scale(.98);\r\n  }\r\n  to{\r\n    opacity:1;\r\n    transform:translateY(0) scale(1);\r\n  }\r\n}\r\n\r\n.ztm-order-header{\r\n  display:flex;\r\n  justify-content:space-between;\r\n  gap:15px;\r\n  padding:25px 26px 18px;\r\n}\r\n\r\n.ztm-order-header h3{\r\n  margin:7px 0 4px;\r\n  color:#151B32;\r\n  font-size:23px;\r\n  font-weight:900;\r\n}\r\n\r\n.ztm-order-header p{\r\n  margin:0;\r\n  color:#7B8293;\r\n  font-size:11px;\r\n}\r\n\r\n.ztm-close-order{\r\n  width:34px;\r\n  height:34px;\r\n  flex:0 0 34px;\r\n  border:1px solid #E3E7EE;\r\n  background:#fff;\r\n  border-radius:9px;\r\n  cursor:pointer;\r\n  color:#4E5669;\r\n  font-size:22px;\r\n  line-height:1;\r\n}\r\n\r\n.ztm-progress{\r\n  padding:0 26px 18px;\r\n}\r\n\r\n.ztm-progress-line{\r\n  width:100%;\r\n  height:4px;\r\n  border-radius:10px;\r\n  background:#EDF0F4;\r\n  overflow:hidden;\r\n}\r\n\r\n.ztm-progress-line span{\r\n  display:block;\r\n  width:50%;\r\n  height:100%;\r\n  background:linear-gradient(90deg,#05BFF9,#8EF012);\r\n  transition:.3s ease;\r\n}\r\n\r\n.ztm-progress-text{\r\n  margin-top:7px;\r\n  color:#9299AA;\r\n  font-size:8px;\r\n  font-weight:800;\r\n}\r\n\r\n.ztm-form-step{\r\n  display:none;\r\n  padding:4px 26px 26px;\r\n}\r\n\r\n.ztm-form-step.active{\r\n  display:block;\r\n}\r\n\r\n.ztm-form-step-title{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:9px;\r\n  color:#20263A;\r\n  font-size:12px;\r\n  font-weight:900;\r\n  margin-bottom:18px;\r\n}\r\n\r\n.ztm-form-step-title span{\r\n  width:25px;\r\n  height:25px;\r\n  border-radius:7px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  background:#F0FBFF;\r\n  color:#05BFF9;\r\n  font-size:8px;\r\n}\r\n\r\n.ztm-form-group{\r\n  margin-bottom:15px;\r\n}\r\n\r\n.ztm-form-group label{\r\n  display:block;\r\n  color:#343B50;\r\n  font-size:10px;\r\n  font-weight:900;\r\n  margin-bottom:7px;\r\n}\r\n\r\n.ztm-form-group label b{\r\n  color:#05BFF9;\r\n}\r\n\r\n.ztm-form-group input,\r\n.ztm-form-group textarea,\r\n.ztm-form-group select{\r\n  width:100%;\r\n  border:1px solid #DDE3EC;\r\n  border-radius:9px;\r\n  padding:12px 13px;\r\n  background:#fff;\r\n  color:#20263A;\r\n  outline:none;\r\n  font-family:Arial,Helvetica,sans-serif;\r\n  font-size:11px;\r\n  transition:.2s ease;\r\n}\r\n\r\n.ztm-form-group textarea{\r\n  resize:vertical;\r\n  min-height:90px;\r\n}\r\n\r\n.ztm-form-group input:focus,\r\n.ztm-form-group textarea:focus,\r\n.ztm-form-group select:focus{\r\n  border-color:#05BFF9;\r\n  box-shadow:0 0 0 3px rgba(5,191,249,.08);\r\n}\r\n\r\n.ztm-contact-grid{\r\n  display:grid;\r\n  grid-template-columns:1fr 1fr;\r\n  gap:12px;\r\n}\r\n\r\n.ztm-selected-order-card{\r\n  padding:5px 13px;\r\n  background:#F7FAFC;\r\n  border:1px solid #E6EBF2;\r\n  border-radius:11px;\r\n  margin-bottom:17px;\r\n}\r\n\r\n.ztm-order-row{\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  gap:12px;\r\n  padding:9px 0;\r\n  border-bottom:1px solid #E2E7ED;\r\n}\r\n\r\n.ztm-order-row:last-child{\r\n  border-bottom:0;\r\n}\r\n\r\n.ztm-order-row small{\r\n  display:block;\r\n  color:#969DAC;\r\n  font-size:6px;\r\n  font-weight:900;\r\n  letter-spacing:.9px;\r\n  margin-bottom:5px;\r\n}\r\n\r\n.ztm-order-row strong{\r\n  display:block;\r\n  color:#20263A;\r\n  font-size:10px;\r\n  line-height:1.35;\r\n  text-align:right;\r\n}\r\n\r\n.ztm-order-row.total strong{\r\n  color:#05BFF9;\r\n  font-size:12px;\r\n}\r\n\r\n.ztm-upload-box{\r\n  margin-top:17px;\r\n  padding:14px;\r\n  border:1px solid #E1E6EF;\r\n  border-radius:12px;\r\n  background:#FBFCFE;\r\n}\r\n\r\n.ztm-upload-heading{\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  gap:10px;\r\n  margin-bottom:10px;\r\n}\r\n\r\n.ztm-upload-heading strong{\r\n  display:block;\r\n  color:#252C40;\r\n  font-size:10px;\r\n  font-weight:900;\r\n}\r\n\r\n.ztm-upload-heading small{\r\n  display:block;\r\n  color:#858C9C;\r\n  font-size:8px;\r\n  margin-top:4px;\r\n}\r\n\r\n.ztm-upload-heading > span{\r\n  color:#05BFF9;\r\n  background:#F0FBFF;\r\n  padding:5px 7px;\r\n  border-radius:6px;\r\n  font-size:7px;\r\n  font-weight:900;\r\n}\r\n\r\n.ztm-upload-label{\r\n  display:block;\r\n  border:1px dashed #BFCBD8;\r\n  border-radius:10px;\r\n  cursor:pointer;\r\n  background:#fff;\r\n}\r\n\r\n.ztm-upload-label input{\r\n  display:none;\r\n}\r\n\r\n.ztm-upload-inner{\r\n  min-height:105px;\r\n  display:flex;\r\n  flex-direction:column;\r\n  align-items:center;\r\n  justify-content:center;\r\n  text-align:center;\r\n}\r\n\r\n.ztm-upload-icon{\r\n  width:30px;\r\n  height:30px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  border-radius:8px;\r\n  background:rgba(5,191,249,.08);\r\n  color:#05BFF9;\r\n  font-size:20px;\r\n  font-weight:400;\r\n  margin-bottom:7px;\r\n}\r\n\r\n.ztm-upload-inner strong{\r\n  color:#30374A;\r\n  font-size:10px;\r\n}\r\n\r\n.ztm-upload-inner span{\r\n  color:#9AA1B0;\r\n  font-size:7px;\r\n  margin-top:4px;\r\n}\r\n\r\n.ztm-image-preview{\r\n  display:grid;\r\n  grid-template-columns:repeat(4,1fr);\r\n  gap:7px;\r\n  margin-top:9px;\r\n}\r\n\r\n.ztm-preview-item{\r\n  position:relative;\r\n  aspect-ratio:1;\r\n  border-radius:7px;\r\n  overflow:hidden;\r\n  border:1px solid #E0E5EC;\r\n  background:#fff;\r\n}\r\n\r\n.ztm-preview-item img{\r\n  width:100%;\r\n  height:100%;\r\n  object-fit:cover;\r\n}\r\n\r\n.ztm-preview-remove{\r\n  position:absolute;\r\n  right:3px;\r\n  top:3px;\r\n  width:20px;\r\n  height:20px;\r\n  border:0;\r\n  border-radius:50%;\r\n  background:rgba(0,0,0,.65);\r\n  color:#fff;\r\n  cursor:pointer;\r\n  font-size:12px;\r\n}\r\n\r\n.ztm-form-navigation{\r\n  display:flex;\r\n  justify-content:flex-end;\r\n  gap:9px;\r\n  margin-top:22px;\r\n}\r\n\r\n.ztm-next-btn,\r\n.ztm-submit-btn{\r\n  min-height:43px;\r\n  padding:11px 18px;\r\n  border:0;\r\n  border-radius:8px;\r\n  background:#05BFF9;\r\n  color:#fff;\r\n  font-size:10px;\r\n  font-weight:900;\r\n  cursor:pointer;\r\n  display:inline-flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  gap:9px;\r\n}\r\n\r\n.ztm-next-btn span,\r\n.ztm-submit-btn span{\r\n  font-size:15px;\r\n}\r\n\r\n.ztm-back-btn{\r\n  min-height:43px;\r\n  padding:11px 16px;\r\n  border:1px solid #DDE3EB;\r\n  border-radius:8px;\r\n  background:#fff;\r\n  color:#596174;\r\n  font-size:10px;\r\n  font-weight:900;\r\n  cursor:pointer;\r\n}\r\n\r\n.ztm-submit-btn{\r\n  background:#8EF012;\r\n  color:#173000;\r\n}\r\n\r\n.ztm-submit-btn:disabled{\r\n  opacity:.55;\r\n  cursor:not-allowed;\r\n}\r\n\r\n.ztm-form-status{\r\n  margin-top:12px;\r\n  text-align:center;\r\n  font-size:9px;\r\n  color:#D35454;\r\n}\r\n\r\n.ztm-success-screen{\r\n  display:none;\r\n  padding:30px 26px 35px;\r\n  text-align:center;\r\n}\r\n\r\n.ztm-success-screen.show{\r\n  display:block;\r\n}\r\n\r\n.ztm-success-icon{\r\n  width:60px;\r\n  height:60px;\r\n  margin:0 auto 15px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  border-radius:50%;\r\n  background:rgba(142,240,18,.13);\r\n  color:#64B900;\r\n  font-size:27px;\r\n  font-weight:900;\r\n}\r\n\r\n.ztm-success-screen h3{\r\n  margin:0;\r\n  color:#171D33;\r\n  font-size:23px;\r\n  font-weight:900;\r\n}\r\n\r\n.ztm-success-screen > p{\r\n  max-width:430px;\r\n  margin:10px auto 18px;\r\n  color:#737B8D;\r\n  font-size:11px;\r\n  line-height:1.65;\r\n}\r\n\r\n.ztm-success-order{\r\n  display:inline-block;\r\n  padding:10px 18px;\r\n  background:#F5F8FC;\r\n  border:1px solid #E2E7EF;\r\n  border-radius:9px;\r\n}\r\n\r\n.ztm-success-order span{\r\n  display:block;\r\n  color:#9299AA;\r\n  font-size:6px;\r\n  font-weight:900;\r\n  letter-spacing:1px;\r\n}\r\n\r\n.ztm-success-order strong{\r\n  display:block;\r\n  color:#05BFF9;\r\n  font-size:13px;\r\n  margin-top:4px;\r\n}\r\n\r\n.ztm-whatsapp-btn{\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  gap:9px;\r\n  max-width:320px;\r\n  min-height:45px;\r\n  margin:18px auto 0;\r\n  border-radius:9px;\r\n  background:#8EF012;\r\n  color:#183000 !important;\r\n  text-decoration:none !important;\r\n  font-size:10px;\r\n  font-weight:900;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RESPONSIVE\r\n   ========================================================= *\/\r\n\r\n@media(max-width:800px){\r\n\r\n  .ztm-category-grid{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .ztm-duration-grid{\r\n    grid-template-columns:repeat(4,1fr);\r\n  }\r\n\r\n  .ztm-mode-grid{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .ztm-plan-grid{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .ztm-subtype-grid{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n}\r\n\r\n@media(max-width:600px){\r\n\r\n  .ztm-pricing-system{\r\n    padding:60px 15px;\r\n  }\r\n\r\n  .ztm-pricing-head{\r\n    margin-bottom:30px;\r\n  }\r\n\r\n  .ztm-pricing-head h2{\r\n    font-size:39px;\r\n    letter-spacing:-1.3px;\r\n  }\r\n\r\n  .ztm-pricing-head p{\r\n    font-size:13px;\r\n  }\r\n\r\n  .ztm-pricing-panel{\r\n    padding:17px;\r\n    border-radius:17px;\r\n  }\r\n\r\n  .ztm-selected-info{\r\n    align-items:flex-start;\r\n  }\r\n\r\n  .ztm-starting-price{\r\n    text-align:right;\r\n  }\r\n\r\n  .ztm-selected-info h3{\r\n    font-size:17px;\r\n  }\r\n\r\n  .ztm-duration-grid{\r\n    grid-template-columns:repeat(3,1fr);\r\n  }\r\n\r\n  .ztm-estimate-row{\r\n    font-size:10px;\r\n  }\r\n\r\n  .ztm-estimate-total strong{\r\n    font-size:23px;\r\n  }\r\n\r\n  .ztm-order-overlay{\r\n    padding:8px;\r\n  }\r\n\r\n  .ztm-order-modal{\r\n    max-height:95vh;\r\n    border-radius:17px;\r\n  }\r\n\r\n  .ztm-order-header{\r\n    padding:20px 17px 15px;\r\n  }\r\n\r\n  .ztm-progress{\r\n    padding:0 17px 15px;\r\n  }\r\n\r\n  .ztm-form-step{\r\n    padding:4px 17px 20px;\r\n  }\r\n\r\n  .ztm-contact-grid{\r\n    grid-template-columns:1fr;\r\n    gap:0;\r\n  }\r\n\r\n  .ztm-image-preview{\r\n    grid-template-columns:repeat(4,1fr);\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<script>\r\n\r\n(function(){\r\n\r\n  \/* =========================================================\r\n     WHATSAPP ORDER FLOW\r\n     ========================================================= *\/\r\n\r\n  const ZTM_WHATSAPP = \"923274893933\";\r\n\r\n\r\n  \/* =========================================================\r\n     PRICING DATA \u2014 UNCHANGED\r\n     ========================================================= *\/\r\n\r\n  const pricing = {\r\n\r\n    \"ai-ugc\": {\r\n      name:\"AI UGC \/ Avatar Ad\",\r\n      description:\"AI-powered spokesperson & performance creative.\",\r\n      prices:{\r\n        10:2999,\r\n        15:3299,\r\n        16:3499,\r\n        20:4299,\r\n        30:6299,\r\n        45:9299,\r\n        60:12299\r\n      }\r\n    },\r\n\r\n    \"ai-product\": {\r\n      name:\"AI Product Ad\",\r\n      description:\"Premium AI-powered product showcase advertising.\",\r\n      prices:{\r\n        10:3999,\r\n        15:4299,\r\n        16:4499,\r\n        20:5499,\r\n        30:7999,\r\n        45:11749,\r\n        60:15499\r\n      }\r\n    },\r\n\r\n    \"cinematic\": {\r\n      name:\"AI Cinematic Commercial\",\r\n      description:\"Premium cinematic storytelling and brand advertising.\",\r\n      prices:{\r\n        10:6099,\r\n        15:7099,\r\n        16:7499,\r\n        20:9099,\r\n        30:13099,\r\n        45:19099,\r\n        60:25099\r\n      }\r\n    },\r\n\r\n    \"cgi\": {\r\n      name:\"3D \/ CGI Product Ad\",\r\n      description:\"Advanced 3D product animation and CGI visualization.\",\r\n      prices:{\r\n        10:8499,\r\n        15:9499,\r\n        16:9999,\r\n        20:11999,\r\n        30:16999,\r\n        45:24499,\r\n        60:31999\r\n      }\r\n    },\r\n\r\n    \"explainer\": {\r\n      name:\"Animated Explainer Ad\",\r\n      description:\"Animated storytelling for products and services.\",\r\n      prices:{\r\n        10:5199,\r\n        15:6199,\r\n        16:6499,\r\n        20:7699,\r\n        30:10499,\r\n        45:14999,\r\n        60:19499\r\n      }\r\n    },\r\n\r\n    \"human-ugc\": {\r\n      name:\"Human UGC\",\r\n      description:\"Real creator-based social advertising.\",\r\n      prices:{\r\n        10:6999,\r\n        15:7499,\r\n        16:7999,\r\n        20:9599,\r\n        30:13599,\r\n        45:19599,\r\n        60:25599\r\n      }\r\n    },\r\n\r\n    \"static-post\": {\r\n      name:\"Single Static Post\",\r\n      description:\"Professional social media advertising graphic.\",\r\n      price:4999\r\n    },\r\n\r\n    \"motion\": {\r\n      name:\"Motion Creative\",\r\n      description:\"Animated social media creative.\",\r\n      prices:{\r\n        10:4999,\r\n        15:4999,\r\n        16:4999,\r\n        20:4999,\r\n        30:4999,\r\n        45:4999,\r\n        60:4999\r\n      }\r\n    }\r\n\r\n  };\r\n\r\n\r\n  \/* =========================================================\r\n     CATEGORY ICONS\r\n     ========================================================= *\/\r\n\r\n  const categoryIcons = {\r\n    \"ai-ugc\": '<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"3.4\"\/><path d=\"M5.5 20c1-3.5 3.8-5.5 6.5-5.5s5.5 2 6.5 5.5\"\/><path d=\"M18.5 4.5l.8 1.6 1.6.8-1.6.8-.8 1.6-.8-1.6-1.6-.8 1.6-.8z\"\/><\/svg>',\r\n    \"ai-product\": '<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3z\"\/><path d=\"M4 7.5L12 12l8-4.5\"\/><path d=\"M12 12v9\"\/><\/svg>',\r\n    \"cinematic\": '<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 9.5l1.3-3.8a1 1 0 011-.7h13.4a1 1 0 011 1.3l-1 3.2\"\/><path d=\"M3 9.5h18V19a1 1 0 01-1 1H4a1 1 0 01-1-1V9.5z\"\/><path d=\"M6.5 5l2 4.5M11 5l2 4.5M15.5 5l2 4.5\"\/><\/svg>',\r\n    \"cgi\": '<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4\" y=\"8\" width=\"10\" height=\"10\" rx=\"1\"\/><path d=\"M8 8l6-4h6v10l-6 4\"\/><path d=\"M14 8v10\"\/><\/svg>',\r\n    \"explainer\": '<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"13\" rx=\"2.5\"\/><path d=\"M10 9.5l5 2.7-5 2.7v-5.4z\" fill=\"currentColor\" stroke=\"none\"\/><\/svg>',\r\n    \"human-ugc\": '<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 8.5a1.5 1.5 0 011.5-1.5h2l1-2h7l1 2h2A1.5 1.5 0 0120 8.5V17a1.5 1.5 0 01-1.5 1.5h-13A1.5 1.5 0 014 17V8.5z\"\/><circle cx=\"12\" cy=\"12.5\" r=\"3.2\"\/><\/svg>',\r\n    \"static\": '<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"7\" width=\"14\" height=\"11\" rx=\"1.5\"\/><path d=\"M7 3h14v11\"\/><circle cx=\"7.5\" cy=\"11.5\" r=\"1.3\"\/><path d=\"M4 16l3-3 2.5 2.5L13 12l4 4\"\/><\/svg>'\r\n  };\r\n\r\n  const categoryColor = {\r\n    \"ai-ugc\":\"blue\",\r\n    \"ai-product\":\"green\",\r\n    \"cinematic\":\"blue\",\r\n    \"cgi\":\"green\",\r\n    \"explainer\":\"blue\",\r\n    \"human-ugc\":\"green\",\r\n    \"static\":\"blue\"\r\n  };\r\n\r\n\r\n  \/* =========================================================\r\n     META ADS MANAGEMENT PLANS\r\n     ========================================================= *\/\r\n\r\n  const managementPlans = {\r\n    starter:{ name:\"Starter\", price:15000 },\r\n    growth:{ name:\"Growth\", price:25000 },\r\n    scale:{ name:\"Scale\", price:40000 }\r\n  };\r\n\r\n\r\n  \/* =========================================================\r\n     STATE\r\n     ========================================================= *\/\r\n\r\n  let selectedCategory = \"ai-ugc\";\r\n  let selectedDuration = 10;\r\n  let selectedPrice = 2999;\r\n  let selectedSubtype = null;\r\n\r\n  let selectedMode = \"create\";\r\n  let adsPlatforms = { facebook:true, instagram:true, whatsapp:true };\r\n  let selectedGoal = \"Leads\";\r\n  let dailyBudget = 1000;\r\n  let selectedPlan = \"growth\";\r\n\r\n  let selectedFiles = [];\r\n\r\n\r\n  \/* =========================================================\r\n     ELEMENTS\r\n     ========================================================= *\/\r\n\r\n  const categoryCards =\r\n    document.querySelectorAll(\".ztm-category-card\");\r\n\r\n  const durationButtons =\r\n    document.querySelectorAll(\".ztm-duration\");\r\n\r\n  const subtypeSelector =\r\n    document.getElementById(\"ztmSubtypeSelector\");\r\n\r\n  const subtypeCards =\r\n    document.querySelectorAll(\".ztm-subtype-card\");\r\n\r\n  const durationArea =\r\n    document.getElementById(\"ztmDurationArea\");\r\n\r\n  const modeLabel =\r\n    document.getElementById(\"ztmModeLabel\");\r\n\r\n  const selectedName =\r\n    document.getElementById(\"ztmSelectedName\");\r\n\r\n  const selectedDescription =\r\n    document.getElementById(\"ztmSelectedDescription\");\r\n\r\n  const selectedVisual =\r\n    document.getElementById(\"ztmSelectedVisual\");\r\n\r\n  const startingPrice =\r\n    document.getElementById(\"ztmStartingPrice\");\r\n\r\n  const orderOverlay =\r\n    document.getElementById(\"ztmOrderOverlay\");\r\n\r\n  const openOrder =\r\n    document.getElementById(\"ztmOpenOrder\");\r\n\r\n  const orderBtnText =\r\n    document.getElementById(\"ztmOrderBtnText\");\r\n\r\n  const closeOrder =\r\n    document.getElementById(\"ztmCloseOrder\");\r\n\r\n  const orderForm =\r\n    document.getElementById(\"ztmOrderForm\");\r\n\r\n  const steps =\r\n    document.querySelectorAll(\".ztm-form-step\");\r\n\r\n  const progressBar =\r\n    document.getElementById(\"ztmProgressBar\");\r\n\r\n  const stepText =\r\n    document.getElementById(\"ztmStepText\");\r\n\r\n  const orderSummary =\r\n    document.getElementById(\"ztmOrderSummary\");\r\n\r\n  const imageInput =\r\n    document.getElementById(\"ztmProductImages\");\r\n\r\n  const imagePreview =\r\n    document.getElementById(\"ztmImagePreview\");\r\n\r\n  const formStatus =\r\n    document.getElementById(\"ztmFormStatus\");\r\n\r\n  const submitBtn =\r\n    document.getElementById(\"ztmSubmitBtn\");\r\n\r\n  const successScreen =\r\n    document.getElementById(\"ztmSuccess\");\r\n\r\n  const successOrderId =\r\n    document.getElementById(\"ztmSuccessOrderId\");\r\n\r\n  const modeCards =\r\n    document.querySelectorAll(\".ztm-mode-card\");\r\n\r\n  const adsSetup =\r\n    document.getElementById(\"ztmAdsSetup\");\r\n\r\n  const platformPills =\r\n    document.querySelectorAll(\".ztm-platform-pill\");\r\n\r\n  const goalPills =\r\n    document.querySelectorAll(\".ztm-goal-pill\");\r\n\r\n  const budgetSlider =\r\n    document.getElementById(\"ztmBudgetSlider\");\r\n\r\n  const budgetDaily =\r\n    document.getElementById(\"ztmBudgetDaily\");\r\n\r\n  const budget30 =\r\n    document.getElementById(\"ztmBudget30day\");\r\n\r\n  const planCards =\r\n    document.querySelectorAll(\".ztm-plan-card\");\r\n\r\n  const estimateRows =\r\n    document.getElementById(\"ztmEstimateRows\");\r\n\r\n  const estimateTotal =\r\n    document.getElementById(\"ztmEstimateTotal\");\r\n\r\n  const estimateSplit =\r\n    document.getElementById(\"ztmEstimateSplit\");\r\n\r\n\r\n  \/* =========================================================\r\n     FORMAT PRICE\r\n     ========================================================= *\/\r\n\r\n  function formatPrice(number){\r\n    return \"Rs. \" + Number(number).toLocaleString(\"en-PK\");\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     UPDATE PRICING\r\n     ========================================================= *\/\r\n\r\n  function updatePricing(){\r\n\r\n    let data;\r\n    let isStaticPost = false;\r\n\r\n    if(selectedCategory === \"static\" && selectedSubtype === \"static-post\"){\r\n      data = pricing[\"static-post\"];\r\n      isStaticPost = true;\r\n    } else if(selectedCategory === \"static\" && selectedSubtype === \"motion\"){\r\n      data = pricing[\"motion\"];\r\n    } else {\r\n      data = pricing[selectedCategory];\r\n    }\r\n\r\n    selectedName.textContent = data.name;\r\n    selectedDescription.textContent = data.description;\r\n\r\n    selectedVisual.className =\r\n      \"ztm-selected-visual \" +\r\n      (categoryColor[selectedCategory] === \"green\" ?\r\n        \"ztm-visual-green\" : \"ztm-visual-blue\");\r\n\r\n    selectedVisual.innerHTML = categoryIcons[selectedCategory];\r\n\r\n    if(isStaticPost){\r\n      selectedPrice = data.price;\r\n      startingPrice.textContent = formatPrice(data.price);\r\n      durationArea.style.display = \"none\";\r\n    } else {\r\n      const prices = data.prices;\r\n      const values = [10,15,16,20,30,45,60];\r\n\r\n      values.forEach(function(seconds){\r\n        const element = document.getElementById(\"price-\" + seconds);\r\n        if(element){\r\n          element.textContent = formatPrice(prices[seconds]);\r\n        }\r\n      });\r\n\r\n      selectedPrice = prices[selectedDuration];\r\n      startingPrice.textContent = formatPrice(prices[10]);\r\n      durationArea.style.display = \"block\";\r\n    }\r\n\r\n    updateEstimate();\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     LIVE ESTIMATE + ORDER SUMMARY\r\n     ========================================================= *\/\r\n\r\n  function updateEstimate(){\r\n\r\n    estimateRows.innerHTML = \"\";\r\n\r\n    let data;\r\n    let isStaticPost = false;\r\n\r\n    if(selectedCategory === \"static\" && selectedSubtype === \"static-post\"){\r\n      data = pricing[\"static-post\"];\r\n      isStaticPost = true;\r\n    } else if(selectedCategory === \"static\" && selectedSubtype === \"motion\"){\r\n      data = pricing[\"motion\"];\r\n    } else {\r\n      data = pricing[selectedCategory];\r\n    }\r\n\r\n    const creativeRow = document.createElement(\"div\");\r\n    creativeRow.className = \"ztm-estimate-row\";\r\n\r\n    if(isStaticPost){\r\n      creativeRow.innerHTML =\r\n        \"<span>Creative Production\" +\r\n        \"<small>\" + data.name + \"<\/small>\" +\r\n        \"<\/span><strong>\" + formatPrice(selectedPrice) + \"<\/strong>\";\r\n    } else {\r\n      creativeRow.innerHTML =\r\n        \"<span>Creative Production\" +\r\n        \"<small>\" + data.name + \" \u00b7 \" + selectedDuration + \" Seconds<\/small>\" +\r\n        \"<\/span><strong>\" + formatPrice(selectedPrice) + \"<\/strong>\";\r\n    }\r\n\r\n    estimateRows.appendChild(creativeRow);\r\n\r\n    if(selectedMode === \"create-run\"){\r\n\r\n      const plan = managementPlans[selectedPlan];\r\n      const adSpend30 = dailyBudget * 30;\r\n\r\n      const mgmtRow = document.createElement(\"div\");\r\n      mgmtRow.className = \"ztm-estimate-row\";\r\n      mgmtRow.innerHTML =\r\n        \"<span>ZTM Ads Management\" +\r\n        \"<small>\" + plan.name + \" Plan \u00b7 Monthly<\/small>\" +\r\n        \"<\/span><strong>\" + formatPrice(plan.price) + \"<\/strong>\";\r\n      estimateRows.appendChild(mgmtRow);\r\n\r\n      const spendRow = document.createElement(\"div\");\r\n      spendRow.className = \"ztm-estimate-row\";\r\n      spendRow.innerHTML =\r\n        \"<span>Estimated Meta Ad Spend\" +\r\n        \"<small>Rs. \" + dailyBudget.toLocaleString(\"en-PK\") + \" \/ day \u00b7 30 Days<\/small>\" +\r\n        \"<\/span><strong>\" + formatPrice(adSpend30) + \"<\/strong>\";\r\n      estimateRows.appendChild(spendRow);\r\n\r\n      const servicesTotal = selectedPrice + plan.price;\r\n      const grandTotal = servicesTotal + adSpend30;\r\n\r\n      estimateTotal.textContent = formatPrice(grandTotal);\r\n      estimateSplit.textContent =\r\n        formatPrice(servicesTotal) + \" \u2014 ZTM Services   \u00b7   \" +\r\n        formatPrice(adSpend30) + \" \u2014 Estimated Advertising Spend (billed directly by Meta)\";\r\n\r\n    } else {\r\n      estimateTotal.textContent = formatPrice(selectedPrice);\r\n      estimateSplit.textContent = \"\";\r\n    }\r\n\r\n    renderOrderSummary();\r\n\r\n  }\r\n\r\n\r\n  function orderRow(label, value, isTotal){\r\n    return '<div class=\"ztm-order-row' +\r\n      (isTotal ? ' total' : '') +\r\n      '\"><small>' + label + '<\/small><strong>' + value + '<\/strong><\/div>';\r\n  }\r\n\r\n\r\n  function renderOrderSummary(){\r\n    if(!orderSummary) return;\r\n\r\n    let data;\r\n    let isStaticPost = false;\r\n\r\n    if(selectedCategory === \"static\" && selectedSubtype === \"static-post\"){\r\n      data = pricing[\"static-post\"];\r\n      isStaticPost = true;\r\n    } else if(selectedCategory === \"static\" && selectedSubtype === \"motion\"){\r\n      data = pricing[\"motion\"];\r\n    } else {\r\n      data = pricing[selectedCategory];\r\n    }\r\n\r\n    let html = \"\";\r\n    html += orderRow(\"CREATIVE TYPE\", data.name);\r\n\r\n    if(!isStaticPost){\r\n      html += orderRow(\"DURATION\", selectedDuration + \" Seconds\");\r\n    }\r\n\r\n    html += orderRow(\"CREATIVE FEE\", formatPrice(selectedPrice));\r\n\r\n    if(selectedMode === \"create-run\"){\r\n      const plan = managementPlans[selectedPlan];\r\n      const adSpend30 = dailyBudget * 30;\r\n\r\n      html += orderRow(\"SERVICE TYPE\", \"Create + Run Meta Ads\");\r\n      html += orderRow(\"MANAGEMENT PLAN\", plan.name + \" (\" + formatPrice(plan.price) + \"\/mo)\");\r\n      html += orderRow(\"DAILY AD BUDGET\", \"Rs. \" + dailyBudget.toLocaleString(\"en-PK\") + \" \/ day\");\r\n      html += orderRow(\"ESTIMATED TOTAL\", formatPrice(selectedPrice + plan.price + adSpend30), true);\r\n    } else {\r\n      html += orderRow(\"SERVICE TYPE\", \"Creative Production Only\");\r\n    }\r\n\r\n    orderSummary.innerHTML = html;\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     CATEGORY CLICK\r\n     ========================================================= *\/\r\n\r\n  categoryCards.forEach(function(card){\r\n\r\n    card.addEventListener(\"click\",function(){\r\n\r\n      categoryCards.forEach(function(item){\r\n        item.classList.remove(\"active\");\r\n      });\r\n\r\n      card.classList.add(\"active\");\r\n      selectedCategory = card.dataset.category;\r\n      selectedSubtype = null;\r\n\r\n      if(selectedCategory === \"static\"){\r\n        subtypeSelector.style.display = \"block\";\r\n        subtypeCards[0].click();\r\n      } else {\r\n        subtypeSelector.style.display = \"none\";\r\n        updatePricing();\r\n      }\r\n\r\n    });\r\n\r\n  });\r\n\r\n\r\n  \/* =========================================================\r\n     SUBTYPE CLICK (Static Post vs Motion)\r\n     ========================================================= *\/\r\n\r\n  subtypeCards.forEach(function(card){\r\n\r\n    card.addEventListener(\"click\",function(){\r\n\r\n      subtypeCards.forEach(function(item){\r\n        item.classList.remove(\"active\");\r\n      });\r\n\r\n      card.classList.add(\"active\");\r\n      selectedSubtype = card.dataset.subtype;\r\n      updatePricing();\r\n\r\n    });\r\n\r\n  });\r\n\r\n\r\n  \/* =========================================================\r\n     DURATION CLICK\r\n     ========================================================= *\/\r\n\r\n  durationButtons.forEach(function(button){\r\n\r\n    button.addEventListener(\"click\",function(){\r\n\r\n      durationButtons.forEach(function(item){\r\n        item.classList.remove(\"active\");\r\n      });\r\n\r\n      button.classList.add(\"active\");\r\n      selectedDuration = Number(button.dataset.duration);\r\n      updatePricing();\r\n\r\n    });\r\n\r\n  });\r\n\r\n\r\n  \/* =========================================================\r\n     MODE CLICK (Just Create vs Create + Run)\r\n     ========================================================= *\/\r\n\r\n  modeCards.forEach(function(card){\r\n\r\n    card.addEventListener(\"click\",function(){\r\n\r\n      modeCards.forEach(function(item){\r\n        item.classList.remove(\"active\");\r\n      });\r\n\r\n      card.classList.add(\"active\");\r\n      selectedMode = card.dataset.mode;\r\n\r\n      if(selectedMode === \"create-run\"){\r\n        adsSetup.classList.add(\"open\");\r\n        modeLabel.querySelector(\"span\").textContent = \"02\";\r\n        orderBtnText.textContent = \"Start Your Project\";\r\n      } else {\r\n        adsSetup.classList.remove(\"open\");\r\n        modeLabel.querySelector(\"span\").textContent = \"02\";\r\n        orderBtnText.textContent = \"Start Your Order\";\r\n      }\r\n\r\n      updateEstimate();\r\n\r\n    });\r\n\r\n  });\r\n\r\n\r\n  \/* =========================================================\r\n     PLATFORM \/ GOAL PILLS\r\n     ========================================================= *\/\r\n\r\n  platformPills.forEach(function(pill){\r\n    pill.addEventListener(\"click\",function(){\r\n      const key = pill.dataset.platform;\r\n      adsPlatforms[key] = !adsPlatforms[key];\r\n      pill.classList.toggle(\"active\", adsPlatforms[key]);\r\n    });\r\n  });\r\n\r\n  goalPills.forEach(function(pill){\r\n    pill.addEventListener(\"click\",function(){\r\n      goalPills.forEach(function(item){\r\n        item.classList.remove(\"active\");\r\n      });\r\n      pill.classList.add(\"active\");\r\n      selectedGoal = pill.dataset.goal;\r\n    });\r\n  });\r\n\r\n\r\n  \/* =========================================================\r\n     BUDGET SLIDER\r\n     ========================================================= *\/\r\n\r\n  budgetSlider.addEventListener(\"input\",function(){\r\n    dailyBudget = Number(budgetSlider.value);\r\n    budgetDaily.textContent =\r\n      \"Rs. \" + dailyBudget.toLocaleString(\"en-PK\") + \" \/ day\";\r\n    budget30.textContent =\r\n      \"Estimated 30-day ad spend: \" + formatPrice(dailyBudget * 30);\r\n    updateEstimate();\r\n  });\r\n\r\n\r\n  \/* =========================================================\r\n     MANAGEMENT PLAN CLICK\r\n     ========================================================= *\/\r\n\r\n  planCards.forEach(function(card){\r\n    card.addEventListener(\"click\",function(){\r\n      planCards.forEach(function(item){\r\n        item.classList.remove(\"active\");\r\n      });\r\n      card.classList.add(\"active\");\r\n      selectedPlan = card.dataset.plan;\r\n      updateEstimate();\r\n    });\r\n  });\r\n\r\n\r\n  \/* =========================================================\r\n     OPEN MODAL\r\n     ========================================================= *\/\r\n\r\n  openOrder.addEventListener(\"click\",function(){\r\n    orderOverlay.classList.add(\"open\");\r\n    document.body.style.overflow = \"hidden\";\r\n    showStep(1);\r\n    renderOrderSummary();\r\n  });\r\n\r\n\r\n  \/* =========================================================\r\n     CLOSE MODAL\r\n     ========================================================= *\/\r\n\r\n  closeOrder.addEventListener(\"click\",closeModal);\r\n\r\n  orderOverlay.addEventListener(\"click\",function(event){\r\n    if(event.target === orderOverlay){\r\n      closeModal();\r\n    }\r\n  });\r\n\r\n\r\n  function closeModal(){\r\n    orderOverlay.classList.remove(\"open\");\r\n    document.body.style.overflow = \"\";\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     STEP SYSTEM\r\n     ========================================================= *\/\r\n\r\n  function showStep(stepNumber){\r\n    steps.forEach(function(step){\r\n      step.classList.remove(\"active\");\r\n      if(Number(step.dataset.step) === stepNumber){\r\n        step.classList.add(\"active\");\r\n      }\r\n    });\r\n\r\n    progressBar.style.width = (stepNumber \/ 2 * 100) + \"%\";\r\n    stepText.textContent = \"Step \" + stepNumber + \" of 2\";\r\n\r\n    const modal = document.querySelector(\".ztm-order-modal\");\r\n    if(modal){\r\n      modal.scrollTop = 0;\r\n    }\r\n  }\r\n\r\n\r\n  document.querySelectorAll(\".ztm-next-btn\").forEach(function(button){\r\n    button.addEventListener(\"click\",function(){\r\n      const currentStep = button.closest(\".ztm-form-step\");\r\n      const fields = currentStep.querySelectorAll(\r\n        \"input[required], textarea[required], select[required]\"\r\n      );\r\n\r\n      let valid = true;\r\n      fields.forEach(function(field){\r\n        if(!field.checkValidity()){\r\n          field.reportValidity();\r\n          valid = false;\r\n        }\r\n      });\r\n\r\n      if(!valid) return;\r\n      showStep(Number(button.dataset.next));\r\n    });\r\n  });\r\n\r\n\r\n  document.querySelectorAll(\".ztm-back-btn\").forEach(function(button){\r\n    button.addEventListener(\"click\",function(){\r\n      showStep(Number(button.dataset.back));\r\n    });\r\n  });\r\n\r\n\r\n  \/* =========================================================\r\n     IMAGE PREVIEW\r\n     ========================================================= *\/\r\n\r\n  imageInput.addEventListener(\"change\",function(){\r\n    const files = Array.from(imageInput.files);\r\n\r\n    if(files.length > 4){\r\n      alert(\"Please select a maximum of 4 images.\");\r\n      imageInput.value = \"\";\r\n      selectedFiles = [];\r\n      renderImages();\r\n      return;\r\n    }\r\n\r\n    selectedFiles = files;\r\n    renderImages();\r\n  });\r\n\r\n\r\n  function renderImages(){\r\n    imagePreview.innerHTML = \"\";\r\n\r\n    selectedFiles.forEach(function(file,index){\r\n      const reader = new FileReader();\r\n\r\n      reader.onload = function(event){\r\n        const wrapper = document.createElement(\"div\");\r\n        wrapper.className = \"ztm-preview-item\";\r\n\r\n        wrapper.innerHTML =\r\n          '<img decoding=\"async\" src=\"' + event.target.result + '\" alt=\"Product Image\">' +\r\n          '<button type=\"button\" class=\"ztm-preview-remove\" data-index=\"' + index + '\">\u00d7<\/button>';\r\n\r\n        imagePreview.appendChild(wrapper);\r\n\r\n        wrapper.querySelector(\".ztm-preview-remove\")\r\n          .addEventListener(\"click\",function(){\r\n            selectedFiles.splice(index,1);\r\n            renderImages();\r\n          });\r\n      };\r\n\r\n      reader.readAsDataURL(file);\r\n    });\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     SUBMIT \u2192 WHATSAPP\r\n     ========================================================= *\/\r\n\r\n  orderForm.addEventListener(\"submit\",async function(event){\r\n\r\n    event.preventDefault();\r\n    formStatus.textContent = \"\";\r\n\r\n    if(selectedFiles.length < 1){\r\n      formStatus.textContent = \"Please add at least 1 product image.\";\r\n      imageInput.focus();\r\n      return;\r\n    }\r\n\r\n    const formData = new FormData(orderForm);\r\n    let orderId = \"ZTM-\" + Date.now().toString().slice(-8); \/\/ fallback only; replaced by server ID below\r\n\r\n    let data;\r\n    let isStaticPost = false;\r\n\r\n    if(selectedCategory === \"static\" && selectedSubtype === \"static-post\"){\r\n      data = pricing[\"static-post\"];\r\n      isStaticPost = true;\r\n    } else if(selectedCategory === \"static\" && selectedSubtype === \"motion\"){\r\n      data = pricing[\"motion\"];\r\n    } else {\r\n      data = pricing[selectedCategory];\r\n    }\r\n\r\n    \/* ===== Save order to Supabase (server generates the Order ID) ===== *\/\r\n    function ztmRef(){try{var u=new URLSearchParams(location.search).get('ref');if(u){localStorage.setItem('ztm_ref',u.replace(\/[^A-Za-z0-9]\/g,'').slice(0,12));}return localStorage.getItem('ztm_ref')||'';}catch(e){return '';}}\r\n    const ZTM_SB_URL = \"https:\/\/otbsvumischupdvorusq.supabase.co\";\r\n    const ZTM_SB_KEY = \"sb_publishable_yrsEFtts8UVebfRx_Chi_w_spjcYCT-\";\r\n    const submitButton = document.getElementById(\"ztmSubmitBtn\");\r\n    if(submitButton) submitButton.disabled = true;\r\n\r\n    const planForSave = (selectedMode === \"create-run\") ? managementPlans[selectedPlan] : null;\r\n    const ztmTotal = selectedPrice + (planForSave ? planForSave.price : 0);\r\n\r\n    try{\r\n      const controller = new AbortController();\r\n      const timer = setTimeout(function(){ controller.abort(); }, 8000);\r\n      const res = await fetch(ZTM_SB_URL + \"\/rest\/v1\/rpc\/submit_order\",{\r\n        method:\"POST\",\r\n        headers:{ \"apikey\": ZTM_SB_KEY, \"Content-Type\":\"application\/json\" },\r\n        body: JSON.stringify({ p:{\r\n          service:\"ad_agency\",\r\n          name: formData.get(\"clientName\"),\r\n          whatsapp: formData.get(\"whatsappNumber\"),\r\n          email: formData.get(\"email\") || null,\r\n          business: formData.get(\"brandName\"),\r\n          total: String(ztmTotal),\r\n          source: location.href,\r\n          ref: ztmRef(),\r\n          website: \"\",\r\n          details:{\r\n            brandName: formData.get(\"brandName\"),\r\n            companyName: formData.get(\"companyName\"),\r\n            websiteOrSocial: formData.get(\"website\"),\r\n            serviceMode: selectedMode,\r\n            creative: data.name,\r\n            category: selectedCategory,\r\n            subtype: selectedSubtype,\r\n            durationSeconds: isStaticPost ? null : selectedDuration,\r\n            creativeFee: selectedPrice,\r\n            objective: formData.get(\"adObjective\"),\r\n            productName: formData.get(\"productName\"),\r\n            productDescription: formData.get(\"productDescription\"),\r\n            requirements: formData.get(\"requirements\"),\r\n            imagesSelected: selectedFiles.length,\r\n            managementPlan: planForSave ? planForSave.name : null,\r\n            managementFee: planForSave ? planForSave.price : null,\r\n            dailyBudget: planForSave ? dailyBudget : null,\r\n            adSpend30Days: planForSave ? dailyBudget * 30 : null,\r\n            platforms: planForSave ? Object.keys(adsPlatforms).filter(function(k){ return adsPlatforms[k]; }) : null,\r\n            campaignGoal: planForSave ? selectedGoal : null\r\n          }\r\n        }}),\r\n        signal: controller.signal\r\n      });\r\n      clearTimeout(timer);\r\n      if(res.ok){\r\n        const out = await res.json();\r\n        if(out && out.order_code) orderId = out.order_code;\r\n      }\r\n    }catch(err){ \/* WhatsApp flow continues even if saving fails *\/ }\r\n\r\n    let lines = [\r\n      \"*NEW ZTM AD AGENCY ORDER*\",\r\n      \"\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\",\r\n      \"*Order ID:* \" + orderId,\r\n      \"*Client Name:* \" + (formData.get(\"clientName\") || \"\u2014\"),\r\n      \"*Brand Name:* \" + (formData.get(\"brandName\") || \"\u2014\"),\r\n      \"*Company:* \" + (formData.get(\"companyName\") || \"\u2014\"),\r\n      \"*Website \/ Social:* \" + (formData.get(\"website\") || \"\u2014\"),\r\n      \"\",\r\n      \"*SERVICE TYPE:* \" + (selectedMode === \"create-run\" ? \"Create + Run Meta Ads\" : \"Creative Production Only\"),\r\n      \"\",\r\n      \"*AD CREATIVE*\",\r\n      \"Creative: \" + data.name\r\n    ];\r\n\r\n    if(!isStaticPost){\r\n      lines.push(\"Duration: \" + selectedDuration + \" seconds\");\r\n    }\r\n\r\n    lines = lines.concat([\r\n      \"Creative Fee: \" + formatPrice(selectedPrice),\r\n      \"Objective: \" + (formData.get(\"adObjective\") || \"\u2014\"),\r\n      \"\"\r\n    ]);\r\n\r\n    if(selectedMode === \"create-run\"){\r\n      const plan = managementPlans[selectedPlan];\r\n      const adSpend30 = dailyBudget * 30;\r\n\r\n      const platformsList =\r\n        Object.keys(adsPlatforms)\r\n          .filter(function(key){ return adsPlatforms[key]; })\r\n          .map(function(key){ return key.charAt(0).toUpperCase() + key.slice(1); })\r\n          .join(\", \");\r\n\r\n      lines = lines.concat([\r\n        \"*META ADS MANAGEMENT*\",\r\n        \"Platforms: \" + (platformsList || \"\u2014\"),\r\n        \"Campaign Goal: \" + selectedGoal,\r\n        \"Management Plan: \" + plan.name + \" (\" + formatPrice(plan.price) + \"\/month)\",\r\n        \"Daily Ad Budget: Rs. \" + dailyBudget.toLocaleString(\"en-PK\") + \" \/ day\",\r\n        \"Estimated 30-Day Ad Spend: \" + formatPrice(adSpend30),\r\n        \"Note: Ad spend is billed directly by Meta.\",\r\n        \"\",\r\n        \"*TOTAL ESTIMATE*\",\r\n        \"ZTM Services: \" + formatPrice(selectedPrice + plan.price),\r\n        \"Est. Ad Spend (30d): \" + formatPrice(adSpend30),\r\n        \"\"\r\n      ]);\r\n    }\r\n\r\n    lines = lines.concat([\r\n      \"*PRODUCT \/ SERVICE*\",\r\n      \"Product: \" + (formData.get(\"productName\") || \"\u2014\"),\r\n      \"Description: \" + (formData.get(\"productDescription\") || \"\u2014\"),\r\n      \"\",\r\n      \"*REQUIREMENTS*\",\r\n      formData.get(\"requirements\") || \"No additional requirements.\",\r\n      \"\",\r\n      \"*CONTACT*\",\r\n      \"WhatsApp: \" + (formData.get(\"whatsappNumber\") || \"\u2014\"),\r\n      \"Email: \" + (formData.get(\"email\") || \"\u2014\"),\r\n      \"\",\r\n      \"Product images: \" + selectedFiles.length + \" selected\",\r\n      \"\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\",\r\n      \"Please send the product images in this WhatsApp chat after this order message.\"\r\n    ]);\r\n\r\n    const message = lines.join(\"\\n\");\r\n    const whatsappUrl = \"https:\/\/wa.me\/\" + ZTM_WHATSAPP + \"?text=\" + encodeURIComponent(message);\r\n\r\n    successOrderId.textContent = orderId;\r\n    orderForm.style.display = \"none\";\r\n    document.querySelector(\".ztm-progress\").style.display = \"none\";\r\n    successScreen.classList.add(\"show\");\r\n\r\n    const whatsappBtn = document.querySelector(\".ztm-whatsapp-btn\");\r\n    whatsappBtn.href = whatsappUrl;\r\n    whatsappBtn.target = \"_blank\";\r\n\r\n  });\r\n\r\n\r\n  \/* =========================================================\r\n     INITIALIZE\r\n     ========================================================= *\/\r\n\r\n  updatePricing();\r\n\r\n})();\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-6e4878e e-con e-atomic-element e-flexbox-base e-default-div e-15efb72 \" data-id=\"6e4878e\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"6e4878e\">\n    \t\t<div class=\"elementor-element elementor-element-a31e807 elementor-widget elementor-widget-html\" data-id=\"a31e807\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ZTM REVIEWS SLIDER WIDGET\r\nHOW TO USE: Copy this entire code into an Elementor HTML widget.\r\nHomepage: data-review-category=\"ad_agency\"\r\nAd Agency: data-review-category=\"ad_agency\"\r\nWeb Development: data-review-category=\"web_development\"\r\nApps \/ AI Tools: data-review-category=\"ai_tools\"\r\nCourses \/ Digital Products: data-review-category=\"digital_products\"\r\nZTM Overall: data-review-category=\"ztm_brand\"\r\nOnly change the data-review-category value for each page.\r\n-->\r\n<div class=\"ztm-review-widget\" data-review-category=\"all\">\r\n  <style>\r\n    .ztm-review-widget{--zg:#b6ff4a;--zbg:#080b0a;--zcard:#111713;--zborder:rgba(182,255,74,.2);--ztext:#f5f8f2;--zmuted:#a1aaa2;color:var(--ztext);background:radial-gradient(ellipse at 50% 0%,rgba(126,211,33,.09),transparent 48%),var(--zbg);font-family:Inter,system-ui,-apple-system,sans-serif;padding:20px 14px 24px;border:1px solid rgba(182,255,74,.10);border-radius:16px;overflow:hidden}\r\n    .ztm-review-widget *{box-sizing:border-box}.ztm-review-widget .zw-wrap{max-width:760px;margin:auto}.ztm-review-widget .zw-head{text-align:center;margin:0 auto 12px}.ztm-review-widget .zw-kicker{display:inline-flex;gap:8px;align-items:center;color:var(--zg);font-size:10px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;border:1px solid var(--zborder);border-radius:99px;padding:8px 12px;background:rgba(182,255,74,.04)}.ztm-review-widget .zw-kicker:before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--zg);box-shadow:0 0 10px var(--zg)}\r\n    .ztm-review-widget h2{color:#fff;font-size:clamp(25px,4vw,38px);line-height:1.15;letter-spacing:-.7px;margin:15px 0 10px;font-weight:850}.ztm-review-widget .zw-head p{color:var(--zmuted);font-size:13px;line-height:1.7;margin:0}.ztm-review-widget .zw-stats{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:17px}.ztm-review-widget .zw-stat{border:1px solid var(--zborder);border-radius:12px;padding:9px 15px;background:rgba(255,255,255,.025);font-size:11px;color:var(--zmuted)}.ztm-review-widget .zw-stat strong{font-size:17px;color:var(--zg);margin-right:5px}\r\n    .ztm-review-widget .zw-track{display:flex;gap:14px;align-items:stretch;transition:transform .55s cubic-bezier(.22,.8,.25,1);will-change:transform}.ztm-review-widget .zw-slider{overflow:hidden;padding:5px 0 10px;max-width:660px;margin:0 auto}.ztm-review-widget .zw-card{flex:0 0 100%;min-width:0;display:flex;flex-direction:column;padding:clamp(17px,3vw,24px);background:linear-gradient(145deg,#151c16,#0c100d);border:1px solid #29352a;border-radius:17px;min-height:185px;animation:zwCardIn .38s ease both}.ztm-review-widget .zw-card.zw-active{border-color:rgba(182,255,74,.42);box-shadow:0 8px 24px rgba(126,211,33,.06)}@keyframes zwCardIn{from{opacity:.55;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.ztm-review-widget .zw-cardtop{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:11px}.ztm-review-widget .zw-stars{color:var(--zg);letter-spacing:1px;font-size:13px;white-space:nowrap}.ztm-review-widget .zw-tag{font-size:9px;color:#d8ffb3;background:rgba(182,255,74,.07);border:1px solid rgba(182,255,74,.17);border-radius:6px;padding:5px 7px;line-height:1.4}.ztm-review-widget .zw-card h3{color:#fff;font-size:15px;line-height:1.45;margin:0 0 7px;overflow-wrap:anywhere}.ztm-review-widget .zw-copy{color:#c0c8bf;font-size:13px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 13px}.ztm-review-widget .zw-author{margin-top:auto;padding-top:13px;border-top:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:10px}.ztm-review-widget .zw-avatar{width:35px;height:35px;flex-shrink:0;display:grid;place-items:center;border-radius:11px;background:rgba(182,255,74,.1);border:1px solid var(--zborder);color:var(--zg);font-weight:850}.ztm-review-widget .zw-name{color:#f0f5ed;font-size:11px;font-weight:800;overflow-wrap:anywhere}.ztm-review-widget .zw-date{color:#7f897f;font-size:10px;margin-top:4px}.ztm-review-widget .zw-controls{display:flex;justify-content:center;align-items:center;gap:11px;margin:3px 0 13px}.ztm-review-widget .zw-arrow{width:33px;height:33px;border-radius:50%;border:1px solid #344134;background:#111711;color:var(--zg);font-size:19px;cursor:pointer;transition:background .2s,transform .2s}.ztm-review-widget .zw-arrow:active{transform:scale(.93)}.ztm-review-widget .zw-arrow:hover{background:var(--zg);color:#10160b}.ztm-review-widget .zw-dots{display:flex;gap:6px;align-items:center}.ztm-review-widget .zw-dot{width:7px;height:7px;padding:0;border:0;border-radius:99px;background:#485347;cursor:pointer}.ztm-review-widget .zw-dot.active{width:20px;background:var(--zg)}\r\n    .ztm-review-widget .zw-empty,.ztm-review-widget .zw-status{border:1px dashed #344134;border-radius:15px;padding:24px 15px;text-align:center;color:var(--zmuted);font-size:13px;line-height:1.8}.ztm-review-widget .zw-empty strong{display:block;color:#f0f5ed;font-size:16px;margin-bottom:5px}.ztm-review-widget .zw-actions{text-align:center;margin-top:8px}.ztm-review-widget .zw-btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:38px;padding:10px 15px;border:1px solid var(--zg);border-radius:10px;background:var(--zg);color:#10160b;font-size:12px;font-weight:800;cursor:pointer;text-decoration:none;transition:transform .2s,background .2s}.ztm-review-widget .zw-btn:hover{background:#c8ff78;color:#10160b;transform:translateY(-1px)}.ztm-review-widget .zw-btn.secondary{background:transparent;color:var(--zg);border-color:var(--zborder)}.ztm-review-widget .zw-form-panel{max-width:760px;margin:24px auto 0;padding:clamp(17px,3vw,27px);background:linear-gradient(145deg,#121813,#0b0e0c);border:1px solid var(--zborder);border-radius:18px;scroll-margin-top:30px;animation:zwReveal .25s ease}.ztm-review-widget .zw-form-panel[hidden]{display:none!important}@keyframes zwReveal{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}.ztm-review-widget .zw-form-title{text-align:center;font-size:22px;margin:0 0 6px;color:#fff}.ztm-review-widget .zw-form-intro{text-align:center;color:var(--zmuted);font-size:12px;line-height:1.6;margin:0 0 20px}.ztm-review-widget .zw-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.ztm-review-widget .zw-field{min-width:0}.ztm-review-widget .zw-full{grid-column:1\/-1}.ztm-review-widget label{display:block;color:#e5ece4;font-size:11px;font-weight:750;margin-bottom:7px}.ztm-review-widget input,.ztm-review-widget select,.ztm-review-widget textarea{display:block;width:100%;max-width:100%;background:#080c09;border:1px solid #29332b;color:#f5f8f2;border-radius:10px;padding:12px;font:inherit;font-size:13px;outline:none}.ztm-review-widget input:focus,.ztm-review-widget select:focus,.ztm-review-widget textarea:focus{border-color:var(--zg);box-shadow:0 0 0 3px rgba(182,255,74,.07)}.ztm-review-widget textarea{min-height:105px;resize:vertical}.ztm-review-widget .zw-rating{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.ztm-review-widget .zw-starbtn{border:0;background:none;color:#465044;padding:0;font-size:30px;line-height:1;cursor:pointer}.ztm-review-widget .zw-starbtn.active{color:var(--zg)}.ztm-review-widget .zw-ratinglabel{font-size:11px;color:var(--zmuted);margin-left:4px}.ztm-review-widget .zw-formnote{color:#879187;font-size:10px;line-height:1.7;margin:11px 0 0}.ztm-review-widget .zw-message{display:none;margin-top:12px;padding:11px;border-radius:10px;font-size:12px;line-height:1.6}.ztm-review-widget .zw-message.success{display:block;color:#d8ffb3;background:rgba(126,211,33,.09);border:1px solid rgba(126,211,33,.25)}.ztm-review-widget .zw-message.error{display:block;color:#ffb8b8;background:rgba(255,70,70,.08);border:1px solid rgba(255,70,70,.2)}.ztm-review-widget .zw-loading{padding:25px;text-align:center;color:var(--zmuted);font-size:12px}\r\n    @media(max-width:580px){.ztm-review-widget{padding:17px 10px 20px;border-radius:13px}.ztm-review-widget .zw-card{flex-basis:100%;padding:16px;min-height:170px}.ztm-review-widget .zw-track{gap:12px}.ztm-review-widget .zw-grid{grid-template-columns:1fr}.ztm-review-widget .zw-full{grid-column:auto}.ztm-review-widget .zw-form-panel{padding:17px 13px}}\r\n  <\/style>\r\n  <div class=\"zw-wrap\">\r\n    <header class=\"zw-head\">\r\n      <h2 style=\"font-size:clamp(22px,3vw,29px);letter-spacing:-.5px;margin:0;color:#fff;font-weight:800\">Reviews<\/h2>\r\n    <\/header>\r\n    <div class=\"zw-results\"><div class=\"zw-loading\">Loading ZTM reviews\u2026<\/div><\/div>\r\n    <div class=\"zw-controls\" hidden><button type=\"button\" class=\"zw-arrow zw-prev\" aria-label=\"Previous review\">\u2039<\/button><div class=\"zw-dots\"><\/div><button type=\"button\" class=\"zw-arrow zw-next\" aria-label=\"Next review\">\u203a<\/button><\/div>\r\n    <div class=\"zw-actions\"><button type=\"button\" class=\"zw-btn zw-open\">\u270d Submit Your Review<\/button><\/div>\r\n    <section class=\"zw-form-panel\" hidden>\r\n      <h3 class=\"zw-form-title\">Share Your Experience<\/h3><p class=\"zw-form-intro\">Please share an honest review based on your own experience.<\/p>\r\n      <form class=\"zw-form\"><div class=\"zw-grid\">\r\n        <div class=\"zw-field\"><label>Your Name *<\/label><input class=\"zw-name\" name=\"name\" type=\"text\" minlength=\"2\" maxlength=\"100\" autocomplete=\"name\" required placeholder=\"Enter your name\"><\/div>\r\n        <div class=\"zw-field\"><label>Email <span style=\"color:#879187;font-weight:400\">(Optional)<\/span><\/label><input class=\"zw-email\" name=\"email\" type=\"email\" maxlength=\"254\" autocomplete=\"email\" placeholder=\"you@example.com\"><\/div>\r\n        <div class=\"zw-field zw-full\"><label>What are you reviewing? *<\/label><select class=\"zw-service\" name=\"review_for\" required><option value=\"general\">ZTM \u2014 General Experience<\/option><option value=\"ad_agency\">Ad Agency & Creative Services<\/option><option value=\"web_development\">Web Development<\/option><option value=\"ai_tools\">Apps & AI Tools<\/option><option value=\"digital_products\">Digital Products & Courses<\/option><option value=\"ztm_brand\">ZTM Overall<\/option><\/select><\/div>\r\n        <div class=\"zw-field zw-full\"><label>Your Rating *<\/label><div class=\"zw-rating\"><button type=\"button\" class=\"zw-starbtn\" data-rating=\"1\" aria-label=\"1 star\">\u2605<\/button><button type=\"button\" class=\"zw-starbtn\" data-rating=\"2\" aria-label=\"2 stars\">\u2605<\/button><button type=\"button\" class=\"zw-starbtn\" data-rating=\"3\" aria-label=\"3 stars\">\u2605<\/button><button type=\"button\" class=\"zw-starbtn\" data-rating=\"4\" aria-label=\"4 stars\">\u2605<\/button><button type=\"button\" class=\"zw-starbtn\" data-rating=\"5\" aria-label=\"5 stars\">\u2605<\/button><span class=\"zw-ratinglabel\">Select your rating<\/span><\/div><input class=\"zw-rating-value\" type=\"hidden\" value=\"0\"><\/div>\r\n        <div class=\"zw-field zw-full\"><label>Review Title (Optional)<\/label><input class=\"zw-title\" name=\"review_title\" type=\"text\" maxlength=\"160\" placeholder=\"Summarize your experience\"><\/div>\r\n        <div class=\"zw-field zw-full\"><label>Your Review *<\/label><textarea class=\"zw-text\" name=\"review_text\" minlength=\"10\" maxlength=\"3000\" required placeholder=\"Tell us about your genuine experience...\"><\/textarea><\/div>\r\n        <div class=\"zw-field zw-full\"><button type=\"submit\" class=\"zw-btn zw-submit\">Submit Review \u2192<\/button><button type=\"button\" class=\"zw-btn secondary zw-close\" style=\"margin-left:7px\">Close<\/button><p class=\"zw-formnote\">Your email is optional and will not be displayed publicly. Please do not include private or sensitive information.<\/p><div class=\"zw-message\" role=\"status\" aria-live=\"polite\"><\/div><\/div>\r\n      <\/div><\/form>\r\n    <\/section>\r\n  <\/div>\r\n  <script>\r\n  (()=>{\r\n    const root=document.currentScript&&document.currentScript.closest('.ztm-review-widget');\r\n    if(!root||root.dataset.ready==='1')return;root.dataset.ready='1';\r\n    const URL='https:\/\/zwwmulpydkmfqimgpttw.supabase.co';\r\n    const KEY='sb_publishable_KhUUCbcOtXDTzIywg_Nl3Q_QJQRFVM8';\r\n    const names={ad_agency:'Ad Agency',web_development:'Web Development',ai_tools:'Apps & AI Tools',digital_products:'Products & Courses',ztm_brand:'ZTM Overall',general:'General Experience'};\r\n    const category=(root.dataset.reviewCategory||'all').trim();\r\n    const $=s=>root.querySelector(s);let client=null,reviews=[],index=0,rating=0,touchX=0,touchY=0;\r\n    const esc=v=>String(v??'').replace(\/[&<>\"']\/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#39;'}[c]));\r\n    const results=$('.zw-results'),controls=$('.zw-controls'),form=$('.zw-form'),panel=$('.zw-form-panel'),open=$('.zw-open'),service=$('.zw-service'),msg=$('.zw-message');\r\n    if(names[category]){service.value=category;service.disabled=true;service.style.opacity='.85';}\r\n    function setRating(n){rating=n;root.querySelectorAll('.zw-starbtn').forEach(b=>{b.classList.toggle('active',+b.dataset.rating<=n);b.setAttribute('aria-pressed',String(+b.dataset.rating===n))});$('.zw-ratinglabel').textContent=n?`${n} out of 5 stars`:'Select your rating'}\r\n    root.querySelectorAll('.zw-starbtn').forEach(b=>b.addEventListener('click',()=>setRating(+b.dataset.rating)));\r\n    function date(v){if(!v)return '';const d=new Date(v);return Number.isNaN(d.getTime())?'':d.toLocaleDateString(undefined,{year:'numeric',month:'short',day:'numeric'})}\r\n    function visible(){return category==='all'?reviews:reviews.filter(r=>r.review_for===category)}\r\n    function render(){const list=visible();index=Math.max(0,Math.min(index,Math.max(0,list.length-1)));if(!list.length){controls.hidden=true;results.innerHTML='<div class=\"zw-empty\"><strong>No reviews here yet.<\/strong>Be the first to share your genuine experience.<\/div>';return}\r\n      results.innerHTML='<div class=\"zw-slider\"><div class=\"zw-track\">'+list.map((r,i)=>{const stars='\u2605'.repeat(Math.max(0,Math.min(5,+r.rating)))+'\u2606'.repeat(5-Math.max(0,Math.min(5,+r.rating)));return `<article class=\"zw-card\" data-card=\"${i}\"><div class=\"zw-cardtop\"><span class=\"zw-stars\" aria-label=\"${+r.rating} out of 5 stars\">${stars}<\/span><span class=\"zw-tag\">${esc(names[r.review_for]||'ZTM')}<\/span><\/div><h3>${esc(r.review_title||'Customer Experience')}<\/h3><p class=\"zw-copy\">${esc(r.review_text)}<\/p><div class=\"zw-author\"><div class=\"zw-avatar\">${esc((r.name||'Z').trim().charAt(0).toUpperCase())}<\/div><div><div class=\"zw-name\">${esc(r.name)}<\/div><div class=\"zw-date\">${esc(date(r.created_at))}<\/div><\/div><\/div><\/article>`}).join('')+'<\/div><\/div>';\r\n      controls.hidden=list.length<2;$('.zw-dots').innerHTML=list.map((_,i)=>`<button type=\"button\" class=\"zw-dot ${i===index?'active':''}\" data-index=\"${i}\" aria-label=\"Go to review ${i+1}\"><\/button>`).join('');$('.zw-dots').querySelectorAll('button').forEach(b=>b.addEventListener('click',()=>{index=+b.dataset.index;update()}));update();const slider=$('.zw-slider');slider.addEventListener('touchstart',e=>{if(e.touches.length){touchX=e.touches[0].clientX;touchY=e.touches[0].clientY}},{passive:true});slider.addEventListener('touchend',e=>{if(!e.changedTouches.length)return;const dx=e.changedTouches[0].clientX-touchX,dy=e.changedTouches[0].clientY-touchY;if(Math.abs(dx)>45&&Math.abs(dx)>Math.abs(dy))move(dx<0?1:-1)},{passive:true})}\r\n    function update(){const track=$('.zw-track');if(!track)return;const cards=[...track.children],card=cards[index];if(!card)return;const target=card.offsetLeft+card.offsetWidth\/2-track.parentElement.clientWidth\/2,max=Math.max(0,track.scrollWidth-track.parentElement.clientWidth);track.style.transform=`translateX(${-Math.max(0,Math.min(target,max))}px)`;cards.forEach((c,i)=>c.classList.toggle('zw-active',i===index));$('.zw-dots').querySelectorAll('button').forEach((b,i)=>b.classList.toggle('active',i===index))}\r\n    function move(d){const list=visible();if(list.length<2)return;index=(index+d+list.length)%list.length;update()}\r\n    $('.zw-prev').addEventListener('click',()=>move(-1));$('.zw-next').addEventListener('click',()=>move(1));window.addEventListener('resize',()=>{clearTimeout(root._zwResize);root._zwResize=setTimeout(update,150)});\r\n    function showForm(){panel.hidden=false;open.textContent='\u2715 Close Review Form';open.setAttribute('aria-expanded','true');if(names[category])service.value=category;panel.scrollIntoView({behavior:'smooth',block:'start'});setTimeout(()=>$('.zw-form .zw-name').focus({preventScroll:true}),350)}\r\n    function hideForm(){panel.hidden=true;open.textContent='\u270d Submit Your Review';open.setAttribute('aria-expanded','false')}\r\n    open.setAttribute('aria-expanded','false');open.addEventListener('click',()=>panel.hidden?showForm():hideForm());$('.zw-close').addEventListener('click',hideForm);\r\n    async function load(){if(!client)return;let q=client.from('reviews').select('id,name,rating,review_title,review_text,review_for,created_at').eq('status','approved').order('created_at',{ascending:false}).limit(300);if(category!=='all'&&names[category])q=q.eq('review_for',category);const {data,error}=await q;if(error){console.error('ZTM slider load error:',error);if(!reviews.length)results.innerHTML='<div class=\"zw-empty\"><strong>Reviews could not be loaded.<\/strong>Please refresh the page in a moment.<\/div>';return}reviews=data||[];render()}\r\n    form.addEventListener('submit',async e=>{e.preventDefault();msg.className='zw-message';msg.textContent='';if(!client){msg.textContent='Connection is not ready. Please refresh the page.';msg.className='zw-message error';return}const name=$('.zw-form .zw-name').value.trim(),email=$('.zw-email').value.trim(),text=$('.zw-text').value.trim(),title=$('.zw-title').value.trim(),serviceValue=category!=='all'&&names[category]?category:service.value;if(rating<1||rating>5){msg.textContent='Please select a star rating first.';msg.className='zw-message error';return}if(name.length<2||text.length<10){msg.textContent='Enter your name and a review of at least 10 characters.';msg.className='zw-message error';return}if(email&&!\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email)){msg.textContent='Enter a valid email address or leave it blank.';msg.className='zw-message error';return}const submit=$('.zw-submit');submit.disabled=true;submit.textContent='Submitting\u2026';try{const {error}=await client.from('reviews').insert({name,email:email||null,review_for:serviceValue,rating,review_title:title||null,review_text:text,status:'approved'});if(error)throw error;form.reset();setRating(0);if(names[category])service.value=category;msg.textContent='Thank you! Your review has been published.';msg.className='zw-message success';await load()}catch(err){console.error('ZTM review submit error:',err);msg.textContent='Could not submit: '+(err&&err.message?err.message:'Unknown error')+' Please check Supabase table permissions\/policies.';msg.className='zw-message error'}finally{submit.disabled=false;submit.textContent='Submit Review \u2192'}});\r\n    async function start(){try{if(!window.supabase){await new Promise((resolve,reject)=>{const s=document.createElement('script');s.src='https:\/\/cdn.jsdelivr.net\/npm\/@supabase\/supabase-js@2';s.onload=resolve;s.onerror=()=>reject(new Error('Supabase client failed to load'));document.head.appendChild(s)})}client=window.supabase.createClient(URL,KEY);await load();setInterval(load,20000)}catch(e){console.error('ZTM slider connection error:',e);results.innerHTML='<div class=\"zw-empty\"><strong>Could not connect to ZTM Reviews.<\/strong>Please refresh the page later.<\/div>'}}\r\n    start();\r\n  })();\r\n  <\/script>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-15febc0 e-con e-atomic-element e-flexbox-base e-default-div e-ca64eec \" data-id=\"15febc0\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"15febc0\">\n    \t\t<div class=\"elementor-element elementor-element-893171e elementor-widget elementor-widget-html\" data-id=\"893171e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"ztm-how-section\">\r\n\r\n  <div class=\"ztm-how-container\">\r\n\r\n    <!-- HEADER -->\r\n    <div class=\"ztm-how-header\">\r\n\r\n      <div class=\"ztm-how-eyebrow\">\r\n        <span class=\"ztm-how-dot\"><\/span>\r\n        HOW IT WORKS\r\n      <\/div>\r\n\r\n      <h2>\r\n        From Your Idea\r\n        <span>To Final Creative.<\/span>\r\n      <\/h2>\r\n\r\n      <p>\r\n        Working with ZTM is simple. Start the conversation on WhatsApp,\r\n        tell us what you need, and we'll guide you through the rest.\r\n      <\/p>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- PROCESS -->\r\n    <div class=\"ztm-process\">\r\n\r\n\r\n      <!-- STEP 01 -->\r\n      <div class=\"ztm-process-card\">\r\n\r\n        <div class=\"ztm-step-head\">\r\n          <div class=\"ztm-step-icon\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n              <path d=\"M20 11.5C20 15.64 16.42 19 12 19C10.55 19 9.19 18.63 8.02 17.98L4 19L5.28 15.5C4.47 14.36 4 12.98 4 11.5C4 7.36 7.58 4 12 4C16.42 4 20 7.36 20 11.5Z\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"1.8\"\r\n                stroke-linejoin=\"round\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n\r\n          <span>01<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"ztm-step-label\">START THE CONVERSATION<\/div>\r\n\r\n        <h3>Talk to Us on WhatsApp<\/h3>\r\n\r\n        <p>\r\n          Tell us about your brand, product, service and the type of creative\r\n          you need. You can openly discuss your ideas and requirements with our team.\r\n        <\/p>\r\n\r\n        <div class=\"ztm-step-note\">\r\n          <span><\/span>\r\n          Direct communication\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- CONNECTOR -->\r\n      <div class=\"ztm-process-line\"><\/div>\r\n\r\n\r\n      <!-- STEP 02 -->\r\n      <div class=\"ztm-process-card\">\r\n\r\n        <div class=\"ztm-step-head\">\r\n          <div class=\"ztm-step-icon\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n              <path d=\"M5 5.5C5 4.67 5.67 4 6.5 4H17.5C18.33 4 19 4.67 19 5.5V18.5C19 19.33 18.33 20 17.5 20H6.5C5.67 20 5 19.33 5 18.5V5.5Z\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"1.8\"\/>\r\n              <path d=\"M8 8H16M8 11.5H16M8 15H13\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"1.8\"\r\n                stroke-linecap=\"round\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n\r\n          <span>02<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"ztm-step-label\">UNDERSTAND YOUR NEEDS<\/div>\r\n\r\n        <h3>We Plan Your Project<\/h3>\r\n\r\n        <p>\r\n          Once we understand what you need, we'll discuss the creative direction,\r\n          deliverables, content requirements and the best approach for your project.\r\n        <\/p>\r\n\r\n        <div class=\"ztm-step-note\">\r\n          <span><\/span>\r\n          Clear project planning\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- CONNECTOR -->\r\n      <div class=\"ztm-process-line\"><\/div>\r\n\r\n\r\n      <!-- STEP 03 -->\r\n      <div class=\"ztm-process-card\">\r\n\r\n        <div class=\"ztm-step-head\">\r\n          <div class=\"ztm-step-icon\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n              <path d=\"M7 4H17C18.1 4 19 4.9 19 6V18C19 19.1 18.1 20 17 20H7C5.9 20 5 19.1 5 18V6C5 4.9 5.9 4 7 4Z\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"1.8\"\/>\r\n              <path d=\"M8.5 8.5H15.5M8.5 12H15.5M8.5 15.5H12.5\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"1.8\"\r\n                stroke-linecap=\"round\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n\r\n          <span>03<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"ztm-step-label\">PROJECT CONFIRMATION<\/div>\r\n\r\n        <h3>We Build Your Creative<\/h3>\r\n\r\n        <p>\r\n          After the project is confirmed, our creative team works on your\r\n          scripts, visuals, editing, motion and other agreed deliverables.\r\n        <\/p>\r\n\r\n        <div class=\"ztm-step-note\">\r\n          <span><\/span>\r\n          Creative production begins\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- CONNECTOR -->\r\n      <div class=\"ztm-process-line\"><\/div>\r\n\r\n\r\n      <!-- STEP 04 -->\r\n      <div class=\"ztm-process-card ztm-final-step\">\r\n\r\n        <div class=\"ztm-step-head\">\r\n          <div class=\"ztm-step-icon\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n              <path d=\"M5 6.5C5 5.67 5.67 5 6.5 5H17.5C18.33 5 19 5.67 19 6.5V17.5C19 18.33 18.33 19 17.5 19H6.5C5.67 19 5 18.33 5 17.5V6.5Z\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"1.8\"\/>\r\n              <path d=\"M8 14L10.5 16.5L16 10.5\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"1.8\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n\r\n          <span>04<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"ztm-step-label\">REVIEW & DELIVERY<\/div>\r\n\r\n        <h3>Review. Refine. Deliver.<\/h3>\r\n\r\n        <p>\r\n          Your completed creatives are shared for review. After the agreed\r\n          revisions, we finalize the project and deliver your ready-to-use assets.\r\n        <\/p>\r\n\r\n        <div class=\"ztm-step-note\">\r\n          <span><\/span>\r\n          Ready for your platforms\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- BOTTOM CTA -->\r\n    <div class=\"ztm-how-cta\">\r\n\r\n      <div class=\"ztm-cta-content\">\r\n\r\n        <div class=\"ztm-cta-mark\">\r\n          <span><\/span>\r\n          READY WHEN YOU ARE\r\n        <\/div>\r\n\r\n        <h3>\r\n          Have a project in mind?\r\n        <\/h3>\r\n\r\n        <p>\r\n          Start with a simple conversation. Tell us what you're looking for\r\n          and let's discuss how ZTM can help.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n      <a\r\n        href=\"https:\/\/wa.me\/923274893933?text=Hi%20ZTM%2C%20I%27d%20like%20to%20discuss%20a%20creative%20project.\"\r\n        class=\"ztm-how-btn\"\r\n        target=\"_blank\"\r\n        rel=\"noopener\"\r\n      >\r\n        <span>Start a Conversation<\/span>\r\n        <b>\u2197<\/b>\r\n      <\/a>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<style>\r\n\r\n\/* =========================\r\n   ZTM HOW IT WORKS\r\n========================= *\/\r\n\r\n.ztm-how-section {\r\n  width: 100%;\r\n  padding: 100px 20px;\r\n  background: #ffffff;\r\n  font-family: Arial, Helvetica, sans-serif;\r\n  overflow: hidden;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.ztm-how-section *,\r\n.ztm-how-section *::before,\r\n.ztm-how-section *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.ztm-how-container {\r\n  width: 100%;\r\n  max-width: 1180px;\r\n  margin: 0 auto;\r\n}\r\n\r\n\r\n\/* =========================\r\n   HEADER\r\n========================= *\/\r\n\r\n.ztm-how-header {\r\n  max-width: 760px;\r\n  margin: 0 auto 58px;\r\n  text-align: center;\r\n}\r\n\r\n.ztm-how-eyebrow {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 9px;\r\n  margin-bottom: 17px;\r\n  color: #111111;\r\n  font-size: 11px;\r\n  font-weight: 800;\r\n  letter-spacing: 2px;\r\n}\r\n\r\n.ztm-how-dot {\r\n  width: 8px;\r\n  height: 8px;\r\n  border-radius: 50%;\r\n  background: #8EF012;\r\n  box-shadow: 0 0 12px rgba(142,240,18,0.55);\r\n}\r\n\r\n.ztm-how-header h2 {\r\n  margin: 0 0 18px;\r\n  color: #111111;\r\n  font-size: 44px;\r\n  line-height: 1.14;\r\n  font-weight: 800;\r\n  letter-spacing: -1.2px;\r\n}\r\n\r\n.ztm-how-header h2 span {\r\n  display: block;\r\n  color: #05BFF9;\r\n}\r\n\r\n.ztm-how-header p {\r\n  max-width: 680px;\r\n  margin: 0 auto;\r\n  color: #666666;\r\n  font-size: 15px;\r\n  line-height: 1.75;\r\n}\r\n\r\n\r\n\/* =========================\r\n   PROCESS GRID\r\n========================= *\/\r\n\r\n.ztm-process {\r\n  display: grid;\r\n  grid-template-columns: 1fr 35px 1fr 35px 1fr 35px 1fr;\r\n  align-items: stretch;\r\n  gap: 0;\r\n}\r\n\r\n\r\n\/* =========================\r\n   PROCESS CARD\r\n========================= *\/\r\n\r\n.ztm-process-card {\r\n  position: relative;\r\n  min-height: 360px;\r\n  padding: 28px 25px;\r\n  background: #ffffff;\r\n  border: 1px solid #e6e6e6;\r\n  border-radius: 18px;\r\n  box-shadow: 0 10px 32px rgba(0,0,0,0.045);\r\n  overflow: hidden;\r\n  transition: transform 0.3s ease,\r\n              border-color 0.3s ease,\r\n              box-shadow 0.3s ease;\r\n}\r\n\r\n.ztm-process-card:hover {\r\n  transform: translateY(-6px);\r\n  border-color: rgba(5,191,249,0.45);\r\n  box-shadow: 0 18px 40px rgba(0,0,0,0.08);\r\n}\r\n\r\n\r\n\/* TOP GREEN ACCENT *\/\r\n\r\n.ztm-process-card::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 0;\r\n  left: 25px;\r\n  right: 25px;\r\n  height: 3px;\r\n  border-radius: 0 0 5px 5px;\r\n  background: linear-gradient(\r\n    90deg,\r\n    #8EF012,\r\n    #05BFF9\r\n  );\r\n  opacity: 0.8;\r\n}\r\n\r\n\r\n\/* FINAL STEP *\/\r\n\r\n.ztm-final-step {\r\n  border-color: rgba(142,240,18,0.45);\r\n}\r\n\r\n.ztm-final-step:hover {\r\n  border-color: #8EF012;\r\n}\r\n\r\n\r\n\/* =========================\r\n   STEP HEAD\r\n========================= *\/\r\n\r\n.ztm-step-head {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  justify-content: space-between;\r\n  margin-bottom: 27px;\r\n}\r\n\r\n.ztm-step-head > span {\r\n  color: #d1d1d1;\r\n  font-size: 12px;\r\n  font-weight: 800;\r\n  letter-spacing: 1px;\r\n}\r\n\r\n\r\n\/* ICON *\/\r\n\r\n.ztm-step-icon {\r\n  width: 55px;\r\n  height: 55px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: 14px;\r\n  color: #05BFF9;\r\n  background: rgba(5,191,249,0.08);\r\n  border: 1px solid rgba(5,191,249,0.14);\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n.ztm-process-card:hover .ztm-step-icon {\r\n  color: #111111;\r\n  background: #8EF012;\r\n  border-color: #8EF012;\r\n  transform: scale(1.04);\r\n}\r\n\r\n.ztm-step-icon svg {\r\n  width: 26px;\r\n  height: 26px;\r\n}\r\n\r\n\r\n\/* =========================\r\n   TEXT\r\n========================= *\/\r\n\r\n.ztm-step-label {\r\n  margin-bottom: 9px;\r\n  color: #05BFF9;\r\n  font-size: 9px;\r\n  font-weight: 800;\r\n  letter-spacing: 1.5px;\r\n}\r\n\r\n.ztm-process-card h3 {\r\n  margin: 0 0 14px;\r\n  color: #111111;\r\n  font-size: 20px;\r\n  line-height: 1.3;\r\n  font-weight: 800;\r\n}\r\n\r\n.ztm-process-card p {\r\n  margin: 0;\r\n  color: #666666;\r\n  font-size: 13px;\r\n  line-height: 1.75;\r\n}\r\n\r\n\r\n\/* STEP NOTE *\/\r\n\r\n.ztm-step-note {\r\n  position: absolute;\r\n  left: 25px;\r\n  right: 25px;\r\n  bottom: 24px;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding-top: 17px;\r\n  border-top: 1px solid #eeeeee;\r\n  color: #555555;\r\n  font-size: 10px;\r\n  font-weight: 700;\r\n}\r\n\r\n.ztm-step-note span {\r\n  width: 6px;\r\n  height: 6px;\r\n  flex-shrink: 0;\r\n  border-radius: 50%;\r\n  background: #8EF012;\r\n  box-shadow: 0 0 7px rgba(142,240,18,0.45);\r\n}\r\n\r\n\r\n\/* =========================\r\n   CONNECTORS\r\n========================= *\/\r\n\r\n.ztm-process-line {\r\n  position: relative;\r\n  height: 1px;\r\n  align-self: center;\r\n  background: linear-gradient(\r\n    90deg,\r\n    rgba(5,191,249,0.15),\r\n    rgba(142,240,18,0.55),\r\n    rgba(5,191,249,0.15)\r\n  );\r\n}\r\n\r\n.ztm-process-line::after {\r\n  content: \"\u203a\";\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -55%);\r\n  color: #05BFF9;\r\n  font-size: 18px;\r\n  font-weight: 300;\r\n}\r\n\r\n\r\n\/* =========================\r\n   CTA\r\n========================= *\/\r\n\r\n.ztm-how-cta {\r\n  margin-top: 28px;\r\n  padding: 28px 30px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 30px;\r\n  border-radius: 18px;\r\n  background: #111111;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n.ztm-how-cta::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  width: 260px;\r\n  height: 260px;\r\n  right: -100px;\r\n  top: -130px;\r\n  border-radius: 50%;\r\n  border: 1px solid rgba(5,191,249,0.18);\r\n  box-shadow:\r\n    0 0 0 25px rgba(142,240,18,0.025),\r\n    0 0 0 50px rgba(5,191,249,0.02);\r\n  pointer-events: none;\r\n}\r\n\r\n.ztm-cta-content {\r\n  position: relative;\r\n  z-index: 2;\r\n}\r\n\r\n.ztm-cta-mark {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  margin-bottom: 8px;\r\n  color: #8EF012;\r\n  font-size: 9px;\r\n  font-weight: 800;\r\n  letter-spacing: 1.7px;\r\n}\r\n\r\n.ztm-cta-mark span {\r\n  width: 6px;\r\n  height: 6px;\r\n  border-radius: 50%;\r\n  background: #8EF012;\r\n  box-shadow: 0 0 8px rgba(142,240,18,0.55);\r\n}\r\n\r\n.ztm-cta-content h3 {\r\n  margin: 0 0 6px;\r\n  color: #ffffff;\r\n  font-size: 20px;\r\n  font-weight: 800;\r\n}\r\n\r\n.ztm-cta-content p {\r\n  margin: 0;\r\n  color: #aaaaaa;\r\n  font-size: 12px;\r\n  line-height: 1.6;\r\n}\r\n\r\n\r\n\/* BUTTON *\/\r\n\r\n.ztm-how-btn {\r\n  position: relative;\r\n  z-index: 2;\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 13px;\r\n  padding: 13px 17px 13px 20px;\r\n  border-radius: 9px;\r\n  background: #8EF012;\r\n  color: #111111 !important;\r\n  text-decoration: none !important;\r\n  font-size: 12px;\r\n  font-weight: 800;\r\n  transition: all 0.25s ease;\r\n}\r\n\r\n.ztm-how-btn b {\r\n  width: 25px;\r\n  height: 25px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: 50%;\r\n  background: #111111;\r\n  color: #8EF012;\r\n  font-size: 14px;\r\n}\r\n\r\n.ztm-how-btn:hover {\r\n  background: #05BFF9;\r\n  transform: translateY(-2px);\r\n}\r\n\r\n.ztm-how-btn:hover b {\r\n  color: #05BFF9;\r\n}\r\n\r\n\r\n\/* =========================\r\n   TABLET\r\n========================= *\/\r\n\r\n@media (max-width: 1050px) {\r\n\r\n  .ztm-process {\r\n    grid-template-columns: 1fr 25px 1fr;\r\n    gap: 20px 0;\r\n  }\r\n\r\n  .ztm-process-line {\r\n    display: none;\r\n  }\r\n\r\n  .ztm-process-card {\r\n    min-height: 330px;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================\r\n   MOBILE\r\n========================= *\/\r\n\r\n@media (max-width: 700px) {\r\n\r\n  .ztm-how-section {\r\n    padding: 65px 15px;\r\n  }\r\n\r\n  .ztm-how-header {\r\n    margin-bottom: 38px;\r\n  }\r\n\r\n  .ztm-how-header h2 {\r\n    font-size: 31px;\r\n    letter-spacing: -0.7px;\r\n  }\r\n\r\n  .ztm-how-header p {\r\n    font-size: 14px;\r\n    line-height: 1.65;\r\n  }\r\n\r\n  .ztm-process {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 14px;\r\n  }\r\n\r\n  .ztm-process-card {\r\n    min-height: 0;\r\n    padding: 25px 21px 70px;\r\n    border-radius: 16px;\r\n  }\r\n\r\n  .ztm-process-card::before {\r\n    left: 21px;\r\n    right: 21px;\r\n  }\r\n\r\n  .ztm-step-head {\r\n    margin-bottom: 23px;\r\n  }\r\n\r\n  .ztm-step-icon {\r\n    width: 51px;\r\n    height: 51px;\r\n  }\r\n\r\n  .ztm-process-card h3 {\r\n    font-size: 19px;\r\n  }\r\n\r\n  .ztm-process-card p {\r\n    font-size: 13px;\r\n  }\r\n\r\n  .ztm-step-note {\r\n    left: 21px;\r\n    right: 21px;\r\n    bottom: 20px;\r\n  }\r\n\r\n  .ztm-how-cta {\r\n    margin-top: 15px;\r\n    padding: 25px 20px;\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    border-radius: 16px;\r\n  }\r\n\r\n  .ztm-how-btn {\r\n    width: 100%;\r\n    justify-content: center;\r\n  }\r\n\r\n}\r\n\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u2726 CREATIVE PRODUCTION FOR DIGITAL BRANDS Ads That Get Attention. Creatives That Get Results. We create scroll-stopping video ads and premium social creatives that help businesses look professional, build trust, and turn attention into real customers. Start Your Project \u2192 View Our Work \u2197 \u2726 Creative Strategy \u2726 Premium Production \u2726 Social-Ready Content LIVE CREATIVE [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"disabled","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_glsr_average":0,"_glsr_ranking":0,"_glsr_reviews":0,"_joinchat":[],"footnotes":""},"class_list":["post-2267","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/zenithtechmatrix.com\/index.php?rest_route=\/wp\/v2\/pages\/2267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zenithtechmatrix.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zenithtechmatrix.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zenithtechmatrix.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/zenithtechmatrix.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2267"}],"version-history":[{"count":105,"href":"https:\/\/zenithtechmatrix.com\/index.php?rest_route=\/wp\/v2\/pages\/2267\/revisions"}],"predecessor-version":[{"id":2865,"href":"https:\/\/zenithtechmatrix.com\/index.php?rest_route=\/wp\/v2\/pages\/2267\/revisions\/2865"}],"wp:attachment":[{"href":"https:\/\/zenithtechmatrix.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}