{"id":57914,"date":"2024-01-17T04:14:47","date_gmt":"2024-01-17T04:14:47","guid":{"rendered":"https:\/\/capytech.com\/?page_id=57914"},"modified":"2026-10-27T15:37:47","modified_gmt":"2026-10-27T15:37:47","slug":"ai-powered-lms","status":"publish","type":"page","link":"https:\/\/capytech.com\/en\/ai-powered-lms\/","title":{"rendered":"Learning Management System"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"57914\" class=\"elementor elementor-57914\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e9b853e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e9b853e\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7ae01e0\" data-id=\"7ae01e0\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-19e29c7 elementor-widget elementor-widget-html\" data-id=\"19e29c7\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\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=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+Arabic:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n  <\/head>\n  <body>\n    <!-- <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\"> -->\n  \n  <style>\n  \/* ==============================================\n       1. WORDPRESS ROOT SIZING RESET\n       Forces the theme to stop shrinking our 'rem' math\n       ============================================== *\/\n       html {\n      font-size: 16px !important;\n    }\n  \n    \/* ==============================================\n       2. INCREASED MAX-WIDTH FOR HIGH-RES MONITORS\n       Expanded from 1280px to 1440px for a more premium widescreen feel\n       ============================================== *\/\n    .capy-container,\n    .capy-split-container,\n    .capy-bento-grid,\n    .capy-logistics-container,\n    .capy-core-grid,\n    .capy-pricing-grid,\n    .capy-promise-container,\n    .capy-footer-content {\n      max-width: 1440px !important; \/* Increased width! *\/\n      margin-left: auto !important;\n      margin-right: auto !important;\n    }\n  \n  \/* ==============================================\n       0. GOOGLE FONTS IMPORT (Elementor Safe)\n       ============================================== *\/\n       \/* @import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); *\/\n  \n  \/* ==============================================\n     1. TYPOGRAPHY & SCALE ENFORCER\n     ============================================== *\/\n  \/* Force the base size to 16px so our 'rem' units stop shrinking *\/\n  .capytech-lms-wrapper {\n    font-size: 16px !important; \n  }\n  \n  \/* Force the font family on EVERY element inside our wrapper *\/\n  .capytech-lms-wrapper, \n  .capytech-lms-wrapper *,\n  .capytech-lms-wrapper h1,\n  .capytech-lms-wrapper h2,\n  .capytech-lms-wrapper h3,\n  .capytech-lms-wrapper h4,\n  .capytech-lms-wrapper p,\n  .capytech-lms-wrapper span,\n  .capytech-lms-wrapper div,\n  .capytech-lms-wrapper a {\n    font-family: 'Plus Jakarta Sans', sans-serif !important;\n  }\n  \n  \/* --- INSTANT HERO ANIMATIONS (No JS Required) --- *\/\n  .capy-hero-load-left {\n      opacity: 0; transform: translateX(-40px);\n      animation: capy-slide-in-left 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;\n    }\n    @keyframes capy-slide-in-left { to { opacity: 1; transform: translateX(0); } }\n  \n    .capy-hero-load-right {\n      opacity: 0; transform: translateX(40px);\n      animation: capy-slide-in-right 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;\n    }\n    @keyframes capy-slide-in-right { to { opacity: 1; transform: translateX(0); } }\n  \n    .capy-hero-delay-1 { animation-delay: 0.1s; }\n    .capy-hero-delay-2 { animation-delay: 0.2s; }\n    .capy-hero-delay-3 { animation-delay: 0.3s; }\n  \n  \/* ==============================================\n       2. CONTAINER WIDTH ENFORCER (Fixes the zoomed out width)\n       Converting 80rem to a hard 1280px to block theme scaling\n       ============================================== *\/\n  .capy-container,\n  .capy-split-container,\n  .capy-bento-grid,\n  .capy-logistics-container,\n  .capy-core-grid,\n  .capy-pricing-grid,\n  .capy-promise-container,\n  .capy-footer-content {\n    max-width: 1280px !important; \n    margin-left: auto !important;\n    margin-right: auto !important;\n  }\n  \n  \/* ==============================================\n       1. WORDPRESS & ELEMENTOR SPACING KILLER\n       Targets common WP and Elementor wrappers to strip extra padding\n       ============================================== *\/\n       .elementor-widget-html,\n    .elementor-html-container,\n    .elementor-widget-wrap,\n    .elementor-section,\n    .elementor-column,\n    .elementor-container,\n    .elementor-inner-section {\n      padding: 0 !important;\n      margin: 0 !important;\n      max-width: 100% !important;\n      width: 100% !important;\n    }\n  \n    .entry-content, \n    .site-main, \n    .post-content, \n    .page-content,\n    .hentry {\n      padding: 0 !important;\n      margin: 0 !important;\n      max-width: 100% !important;\n      border: none !important;\n    }\n  \n    \/* ==============================================\n       2. MASTER WRAPPER \n       ============================================== *\/\n    .capytech-lms-wrapper {\n      \/* Brand Variables *\/\n      --font-sans: 'Plus Jakarta Sans', sans-serif;\n      --brand-50: #eff6ff;\n      --brand-100: #dbeafe;\n      --brand-500: #3b82f6;\n      --brand-600: #2563eb;\n      --brand-700: #101829;\n      --brand-900: #0f172a;\n      --slate-50: #f8fafc;\n      --slate-100: #f1f5f9;\n      --slate-200: #e2e8f0;\n      --slate-300: #cbd5e1;\n      --slate-400: #94a3b8;\n      --slate-500: #64748b;\n      --slate-700: #334155;\n      --slate-600: #475569;\n      --brand-300: #93c5fd;\n      --slate-900: #0f172a;\n      --white: #ffffff;\n      \n      font-family: var(--font-sans);\n      color: var(--slate-900);\n      line-height: 1.5;\n      -webkit-font-smoothing: antialiased;\n      background-color: var(--white);\n      \n      \/* ==============================================\n         ELEMENTOR FULL-WIDTH BREAKOUT\n         Forces the wrapper to ignore the theme's container \n         ============================================== *\/\n      margin-left: calc(-50vw + 50%) !important;\n      margin-right: calc(-50vw + 50%) !important;\n      width: 100vw !important;\n      max-width: 100vw !important;\n      position: relative;\n      padding: 0 !important;\n      overflow-x: clip;\n    }\n  \n    \/* 2. SCOPED RESETS & TYPOGRAPHY \n      Ensuring WP theme styles don't hijack our specific elements\n    *\/\n    .capytech-lms-wrapper * {\n      box-sizing: border-box;\n      margin: 0;\n      padding: 0;\n    }\n    \n    .capytech-lms-wrapper img {\n      max-width: 100%;\n      height: auto;\n      display: block;\n    }\n  \n    \/* 3. HERO SECTION & MESH BACKGROUND \n    *\/\n  \/* 3. HERO SECTION & MESH AURORA BACKGROUND *\/\n  .capy-hero {\n      position: relative;\n      padding: 5rem 1.5rem;\n      \/* Clean white base with vibrant, highly-blurred Aurora orbs *\/\n      background-color: var(--white);\n      background-image: \n        radial-gradient(at 80% 10%, rgba(99, 102, 241, 0.12) 0px, transparent 40%), \/* Indigo glow top right *\/\n        radial-gradient(at 20% 60%, rgba(59, 130, 246, 0.10) 0px, transparent 50%),  \/* Blue glow bottom left *\/\n        radial-gradient(at 50% 100%, rgba(216, 180, 254, 0.08) 0px, transparent 50%); \/* Subtle purple bottom center *\/\n      background-size: 100% 100%;\n      background-repeat: no-repeat;\n      overflow: hidden; \/* Keeps the glowing orbs from spilling out *\/\n    }\n  \n    \/* The Micro-Avatars *\/\n    .capy-hero-trust {\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n      margin-top: 2rem;\n    }\n    .capy-avatar-group {\n      display: flex;\n    }\n    .capy-avatar-group img {\n      width: 2.5rem;\n      height: 2.5rem;\n      border-radius: 50%;\n      border: 3px solid var(--white);\n      margin-left: -0.75rem;\n      box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);\n    }\n    .capy-avatar-group img:first-child { margin-left: 0; }\n    .capy-trust-text {\n      font-size: 0.875rem;\n      color: var(--slate-500);\n      font-weight: 500;\n    }\n    .capy-trust-text span {\n      font-weight: 700;\n      color: var(--slate-900);\n    }\n    .capy-trust-stars { color: #f59e0b; font-size: 1rem; }\n  \n    .capy-container {\n      max-width: 80rem;\n      margin: 0 auto;\n      width: 100%;\n    }\n  \n    .capy-hero-grid {\n      display: grid;\n      grid-template-columns: 1fr;\n      gap: 4rem;\n      align-items: center;\n    }\n  \n    .capy-badge {\n      display: inline-flex;\n      align-items: center;\n      gap: 0.5rem;\n      padding: 0.25rem 0.75rem;\n      border-radius: 9999px;\n      background-color: var(--brand-50);\n      border: 1px solid var(--brand-100);\n      color: var(--brand-600);\n      font-size: 0.75rem;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-bottom: 1.5rem;\n    }\n  \n    .capy-badge-dot {\n      width: 0.5rem;\n      height: 0.5rem;\n      border-radius: 50%;\n      background-color: var(--brand-600);\n    }\n  \n    .capy-hero h1 {\n      font-size: 3rem;\n      font-weight: 800;\n      line-height: 1.1;\n      letter-spacing: -0.02em;\n      margin-bottom: 1.5rem;\n      color: var(--brand-900);\n    }\n  \n    .capy-text-gradient {\n      background-clip: text;\n      -webkit-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      background-image: linear-gradient(to right, var(--brand-600), #6366f1);\n    }\n  \n    .capy-hero p {\n      font-size: 1.125rem;\n      color: var(--slate-500);\n      margin-bottom: 2rem;\n      max-width: 36rem;\n    }\n  \n    \/* 4. BUTTONS & CTAs \n    *\/\n    .capy-btn-group {\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n    }\n  \n    .capy-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      padding: 1rem 2rem;\n      font-size: 1rem;\n      font-weight: 600;\n      border-radius: 0.75rem;\n      text-decoration: none;\n      transition: all 0.2s ease;\n      cursor: pointer;\n    }\n  \n    .capy-btn-primary {\n      background-color: var(--brand-600);\n      color: var(--white);\n      box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3);\n      border: none;\n    }\n  \n    .capy-btn-primary:hover {\n      background-color: var(--brand-500);\n      transform: translateY(-2px);\n      box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.4);\n    }\n  \n    .capy-btn-secondary {\n      background-color: var(--white);\n      color: var(--slate-700);\n      border: 1px solid var(--slate-200);\n    }\n  \n    .capy-btn-secondary:hover {\n      background-color: var(--slate-50);\n      border-color: var(--slate-300);\n    }\n  \n    .capy-btn-secondary svg {\n      width: 1rem;\n      height: 1rem;\n      margin-left: 0.5rem;\n      color: var(--slate-400);\n      transition: all 0.2s ease;\n    }\n  \n    .capy-btn-secondary:hover svg {\n      transform: translateX(4px);\n      color: var(--brand-600);\n    }\n  \n    \/* 5. FLOATING MOCKUP & ANIMATIONS \n    *\/\n    @keyframes capy-float {\n      0%, 100% { transform: translateY(0px); }\n      50% { transform: translateY(-20px); }\n    }\n  \n    .capy-mockup-wrapper {\n      display: none; \/* Hidden on mobile *\/\n      position: relative;\n      perspective: 1000px;\n      z-index: 10;\n    }\n  \n    .capy-mockup-glow {\n      position: absolute;\n      inset: 0;\n      background: linear-gradient(to top right, var(--brand-100), #e0e7ff);\n      border-radius: 1.5rem;\n      transform: rotate(3deg) scale(1.05);\n      filter: blur(24px);\n      opacity: 0.5;\n    }\n  \n    .capy-mockup {\n      position: relative;\n      background-color: var(--white);\n      border: 1px solid var(--slate-100);\n      border-radius: 1rem;\n      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n      padding: 0.5rem;\n      animation: capy-float 6s ease-in-out infinite;\n    }\n  \n    .capy-mac-dots {\n      display: flex;\n      gap: 0.375rem;\n      padding: 0.5rem 0.75rem;\n      border-bottom: 1px solid var(--slate-50);\n    }\n  \n    .capy-mac-dots span {\n      width: 0.625rem;\n      height: 0.625rem;\n      border-radius: 50%;\n      background-color: var(--slate-200);\n    }\n  \n    .capy-mockup-inner {\n      background-color: var(--slate-50);\n      border-radius: 0.75rem;\n      height: 20rem;\n      border: 1px solid var(--slate-100);\n      position: relative;\n      overflow: hidden;\n    }\n  \n    .capy-mockup-inner img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      opacity: 0.9;\n      mix-blend-mode: multiply;\n    }\n  \n    .capy-mockup-fade {\n      position: absolute;\n      inset: 0;\n      background: linear-gradient(to top, var(--white), transparent, transparent);\n    }\n  \n    .capy-floating-widget {\n      position: absolute;\n      left: -3rem;\n      top: 5rem;\n      background-color: var(--white);\n      padding: 1rem;\n      border-radius: 0.75rem;\n      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);\n      border: 1px solid var(--slate-100);\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n      animation: capy-float 6s ease-in-out infinite;\n      animation-delay: 1s; \/* Offset from main float *\/\n    }\n  \n  \/* ==============================================\n       PART 2: BULLETPROOF INFINITE TICKER\n       ============================================== *\/\n       .capy-social {\n      padding: 2.5rem 0;\n      border-top: 1px solid var(--slate-100);\n      border-bottom: 1px solid var(--slate-100);\n      background-color: rgba(248, 250, 252, 0.5); \n      text-align: center;\n      overflow: hidden; \/* Prevents horizontal scrollbars *\/\n    }\n  \n    .capy-social p {\n      font-size: 0.75rem;\n      font-weight: 600;\n      color: var(--slate-400);\n      text-transform: uppercase;\n      letter-spacing: 0.15em;\n      margin-bottom: 2rem;\n    }\n  \n    .capy-ticker-wrapper {\n      width: 100%;\n      position: relative;\n      display: flex;\n      overflow: hidden;\n    }\n  \n    \/* Fade masks on the left and right edges *\/\n    .capy-ticker-mask-left,\n    .capy-ticker-mask-right {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      width: 8rem;\n      z-index: 10;\n      pointer-events: none;\n    }\n    .capy-ticker-mask-left {\n      left: 0;\n      background: linear-gradient(to right, var(--white), transparent);\n    }\n    .capy-ticker-mask-right {\n      right: 0;\n      background: linear-gradient(to left, var(--white), transparent);\n    }\n  \n    \/* The magic math: Track is max-content, so -50% moves exactly one group *\/\n    @keyframes capy-scroll {\n      0% { transform: translateX(0); }\n      100% { transform: translateX(-50%); }\n    }\n  \n    .capy-ticker-track {\n      display: flex;\n      width: max-content; \/* Key fix: lets it stretch infinitely *\/\n      animation: capy-scroll 120s linear infinite; \/* Adjusted speed *\/\n    }\n  \n    .capy-ticker-group {\n      display: flex;\n      min-width: 100vw; \/* Key fix: forces group to fill the screen *\/\n      justify-content: space-around;\n      align-items: center;\n      flex-shrink: 0; \/* Key fix: prevents squishing *\/\n      gap: 3rem; \/* Fallback gap for ultra-wide monitors *\/\n      padding: 0 1.5rem;\n    }\n  \n    .capy-logo-item {\n      font-size: 1.5rem;\n      font-weight: 700;\n      color: var(--brand-700);\n      filter: grayscale(100%);\n      transition: all 0.3s ease;\n      cursor: pointer;\n      white-space: nowrap; \/* Prevents text from wrapping on mobile *\/\n    }\n  \n    .capy-logo-item:hover {\n      color: var(--brand-500);\n      filter: grayscale(0%);\n    }\n  \n    \/* 7. RESPONSIVE QUERIES (Desktop scaling)\n    *\/\n    @media (min-width: 640px) {\n      .capy-btn-group {\n        flex-direction: row;\n      }\n    }\n  \n    @media (min-width: 1024px) {\n      .capy-hero {\n        padding: 8rem 3rem;\n      }\n      .capy-hero h1 {\n        font-size: 3.75rem;\n      }\n      .capy-hero-grid {\n        grid-template-columns: 1fr 1fr;\n      }\n      .capy-mockup-wrapper {\n        display: block;\n      }\n    }\n  \/* ==============================================\n       PART 3: THE ASYMMETRICAL SPLIT INTRO\n       ============================================== *\/\n       .capy-split-intro {\n      padding: 8rem 1.5rem;\n      background-color: var(--white);\n      border-bottom: 1px solid var(--slate-100);\n    }\n  \n    .capy-split-container {\n      max-width: 80rem;\n      margin: 0 auto;\n      display: grid;\n      grid-template-columns: 1fr;\n      gap: 3rem;\n    }\n  \n    \/* Desktop Layout: 5\/7 ratio split *\/\n    @media (min-width: 1024px) {\n      .capy-split-container {\n        grid-template-columns: 5fr 7fr;\n        gap: 6rem;\n        align-items: start;\n      }\n    }\n  \n    \/* Left Side: Headline *\/\n    .capy-split-headline {\n      font-size: 2.5rem;\n      font-weight: 800;\n      line-height: 1.1;\n      color: var(--brand-900);\n      letter-spacing: -0.02em;\n      margin: 0;\n    }\n  \n    @media (min-width: 1024px) {\n      .capy-split-headline {\n        font-size: 3.5rem;\n        position: sticky; \/* Keeps it pinned while the right side scrolls if the text is long *\/\n        top: 6rem; \n      }\n    }\n  \n    .capy-highlight {\n      color: var(--brand-600);\n    }\n  \n    \/* Right Side: Narrative & Chips *\/\n    .capy-split-narrative {\n      display: flex;\n      flex-direction: column;\n      gap: 2rem;\n    }\n  \n    .capy-split-narrative p {\n      font-size: 1.25rem;\n      color: var(--slate-600);\n      line-height: 1.7;\n      margin: 0;\n    }\n  \n    \/* UI Chips (Extracting key features from your text) *\/\n    .capy-chip-grid {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 1rem;\n      margin-top: 1rem;\n    }\n  \n    .capy-ui-chip {\n      display: inline-flex;\n      align-items: center;\n      gap: 0.75rem;\n      padding: 0.75rem 1.25rem;\n      background-color: var(--slate-50);\n      border: 1px solid var(--slate-200);\n      border-radius: 999px;\n      font-size: 0.875rem;\n      font-weight: 600;\n      color: var(--slate-700);\n      transition: all 0.2s ease;\n    }\n  \n    .capy-ui-chip:hover {\n      background-color: var(--white);\n      border-color: var(--brand-300);\n      box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1);\n      transform: translateY(-2px);\n    }\n  \n    .capy-ui-chip svg {\n      width: 1.25rem;\n      height: 1.25rem;\n      color: var(--brand-500);\n    }\n  \n    \/* --- NEW: Split Intro Floating Image --- *\/\n    .capy-split-image-wrapper {\n      margin-top: 3.5rem;\n      perspective: 1000px; \/* Critical: Creates the 3D space for the tilt *\/\n      position: relative;\n      width: 100%;\n    }\n  \n    \/* Soft glowing backdrop to make the image pop *\/\n    .capy-split-image-wrapper::before {\n      content: '';\n      position: absolute;\n      inset: -1.5rem;\n      background: radial-gradient(circle, var(--brand-100) 0%, transparent 70%);\n      filter: blur(20px);\n      z-index: 0;\n      opacity: 0.6;\n      transform: rotate(-3deg);\n    }\n  \n    .capy-split-image {\n      position: relative;\n      z-index: 1;\n      width: 100%;\n      \/* FORCE ROUNDED CORNERS *\/\n      border-radius: 1rem !important;\n      overflow: hidden !important;\n      border: 1px solid var(--slate-200);\n      box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.15);\n      \/* The Premium 3D Tilt Effect *\/\n      transform: rotateX(8deg) rotateY(-6deg) rotateZ(2deg) scale(0.98);\n      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);\n  \n    }\n  \n    \/* The Hover Interaction: Flattens and lifts the image toward the user *\/\n    .capy-split-image-wrapper:hover .capy-split-image {\n      transform: rotateX(0) rotateY(0) rotateZ(0) scale(1.02);\n      box-shadow: 0 35px 60px -15px rgba(59, 130, 246, 0.25);\n      border-color: var(--brand-300);\n    }\n  \n    \/* --- NEW: Left Column Sticky Wrapper & Image --- *\/\n    @media (min-width: 1024px) {\n      \/* We move the sticky property from the H2 to a wrapper so both the text and image float down the screen together *\/\n      .capy-split-headline {\n        position: relative !important;\n        top: 0 !important;\n      }\n      .capy-left-sticky-wrapper {\n        position: sticky;\n        top: 6rem;\n        display: flex;\n        flex-direction: column;\n        gap: 3rem; \/* Space between the headline and the new image *\/\n      }\n    }\n  \n    .capy-left-visual-wrapper {\n      position: relative;\n      max-width: 320px; \/* Keeps it a nice, elegant size so it doesn't overpower the headline *\/\n      margin-top: 2rem;\n      animation: capy-float 8s ease-in-out infinite alternate; \/* Gentle floating effect *\/\n    }\n  \n    .capy-left-visual-img {\n      position: relative;\n      z-index: 2;\n      \/* FORCE ROUNDED CORNERS *\/\n      border-radius: 1.25rem !important;\n      overflow: hidden !important;\n      border: 1px solid var(--slate-200);\n      box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.1);\n      width: 100%;\n      height: auto;\n    }\n  \n    .capy-left-visual-glow {\n      position: absolute;\n      inset: -1rem;\n      background: radial-gradient(circle, var(--brand-100) 0%, transparent 70%);\n      filter: blur(20px);\n      z-index: 1;\n      border-radius: 50%;\n    }\n  \n    \/* ==============================================\n       MOBILE CLEANUP: HIDE PART 3 SCREENSHOTS\n       Keeps the mobile view clean and prevents scrolling fatigue\n       ============================================== *\/\n       @media (max-width: 1023px) {\n      .capy-split-image-wrapper,\n      .capy-left-visual-wrapper {\n        display: none !important;\n      }\n    }\n  \n    \/* ==============================================\n       PART 4: THE AI ADVANTAGE (BENTO GRID)\n       ============================================== *\/\n    .capy-bento-section {\n      padding: 6rem 1.5rem;\n      background-color: var(--slate-50);\n      border-top: 1px solid var(--slate-100);\n    }\n  \n    .capy-bento-header {\n      text-align: center;\n      margin-bottom: 4rem;\n    }\n  \n    .capy-bento-header h3 {\n      font-size: 2.25rem;\n      font-weight: 800;\n      color: var(--brand-900);\n      margin-bottom: 1rem;\n      letter-spacing: -0.02em;\n    }\n  \n    .capy-bento-header p {\n      font-size: 1.125rem;\n      color: var(--slate-500);\n      max-width: 36rem;\n      margin: 0 auto;\n    }\n  \n    \/* The Grid Container *\/\n    .capy-bento-grid {\n      max-width: 80rem;\n      margin: 0 auto;\n      display: grid;\n      grid-template-columns: 1fr; \/* Mobile: 1 column *\/\n      gap: 1.5rem;\n      grid-auto-flow: dense;\n    }\n  \n    \/* Bento Card Base Styles *\/\n    .capy-bento-card {\n      background-color: var(--white);\n      border: 1px solid var(--slate-200);\n      border-radius: 1.5rem;\n      padding: 2rem;\n      position: relative;\n      overflow: hidden;\n      transition: all 0.3s ease;\n      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);\n      display: flex;\n      flex-direction: column;\n    }\n  \n    .capy-bento-card:hover {\n      transform: translateY(-4px);\n      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n      border-color: var(--brand-100);\n    }\n  \n    \/* Decorative Background Glows for Cards *\/\n    .capy-card-glow {\n      position: absolute;\n      width: 300px;\n      height: 300px;\n      background: radial-gradient(circle, var(--brand-50) 0%, transparent 70%);\n      top: -100px;\n      right: -100px;\n      opacity: 0.6;\n      pointer-events: none;\n    }\n  \n    .capy-bento-icon {\n      width: 3rem;\n      height: 3rem;\n      border-radius: 0.75rem;\n      background-color: var(--brand-50);\n      color: var(--brand-600);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-bottom: 1.5rem;\n      z-index: 1;\n    }\n  \n    .capy-bento-card h4 {\n      font-size: 1.25rem;\n      font-weight: 700;\n      color: var(--brand-900);\n      margin-bottom: 0.75rem;\n      z-index: 1;\n    }\n  \n    .capy-bento-card p {\n      color: var(--slate-500);\n      font-size: 0.95rem;\n      line-height: 1.6;\n      z-index: 1;\n      margin: 0;\n    }\n  \n    \/* Asymmetrical Grid Logic for Desktop *\/\n    @media (min-width: 768px) {\n      .capy-bento-grid {\n        grid-template-columns: repeat(2, 1fr);\n      }\n    }\n  \n    @media (min-width: 1024px) {\n      .capy-bento-grid {\n        grid-template-columns: repeat(3, 1fr);\n      }\n      \n      \/* Creating the zig-zag bento effect *\/\n      .capy-span-2 {\n        grid-column: span 2;\n      }\n      \n      \/* Specific tweaks for wide cards to make text flow better *\/\n      .capy-span-2 p {\n        max-width: 80%;\n      }\n    }\n  \n    \/* ==============================================\n       WHY SIRAJ BLOCK\n       ============================================== *\/\n    .capy-why-siraj {\n      padding: 4rem 1.5rem;\n      background-color: var(--white);\n      border-top: 1px solid var(--slate-100);\n    }\n  \n    .capy-why-siraj-inner {\n      max-width: 56rem;\n      margin: 0 auto;\n      text-align: center;\n    }\n  \n    .capy-why-siraj-inner h3 {\n      font-size: 1.75rem;\n      font-weight: 800;\n      color: var(--brand-900);\n      margin-bottom: 1rem;\n      letter-spacing: -0.02em;\n    }\n  \n    .capy-why-siraj-inner p {\n      font-size: 1.125rem;\n      color: var(--slate-500);\n      line-height: 1.7;\n      margin: 0;\n    }\n  \n    .capy-arabic-inline {\n      font-family: 'Noto Sans Arabic', 'Segoe UI', 'Plus Jakarta Sans', sans-serif !important;\n      unicode-bidi: isolate;\n    }\n  \n    .capy-siraj-subline {\n      font-size: 1rem;\n      font-weight: 600;\n      color: var(--slate-500);\n      margin: 0 0 1rem 0;\n    }\n  \n  \n  \/* ==============================================\n       PART 5: LOGISTICS & SCHEDULING (METAVERSE PARALLAX)\n       ============================================== *\/\n       .capy-logistics {\n      padding: 10rem 1.5rem 4rem 1.5rem; \n      \/* New Image: A gorgeous abstract blend of physical and digital space *\/\n      background-image: \n        linear-gradient(to bottom, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.7) 100%),\n        url('https:\/\/capytech.com\/wp-content\/uploads\/2026\/03\/portrait-asian-girl-1-scaled.jpg');\n      background-size: cover;\n      background-position: center;\n      background-attachment: fixed;\n      border-top: 1px solid var(--slate-900);\n      overflow: hidden;\n    }\n  \n    .capy-logistics-container {\n      max-width: 80rem;\n      margin: 0 auto;\n      display: grid;\n      grid-template-columns: 1fr;\n      gap: 4rem;\n      align-items: center;\n    }\n  \n    @media (min-width: 1024px) {\n      .capy-logistics-container {\n        grid-template-columns: 1fr 1fr;\n        gap: 6rem;\n      }\n    }\n  \n    \/* Left Side: Dark Mode Text *\/\n    .capy-logistics-content h2 {\n      font-size: 2.25rem;\n      font-weight: 800;\n      line-height: 1.2;\n      color: var(--white);\n      margin-bottom: 1.25rem;\n      letter-spacing: -0.02em;\n    }\n  \n    @media (min-width: 768px) {\n      .capy-logistics-content h2 { font-size: 3rem; }\n    }\n  \n    .capy-logistics-body {\n      font-size: 1.125rem;\n      color: var(--slate-300);\n      line-height: 1.6;\n      margin-bottom: 3rem;\n    }\n  \n    .capy-feature-list {\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n    }\n  \n    .capy-feature-item {\n      display: flex;\n      gap: 1.25rem;\n      padding: 1.5rem;\n      border-radius: 1rem;\n      border: 1px solid transparent;\n      transition: all 0.3s ease;\n      cursor: default;\n    }\n  \n    .capy-feature-item:hover {\n      background-color: rgba(255, 255, 255, 0.05);\n      border-color: rgba(255, 255, 255, 0.1);\n      transform: translateX(4px);\n    }\n  \n    \/* Dark mode icon containers *\/\n    .capy-feature-icon {\n      flex-shrink: 0;\n      width: 3rem;\n      height: 3rem;\n      border-radius: 0.75rem;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background-color: rgba(255, 255, 255, 0.1) !important;\n      border: 1px solid rgba(255, 255, 255, 0.15);\n    }\n  \n    \/* Specific neon icon colors for Dark Mode *\/\n    .capy-delay-1 .capy-feature-icon { color: #60a5fa !important; } \/* Blue *\/\n    .capy-delay-2 .capy-feature-icon { color: #f472b6 !important; } \/* Pink *\/\n    .capy-delay-3 .capy-feature-icon { color: #a855f7 !important; } \/* Purple *\/\n  \n    .capy-feature-item h4 {\n      font-size: 1.125rem;\n      font-weight: 700;\n      color: var(--white);\n      margin-bottom: 0.5rem;\n    }\n  \n    .capy-feature-item p {\n      font-size: 0.95rem;\n      color: var(--slate-400);\n      line-height: 1.5;\n      margin: 0;\n    }\n  \n    \/* Right Side: The Glassmorphism Visuals *\/\n    .capy-logistics-visual {\n      position: relative;\n      width: 100%;\n      height: 500px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      perspective: 1000px;\n    }\n  \n    \/* Glowing orb behind the calendar *\/\n    .capy-visual-backdrop {\n      position: absolute;\n      inset: 2rem;\n      border-radius: 50%;\n      background: radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, transparent 70%);\n      filter: blur(40px);\n      z-index: 0;\n    }\n  \n    \/* THE NEW GLASSMORPHISM CALENDAR UI *\/\n    .capy-calendar-ui {\n      position: relative;\n      width: 340px;\n      background-color: rgba(15, 23, 42, 0.5); \/* Semi-transparent navy *\/\n      backdrop-filter: blur(16px); \/* The frosted glass magic *\/\n      -webkit-backdrop-filter: blur(16px);\n      border-radius: 1.25rem;\n      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n      border: 1px solid rgba(255, 255, 255, 0.15);\n      padding: 1.5rem;\n      z-index: 10;\n      animation: capy-float 6s ease-in-out infinite;\n    }\n  \n    .capy-cal-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 1.5rem;\n    }\n  \n    .capy-cal-title {\n      font-weight: 700;\n      font-size: 1.125rem;\n      color: var(--white); \/* White text *\/\n    }\n  \n    .capy-cal-dots {\n      display: flex;\n      gap: 0.5rem;\n    }\n  \n    .capy-cal-dots span {\n      width: 0.5rem;\n      height: 0.5rem;\n      border-radius: 50%;\n      background-color: rgba(255, 255, 255, 0.2);\n    }\n  \n    .capy-cal-grid {\n      display: grid;\n      grid-template-columns: repeat(7, 1fr);\n      gap: 0.5rem;\n    }\n  \n    .capy-cal-day {\n      aspect-ratio: 1;\n      border-radius: 0.375rem;\n      background-color: rgba(255, 255, 255, 0.05);\n      border: 1px solid rgba(255, 255, 255, 0.05);\n    }\n  \n    \/* Neon highlights for dark mode booked days *\/\n    .capy-cal-day.active-physical { background-color: rgba(96, 165, 250, 0.2); border-color: #60a5fa; }\n    .capy-cal-day.active-virtual { background-color: rgba(244, 114, 182, 0.2); border-color: #f472b6; }\n    .capy-cal-day.active-meta { background-color: rgba(167, 139, 250, 0.2); border-color: #a78bfa; }\n  \n    \/* THE NEW GLASSMORPHISM FLOATING BADGES *\/\n    .capy-floating-badge {\n      position: absolute;\n      background-color: rgba(15, 23, 42, 0.6);\n      backdrop-filter: blur(12px);\n      -webkit-backdrop-filter: blur(12px);\n      padding: 1rem 1.25rem;\n      border-radius: 1rem;\n      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);\n      border: 1px solid rgba(255, 255, 255, 0.15);\n      display: flex;\n      align-items: center;\n      gap: 0.75rem;\n      z-index: 20;\n      font-weight: 600;\n      font-size: 0.875rem;\n      color: var(--white); \/* White text *\/\n    }\n  \n    .capy-badge-meta {\n      top: 2rem;\n      right: 0;\n      animation: capy-float 5s ease-in-out infinite reverse;\n    }\n  \n    .capy-badge-physical {\n      bottom: 3rem;\n      left: -1rem;\n      animation: capy-float 7s ease-in-out infinite 1s;\n    }\n  \n    .capy-badge-icon {\n      width: 2rem;\n      height: 2rem;\n      border-radius: 0.5rem;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background-color: rgba(255, 255, 255, 0.1) !important;\n    }\n    \n    .capy-badge-meta .capy-badge-icon { color: #a78bfa !important; } \/* Purple Neon *\/\n    .capy-badge-physical .capy-badge-icon { color: #60a5fa !important; } \/* Blue Neon *\/\n  \n  \n    \/* ==============================================\n       PART 6: THE CORE ENGINE (CINEMATIC CONTINUATION)\n       ============================================== *\/\n    .capy-core-section {\n      padding: 4rem 1.5rem 10rem 1.5rem; \n      \/* Exact same image as Part 5 for seamless continuation *\/\n      \/* background-image: \n        linear-gradient(to bottom, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.95) 100%),\n        url('https:\/\/capytech.com\/wp-content\/uploads\/2026\/03\/portrait-asian-girl-1-scaled.jpg');  *\/\n      background-size: cover;\n      background-position: center;\n      background-attachment: fixed;\n      border-top: none; \n      \/* border-bottom: 1px solid var(--slate-900); *\/\n      overflow: hidden;\n    }\n  \n    .capy-core-header {\n      text-align: center;\n      max-width: 48rem;\n      margin: 0 auto 5rem auto;\n    }\n  \n    .capy-core-header h2 {\n      font-size: 2.25rem;\n      font-weight: 800;\n      line-height: 1.2;\n      color: var(--white);\n      margin-bottom: 1.25rem;\n      letter-spacing: -0.02em;\n    }\n  \n    @media (min-width: 768px) {\n      .capy-core-header h2 { font-size: 3rem; }\n    }\n  \n    .capy-core-header p {\n      font-size: 1.125rem;\n      color: var(--slate-300);\n      line-height: 1.6;\n      margin: 0;\n    }\n  \n    .capy-core-grid {\n      max-width: 80rem;\n      margin: 0 auto;\n      display: grid;\n      grid-template-columns: 1fr;\n      gap: 3rem 2rem; \n    }\n  \n    @media (min-width: 768px) {\n      .capy-core-grid {\n        grid-template-columns: repeat(2, 1fr);\n        column-gap: 4rem;\n        row-gap: 3.5rem;\n      }\n    }\n  \n    .capy-core-item {\n      display: flex;\n      gap: 1.25rem;\n      align-items: flex-start;\n      transition: transform 0.2s ease;\n    }\n  \n    .capy-core-item:hover {\n      transform: translateY(-3px);\n    }\n  \n    .capy-core-icon {\n      flex-shrink: 0;\n      width: 3.5rem;\n      height: 3.5rem;\n      border-radius: 0.75rem;\n      background-color: rgba(255, 255, 255, 0.05);\n      backdrop-filter: blur(8px);\n      -webkit-backdrop-filter: blur(8px);\n      border: 1px solid rgba(255, 255, 255, 0.15);\n      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: #60a5fa; \n      transition: all 0.2s ease;\n    }\n  \n    .capy-core-item:hover .capy-core-icon {\n      border-color: rgba(255, 255, 255, 0.3);\n      background-color: rgba(255, 255, 255, 0.15);\n      color: var(--white);\n      box-shadow: 0 0 20px rgba(96, 165, 250, 0.4);\n    }\n  \n    .capy-core-text h4 {\n      font-size: 1.125rem;\n      font-weight: 700;\n      color: var(--white);\n      margin-bottom: 0.5rem;\n    }\n  \n    .capy-core-text p {\n      font-size: 0.95rem;\n      color: var(--slate-400);\n      line-height: 1.6;\n      margin: 0;\n    }\n  \n  \/* ==============================================\n       PART 7: SUBSCRIPTION TIERS (ENHANCED)\n       ============================================== *\/\n       .capy-pricing-section {\n      padding: 8rem 1.5rem;\n      background-color: var(--white);\n      border-top: 1px solid var(--slate-100);\n      overflow: hidden; \/* Contains advanced glow effects *\/\n    }\n  \n    .capy-pricing-header {\n      text-align: center;\n      max-width: 48rem;\n      margin: 0 auto 5rem auto;\n    }\n  \n    .capy-pricing-header h2 {\n      font-size: 2.25rem;\n      font-weight: 800;\n      line-height: 1.2;\n      color: var(--brand-900);\n      margin-bottom: 1.25rem;\n      letter-spacing: -0.02em;\n    }\n  \n    @media (min-width: 768px) {\n      .capy-pricing-header h2 { font-size: 3rem; }\n    }\n  \n    .capy-pricing-header p {\n      font-size: 1.125rem;\n      color: var(--slate-500);\n      line-height: 1.6;\n      margin: 0;\n    }\n  \n    \/* Enhanced Grid Layout *\/\n    .capy-pricing-grid {\n      max-width: 80rem;\n      margin: 0 auto;\n      display: grid;\n      grid-template-columns: 1fr;\n      gap: 2.5rem; \/* Increased gap slightly for the hover effect scaling *\/\n      align-items: center;\n    }\n  \n    @media (min-width: 1024px) {\n      .capy-pricing-grid {\n        grid-template-columns: repeat(3, 1fr);\n        gap: 2.5rem;\n      }\n    }\n  \n    \/* =========================================\n       BASE CARD STYLES & NEW BACKGROUNDS\n       ========================================= *\/\n    .capy-pricing-card {\n      border-radius: 1.5rem;\n      padding: 3rem 2.5rem;\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); \/* Smoother, responsive transition *\/\n      border: 1px solid var(--slate-100);\n    }\n  \n    \/* New Backgrounds: Subtle variations signfying value steps *\/\n    .capy-tier-1 {\n      \/* Pure, simple clean off-white *\/\n      background-color: var(--white);\n      background-image: radial-gradient(at 100% 0%, var(--white) 0px, transparent 100%), \n                        radial-gradient(at 0% 100%, #f1f5f990 0px, transparent 100%);\n    }\n  \n    .capy-tier-2 {\n      \/* Slightly more mature, subtle pale blue shift *\/\n      background-color: #fafcfe;\n      border-color: #e2e8f080;\n      background-image: radial-gradient(at 0% 100%, #ffffff80 0px, transparent 100%), \n                        radial-gradient(at 100% 0%, #dbeafe60 0px, transparent 100%);\n    }\n  \n    \/* Base Hover state for non-premium cards *\/\n    .capy-tier-1:hover, \n    .capy-tier-2:hover {\n      transform: translateY(-8px); \/* Significant lift *\/\n      background-image: none;\n      background-color: var(--white); \/* Cleans up to pure white on hover *\/\n      border-color: var(--brand-300); \/* Blue border highlight *\/\n      box-shadow: 0 30px 60px -12px rgba(15, 23, 42, 0.12); \/* Deep shadow depth *\/\n    }\n  \n    \/* Text Content and Alignment *\/\n    .capy-tier-name {\n      font-size: 1.35rem;\n      font-weight: 700;\n      color: var(--brand-900);\n      margin-bottom: 0.75rem;\n      letter-spacing: -0.02em;\n    }\n  \n    .capy-tier-desc {\n      font-size: 0.95rem;\n      color: var(--slate-500);\n      line-height: 1.6;\n      margin-bottom: 2.5rem;\n      min-height: 4.5rem; \/* Ensures cards align vertically *\/\n    }\n  \n    .capy-feature-group-title {\n      font-size: 0.8rem;\n      font-weight: 700;\n      color: var(--brand-900);\n      margin-bottom: 1.25rem;\n      text-transform: uppercase;\n      letter-spacing: 0.1em;\n    }\n  \n    \/* Enhanced Feature Lists (Checkmarks) *\/\n    .capy-tier-features {\n      list-style: none;\n      padding: 0;\n      margin: 0 0 2.5rem 0;\n      display: flex;\n      flex-direction: column;\n      gap: 1.125rem;\n      flex-grow: 1; \/* Aligns buttons perfectly *\/\n    }\n  \n    .capy-tier-features li {\n      display: flex;\n      align-items: flex-start;\n      gap: 0.875rem;\n      font-size: 0.95rem;\n      color: var(--slate-600);\n      line-height: 1.4;\n    }\n  \n    .capy-check-icon {\n      flex-shrink: 0;\n      width: 1.25rem;\n      height: 1.25rem;\n      color: var(--brand-500);\n      margin-top: 0.1rem;\n      filter: drop-shadow(0 0 1px #ffffff); \/* Added sharpness *\/\n    }\n  \n    \/* Card Buttons and Hover States *\/\n    .capy-tier-btn {\n      display: block;\n      width: 100%;\n      text-align: center;\n      padding: 1.125rem;\n      border-radius: 1rem;\n      font-weight: 700;\n      font-size: 1rem;\n      text-decoration: none;\n      transition: all 0.2s ease;\n      margin-top: auto;\n    }\n  \n    .capy-btn-outline {\n      background-color: var(--white);\n      color: var(--slate-700);\n      border: 1px solid var(--slate-200);\n    }\n  \n    .capy-btn-outline:hover {\n      background-color: var(--brand-600);\n      color: var(--white);\n      border-color: var(--brand-600);\n      box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3);\n    }\n  \n    \/* =========================================\n       TIER 3: PREMIUM HIGHLIGHT (ENHANCED HOVER)\n       ========================================= *\/\n    .capy-pricing-card.capy-premium {\n      background-color: var(--brand-900);\n      border-color: var(--brand-900);\n      color: var(--white);\n      position: relative;\n      box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);\n      \/* Advanced static background depth *\/\n      background-image: radial-gradient(at 10% 10%, rgba(59, 130, 246, 0.1) 0px, transparent 60%); \n    }\n  \n    \/* Desktop pop-out and Hover Lift on Tier 3 *\/\n    @media (min-width: 1024px) {\n      .capy-pricing-card.capy-premium {\n        transform: scale(1.05); \/* Base static scale *\/\n        z-index: 10;\n      }\n      \n      .capy-pricing-card.capy-premium:hover {\n        transform: scale(1.05) translateY(-8px); \/* Scale *and* lift on hover *\/\n        border-color: var(--brand-500); \/* Blue glowing border highlight *\/\n      }\n    }\n  \n    \/* Background Glow Animation for Tier 3 Hover *\/\n    @keyframes capy-premium-glow {\n      0% { background-position: 0% 50%; }\n      50% { background-position: 100% 50%; }\n      100% { background-position: 0% 50%; }\n    }\n  \n    \/* Activating the animated background light source on hover *\/\n    .capy-pricing-card.capy-premium:hover {\n      background-image: radial-gradient(circle at center, rgba(99, 102, 241, 0.2), rgba(15, 23, 42, 0) 70%),\n                        linear-gradient(135deg, var(--brand-900) 0%, #1e293b 50%, var(--brand-900) 100%);\n      background-size: 200% 200%;\n      animation: capy-premium-glow 4s ease infinite; \/* Slow, breathing animation *\/\n    }\n  \n    \/* Color adjustments inside Tier 3 (unchanged) *\/\n    .capy-premium .capy-tier-name { color: var(--white); }\n    .capy-premium .capy-tier-desc { color: var(--slate-300); }\n    .capy-premium .capy-feature-group-title { color: rgba(255, 255, 255, 0.6); }\n    .capy-premium .capy-tier-features li { color: var(--slate-200); }\n    .capy-premium .capy-check-icon { color: var(--brand-500); } \/* Vivid blue check *\/\n  \n    \/* Enhanced Badge on Tier 3 *\/\n    .capy-premium-badge {\n      position: absolute;\n      top: -1.25rem;\n      left: 50%;\n      transform: translateX(-50%);\n      background: linear-gradient(135deg, var(--brand-600) 0%, #6366f1 100%);\n      color: var(--white);\n      padding: 0.5rem 1.25rem;\n      border-radius: 999px;\n      font-size: 0.75rem;\n      font-weight: 800;\n      text-transform: uppercase;\n      letter-spacing: 0.12em;\n      box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.4);\n      pointer-events: none;\n      z-index: 20;\n    }\n  \n    \/* Button rapid pulse for Tier 3 CTA *\/\n    @keyframes capy-btn-pulse {\n      0% { box-shadow: 0 0 0 0px rgba(59, 130, 246, 0.4); }\n      70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }\n      100% { box-shadow: 0 0 0 0px rgba(59, 130, 246, 0); }\n    }\n  \n    .capy-btn-solid {\n      background-color: var(--brand-600);\n      color: var(--white);\n      border: 1px solid var(--brand-600);\n      transition: all 0.2s ease;\n    }\n  \n    .capy-premium:hover .capy-btn-solid {\n      background-color: var(--brand-500);\n      border-color: var(--brand-500);\n      \/* Activates rapid pulse on card hover *\/\n      animation: capy-btn-pulse 1.5s infinite ease-out; \n      transform: translateY(-2px);\n    }\n  \n    \/* ==============================================\n       PART 8: THE CAPYTECH PROMISE (CUSTOMER SUCCESS)\n       ============================================== *\/\n       .capy-promise-section {\n      padding: 8rem 1.5rem;\n      background-color: var(--white);\n      border-top: 1px solid var(--slate-100);\n      overflow: hidden;\n    }\n  \n    .capy-promise-container {\n      max-width: 80rem;\n      margin: 0 auto;\n      display: grid;\n      grid-template-columns: 1fr;\n      gap: 4rem;\n      align-items: center;\n    }\n  \n    @media (min-width: 1024px) {\n      .capy-promise-container {\n        grid-template-columns: 1fr 1fr;\n        gap: 6rem;\n      }\n    }\n  \n    \/* --- LEFT SIDE: THE HUMAN VISUAL --- *\/\n    .capy-promise-visual {\n      position: relative;\n      width: 100%;\n      \/* Create a nice aspect ratio container *\/\n      aspect-ratio: 4\/5;\n      max-height: 600px;\n      margin: 0 auto;\n    }\n  \n    @media (min-width: 1024px) {\n      .capy-promise-visual {\n        aspect-ratio: auto;\n        height: 600px;\n      }\n    }\n  \n    \/* Abstract warm backdrop shape *\/\n    .capy-promise-backdrop {\n      position: absolute;\n      top: 5%;\n      bottom: 5%;\n      left: 5%;\n      right: 15%;\n      background: linear-gradient(135deg, var(--brand-50) 0%, #e0e7ff 100%);\n      border-radius: 2rem;\n      z-index: 1;\n      transform: rotate(-3deg);\n    }\n  \n    \/* Main Human Photo *\/\n    .capy-promise-photo {\n      position: absolute;\n      top: 0;\n      bottom: 10%;\n      left: 10%;\n      right: 5%;\n      border-radius: 1.5rem;\n      overflow: hidden;\n      z-index: 2;\n      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n    }\n  \n    .capy-promise-photo img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n  \n    \/* Floating Promo Graphic *\/\n    .capy-promo-graphic {\n      position: absolute;\n      bottom: 5%;\n      left: -5%;\n      background-color: var(--white);\n      padding: 1.25rem;\n      border-radius: 1.25rem;\n      box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.2);\n      border: 1px solid var(--slate-100);\n      z-index: 3;\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n      animation: capy-float 7s ease-in-out infinite;\n    }\n  \n    .capy-promo-icon-box {\n      width: 3rem;\n      height: 3rem;\n      border-radius: 0.75rem;\n      background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);\n      color: #db2777;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  \n    .capy-promo-text h5 {\n      font-size: 0.875rem;\n      font-weight: 800;\n      color: var(--brand-900);\n      margin: 0 0 0.25rem 0;\n    }\n  \n    .capy-promo-text p {\n      font-size: 0.75rem;\n      color: var(--slate-500);\n      margin: 0;\n      font-weight: 600;\n    }\n  \n    \/* --- RIGHT SIDE: CONTENT & FEATURES --- *\/\n    .capy-promise-content h2 {\n      font-size: 2.25rem;\n      font-weight: 800;\n      line-height: 1.2;\n      color: var(--brand-900);\n      margin-bottom: 1.25rem;\n      letter-spacing: -0.02em;\n    }\n  \n    @media (min-width: 768px) {\n      .capy-promise-content h2 { font-size: 3rem; }\n    }\n  \n    .capy-promise-body {\n      font-size: 1.125rem;\n      color: var(--slate-500);\n      line-height: 1.6;\n      margin-bottom: 3rem;\n    }\n  \n    \/* Support Feature Items *\/\n    .capy-support-item {\n      display: flex;\n      gap: 1.25rem;\n      margin-bottom: 2rem;\n    }\n  \n    .capy-support-item:last-child {\n      margin-bottom: 0;\n    }\n  \n    .capy-support-icon {\n      flex-shrink: 0;\n      width: 3.5rem;\n      height: 3.5rem;\n      border-radius: 1rem;\n      background-color: var(--brand-50);\n      color: var(--brand-600);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  \n    .capy-support-text h4 {\n      font-size: 1.25rem;\n      font-weight: 700;\n      color: var(--brand-900);\n      margin-bottom: 0.5rem;\n    }\n  \n    .capy-support-text p {\n      font-size: 1rem;\n      color: var(--slate-600);\n      line-height: 1.6;\n      margin: 0;\n    }\n  \n    \/* ==============================================\n       PART 9: FINAL CTA & FOOTER\n       ============================================== *\/\n       .capy-cta-section {\n      position: relative;\n      padding: 10rem 1.5rem; \/* Massive whitespace *\/\n      background-color: var(--brand-900);\n      text-align: center;\n      overflow: hidden;\n    }\n  \n    \/* Deep background glows to imply the \"Metaverse\/AI\" space *\/\n    .capy-cta-glow-1, \n    .capy-cta-glow-2 {\n      position: absolute;\n      width: 600px;\n      height: 600px;\n      border-radius: 50%;\n      filter: blur(80px);\n      z-index: 1;\n      opacity: 0.15;\n      pointer-events: none;\n    }\n  \n    .capy-cta-glow-1 {\n      top: -200px;\n      left: -100px;\n      background: radial-gradient(circle, var(--brand-500) 0%, transparent 70%);\n    }\n  \n    .capy-cta-glow-2 {\n      bottom: -200px;\n      right: -100px;\n      background: radial-gradient(circle, #818cf8 0%, transparent 70%);\n    }\n  \n    .capy-cta-container {\n      position: relative;\n      max-width: 56rem; \/* Keeps the text constrained for readability *\/\n      margin: 0 auto;\n      z-index: 2;\n    }\n  \n    .capy-cta-headline {\n      font-size: 2.5rem;\n      font-weight: 800;\n      line-height: 1.1;\n      color: var(--white);\n      margin-bottom: 1.5rem;\n      letter-spacing: -0.03em;\n    }\n  \n    \/* Desktop Scaling for massive impact *\/\n    @media (min-width: 768px) {\n      .capy-cta-headline { font-size: 4rem; }\n    }\n  \n    .capy-text-gradient-light {\n      background-clip: text;\n      -webkit-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      background-image: linear-gradient(to right, #93c5fd, #c4b5fd); \/* Soft blue to purple *\/\n    }\n  \n    .capy-cta-subhead {\n      font-size: 1.25rem;\n      color: var(--slate-400);\n      line-height: 1.6;\n      margin-bottom: 3.5rem;\n      font-weight: 400;\n    }\n  \n    @media (min-width: 768px) {\n      .capy-cta-subhead { font-size: 1.5rem; }\n    }\n  \n    \/* CTA Button Group *\/\n    .capy-cta-actions {\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n      justify-content: center;\n      align-items: center;\n    }\n  \n    @media (min-width: 640px) {\n      .capy-cta-actions {\n        flex-direction: row;\n        gap: 1.5rem;\n      }\n    }\n  \n    .capy-btn-large {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      padding: 1.25rem 2.5rem;\n      font-size: 1.125rem;\n      font-weight: 700;\n      border-radius: 1rem;\n      text-decoration: none;\n      transition: all 0.3s ease;\n      width: 100%;\n    }\n  \n    @media (min-width: 640px) {\n      .capy-btn-large { width: auto; }\n    }\n  \n    \/* Primary Button (Blue) *\/\n    .capy-btn-cta-primary {\n      background-color: var(--brand-600);\n      color: var(--white);\n      box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.5);\n    }\n  \n    .capy-btn-cta-primary:hover {\n      background-color: var(--brand-500);\n      transform: translateY(-3px);\n      box-shadow: 0 20px 25px -5px rgba(37, 99, 235, 0.6);\n    }\n  \n    \/* Secondary Button (WhatsApp) *\/\n    .capy-btn-whatsapp {\n      background-color: transparent;\n      color: #4ade80; \/* Soft WhatsApp Green *\/\n      border: 2px solid #22c55e40;\n    }\n  \n    .capy-btn-whatsapp svg {\n      width: 1.5rem;\n      height: 1.5rem;\n      margin-right: 0.75rem;\n      fill: currentColor;\n    }\n  \n    .capy-btn-whatsapp:hover {\n      background-color: #22c55e;\n      color: var(--white);\n      border-color: #22c55e;\n      transform: translateY(-3px);\n      box-shadow: 0 10px 25px -5px rgba(34, 197, 94, 0.4);\n    }\n  \n  \/* ==============================================\n       THE MASTER FOOTER (From Homepage)\n       ============================================== *\/\n       .capy-footer-master {\n      border-top: 1px solid rgba(255, 255, 255, 0.05);\n      padding: 5rem 0 2rem 0;\n    }\n  \n    .capy-footer-grid {\n      display: grid;\n      grid-template-columns: 1fr;\n      gap: 3rem;\n      margin-bottom: 4rem;\n    }\n  \n    @media (min-width: 768px) {\n      .capy-footer-grid { grid-template-columns: 1fr 1fr; }\n      .capy-footer-form-col { grid-column: span 2; } \/* Form spans bottom on tablets *\/\n    }\n  \n    @media (min-width: 1024px) {\n      .capy-footer-grid { grid-template-columns: 1.2fr 1fr 1.5fr; gap: 4rem; }\n      .capy-footer-form-col { grid-column: span 1; } \/* Form takes 3rd column on desktop *\/\n    }\n  \n    .capy-footer-brand p {\n      color: var(--slate-400);\n      font-size: 0.95rem;\n      line-height: 1.6;\n      margin: 1.5rem 0;\n      max-width: 20rem;\n    }\n  \n    .capy-footer-logo {\n      width: 160px;\n      height: auto;\n    }\n  \n    .capy-footer-contact-list {\n      display: flex;\n      flex-direction: column;\n      gap: 0.75rem;\n    }\n  \n    .capy-footer-contact-list span {\n      display: flex;\n      align-items: center;\n      gap: 0.75rem;\n      color: var(--slate-300);\n      font-size: 0.9rem;\n    }\n  \n    .capy-footer-contact-list svg {\n      width: 1.2rem;\n      height: 1.2rem;\n      color: var(--brand-500);\n    }\n  \n    .capy-footer-master h4 {\n      color: var(--white);\n      font-size: 1.1rem;\n      font-weight: 800;\n      letter-spacing: 0.05em;\n      text-transform: uppercase;\n      margin-bottom: 1.5rem;\n    }\n  \n    .capy-footer-links {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 1rem;\n    }\n  \n    .capy-footer-links a {\n      color: var(--slate-400);\n      text-decoration: none;\n      font-size: 0.9rem;\n      transition: color 0.2s;\n    }\n  \n    .capy-footer-links a:hover { color: var(--white); }\n  \n    \/* ==============================================\n       FOOTER CF7 FORM OVERRIDES (Dark Glassmorphism)\n       ============================================== *\/\n    .capy-footer-form .wpcf7-form-control.wpcf7-text,\n    .capy-footer-form .wpcf7-form-control.wpcf7-textarea,\n    .capy-footer-form .wpcf7-form-control.wpcf7-select {\n      width: 100%;\n      box-sizing: border-box; \n      padding: 0.875rem 1rem;\n      border-radius: 0.75rem;\n      background-color: rgba(255, 255, 255, 0.05); \/* The dark glass effect *\/\n      border: 1px solid rgba(255, 255, 255, 0.1);\n      color: var(--white);\n      font-family: var(--font-sans);\n      font-size: 0.9rem;\n      outline: none;\n      transition: all 0.3s;\n      margin-bottom: 0.75rem; \n    }\n  \n    .capy-footer-form .wpcf7-form-control::placeholder { \n      color: var(--slate-500); \n    }\n    \n    .capy-footer-form .wpcf7-form-control:focus {\n      border-color: var(--brand-500);\n      background-color: rgba(255, 255, 255, 0.08);\n    }\n  \n    .capy-footer-form .wpcf7-form-control.wpcf7-textarea { \n      resize: vertical; \n      min-height: 80px; \n    }\n  \n    \/* The Footer Submit Button *\/\n    .capy-footer-form .wpcf7-submit {\n      display: inline-flex !important;\n      align-items: center !important;\n      justify-content: center !important;\n      padding: 1.125rem 2rem !important;\n      font-size: 1.05rem !important;\n      font-weight: 700 !important;\n      border-radius: 1rem !important;\n      background-color: var(--brand-600) !important;\n      color: var(--white) !important;\n      border: 1px solid var(--brand-600) !important;\n      transition: all 0.3s ease !important;\n      width: 100% !important;\n      cursor: pointer !important;\n      margin-top: 0.5rem !important;\n    }\n  \n    .capy-footer-form .wpcf7-submit:hover {\n      background-color: var(--brand-500) !important;\n      transform: translateY(-3px) !important;\n      box-shadow: 0 15px 30px -5px rgba(37, 99, 235, 0.5) !important;\n    }\n  \n    .capy-footer-form input,\n    .capy-footer-form textarea {\n      width: 100%;\n      box-sizing: border-box;\n      padding: 0.875rem 1rem;\n      border-radius: 0.75rem;\n      background-color: rgba(255, 255, 255, 0.05);\n      border: 1px solid rgba(255, 255, 255, 0.1);\n      color: var(--white);\n      font-family: var(--font-sans);\n      font-size: 0.9rem;\n      outline: none;\n      transition: all 0.3s;\n    }\n  \n    .capy-footer-form input::placeholder,\n    .capy-footer-form textarea::placeholder { color: var(--slate-500); }\n    \n    .capy-footer-form input:focus,\n    .capy-footer-form textarea:focus {\n      border-color: var(--brand-500);\n      background-color: rgba(255, 255, 255, 0.08);\n    }\n  \n    .capy-footer-form textarea { resize: vertical; }\n  \n    \/* Copyright Bar *\/\n    .capy-footer-bottom {\n      \/* display: flex;\n      flex-direction: column;\n      align-items: center; *\/\n      text-align: center;\n      gap: 1rem;\n      padding-top: 2rem;\n      border-top: 1px solid rgba(255, 255, 255, 0.05);\n      color: var(--slate-500);\n      font-size: 0.85rem;\n    }\n  \n    @media (min-width: 640px) {\n      .capy-footer-bottom { flex-direction: row; justify-content: space-between; }\n    }\n  \n    .capy-legal-links { display: flex; gap: 1.5rem; }\n    .capy-legal-links a { color: var(--slate-500); text-decoration: none; transition: color 0.2s; }\n    .capy-legal-links a:hover { color: var(--white); }\n  \n  \n    \/* animation trigger *\/\n  \/* ==============================================\n       CONTINUOUS SCROLL ANIMATIONS\n       ============================================== *\/\n       .capy-reveal {\n      opacity: 0;\n      transform: translateY(40px);\n      \/* This transition handles BOTH fading in and fading out smoothly *\/\n      transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); \n    }\n  \n    .capy-reveal.capy-active {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  \n    .capy-reveal-left { \n      transform: translateX(-40px); \n      opacity: 0; \n      transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); \n    }\n    \n    .capy-reveal-right { \n      transform: translateX(40px); \n      opacity: 0; \n      transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); \n    }\n    \n    .capy-reveal-left.capy-active, \n    .capy-reveal-right.capy-active { \n      opacity: 1; \n      transform: translateX(0); \n    }\n  \n    \/* Staggered Delays *\/\n    .capy-delay-1 { transition-delay: 0.1s; }\n    .capy-delay-2 { transition-delay: 0.2s; }\n    .capy-delay-3 { transition-delay: 0.3s; }\n  \n  \n  \n  \n  \n  \/* triple-threat animation system *\/\n    \n  \/* DEFAULT (MOBILE): Parallax disabled to prevent stacking overlap *\/\n  .capy-parallax-slow, \n    .capy-parallax-fast {\n      transform: none;\n      will-change: transform;\n      \/* FIX: Removed the 0.1s transition so the GPU doesn't fight the Javascript *\/\n    }\n    \/* basic animation: reveal state *\/\n    .capy-reveal-left, .capy-reveal-right {\n      opacity: 0;\n      transition: opacity 0.8s ease, transform 1s ease;\n    }\n  \n    \/* horizontal slide setup *\/\n    .capy-reveal-left { transform: translateX(-40px); }\n    .capy-reveal-right { transform: translateX(40px); }\n  \n    \/* MOBILE ACTIVE STATE: Just slide horizontally, no vertical parallax *\/\n    .capy-reveal-left.capy-active, \n    .capy-reveal-right.capy-active { \n      opacity: 1; \n      transform: translateX(0); \n    }\n  \n    \/* ==============================================\n       DESKTOP ONLY: ACTIVATE VERTICAL PARALLAX\n       ============================================== *\/\n    @media (min-width: 1024px) {\n      .capy-parallax-slow {\n        \/* slower movement for heavy elements like headlines *\/\n        transform: translateY(calc(var(--scroll-y, 0) * 0.08px));\n      }\n  \n      .capy-parallax-fast {\n        \/* faster\/inverse movement for narrative text *\/\n        transform: translateY(calc(var(--scroll-y, 0) * -0.08px));\n      }\n  \n      \/* horizontal slide + vertical parallax combined *\/\n      .capy-reveal-left.capy-active { \n        \/* horizontal resets to 0, but vertical is still controlled by parallax *\/\n        transform: translateX(0) translateY(calc(var(--scroll-y, 0) * 0.08px)); \n      }\n      \n      .capy-reveal-right.capy-active { \n        transform: translateX(0) translateY(calc(var(--scroll-y, 0) * -0.08px)); \n      }\n    }\n    \n  \n  \/* ==============================================\n       MULTI-ANGLE REVEAL SYSTEM (Anti-Flicker)\n       ============================================== *\/\n       .capy-reveal,\n    .capy-reveal-up, \n    .capy-reveal-down, \n    .capy-reveal-left, \n    .capy-reveal-right, \n    .capy-reveal-scale, \n    .capy-reveal-tilt {\n      opacity: 0;\n      transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), \n                  transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);\n      will-change: opacity, transform;\n      \n      \/* ANTI-FLICKER HARDWARE ACCELERATION *\/\n      -webkit-backface-visibility: hidden;\n      backface-visibility: hidden;\n      transform-style: preserve-3d;\n    }\n  \n    \/* The Starting Positions *\/\n    .capy-reveal-up { transform: translateY(60px); }\n    .capy-reveal-down { transform: translateY(-60px); }\n    .capy-reveal-left { transform: translateX(-60px); }\n    .capy-reveal-right { transform: translateX(60px); }\n    .capy-reveal-scale { transform: scale(0.8) translateY(40px); }\n    .capy-reveal-tilt { transform: translateY(60px) rotate(-5deg) scale(0.95); }\n  \n    \/* The Active\/End Position (Universal Reset) *\/\n    .capy-active.capy-reveal-up,\n    .capy-active.capy-reveal-down,\n    .capy-active.capy-reveal-left,\n    .capy-active.capy-reveal-right,\n    .capy-active.capy-reveal-scale,\n    .capy-active.capy-reveal-tilt {\n      opacity: 1;\n      transform: translate(0, 0) scale(1) rotate(0);\n    }\n  \n  \n  \n  \n  \/* ==============================================\n       MODAL STYLES & ANIMATIONS (Split Layout)\n       ============================================== *\/\n       .capy-modal-overlay {\n      position: fixed;\n      inset: 0;\n      background-color: rgba(15, 23, 42, 0.75); \n      backdrop-filter: blur(8px);\n      -webkit-backdrop-filter: blur(8px);\n      z-index: 9999;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 1.5rem;\n      opacity: 0;\n      visibility: hidden;\n      transition: all 0.3s ease;\n    }\n  \n    .capy-modal-overlay.capy-modal-active {\n      opacity: 1;\n      visibility: visible;\n    }\n  \n    \/* The New Wide Split Box *\/\n    .capy-modal-box.capy-modal-split {\n      background-color: var(--white);\n      width: 100%;\n      max-width: 850px; \/* Widened for the image *\/\n      border-radius: 1.5rem;\n      padding: 0; \/* Padding moved to the inner content *\/\n      position: relative;\n      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n      transform: scale(0.95) translateY(20px);\n      transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n  \n    .capy-modal-overlay.capy-modal-active .capy-modal-box {\n      transform: scale(1) translateY(0);\n    }\n  \n    \/* Left Side: The Image (Hidden on mobile to save space) *\/\n    .capy-modal-visual {\n      display: none;\n    }\n  \n    \/* Right Side: The Form Content *\/\n    .capy-modal-content {\n      padding: 2.5rem 2rem;\n      position: relative;\n    }\n  \n    \/* Desktop Layout Rules *\/\n    @media (min-width: 768px) {\n      .capy-modal-box.capy-modal-split {\n        flex-direction: row;\n      }\n      .capy-modal-visual {\n        display: flex;\n        width: 45%;\n        \/* Premium Office\/Tech Image with a dark gradient overlay *\/\n        background-image: \n          linear-gradient(to bottom, rgba(15, 23, 42, 0.1), rgba(15, 23, 42, 0.9)),\n          url('https:\/\/capytech.com\/wp-content\/uploads\/2026\/10\/capytech-lms-form-bg.webp');\n        background-size: cover;\n        background-position: left;\n        flex-direction: column;\n        justify-content: flex-end;\n        padding: 2.5rem;\n      }\n      .capy-modal-visual-text h4 {\n        font-size: 1.5rem;\n        font-weight: 700;\n        color: var(--white);\n        margin-bottom: 0.5rem;\n        line-height: 1.2;\n      }\n      .capy-modal-visual-text p {\n        font-size: 0.95rem;\n        color: var(--slate-300);\n        line-height: 1.5;\n        margin: 0;\n      }\n      .capy-modal-content {\n        width: 55%;\n        padding: 3rem;\n      }\n    }\n  \n    \/* Close Button *\/\n    .capy-modal-close {\n      position: absolute;\n      top: 1.5rem;\n      right: 1.5rem;\n      background: transparent;\n      border: none;\n      color: var(--slate-400);\n      cursor: pointer;\n      transition: color 0.2s ease;\n      z-index: 10;\n    }\n  \n    .capy-modal-close:hover {\n      color: var(--slate-900);\n    }\n  \n    \/* Header inside the form *\/\n    .capy-modal-header {\n      text-align: center;\n      margin-bottom: 2rem;\n    }\n  \n    .capy-modal-icon {\n      width: 3rem;\n      height: 3rem;\n      background-color: var(--brand-50);\n      color: var(--brand-600);\n      border-radius: 0.75rem;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin: 0 auto 1rem auto;\n    }\n  \n    .capy-modal-header h3 {\n      font-size: 1.5rem;\n      font-weight: 800;\n      color: var(--brand-900);\n      margin-bottom: 0.5rem;\n      letter-spacing: -0.02em;\n    }\n  \n    .capy-modal-header p {\n      font-size: 0.95rem;\n      color: var(--slate-500);\n      line-height: 1.5;\n      margin: 0;\n    }\n  \n    \/* Contact Form 7 Overrides *\/\n    .capy-form-group {\n      display: flex;\n      flex-direction: column;\n      gap: 0.5rem;\n      margin-bottom: 1.25rem;\n    }\n  \n    .capy-form-group label {\n      font-size: 0.875rem;\n      font-weight: 600;\n      color: var(--slate-700);\n    }\n  \n    .capy-form-group input,\n    .capy-form-group select,\n    .capy-form-group textarea,\n    .wpcf7-form-control.wpcf7-text,\n    .wpcf7-form-control.wpcf7-textarea,\n    .wpcf7-form-control.wpcf7-select {\n      width: 100%;\n      padding: 0.875rem 1rem;\n      border-radius: 0.75rem;\n      border: 1px solid var(--slate-200);\n      background-color: var(--slate-50);\n      font-size: 0.95rem;\n      font-family: var(--font-sans);\n      color: var(--slate-900);\n      transition: all 0.2s ease;\n      outline: none;\n      box-sizing: border-box;\n    }\n  \n    .wpcf7-form-control.wpcf7-textarea {\n      resize: vertical;\n      min-height: 100px;\n    }\n  \n    .wpcf7-form-control:focus {\n      background-color: var(--white);\n      border-color: var(--brand-500);\n      box-shadow: 0 0 0 3px var(--brand-100);\n    }\n  \n    \/* THE CENTERED SUBMIT BUTTON FIX *\/\n    .wpcf7 form .wpcf7-submit {\n      display: block !important;\n      width: 100% !important;\n      max-width: 280px !important; \n      margin: 1.5rem auto 0 auto !important; \n      padding: 1rem !important;\n      font-size: 1rem !important;\n      background-color: var(--brand-600) !important;\n      color: var(--white) !important;\n      border: none !important;\n      border-radius: 0.75rem !important;\n      font-weight: 700 !important;\n      cursor: pointer !important;\n      text-align: center !important;\n      transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;\n      transform-origin: center;\n    }\n  \n    .wpcf7 form .wpcf7-submit:hover {\n      background-color: var(--brand-500) !important;\n      transform: translateY(-2px);\n      box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.4);\n    }\n  \n    \/* ==============================================\n       SMOOTH BUTTON-TO-SPINNER SWAP & ALERTS\n       ============================================== *\/\n    \/* 1. Button collapses when submitting *\/\n    .wpcf7 form.submitting .wpcf7-submit {\n      opacity: 0 !important;\n      visibility: hidden !important;\n      height: 0 !important;\n      padding: 0 !important;\n      margin: 0 auto !important;\n      transform: scale(0.8) !important;\n      pointer-events: none !important;\n    }\n  \n  \/* 2. The WordPress Spinner (Re-styled to look like a modern SaaS loader) *\/\n  .wpcf7 form .wpcf7-spinner {\n      display: block !important;\n      width: 0px;\n      height: 0px;\n      margin: 0 auto !important;\n      opacity: 0;\n      visibility: hidden;\n      \/* Creating a sleek two-tone CSS ring *\/\n      border: 3px solid var(--brand-100);\n      border-top-color: var(--brand-600);\n      border-radius: 50%;\n      background: transparent !important;\n      transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);\n    }\n  \n    \/* KILL THE DOUBLE SPINNER: Hides the default CF7 SVG icon inside *\/\n    \/* ==============================================\n       KILL THE DOUBLE SPINNER (Nuclear Option)\n       Forces any default WP\/CF7 icons to disappear entirely\n       ============================================== *\/\n       .wpcf7 form .wpcf7-spinner > * {\n      display: none !important; \n    }\n    \n    .wpcf7 form .wpcf7-spinner svg {\n      display: none !important; \n      opacity: 0 !important;\n      width: 0 !important;\n      height: 0 !important;\n    }\n  \n    .wpcf7 form .wpcf7-spinner::before,\n    .wpcf7 form .wpcf7-spinner::after {\n      display: none !important;\n      content: none !important;\n    }\n  \n    \/* When submitting, the spinner grows and takes the button's place *\/\n    .wpcf7 form.submitting .wpcf7-spinner {\n      width: 32px;\n      height: 32px;\n      margin: 1.5rem auto 0 auto !important; \/* Matches the old button margin *\/\n      opacity: 1;\n      visibility: visible;\n      animation: capy-spin 0.8s linear infinite;\n    }\n  \n    @keyframes capy-spin {\n      from { transform: rotate(0deg); }\n      to { transform: rotate(360deg); }\n    }\n  \n    \/* 3. Style the Success\/Error Message box *\/\n    .wpcf7 form .wpcf7-response-output {\n      border-radius: 0.75rem !important;\n      margin: 1.5rem auto 0 auto !important;\n      font-size: 0.875rem !important;\n      border: none !important;\n      font-family: var(--font-sans) !important;\n      text-align: center !important;\n      max-width: 90% !important;\n      padding: 1rem !important;\n      font-weight: 600 !important;\n    }\n  \n    \/* Premium Green Success Alert *\/\n    .wpcf7 form.sent .wpcf7-response-output {\n      background-color: #dcfce7 !important; \n      color: #16a34a !important; \n    }\n    \n    \/* Premium Red Error Alert *\/\n    .wpcf7 form.failed .wpcf7-response-output,\n    .wpcf7 form.invalid .wpcf7-response-output {\n      background-color: #fee2e2 !important; \n      color: #dc2626 !important; \n    }\n  \n    \n  \n  \n    \n  <\/style>\n  \n  <div class=\"capytech-lms-wrapper\">\n    \n    <!-- first part -->\n    <section class=\"capy-hero\">\n      <div class=\"capy-container\">\n        <div class=\"capy-hero-grid\">\n          \n          <div class=\"capy-hero-load-left\">\n            <div class=\"capy-parallax-slow\">\n              <div class=\"capy-badge\">\n                <span class=\"capy-badge-dot\"><\/span>\n                Meet Siraj \u00b7 LMS 2.0 is here\n              <\/div>\n              \n              <h1>\n                The Next-Generation <br \/>\n                <span class=\"capy-text-gradient\">AI-Powered<\/span> LMS\n              <\/h1>\n              \n              <p class=\"capy-siraj-subline\">\n                Siraj, <span class=\"capy-arabic-inline\" lang=\"ar\" dir=\"rtl\">\u0633\u0650\u0631\u0627\u062c<\/span>, Arabic for \"lamp\", is the Capytech learning platform.\n              <\/p>\n              \n              <p>\n                Siraj is a next-generation, <strong>AI-powered LMS<\/strong> built for modern enterprises. Going beyond basic SCORM tracking, Siraj features a built-in omnichannel booking engine for physical, virtual, and Metaverse classrooms, alongside robust executive analytics.\n              <\/p>\n              \n              <div class=\"capy-btn-group\">\n                <a href=\"#capyDemoModal\" class=\"capy-btn capy-btn-primary\">Book a Live Demo<\/a>\n                <a href=\"#capy-features\" class=\"capy-btn capy-btn-secondary\">\n                  Explore Features\n                  <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 8l4 4m0 0l-4 4m4-4H3\" \/>\n                  <\/svg>\n                <\/a>\n              <\/div>\n  \n              <div class=\"capy-hero-trust\">\n                <div class=\"capy-trust-text\">\n                  Trusted by ACWA Power, DP World, Mubadala and more across the GCC\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n    \n          <div class=\"capy-mockup-wrapper capy-hero-load-right capy-hero-delay-1\">\n            <div class=\"capy-parallax-fast\">\n              <div class=\"capy-mockup-glow\"><\/div>\n              \n              <div class=\"capy-mockup\">\n                <div class=\"capy-mac-dots\">\n                  <span><\/span><span><\/span><span><\/span>\n                <\/div>\n                <div class=\"capy-mockup-inner\">\n                  <img decoding=\"async\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/10\/capytech-lms-screens.webp\" alt=\"Capytech AI-powered LMS dashboard\" fetchpriority=\"high\" \/>\n                   <div class=\"capy-mockup-fade\"><\/div>\n                <\/div>\n                \n                <div class=\"capy-floating-widget\">\n                  <div style=\"width: 2.5rem; height: 2.5rem; background-color: #dcfce7; border-radius: 50%; display: flex; align-items: center; justify-content: center;\">\n                    <svg style=\"width: 1.25rem; height: 1.25rem; color: #16a34a;\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"\/><\/svg>\n                  <\/div>\n                  <div>\n                    <div style=\"font-size: 0.75rem; font-weight: 600; color: var(--slate-500); text-transform: uppercase;\">AI Module<\/div>\n                    <div style=\"font-size: 0.875rem; font-weight: 700; color: var(--slate-900);\">100% Completed<\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n          \n        <\/div>\n      <\/div>\n    <\/section>\n  \n  \n  <!-- second part -->\n  <section class=\"capy-social capy-reveal\">\n    <p>Trusted by innovative organisations across the GCC and beyond<\/p>\n    \n    <div class=\"capy-ticker-wrapper\">\n      <div class=\"capy-ticker-mask-left\"><\/div>\n      <div class=\"capy-ticker-mask-right\"><\/div>\n  \n      <div class=\"capy-ticker-track\">\n        <div class=\"capy-ticker-group\">\n          <span class=\"capy-logo-item\">Momentum<\/span>\n          <span class=\"capy-logo-item\">ACWA Power<\/span>\n          <span class=\"capy-logo-item\">RCMC<\/span>\n          <span class=\"capy-logo-item\">OECD<\/span>\n          <span class=\"capy-logo-item\">Dubai Airports<\/span>\n          <span class=\"capy-logo-item\">Majid Al Futtaim<\/span>\n          <span class=\"capy-logo-item\">Mubadala<\/span>\n          <span class=\"capy-logo-item\">Unitatis<\/span>\n          <span class=\"capy-logo-item\">Pepsico<\/span>\n          <span class=\"capy-logo-item\">Cruise Saudi<\/span>\n          <span class=\"capy-logo-item\">NYU Abu Dhabi<\/span>\n          <span class=\"capy-logo-item\">Kerzner<\/span>\n          <span class=\"capy-logo-item\">DP World<\/span>\n          <span class=\"capy-logo-item\">Saudi Awwal Bank<\/span>\n          <span class=\"capy-logo-item\">Groz Beckert<\/span>\n          <span class=\"capy-logo-item\">Dubai Holding<\/span>\n          <span class=\"capy-logo-item\">Richemont<\/span>\n          <span class=\"capy-logo-item\">DPW Zodiac<\/span>\n          <span class=\"capy-logo-item\">Khansaheb<\/span>\n          <span class=\"capy-logo-item\">Shamal<\/span>\n          <span class=\"capy-logo-item\">Smart Hub<\/span> \n          <span class=\"capy-logo-item\">MSF<\/span>   \n          <span class=\"capy-logo-item\">ETHOS<\/span>  \n          <span class=\"capy-logo-item\">NOMAC<\/span>  \n          <span class=\"capy-logo-item\">Commercial Bank of Dubai<\/span>  \n          <span class=\"capy-logo-item\">FAB<\/span>\n          <span class=\"capy-logo-item\">Tecom Group<\/span>\n          <span class=\"capy-logo-item\">Dar Al Riyadh<\/span>  \n          <span class=\"capy-logo-item\">SIPCHEM<\/span>\n          <span class=\"capy-logo-item\">ASGC<\/span>\n          <span class=\"capy-logo-item\">McCann Health<\/span>\n        <\/div>\n  \n        <div class=\"capy-ticker-group\">\n          <span class=\"capy-logo-item\">Momentum<\/span>\n          <span class=\"capy-logo-item\">ACWA Power<\/span>\n          <span class=\"capy-logo-item\">RCMC<\/span>\n          <span class=\"capy-logo-item\">OECD<\/span>\n          <span class=\"capy-logo-item\">Dubai Airports<\/span>\n          <span class=\"capy-logo-item\">Majid Al Futtaim<\/span>\n          <span class=\"capy-logo-item\">Mubadala<\/span>\n          <span class=\"capy-logo-item\">Unitatis<\/span>\n          <span class=\"capy-logo-item\">Pepsico<\/span>\n          <span class=\"capy-logo-item\">Cruise Saudi<\/span>\n          <span class=\"capy-logo-item\">NYU Abu Dhabi<\/span>\n          <span class=\"capy-logo-item\">Kerzner<\/span>\n          <span class=\"capy-logo-item\">DP World<\/span>\n          <span class=\"capy-logo-item\">Saudi Awwal Bank<\/span>\n          <span class=\"capy-logo-item\">Groz Beckert<\/span>\n          <span class=\"capy-logo-item\">Dubai Holding<\/span>\n          <span class=\"capy-logo-item\">Richemont<\/span>\n          <span class=\"capy-logo-item\">DPW Zodiac<\/span>\n          <span class=\"capy-logo-item\">Khansaheb<\/span>\n          <span class=\"capy-logo-item\">Shamal<\/span>\n          <span class=\"capy-logo-item\">Smart Hub<\/span> \n          <span class=\"capy-logo-item\">MSF<\/span>   \n          <span class=\"capy-logo-item\">ETHOS<\/span>  \n          <span class=\"capy-logo-item\">NOMAC<\/span>  \n          <span class=\"capy-logo-item\">Commercial Bank of Dubai<\/span>  \n          <span class=\"capy-logo-item\">FAB<\/span>\n          <span class=\"capy-logo-item\">Tecom Group<\/span>\n          <span class=\"capy-logo-item\">Dar Al Riyadh<\/span>  \n          <span class=\"capy-logo-item\">SIPCHEM<\/span>\n          <span class=\"capy-logo-item\">ASGC<\/span>\n          <span class=\"capy-logo-item\">McCann Health<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n  \n  <!-- third part -->\n  <section class=\"capy-split-intro\">\n    <div class=\"capy-split-container\">\n      \n      <div class=\"capy-reveal-left\">\n        <div class=\"capy-parallax-slow capy-left-sticky-wrapper\">\n          \n          <h2 class=\"capy-split-headline\">\n            Don't Just Manage Learning. <br\/>\n            <span class=\"capy-highlight\">Master It.<\/span>\n          <\/h2>\n  \n          <div class=\"capy-left-visual-wrapper\">\n            <img decoding=\"async\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/03\/slant.png\" alt=\"Siraj LMS Mobile Experience\" class=\"capy-left-visual-img\">\n            \n            <div class=\"capy-left-visual-glow\"><\/div>\n          <\/div>\n  \n        <\/div>\n      <\/div>\n  \n      <div class=\"capy-reveal-right\">\n        <div class=\"capy-parallax-fast capy-split-narrative\">\n          <p>\n            Traditional LMS platforms are static content repositories. We built Siraj to be a living, intelligent learning hub. Whether you are running compliance training in a virtual classroom or deploying immersive decision-making scenarios powered by AI, our platform provides a seamless, centralized experience for learners, instructors, and admins.\n          <\/p>\n          \n          <div class=\"capy-chip-grid\">\n            <div class=\"capy-ui-chip capy-reveal capy-delay-1\">\n              <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"><\/path><\/svg>\n              Centralized Hub\n            <\/div>\n            <div class=\"capy-ui-chip capy-reveal capy-delay-2\">\n              <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"><\/path><\/svg>\n              Virtual Classrooms\n            <\/div>\n            <div class=\"capy-ui-chip capy-reveal capy-delay-3\">\n              <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"><\/path><\/svg>\n              Immersive AI Scenarios\n            <\/div>\n          <\/div>\n  \n          <div class=\"capy-split-image-wrapper capy-reveal-up capy-delay-3\">\n            <img decoding=\"async\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/03\/analytic.png\" alt=\"Siraj LMS Analytics Dashboard\" class=\"capy-split-image\">\n          <\/div>\n          \n        <\/div>\n      <\/div>\n  \n    <\/div>\n  <\/section>\n<!--CXL-GALLERY-->\n<section class=\"cxl cxl-gallery\" id=\"siraj-in-action\">\n  <style>\n    .cxl{font-family:inherit;color:#0f172a;padding:5rem 1.5rem}\n    .cxl-gallery{background:#f8fafc}\n    .cxl-faq{background:#ffffff}\n    .cxl-wrap{max-width:1180px;margin:0 auto}\n    .cxl-eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#2563eb;margin-bottom:.75rem}\n    .cxl h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0 0 1rem;color:#0f172a}\n    .cxl h3{font-size:1.25rem;font-weight:800;margin:0 0 .4rem;color:#0f172a}\n    .cxl-intro{font-size:1.08rem;line-height:1.7;color:#475569;max-width:780px;margin:0 0 2.5rem}\n    .cxl figure{margin:0;background:#fff;border:1px solid #e2e8f0;border-radius:16px;overflow:hidden;box-shadow:0 14px 34px rgba(15,23,42,.08)}\n    .cxl figure img{display:block;width:100%;height:auto}\n    .cxl figcaption{padding:1rem 1.2rem;color:#475569;line-height:1.55;font-size:.97rem}\n    .cxl figcaption b{display:block;color:#0f172a;margin-bottom:.15rem}\n    .cxl-row{display:grid;gap:1.25rem;margin-bottom:1.25rem}\n    .cxl-row-a{grid-template-columns:1.6fr .62fr}\n    .cxl-row-b{grid-template-columns:1fr 1fr}\n    .cxl-sub{margin:3rem 0 1.25rem}\n    .cxl-sub p{color:#475569;line-height:1.65;max-width:760px;margin:0}\n    .cxl-cta{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem}\n    .cxl-btn{display:inline-block;background:#2563eb;color:#fff;font-weight:700;padding:.85rem 1.4rem;border-radius:10px;text-decoration:none}\n    .cxl-btn:hover,.cxl-btn:focus{background:#1d4ed8;color:#fff}\n    .cxl-btn-o{background:#fff;color:#0f172a;border:1px solid #cbd5e1}\n    .cxl-btn-o:hover,.cxl-btn-o:focus{background:#fff;color:#2563eb;border-color:#2563eb}\n    .cxl details{background:#fff;border:1px solid #e2e8f0;border-radius:14px;margin:0 0 .75rem;overflow:hidden}\n    .cxl summary{cursor:pointer;list-style:none;padding:1.15rem 3rem 1.15rem 1.4rem;font-weight:700;font-size:1.05rem;position:relative;color:#0f172a}\n    .cxl summary::-webkit-details-marker{display:none}\n    .cxl summary::after{content:\"+\";position:absolute;right:1.3rem;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:400;color:#2563eb}\n    .cxl details[open] summary::after{content:\"\\2212\"}\n    .cxl details p{margin:0;padding:0 1.4rem 1.25rem;color:#475569;line-height:1.7}\n    .cxl details a{color:#2563eb}\n    @media (max-width:860px){.cxl-row-a,.cxl-row-b{grid-template-columns:1fr}.cxl{padding:3.5rem 1rem}}\n  <\/style>\n  <div class=\"cxl-wrap\">\n    <span class=\"cxl-eyebrow\">See Siraj in action<\/span>\n    <h2>Learner journeys people want to follow<\/h2>\n    <p class=\"cxl-intro\">Siraj replaces the usual list of courses with a guided journey. Every learner sees where they are, what comes next and how far they have come, on a desktop or on their phone, in English, Arabic or any language.<\/p>\n    <div class=\"cxl-row cxl-row-a\">\n      <figure>\n        <img loading=\"lazy\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/10\/siraj-lms-learner-journey-map.webp\" width=\"1600\" height=\"1000\" loading=\"lazy\" decoding=\"async\" alt=\"Siraj LMS learner journey map showing lessons, checks, XP and a valid licence\">\n        <figcaption><b>The journey map<\/b>Lessons, knowledge checks and milestones laid out as one clear path, with progress and rewards along the way.<\/figcaption>\n      <\/figure>\n      <figure>\n        <img loading=\"lazy\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/10\/siraj-lms-mobile-journey.webp\" width=\"700\" height=\"1515\" loading=\"lazy\" decoding=\"async\" alt=\"Siraj LMS learner journey on a mobile phone\">\n        <figcaption><b>On any phone<\/b>The same journey on mobile, for frontline and field teams.<\/figcaption>\n      <\/figure>\n    <\/div>\n    <figure style=\"max-width:820px;margin:0 auto\">\n      <img loading=\"lazy\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/10\/siraj-lms-dubai-journey-world.webp\" width=\"800\" height=\"410\" loading=\"lazy\" decoding=\"async\" alt=\"Siraj LMS journey themed on the Dubai skyline, from Welcome to Certificate\">\n      <figcaption><b>Themed to your organisation<\/b>Journeys can carry your own world and brand, like this one set on the Dubai skyline, from Welcome to Certificate.<\/figcaption>\n    <\/figure>\n\n    <div class=\"cxl-sub\">\n      <h3>Dashboards that show managers what to do next<\/h3>\n      <p>Managers and L&amp;D teams see who has started, who has stalled, which teams are behind and which certificates are due, without exporting a single spreadsheet.<\/p>\n    <\/div>\n    <div class=\"cxl-row cxl-row-b\">\n      <figure>\n        <img loading=\"lazy\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/10\/siraj-lms-manager-dashboard-overview.webp\" width=\"1600\" height=\"1000\" loading=\"lazy\" decoding=\"async\" alt=\"Siraj LMS manager dashboard: learners, coverage, stalled learners and progress by stage\">\n        <figcaption><b>Manager overview<\/b>Learners, coverage, stalled learners and progress by stage in one view.<\/figcaption>\n      <\/figure>\n      <figure>\n        <img loading=\"lazy\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/10\/siraj-lms-team-progress-dashboard.webp\" width=\"1600\" height=\"1000\" loading=\"lazy\" decoding=\"async\" alt=\"Siraj LMS team progress dashboard comparing departments\">\n        <figcaption><b>Team progress<\/b>Compare departments and spot the teams that need a nudge.<\/figcaption>\n      <\/figure>\n      <figure>\n        <img loading=\"lazy\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/10\/siraj-lms-certification-renewals-dashboard.webp\" width=\"1600\" height=\"1000\" loading=\"lazy\" decoding=\"async\" alt=\"Siraj LMS certification and renewals dashboard\">\n        <figcaption><b>Certificates and renewals<\/b>See what is valid, what is expiring and who needs to renew, before an audit finds it.<\/figcaption>\n      <\/figure>\n      <figure>\n        <img loading=\"lazy\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/10\/siraj-lms-impact-dashboard.webp\" width=\"1600\" height=\"1000\" loading=\"lazy\" decoding=\"async\" alt=\"Siraj LMS impact dashboard showing hours saved reported by learners\">\n        <figcaption><b>Impact<\/b>What learners say the training changed, including the hours they report saving.<\/figcaption>\n      <\/figure>\n    <\/div>\n    <div class=\"cxl-cta\">\n      <a class=\"cxl-btn\" href=\"\/en\/contact\/\">See Siraj in a free demo<\/a>\n      <a class=\"cxl-btn cxl-btn-o\" href=\"\/en\/lms-requirements-checklist\/\">Free LMS requirements checklist<\/a>\n      <a class=\"cxl-btn cxl-btn-o\" href=\"\/en\/off-the-shelf-courses\/\">Browse ready-made courses<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n  \n    <!-- fourth part -->\n    <section class=\"capy-bento-section\" id=\"capy-features\">\n    \n      <div class=\"capy-bento-header capy-reveal-up\">\n        <h3>An AI-Powered LMS Supercharged for Growth<\/h3>\n        <p>Meet the smart tools doing the heavy lifting for your instructors and learners.<\/p>\n      <\/div>\n    \n      <div class=\"capy-bento-grid\">\n        \n        <div class=\"capy-bento-card capy-span-2 capy-reveal-left capy-delay-1\">\n          <div class=\"capy-card-glow\"><\/div>\n          <div class=\"capy-bento-icon\">\n            <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"><\/path><\/svg>\n          <\/div>\n          <h4>24\/7 AI Tutor<\/h4>\n          <p>Never leave a learner stuck. Our intelligent AI Tutor provides continuous, personalized guidance, answering questions in real-time and adapting to individual learning paces to ensure no one falls behind.<\/p>\n        <\/div>\n    \n        <div class=\"capy-bento-card capy-reveal-right capy-delay-2\">\n          <div class=\"capy-bento-icon\" style=\"background-color: #fef2f2; color: #ef4444;\">\n            <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3\"><\/path><\/svg>\n          <\/div>\n          <h4>AI Feedback Tool<\/h4>\n          <p>Instant, actionable insights. Move beyond basic right-or-wrong quizzes. Our AI analyzes open-ended responses and provides nuanced, constructive feedback instantly, saving trainers hundreds of hours.<\/p>\n        <\/div>\n    \n        <div class=\"capy-bento-card capy-reveal-scale capy-delay-1\">\n          <div class=\"capy-bento-icon\" style=\"background-color: #fdf4ff; color: #d946ef;\">\n            <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"><\/path><polyline points=\"3.27 6.96 12 12.01 20.73 6.96\"><\/polyline><line x1=\"12\" y1=\"22.08\" x2=\"12\" y2=\"12\"><\/line><\/svg>\n          <\/div>\n          <h4>AI Scenario Builder<\/h4>\n          <p>Automatically generate dynamic, branch-based scenarios for your teams. Perfect for practicing complex decision-making and crisis management in a risk-free environment.<\/p>\n        <\/div>\n    \n        <div class=\"capy-bento-card capy-span-2 capy-reveal-tilt capy-delay-2\" style=\"background: linear-gradient(to bottom right, #ffffff, #f1f5f9); border-color: var(--brand-100);\">\n          <div class=\"capy-card-glow capy-parallax-fast\" style=\"background: radial-gradient(circle, #c7d2fe 0%, transparent 70%); width: 400px; height: 400px; right: -50px;\"><\/div>\n          <div class=\"capy-bento-icon\" style=\"background-color: #e0e7ff; color: #4f46e5;\">\n            <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M2 12h3.01M22 12h-3.01M12 2v3.01M12 22v-3.01M15.5 6.5l-2.12 2.12M8.5 17.5l-2.12 2.12M17.5 17.5l-2.12-2.12M6.5 6.5l2.12 2.12\"><\/path><\/svg>\n          <\/div>\n          <h4>Autonomous AI Avatars<\/h4>\n          <p>Drop your learners into immersive Metaverse environments populated by interactive AI characters. Practice real-time customer service and interpersonal skills in an active 3D world.<\/p>\n        <\/div>\n    \n        <div class=\"capy-bento-card capy-span-2 capy-reveal-up capy-delay-1\">\n          <div class=\"capy-card-glow\"><\/div>\n          <div class=\"capy-bento-icon\" style=\"background-color: #ecfdf5; color: #10b981;\">\n            <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><line x1=\"18\" y1=\"20\" x2=\"18\" y2=\"10\"><\/line><line x1=\"12\" y1=\"20\" x2=\"12\" y2=\"4\"><\/line><line x1=\"6\" y1=\"20\" x2=\"6\" y2=\"14\"><\/line><\/svg>\n          <\/div>\n          <h4>AI-Driven Analytics & Dashboards<\/h4>\n          <p>Give management a clear view of organisational capability. Our intelligent back-end analyzes platform-wide data to automatically spot knowledge gaps and recommend training.<\/p>\n        <\/div>\n    \n        <div class=\"capy-bento-card capy-reveal-right capy-delay-2\">\n          <div class=\"capy-bento-icon\" style=\"background-color: #fffbeb; color: #d97706;\">\n            <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"><\/path><\/svg>\n          <\/div>\n          <h4>AI Proctoring<\/h4>\n          <p>Secure your certifications with intelligent, automated monitoring. Ensure fair, reliable testing without manual human proctoring.<\/p>\n        <\/div>\n    \n      <\/div>\n    <\/section>\n  \n  <!-- Why Siraj -->\n  <section class=\"capy-why-siraj capy-reveal-up\">\n    <div class=\"capy-why-siraj-inner\">\n      <h3>Why Siraj?<\/h3>\n      <p>\n        Siraj (<span class=\"capy-arabic-inline\" lang=\"ar\" dir=\"rtl\">\u0633\u0650\u0631\u0627\u062c<\/span>) is Arabic for lamp, a source of light. Built in the region, for the region: full Arabic and English support, hosted in-region, and delivered by a team that has been building corporate learning across the GCC since 2013.\n      <\/p>\n    <\/div>\n  <\/section>\n  \n  <!-- part five -->\n  <section class=\"capy-logistics\">\n    <div class=\"capy-logistics-container\">\n      \n      <div class=\"capy-logistics-content capy-reveal-left\">\n        <h2>Omnichannel Cohort Booking: <br><span class=\"capy-highlight\">Any Room, Any Reality<\/span><\/h2>\n        <p class=\"capy-logistics-body\">\n          Managing schedules shouldn't be a headache. Our advanced booking engine brings students, teachers, and classrooms together on one unified calendar, wherever the \"classroom\" happens to be.\n        <\/p>\n  \n        <div class=\"capy-feature-list\">\n          \n          <div class=\"capy-feature-item capy-reveal-up capy-delay-1\">\n            <div class=\"capy-feature-icon\" style=\"background-color: var(--brand-50); color: var(--brand-600);\">\n              <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"><\/path><circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle><\/svg>\n            <\/div>\n            <div>\n              <h4>Real-World Classrooms<\/h4>\n              <p>Effortlessly book physical training rooms, manage seating capacities, and assign on-site instructors.<\/p>\n            <\/div>\n          <\/div>\n  \n          <div class=\"capy-feature-item capy-reveal-up capy-delay-2\">\n            <div class=\"capy-feature-icon\" style=\"background-color: #fce7f3; color: #db2777;\">\n              <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><polygon points=\"23 7 16 12 23 17 23 7\"><\/polygon><rect x=\"1\" y=\"5\" width=\"15\" height=\"14\" rx=\"2\" ry=\"2\"><\/rect><\/svg>\n            <\/div>\n            <div>\n              <h4>Virtual Classrooms<\/h4>\n              <p>Host live sessions your way. Utilize built-in virtual classrooms or seamlessly connect preferred tools like Zoom and MS Teams.<\/p>\n            <\/div>\n          <\/div>\n  \n          <div class=\"capy-feature-item capy-reveal-up capy-delay-3\">\n            <div class=\"capy-feature-icon\" style=\"background-color: #e0e7ff; color: #4f46e5;\">\n              <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M2 12h3.01M22 12h-3.01M12 2v3.01M12 22v-3.01M15.5 6.5l-2.12 2.12M8.5 17.5l-2.12 2.12M17.5 17.5l-2.12-2.12M6.5 6.5l2.12 2.12\"><\/path><\/svg>\n            <\/div>\n            <div>\n              <h4>Metaverse Academies<\/h4>\n              <p>Step into the future. Instantly schedule and deploy learner cohorts into fully immersive VR environments directly from the dashboard.<\/p>\n            <\/div>\n          <\/div>\n  \n        <\/div>\n      <\/div>\n  \n      <div class=\"capy-logistics-visual capy-reveal-right\">\n        \n        <div class=\"capy-visual-backdrop\"><\/div>\n  \n        <div class=\"capy-floating-badge capy-badge-meta\">\n          <div class=\"capy-badge-icon\" style=\"background-color: #e0e7ff; color: #4f46e5;\">\n            <svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"7\" width=\"20\" height=\"10\" rx=\"2\" ry=\"2\"><\/rect><path d=\"M7 17v2a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-2\"><\/path><path d=\"M12 17v-4\"><\/path><\/svg>\n          <\/div>\n          Metaverse Room Alpha\n        <\/div>\n  \n        <div class=\"capy-calendar-ui\">\n          <div class=\"capy-cal-header\">\n            <div class=\"capy-cal-title\">Cohort Schedule<\/div>\n            <div class=\"capy-cal-dots\">\n              <span><\/span><span><\/span><span><\/span>\n            <\/div>\n          <\/div>\n          <div class=\"capy-cal-grid\">\n            <div class=\"capy-cal-day\"><\/div><div class=\"capy-cal-day\"><\/div><div class=\"capy-cal-day\"><\/div><div class=\"capy-cal-day active-physical\"><\/div><div class=\"capy-cal-day\"><\/div><div class=\"capy-cal-day\"><\/div><div class=\"capy-cal-day\"><\/div>\n            <div class=\"capy-cal-day\"><\/div><div class=\"capy-cal-day active-virtual\"><\/div><div class=\"capy-cal-day active-virtual\"><\/div><div class=\"capy-cal-day\"><\/div><div class=\"capy-cal-day\"><\/div><div class=\"capy-cal-day\"><\/div><div class=\"capy-cal-day\"><\/div>\n            <div class=\"capy-cal-day\"><\/div><div class=\"capy-cal-day\"><\/div><div class=\"capy-cal-day\"><\/div><div class=\"capy-cal-day\"><\/div><div class=\"capy-cal-day active-meta\"><\/div><div class=\"capy-cal-day active-meta\"><\/div><div class=\"capy-cal-day\"><\/div>\n            <div class=\"capy-cal-day active-physical\"><\/div><div class=\"capy-cal-day\"><\/div><div class=\"capy-cal-day\"><\/div><div class=\"capy-cal-day\"><\/div><div class=\"capy-cal-day\"><\/div><div class=\"capy-cal-day\"><\/div><div class=\"capy-cal-day\"><\/div>\n            <div class=\"capy-cal-day\"><\/div><div class=\"capy-cal-day\"><\/div><div class=\"capy-cal-day active-virtual\"><\/div><div class=\"capy-cal-day\"><\/div><div class=\"capy-cal-day\"><\/div><div class=\"capy-cal-day\"><\/div><div class=\"capy-cal-day\"><\/div>\n          <\/div>\n        <\/div>\n  \n        <div class=\"capy-floating-badge capy-badge-physical\">\n          <div class=\"capy-badge-icon\" style=\"background-color: var(--brand-50); color: var(--brand-600);\">\n            <svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"><\/path><\/svg>\n          <\/div>\n          Boardroom A (Riyadh)\n        <\/div>\n  \n      <\/div>\n  \n    <\/div>\n  \n  \n    <!-- part six -->\n  <section class=\"capy-core-section\">\n    \n    <div class=\"capy-core-header capy-reveal-up\">\n      <h2>Everything You Expect. <br><span class=\"capy-highlight\">And More.<\/span><\/h2>\n      <p>Underneath the AI and Metaverse capabilities lies a rock-solid, fully-featured Learning Management System designed for ease of use, compliance, and everyday administration.<\/p>\n    <\/div>\n  \n    <div class=\"capy-core-grid\">\n      \n      <div class=\"capy-core-item capy-reveal-scale capy-delay-1\">\n        <div class=\"capy-core-icon\">\n          <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"><\/line><\/svg>\n        <\/div>\n        <div class=\"capy-core-text\">\n          <h4>Native Mobile App<\/h4>\n          <p>Learning on the go. Available natively on Apple and Android, allowing your team to access their training anytime, anywhere.<\/p>\n        <\/div>\n      <\/div>\n  \n      <div class=\"capy-core-item capy-reveal-scale capy-delay-2\">\n        <div class=\"capy-core-icon\">\n          <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"><\/path><\/svg>\n        <\/div>\n        <div class=\"capy-core-text\">\n          <h4>Fully White-Labeled<\/h4>\n          <p>It\u2019s your academy. We fully rebrand the LMS to match your corporate identity, running seamlessly on your own custom domain.<\/p>\n        <\/div>\n      <\/div>\n  \n      <div class=\"capy-core-item capy-reveal-scale capy-delay-1\">\n        <div class=\"capy-core-icon\">\n          <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z\"><\/path><\/svg>\n        <\/div>\n        <div class=\"capy-core-text\">\n          <h4>Universal Content Compatibility<\/h4>\n          <p>Bring your own training to our <strong>AI-powered LMS<\/strong>. Seamlessly host <a href=\"https:\/\/scorm.com\/\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"color: var(--brand-600); text-decoration: underline;\">SCORM<\/a>, xAPI, videos, PDFs, and custom modules in one centralized repository.<\/p>\n        <\/div>\n      <\/div>\n  \n      <div class=\"capy-core-item capy-reveal-scale capy-delay-2\">\n        <div class=\"capy-core-icon\">\n          <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M4 19.5A2.5 2.5 0 0 1 6.5 17H20\"><\/path><path d=\"M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z\"><\/path><\/svg>\n        <\/div>\n        <div class=\"capy-core-text\">\n          <h4>Free \"Quick Start\" Library<\/h4>\n          <p>Don't wait to launch. Get instant access to a beautifully designed, mobile-responsive library of 50+ essential Business & Wellness modules, available in English and Arabic.<\/p>\n        <\/div>\n      <\/div>\n  \n      <div class=\"capy-core-item capy-reveal-scale capy-delay-1\">\n        <div class=\"capy-core-icon\">\n          <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"><\/path><\/svg>\n        <\/div>\n        <div class=\"capy-core-text\">\n          <h4>Admin & Compliance Tracking<\/h4>\n          <p>The day-to-day engine. Give admins instant visibility into course completions, mandatory compliance statuses, and user engagement. Export reports with a click.<\/p>\n        <\/div>\n      <\/div>\n  \n      <div class=\"capy-core-item capy-reveal-scale capy-delay-2\">\n        <div class=\"capy-core-icon\">\n          <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.77 3.77z\"><\/path><\/svg>\n        <\/div>\n        <div class=\"capy-core-text\">\n          <h4>Agile Customization & Premium Support<\/h4>\n          <p>No red tape, just results. We provide lightning-fast support and have the in-house development power to build bespoke features and tailored analytics exactly the way you want them.<\/p>\n        <\/div>\n      <\/div>\n  \n    <\/div>\n  <\/section>\n  \n  <\/section>\n  \n  \n  \n  <!-- part seven -->\n  <section class=\"capy-pricing-section\">\n    \n    <div class=\"capy-pricing-header capy-reveal-up\">\n      <h2>A Solution Built for <br><span class=\"capy-highlight\">Your Scale<\/span><\/h2>\n      <p>Choose the tier that matches your organisation's learning maturity.<\/p>\n    <\/div>\n  \n    <div class=\"capy-pricing-grid\">\n      \n      <div class=\"capy-reveal-up capy-delay-1\" style=\"height: 100%;\">\n        <div class=\"capy-pricing-card capy-tier-1\">\n          <div class=\"capy-tier-name\">Essential Learning Hub<\/div>\n          <div class=\"capy-tier-desc\">Perfect for organisations looking to launch a modern, branded online academy quickly.<\/div>\n          \n          <ul class=\"capy-tier-features\">\n            <li>\n              <svg class=\"capy-check-icon\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n              Custom Branded LMS Domain\n            <\/li>\n            <li>\n              <svg class=\"capy-check-icon\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n              Native Mobile App (iOS\/Android)\n            <\/li>\n            <li>\n              <svg class=\"capy-check-icon\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n              Free 50+ Course Library (EN & AR)\n            <\/li>\n            <li>\n              <svg class=\"capy-check-icon\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n              Standard Assessments & Reporting\n            <\/li>\n            <li>\n              <svg class=\"capy-check-icon\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n              Dedicated Support Team\n            <\/li>\n          <\/ul>\n  \n          <a href=\"#capyDemoModal\" class=\"capy-tier-btn capy-btn-outline\">Inquire Now<\/a>\n        <\/div>\n      <\/div>\n  \n      <div class=\"capy-reveal-up capy-delay-2\" style=\"height: 100%;\">\n        <div class=\"capy-pricing-card capy-tier-2\">\n          <div class=\"capy-tier-name\">Advanced Blended Academy<\/div>\n          <div class=\"capy-tier-desc\">For growing teams that mix self-paced online learning with live, instructor-led training.<\/div>\n          \n          <div class=\"capy-feature-group-title\">Everything in Essential, plus:<\/div>\n          <ul class=\"capy-tier-features\">\n            <li>\n              <svg class=\"capy-check-icon\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n              Advanced Cohort Booking Engine\n            <\/li>\n            <li>\n              <svg class=\"capy-check-icon\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n              Real-world Classroom Management\n            <\/li>\n            <li>\n              <svg class=\"capy-check-icon\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n              Virtual Classroom Integration (Teams\/Zoom)\n            <\/li>\n            <li>\n              <svg class=\"capy-check-icon\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n              Standard AI Feedback Tools\n            <\/li>\n          <\/ul>\n  \n          <a href=\"#capyDemoModal\" class=\"capy-tier-btn capy-btn-outline\">Inquire Now<\/a>\n        <\/div>\n      <\/div>\n  \n      <div class=\"capy-reveal-up capy-delay-3\" style=\"height: 100%;\">\n        <div class=\"capy-pricing-card capy-premium\">\n          <div class=\"capy-premium-badge\">Recommended<\/div>\n          \n          <div class=\"capy-tier-name\">Visionary AI & Metaverse Suite<\/div>\n          <div class=\"capy-tier-desc\">The ultimate package for forward-thinking enterprises pushing the boundaries of L&D.<\/div>\n          \n          <div class=\"capy-feature-group-title\">Everything in Advanced, plus:<\/div>\n          <ul class=\"capy-tier-features\">\n            <li>\n              <svg class=\"capy-check-icon\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n              Full AI Suite (AI Tutor & Scenario Builder)\n            <\/li>\n            <li>\n              <svg class=\"capy-check-icon\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n              AI Exam Proctoring\n            <\/li>\n            <li>\n              <svg class=\"capy-check-icon\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n              Metaverse Academy Booking & Integration\n            <\/li>\n            <li>\n              <svg class=\"capy-check-icon\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n              Custom API Integrations (HRIS\/ERP)\n            <\/li>\n          <\/ul>\n  \n          <a href=\"#capyDemoModal\" class=\"capy-tier-btn capy-btn-solid\">Talk to Sales<\/a>\n        <\/div>\n      <\/div>\n  \n    <\/div>\n  <\/section>\n  \n  <!-- part eight -->\n  <section class=\"capy-promise-section\">\n    <div class=\"capy-promise-container\">\n      \n      <div class=\"capy-promise-visual capy-reveal-left\">\n        <div class=\"capy-promise-backdrop\"><\/div>\n        \n        <div class=\"capy-promise-photo\">\n          <img decoding=\"async\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/08\/success.webp\" alt=\"Capytech Customer Success Expert\" \/>\n        <\/div>\n  \n        <div class=\"capy-promo-graphic\">\n          <div class=\"capy-promo-icon-box\">\n            <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"><\/path><path d=\"M3 15v4c0 1.1.9 2 2 2h14\"><\/path><path d=\"M12 7l-3 3 3 3\"><\/path><path d=\"M9 10h8\"><\/path><\/svg>\n          <\/div>\n          <div class=\"capy-promo-text\">\n            <h5>Launch Package<\/h5>\n            <p>Posters & Animations Included<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n  \n      <div class=\"capy-promise-content\">\n        \n        <h2 class=\"capy-reveal-right\">\n          We Don't Just Hand You the Keys. <br><span class=\"capy-highlight\">We Help You Drive.<\/span>\n        <\/h2>\n        \n        <p class=\"capy-promise-body capy-reveal-right capy-delay-1\">\n          Implementing a new system can be daunting, but with Capytech, you are never alone. We partner with you to ensure your platform is a massive success from day one.\n        <\/p>\n  \n        <div class=\"capy-support-item capy-reveal-right capy-delay-2\">\n          <div class=\"capy-support-icon\">\n            <svg width=\"28\" height=\"28\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"><\/path><\/svg>\n          <\/div>\n          <div class=\"capy-support-text\">\n            <h4>Incredible System Support<\/h4>\n            <p>Our seasoned experts guide you through every step of setup, migration, and daily operations. You get dedicated, responsive help when you need it.<\/p>\n          <\/div>\n        <\/div>\n  \n        <div class=\"capy-support-item capy-reveal-right capy-delay-3\">\n          <div class=\"capy-support-icon\" style=\"background-color: #fef2f2; color: #ef4444;\">\n            <svg width=\"28\" height=\"28\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\n          <\/div>\n          <div class=\"capy-support-text\">\n            <h4>Free Promotional Launch Package<\/h4>\n            <p>We want your employees to be as excited as you are. We include customized, high-quality promotional animations and poster designs for you to share internally to drive massive adoption on day one.<\/p>\n          <\/div>\n        <\/div>\n  \n      <\/div>\n  \n    <\/div>\n  <\/section>\n  \n  <!-- Final part -->\n  <!--CXL-FAQ-->\n<section class=\"cxl cxl-faq\" id=\"faq\">\n  <div class=\"cxl-wrap\">\n    <span class=\"cxl-eyebrow\">FAQ<\/span>\n    <h2>Siraj LMS questions<\/h2>\n    <p class=\"cxl-intro\">What L&amp;D, HR and IT teams across the GCC ask us before they choose Siraj.<\/p>\n    <details><summary>What is Siraj?<\/summary><p>Siraj is Capytech's AI-powered learning management system. It brings online courses, live and classroom training, assessments, certificates and reporting into one platform, branded as your own academy.<\/p><\/details>\n    <details><summary>Does Siraj work in Arabic?<\/summary><p>Yes. Siraj runs in English and Arabic with right to left layouts, and your courses can be delivered in any language your workforce needs.<\/p><\/details>\n    <details><summary>What is a learner journey?<\/summary><p>Instead of a list of courses, each learner follows a guided path of lessons, checks and milestones. It shows them what to do next and how far they have come, which keeps people moving through the programme.<\/p><\/details>\n    <details><summary>What can managers see?<\/summary><p>Dashboards show who has started, who has stalled, progress by team and department, certificates due for renewal and the impact learners report, so managers can act before deadlines are missed.<\/p><\/details>\n    <details><summary>Can we use our existing courses?<\/summary><p>Yes. Siraj runs SCORM and xAPI courses, including courses built in Articulate <a href=\"\/en\/storyline-360\/\">Storyline 360<\/a> and <a href=\"\/en\/rise-360\/\">Rise 360<\/a>, and courses from other authoring tools. We can also build new courses for you.<\/p><\/details>\n    <details><summary>Can Siraj connect to our HR systems?<\/summary><p>Yes. We can connect Siraj to HR and ERP systems through custom API integrations, so user records and training records stay in step.<\/p><\/details>\n    <details><summary>Do we need our own courses to get started?<\/summary><p>No. Siraj comes with a library of ready-made courses in English and Arabic, and you can add our <a href=\"\/en\/off-the-shelf-courses\/\">off-the-shelf courses<\/a> or commission <a href=\"\/en\/custom-e-learning-development\/\">custom e-learning<\/a> at any time.<\/p><\/details>\n    <details><summary>How much does Siraj cost?<\/summary><p>It depends on the tier, the number of learners and the integrations you need, so we do not publish prices. <a href=\"\/en\/contact\/\">Book a free demo<\/a> and we will send you a proposal for your organisation.<\/p><\/details>\n  <\/div>\n  <script type=\"application\/ld+json\">{\"@context\":\"https:\/\/schema.org\",\"@type\":\"FAQPage\",\"mainEntity\":[\n{\"@type\":\"Question\",\"name\":\"What is Siraj?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Siraj is Capytech's AI-powered learning management system. It brings online courses, live and classroom training, assessments, certificates and reporting into one platform, branded as your own academy.\"}},\n{\"@type\":\"Question\",\"name\":\"Does Siraj work in Arabic?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes. Siraj runs in English and Arabic with right to left layouts, and your courses can be delivered in any language your workforce needs.\"}},\n{\"@type\":\"Question\",\"name\":\"What is a learner journey?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Instead of a list of courses, each learner follows a guided path of lessons, checks and milestones. It shows them what to do next and how far they have come, which keeps people moving through the programme.\"}},\n{\"@type\":\"Question\",\"name\":\"What can managers see?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Dashboards show who has started, who has stalled, progress by team and department, certificates due for renewal and the impact learners report, so managers can act before deadlines are missed.\"}},\n{\"@type\":\"Question\",\"name\":\"Can we use our existing courses?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes. Siraj runs SCORM and xAPI courses, including courses built in Articulate Storyline 360 and Rise 360, and courses from other authoring tools. We can also build new courses for you.\"}},\n{\"@type\":\"Question\",\"name\":\"Can Siraj connect to our HR systems?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes. We can connect Siraj to HR and ERP systems through custom API integrations, so user records and training records stay in step.\"}},\n{\"@type\":\"Question\",\"name\":\"Do we need our own courses to get started?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"No. Siraj comes with a library of ready-made courses in English and Arabic, and you can add our off-the-shelf courses or commission custom e-learning at any time.\"}},\n{\"@type\":\"Question\",\"name\":\"How much does Siraj cost?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"It depends on the tier, the number of learners and the integrations you need, so we do not publish prices. Book a free demo and we will send you a proposal for your organisation.\"}}\n]}<\/script>\n<\/section>\n\n<section class=\"capy-cta-section\">\n    <div class=\"capy-cta-glow-1\"><\/div>\n    <div class=\"capy-cta-glow-2\"><\/div>\n  \n    <div class=\"capy-cta-container\">\n      <h2 class=\"capy-cta-headline\">\n        Ready to build your <br \/>\n        <span class=\"capy-text-gradient-light\">ultimate learning landscape?<\/span>\n      <\/h2>\n      <p class=\"capy-cta-subhead\">\n        Join the organisations future-proofing their workforce with Capytech's <strong>AI-powered LMS<\/strong>.\n      <\/p>\n  \n      <div class=\"capy-cta-actions\">\n        <a href=\"#capyDemoModal\" class=\"capy-btn-large capy-btn-cta-primary\">\n          Get a Free Live Demonstration\n        <\/a>\n        \n        <a href=\"https:\/\/wa.me\/971585426893\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"capy-btn-large capy-btn-whatsapp\">\n          <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 0 0-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z\"\/>\n          <\/svg>\n          Contact Us on WhatsApp\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n  \n  <footer style=\"background-color: var(--brand-900); padding: 0 1.5rem;\">\n    <div class=\"capy-container\">\n      <div class=\"capy-footer-master\">\n        <div class=\"capy-footer-grid\">\n          \n          <div class=\"capy-footer-brand capy-reveal-up capy-delay-1\">\n            <img decoding=\"async\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/03\/capytech-white-logo.png\" alt=\"Capytech\" class=\"capy-footer-logo\">\n            <p>Capytech is a Dubai-registered e-learning provider with offices in Dubai and Abu Dhabi, building training for organisations across the GCC and around the world, in any language.<\/p>\n            <div class=\"capy-footer-contact-list\">\n              <span><svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"><\/path><\/svg> <a href=\"mailto:contact@capytech.com\" style=\"color:inherit;text-decoration:none;\">contact@capytech.com<\/a><\/span>\n              <span><svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z\"><\/path><\/svg> <a href=\"tel:+971585426893\" style=\"color:inherit;text-decoration:none;\">+971 58 542 6893 (UAE)<\/a><\/span>\n              <span><svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"><\/path><path d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"><\/path><\/svg> PO Box 392823, Dubai, UAE<\/span>\n            <\/div>\n          <\/div>\n  \n          <div class=\"capy-footer-nav capy-reveal-up capy-delay-2\">\n            <h4>Solutions<\/h4>\n            <div class=\"capy-footer-links\">\n              <a href=\"https:\/\/capytech.com\/\">Home<\/a>\n              <a href=\"https:\/\/capytech.com\/en\/custom-e-learning-development\/\">Custom E-learning<\/a>\n              <a href=\"https:\/\/capytech.com\/en\/ai-powered-lms\/\">LMS<\/a>\n              <a href=\"https:\/\/capytech.com\/en\/custom-e-learning-development\/#fasttrack\">FastTrack<\/a>\n              <a href=\"https:\/\/capytech.com\/en\/articulate-360-partner\/\">Articulate 360<\/a>\n              <a href=\"https:\/\/capytech.com\/en\/metaverse\/\">Metaverse<\/a>\n              <a href=\"https:\/\/capytech.com\/en\/accredited-courses\/\">Online Courses<\/a>\n              <a href=\"https:\/\/capytech.com\/en\/blog\/\">Blog<\/a>\n            <\/div>\n          <\/div>\n  \n          <div class=\"capy-footer-form-col capy-reveal-up capy-delay-3\">\n              <h4>Send us a message<\/h4>\n              <div class=\"capy-footer-form\">\n                \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f64158-o1\" lang=\"en-US\" dir=\"ltr\" data-wpcf7-id=\"64158\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/en\/wp-json\/wp\/v2\/pages\/57914#wpcf7-f64158-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contact form\" novalidate=\"novalidate\" data-status=\"init\">\n<div style=\"display: none;\">\n<input type=\"hidden\" name=\"_wpcf7\" value=\"64158\" \/>\n<input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.0.2\" \/>\n<input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/>\n<input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f64158-o1\" \/>\n<input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/>\n<input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/div>\n<p><span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Your Name\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span>\n<\/p>\n<p><span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Your Email\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span>\n<\/p>\n<p><span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"40\" rows=\"4\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"How can we help you today?\" name=\"your-message\"><\/textarea><\/span>\n<\/p>\n<div style=\"display: none;\">\n\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"utm_source\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"utm_source\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"utm_medium\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"utm_medium\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"utm_campaign\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"utm_campaign\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"utm_term\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"utm_term\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"utm_content\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"utm_content\" \/><\/span>\n\t<\/p>\n<\/div>\n<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Send Message\" \/>\n<\/p><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\n              <\/div>\n          <\/div>\n  \n        <\/div>\n  \n        <div class=\"capy-footer-bottom\">\n          <div class=\"capy-copyright\">&copy; 2026 Capytech. All rights reserved.<\/div>\n          <div class=\"capy-legal-links\">\n            <a href=\"\/privacy-policy\">Privacy Policy<\/a>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/footer>\n  \n  <div class=\"capy-modal-overlay\" id=\"capyDemoModal\">\n    <div class=\"capy-modal-box capy-modal-split\">\n      \n      <div class=\"capy-modal-visual\">\n        <div class=\"capy-modal-visual-text\">\n          <h4>Ready to transform your training?<\/h4>\n          <p>Join the innovative organisations already using Capytech to empower their teams across the GCC.<\/p>\n        <\/div>\n      <\/div>\n  \n      <div class=\"capy-modal-content\">\n        <button class=\"capy-modal-close\" id=\"capyModalClose\">\n          <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line><\/svg>\n        <\/button>\n        \n        <div class=\"capy-modal-header\">\n          <div class=\"capy-modal-icon\">\n            <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M22 12h-4l-3 9L9 3l-3 9H2\"><\/path><\/svg>\n          <\/div>\n          <h3>Book a Live Demo<\/h3>\n          <p>See the Capytech LMS in action. Fill out the form below to schedule a tailored walkthrough.<\/p>\n        <\/div>\n  \n        <div class=\"capy-modal-form-wrapper\">\n          \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f64159-o2\" lang=\"en-US\" dir=\"ltr\" data-wpcf7-id=\"64159\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/en\/wp-json\/wp\/v2\/pages\/57914#wpcf7-f64159-o2\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contact form\" novalidate=\"novalidate\" data-status=\"init\">\n<div style=\"display: none;\">\n<input type=\"hidden\" name=\"_wpcf7\" value=\"64159\" \/>\n<input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.0.2\" \/>\n<input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/>\n<input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f64159-o2\" \/>\n<input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/>\n<input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/div>\n<p><span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Full Name\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span>\n<\/p>\n<p><span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Work Email\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span>\n<\/p>\n<p><span class=\"wpcf7-form-control-wrap\" data-name=\"your-company\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Company Name\" value=\"\" type=\"text\" name=\"your-company\" \/><\/span>\n<\/p>\n<p><span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"40\" rows=\"4\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Tell us what you&#039;d like to see in the demo...\" name=\"your-message\"><\/textarea><\/span>\n<\/p>\n<div style=\"display: none;\">\n\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"utm_source\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"utm_source\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"utm_medium\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"utm_medium\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"utm_campaign\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"utm_campaign\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"utm_term\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"utm_term\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"utm_content\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"utm_content\" \/><\/span>\n\t<\/p>\n<\/div>\n<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Book My Free Demo\" \/>\n<\/p><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\n        <\/div>\n      <\/div>\n      \n    <\/div>\n  <\/div>\n  \n  <\/div>\n  \n  \n  <script>\n    (function() {\n      \/\/ 1. REVEAL OBSERVER (Smart Directional Logic)\n      const observerOptions = {\n        root: null,\n        rootMargin: '0px 0px -50px 0px', \/\/ Triggers slightly before it hits the bottom\n        threshold: 0.1 \n      };\n  \n      const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            \/\/ Element is visible -> Animate it in\n            entry.target.classList.add('capy-active');\n          } else {\n            \/\/ ANTI-FLICKER LOGIC:\n            \/\/ We only reset the animation if the element is pushed off the BOTTOM of the screen.\n            \/\/ If it leaves the top of the screen, we leave it alone.\n            if (entry.boundingClientRect.top > 0) {\n              entry.target.classList.remove('capy-active');\n            }\n          }\n        });\n      }, observerOptions);\n  \n      \/\/ 2. PERFORMANCE-OPTIMIZED PARALLAX HANDLER (With Mobile Killswitch)\n      let isTicking = false;\n      \n      window.addEventListener('scroll', () => {\n        \/\/ ONLY run the heavy math if the screen is a desktop (1024px or wider)\n        if (window.innerWidth >= 1024) {\n          if (!isTicking) {\n            window.requestAnimationFrame(() => {\n              document.documentElement.style.setProperty('--scroll-y', window.pageYOffset);\n              isTicking = false;\n            });\n            isTicking = true;\n          }\n        }\n      }, { passive: true });\n  \n      \/\/ initialize\n      document.addEventListener(\"DOMContentLoaded\", function() {\n        \/\/ Find all elements with any capy-reveal class\n        document.querySelectorAll('[class*=\"capy-reveal\"]')\n                .forEach(el => observer.observe(el));\n        \n        \/\/ requestAnimationFrame(updateParallax);\n      });\n  \n    \/\/ 3. MODAL LOGIC (one delegated listener: works for the header, late-loaded buttons and every CTA)\n    const modal = document.getElementById('capyDemoModal');\n    if (modal) {\n      const openModal  = () => { modal.classList.add('capy-modal-active'); document.body.style.overflow = 'hidden'; };\n      const closeModal = () => { modal.classList.remove('capy-modal-active'); document.body.style.overflow = ''; };\n\n      document.addEventListener('click', (e) => {\n        if (e.target.closest('a[href$=\"#capyDemoModal\"], a[href$=\"#demo\"]')) { e.preventDefault(); openModal(); return; }\n        if (e.target.closest('#capyModalClose') || e.target === modal) closeModal();\n      });\n      document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeModal(); });\n    }\n  })();\n  <\/script>\n  \n  \n  <\/body>\n  <\/html>\n\n<!-- ============================================================\n     Capytech popup shell: replaces Elementor Pro popups.\n     Add this once per page, plus one .capy-popup block (see build\/popups\/).\n     Settings (attributes on .capy-popup):\n       data-delay=\"35\"           seconds after page load before it opens\n       data-frequency=\"every\"    every | session | days:N  (how often to show again after it's closed)\n     After a successful Contact Form 7 submission, the popup never shows again for that visitor.\n     ============================================================ -->\n<style>\n  .capy-popup[hidden] { display: none !important; }\n  .capy-popup, .capy-popup *, .capy-popup *::before, .capy-popup *::after { box-sizing: border-box; }\n  .capy-popup { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity .3s ease; }\n  .capy-popup.is-open { opacity: 1; }\n  .capy-popup__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.8); cursor: pointer; }\n  .capy-popup__dialog { position: relative; width: 100%; max-width: 900px; max-height: calc(100vh - 32px); overflow-y: auto; transform: translateY(16px); transition: transform .3s ease; -webkit-overflow-scrolling: touch; }\n  .capy-popup.is-open .capy-popup__dialog { transform: none; }\n  .capy-popup__close { position: absolute; top: 10px; right: 10px; z-index: 20; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: #111; font-size: 22px; line-height: 36px; text-align: center; cursor: pointer; padding: 0; box-shadow: 0 2px 8px rgba(0,0,0,.15); }\n  .capy-popup__close:hover, .capy-popup__close:focus-visible { background: #fff; outline: 2px solid #111; }\n  html.capy-popup-lock, html.capy-popup-lock body { overflow: hidden !important; }\n  @media (prefers-reduced-motion: reduce) { .capy-popup, .capy-popup__dialog { transition: none; } }\n<\/style>\n<script>\n(function () {\n  if (window.capyPopupInit) return;\n  window.capyPopupInit = true;\n\n  var KEY = 'capyPopup:';\n  function store(fn) { try { return fn(); } catch (e) { return null; } }\n  function seenRecently(p) {\n    var id = p.id, freq = p.getAttribute('data-frequency') || 'every';\n    if (store(function () { return localStorage.getItem(KEY + id + ':submitted'); })) return true;\n    if (freq === 'session') return !!store(function () { return sessionStorage.getItem(KEY + id); });\n    var m = \/^days:(\\d+)$\/.exec(freq);\n    if (m) {\n      var t = +store(function () { return localStorage.getItem(KEY + id); }) || 0;\n      return Date.now() - t < m[1] * 864e5;\n    }\n    return false;\n  }\n  function remember(p) {\n    store(function () { sessionStorage.setItem(KEY + p.id, '1'); });\n    store(function () { localStorage.setItem(KEY + p.id, String(Date.now())); });\n  }\n\n  var lastFocus = null;\n  function open(p) {\n    if (document.querySelector('.capy-popup.is-open')) return;\n    lastFocus = document.activeElement;\n    p.hidden = false;\n    p.setAttribute('aria-hidden', 'false');\n    document.documentElement.classList.add('capy-popup-lock');\n    void p.offsetWidth; \/\/ apply the hidden state first so the fade-in runs\n    p.classList.add('is-open');\n    var c = p.querySelector('.capy-popup__close'); if (c) c.focus({ preventScroll: true });\n  }\n  function close(p) {\n    if (!p.classList.contains('is-open')) return;\n    p.classList.remove('is-open');\n    p.setAttribute('aria-hidden', 'true');\n    document.documentElement.classList.remove('capy-popup-lock');\n    remember(p);\n    setTimeout(function () { p.hidden = true; }, 300);\n    if (lastFocus && lastFocus.focus) lastFocus.focus({ preventScroll: true });\n  }\n\n  function setup() {\n    if (document.body.classList.contains('elementor-editor-active')) return; \/\/ don't pop up while editing in Elementor\n    document.querySelectorAll('.capy-popup').forEach(function (p) {\n      if (p.capyReady) return; p.capyReady = true;\n      if (p.parentNode !== document.body) document.body.appendChild(p); \/\/ escape Elementor\/theme containers\n      p.addEventListener('click', function (e) {\n        var t = e.target.closest('[data-capy-close]');\n        if (t && p.contains(t)) { e.preventDefault(); close(p); }\n      });\n      p.addEventListener('wpcf7mailsent', function () {\n        store(function () { localStorage.setItem(KEY + p.id + ':submitted', String(Date.now())); });\n      });\n      if (seenRecently(p)) return;\n      var delay = parseFloat(p.getAttribute('data-delay'));\n      var q = \/[?&]capy_popup_delay=(\\d+)\/.exec(location.search); if (q) delay = +q[1]; \/\/ testing aid\n      setTimeout(function () { open(p); }, (isNaN(delay) ? 35 : delay) * 1000);\n    });\n  }\n  document.addEventListener('keydown', function (e) {\n    if (e.key === 'Escape') { var p = document.querySelector('.capy-popup.is-open'); if (p) close(p); }\n  });\n  window.capyPopup = { open: function (id) { var p = document.getElementById(id); if (p) open(p); }, close: function (id) { var p = document.getElementById(id); if (p) close(p); } };\n  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', setup); else setup();\n})();\n<\/script>\n\n<!-- Capytech popup \"lms\" (replaces Elementor Pro popup 64028). Target page: ai-powered-lms (57914) -->\n<div class=\"capy-popup\" id=\"capy-popup-lms\" data-delay=\"35\" data-frequency=\"days:7\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"capy-popup-lms-title\" aria-hidden=\"true\" hidden>\n  <div class=\"capy-popup__backdrop\" data-capy-close><\/div>\n  <div class=\"capy-popup__dialog\">\n    <button type=\"button\" class=\"capy-popup__close\" data-capy-close aria-label=\"Close\">&times;<\/button>\n<div id=\"ft-modal-wrapper\">\n  <div class=\"ft-overlay\">\n      <div class=\"ft-card\">\n          \n          <div class=\"ft-image-col\">\n              <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1516321318423-f06f85e504b3?q=80&w=800&auto=format&fit=crop\" alt=\"LMS Creative Learning Hub\">\n              <div class=\"ft-image-overlay\"><\/div>\n          <\/div>\n\n          <div class=\"ft-content-col\">\n              <div class=\"ft-aurora-bg\"><\/div>\n              \n              <div class=\"ft-header-group\">\n                  <div class=\"ft-concept-badge\">\n                      <span class=\"ft-pulse-dot\"><\/span>\n                     The \"Quick Start\" Solution\n\n                  <\/div>\n                  \n                  <h2 id=\"capy-popup-lms-title\" class=\"ft-headline\">\n                      A Ready-to-Use LMS. \n                      <span class=\"ft-brand-row\">\n                        Today.\n                        <div class=\"ft-library-icon\">\n                            <div class=\"ft-stack-base\"><\/div>\n                            <div class=\"ft-stack-mid\"><\/div>\n                            <div class=\"ft-stack-top\"><\/div>\n                        <\/div>\n                      <\/span> \n                  <\/h2>\n              <\/div>\n\n              <p class=\"ft-body\">\n                  Why wait months for implementation?<br> \n                  <strong class=\"ft-live-accent\">\"Launch our LMS in a matter of days and get an instant library of 50+ Soft Skills and Wellness modules included for free.\"<\/strong>\n              <\/p>\n\n              <div class=\"ft-wp-form-container\">\n                  \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f64032-o3\" lang=\"en-US\" dir=\"ltr\" data-wpcf7-id=\"64032\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/en\/wp-json\/wp\/v2\/pages\/57914#wpcf7-f64032-o3\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contact form\" novalidate=\"novalidate\" data-status=\"init\">\n<div style=\"display: none;\">\n<input type=\"hidden\" name=\"_wpcf7\" value=\"64032\" \/>\n<input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.0.2\" \/>\n<input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/>\n<input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f64032-o3\" \/>\n<input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/>\n<input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/div>\n<p><span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Enter your work email address\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span>\n<\/p>\n<div style=\"display: none;\">\n\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"utm_source\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"utm_source\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"utm_medium\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"utm_medium\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"utm_campaign\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"utm_campaign\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"utm_term\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"utm_term\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"utm_content\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"utm_content\" \/><\/span>\n\t<\/p>\n<\/div>\n<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"View My LMS Options\" \/>\n<\/p><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\n              <\/div>\n\n              <div class=\"ft-secondary-action-wrapper\">\n                <a href=\"#\" class=\"ft-explore-btn\" data-capy-close>\n                    Explore Features First\n                    <svg class=\"ft-arrow-icon\" viewBox=\"0 0 24 24\"><path d=\"M5 12h14m-7-7 7 7-7 7\"\/><\/svg>\n                <\/a>\n              <\/div>\n          <\/div>\n      <\/div>\n  <\/div>\n<\/div>\n<style>\n  :root {\n      --primary-color: #ffcc33; \n      --accent-color: #00f2ff;  \n      --aurora-teal: #10b981;\n      --dark-bg: #020617;      \n      --card-bg: #0f172a;      \n      --text-main: #ffffff;\n      --text-light: #94a3b8;\n  }\n\n  #ft-modal-wrapper { \n      width: 100%; height: 100%; \n      display: flex; justify-content: center; align-items: center; \n      font-family: 'Inter', sans-serif; \n  }\n  \n  .ft-card {\n      background: var(--card-bg);\n      width: 100%; max-width: 940px;\n      display: flex;\n      box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.7);\n      overflow: hidden; \n      \n      border: 1px solid rgba(255, 255, 255, 0.05);\n      position: relative;\n  }\n\n  \/* Progress Bar UI *\/\n  .ft-progress-hook {\n      position: absolute; top: 0; left: 0; height: 4px;\n      width: 100%; background: rgba(255,255,255,0.05);\n      z-index: 10;\n  }\n  .ft-progress-hook::after {\n      content: ''; position: absolute; left: 0; top: 0; height: 100%;\n      width: 75%; background: var(--aurora-teal);\n      box-shadow: 0 0 10px var(--aurora-teal);\n  }\n\n  \/* VISUAL COLUMN *\/\n  .ft-image-col { width: 42%; background: var(--dark-bg); position: relative; overflow: hidden; min-height: 520px; z-index: 2;}\n  .ft-image-overlay {\n      position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n      background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(16, 185, 129, 0.1) 100%);\n  }\n  .ft-image-col img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: transform 3s ease; }\n\n  \/* AURORA BACKGROUND *\/\n  .ft-content-col { width: 58%; padding: 50px 60px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }\n  \n  .ft-aurora-bg {\n      position: absolute;\n      top: -50%; left: -50%; width: 200%; height: 200%;\n      background: radial-gradient(circle at center, rgba(16, 185, 129, 0.05) 0%, rgba(0, 242, 255, 0.02) 30%, transparent 60%);\n      animation: auroraFlow 15s linear infinite;\n      z-index: 1;\n      pointer-events: none;\n  }\n\n  @keyframes auroraFlow {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n  }\n\n  \/* HEADER & BADGE *\/\n  .ft-header-group { margin-bottom: 25px; position: relative; z-index: 2; }\n  .ft-concept-badge {\n      display: inline-flex; align-items: center; gap: 8px;\n      font-size: 10px; font-weight: 800; letter-spacing: 1.5px;\n      text-transform: uppercase; color: var(--aurora-teal);\n      background: rgba(16, 185, 129, 0.1); padding: 6px 14px; margin-bottom: 15px;\n      border: 1px solid rgba(16, 185, 129, 0.2);\n  }\n  .ft-pulse-dot {\n      width: 6px; height: 6px; background: var(--accent-color);\n      border-radius: 50%; box-shadow: 0 0 10px var(--accent-color);\n      animation: ft-dot-pulse 2s infinite;\n  }\n\n  .ft-headline { font-size: 42px; font-weight: 900; line-height: 1.1; color: #ffffff; margin: 0; letter-spacing: -1.5px; }\n  \n  .ft-brand-row { \n      color: var(--primary-color); \n      display: flex; align-items: center; gap: 15px;\n      background: linear-gradient(90deg, var(--primary-color), var(--accent-color));\n      -webkit-background-clip: text; -webkit-text-fill-color: transparent;\n  }\n\n  \/* LIBRARY STACK ICON *\/\n  .ft-library-icon { \n      position: relative; width: 30px; height: 30px; \n      display: inline-block; vertical-align: middle;\n      -webkit-text-fill-color: initial;\n  }\n  .ft-stack-base, .ft-stack-mid, .ft-stack-top {\n      position: absolute; width: 20px; height: 4px;\n      background: var(--accent-color); border-radius: 2px;\n      left: 5px;\n  }\n  .ft-stack-base { bottom: 4px; opacity: 0.3; animation: stackFlow 3s infinite 0s; }\n  .ft-stack-mid { bottom: 12px; opacity: 0.6; animation: stackFlow 3s infinite 0.5s; }\n  .ft-stack-top { bottom: 20px; opacity: 1; animation: stackFlow 3s infinite 1s; }\n\n  @keyframes stackFlow {\n      0%, 100% { transform: translateY(0); }\n      50% { transform: translateY(-3px); }\n  }\n\n  \/* BODY STYLE *\/\n  .ft-body { font-size: 16px; line-height: 1.6; color: var(--text-light); margin-bottom: 30px; position: relative; z-index: 2;}\n  .ft-live-accent { \n      color: #ffffff !important; font-weight: 700; \n      border-left: 3px solid var(--aurora-teal);\n      padding-left: 15px; display: block; margin-top: 10px;\n  }\n\n  \/* FORM STYLE *\/\n  .ft-wp-form-container { position: relative; z-index: 2; }\n  .ft-wp-form-container input[type=\"email\"], \n  .ft-wp-form-container input[type=\"text\"] {\n      width: 100%; padding: 15px 0; font-size: 15px;\n      border: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;\n      background: transparent !important; outline: none; margin-bottom: 15px; \n      color: #ffffff !important; transition: 0.3s;\n  }\n  .ft-wp-form-container input:focus { border-bottom: 1px solid var(--aurora-teal) !important; }\n\n  .ft-wp-form-container input[type=\"submit\"] {\n      width: 100%; padding: 20px; \n      background: var(--aurora-teal) !important; \n      color: var(--dark-bg) !important;\n      font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px;\n      border: none; cursor: pointer; transition: 0.4s; border-radius: 4px !important;\n  }\n  .ft-wp-form-container input[type=\"submit\"]:hover { \n      background: var(--accent-color) !important;\n      box-shadow: 0 10px 30px rgba(0, 242, 255, 0.3); \n  }\n\n  \/* REDESIGNED SECONDARY ACTION BUTTON *\/\n  .ft-secondary-action-wrapper {\n      position: relative;\n      z-index: 2;\n      margin-top: 25px;\n      text-align: center;\n  }\n\n  .ft-explore-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px 24px;\n      font-size: 11px;\n      font-weight: 700;\n      color: var(--text-light);\n      text-decoration: none;\n      text-transform: uppercase;\n      letter-spacing: 1.5px;\n      border: 1px solid rgba(255, 255, 255, 0.08);\n      border-radius: 50px;\n      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n      background: rgba(255, 255, 255, 0.02);\n  }\n\n  .ft-explore-btn:hover {\n      color: var(--accent-color);\n      border-color: var(--accent-color);\n      background: rgba(0, 242, 255, 0.05);\n      transform: translateY(-2px);\n      box-shadow: 0 5px 15px rgba(0, 242, 255, 0.1);\n  }\n\n  .ft-arrow-icon {\n      width: 14px;\n      height: 14px;\n      fill: none;\n      stroke: currentColor;\n      stroke-width: 2;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n      transition: transform 0.3s ease;\n  }\n\n  .ft-explore-btn:hover .ft-arrow-icon {\n      transform: translateX(4px);\n  }\n\n  @keyframes ft-dot-pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } }\n\n  @media (max-width: 768px) {\n      .ft-card { flex-direction: column; }\n      .ft-image-col { width: 100%; height: 180px; }\n      .ft-content-col { width: 100%; padding: 40px 25px; }\n      .ft-headline { font-size: 32px; }\n      .ft-brand-row { white-space: normal; flex-wrap: wrap; }\n  }\n<\/style>\n  <\/div>\n<\/div>\n<style>@media (max-width: 768px) { #capy-popup-lms .ft-image-col { min-height: 0 !important; } #capy-popup-lms .ft-card { margin: 0 !important; } }<\/style>\n\n<!-- Migrated from Elementor Pro Custom CSS (2026-10-12) -->\n<style id=\"capy-migrated-pro-css\">\n\/* Page Settings > Custom CSS *\/\n.x-navbar-inner {\n    background-color: #000!important;\n}\n#menu-main-menu li {\n    background-color: #000!important;\n}\n@media (max-width: 1074px){\n.x-nav-wrap.desktop {\n    display: none!important;\n}\n}\n@media (max-width: 1074px){\n.masthead-inline .x-btn-navbar {\n    display: block!important;\n    float: right!important;\n}\n}\n\n.ar-text {\n    display: none;\n}\n.en-text {\n    display: block;\n}\n[lang=\"ar\"] .en-text {\n    display: none!important;\n}\n[lang=\"ar\"] .ar-text {\n    display: block!important;\n}\n\n.elementor-57914 .elementor-element.elementor-element-e30f318 .elementor-headline {\n    text-align: center;\n    font-family: \"Montserrat\", Sans-serif;\n    font-weight: 700;\n    display: none;\n}\n\n.elementor-57914 .elementor-element.elementor-element-e7ca5cb .elementor-headline {\n    text-align: center;\n    font-family: \"Montserrat\", Sans-serif;\n    font-weight: 700;\n    display: none;\n}\n\n[lang=\"ar\"] .wpcf7 p {\n    margin-bottom: 0.32825em;\n    direction: rtl;\n}\n\n[lang=\"ar\"] .wpcf7-form-control.wpcf7-submit {\n    background-color: #f3a739;\n    color: #fff;\n    border: 1px solid #f3a739;\n    font-weight: 600;\n    font-family: 'Mulish Regular';\n    float: right;\n}\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Meet Siraj \u00b7 LMS 2.0 is here The Next-Generation AI-Powered LMS Siraj, \u0633\u0650\u0631\u0627\u062c, Arabic for &#8220;lamp&#8221;, is the Capytech learning platform. Siraj is a next-generation, AI-powered LMS built for modern enterprises. Going beyond basic SCORM tracking, Siraj features a built-in omnichannel booking engine for physical, virtual, and Metaverse classrooms, alongside robust executive analytics. Book a Live Demo Explore Features Trusted &#8230; <\/p>\n<div><a href=\"https:\/\/capytech.com\/en\/ai-powered-lms\/\" class=\"more-link\">Read More<\/a><\/div>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-57914","page","type-page","status-publish","hentry","no-post-thumbnail"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.1 (Yoast SEO v24.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Siraj AI-Powered LMS for the UAE and GCC | Capytech<\/title>\n<meta name=\"description\" content=\"Siraj is Capytech&#039;s AI-powered LMS: learner journeys, manager dashboards, certification renewals and online exam proctoring, in any language.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/capytech.com\/en\/ai-powered-lms\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Siraj AI-Powered LMS for the UAE and GCC | Capytech\" \/>\n<meta property=\"og:description\" content=\"Siraj is Capytech&#039;s AI-powered LMS: learner journeys, manager dashboards, certification renewals and online exam proctoring, in any language.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/capytech.com\/en\/ai-powered-lms\/\" \/>\n<meta property=\"og:site_name\" content=\"Capytech\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/capytech\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-27T15:37:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/10\/capytech-lms-screens.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/capytech.com\/ai-powered-lms\/\",\"url\":\"https:\/\/capytech.com\/ai-powered-lms\/\",\"name\":\"Siraj AI-Powered LMS for the UAE and GCC | Capytech\",\"isPartOf\":{\"@id\":\"https:\/\/capytech.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/capytech.com\/ai-powered-lms\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/capytech.com\/ai-powered-lms\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/10\/capytech-lms-screens.webp\",\"datePublished\":\"2024-01-17T04:14:47+00:00\",\"dateModified\":\"2026-10-27T15:37:47+00:00\",\"description\":\"Siraj is Capytech's AI-powered LMS: learner journeys, manager dashboards, certification renewals and online exam proctoring, in any language.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/capytech.com\/ai-powered-lms\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/capytech.com\/ai-powered-lms\/#primaryimage\",\"url\":\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/10\/capytech-lms-screens.webp\",\"contentUrl\":\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/10\/capytech-lms-screens.webp\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/capytech.com\/en\/#website\",\"url\":\"https:\/\/capytech.com\/en\/\",\"name\":\"Capytech\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/capytech.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/capytech.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/capytech.com\/en\/#organization\",\"name\":\"Capytech\",\"url\":\"https:\/\/capytech.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/capytech.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/capytech.com\/wp-content\/uploads\/2021\/10\/CapytechLogo_V2_2020.png\",\"contentUrl\":\"https:\/\/capytech.com\/wp-content\/uploads\/2021\/10\/CapytechLogo_V2_2020.png\",\"width\":2443,\"height\":629,\"caption\":\"Capytech\"},\"image\":{\"@id\":\"https:\/\/capytech.com\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/capytech\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Siraj AI-Powered LMS for the UAE and GCC | Capytech","description":"Siraj is Capytech's AI-powered LMS: learner journeys, manager dashboards, certification renewals and online exam proctoring, in any language.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/capytech.com\/en\/ai-powered-lms\/","og_locale":"en_US","og_type":"article","og_title":"Siraj AI-Powered LMS for the UAE and GCC | Capytech","og_description":"Siraj is Capytech's AI-powered LMS: learner journeys, manager dashboards, certification renewals and online exam proctoring, in any language.","og_url":"https:\/\/capytech.com\/en\/ai-powered-lms\/","og_site_name":"Capytech","article_publisher":"https:\/\/www.facebook.com\/capytech","article_modified_time":"2026-10-27T15:37:47+00:00","og_image":[{"url":"https:\/\/capytech.com\/wp-content\/uploads\/2026\/10\/capytech-lms-screens.webp","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/capytech.com\/ai-powered-lms\/","url":"https:\/\/capytech.com\/ai-powered-lms\/","name":"Siraj AI-Powered LMS for the UAE and GCC | Capytech","isPartOf":{"@id":"https:\/\/capytech.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/capytech.com\/ai-powered-lms\/#primaryimage"},"image":{"@id":"https:\/\/capytech.com\/ai-powered-lms\/#primaryimage"},"thumbnailUrl":"https:\/\/capytech.com\/wp-content\/uploads\/2026\/10\/capytech-lms-screens.webp","datePublished":"2024-01-17T04:14:47+00:00","dateModified":"2026-10-27T15:37:47+00:00","description":"Siraj is Capytech's AI-powered LMS: learner journeys, manager dashboards, certification renewals and online exam proctoring, in any language.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/capytech.com\/ai-powered-lms\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/capytech.com\/ai-powered-lms\/#primaryimage","url":"https:\/\/capytech.com\/wp-content\/uploads\/2026\/10\/capytech-lms-screens.webp","contentUrl":"https:\/\/capytech.com\/wp-content\/uploads\/2026\/10\/capytech-lms-screens.webp"},{"@type":"WebSite","@id":"https:\/\/capytech.com\/en\/#website","url":"https:\/\/capytech.com\/en\/","name":"Capytech","description":"","publisher":{"@id":"https:\/\/capytech.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/capytech.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/capytech.com\/en\/#organization","name":"Capytech","url":"https:\/\/capytech.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/capytech.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/capytech.com\/wp-content\/uploads\/2021\/10\/CapytechLogo_V2_2020.png","contentUrl":"https:\/\/capytech.com\/wp-content\/uploads\/2021\/10\/CapytechLogo_V2_2020.png","width":2443,"height":629,"caption":"Capytech"},"image":{"@id":"https:\/\/capytech.com\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/capytech"]}]}},"_links":{"self":[{"href":"https:\/\/capytech.com\/en\/wp-json\/wp\/v2\/pages\/57914","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/capytech.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/capytech.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/capytech.com\/en\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/capytech.com\/en\/wp-json\/wp\/v2\/comments?post=57914"}],"version-history":[{"count":194,"href":"https:\/\/capytech.com\/en\/wp-json\/wp\/v2\/pages\/57914\/revisions"}],"predecessor-version":[{"id":65762,"href":"https:\/\/capytech.com\/en\/wp-json\/wp\/v2\/pages\/57914\/revisions\/65762"}],"wp:attachment":[{"href":"https:\/\/capytech.com\/en\/wp-json\/wp\/v2\/media?parent=57914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}