{"id":62794,"date":"2025-09-22T07:24:59","date_gmt":"2025-09-22T07:24:59","guid":{"rendered":"https:\/\/capytech.com\/?page_id=62794"},"modified":"2026-10-27T15:37:27","modified_gmt":"2026-10-27T15:37:27","slug":"off-the-shelf-courses","status":"publish","type":"page","link":"https:\/\/capytech.com\/en\/off-the-shelf-courses\/","title":{"rendered":"Off-the-Shelf Courses"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"62794\" class=\"elementor elementor-62794\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-13a5ab5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"13a5ab5\" 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-f4cb9ff\" data-id=\"f4cb9ff\" 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-071d15e elementor-widget elementor-widget-html\" data-id=\"071d15e\" 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<!DOCTYPE html>\n<html lang=\"en\">\n  <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  <\/head>\n<body>\n\n<style>\n\n  \/* ==============================================\n      0.5 GOOGLE FONTS IMPORT & OVERRIDE (Elementor Safe)\n      ============================================== *\/\n  .capy-home-wrapper,\n  .capy-home-wrapper *,\n  .capy-home-wrapper h1,\n  .capy-home-wrapper h2,\n  .capy-home-wrapper h3,\n  .capy-home-wrapper h4,\n  .capy-home-wrapper p,\n  .capy-home-wrapper span,\n  .capy-home-wrapper div,\n  .capy-home-wrapper a {\n    font-family: 'Plus Jakarta Sans', sans-serif !important;\n  }\n\n  \/* --- INSTANT HERO ANIMATIONS (No JS Required) --- *\/\n  .capy-hero-load-up {\n    opacity: 0;\n    transform: translateY(40px);\n    animation: capy-fade-in-up 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;\n  }\n\n  @keyframes capy-fade-in-up {\n    to { opacity: 1; transform: translateY(0); }\n  }\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.35s; }\n  .capy-hero-delay-4 { animation-delay: 0.5s; }\n\n  \/* ==============================================\n      0. WORDPRESS & ELEMENTOR OVERRIDES\n      ============================================== *\/\n  html {\n    font-size: 16px !important;\n  }\n\n  .capy-home-wrapper {\n    font-size: 16px !important;\n  }\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  .capy-container {\n    max-width: 1280px !important;\n    margin-left: auto !important;\n    margin-right: auto !important;\n  }\n\n  html, body {\n    margin: 0 !important;\n    padding: 0 !important;\n    width: 100%;\n    overflow-x: hidden;\n    scroll-behavior: smooth;\n    background-color: #0f172a !important;\n  }\n\n  .elementor-location-header {\n    margin-bottom: 0 !important;\n    padding-bottom: 0 !important;\n  }\n\n  \/* ==============================================\n      1. GLOBAL VARIABLES & RESET\n      ============================================== *\/\n  .capy-home-wrapper {\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-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-900: #0f172a;\n    --white: #ffffff;\n\n    font-family: var(--font-sans);\n    -webkit-font-smoothing: antialiased;\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    overflow-x: hidden !important;\n  }\n\n  .capy-home-wrapper * {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n  }\n\n  .capy-container {\n    max-width: 1280px;\n    margin: 0 auto;\n    width: 100%;\n    padding: 0 1.5rem;\n  }\n\n  \/* ==============================================\n      PART 1: THE DARK CINEMATIC HERO\n      ============================================== *\/\n  .capy-home-hero {\n    position: relative;\n    padding: 10rem 0 8rem 0;\n    background-color: var(--brand-900);\n    overflow: hidden;\n  }\n\n  \/* Glowing orbs *\/\n  .capy-hero-glow-1, .capy-hero-glow-2 {\n    position: absolute;\n    width: 600px;\n    height: 600px;\n    border-radius: 50%;\n    filter: blur(100px);\n    z-index: 0;\n    opacity: 0.3;\n  }\n\n  .capy-hero-glow-1 {\n    top: -200px;\n    left: -100px;\n    background: radial-gradient(circle, var(--brand-600) 0%, transparent 70%);\n  }\n\n  .capy-hero-glow-2 {\n    bottom: -100px;\n    right: -100px;\n    background: radial-gradient(circle, #8b5cf6 0%, transparent 70%);\n  }\n\n  \/* Background grid pattern overlay *\/\n  .capy-hero-grid-bg {\n    position: absolute;\n    inset: 0;\n    z-index: 0;\n    background-image:\n      linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),\n      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);\n    background-size: 60px 60px;\n    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);\n    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);\n  }\n\n  \/* Two-column layout for hero *\/\n  .capy-hero-inner {\n    position: relative;\n    z-index: 10;\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 4rem;\n    align-items: center;\n  }\n\n  @media (min-width: 1024px) {\n    .capy-hero-inner {\n      grid-template-columns: 1fr 1fr;\n      gap: 5rem;\n    }\n  }\n\n  \/* LEFT: text content *\/\n  .capy-hero-content {\n    position: relative;\n    z-index: 10;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    text-align: left;\n  }\n\n  .capy-hero-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    padding: 0.5rem 1rem;\n    border-radius: 9999px;\n    background-color: rgba(255, 255, 255, 0.05);\n    border: 1px solid rgba(255, 255, 255, 0.1);\n    color: var(--brand-100);\n    font-size: 0.875rem;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.1em;\n    margin-bottom: 2rem;\n    backdrop-filter: blur(8px);\n  }\n\n  .capy-hero-badge-dot {\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background: #60a5fa;\n    box-shadow: 0 0 8px #60a5fa;\n    animation: capy-pulse 2s ease-in-out infinite;\n  }\n\n  @keyframes capy-pulse {\n    0%, 100% { opacity: 1; transform: scale(1); }\n    50% { opacity: 0.5; transform: scale(0.8); }\n  }\n\n  .capy-home-hero h1 {\n    font-size: 3rem;\n    font-weight: 800;\n    line-height: 1.1;\n    color: var(--white);\n    letter-spacing: -0.02em;\n    margin-bottom: 1.5rem;\n    max-width: 100%;\n  }\n\n  @media (min-width: 768px) {\n    .capy-home-hero h1 { font-size: 3.75rem; }\n  }\n\n  .capy-gradient-text {\n    background-clip: text;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-image: linear-gradient(to right, #60a5fa, #a78bfa);\n  }\n\n  .capy-home-hero .capy-hero-sub {\n    font-size: 1.125rem;\n    color: var(--slate-300);\n    line-height: 1.7;\n    max-width: 44rem;\n    margin-bottom: 2.5rem;\n  }\n\n  @media (min-width: 768px) {\n    .capy-home-hero .capy-hero-sub { font-size: 1.2rem; }\n  }\n\n  \/* Stats strip *\/\n  .capy-hero-stats {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 1.5rem;\n    margin-bottom: 2.5rem;\n  }\n\n  .capy-hero-stat {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .capy-hero-stat-number {\n    font-size: 1.5rem;\n    font-weight: 800;\n    color: var(--white);\n    letter-spacing: -0.02em;\n    line-height: 1;\n  }\n\n  .capy-hero-stat-label {\n    font-size: 0.8rem;\n    font-weight: 500;\n    color: var(--slate-400);\n    margin-top: 0.25rem;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n  }\n\n  .capy-hero-stat-divider {\n    width: 1px;\n    background: rgba(255,255,255,0.1);\n    align-self: stretch;\n  }\n\n  \/* Buttons *\/\n  .capy-hero-actions {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    width: 100%;\n    max-width: 400px;\n  }\n\n  @media (min-width: 640px) {\n    .capy-hero-actions {\n      flex-direction: row;\n      max-width: none;\n      justify-content: flex-start;\n    }\n  }\n\n  .capy-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.5rem;\n    padding: 1.125rem 2rem;\n    font-size: 1.0625rem;\n    font-weight: 700;\n    border-radius: 1rem;\n    text-decoration: none;\n    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);\n    cursor: pointer;\n    white-space: nowrap;\n  }\n\n  .capy-btn-primary {\n    background-color: var(--brand-600);\n    color: var(--white) !important;\n    border: 1px solid var(--brand-600);\n    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.4);\n  }\n\n  .capy-btn-primary:hover {\n    background-color: var(--brand-500) !important;\n    color: var(--white) !important;\n    transform: translateY(-3px);\n    box-shadow: 0 20px 25px -5px rgba(37, 99, 235, 0.5);\n  }\n\n  .capy-btn-primary svg {\n    transition: transform 0.3s ease;\n  }\n\n  .capy-btn-primary:hover svg {\n    transform: translateX(4px);\n  }\n\n  .capy-btn-glass {\n    background-color: rgba(255, 255, 255, 0.05);\n    color: var(--white) !important;\n    border: 1px solid rgba(255, 255, 255, 0.1);\n    backdrop-filter: blur(8px);\n  }\n\n  .capy-btn-glass:hover {\n    background-color: rgba(255, 255, 255, 0.1) !important;\n    color: var(--white) !important;\n    border-color: rgba(255, 255, 255, 0.2);\n    transform: translateY(-3px);\n  }\n\n  \/* ==============================================\n      RIGHT: DASHBOARD VISUAL\n      ============================================== *\/\n  .capy-hero-visual {\n    position: relative;\n    z-index: 10;\n    display: none;\n  }\n\n  @media (min-width: 1024px) {\n    .capy-hero-visual {\n      display: block;\n    }\n  }\n\n  \/* Outer glow ring *\/\n  .capy-dashboard-wrap {\n    position: relative;\n  }\n\n  .capy-dashboard-wrap::before {\n    content: '';\n    position: absolute;\n    inset: -1px;\n    border-radius: 1.25rem;\n    background: linear-gradient(135deg, rgba(96,165,250,0.3), rgba(167,139,250,0.2), transparent 60%);\n    z-index: -1;\n  }\n\n  \/* The main dashboard card *\/\n  .capy-dashboard-card {\n    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);\n    border: 1px solid rgba(255,255,255,0.08);\n    border-radius: 1.25rem;\n    padding: 1.5rem;\n    box-shadow:\n      0 0 0 1px rgba(96,165,250,0.05),\n      0 40px 80px -20px rgba(0,0,0,0.6),\n      inset 0 1px 0 rgba(255,255,255,0.05);\n    animation: capy-float 6s ease-in-out infinite;\n  }\n\n  @keyframes capy-float {\n    0%, 100% { transform: translateY(0px); }\n    50% { transform: translateY(-10px); }\n  }\n\n  \/* Dashboard top bar *\/\n  .capy-dash-topbar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 1.25rem;\n    padding-bottom: 1rem;\n    border-bottom: 1px solid rgba(255,255,255,0.06);\n  }\n\n  .capy-dash-dots {\n    display: flex;\n    gap: 6px;\n  }\n\n  .capy-dash-dots span {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n  }\n\n  .capy-dash-dots span:nth-child(1) { background: #ef4444; }\n  .capy-dash-dots span:nth-child(2) { background: #f59e0b; }\n  .capy-dash-dots span:nth-child(3) { background: #22c55e; }\n\n  .capy-dash-title {\n    font-size: 0.8rem;\n    font-weight: 600;\n    color: var(--slate-400);\n    letter-spacing: 0.05em;\n  }\n\n  .capy-dash-badge {\n    font-size: 0.7rem;\n    font-weight: 700;\n    padding: 0.25rem 0.625rem;\n    background: rgba(96,165,250,0.15);\n    color: #93c5fd;\n    border-radius: 9999px;\n    border: 1px solid rgba(96,165,250,0.2);\n  }\n\n  \/* Learning tracks list *\/\n  .capy-dash-tracks-label {\n    font-size: 0.7rem;\n    font-weight: 700;\n    color: var(--slate-500);\n    text-transform: uppercase;\n    letter-spacing: 0.1em;\n    margin-bottom: 0.75rem;\n  }\n\n  .capy-dash-track {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    padding: 0.625rem 0.75rem;\n    border-radius: 0.75rem;\n    margin-bottom: 0.5rem;\n    background: rgba(255,255,255,0.03);\n    border: 1px solid rgba(255,255,255,0.04);\n    transition: background 0.2s;\n  }\n\n  .capy-dash-track.capy-dash-track-active {\n    background: rgba(37,99,235,0.12);\n    border-color: rgba(96,165,250,0.2);\n  }\n\n  .capy-dash-track-icon {\n    width: 32px;\n    height: 32px;\n    border-radius: 0.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 0.875rem;\n    flex-shrink: 0;\n  }\n\n  .capy-dash-track-info {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .capy-dash-track-name {\n    font-size: 0.8rem;\n    font-weight: 600;\n    color: var(--white);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .capy-dash-track-meta {\n    font-size: 0.7rem;\n    color: var(--slate-500);\n    margin-top: 1px;\n  }\n\n  .capy-dash-track-progress {\n    flex-shrink: 0;\n    text-align: right;\n  }\n\n  .capy-dash-track-pct {\n    font-size: 0.75rem;\n    font-weight: 700;\n    color: #93c5fd;\n  }\n\n  .capy-dash-prog-bar-bg {\n    width: 48px;\n    height: 3px;\n    background: rgba(255,255,255,0.08);\n    border-radius: 9999px;\n    margin-top: 3px;\n    overflow: hidden;\n  }\n\n  .capy-dash-prog-bar-fill {\n    height: 100%;\n    border-radius: 9999px;\n    background: linear-gradient(to right, #60a5fa, #a78bfa);\n  }\n\n  \/* Stats row at bottom *\/\n  .capy-dash-stats-row {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 0.625rem;\n    margin-top: 1rem;\n    padding-top: 1rem;\n    border-top: 1px solid rgba(255,255,255,0.06);\n  }\n\n  .capy-dash-stat-mini {\n    background: rgba(255,255,255,0.03);\n    border: 1px solid rgba(255,255,255,0.05);\n    border-radius: 0.625rem;\n    padding: 0.625rem 0.5rem;\n    text-align: center;\n  }\n\n  .capy-dash-stat-mini-num {\n    font-size: 1rem;\n    font-weight: 800;\n    color: var(--white);\n    letter-spacing: -0.02em;\n  }\n\n  .capy-dash-stat-mini-label {\n    font-size: 0.65rem;\n    font-weight: 500;\n    color: var(--slate-500);\n    margin-top: 2px;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n  }\n\n  \/* IOSH badge floating *\/\n  .capy-dash-iosh-badge {\n    position: absolute;\n    bottom: -1.5rem;\n    left: -1.5rem;\n    background: linear-gradient(135deg, #1e293b, #0f172a);\n    border: 1px solid rgba(255,255,255,0.1);\n    border-radius: 1rem;\n    padding: 0.75rem 1rem;\n    display: flex;\n    align-items: center;\n    gap: 0.625rem;\n    box-shadow: 0 10px 30px rgba(0,0,0,0.4);\n    animation: capy-float 6s ease-in-out infinite;\n    animation-delay: 1s;\n  }\n\n  .capy-iosh-icon {\n    width: 36px;\n    height: 36px;\n    border-radius: 0.5rem;\n    background: linear-gradient(135deg, #22c55e, #16a34a);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  .capy-iosh-text-label {\n    font-size: 0.65rem;\n    font-weight: 600;\n    color: var(--slate-400);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n  }\n\n  .capy-iosh-text-value {\n    font-size: 0.8rem;\n    font-weight: 700;\n    color: var(--white);\n    margin-top: 1px;\n  }\n\n  \/* Library count floating badge *\/\n  .capy-dash-library-badge {\n    position: absolute;\n    top: -5.25rem;\n    right: -1.5rem;\n    background: linear-gradient(135deg, #2563eb, #7c3aed);\n    border-radius: 1rem;\n    padding: 0.75rem 1rem;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    box-shadow: 0 10px 30px rgba(37,99,235,0.4);\n    animation: capy-float 6s ease-in-out infinite;\n    animation-delay: 2.5s;\n  }\n\n  .capy-lib-count {\n    font-size: 1.125rem;\n    font-weight: 800;\n    color: var(--white);\n    letter-spacing: -0.02em;\n  }\n\n  .capy-lib-label {\n    font-size: 0.7rem;\n    font-weight: 600;\n    color: rgba(255,255,255,0.8);\n    line-height: 1.3;\n  }\n\n  \/* ==============================================\n      PART 2: THE PROBLEM WE SOLVE\n      ============================================== *\/\n  .capy-problem-section {\n    padding: 9rem 0;\n    background-color: var(--white);\n    overflow: hidden;\n    position: relative;\n  }\n\n  \/* Subtle decorative pattern *\/\n  .capy-problem-section::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 1px;\n    height: 6rem;\n    background: linear-gradient(to bottom, transparent, var(--slate-200));\n  }\n\n  .capy-problem-inner {\n    max-width: 56rem;\n    margin: 0 auto;\n    text-align: center;\n  }\n\n  \/* Eyebrow label *\/\n  .capy-problem-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 0.8rem;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.15em;\n    color: var(--slate-400);\n    margin-bottom: 2rem;\n  }\n\n  .capy-problem-eyebrow-line {\n    display: inline-block;\n    width: 2rem;\n    height: 2px;\n    background: linear-gradient(to right, #60a5fa, #a78bfa);\n    border-radius: 9999px;\n  }\n\n  \/* Big headline *\/\n  .capy-problem-headline {\n    font-size: 2.5rem;\n    font-weight: 800;\n    color: var(--brand-900);\n    line-height: 1.1;\n    letter-spacing: -0.03em;\n    margin-bottom: 3.5rem;\n  }\n\n  @media (min-width: 768px) {\n    .capy-problem-headline { font-size: 3.75rem; }\n  }\n\n  @media (min-width: 1024px) {\n    .capy-problem-headline { font-size: 4.25rem; }\n  }\n\n  \/* Gradient accent on key number *\/\n  .capy-problem-headline .capy-gradient-text {\n    background-clip: text;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-image: linear-gradient(to right, #60a5fa, #a78bfa);\n  }\n\n  \/* Divider *\/\n  .capy-problem-divider {\n    width: 4rem;\n    height: 4px;\n    border-radius: 2px;\n    background: linear-gradient(to right, #60a5fa, #a78bfa);\n    margin: 0 auto 3.5rem auto;\n  }\n\n  \/* Body text block *\/\n  .capy-problem-body {\n    display: flex;\n    flex-direction: column;\n    gap: 1.75rem;\n  }\n\n  .capy-problem-body p {\n    font-size: 1.125rem;\n    line-height: 1.8;\n    color: var(--slate-500);\n    margin: 0;\n  }\n\n  @media (min-width: 768px) {\n    .capy-problem-body p { font-size: 1.25rem; }\n  }\n\n  \/* The punchy problem statement \u2014 slightly larger, darker *\/\n  .capy-problem-body p.capy-problem-lead {\n    font-size: 1.25rem;\n    color: var(--slate-700);\n    font-weight: 500;\n  }\n\n  @media (min-width: 768px) {\n    .capy-problem-body p.capy-problem-lead { font-size: 1.375rem; }\n  }\n\n  \/* Highlight \"Capytech\" in body *\/\n  .capy-problem-body strong {\n    color: var(--brand-900);\n    font-weight: 700;\n  }\n\n  \/* Inline accent phrase *\/\n  .capy-problem-accent {\n    color: var(--brand-600);\n    font-weight: 700;\n  }\n\n  \/* Bottom feature strip *\/\n  .capy-problem-strip {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 1rem;\n    margin-top: 4rem;\n    padding-top: 3.5rem;\n    border-top: 1px solid var(--slate-100);\n  }\n\n  @media (min-width: 640px) {\n    .capy-problem-strip { grid-template-columns: repeat(3, 1fr); }\n  }\n\n  .capy-problem-strip-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 0.75rem;\n    padding: 1.5rem;\n    border-radius: 1rem;\n    background: var(--slate-50);\n    border: 1px solid var(--slate-100);\n    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);\n  }\n\n  .capy-problem-strip-item:hover {\n    border-color: var(--brand-100);\n    background: var(--brand-50);\n    transform: translateY(-4px);\n    box-shadow: 0 12px 24px -8px rgba(37, 99, 235, 0.12);\n  }\n\n  .capy-problem-strip-icon {\n    width: 2.75rem;\n    height: 2.75rem;\n    border-radius: 0.75rem;\n    background: var(--white);\n    border: 1px solid var(--slate-200);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--brand-600);\n    flex-shrink: 0;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n  }\n\n  .capy-problem-strip-label {\n    font-size: 0.9rem;\n    font-weight: 700;\n    color: var(--brand-900);\n    text-align: center;\n  }\n\n  .capy-problem-strip-sub {\n    font-size: 0.8rem;\n    color: var(--slate-500);\n    text-align: center;\n    line-height: 1.5;\n  }\n\n  \/* Reveal animations *\/\n  .capy-reveal-up {\n    opacity: 0;\n    transform: translateY(30px);\n    transition: opacity 0.7s cubic-bezier(0.165, 0.84, 0.44, 1),\n                transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);\n  }\n\n  .capy-reveal-up.capy-active {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\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  .capy-delay-4 { transition-delay: 0.4s; }\n  .capy-delay-5 { transition-delay: 0.5s; }\n\n\n\/* ==============================================\n      PART 3: THE BENTO BOX PATHWAYS (Image Grid)\n      ============================================== *\/\n      .capy-pathways-section {\n    padding: 8rem 0;\n    background-color: var(--white);\n    border-top: 1px solid var(--slate-100);\n  }\n\n  .capy-section-header {\n    text-align: center;\n    margin-bottom: 4rem;\n    max-width: 48rem;\n    margin-left: auto;\n    margin-right: auto;\n    padding: 0 1.5rem; \/* Safe padding for mobile *\/\n  }\n\n  .capy-section-header h2 {\n    font-size: 2.5rem;\n    font-weight: 800;\n    color: var(--brand-900);\n    margin-bottom: 1rem;\n    letter-spacing: -0.02em;\n    line-height: 1.1;\n  }\n\n  @media (min-width: 768px) {\n    .capy-section-header h2 { font-size: 3.5rem; }\n  }\n\n  .capy-section-header p {\n    font-size: 1.125rem;\n    color: var(--slate-500);\n    line-height: 1.6;\n  }\n\n  \/* The Grid Layout (Desktop) *\/\n  .capy-bento-grid {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 1rem;\n    max-width: 1200px;\n    margin: 0 auto;\n    grid-auto-flow: dense; \n  }\n\n  @media (min-width: 768px) {\n    .capy-bento-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; padding: 0 1.5rem; }\n  }\n\n  @media (min-width: 1024px) {\n    .capy-bento-grid { grid-template-columns: repeat(4, 1fr); }\n    .capy-bento-wide { grid-column: span 2; }\n    .capy-bento-tall { grid-row: span 2; }\n  }\n\n  \/* ==============================================\n     MOBILE SWIPE CAROUSEL OVERRIDE\n     Turns the grid into a horizontal slider on phones\n     ============================================== *\/\n  @media (max-width: 767px) {\n    .capy-bento-grid {\n      display: flex !important;\n      flex-wrap: nowrap !important;\n      overflow-x: auto;\n      scroll-snap-type: x mandatory;\n      gap: 1rem;\n      \n      \/* Creates perfect peeking edges so users know to swipe *\/\n      padding-left: 5vw !important; \n      padding-right: 5vw !important;\n      padding-bottom: 2rem; \n      \n      scroll-behavior: smooth;\n      -ms-overflow-style: none;  \n      scrollbar-width: none;  \n    }\n    \n    .capy-bento-grid::-webkit-scrollbar { \n      display: none; \/* Hide ugly scrollbar *\/\n    }\n\n    .capy-bento-grid > div {\n      flex: 0 0 85% !important; \/* Cards take up 85% of screen width *\/\n      max-width: 85% !important;\n      scroll-snap-align: center;\n      min-width: 0; \n      min-height: 320px; \/* Gives mobile text room to breathe *\/\n    }\n  }\n\n  \/* --- Image Card Base Styles --- *\/\n  .capy-track-card {\n    border-radius: 1.5rem;\n    padding: 2.5rem;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end; \n    position: relative;\n    overflow: hidden;\n    min-height: 280px; \n    border: 1px solid rgba(255, 255, 255, 0.1);\n    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.1);\n    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s ease, border-color 0.6s ease;\n    isolation: isolate; \n  }\n\n  @media (min-width: 1024px) {\n    .capy-bento-tall { min-height: 100%; } \n  }\n\n  \/* The Background Image Layer *\/\n  .capy-track-bg {\n    position: absolute;\n    inset: -5px; \n    background-size: cover;\n    background-position: center;\n    z-index: 0;\n    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);\n  }\n\n  \/* The Darkening Gradient Overlay (FIXED FOR SMOOTH TRANSITION) *\/\n  .capy-track-overlay {\n    position: absolute;\n    inset: 0;\n    \/* Static gradient locked to the bottom *\/\n    background-image: linear-gradient(to bottom, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.95) 100%);\n    \/* Solid background color that smoothly fades in on hover *\/\n    background-color: rgba(15, 23, 42, 0.1); \n    z-index: 1;\n    transition: background-color 0.6s ease;\n  }\n\n  \/* The Content Layer Container *\/\n  .capy-track-content {\n    position: relative;\n    z-index: 2;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n  }\n\n  \/* The Grid-Based Text Wrapper *\/\n  .capy-track-text-wrap {\n    display: grid;\n    grid-template-rows: max-content 0fr;\n    transition: grid-template-rows 0.6s cubic-bezier(0.22, 1, 0.36, 1);\n  }\n\n  .capy-bento-wide .capy-track-text-wrap,\n  .capy-bento-tall .capy-track-text-wrap {\n    grid-template-rows: max-content 1fr; \/* Permanent text *\/\n  }\n\n  \/* Highlighted Title *\/\n  .capy-track-card h4 {\n    font-size: 1.4rem;\n    font-weight: 800;\n    color: var(--white);\n    margin: 0;\n    line-height: 1.2;\n    text-shadow: 0 4px 12px rgba(0,0,0,0.8), 0 1px 3px rgba(0,0,0,0.5); \n    position: relative;\n    padding-bottom: 0.25rem;\n  }\n\n  \/* Description text *\/\n  .capy-track-card p {\n    color: var(--slate-200);\n    font-size: 0.95rem;\n    line-height: 1.6;\n    margin: 0;\n    opacity: 0; \n    overflow: hidden; \n    transition: opacity 0.5s ease 0.1s, padding-top 0.6s ease;\n  }\n\n  \/* Show paragraphs permanently on Wide and Tall cards *\/\n  .capy-bento-wide p, .capy-bento-tall p {\n    opacity: 1;\n    padding-top: 0.75rem;\n  }\n\n  \/* Show paragraphs on ALL cards on mobile so users don't have to tap *\/\n  @media (max-width: 767px) {\n    .capy-track-text-wrap { grid-template-rows: max-content 1fr !important; }\n    .capy-track-card p { opacity: 1 !important; padding-top: 0.75rem !important; }\n  }\n\n  \/* --- HOVER ANIMATIONS --- *\/\n  .capy-track-card:hover {\n    transform: translateY(-8px); \n    box-shadow: 0 30px 50px -15px rgba(15, 23, 42, 0.6);\n    border-color: rgba(96, 165, 250, 0.5);\n    z-index: 10;\n  }\n\n  .capy-track-card:hover .capy-track-bg {\n    transform: scale(1.08); \n  }\n\n  \/* Darkens overlay smoothly via background-color *\/\n  .capy-track-card:hover .capy-track-overlay {\n    background-color: rgba(15, 23, 42, 0.5); \n  }\n\n  .capy-track-card:hover .capy-track-text-wrap {\n    grid-template-rows: max-content 1fr;\n  }\n\n  .capy-track-card:hover p {\n    opacity: 1;\n    padding-top: 0.75rem;\n  }\n\n\n  \/* ==============================================\n      PART 4: PREMIUM CONTENT LIBRARY (Features Grid)\n      ============================================== *\/\n      .capy-library-features {\n    padding: 8rem 0;\n    background-color: var(--slate-50); \/* Alternating background color *\/\n    border-top: 1px solid var(--slate-100);\n  }\n\n  \/* We can reuse the .capy-section-header from Part 3 for perfect consistency! *\/\n\n  \/* The 4-Column Feature Grid *\/\n  .capy-features-grid {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 3rem;\n    margin-top: 4rem;\n  }\n\n  @media (min-width: 640px) {\n    .capy-features-grid {\n      grid-template-columns: repeat(2, 1fr);\n      gap: 4rem 3rem;\n    }\n  }\n\n  @media (min-width: 1024px) {\n    .capy-features-grid {\n      grid-template-columns: repeat(4, 1fr);\n    }\n  }\n\n  .capy-feature-item {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    transition: transform 0.3s ease;\n  }\n\n  .capy-feature-item:hover {\n    transform: translateY(-5px);\n  }\n\n  \/* The Floating Icon Box *\/\n  .capy-feature-icon {\n    width: 3.5rem;\n    height: 3.5rem;\n    border-radius: 1rem;\n    background-color: var(--white);\n    color: var(--brand-600);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 1.5rem;\n    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.15);\n    border: 1px solid var(--slate-100);\n    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease, background-color 0.4s ease;\n  }\n\n  .capy-feature-icon svg {\n    width: 1.75rem;\n    height: 1.75rem;\n  }\n\n  .capy-feature-item:hover .capy-feature-icon {\n    transform: scale(1.1) rotate(5deg);\n    background-color: var(--brand-600);\n    color: var(--white);\n    box-shadow: 0 15px 30px -5px rgba(37, 99, 235, 0.3);\n  }\n\n  \/* Feature Typography *\/\n  .capy-feature-item h4 {\n    font-size: 1.25rem;\n    font-weight: 800;\n    color: var(--brand-900);\n    margin-bottom: 0.75rem;\n    line-height: 1.3;\n    letter-spacing: -0.01em;\n  }\n\n  .capy-feature-item p {\n    font-size: 1rem;\n    color: var(--slate-500);\n    line-height: 1.6;\n    margin: 0;\n  }\n\n\n  \/* ==============================================\n      PART 5: IOSH ACCREDITED (Dark Brand Theme)\n      ============================================== *\/\n      .capy-iosh-section {\n    padding: 8rem 0;\n    background-color: var(--brand-900); \/* Dark Navy base *\/\n    position: relative;\n    overflow: hidden;\n  }\n\n  .capy-iosh-glow {\n    position: absolute;\n    width: 800px;\n    height: 800px;\n    background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    pointer-events: none;\n    z-index: 0;\n  }\n\n  .capy-iosh-grid {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 4rem;\n    align-items: center;\n    position: relative;\n    z-index: 10;\n  }\n\n  @media (min-width: 1024px) {\n    .capy-iosh-grid { grid-template-columns: 1fr 1fr; gap: 6rem; }\n  }\n\n  \/* The Pill Badge *\/\n  .capy-iosh-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    padding: 0.35rem 1rem;\n    border-radius: 9999px;\n    background-color: rgba(255, 255, 255, 0.05);\n    border: 1px solid rgba(255, 255, 255, 0.1);\n    color: #93c5fd;\n    font-size: 0.8rem;\n    font-weight: 800;\n    text-transform: uppercase;\n    letter-spacing: 0.1em;\n    margin-bottom: 1.5rem;\n    backdrop-filter: blur(8px);\n  }\n\n  .capy-iosh-headline {\n    font-size: 2.5rem;\n    font-weight: 800;\n    color: var(--white);\n    line-height: 1.1;\n    margin-bottom: 1.5rem;\n    letter-spacing: -0.02em;\n  }\n\n  @media (min-width: 768px) {\n    .capy-iosh-headline { font-size: 3.5rem; }\n  }\n\n  .capy-iosh-body {\n    font-size: 1.125rem;\n    color: var(--slate-300);\n    line-height: 1.6;\n    margin-bottom: 2.5rem;\n    max-width: 95%;\n  }\n\n  \/* The Checklist *\/\n  .capy-iosh-list {\n    display: flex;\n    flex-direction: column;\n    gap: 1.5rem;\n    margin-bottom: 3rem;\n  }\n\n  .capy-iosh-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 1rem;\n  }\n\n  .capy-iosh-icon {\n    flex-shrink: 0;\n    width: 2rem;\n    height: 2rem;\n    border-radius: 50%;\n    background: rgba(96, 165, 250, 0.1);\n    border: 1px solid rgba(96, 165, 250, 0.2);\n    color: #60a5fa;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .capy-iosh-icon svg { width: 1.2rem; height: 1.2rem; }\n\n  .capy-iosh-text h4 {\n    font-size: 1.1rem;\n    font-weight: 700;\n    color: var(--white);\n    margin: 0 0 0.25rem 0;\n  }\n\n  .capy-iosh-text p {\n    font-size: 0.95rem;\n    color: var(--slate-400);\n    margin: 0;\n    line-height: 1.5;\n  }\n\n  \/* Right Side: 3D Visual Centerpiece *\/\n  .capy-iosh-visual {\n    position: relative;\n    perspective: 1000px;\n    display: flex;\n    justify-content: center;\n  }\n\n  .capy-iosh-shield-card {\n    width: 100%;\n    max-width: 400px;\n    background: rgba(255, 255, 255, 0.03);\n    backdrop-filter: blur(20px);\n    -webkit-backdrop-filter: blur(20px);\n    border: 1px solid rgba(255, 255, 255, 0.1);\n    border-radius: 2rem;\n    padding: 3rem;\n    text-align: center;\n    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);\n    transform: rotateY(-10deg) rotateX(5deg);\n    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.6s ease, border-color 0.6s ease;\n  }\n\n  .capy-iosh-visual:hover .capy-iosh-shield-card {\n    transform: rotateY(0deg) rotateX(0deg) translateY(-10px);\n    box-shadow: 0 35px 60px -15px rgba(59, 130, 246, 0.4);\n    border-color: rgba(96, 165, 250, 0.3);\n  }\n\n\/* --- The Upgraded Image Badge Wrapper (WordPress Override) --- *\/\n.capy-iosh-shield-icon {\n    width: 260px !important;\n    height: 260px !important;\n    margin: 0 auto 2rem auto !important;\n    display: flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    background: transparent !important; \n    box-shadow: none !important; \n    position: relative;\n    animation: capy-badge-float 6s ease-in-out infinite; \n  }\n\n  .capy-iosh-shield-icon::after {\n      display: none !important;\n  }\n\n  .capy-iosh-shield-icon img {\n    width: 260px !important;  \n    min-width: 460px !important; \/* CRITICAL: Forces WordPress to respect the size *\/\n    max-width: none !important;  \/* CRITICAL: Stops the theme from squishing it *\/\n    height: auto !important;\n    object-fit: contain !important;\n    display: block !important;\n    margin: 0 auto !important;\n    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.6)) !important; \n    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;\n  }\n\n  \/* 3D Hover pop effect *\/\n  .capy-iosh-shield-card:hover .capy-iosh-shield-icon img {\n    transform: scale(1.15) translateZ(30px) !important;\n  }\n\n  @keyframes capy-badge-float {\n    0%, 100% { transform: translateY(0); }\n    50% { transform: translateY(-15px); }\n  }\n\n  .capy-iosh-shield-icon svg {\n    width: 60px;\n    height: 60px;\n    color: var(--white);\n  }\n  \n  .capy-iosh-shield-card h3 {\n      color: var(--white);\n      font-size: 1.5rem;\n      font-weight: 800;\n      margin-bottom: 0.5rem;\n      letter-spacing: 0.05em;\n  }\n  \n  .capy-iosh-shield-card p {\n      color: var(--slate-400);\n      font-size: 0.95rem;\n      margin: 0;\n  }\n\n  \/* Mobile hardware acceleration fallback *\/\n  @media (max-width: 767px) {\n      .capy-iosh-glow { display: none !important; }\n      .capy-iosh-shield-card { transform: none; backdrop-filter: none; background: #1e293b; }\n      .capy-iosh-visual:hover .capy-iosh-shield-card { transform: none; }\n  }\n\n\n\/* ==============================================\n      PART 6: SEAMLESS INTEGRATION (Bulletproof Diagram)\n      ============================================== *\/\n      .capy-integration-section {\n    padding: 8rem 0;\n    background-color: var(--white);\n    border-bottom: 1px solid var(--slate-100);\n    position: relative;\n    overflow: hidden;\n  }\n\n  \/* 1. High-Tech Blueprint Grid (More Visible!) *\/\n  .capy-int-bg-grid {\n    position: absolute;\n    inset: 0;\n    \/* Swapped to a soft blue dot to make it pop against the white *\/\n    background-image: radial-gradient(rgba(59, 130, 246, 0.2) 2px, transparent 2px);\n    background-size: 32px 32px;\n    z-index: 0;\n    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);\n    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);\n  }\n\n  \/* 2. Soft Ambient Glow *\/\n  .capy-int-glow {\n    position: absolute;\n    width: 800px;\n    height: 800px;\n    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 0;\n    pointer-events: none;\n  }\n\n  .capy-integration-section .capy-container {\n    position: relative;\n    z-index: 10;\n  }\n\n  \/* 3. Centered Header *\/\n  .capy-int-header {\n    text-align: center;\n    max-width: 48rem;\n    margin: 0 auto 4rem auto;\n    padding: 0 1.5rem;\n  }\n\n  .capy-int-header h2 {\n    font-size: 2.5rem;\n    font-weight: 800;\n    color: var(--brand-900);\n    line-height: 1.1;\n    margin-bottom: 1.5rem;\n    letter-spacing: -0.02em;\n  }\n\n  @media (min-width: 768px) {\n    .capy-int-header h2 { font-size: 3.5rem; }\n  }\n\n  .capy-int-header p {\n    font-size: 1.125rem;\n    color: var(--slate-500);\n    line-height: 1.7;\n    margin: 0;\n  }\n\n  \/* 4. The Glass Diagram Container *\/\n  .capy-int-visual {\n    background: rgba(255, 255, 255, 0.85);\n    backdrop-filter: blur(12px);\n    -webkit-backdrop-filter: blur(12px);\n    border: 1px solid rgba(59, 130, 246, 0.15); \/* Blue tinted border *\/\n    border-radius: 1.5rem;\n    padding: 4rem 2rem;\n    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.08);\n    max-width: 800px;\n    margin: 0 auto 2rem auto; \n  }\n\n  \/* --- THE MATHEMATICAL TREE LAYOUT --- *\/\n  .capy-tree-wrapper {\n    width: 100%;\n    max-width: 600px;\n    margin: 0 auto;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .capy-int-node {\n    padding: 1rem 1.5rem;\n    border-radius: 0.75rem;\n    font-size: 1rem;\n    font-weight: 800;\n    text-align: center;\n    position: relative;\n    z-index: 2;\n    letter-spacing: 0.02em;\n  }\n\n  .capy-node-main {\n    background: var(--brand-50);\n    color: var(--brand-700);\n    border: 1px solid rgba(59, 130, 246, 0.4);\n    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.25);\n  }\n\n  \/* Flawless Flexbox Row (15% - 50% - 85% Math) *\/\n  .capy-node-row {\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n  }\n\n  .capy-node-sub {\n    background: var(--white);\n    color: var(--slate-700);\n    border: 1px solid var(--slate-300);\n    width: 30%; \/* Forces exact 30% width *\/\n    padding: 1rem 0; \/* Locks internal spacing *\/\n    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.05);\n  }\n\n  \/* Flawless Percentage-Based Lines *\/\n  .capy-int-lines {\n    position: relative;\n    width: 100%;\n    height: 4rem;\n  }\n\n  .capy-line-center { position: absolute; top: 0; left: 50%; width: 2px; height: 50%; background: #cbd5e1; transform: translateX(-50%); }\n  .capy-line-branch { position: absolute; top: 50%; left: 15%; width: 70%; height: 2px; background: #cbd5e1; }\n  .capy-line-drop   { position: absolute; top: 50%; width: 2px; height: 50%; background: #cbd5e1; transform: translateX(-50%); }\n  \n  .capy-line-drop-l { left: 15%; }\n  .capy-line-drop-c { left: 50%; }\n  .capy-line-drop-r { left: 85%; }\n\n  \/* Bolder Data Pulses *\/\n  .capy-data-pulse {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: var(--brand-500);\n    border-radius: 50%;\n    box-shadow: 0 0 12px 3px rgba(59, 130, 246, 0.6);\n    transform: translateX(-50%); \/* Centers pulse perfectly on line *\/\n    top: 0;\n    opacity: 0;\n  }\n\n  .capy-pulse-1 { animation: capy-path-center 2.5s infinite 0s; }\n  .capy-pulse-2 { animation: capy-path-left 2.5s infinite 0.8s; }\n  .capy-pulse-3 { animation: capy-path-right 2.5s infinite 1.6s; }\n\n  \/* Sync'd Routing Animations *\/\n  @keyframes capy-path-center {\n    0%, 5%   { top: 0; left: 50%; opacity: 0; }\n    10%      { top: 0; left: 50%; opacity: 1; }\n    90%      { top: 100%; left: 50%; opacity: 1; }\n    95%, 100%{ top: 100%; left: 50%; opacity: 0; }\n  }\n  @keyframes capy-path-left {\n    0%, 5%   { top: 0; left: 50%; opacity: 0; }\n    10%      { top: 0; left: 50%; opacity: 1; }\n    40%      { top: 50%; left: 50%; }\n    60%      { top: 50%; left: 15%; }\n    90%      { top: 100%; left: 15%; opacity: 1; }\n    95%, 100%{ top: 100%; left: 15%; opacity: 0; }\n  }\n  @keyframes capy-path-right {\n    0%, 5%   { top: 0; left: 50%; opacity: 0; }\n    10%      { top: 0; left: 50%; opacity: 1; }\n    40%      { top: 50%; left: 50%; }\n    60%      { top: 50%; left: 85%; }\n    90%      { top: 100%; left: 85%; opacity: 1; }\n    95%, 100%{ top: 100%; left: 85%; opacity: 0; }\n  }\n\n  \/* 5. Mobile Squeeze Fix *\/\n  @media (max-width: 640px) {\n    .capy-int-visual { padding: 2.5rem 1rem; }\n    .capy-int-node.capy-node-sub { \n      padding: 0.75rem 0; \/* Tighter padding *\/\n      font-size: 0.75rem; \/* Shrunk text *\/\n      letter-spacing: 0;\n    }\n  }\n\n  \/* 6. The Horizontal Support Box *\/\n  .capy-support-box {\n    background: var(--slate-50);\n    padding: 1.5rem 2rem;\n    border-radius: 0 1rem 1rem 0;\n    display: flex;\n    flex-direction: column;\n    gap: 1.25rem;\n    align-items: flex-start;\n    max-width: 800px;\n    margin: 0 auto;\n    border: 1px solid var(--slate-200);\n    border-left: 4px solid var(--brand-500);\n  }\n\n  @media (min-width: 640px) {\n    .capy-support-box { flex-direction: row; align-items: center; }\n  }\n\n  .capy-support-icon {\n    width: 3rem; height: 3rem;\n    border-radius: 50%;\n    background: rgba(59, 130, 246, 0.1);\n    color: var(--brand-600);\n    display: flex; align-items: center; justify-content: center;\n    flex-shrink: 0;\n  }\n  .capy-support-icon svg { width: 1.5rem; height: 1.5rem; }\n  \n  .capy-support-text h4 { font-size: 1.15rem; font-weight: 800; color: var(--brand-900); margin: 0 0 0.25rem 0; }\n  .capy-support-text p { font-size: 1rem; color: var(--slate-600); margin: 0; line-height: 1.6; }\n\n\n  \/* ==============================================\n      PART 7: FINAL CTA (The Grand Finale)\n      ============================================== *\/\n      .capy-finale-section {\n    background-color: var(--brand-900); \n    padding-top: 8rem;\n    \/* padding: 8rem 1.5rem; *\/\n    position: relative;\n    overflow: hidden; \n  }\n\n  .capy-finale-glow {\n    position: absolute;\n    width: 1000px;\n    height: 1000px;\n    background: radial-gradient(circle, rgba(96, 165, 250, 0.15) 0%, transparent 70%);\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    pointer-events: none;\n    z-index: 0;\n  }\n\n  .capy-cta-card {\n    background-color: rgba(30, 41, 59, 0.6); \n    backdrop-filter: blur(20px);\n    -webkit-backdrop-filter: blur(20px);\n    border: 1px solid rgba(255, 255, 255, 0.1);\n    border-radius: 2rem;\n    padding: 4rem 2rem;\n    text-align: center;\n    position: relative;\n    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n    max-width: 64rem;\n    margin: 0 auto;\n    overflow: hidden;\n  }\n\n  @media (min-width: 768px) {\n    .capy-cta-card { padding: 6rem 4rem; }\n  }\n\n  \/* Internal Card Glow *\/\n  .capy-cta-glow-inner {\n    position: absolute;\n    inset: 0;\n    background: radial-gradient(circle at top, rgba(59, 130, 246, 0.2) 0%, transparent 70%);\n    pointer-events: none;\n    z-index: 0;\n  }\n\n  .capy-cta-content {\n    position: relative;\n    z-index: 10;\n  }\n\n  .capy-cta-card h2 {\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.02em;\n  }\n\n  @media (min-width: 768px) {\n    .capy-cta-card h2 { font-size: 3.5rem; }\n  }\n\n  .capy-cta-card p {\n    font-size: 1.125rem;\n    color: var(--slate-300);\n    line-height: 1.6;\n    margin: 0 auto 3rem auto;\n    max-width: 48rem;\n  }\n\n  \/* WhatsApp Secondary Button *\/\n  .capy-btn-whatsapp {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.5rem;\n    padding: 1.125rem 2rem;\n    font-size: 1.0625rem;\n    font-weight: 700;\n    border-radius: 1rem;\n    text-decoration: none;\n    background-color: rgba(34, 197, 94, 0.1);\n    color: #4ade80 !important;\n    border: 1px solid rgba(34, 197, 94, 0.3);\n    transition: all 0.3s ease;\n  }\n\n  .capy-btn-whatsapp:hover {\n    background-color: #22c55e;\n    color: var(--white) !important;\n    border-color: #22c55e;\n    transform: translateY(-3px);\n    box-shadow: 0 10px 20px -5px rgba(34, 197, 94, 0.4);\n  }\n  \n  .capy-btn-whatsapp svg {\n      transition: transform 0.3s ease;\n  }\n  .capy-btn-whatsapp:hover svg {\n      transform: scale(1.1);\n  }\n\n\n  \/* --- THE MINIMAL FOOTER (From Homepage) --- *\/\n  .capy-footer-master {\n    border-top: 1px solid rgba(255, 255, 255, 0.05);\n    padding: 5rem 0 2rem 0;\n    margin-top: 4rem; \/* Adds space between the CTA card and the footer *\/\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; }\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; }\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 { width: 160px; height: auto; }\n  .capy-footer-contact-list { display: flex; flex-direction: column; gap: 0.75rem; }\n  .capy-footer-contact-list span { display: flex; align-items: center; gap: 0.75rem; color: var(--slate-300); font-size: 0.9rem; }\n  .capy-footer-contact-list svg { width: 1.2rem; height: 1.2rem; color: var(--brand-500); }\n  \n  .capy-footer-master h4 { color: var(--white); font-size: 1.1rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 1.5rem; }\n  \n  .capy-footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }\n  .capy-footer-links a { color: var(--slate-400); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }\n  .capy-footer-links a:hover { color: var(--white); }\n\n  \/* FOOTER CF7 FORM OVERRIDES *\/\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%; box-sizing: border-box; padding: 0.875rem 1rem; border-radius: 0.75rem; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--white); font-family: var(--font-sans); font-size: 0.9rem; outline: none; transition: all 0.3s; margin-bottom: 0.75rem;\n  }\n  .capy-footer-form .wpcf7-form-control::placeholder { color: var(--slate-500); }\n  .capy-footer-form .wpcf7-form-control:focus { border-color: var(--brand-500); background-color: rgba(255, 255, 255, 0.08); }\n  .capy-footer-form .wpcf7-form-control.wpcf7-textarea { resize: vertical; min-height: 80px; }\n  .capy-footer-form .wpcf7-submit { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 1.125rem 2rem !important; font-size: 1.05rem !important; font-weight: 700 !important; border-radius: 1rem !important; background-color: var(--brand-600) !important; color: var(--white) !important; border: 1px solid var(--brand-600) !important; transition: all 0.3s ease !important; width: 100% !important; cursor: pointer !important; margin-top: 0.5rem !important; }\n  .capy-footer-form .wpcf7-submit:hover { background-color: var(--brand-500) !important; transform: translateY(-3px) !important; box-shadow: 0 15px 30px -5px rgba(37, 99, 235, 0.5) !important; }\n  \n  .capy-footer-bottom { text-align: center; gap: 1rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.05); color: var(--slate-500); font-size: 0.85rem; }\n  @media (min-width: 640px) { .capy-footer-bottom { flex-direction: row; justify-content: space-between; } }\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      MODAL STYLES (inherited from parent)\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  .capy-modal-box.capy-modal-split {\n    background-color: var(--white);\n    width: 100%;\n    max-width: 850px;\n    border-radius: 1.5rem;\n    padding: 0;\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  .capy-modal-visual { display: none; }\n\n  .capy-modal-content {\n    padding: 2.5rem 2rem;\n    position: relative;\n  }\n\n  @media (min-width: 768px) {\n    .capy-modal-box.capy-modal-split { flex-direction: row; }\n    .capy-modal-visual {\n      display: flex;\n      width: 45%;\n      background-image: linear-gradient(to bottom, rgba(15, 23, 42, 0.1), rgba(15, 23, 42, 0.9)), 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 { font-size: 1.5rem; font-weight: 700; color: var(--white); margin-bottom: 0.5rem; line-height: 1.2; }\n    .capy-modal-visual-text p  { font-size: 0.95rem; color: var(--slate-300); line-height: 1.5; margin: 0; }\n    .capy-modal-content { width: 55%; padding: 3rem; }\n  }\n\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 { color: var(--slate-900); }\n\n  .capy-modal-header { text-align: center; margin-bottom: 2rem; }\n  .capy-modal-icon {\n    width: 3rem; height: 3rem;\n    background-color: var(--brand-50);\n    color: var(--brand-600);\n    border-radius: 0.75rem;\n    display: flex; align-items: center; justify-content: center;\n    margin: 0 auto 1rem auto;\n  }\n  .capy-modal-header h3 { font-size: 1.5rem; font-weight: 800; color: var(--brand-900); margin-bottom: 0.5rem; letter-spacing: -0.02em; }\n  .capy-modal-header p  { font-size: 0.95rem; color: var(--slate-500); line-height: 1.5; margin: 0; }\n\n  \/* ==============================================\n      MODAL CF7 FORM OVERRIDES (From Homepage)\n      ============================================== *\/\n      .capy-modal-form-wrapper .wpcf7-form-control.wpcf7-text,\n  .capy-modal-form-wrapper .wpcf7-form-control.wpcf7-textarea,\n  .capy-modal-form-wrapper .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    margin-bottom: 1rem;\n  }\n\n  .capy-modal-form-wrapper .wpcf7-form-control.wpcf7-textarea { resize: vertical; min-height: 100px; }\n  .capy-modal-form-wrapper .wpcf7-form-control:focus { background-color: var(--white); border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }\n\n  \/* The Blue Submit Button *\/\n  .capy-modal-form-wrapper .wpcf7-submit {\n    display: block !important;\n    width: 100% !important;\n    padding: 1.125rem 1rem !important;\n    font-size: 1.05rem !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    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;\n    margin-top: 0.5rem !important;\n  }\n\n  .capy-modal-form-wrapper .wpcf7-submit:hover {\n    background-color: var(--brand-500) !important;\n    transform: translateY(-2px) !important;\n    box-shadow: 0 10px 20px -5px rgba(37, 99, 235, 0.4) !important;\n  }\n\n  \/* ==============================================\n      CF7 SPINNER & ALERTS (The SaaS Loader)\n      ============================================== *\/\n  \/* 1. Hide the button smoothly when submitting *\/\n  .capy-home-wrapper .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. Build the sleek CSS ring *\/\n  .capy-home-wrapper .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    border: 3px solid var(--slate-200);\n    border-top-color: var(--brand-500);\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  \/* 3. Nuke the default WordPress\/CF7 SVG icon *\/\n  .capy-home-wrapper .wpcf7 form .wpcf7-spinner > * { display: none !important; }\n  .capy-home-wrapper .wpcf7 form .wpcf7-spinner svg { display: none !important; opacity: 0 !important; width: 0 !important; height: 0 !important; }\n  .capy-home-wrapper .wpcf7 form .wpcf7-spinner::before, \n  .capy-home-wrapper .wpcf7 form .wpcf7-spinner::after { display: none !important; content: none !important; }\n\n  \/* 4. Trigger the spin animation *\/\n  .capy-home-wrapper .wpcf7 form.submitting .wpcf7-spinner {\n    width: 32px;\n    height: 32px;\n    margin: 1rem auto !important; \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  \/* 5. Style the Success\/Error Message box *\/\n  .capy-home-wrapper .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: 100% !important;\n    padding: 1rem !important;\n    font-weight: 600 !important;\n  }\n\n  .capy-home-wrapper .wpcf7 form.sent .wpcf7-response-output {\n    background-color: #dcfce7 !important; \n    color: #16a34a !important; \n  }\n  \n  .capy-home-wrapper .wpcf7 form.failed .wpcf7-response-output,\n  .capy-home-wrapper .wpcf7 form.invalid .wpcf7-response-output {\n    background-color: #fee2e2 !important; \n    color: #dc2626 !important; \n  }\n\n\n  \/* ==============================================\n      MOBILE GPU PERFORMANCE RELIEF\n      ============================================== *\/\n  @media (max-width: 767px) {\n    .capy-hero-glow-1,\n    .capy-hero-glow-2 {\n      display: none !important;\n    }\n  }\n\n  \/* ==============================================\n      SCROLL REVEAL (shared)\n      ============================================== *\/\n  .capy-reveal-up,\n  .capy-reveal-left,\n  .capy-reveal-right {\n    opacity: 0;\n    transition: opacity 0.7s cubic-bezier(0.165, 0.84, 0.44, 1),\n                transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);\n  }\n\n  .capy-reveal-up    { transform: translateY(40px); }\n  .capy-reveal-left  { transform: translateX(-40px); }\n  .capy-reveal-right { transform: translateX(40px); }\n\n  .capy-reveal-up.capy-active,\n  .capy-reveal-left.capy-active,\n  .capy-reveal-right.capy-active {\n    opacity: 1;\n    transform: none;\n  }\n\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      PART 2: LIBRARY vs ACADEMY \u2014 MANIFESTO\n      ============================================== *\/\n  .capy-manifesto-section {\n    padding: 8rem 0;\n    background-color: var(--slate-50);\n    border-top: 1px solid var(--slate-100);\n    overflow: hidden;\n  }\n\n  .capy-manifesto-grid {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 4rem;\n    align-items: start;\n  }\n\n  @media (min-width: 1024px) {\n    .capy-manifesto-grid {\n      grid-template-columns: 1fr 1fr;\n      gap: 7rem;\n      align-items: center;\n    }\n  }\n\n  \/* --- LEFT: The Big Typographic Headline --- *\/\n  .capy-manifesto-left {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .capy-manifesto-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 0.75rem;\n    font-weight: 700;\n    color: var(--brand-600);\n    text-transform: uppercase;\n    letter-spacing: 0.15em;\n    margin-bottom: 1.75rem;\n  }\n\n  \/* .capy-manifesto-eyebrow::before {\n    content: '';\n    display: block;\n    width: 1.5rem;\n    height: 2px;\n    background: var(--brand-600);\n    border-radius: 2px;\n  } *\/\n\n  \/* The headline: two contrasting lines *\/\n  .capy-manifesto-headline {\n    font-size: 2.75rem;\n    font-weight: 800;\n    line-height: 1.1;\n    letter-spacing: -0.025em;\n    color: var(--brand-900);\n    margin-bottom: 2rem;\n  }\n\n  @media (min-width: 768px) {\n    .capy-manifesto-headline { font-size: 3.75rem; }\n  }\n\n  \/* \"Library\" \u2014 the problem word: muted, struck through feel *\/\n  .capy-word-library {\n    display: block;\n    color: var(--slate-400);\n    position: relative;\n  }\n\n  \/* Strikethrough line on \"Library\" *\/\n  \/* .capy-word-library::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 53%;\n    width: 100%;\n    height: 3px;\n    background: var(--slate-300);\n    border-radius: 2px;\n  } *\/\n\n  \/* \"Academy\" \u2014 the solution word: gradient & bold *\/\n  .capy-word-academy {\n    display: block;\n    background-clip: text;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-image: linear-gradient(to right, #60a5fa, #a78bfa);\n  }\n\n  \/* Connector word \"Make it an\" \u2014 smaller, dark *\/\n  .capy-headline-connector {\n    display: block;\n    font-size: 1.5rem;\n    font-weight: 700;\n    color: var(--brand-900);\n    letter-spacing: -0.01em;\n    margin: 0.25rem 0;\n  }\n\n  @media (min-width: 768px) {\n    .capy-headline-connector { font-size: 2rem; }\n  }\n\n  \/* Divider bar *\/\n  .capy-manifesto-divider {\n    width: 3rem;\n    height: 4px;\n    border-radius: 2px;\n    background: linear-gradient(to right, #60a5fa, #a78bfa);\n    margin-bottom: 1.75rem;\n  }\n\n  \/* Problem body copy *\/\n  .capy-manifesto-problem {\n    font-size: 1.125rem;\n    color: var(--slate-500);\n    line-height: 1.75;\n    max-width: 95%;\n  }\n\n  @media (min-width: 768px) {\n    .capy-manifesto-problem { font-size: 1.2rem; }\n  }\n\n  \/* --- RIGHT: The Solution Card --- *\/\n  .capy-manifesto-right {\n    position: relative;\n  }\n\n  .capy-manifesto-card {\n    background-color: var(--brand-900);\n    border-radius: 1.5rem;\n    padding: 2.75rem;\n    position: relative;\n    overflow: hidden;\n    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.3);\n    border: 1px solid var(--slate-700);\n    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),\n                box-shadow 0.4s ease;\n  }\n\n  .capy-manifesto-card:hover {\n    transform: translateY(-5px);\n    box-shadow: 0 35px 60px -15px rgba(59, 130, 246, 0.3);\n    border-color: var(--brand-600);\n  }\n\n  \/* Internal glow *\/\n  .capy-manifesto-card-glow {\n    position: absolute;\n    width: 350px;\n    height: 350px;\n    background: radial-gradient(circle, rgba(96,165,250,0.12) 0%, transparent 70%);\n    top: -120px;\n    right: -80px;\n    pointer-events: none;\n  }\n\n  \/* \"At Capytech\" kicker *\/\n  .capy-manifesto-kicker {\n    font-size: 0.8rem;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.12em;\n    color: #93c5fd;\n    margin-bottom: 1.25rem;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n  }\n\n  \/* .capy-manifesto-kicker::before {\n    content: '';\n    display: block;\n    width: 1rem;\n    height: 2px;\n    background: #93c5fd;\n    border-radius: 2px;\n  } *\/\n\n  \/* Solution body copy *\/\n  .capy-manifesto-solution-text {\n    font-size: 1.125rem;\n    color: var(--slate-300);\n    line-height: 1.8;\n    margin-bottom: 2rem;\n  }\n\n  @media (min-width: 768px) {\n    .capy-manifesto-solution-text { font-size: 1.2rem; }\n  }\n\n  \/* Highlighted pull quote inside the card *\/\n  .capy-manifesto-pull {\n    border-left: 3px solid #60a5fa;\n    padding: 1rem 1.25rem;\n    background: rgba(96, 165, 250, 0.06);\n    border-radius: 0 0.75rem 0.75rem 0;\n    margin-top: 1.5rem;\n  }\n\n  .capy-manifesto-pull p {\n    font-size: 1rem;\n    font-weight: 600;\n    color: var(--white);\n    line-height: 1.6;\n    font-style: italic;\n    margin: 0;\n  }\n\n  .capy-manifesto-pull p strong {\n    font-style: normal;\n    background-clip: text;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-image: linear-gradient(to right, #60a5fa, #a78bfa);\n  }\n\n\n\n  \n\n<\/style>\n\n<div class=\"capy-home-wrapper\">\n\n  <!-- part 1 -->\n  <section class=\"capy-home-hero\">\n\n    <div class=\"capy-hero-glow-1\"><\/div>\n    <div class=\"capy-hero-glow-2\"><\/div>\n    <div class=\"capy-hero-grid-bg\"><\/div>\n\n    <div class=\"capy-container\">\n      <div class=\"capy-hero-inner\">\n\n        <div class=\"capy-hero-content\">\n\n          <div class=\"capy-hero-badge capy-hero-load-up\">\n            <span class=\"capy-hero-badge-dot\"><\/span>\n            9,000+ Premium Off-the-Shelf Courses\n          <\/div>\n\n          <h1 class=\"capy-hero-load-up capy-hero-delay-1\">\n            World-Class Learning,<br>\n            <span class=\"capy-gradient-text\">Ready to Launch.<\/span>\n          <\/h1>\n\n          <p class=\"capy-hero-sub capy-hero-load-up capy-hero-delay-2\">\n            Accelerate your team's growth with instant access to over 9,000 premium <strong>off-the-shelf courses<\/strong>. From expertly curated, role-specific learning pathways to globally recognised, 100% online IOSH-accredited safety training, we deliver the exact skills your workforce needs today.\n          <\/p>\n\n          <div class=\"capy-hero-stats capy-hero-load-up capy-hero-delay-3\">\n            <div class=\"capy-hero-stat\">\n              <span class=\"capy-hero-stat-number\">9,000+<\/span>\n              <span class=\"capy-hero-stat-label\">Courses<\/span>\n            <\/div>\n            <div class=\"capy-hero-stat-divider\"><\/div>\n            <div class=\"capy-hero-stat\">\n              <span class=\"capy-hero-stat-number\">100%<\/span>\n              <span class=\"capy-hero-stat-label\">Online<\/span>\n            <\/div>\n            <div class=\"capy-hero-stat-divider\"><\/div>\n            <div class=\"capy-hero-stat\">\n              <span class=\"capy-hero-stat-number\">IOSH<\/span>\n              <span class=\"capy-hero-stat-label\">Accredited<\/span>\n            <\/div>\n          <\/div>\n\n          <div class=\"capy-hero-actions capy-hero-load-up capy-hero-delay-4\">\n            <a href=\"#demo\" class=\"capy-btn capy-btn-primary\">\n              Book a Strategy Call\n              <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\"><\/path><\/svg>\n            <\/a>\n            <a href=\"#catalogue\" class=\"capy-btn capy-btn-glass\">\n              Browse the Catalogue \u2193\n            <\/a>\n          <\/div>\n\n        <\/div>\n\n        <div class=\"capy-hero-visual capy-hero-load-up capy-hero-delay-3\">\n          <div class=\"capy-dashboard-wrap\">\n\n            <div class=\"capy-dash-library-badge\">\n              <svg width=\"20\" height=\"20\" 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-lib-count\">9,000+<\/div>\n                <div class=\"capy-lib-label\">Courses available<br>instantly<\/div>\n              <\/div>\n            <\/div>\n\n            <div class=\"capy-dashboard-card\">\n\n              <div class=\"capy-dash-topbar\">\n                <div class=\"capy-dash-dots\">\n                  <span><\/span><span><\/span><span><\/span>\n                <\/div>\n                <div class=\"capy-dash-title\">Learning Dashboard<\/div>\n                <div class=\"capy-dash-badge\">Live<\/div>\n              <\/div>\n\n              <div class=\"capy-dash-tracks-label\">Curated Learning Tracks<\/div>\n\n              <div class=\"capy-dash-track capy-dash-track-active\">\n                <div class=\"capy-dash-track-icon\" style=\"background:rgba(59,130,246,0.15); color:#60a5fa;\">\n                  <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\"><\/path><\/svg>\n                <\/div>\n                <div class=\"capy-dash-track-info\">\n                  <div class=\"capy-dash-track-name\">Leadership & Management<\/div>\n                  <div class=\"capy-dash-track-meta\">24 courses \u00b7 18 enrolled<\/div>\n                <\/div>\n                <div class=\"capy-dash-track-progress\">\n                  <div class=\"capy-dash-track-pct\">72%<\/div>\n                  <div class=\"capy-dash-prog-bar-bg\">\n                    <div class=\"capy-dash-prog-bar-fill\" style=\"width:72%\"><\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n\n              <div class=\"capy-dash-track\">\n                <div class=\"capy-dash-track-icon\" style=\"background:rgba(34,197,94,0.15); color:#4ade80;\">\n                  <svg width=\"16\" height=\"16\" 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-dash-track-info\">\n                  <div class=\"capy-dash-track-name\">IOSH Safety Training<\/div>\n                  <div class=\"capy-dash-track-meta\">12 courses \u00b7 Accredited<\/div>\n                <\/div>\n                <div class=\"capy-dash-track-progress\">\n                  <div class=\"capy-dash-track-pct\">55%<\/div>\n                  <div class=\"capy-dash-prog-bar-bg\">\n                    <div class=\"capy-dash-prog-bar-fill\" style=\"width:55%\"><\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n\n              <div class=\"capy-dash-track\">\n                <div class=\"capy-dash-track-icon\" style=\"background:rgba(167,139,250,0.15); color:#a78bfa;\">\n                  <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><path d=\"M12 8v4l3 3\"><\/path><\/svg>\n                <\/div>\n                <div class=\"capy-dash-track-info\">\n                  <div class=\"capy-dash-track-name\">Digital Transformation<\/div>\n                  <div class=\"capy-dash-track-meta\">31 courses \u00b7 42 enrolled<\/div>\n                <\/div>\n                <div class=\"capy-dash-track-progress\">\n                  <div class=\"capy-dash-track-pct\">38%<\/div>\n                  <div class=\"capy-dash-prog-bar-bg\">\n                    <div class=\"capy-dash-prog-bar-fill\" style=\"width:38%\"><\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n\n              <div class=\"capy-dash-track\">\n                <div class=\"capy-dash-track-icon\" style=\"background:rgba(251,191,36,0.12); color:#fbbf24;\">\n                  <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"><\/path><circle cx=\"9\" cy=\"7\" r=\"4\"><\/circle><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"><\/path><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"><\/path><\/svg>\n                <\/div>\n                <div class=\"capy-dash-track-info\">\n                  <div class=\"capy-dash-track-name\">HR & People Management<\/div>\n                  <div class=\"capy-dash-track-meta\">19 courses \u00b7 27 enrolled<\/div>\n                <\/div>\n                <div class=\"capy-dash-track-progress\">\n                  <div class=\"capy-dash-track-pct\">91%<\/div>\n                  <div class=\"capy-dash-prog-bar-bg\">\n                    <div class=\"capy-dash-prog-bar-fill\" style=\"width:91%\"><\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n\n              <div class=\"capy-dash-stats-row\">\n                <div class=\"capy-dash-stat-mini\">\n                  <div class=\"capy-dash-stat-mini-num\">9K+<\/div>\n                  <div class=\"capy-dash-stat-mini-label\">Courses<\/div>\n                <\/div>\n                <div class=\"capy-dash-stat-mini\">\n                  <div class=\"capy-dash-stat-mini-num\">48<\/div>\n                  <div class=\"capy-dash-stat-mini-label\">Tracks<\/div>\n                <\/div>\n                <div class=\"capy-dash-stat-mini\">\n                  <div class=\"capy-dash-stat-mini-num\">IOSH<\/div>\n                  <div class=\"capy-dash-stat-mini-label\">Accredited<\/div>\n                <\/div>\n              <\/div>\n\n            <\/div>\n\n            <div class=\"capy-dash-iosh-badge\">\n              <div class=\"capy-iosh-icon\">\n                <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"white\" stroke-width=\"2.5\" 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>\n                <div class=\"capy-iosh-text-label\">Globally Recognised<\/div>\n                <div class=\"capy-iosh-text-value\">IOSH Accredited<\/div>\n              <\/div>\n            <\/div>\n\n          <\/div>\n        <\/div>\n        <\/div>\n    <\/div>\n  <\/section>\n\n\n  <!-- part 2 -->\n  <section class=\"capy-manifesto-section\">\n    <div class=\"capy-container\">\n      <div class=\"capy-manifesto-grid\">\n\n        <div class=\"capy-manifesto-left\">\n\n          <div class=\"capy-manifesto-eyebrow capy-reveal-left\">\n            The Capytech Difference\n          <\/div>\n\n          <h2 class=\"capy-manifesto-headline capy-reveal-left capy-delay-1\">\n            <span class=\"capy-word-library\">9,000 Courses<\/span>\n            <span class=\"capy-word-library\">is a Library.<\/span>\n            <span class=\"capy-headline-connector\">Curated Pathways<\/span>\n            <span class=\"capy-headline-connector\">Make it an<\/span>\n            <span class=\"capy-word-academy\">Academy.<\/span>\n          <\/h2>\n\n          <div class=\"capy-manifesto-divider capy-reveal-up capy-delay-2\"><\/div>\n\n          <p class=\"capy-manifesto-problem capy-reveal-up capy-delay-2\">\n            Handing your employees a massive library of 9,000 courses is overwhelming. As a result, without direction, engagement drops, and learning stalls.\n          <\/p>\n\n        <\/div>\n\n        <div class=\"capy-manifesto-right capy-reveal-right capy-delay-2\">\n          <div class=\"capy-manifesto-card\">\n            <div class=\"capy-manifesto-card-glow\"><\/div>\n\n            <div class=\"capy-manifesto-kicker\">At Capytech<\/div>\n\n            <p class=\"capy-manifesto-solution-text\">\n              We don't just hand you the keys to a vast content repository. Instead, our team does the heavy lifting. Furthermore, we map out bespoke Learning Pathways tailored specifically to your organisation's roles and competencies, transforming a daunting library into a structured, high-impact training programme.\n            <\/p>\n\n            <div class=\"capy-manifesto-pull\">\n              <p>From an overwhelming catalogue to a <strong>purposeful Academy<\/strong>, built around your people, your roles, and your goals.<\/p>\n            <\/div>\n\n          <\/div>\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/section>\n\n\n  <!-- part 3 -->\n  <section class=\"capy-pathways-section\" id=\"catalogue\">\n  <div class=\"capy-container\">\n    \n    <div class=\"capy-section-header capy-reveal-up\">\n      <h2>We Map It Out, <br>Your Team <span class=\"capy-gradient-text\">Levels Up.<\/span><\/h2>\n      <p>Tell us your roles, and we\u2019ll build the tracks. Here are examples of the Executive-Level Pathways we curate:<\/p>\n    <\/div>\n\n    <div class=\"capy-bento-grid\">\n      \n      <div class=\"capy-track-card capy-bento-wide capy-reveal-up\">\n        <div class=\"capy-track-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1552664730-d307ca884978?auto=format&fit=crop&q=80&w=1200'); background-position: center 30%;\"><\/div>\n        <div class=\"capy-track-overlay\"><\/div>\n        <div class=\"capy-track-content\">\n          <div class=\"capy-track-text-wrap\">\n            <h4>Enterprise Sales & Negotiation<\/h4>\n            <p>We strategically blend bite-sized micro-learning with deep-dive Master Courses so the curriculum fits perfectly into your employees' busy workdays.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n      \n      <div class=\"capy-track-card capy-reveal-up capy-delay-1\">\n        <div class=\"capy-track-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=800');\"><\/div>\n        <div class=\"capy-track-overlay\"><\/div>\n        <div class=\"capy-track-content\">\n          <div class=\"capy-track-text-wrap\">\n            <h4>Cybersecurity & IT<\/h4>\n            <p>Defend your infrastructure with critical threat awareness training.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"capy-track-card capy-reveal-up capy-delay-2\">\n        <div class=\"capy-track-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1519389950473-47ba0277781c?auto=format&fit=crop&q=80&w=800');\"><\/div>\n        <div class=\"capy-track-overlay\"><\/div>\n        <div class=\"capy-track-content\">\n          <div class=\"capy-track-text-wrap\">\n            <h4>Executive Leadership<\/h4>\n            <p>Develop your next generation of decision-makers.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"capy-track-card capy-bento-tall capy-reveal-up\">\n        <div class=\"capy-track-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800');\"><\/div>\n        <div class=\"capy-track-overlay\"><\/div>\n        <div class=\"capy-track-content\">\n          <div class=\"capy-track-text-wrap\">\n            <h4>Customer Experience (CX)<\/h4>\n            <p>Equip your frontline with the soft skills and scenario-based training needed to turn frustrated customers into lifetime brand advocates.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"capy-track-card capy-reveal-up capy-delay-1\">\n        <div class=\"capy-track-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1589829085413-56de8ae18c73?auto=format&fit=crop&q=80&w=800');\"><\/div>\n        <div class=\"capy-track-overlay\"><\/div>\n        <div class=\"capy-track-content\">\n          <div class=\"capy-track-text-wrap\">\n            <h4>Corporate Compliance<\/h4>\n            <p>Make mandatory ethics training engaging and memorable.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"capy-track-card capy-reveal-up capy-delay-2\">\n        <div class=\"capy-track-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=800');\"><\/div>\n        <div class=\"capy-track-overlay\"><\/div>\n        <div class=\"capy-track-content\">\n          <div class=\"capy-track-text-wrap\">\n            <h4>Business Intelligence<\/h4>\n            <p>Turn your workforce into data-literate analysts.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"capy-track-card capy-bento-wide capy-reveal-up\">\n        <div class=\"capy-track-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1531403009284-440f080d1e12?auto=format&fit=crop&q=80&w=1200'); background-position: top;\"><\/div>\n        <div class=\"capy-track-overlay\"><\/div>\n        <div class=\"capy-track-content\">\n          <div class=\"capy-track-text-wrap\">\n            <h4>Agile Project Management<\/h4>\n            <p>From Scrum basics to enterprise-scale agile deployment, give your managers the tools to deliver complex projects on time.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"capy-track-card capy-reveal-up capy-delay-1\">\n        <div class=\"capy-track-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1522071820081-009f0129c71c?auto=format&fit=crop&q=80&w=800');\"><\/div>\n        <div class=\"capy-track-overlay\"><\/div>\n        <div class=\"capy-track-content\">\n          <div class=\"capy-track-text-wrap\">\n            <h4>Diversity & Inclusion<\/h4>\n            <p>Build a culture of belonging across your organisation.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"capy-track-card capy-reveal-up capy-delay-2\">\n        <div class=\"capy-track-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1600880292203-757bb62b4baf?auto=format&fit=crop&q=80&w=800');\"><\/div>\n        <div class=\"capy-track-overlay\"><\/div>\n        <div class=\"capy-track-content\">\n          <div class=\"capy-track-text-wrap\">\n            <h4>Account Management<\/h4>\n            <p>Strategies for retaining and upselling key clients.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n<\/section>\n\n\n<!-- part 4 -->\n<section class=\"capy-library-features\">\n  <div class=\"capy-container\">\n    \n    <div class=\"capy-section-header capy-reveal-up\">\n      <h2>Premium <span class=\"capy-gradient-text\">Off-the-Shelf Courses<\/span> <br>at Your Fingertips.<\/h2>\n      <p>Access to over 9,000 expert-led courses covering every essential business skill, available in English, Arabic, and more.<\/p>\n    <\/div>\n\n    <div class=\"capy-features-grid\">\n      \n      <div class=\"capy-feature-item capy-reveal-up\">\n        <div class=\"capy-feature-icon\">\n          <svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z\"><\/path><\/svg>\n        <\/div>\n        <h4>Vast & Diverse<\/h4>\n        <p>From Soft Skills and Management to Artificial Intelligence and Data Engineering.<\/p>\n      <\/div>\n      \n      <div class=\"capy-feature-item capy-reveal-up capy-delay-1\">\n        <div class=\"capy-feature-icon\">\n          <svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\"><\/path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path><\/svg>\n        <\/div>\n        <h4>Multi-Format Learning<\/h4>\n        <p>Engaging videos, interactive modules, podcasts, and quizzes to suit every learning style.<\/p>\n      <\/div>\n\n      <div class=\"capy-feature-item capy-reveal-up capy-delay-2\">\n        <div class=\"capy-feature-icon\">\n          <svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"><\/path><\/svg>\n        <\/div>\n        <h4>Always Updated<\/h4>\n        <p>Content is continuously refreshed to stay aligned with the latest industry standards, software updates, and compliance regulations.<\/p>\n      <\/div>\n\n      <div class=\"capy-feature-item capy-reveal-up capy-delay-3\">\n        <div class=\"capy-feature-icon\">\n          <svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z\"><\/path><\/svg>\n        <\/div>\n        <h4>Smart Assessments<\/h4>\n        <p>We provide tailored assessments and custom-designed client pass certificates to track, measure, and reward completion.<\/p>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- part 5 -->\n<section class=\"capy-iosh-section\">\n  <div class=\"capy-iosh-glow\"><\/div>\n  <div class=\"capy-container\">\n    <div class=\"capy-iosh-grid\">\n      \n      <div class=\"capy-iosh-content capy-reveal-left\">\n        \n        <div class=\"capy-iosh-eyebrow\">\n          <span class=\"capy-pulse-dot\" style=\"background: #60a5fa; box-shadow: 0 0 8px #60a5fa; width:6px; height:6px; border-radius:50%; display:inline-block; animation: capy-pulse 2s ease-in-out infinite;\"><\/span>\n          Official Certification\n        <\/div>\n        \n        <h2 class=\"capy-iosh-headline\">\n          100% Online. <br>\n          100% <span class=\"capy-gradient-text\">IOSH Accredited.<\/span>\n        <\/h2>\n        \n        <p class=\"capy-iosh-body\">\n          Skip the logistical headaches of traditional classroom training. Capytech offers a suite of genuine, online-only <a href=\"https:\/\/iosh.com\/\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"color: #93c5fd; text-decoration: underline;\">IOSH-accredited courses<\/a>, perfect for delivering health and safety compliance efficiently across your entire organisation.\n        <\/p>\n        \n        <div class=\"capy-iosh-list\">\n          \n          <div class=\"capy-iosh-item capy-reveal-up capy-delay-1\">\n            <div class=\"capy-iosh-icon\">\n              <svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n            <\/div>\n            <div class=\"capy-iosh-text\">\n              <h4>Zero Classrooms Needed<\/h4>\n              <p>Complete standard courses entirely online, including the final mandatory assessment (approx. 5 hours of self-paced learning).<\/p>\n            <\/div>\n          <\/div>\n          \n          <div class=\"capy-iosh-item capy-reveal-up capy-delay-2\">\n            <div class=\"capy-iosh-icon\">\n              <svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n            <\/div>\n            <div class=\"capy-iosh-text\">\n              <h4>Official Certification<\/h4>\n              <p>Successful learners are officially registered on the IOSH system and receive a formal, globally recognised certificate.<\/p>\n            <\/div>\n          <\/div>\n          \n          <div class=\"capy-iosh-item capy-reveal-up capy-delay-3\">\n            <div class=\"capy-iosh-icon\">\n              <svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n            <\/div>\n            <div class=\"capy-iosh-text\">\n              <h4>Customisable to Your Brand<\/h4>\n              <p>While strictly IOSH-aligned, Capytech is uniquely positioned to integrate your corporate branding, imagery, and specific safety procedures without losing accreditation.<\/p>\n            <\/div>\n          <\/div>\n\n        <\/div>\n        \n        <a href=\"#demo\" class=\"capy-btn capy-btn-primary capy-reveal-up capy-delay-4\">\n          View IOSH Course Syllabuses\n        <\/a>\n\n      <\/div>\n      \n      <div class=\"capy-iosh-visual capy-reveal-right capy-delay-1\">\n        <div class=\"capy-iosh-shield-card\">\n          \n          <div class=\"capy-iosh-shield-icon\">\n            <img decoding=\"async\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/03\/badge.png\" alt=\"IOSH Certified Safety Badge\">\n          <\/div>\n          \n          <h3>IOSH Certified<\/h3>\n          <p>100% Online & Officially Accredited<\/p>\n          \n          <div style=\"margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; align-items: center;\">\n              <div style=\"width: 60%; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px;\"><\/div>\n              <div style=\"width: 80%; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px;\"><\/div>\n              <div style=\"width: 40%; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px;\"><\/div>\n          <\/div>\n\n        <\/div>\n      <\/div>\n      \n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- part 6 -->\n<section class=\"capy-integration-section\">\n    \n  <div class=\"capy-int-bg-grid\"><\/div>\n  <div class=\"capy-int-glow\"><\/div>\n\n  <div class=\"capy-container\">\n    \n    <div class=\"capy-int-header capy-reveal-up\">\n      <h2>Plug and Play with <br>Your <span class=\"capy-gradient-text\">Ecosystem.<\/span><\/h2>\n      <p>We make deployment effortless. Whether we host the content on the advanced Capytech LMS, or securely integrate our massive library of <strong>off-the-shelf courses<\/strong> directly into your existing infrastructure, and we plan the rollout with you.<\/p>\n    <\/div>\n\n    <div class=\"capy-int-visual capy-reveal-up capy-delay-1\">\n      \n      <div class=\"capy-tree-wrapper\">\n        \n        <div class=\"capy-int-node capy-node-main\">\n          Capytech Content API\n        <\/div>\n\n        <div class=\"capy-int-lines\">\n          <div class=\"capy-line-center\"><\/div>\n          <div class=\"capy-line-branch\"><\/div>\n          <div class=\"capy-line-drop capy-line-drop-l\"><\/div>\n          <div class=\"capy-line-drop capy-line-drop-c\"><\/div>\n          <div class=\"capy-line-drop capy-line-drop-r\"><\/div>\n          \n          <div class=\"capy-data-pulse capy-pulse-1\"><\/div>\n          <div class=\"capy-data-pulse capy-pulse-2\"><\/div>\n          <div class=\"capy-data-pulse capy-pulse-3\"><\/div>\n        <\/div>\n\n        <div class=\"capy-node-row\">\n          <div class=\"capy-int-node capy-node-sub\">Your LMS<\/div>\n          <div class=\"capy-int-node capy-node-sub\">HRIS<\/div>\n          <div class=\"capy-int-node capy-node-sub\">LXP<\/div>\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n    <div class=\"capy-support-box capy-reveal-up capy-delay-2\">\n      <div class=\"capy-support-icon\">\n        <svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z\"><\/path><\/svg>\n      <\/div>\n      <div class=\"capy-support-text\">\n        <h4>Dedicated Expert Support<\/h4>\n        <p>We manage the project, the timelines, and the quality control so you don't have to. Consequently, you get the right expertise without the administrative headache.<\/p>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<!-- part 7 -->\n<section class=\"cxq cxq-faq\" id=\"faq\"><style>.cxq{background:#f8fafc;padding:5rem 1.5rem;font-family:inherit;color:#0f172a}.cxq .cxq-wrap{max-width:1000px;margin:0 auto}.cxq .cxq-eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#2563eb;margin-bottom:.75rem}.cxq 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}.cxq .cxq-intro{font-size:1.08rem;line-height:1.7;color:#475569;margin:0 0 2rem}.cxq details{background:#fff;border:1px solid #e2e8f0;border-radius:14px;margin:0 0 .75rem;overflow:hidden}.cxq 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}.cxq summary::-webkit-details-marker{display:none}.cxq summary::after{content:\"+\";position:absolute;right:1.3rem;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:400;color:#2563eb}.cxq details[open] summary::after{content:\"\\2212\"}.cxq details p{margin:0;padding:0 1.4rem 1.25rem;color:#475569;line-height:1.7}.cxq details a{color:#2563eb}@media (max-width:640px){.cxq{padding:3.5rem 1rem}}<\/style><div class=\"cxq-wrap\"><span class=\"cxq-eyebrow\">FAQ<\/span><h2>Course library questions<\/h2><p class=\"cxq-intro\">What organisations across the GCC ask us before they roll out ready-made courses.<\/p><details><summary>How many courses are in the library?<\/summary><p>More than 9,000 ready-made courses across a wide range of business, compliance and professional skills topics, ready to launch.<\/p><\/details><details><summary>Are courses available in Arabic?<\/summary><p>Ask us which courses are available in Arabic for the topics you need. Where a topic is not, we can build or localise a version for your organisation in Arabic or any language.<\/p><\/details><details><summary>Can we use the courses in our own LMS?<\/summary><p>Yes. Courses can be delivered into your existing LMS, or run on <a href=\"\/en\/ai-powered-lms\/\">Siraj, our AI-powered LMS<\/a>, with dashboards for managers and certificates for learners.<\/p><\/details><details><summary>Can library courses include our own policies?<\/summary><p>Library courses are ready to use as they are. When you need your own policies, processes or brand, we combine library courses with <a href=\"\/en\/custom-e-learning-development\/\">custom modules<\/a> built for you.<\/p><\/details><details><summary>Do you offer accredited courses?<\/summary><p>Yes, including IOSH approved health and safety courses. See our <a href=\"\/en\/accredited-courses\/\">accredited courses<\/a>.<\/p><\/details><details><summary>How is the library priced?<\/summary><p>It depends on the number of learners and the courses you choose, so we do not publish prices. <a href=\"\/en\/contact\/\">Talk to us<\/a> and we will send you a proposal.<\/p><\/details><\/div><script type=\"application\/ld+json\">{\"@context\": \"https:\/\/schema.org\", \"@type\": \"FAQPage\", \"mainEntity\": [{\"@type\": \"Question\", \"name\": \"How many courses are in the library?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"More than 9,000 ready-made courses across a wide range of business, compliance and professional skills topics, ready to launch.\"}}, {\"@type\": \"Question\", \"name\": \"Are courses available in Arabic?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Ask us which courses are available in Arabic for the topics you need. Where a topic is not, we can build or localise a version for your organisation in Arabic or any language.\"}}, {\"@type\": \"Question\", \"name\": \"Can we use the courses in our own LMS?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Yes. Courses can be delivered into your existing LMS, or run on Siraj, our AI-powered LMS, with dashboards for managers and certificates for learners.\"}}, {\"@type\": \"Question\", \"name\": \"Can library courses include our own policies?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Library courses are ready to use as they are. When you need your own policies, processes or brand, we combine library courses with custom modules built for you.\"}}, {\"@type\": \"Question\", \"name\": \"Do you offer accredited courses?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Yes, including IOSH approved health and safety courses. See our accredited courses.\"}}, {\"@type\": \"Question\", \"name\": \"How is the library priced?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"It depends on the number of learners and the courses you choose, so we do not publish prices. Talk to us and we will send you a proposal.\"}}]}<\/script><\/section>\n<section class=\"cxg-guides\"><style>.cxg-guides{background:#f8fafc;padding:4rem 1.5rem;font-family:inherit}.cxg-guides .cxg-wrap{max-width:1100px;margin:0 auto}.cxg-guides h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;letter-spacing:-.02em;margin:0 0 1.5rem;color:#0f172a}.cxg-guides .cxg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}.cxg-guides .cxg-card{display:block;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:1.5rem;text-decoration:none;box-shadow:0 10px 30px rgba(15,23,42,.06);transition:border-color .2s}.cxg-guides .cxg-card:hover,.cxg-guides .cxg-card:focus{border-color:#2563eb}.cxg-guides .cxg-card span{display:block;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#2563eb;margin-bottom:.5rem}.cxg-guides .cxg-card b{display:block;color:#0f172a;font-size:1.05rem;line-height:1.4;margin-bottom:.8rem}.cxg-guides .cxg-card i{font-style:normal;color:#2563eb;font-weight:700}@media (max-width:860px){.cxg-guides .cxg-grid{grid-template-columns:1fr}.cxg-guides{padding:3rem 1rem}}<\/style><div class=\"cxg-wrap\"><h2>Guides on rolling out ready-made training<\/h2><div class=\"cxg-grid\"><a class=\"cxg-card\" href=\"\/en\/blog\/measuring-what-matters-the-roi-of-combining-library-content-and-accredited-training\/\"><span>Guide<\/span><b>Measuring What Matters: The ROI of Combining Library Content and Accredited Training<\/b><i>Read the guide<\/i><\/a><a class=\"cxg-card\" href=\"\/en\/blog\/who-needs-what-choosing-the-right-iosh-course-for-your-team-in-the-middle-east\/\"><span>Guide<\/span><b>Who Needs What? Choosing the Right IOSH Course for Your Team in the Middle East<\/b><i>Read the guide<\/i><\/a><a class=\"cxg-card\" href=\"\/en\/blog\/the-hidden-cost-of-outdated-policy-training-are-you-exposed\/\"><span>Guide<\/span><b>The Hidden Cost of Outdated Policy Training: Are You Exposed?<\/b><i>Read the guide<\/i><\/a><\/div><\/div><\/section>\n\n<section class=\"capy-finale-section\">\n  <div class=\"capy-finale-glow\"><\/div>\n  <div class=\"capy-container\">\n    \n    <div class=\"capy-cta-card capy-reveal-up\">\n      <div class=\"capy-cta-glow-inner\"><\/div>\n      \n      <div class=\"capy-cta-content\">\n        <h2>Ready to close your <br><span class=\"capy-gradient-text\">skill gaps today?<\/span><\/h2>\n        <p>Empower your workforce with the Middle East's most comprehensive and intelligently curated off-the-shelf training solutions. Book a live demo to see the library in action.<\/p>\n        \n        <div class=\"capy-hero-actions\" style=\"margin: 0 auto; justify-content: center;\">\n          <a href=\"#demo\" class=\"capy-btn capy-btn-primary\">\n            Book a Strategy Call\n          <\/a>\n          <a href=\"https:\/\/wa.me\/971585426893\" target=\"_blank\" class=\"capy-btn capy-btn-whatsapp\">\n            <svg width=\"20\" height=\"20\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><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\"\/><\/svg>\n            Chat on WhatsApp\n          <\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"capy-footer-master\" id=\"contact-us\">\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>Ready-made online courses, from <strong><br>off-the-shelf courses<\/strong>.<br><br>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> contact@capytech.com<\/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> +971 58 542 6893 (UAE)<\/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-f64253-o1\" lang=\"en-US\" dir=\"ltr\" data-wpcf7-id=\"64253\">\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\/62794#wpcf7-f64253-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=\"64253\" \/>\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-f64253-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>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n\n\n<!-- modal -->\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 Strategy Call<\/h3>\n          <p>Tell us about your team's learning goals and we'll match you with the right course library and pathway.<\/p>\n        <\/div>\n\n        <div class=\"capy-modal-form-wrapper\">\n          \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f64254-o2\" lang=\"en-US\" dir=\"ltr\" data-wpcf7-id=\"64254\">\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\/62794#wpcf7-f64254-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=\"64254\" \/>\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-f64254-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<script>\n(function() {\n\n  \/\/ SCROLL REVEAL OBSERVER\n  const observer = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('capy-active');\n      } else {\n        if (entry.boundingClientRect.top > 0) {\n          entry.target.classList.remove('capy-active');\n        }\n      }\n    });\n  }, { rootMargin: '0px 0px -60px 0px', threshold: 0.1 });\n\n  document.addEventListener('DOMContentLoaded', () => {\n    document.querySelectorAll('.capy-reveal-up, .capy-reveal-left, .capy-reveal-right')\n            .forEach(el => observer.observe(el));\n  });\n\n  \/\/ MODAL TRIGGER LOGIC (event delegation: works regardless of render\/load order)\n  const modal    = document.getElementById('capyDemoModal');\n  const closeBtn = document.getElementById('capyModalClose');\n\n  if (modal && closeBtn) {\n    const openModal = () => {\n      modal.classList.add('capy-modal-active');\n      document.body.style.overflow = 'hidden';\n    };\n    const closeModal = () => {\n      modal.classList.remove('capy-modal-active');\n      document.body.style.overflow = '';\n    };\n\n    document.addEventListener('click', (e) => {\n      if (e.target.closest('a[href=\"#demo\"], a[href=\"#capyDemoModal\"], .capy-btn-solid')) {\n        e.preventDefault();\n        openModal();\n      }\n    });\n\n    closeBtn.addEventListener('click', closeModal);\n    modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });\n    document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeModal(); });\n  }\n\n\n  \/\/ SMART SMOOTH SCROLLING (Prevents URL Hash & Auto-Scroll on Refresh)\n  document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n    anchor.addEventListener('click', function (e) {\n      const targetId = this.getAttribute('href');\n      \n      \/\/ Ignore generic \"#\" links or modal triggers (like #demo)\n      if (targetId === '#' || targetId === '#demo' || targetId === '#capyDemoModal') return; \n      \n      const targetElement = document.querySelector(targetId);\n      \n      if (targetElement) {\n        e.preventDefault(); \/\/ Stops the URL from changing abruptly\n        targetElement.scrollIntoView({\n          behavior: 'smooth',\n          block: 'start'\n        });\n      }\n    });\n  });\n\n})();\n<\/script>\n\n<\/body>\n<\/html>\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\n*[lang=\"ar\"] \n    .wpcf7 p {\n    margin-bottom: 0.32825em;\n    direction: rtl;\n}\n\n*[lang=\"ar\"] \n.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\n\n*[lang=\"ar\"]\n.elementor-accordion .elementor-tab-title .elementor-accordion-icon.elementor-accordion-icon-left {\n    float: right;\n    text-align: right;\n}\n\n[lang=\"ar\"] .elementor-accordion-item {\n   text-align: right!important;\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>9,000+ Premium Off-the-Shelf Courses World-Class Learning, Ready to Launch. Accelerate your team&#8217;s growth with instant access to over 9,000 premium off-the-shelf courses. From expertly curated, role-specific learning pathways to globally recognised, 100% online IOSH-accredited safety training, we deliver the exact skills your workforce needs today. 9,000+ Courses 100% Online IOSH Accredited Book a Strategy Call Browse the Catalogue \u2193 9,000+ &#8230; <\/p>\n<div><a href=\"https:\/\/capytech.com\/en\/off-the-shelf-courses\/\" class=\"more-link\">Read More<\/a><\/div>\n","protected":false},"author":9,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-62794","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>Off-the-Shelf E-Learning Courses in the UAE | Capytech<\/title>\n<meta name=\"description\" content=\"Around 9,000 ready-made online courses for GCC teams, arranged into learning pathways and delivered through your own LMS or the Siraj LMS.\" \/>\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\/off-the-shelf-courses\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Off-the-Shelf E-Learning Courses in the UAE | Capytech\" \/>\n<meta property=\"og:description\" content=\"Around 9,000 ready-made online courses for GCC teams, arranged into learning pathways and delivered through your own LMS or the Siraj LMS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/capytech.com\/en\/off-the-shelf-courses\/\" \/>\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:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/03\/badge.png\" \/>\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=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/capytech.com\/off-the-shelf-courses\/\",\"url\":\"https:\/\/capytech.com\/off-the-shelf-courses\/\",\"name\":\"Off-the-Shelf E-Learning Courses in the UAE | Capytech\",\"isPartOf\":{\"@id\":\"https:\/\/capytech.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/capytech.com\/off-the-shelf-courses\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/capytech.com\/off-the-shelf-courses\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/03\/badge.png\",\"datePublished\":\"2025-09-22T07:24:59+00:00\",\"dateModified\":\"2026-10-27T15:37:27+00:00\",\"description\":\"Around 9,000 ready-made online courses for GCC teams, arranged into learning pathways and delivered through your own LMS or the Siraj LMS.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/capytech.com\/off-the-shelf-courses\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/capytech.com\/off-the-shelf-courses\/#primaryimage\",\"url\":\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/03\/badge.png\",\"contentUrl\":\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/03\/badge.png\"},{\"@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":"Off-the-Shelf E-Learning Courses in the UAE | Capytech","description":"Around 9,000 ready-made online courses for GCC teams, arranged into learning pathways and delivered through your own LMS or the Siraj LMS.","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\/off-the-shelf-courses\/","og_locale":"en_US","og_type":"article","og_title":"Off-the-Shelf E-Learning Courses in the UAE | Capytech","og_description":"Around 9,000 ready-made online courses for GCC teams, arranged into learning pathways and delivered through your own LMS or the Siraj LMS.","og_url":"https:\/\/capytech.com\/en\/off-the-shelf-courses\/","og_site_name":"Capytech","article_publisher":"https:\/\/www.facebook.com\/capytech","article_modified_time":"2026-10-27T15:37:27+00:00","og_image":[{"url":"https:\/\/capytech.com\/wp-content\/uploads\/2026\/03\/badge.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/capytech.com\/off-the-shelf-courses\/","url":"https:\/\/capytech.com\/off-the-shelf-courses\/","name":"Off-the-Shelf E-Learning Courses in the UAE | Capytech","isPartOf":{"@id":"https:\/\/capytech.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/capytech.com\/off-the-shelf-courses\/#primaryimage"},"image":{"@id":"https:\/\/capytech.com\/off-the-shelf-courses\/#primaryimage"},"thumbnailUrl":"https:\/\/capytech.com\/wp-content\/uploads\/2026\/03\/badge.png","datePublished":"2025-09-22T07:24:59+00:00","dateModified":"2026-10-27T15:37:27+00:00","description":"Around 9,000 ready-made online courses for GCC teams, arranged into learning pathways and delivered through your own LMS or the Siraj LMS.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/capytech.com\/off-the-shelf-courses\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/capytech.com\/off-the-shelf-courses\/#primaryimage","url":"https:\/\/capytech.com\/wp-content\/uploads\/2026\/03\/badge.png","contentUrl":"https:\/\/capytech.com\/wp-content\/uploads\/2026\/03\/badge.png"},{"@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\/62794","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\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/capytech.com\/en\/wp-json\/wp\/v2\/comments?post=62794"}],"version-history":[{"count":112,"href":"https:\/\/capytech.com\/en\/wp-json\/wp\/v2\/pages\/62794\/revisions"}],"predecessor-version":[{"id":65753,"href":"https:\/\/capytech.com\/en\/wp-json\/wp\/v2\/pages\/62794\/revisions\/65753"}],"wp:attachment":[{"href":"https:\/\/capytech.com\/en\/wp-json\/wp\/v2\/media?parent=62794"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}