{"id":59286,"date":"2026-06-29T13:54:18","date_gmt":"2026-06-29T13:54:18","guid":{"rendered":"https:\/\/web-design-company.site\/apps\/jewelry\/?page_id=59286"},"modified":"2026-07-03T12:22:53","modified_gmt":"2026-07-03T12:22:53","slug":"virtual-try-on","status":"publish","type":"page","link":"https:\/\/web-design-company.site\/apps\/jewelry\/virtual-try-on\/","title":{"rendered":""},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Vizora Virtual Try-On App For Jewelry<\/title>\n\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700;800&amp;family=Inter:wght@400;500;600;700;800&amp;display=swap\" rel=\"stylesheet\">\n\n  <style>\n    :root {\n      \/* Palette matched to the live product page: white surface, near-black ink,\n         a single blue CTA color, thin neutral border. No cream\/gold luxury styling. *\/\n      --bg: #ffffff;\n      --surface: #ffffff;\n      --surface-light: #f7f7f7;\n      --soft: #f7f7f7;\n      --ink: #1a1a1a;\n      --muted: #6e6e6e;\n      --line: #e2e2e2;\n      --line-soft: rgba(26, 26, 26, 0.08);\n      --accent: #5433eb;\n      --accent-strong: #3f26b0;\n      --accent-pale: rgba(84, 51, 235, 0.08);\n      --accent-green: #1a1a1a;\n      --accent-green-glow: rgba(26, 26, 26, 0.04);\n      --gold-gradient: none;\n      --emerald-gradient: none;\n      --shadow-luxury: 0 18px 46px rgba(0, 0, 0, 0.08);\n      --serif: \"Poppins\", Arial, sans-serif;\n      --sans: \"Inter\", Arial, sans-serif;\n    }\n\n    * { box-sizing: border-box; }\n    html { scroll-behavior: smooth; }\n\n    body {\n      margin: 0;\n      background: var(--bg);\n      color: var(--ink);\n      font-family: var(--sans);\n      -webkit-text-size-adjust: 100%;\n    }\n\n    .kvc {\n      min-height: 100vh;\n      overflow-x: hidden;\n      background: var(--bg);\n    }\n\n    .kvc a { color: inherit; text-decoration: none; }\n    .kvc button { font: inherit; cursor: pointer; }\n\n    .wrap {\n      width: min(100% - 40px, 1240px);\n      margin: 0 auto;\n    }\n\n    .eyebrow {\n      color: var(--accent);\n      font-size: 0.72rem;\n      font-weight: 700;\n      letter-spacing: 0.14em;\n      text-transform: uppercase;\n      display: inline-block;\n    }\n\n    \/* \u2500\u2500 Buttons \u2500\u2500 *\/\n    .button,\n    .button-ghost,\n    .plan-button,\n    .copy-button {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 46px;\n      border: 1px solid var(--ink);\n      border-radius: 2px;\n      font-family: var(--sans);\n      transition: all 200ms ease;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    .button, .button-ghost {\n      padding: 0 26px;\n      font-size: 0.74rem;\n      font-weight: 700;\n      letter-spacing: 0.1em;\n      text-transform: uppercase;\n    }\n\n    .button {\n      color: #ffffff !important;\n      background: var(--ink);\n      border: none;\n    }\n\n    .button-ghost {\n      color: #ffffff !important;\n      background: var(--accent);\n      border: none;\n    }\n\n    .button:active, .button-ghost:active,\n    .plan-button:active, .copy-button:active {\n      transform: scale(0.96);\n    }\n\n    .button:hover, .button:focus, .button:active {\n      transform: translateY(-2px);\n      background: #000000;\n      color: #ffffff !important;\n    }\n    .button-ghost:hover, .button-ghost:focus, .button-ghost:active {\n      transform: translateY(-2px);\n      background: var(--accent-strong);\n      color: #ffffff !important;\n    }\n\n    .kvc button:focus-visible, .kvc a:focus-visible {\n      outline: 2px solid var(--ink);\n      outline-offset: 4px;\n    }\n\n    \/* \u2500\u2500 Hero \u2500\u2500 *\/\n    .hero {\n      padding: clamp(34px, 6vw, 72px) 0 0;\n      position: relative;\n      border-bottom: 1px solid var(--line);\n    }\n\n    .hero-layout {\n      display: grid;\n      grid-template-columns: minmax(360px, 0.52fr) minmax(440px, 0.48fr);\n      gap: clamp(34px, 5vw, 72px);\n      align-items: center;\n      min-height: calc(100svh - 96px);\n      padding-bottom: clamp(34px, 5vw, 68px);\n    }\n\n    .hero-copy { animation: enterUp 640ms ease both; }\n\n    .hero-badge {\n      display: inline-flex;\n      align-items: center;\n      gap: 12px;\n      margin-bottom: 16px;\n    }\n\n    .hero-badge .eyebrow { margin: 0; }\n\n    .hero-badge .trust-dot {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 0 14px;\n      min-height: 26px;\n      border: 1px solid var(--line);\n      background: var(--soft);\n      border-radius: 2px;\n      color: var(--ink);\n      font-size: 0.64rem;\n      font-weight: 700;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n    }\n\n    .hero h1 {\n      max-width: 640px;\n      margin: 16px 0 0;\n      font-family: var(--serif);\n      font-size: clamp(2.6rem, 4.6vw, 4.2rem);\n      font-weight: 700;\n      line-height: 1.04;\n      letter-spacing: -0.01em;\n      color: var(--ink);\n    }\n\n    .hero h1 span.italic {\n      font-style: normal;\n      font-weight: 700;\n      color: var(--ink);\n      display: inline;\n    }\n\n    .hero h1 span.gold {\n      color: var(--accent);\n      font-weight: 700;\n      display: block;\n    }\n\n    .hero h1 span.subtitle {\n      font-size: clamp(1.1rem, 2vw, 1.6rem);\n      font-family: var(--sans);\n      font-weight: 500;\n      letter-spacing: 0.1em;\n      text-transform: uppercase;\n      color: var(--muted);\n      display: block;\n      margin-top: 8px;\n    }\n\n    .hero p {\n      max-width: 500px;\n      margin: 22px 0 0;\n      color: var(--muted);\n      font-size: clamp(0.95rem, 1.3vw, 1.05rem);\n      line-height: 1.75;\n      font-weight: 400;\n    }\n\n    .actions {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 12px;\n      margin-top: 30px;\n    }\n\n    \/* \u2500\u2500 Browser Mockup Shell \u2500\u2500 *\/\n    .viewer-shell {\n      position: relative;\n      display: grid;\n      gap: 12px;\n      animation: enterUp 720ms ease 100ms both;\n    }\n\n    .viewer-frame {\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      aspect-ratio: 1.45;\n      overflow: hidden;\n      background: var(--surface);\n      border: 1px solid var(--line);\n      border-radius: 4px;\n      box-shadow: var(--shadow-luxury);\n      isolation: isolate;\n      transition: transform 0.3s ease, border-color 0.3s ease;\n    }\n\n    .viewer-frame::before { content: none; }\n\n    .viewer-frame:hover {\n      border-color: var(--ink);\n      transform: translateY(-3px);\n    }\n\n    .browser-header {\n      display: flex;\n      align-items: center;\n      padding: 12px 18px;\n      background: var(--soft);\n      border-bottom: 1px solid var(--line);\n      gap: 16px;\n      z-index: 10;\n    }\n\n    .browser-dots { display: flex; gap: 7px; }\n\n    .browser-dots .dot {\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n      display: inline-block;\n    }\n\n    .browser-dots .dot.red { background: #ff5f56; }\n    .browser-dots .dot.yellow { background: #ffbd2e; }\n    .browser-dots .dot.green { background: #27c93f; }\n\n    .browser-address {\n      flex: 1;\n      background: #ffffff;\n      border: 1px solid var(--line);\n      border-radius: 2px;\n      padding: 6px 14px;\n      font-size: 0.7rem;\n      color: var(--muted);\n      text-align: center;\n      max-width: 380px;\n      margin: 0 auto;\n      font-family: var(--sans);\n      user-select: none;\n      letter-spacing: 0.02em;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n    }\n\n    .browser-content {\n      flex: 1;\n      position: relative;\n      overflow: hidden;\n      background: #ffffff;\n      padding: 16px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .perfect-fit-img {\n      width: 100%;\n      height: 100%;\n      object-fit: contain;\n      border: 1px solid var(--line);\n      background: #ffffff;\n      border-radius: 2px;\n      transition: transform 0.5s ease;\n    }\n\n    .viewer-frame:hover .perfect-fit-img { transform: scale(1.01); }\n\n    .viewer-note {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 18px;\n      color: var(--muted);\n      font-size: 0.78rem;\n      font-weight: 500;\n      line-height: 1.45;\n    }\n\n    .viewer-note strong {\n      color: var(--ink);\n      font-size: 0.72rem;\n      letter-spacing: 0.1em;\n      text-transform: uppercase;\n      white-space: nowrap;\n    }\n\n    \/* \u2500\u2500 Markets bar \u2500\u2500 *\/\n    .markets-bar {\n      display: grid;\n      grid-template-columns: 1.1fr repeat(3, minmax(0, 1fr));\n      border-top: 1px solid var(--line);\n      border-bottom: 1px solid var(--line);\n      background: var(--soft);\n      margin-top: clamp(48px, 6vw, 72px);\n    }\n\n    .markets-bar div {\n      min-height: 100px;\n      padding: 22px 26px;\n      border-right: 1px solid var(--line);\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\n\n    .markets-bar div:last-child { border-right: 0; }\n\n    .markets-bar strong {\n      display: block;\n      margin-bottom: 6px;\n      font-size: 0.92rem;\n      font-family: var(--serif);\n      font-weight: 700;\n      color: var(--ink);\n    }\n\n    .markets-bar span {\n      display: block;\n      color: var(--muted);\n      font-size: 0.8rem;\n      line-height: 1.6;\n      font-weight: 400;\n    }\n\n    \/* \u2500\u2500 Sections \u2500\u2500 *\/\n    .section { padding: clamp(56px, 7vw, 100px) 0; }\n\n    .section-head {\n      display: grid;\n      grid-template-columns: minmax(0, 0.92fr) minmax(280px, 0.5fr);\n      gap: clamp(26px, 5vw, 70px);\n      align-items: end;\n      margin-bottom: clamp(28px, 5vw, 50px);\n    }\n\n    .section-head h2 {\n      margin: 10px 0 0;\n      font-family: var(--serif);\n      font-size: clamp(1.9rem, 3.4vw, 3rem);\n      font-weight: 700;\n      line-height: 1.08;\n      letter-spacing: -0.01em;\n      color: var(--ink);\n    }\n\n    .section-head h2 span.gradient { color: var(--accent); }\n\n    .section-head p {\n      margin: 0;\n      color: var(--muted);\n      line-height: 1.72;\n      font-size: 1rem;\n      font-weight: 400;\n    }\n\n    \/* \u2500\u2500 Features list \u2500\u2500 *\/\n    .features-bg { background: #ffffff; position: relative; }\n    .features-bg::before { content: none; }\n\n    .feature-list { display: grid; border-top: 1px solid var(--line); }\n\n    .feature-row {\n      display: grid;\n      grid-template-columns: 0.55fr 1fr auto;\n      gap: 24px;\n      align-items: center;\n      min-height: 132px;\n      padding: 28px 0;\n      border-bottom: 1px solid var(--line);\n      transition: background 200ms ease;\n    }\n\n    .feature-row:hover { background: var(--surface-light); }\n\n    .feature-row h3 {\n      margin: 0;\n      font-family: var(--serif);\n      font-size: clamp(1.4rem, 2.6vw, 2.2rem);\n      font-weight: 600;\n      line-height: 1.1;\n      color: var(--ink);\n    }\n\n    .feature-row p {\n      max-width: 540px;\n      margin: 0;\n      color: var(--muted);\n      line-height: 1.65;\n      font-weight: 400;\n    }\n\n    .feature-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }\n\n    .feature-tags span,\n    .status-pill {\n      display: inline-flex;\n      align-items: center;\n      min-height: 26px;\n      padding: 0 12px;\n      border: 1px solid var(--line);\n      border-radius: 2px;\n      color: var(--muted);\n      font-size: 0.66rem;\n      font-weight: 700;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n      background: transparent;\n    }\n\n    .feature-row .status-pill {\n      color: var(--accent);\n      border-color: rgba(84, 51, 235, 0.35);\n      background: var(--accent-pale);\n    }\n\n    .feature-action-btn {\n      min-width: 112px;\n      padding: 0 18px;\n      color: var(--ink) !important;\n      background: transparent;\n      border: 1px solid var(--ink);\n      border-radius: 2px;\n      font-size: 0.72rem;\n      font-weight: 700;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n      white-space: nowrap;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 44px;\n      transition: all 200ms ease;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    .feature-action-btn.active {\n      background: var(--accent);\n      border-color: var(--accent);\n      color: #ffffff !important;\n    }\n\n    .feature-action-btn:hover, .feature-action-btn:focus, .feature-action-btn:active {\n      transform: translateY(-2px);\n      background: var(--ink);\n      border-color: var(--ink);\n      color: #ffffff !important;\n    }\n\n    \/* \u2500\u2500 Bracelet Showcase Section \u2500\u2500 *\/\n    .bracelet-showcase { background: var(--bg); position: relative; }\n    .bracelet-showcase::after { content: none; }\n\n    .bracelet-layout-grid {\n      display: grid;\n      grid-template-columns: minmax(440px, 0.48fr) minmax(360px, 0.52fr);\n      gap: clamp(34px, 6vw, 84px);\n      align-items: center;\n    }\n\n    .bracelet-copy { display: grid; gap: 22px; }\n\n    .bracelet-title {\n      margin: 12px 0 0;\n      font-family: var(--serif);\n      font-size: clamp(1.9rem, 3.4vw, 3rem);\n      font-weight: 700;\n      line-height: 1.1;\n      letter-spacing: -0.01em;\n      color: var(--ink);\n    }\n\n    .bracelet-title span.gold { color: var(--accent); font-weight: 700; }\n\n    \/* \u2500\u2500 Config \/ Detail section \u2500\u2500 *\/\n    .config { background: var(--soft); position: relative; }\n\n    .config-layout {\n      display: grid;\n      grid-template-columns: minmax(0, 0.86fr) minmax(330px, 0.44fr);\n      gap: clamp(28px, 5vw, 68px);\n      align-items: start;\n    }\n\n    \/* Capability cards grid *\/\n    .cap-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 1px;\n      background: var(--line);\n      border: 1px solid var(--line);\n      box-shadow: none;\n    }\n\n    .cap-card {\n      background: var(--surface);\n      padding: 30px 26px;\n      min-height: 220px;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      transition: background 200ms ease;\n      position: relative;\n      overflow: hidden;\n    }\n\n    .cap-card::before { content: none; }\n    .cap-card:hover { background: var(--surface-light); }\n    .cap-card:hover::before { opacity: 0; }\n\n    .cap-card-num {\n      color: var(--accent);\n      font-size: 0.7rem;\n      font-weight: 700;\n      letter-spacing: 0.14em;\n      text-transform: uppercase;\n      margin-bottom: 16px;\n    }\n\n    .cap-card h4 {\n      margin: 0;\n      font-family: var(--serif);\n      font-size: clamp(1.15rem, 1.9vw, 1.4rem);\n      font-weight: 600;\n      line-height: 1.2;\n      color: var(--ink);\n      letter-spacing: -0.005em;\n    }\n\n    .cap-card p {\n      margin: 10px 0 0;\n      color: var(--muted);\n      font-size: 0.88rem;\n      line-height: 1.62;\n      font-weight: 400;\n    }\n\n    .config-note {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 18px;\n      color: var(--muted);\n      font-size: 0.78rem;\n      font-weight: 600;\n      line-height: 1.45;\n      margin-top: 16px;\n    }\n\n    .config-note strong {\n      color: var(--ink);\n      font-size: 0.72rem;\n      letter-spacing: 0.1em;\n      text-transform: uppercase;\n      white-space: nowrap;\n    }\n\n    .config-copy {\n      position: sticky;\n      top: 98px;\n      display: grid;\n      gap: 24px;\n      padding-top: 8px;\n    }\n\n    .config-title {\n      margin: 10px 0 0;\n      font-family: var(--serif);\n      font-size: clamp(1.8rem, 2.8vw, 2.6rem);\n      font-weight: 700;\n      line-height: 1.14;\n      letter-spacing: -0.01em;\n      color: var(--ink);\n    }\n\n    .config-title span.gold { color: var(--accent); }\n\n    .fact-list { display: grid; border-top: 1px solid var(--line); }\n\n    .fact { display: grid; gap: 7px; padding: 18px 0; border-bottom: 1px solid var(--line); }\n\n    .fact strong {\n      font-size: 0.9rem;\n      font-family: var(--serif);\n      font-weight: 700;\n      color: var(--ink);\n    }\n\n    .fact span {\n      color: var(--muted);\n      font-size: 0.88rem;\n      line-height: 1.58;\n      font-weight: 400;\n      word-break: break-word;\n    }\n\n    \/* \u2500\u2500 Platform section \u2500\u2500 *\/\n    .platform-bg { background: #ffffff; }\n\n    .platform-grid {\n      display: grid;\n      grid-template-columns: repeat(4, minmax(0, 1fr));\n      gap: 1px;\n      background: var(--line);\n      border: 1px solid var(--line);\n      box-shadow: none;\n    }\n\n    .platform-card {\n      min-height: 250px;\n      padding: 28px 24px;\n      background: var(--surface);\n      transition: background 200ms ease;\n    }\n\n    .platform-card:hover { background: var(--surface-light); }\n\n    .platform-card .card-label {\n      color: var(--accent);\n      font-size: 0.7rem;\n      font-weight: 700;\n      letter-spacing: 0.1em;\n      text-transform: uppercase;\n    }\n\n    .platform-card h3 {\n      margin: 44px 0 12px;\n      font-family: var(--serif);\n      font-size: 1.2rem;\n      font-weight: 600;\n      line-height: 1.25;\n      color: var(--ink);\n    }\n\n    .platform-card p {\n      margin: 0;\n      color: var(--muted);\n      font-size: 0.88rem;\n      line-height: 1.62;\n      font-weight: 400;\n    }\n\n    \/* \u2500\u2500 Stores \/ Clients grid \u2500\u2500 *\/\n    .stores-bg { background: var(--soft); position: relative; }\n\n    .store-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(32px, 5vw, 48px); }\n\n    .filter-btn {\n      display: inline-flex;\n      align-items: center;\n      min-height: 38px;\n      padding: 0 18px;\n      border: 1px solid var(--line);\n      border-radius: 2px;\n      background: #ffffff;\n      color: var(--muted);\n      font-size: 0.7rem;\n      font-weight: 700;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n      cursor: pointer;\n      transition: all 200ms ease;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    .filter-btn.active {\n      background: var(--ink);\n      color: #ffffff;\n      border-color: var(--ink);\n    }\n\n    @media (hover: hover) {\n      .filter-btn:not(.active):hover {\n        border-color: var(--ink);\n        color: var(--ink);\n        background: #ffffff;\n      }\n    }\n\n    .stores-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }\n\n    .store-card {\n      background: var(--surface);\n      padding: 32px 28px;\n      min-height: 180px;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      border: 1px solid var(--line);\n      border-radius: 2px;\n      box-shadow: none;\n      transition: all 250ms ease;\n    }\n\n    .store-card:hover {\n      border-color: var(--ink);\n      transform: translateY(-3px);\n    }\n\n    .store-card .store-region {\n      font-size: 0.64rem;\n      font-weight: 700;\n      letter-spacing: 0.1em;\n      text-transform: uppercase;\n      color: var(--accent);\n      margin-bottom: 10px;\n      display: block;\n    }\n\n    .store-card h4 {\n      margin: 0;\n      font-family: var(--serif);\n      font-size: clamp(1.1rem, 1.8vw, 1.4rem);\n      font-weight: 600;\n      line-height: 1.1;\n      color: var(--ink);\n    }\n\n    .store-card p.store-loc {\n      margin: 4px 0 14px;\n      color: var(--muted);\n      font-size: 0.78rem;\n      font-weight: 600;\n      letter-spacing: 0.02em;\n    }\n\n    .store-card p.store-desc {\n      margin: 0;\n      color: var(--muted);\n      font-size: 0.86rem;\n      line-height: 1.6;\n      font-weight: 400;\n    }\n\n    .store-card[data-region]:not([data-region=\"all\"]) { display: none; }\n    .store-card[data-region].visible { display: flex; }\n\n    \/* \u2500\u2500 Benchmarks \u2500\u2500 *\/\n    .bench-bg { background: var(--bg); position: relative; }\n\n    .bench-layout {\n      display: grid;\n      grid-template-columns: minmax(0, 0.68fr) minmax(340px, 0.54fr);\n      gap: clamp(34px, 6vw, 84px);\n      align-items: start;\n    }\n\n    .bench-panel {\n      display: grid;\n      gap: 0;\n      background: var(--surface);\n      border: 1px solid var(--line);\n      box-shadow: none;\n      border-radius: 4px;\n      overflow: hidden;\n    }\n\n    .bench-row {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 18px 24px;\n      border-bottom: 1px solid var(--line);\n      transition: background 200ms ease;\n    }\n\n    .bench-row:last-child { border-bottom: 0; }\n    .bench-row:hover { background: var(--surface-light); }\n\n    .bench-row .bench-num {\n      min-width: 26px;\n      font-size: 0.68rem;\n      font-weight: 700;\n      color: var(--accent);\n      letter-spacing: 0.08em;\n    }\n\n    .bench-row .bench-name { font-size: 0.92rem; font-weight: 600; color: var(--ink); flex: 1; }\n\n    .bench-row .bench-tag {\n      display: inline-flex;\n      align-items: center;\n      min-height: 24px;\n      padding: 0 10px;\n      border: 1px solid var(--line);\n      border-radius: 2px;\n      color: var(--ink);\n      background: var(--soft);\n      font-size: 0.62rem;\n      font-weight: 700;\n      letter-spacing: 0.06em;\n      text-transform: uppercase;\n    }\n\n    \/* \u2500\u2500 Stats bar \u2500\u2500 *\/\n    .stats-bar {\n      display: grid;\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n      border-top: 1px solid var(--line);\n      border-bottom: 1px solid var(--line);\n      background: var(--soft);\n      margin-top: 1px;\n    }\n\n    .stats-bar div {\n      min-height: 100px;\n      padding: 22px 26px;\n      border-right: 1px solid var(--line);\n      display: grid;\n      gap: 6px;\n      align-content: center;\n    }\n\n    .stats-bar div:last-child { border-right: 0; }\n\n    .stats-bar strong {\n      font-family: var(--serif);\n      font-size: clamp(1.8rem, 3.6vw, 2.8rem);\n      font-weight: 700;\n      color: var(--ink);\n      line-height: 1;\n      display: block;\n    }\n\n    .stats-bar span {\n      display: block;\n      color: var(--muted);\n      font-size: 0.76rem;\n      line-height: 1.4;\n      font-weight: 600;\n      letter-spacing: 0.05em;\n      text-transform: uppercase;\n    }\n\n    \/* \u2500\u2500 Final \u2500\u2500 *\/\n    .final {\n      padding: clamp(64px, 9vw, 116px) 0;\n      background: #ffffff;\n      position: relative;\n      text-align: center;\n      border-top: 1px solid var(--line);\n    }\n\n    .final::before { content: none; }\n\n    .final h2 {\n      max-width: 820px;\n      margin: 0 auto;\n      font-family: var(--serif);\n      font-size: clamp(2rem, 4.4vw, 3.6rem);\n      font-weight: 700;\n      line-height: 1.08;\n      letter-spacing: -0.01em;\n      color: var(--ink);\n    }\n\n    .final h2 span.gold { color: var(--accent); font-weight: 700; }\n\n    .final p {\n      max-width: 590px;\n      margin: 22px auto 0;\n      color: var(--muted);\n      line-height: 1.7;\n      font-size: 1rem;\n      font-weight: 400;\n    }\n\n    .final .actions { justify-content: center; }\n\n    \/* \u2500\u2500 Reveal \u2500\u2500 *\/\n    .reveal {\n      opacity: 0;\n      transform: translateY(22px);\n      transition: opacity 560ms ease, transform 560ms ease;\n    }\n\n    .reveal.visible { opacity: 1; transform: translateY(0); }\n\n    @keyframes enterUp {\n      from { opacity: 0; transform: translateY(24px); }\n      to   { opacity: 1; transform: translateY(0); }\n    }\n\n    \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n    @media (max-width: 1060px) {\n      .hero-layout,\n      .section-head,\n      .bracelet-layout-grid,\n      .config-layout,\n      .bench-layout {\n        grid-template-columns: 1fr;\n      }\n\n      .hero-layout { min-height: auto; }\n      .viewer-frame { aspect-ratio: 1.45; }\n\n      .feature-row {\n        grid-template-columns: 1fr auto;\n        gap: 16px 24px;\n      }\n\n      .feature-row > div:first-child { grid-column: 1; }\n      .feature-row > div:nth-child(2) { grid-column: 1; }\n      .feature-action-btn { grid-column: 2; grid-row: 1 \/ span 2; align-self: center; }\n\n      .config-copy { position: static; }\n      .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n      .stores-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n      .section-head { grid-template-columns: 1fr; }\n    }\n\n    @media (max-width: 660px) {\n      .wrap { width: min(100% - 24px, 1240px); }\n      .hero { padding-top: 28px; }\n\n      .hero-layout {\n        grid-template-columns: 1fr;\n        gap: 32px;\n        padding-bottom: 0;\n      }\n\n      .hero h1 { font-size: clamp(2.2rem, 9vw, 3rem); margin-top: 12px; }\n      .hero p { font-size: 0.92rem; margin-top: 18px; }\n\n      .actions {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 10px;\n      }\n\n      .button, .button-ghost { width: 100%; font-size: 0.68rem; padding: 0 14px; }\n      .viewer-frame { aspect-ratio: 1.45; }\n      .viewer-note { display: grid; gap: 6px; }\n      .section { padding: 56px 0; }\n\n      .section-head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 32px; }\n      .section-head h2 { font-size: clamp(1.9rem, 9vw, 2.4rem); line-height: 1.08; }\n\n      .feature-row {\n        grid-template-columns: 1fr;\n        gap: 12px;\n        padding: 24px 0;\n        min-height: auto;\n      }\n\n      .feature-row h3 { font-size: clamp(1.5rem, 7vw, 1.9rem); margin-top: 6px; }\n      .feature-row p { font-size: 0.86rem; }\n      .feature-action-btn {\n        width: 100%; grid-column: auto; grid-row: auto;\n        background-color: var(--ink);\n        color: #fff !important;\n      }\n\n      .cap-grid { grid-template-columns: 1fr; }\n      .cap-card { min-height: auto; padding: 24px 20px; }\n      .config-title { font-size: clamp(1.7rem, 8vw, 2.1rem); }\n      .platform-grid { grid-template-columns: 1fr; }\n      .platform-card { min-height: auto; }\n      .platform-card h3 { margin-top: 30px; font-size: 1.05rem; }\n      .stores-grid { grid-template-columns: 1fr; }\n      .bench-layout { grid-template-columns: 1fr; gap: 28px; }\n      .stats-bar { grid-template-columns: 1fr; }\n      .stats-bar div { border-right: 0; min-height: auto; border-bottom: 1px solid var(--line); }\n      .stats-bar div:last-child { border-bottom: 0; }\n      .final { padding: 64px 0; }\n      .final h2 { font-size: clamp(1.9rem, 10vw, 2.6rem); }\n      .final .actions { grid-template-columns: 1fr 1fr; }\n    }\n\n    @media (max-width: 420px) {\n      .hero h1 { font-size: 2.1rem; }\n      .actions { grid-template-columns: 1fr; }\n      .button, .button-ghost { width: 100%; }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      *, *::before, *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        scroll-behavior: auto !important;\n        transition-duration: 0.01ms !important;\n      }\n    }\n\n   \n    .products {\n      background: #ffffff;\n    }\n\n    .product-list {\n      display: grid;\n      border-top: 1px solid var(--line);\n    }\n\n    .product-row {\n      display: grid;\n      grid-template-columns: 0.55fr 1fr auto;\n      gap: 24px;\n      align-items: center;\n      min-height: 132px;\n      padding: 26px 0;\n      border-bottom: 1px solid var(--line);\n    }\n\n    .product-row h3 {\n      margin: 0;\n      font-family: var(--serif);\n      font-size: clamp(1.3rem, 2.2vw, 1.9rem);\n      font-weight: 600;\n      line-height: 1.2;\n    }\n\n    .product-row p {\n      max-width: 540px;\n      margin: 0;\n      color: var(--muted);\n      line-height: 1.62;\n    }\n\n    .product-tags {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 8px;\n      margin-top: 12px;\n    }\n\n    .product-tags span,\n    .status-pill {\n      display: inline-flex;\n      align-items: center;\n      min-height: 26px;\n      padding: 0 10px;\n      border: 1px solid var(--line);\n      border-radius: 2px;\n      color: var(--muted);\n      font-size: 0.66rem;\n      font-weight: 700;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n    }\n\n    .product-button {\n      min-width: 108px;\n      height: 40px;\n      \n      padding: 0 18px;\n      color: #ffffff;\n      background: black;\n      border-color: black;\n      font-size: 0.72rem;\n      font-weight: 700;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n      white-space: nowrap;\n    }\n     \n     .product-row.is-active .status-pill {\n      color: var(--accent);\n      border-color:var(--accent-strong);\n      background: var(--accent-pale);\n    }\n\n\n    .custom {\n      width: 350px;\n    }\n\n   \n      @media (max-width: 660px) {\n        .custom {\n          width: 383px;\n        }\n        .product-row {\n        grid-template-columns: 1fr;\n        gap: 14px;\n      }\n      }\n\n\n  <\/style>\n\n\n\n<main class=\"kvc\">\n\n  <!-- \u2500\u2500 HERO \u2500\u2500 -->\n  <section class=\"hero\" id=\"top\">\n    <div class=\"wrap hero-layout\">\n\n      <div class=\"hero-copy\">\n       \n        <h1>\n          <span class=\"italic\">Vizora Virtual<\/span>\n          <span class=\"gold\">Try-On App<\/span>\n          <span class=\"subtitle\">For Jewelry<\/span>\n        <\/h1>\n        <p>\n          Let your customers see how any ring or bracelet looks on their actual hand before they buy &#8211; with no app download needed, on any device, on any platform.\n        <\/p>\n        <div class=\"actions\">\n          <a class=\"button custom\" href=\"https:\/\/web-design-company.site\/apps\/jewelry\/vto\/\">View Demo<\/a>\n        <\/div>\n      <\/div>\n\n      <div class=\"viewer-shell\" aria-label=\"Vizora product preview\">\n        <div class=\"viewer-frame\">\n          <div class=\"browser-header\">\n            <div class=\"browser-dots\">\n              <span class=\"dot red\"><\/span>\n              <span class=\"dot yellow\"><\/span>\n              <span class=\"dot green\"><\/span>\n            <\/div>\n            <div class=\"browser-address\">https:\/\/vto.apps.keyideasglobal.com\/<\/div>\n          <\/div>\n          <div class=\"browser-content\">\n            <img decoding=\"async\" src=\"https:\/\/web-design-company.site\/apps\/kdmlite\/wp-content\/uploads\/2026\/06\/Screenshot-2026-06-23-105846.png\" alt=\"Vizora ring try-on product page preview\" class=\"perfect-fit-img\">\n          <\/div>\n        <\/div>\n        <div class=\"viewer-note\">\n          <span>Interactive browser interface preview of Vizora Virtual Try-On.<\/span>\n          <strong>No app download required<\/strong>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <!-- \u2500\u2500 FEATURES LIST \u2500\u2500 -->\n  <section class=\"section features-bg\" id=\"features\">\n    <div class=\"wrap\">\n      <div class=\"section-head reveal\">\n        <div>\n          <span class=\"eyebrow\">App capabilities<\/span>\n          <h2>Every feature your <span class=\"gradient\">store needs.<\/span><\/h2>\n        <\/div>\n        <p>\n          Every capability below ships in the Vizora app. No add-ons, no hidden tiers &#8211; your store gets the complete virtual try-on experience from day one.\n        <\/p>\n      <\/div>\n\n      <div class=\"product-list\">\n          <article class=\"product-row is-active reveal\" data-product=\"Eclipse Glow\">\n            <div>\n              <span class=\"status-pill\">VTO available<\/span>\n              <h3>Celeste Trio<\/h3>\n            <\/div>\n            <div>\n              <p>A delicate and versatile piece designed to complement your unique, personal style. Perfect for layering or wearing solo, its understated elegance makes it a stunning staple for any jewelry collection.\n\nImages and videos are presented with a 3-carat center diamond for re<\/p>\n              <div class=\"product-tags\" aria-label=\"Supported configurator options\">\n                <span>3D viewer<\/span>\n                <span>Metal<\/span>\n                <span>Shape<\/span>\n              <\/div>\n            <\/div>\n          <a href=\"https:\/\/web-design-company.site\/apps\/jewelry\/product\/celeste-trio\/\"> <button class=\"product-button btn\" type=\"button\" data-product-button=\"Eclipse Glow\">Open<\/button><\/a> \n          <\/article>\n            <article class=\"product-row is-active reveal\" data-product=\"Signature Solitaire\">\n            <div>\n              <span class=\"status-pill\">VTO available<\/span>\n              <h3>Eclipse Glow<\/h3>\n            <\/div>\n            <div>\n              <p>An epitomizes modern elegance, crafted with premium alloys and sparkling stones for a radiant finish. It is the perfect everyday accessory to add a touch of sophisticated brilliance to both casual and formal ensembles.<\/p>\n              <div class=\"product-tags\" aria-label=\"Supported configurator options\">\n                <span>3D viewer<\/span>\n                <span>Metal<\/span>\n                <span>Shape<\/span>\n              <\/div>\n            <\/div>\n          <a href=\"https:\/\/web-design-company.site\/apps\/jewelry\/product\/eclipse-glow\/\"> <button class=\"product-button btn\" type=\"button\" data-product-button=\"Signature Solitaire\">Open<\/button><\/a> \n          <\/article>\n            <article class=\"product-row is-active reveal\" data-product=\"Signature Solitaire\">\n            <div>\n              <span class=\"status-pill\">VTO available<\/span>\n              <h3>Signature Solitaire<\/h3>\n            <\/div>\n            <div>\n              <p>A brilliantly designed piece that merges sleek modernity with a warm, inviting glow. Crafted to be a striking focal point, it effortlessly enhances the ambiance of any contemporary room.<\/p>\n              <div class=\"product-tags\" aria-label=\"Supported configurator options\">\n                <span>3D viewer<\/span>\n                <span>Metal<\/span>\n                <span>Shape<\/span>\n              <\/div>\n            <\/div>\n          <a href=\"https:\/\/web-design-company.site\/apps\/jewelry\/product\/signature-solitaire\/\"> <button class=\"product-button btn\" type=\"button\" data-product-button=\"The Belmont\">Open<\/button><\/a> \n          <\/article>\n            \n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u2500\u2500 BRACELET SHOWCASE SECTION (Image Left, Content Right) \u2500\u2500 -->\n  <section class=\"section bracelet-showcase\" id=\"bracelet-showcase\">\n    <div class=\"wrap bracelet-layout-grid\">\n      \n      <div class=\"viewer-shell reveal\" aria-label=\"Vizora bracelet try-on preview\">\n        <div class=\"viewer-frame\">\n          <div class=\"browser-header\">\n            <div class=\"browser-dots\">\n              <span class=\"dot red\"><\/span>\n              <span class=\"dot yellow\"><\/span>\n              <span class=\"dot green\"><\/span>\n            <\/div>\n            <div class=\"browser-address\">https:\/\/vto.apps.keyideasglobal.com\/<\/div>\n          <\/div>\n          <div class=\"browser-content\">\n            <img decoding=\"async\" src=\"https:\/\/web-design-company.site\/apps\/kdmlite\/wp-content\/uploads\/2026\/06\/Screenshot-2026-06-23-125500.png\" alt=\"Vizora bracelet try-on interface preview\" class=\"perfect-fit-img\">\n          <\/div>\n        <\/div>\n        <div class=\"viewer-note\">\n          <span>Realistic interface preview of the Vizora bracelet try-on experience.<\/span>\n          <strong>Auto-scaling wrist detection<\/strong>\n        <\/div>\n      <\/div>\n\n      <div class=\"bracelet-copy reveal\">\n        <div>\n          <span class=\"eyebrow\">Interactive wrist try-on<\/span>\n          <h2 class=\"bracelet-title\">Wristwear visualized in <span class=\"gold\">flawless detail.<\/span><\/h2>\n        <\/div>\n        <p style=\"margin:0; color:var(--muted); line-height:1.75; font-size: clamp(0.95rem, 1.3vw, 1.05rem); font-weight: 400;\">\n          Expand your virtual try-on experience to bracelets, bangles, and cuffs. Vizora&#8217;s wrist-detection technology automatically scales and aligns bracelet models to match the customer&#8217;s wrist size.\n        <\/p>\n        <div class=\"fact-list\">\n          <div class=\"fact\">\n            <strong>Realistic wrist contouring<\/strong>\n            <span>Bracelet models wrap naturally along the curves of the wrist, adjusting dynamically to skin tones, lighting, and placement.<\/span>\n          <\/div>\n          \n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <!-- \u2500\u2500 CAPABILITY DETAIL \u2500\u2500 -->\n  <section class=\"section config\" id=\"how-it-works\">\n    <div class=\"wrap config-layout\">\n\n      <div class=\"config-viewer reveal\">\n        <div class=\"cap-grid\">\n          <div class=\"cap-card\">\n            <span class=\"cap-card-num\">Detection<\/span>\n            <div>\n              <h4>Auto Hand &amp; Finger Detection<\/h4>\n              <p>The app automatically finds the finger and wrist position in every image &#8211; no manual marking or alignment needed from the customer.<\/p>\n            <\/div>\n          <\/div>\n          <div class=\"cap-card\">\n            <span class=\"cap-card-num\">Rendering<\/span>\n            <div>\n              <h4>Realistic Jewelry Models<\/h4>\n              <p>Detailed 3D models &#8211; not flat PNG overlays &#8211; capture the actual surface finish, stone faceting, and proportions of each piece.<\/p>\n            <\/div>\n          <\/div>\n          <div class=\"cap-card\">\n            <span class=\"cap-card-num\">Controls<\/span>\n            <div>\n              <h4>Interactive Placement<\/h4>\n              <p>Drag the ring to any finger, adjust the size slider, and fine-tune positioning for a placement that feels personally accurate.<\/p>\n            <\/div>\n          <\/div>\n          <div class=\"cap-card\">\n            <span class=\"cap-card-num\">Metal<\/span>\n            <div>\n              <h4>Metal &amp; Style Switching<\/h4>\n              <p>Switch between White Gold, Yellow Gold, Rose Gold, and Platinum in real time &#8211; the rendering updates instantly without restarting the session.<\/p>\n            <\/div>\n          <\/div>\n          <div class=\"cap-card\">\n            <span class=\"cap-card-num\">QR Transfer<\/span>\n            <div>\n              <h4>Desktop-to-Mobile Handoff<\/h4>\n              <p>A QR code on the desktop screen opens the try-on instantly in the customer&#8217;s mobile browser &#8211; no app download, no friction.<\/p>\n            <\/div>\n          <\/div>\n          <div class=\"cap-card\">\n            <span class=\"cap-card-num\">Multilingual<\/span>\n            <div>\n              <h4>Global &amp; Theme-Ready<\/h4>\n              <p>Compatible with all Shopify 2.0 themes, no theme file modifications required, and the interface supports multiple languages out of the box.<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n        <div class=\"config-note\">\n          <span>All capabilities are included on every Vizora plan from day one.<\/span>\n          <strong>No add-ons required<\/strong>\n        <\/div>\n      <\/div>\n\n      <aside class=\"config-copy reveal\">\n        <div>\n          <span class=\"eyebrow\">How it works<\/span>\n          <h2 class=\"config-title\">The try-on lives on <span class=\"gold\">your product page.<\/span><\/h2>\n        <\/div>\n        <p style=\"margin:0; color:var(--muted); line-height:1.75; font-weight: 400;\">\n          A try-on button appears on every jewelry listing you enable. The correct jewelry model loads automatically from your catalog. No redirect, no external page, no separate tool for shoppers to find.\n        <\/p>\n        <div class=\"fact-list\">\n          <div class=\"fact\">\n            <strong>Catalog integration<\/strong>\n            <span>Automatic catalog sync means your ring and bracelet models are always current with your live listings.<\/span>\n          <\/div>\n          <div class=\"fact\">\n            <strong>Platform support<\/strong>\n            <span>Shopify app published. WooCommerce, BigCommerce, Magento, PrestaShop, and custom Laravel, React, and Angular builds via API.<\/span>\n          <\/div>\n          <div class=\"fact\">\n            <strong>No custom development<\/strong>\n            <span>Vizora installs without modifying your existing theme files and inherits your store&#8217;s visual framework.<\/span>\n          <\/div>\n        <\/div>\n        <a class=\"button\" href=\"https:\/\/www.keyideasinfotech.com\/industries\/retail-ecommerce\/jewelry\/3d-ar-virtual-try-on-vto-jewellery\/\" target=\"_blank\" rel=\"noopener\">View Details<\/a>\n      <\/aside>\n\n    <\/div>\n  <\/section>\n\n  <!-- \u2500\u2500 PLATFORM INTEGRATIONS \u2500\u2500 -->\n  <section class=\"section platform-bg\" id=\"platforms\">\n    <div class=\"wrap\">\n      <div class=\"section-head reveal\">\n        <div>\n          <span class=\"eyebrow\">Platform integrations<\/span>\n          <h2>Works with <span class=\"gradient\">any store platform.<\/span><\/h2>\n        <\/div>\n        <p>\n          Vizora integrates with the platform your jewelry store already uses. No migration or rebuild required &#8211; the try-on experience connects to your existing catalog and product pages.\n        <\/p>\n      <\/div>\n\n      <div class=\"platform-grid\">\n        <article class=\"platform-card reveal\">\n          <span class=\"card-label\">Native app<\/span>\n          <h3>Shopify<\/h3>\n          <p>Published Shopify app. Install in one click, no theme modifications, compatible with all Shopify 2.0 themes.<\/p>\n        <\/article>\n        <article class=\"platform-card reveal\">\n          <span class=\"card-label\">Plugin<\/span>\n          <h3>WooCommerce<\/h3>\n          <p>Hosted try-on experience connected to your WooCommerce product catalog through the Vizora API.<\/p>\n        <\/article>\n        <article class=\"platform-card reveal\">\n          <span class=\"card-label\">Integration<\/span>\n          <h3>BigCommerce &amp; Magento<\/h3>\n          <p>Full API integration for BigCommerce, Magento, and Adobe Commerce stores without any platform migration.<\/p>\n        <\/article>\n        <article class=\"platform-card reveal\">\n          <span class=\"card-label\">Custom build<\/span>\n          <h3>Custom Stacks: Laravel, React, &#038; Angular<\/h3>\n          <p>Stores built on Laravel, React, Angular, or fully custom backends can integrate the Vizora try-on engine directly via full API access.<\/p>\n        <\/article>\n      <\/div>\n\n    <\/div>\n  <\/section>\n  <!-- \u2500\u2500 FINAL CTA \u2500\u2500 -->\n  <section class=\"final\">\n    <div class=\"wrap reveal\">\n      <span class=\"eyebrow\">Start the free trial<\/span>\n      <h2>Give every shopper <span class=\"gold\">confidence<\/span> <br>before they buy.<\/h2>\n      <p>\n        Vizora eliminates the biggest barrier between a jewelry shopper and a purchase. No app download, no custom development &#8211; just a professional virtual try-on experience on your existing product pages from day one.\n      <\/p>\n      <div class=\"actions\">\n        <a class=\"button\" href=\"https:\/\/web-design-company.site\/apps\/jewelry\/vto\/\" target=\"_blank\" rel=\"noopener\">View Demo<\/a>\n         <a class=\"button-ghost\" href=\"#features\">View Available Rings<\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n\n<\/main>\n\n<script>\n  (function () {\n    var root = document.querySelector(\".kvc\");\n    if (!root) return;\n\n    \/* \u2500\u2500 Store region filter \u2500\u2500 *\/\n    var filterBtns = root.querySelectorAll(\"[data-filter]\");\n    var storeCards = root.querySelectorAll(\".store-card\");\n\n    filterBtns.forEach(function (btn) {\n      btn.addEventListener(\"click\", function () {\n        var region = btn.getAttribute(\"data-filter\");\n\n        filterBtns.forEach(function (b) { b.classList.remove(\"active\"); });\n        btn.classList.add(\"active\");\n\n        storeCards.forEach(function (card) {\n          var cardRegion = card.getAttribute(\"data-region\");\n          var show = region === \"all\" || cardRegion === region;\n          card.classList.toggle(\"visible\", show);\n          if (show) {\n            card.style.display = \"\";\n          } else {\n            card.style.display = \"none\";\n          }\n        });\n      });\n    });\n\n    \/* \u2500\u2500 Feature row active state \u2500\u2500 *\/\n    var featureBtns = root.querySelectorAll(\".feature-action-btn\");\n    featureBtns.forEach(function (btn) {\n      btn.addEventListener(\"click\", function (e) {\n        e.preventDefault();\n        featureBtns.forEach(function (b) { b.classList.remove(\"active\"); });\n        btn.classList.add(\"active\");\n      });\n    });\n\n    \/* \u2500\u2500 Scroll reveal \u2500\u2500 *\/\n    var revealItems = root.querySelectorAll(\".reveal\");\n    if (\"IntersectionObserver\" in window) {\n      var observer = new IntersectionObserver(function (entries) {\n        entries.forEach(function (entry) {\n          if (entry.isIntersecting) {\n            entry.target.classList.add(\"visible\");\n            observer.unobserve(entry.target);\n          }\n        });\n      }, { threshold: 0.1 });\n\n      revealItems.forEach(function (item) { observer.observe(item); });\n    } else {\n      revealItems.forEach(function (item) { item.classList.add(\"visible\"); });\n    }\n  })();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Vizora Virtual Try-On App For Jewelry Vizora Virtual Try-On App For Jewelry Let your customers see how any ring or bracelet looks on their actual hand before they buy &#8211; with no app download needed, on any device, on any platform. View Demo https:\/\/vto.apps.keyideasglobal.com\/ Interactive browser interface preview of Vizora Virtual Try-On. No app download [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-59286","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/web-design-company.site\/apps\/jewelry\/wp-json\/wp\/v2\/pages\/59286","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/web-design-company.site\/apps\/jewelry\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/web-design-company.site\/apps\/jewelry\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/web-design-company.site\/apps\/jewelry\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/web-design-company.site\/apps\/jewelry\/wp-json\/wp\/v2\/comments?post=59286"}],"version-history":[{"count":5,"href":"https:\/\/web-design-company.site\/apps\/jewelry\/wp-json\/wp\/v2\/pages\/59286\/revisions"}],"predecessor-version":[{"id":59579,"href":"https:\/\/web-design-company.site\/apps\/jewelry\/wp-json\/wp\/v2\/pages\/59286\/revisions\/59579"}],"wp:attachment":[{"href":"https:\/\/web-design-company.site\/apps\/jewelry\/wp-json\/wp\/v2\/media?parent=59286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}