{"id":84,"date":"2026-05-04T11:12:21","date_gmt":"2026-05-04T11:12:21","guid":{"rendered":"https:\/\/solidwiki.com\/?page_id=84"},"modified":"2026-05-06T12:15:59","modified_gmt":"2026-05-06T12:15:59","slug":"demo","status":"publish","type":"page","link":"https:\/\/solidwiki.com\/index.php\/demo\/","title":{"rendered":"Demo"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"84\" class=\"elementor elementor-84\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4ad5fd6 e-con-full e-flex e-con e-parent\" data-id=\"4ad5fd6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-862df79 elementor-widget elementor-widget-html\" data-id=\"862df79\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>CCPL.AI \u2014 AI & Data Analytics Solutions<\/title>\r\n<meta name=\"description\" content=\"CCPL.AI helps growing businesses analyze data, automate workflows, and build scalable AI solutions using Power BI, Azure, AWS and modern ML tools.\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Syne:wght@400;500;600;700;800&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   DESIGN TOKENS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n:root {\r\n  --white:       #ffffff;\r\n  --cream:       #fafbff;\r\n  --gray-50:     #f3f4f8;\r\n  --gray-100:    #e8eaf2;\r\n  --gray-200:    #d0d4e8;\r\n  --gray-300:    #a8aec8;\r\n  --gray-400:    #727b9a;\r\n  --gray-500:    #505870;\r\n  --gray-600:    #363d58;\r\n  --gray-700:    #252c44;\r\n  --gray-800:    #181e33;\r\n  --ink:         #111827;\r\n\r\n  --blue:        #2563eb;\r\n  --blue-lt:     #3b82f6;\r\n  --blue-pale:   #eff6ff;\r\n  --blue-soft:   #dbeafe;\r\n  --indigo:      #4338ca;\r\n  --indigo-pale: #eef2ff;\r\n  --violet:      #7c3aed;\r\n  --cyan:        #0891b2;\r\n  --teal:        #0d9488;\r\n  --teal-pale:   #f0fdfa;\r\n  --emerald:     #059669;\r\n  --emerald-pale:#ecfdf5;\r\n  --amber:       #d97706;\r\n  --amber-pale:  #fffbeb;\r\n  --rose:        #e11d48;\r\n\r\n  \/* On-dark colors *\/\r\n  --dark-border: rgba(255,255,255,0.08);\r\n  --dark-card:   rgba(255,255,255,0.04);\r\n  --dark-text:   rgba(255,255,255,0.65);\r\n  --dark-muted:  rgba(255,255,255,0.35);\r\n\r\n  --shadow-sm:   0 1px 4px rgba(17,24,39,0.07);\r\n  --shadow-md:   0 4px 20px rgba(17,24,39,0.09);\r\n  --shadow-lg:   0 12px 48px rgba(17,24,39,0.12);\r\n  --shadow-xl:   0 24px 72px rgba(17,24,39,0.15);\r\n  --shadow-blue: 0 8px 32px rgba(37,99,235,0.25);\r\n  --shadow-glow: 0 0 0 1px rgba(37,99,235,0.12), 0 4px 24px rgba(37,99,235,0.1);\r\n\r\n  --r-sm:  6px;\r\n  --r-md:  12px;\r\n  --r-lg:  18px;\r\n  --r-xl:  24px;\r\n  --r-2xl: 32px;\r\n\r\n  --font-display: 'Syne', sans-serif;\r\n  --font-body:    'Manrope', sans-serif;\r\n  --font-mono:    'JetBrains Mono', monospace;\r\n\r\n  --ease:    cubic-bezier(0.22, 1, 0.36, 1);\r\n  --spring:  cubic-bezier(0.34, 1.56, 0.64, 1);\r\n}\r\n\r\n\/* \u2550\u2550\u2550 RESET \u2550\u2550\u2550 *\/\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\nhtml { scroll-behavior: smooth; }\r\nbody {\r\n  font-family: var(--font-body);\r\n  background: var(--white);\r\n  color: var(--ink);\r\n  overflow-x: hidden;\r\n  -webkit-font-smoothing: antialiased;\r\n  line-height: 1.6;\r\n}\r\na { text-decoration: none; color: inherit; }\r\nimg { max-width: 100%; display: block; }\r\nul { list-style: none; }\r\nbutton { font-family: inherit; cursor: pointer; border: none; background: none; }\r\ncanvas { display: block; }\r\n\r\n\/* \u2550\u2550\u2550 LAYOUT \u2550\u2550\u2550 *\/\r\n.wrap    { max-width: 1220px; margin: 0 auto; padding: 0 36px; }\r\n.wrap-sm { max-width: 900px;  margin: 0 auto; padding: 0 36px; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   TYPOGRAPHY \u2014 SYNE DISPLAY + MANROPE BODY\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.d-hero  { font-family: var(--font-display); font-size: clamp(3rem,5.5vw,5.2rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.04em; }\r\n.d-xl    { font-family: var(--font-display); font-size: clamp(2.2rem,3.8vw,3.8rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.035em; }\r\n.d-lg    { font-family: var(--font-display); font-size: clamp(1.7rem,2.8vw,2.8rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; }\r\n.d-md    { font-family: var(--font-display); font-size: clamp(1.2rem,1.8vw,1.75rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }\r\n\r\n.eyebrow {\r\n  font-family: var(--font-mono);\r\n  font-size: 10.5px;\r\n  font-weight: 500;\r\n  letter-spacing: 0.18em;\r\n  text-transform: uppercase;\r\n  color: var(--blue);\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  margin-bottom: 18px;\r\n}\r\n.eyebrow::before {\r\n  content: '';\r\n  width: 24px; height: 2px;\r\n  background: currentColor;\r\n  flex-shrink: 0;\r\n  border-radius: 2px;\r\n}\r\n.eyebrow.dark-eye { color: rgba(96,165,250,0.9); }\r\n.eyebrow.dark-eye::before { background: rgba(96,165,250,0.5); }\r\n\r\n\/* Gradient text *\/\r\n.g-blue   { background: linear-gradient(120deg, #3b82f6 0%, #4338ca 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\r\n.g-teal   { background: linear-gradient(120deg, #0891b2 0%, #3b82f6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\r\n.g-warm   { background: linear-gradient(120deg, #f59e0b 0%, #ef4444 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\r\n.g-cyan   { background: linear-gradient(120deg, #22d3ee 0%, #60a5fa 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\r\n\r\n\/* \u2550\u2550\u2550 BUTTONS \u2550\u2550\u2550 *\/\r\n.btn {\r\n  display: inline-flex; align-items: center; gap: 8px;\r\n  font-family: var(--font-body); font-size: 14px; font-weight: 700;\r\n  letter-spacing: 0.01em;\r\n  padding: 14px 30px; border-radius: 10px;\r\n  cursor: pointer; border: none; white-space: nowrap;\r\n  position: relative; overflow: hidden;\r\n  transition: transform 0.2s var(--spring), box-shadow 0.2s ease;\r\n}\r\n.btn:hover { transform: translateY(-2px); }\r\n.btn:active { transform: translateY(0) scale(0.985); }\r\n.btn-primary   { background: var(--blue); color: #fff; box-shadow: var(--shadow-blue); }\r\n.btn-primary:hover { background: var(--indigo); box-shadow: 0 14px 44px rgba(67,56,202,0.35); }\r\n.btn-outline   { background: transparent; color: var(--ink); border: 1.5px solid var(--gray-200); }\r\n.btn-outline:hover { border-color: var(--blue); color: var(--blue); }\r\n.btn-ghost-dk  { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); border: 1.5px solid rgba(255,255,255,0.15); }\r\n.btn-ghost-dk:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.35); color: #fff; }\r\n.btn-white     { background: #fff; color: var(--ink); font-weight: 800; box-shadow: 0 4px 24px rgba(0,0,0,0.25); }\r\n.btn-white:hover { box-shadow: 0 8px 36px rgba(0,0,0,0.3); }\r\n.btn-lg { padding: 17px 38px; font-size: 15px; border-radius: 12px; }\r\n.arr { transition: transform 0.2s; }\r\n.btn:hover .arr { transform: translateX(4px); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   NAV\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#nav {\r\n  position: fixed; top: 0; left: 0; right: 0; z-index: 600;\r\n  padding: 20px 0;\r\n  background: rgba(255,255,255,0.92);\r\n  backdrop-filter: blur(24px);\r\n  border-bottom: 1px solid transparent;\r\n  transition: all 0.3s ease;\r\n}\r\n#nav.scrolled { padding: 13px 0; border-bottom-color: var(--gray-100); box-shadow: 0 2px 28px rgba(17,24,39,0.07); }\r\n.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }\r\n.nav-logo { font-family: var(--font-display); font-size: 21px; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); display: flex; align-items: center; }\r\n.nav-logo span { color: var(--blue); }\r\n.nav-links { display: flex; align-items: center; gap: 2px; flex: 1; }\r\n.nav-links a { font-size: 14px; font-weight: 600; color: var(--gray-500); padding: 8px 14px; border-radius: 8px; transition: color 0.2s, background 0.2s; }\r\n.nav-links a:hover { color: var(--ink); background: var(--gray-50); }\r\n.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }\r\n.nav-talk { font-size: 13.5px; font-weight: 700; color: var(--gray-600); padding: 9px 18px; border-radius: 9px; border: 1.5px solid var(--gray-200); transition: all 0.2s; }\r\n.nav-talk:hover { color: var(--blue); border-color: var(--blue); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   HERO \u2014 DRAMATIC REDESIGN\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#hero {\r\n  min-height: 100vh;\r\n  padding: 130px 0 80px;\r\n  background: var(--white);\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\/* Noise texture overlay *\/\r\n#hero::before {\r\n  content: '';\r\n  position: absolute; inset: 0;\r\n  background:\r\n    radial-gradient(ellipse 60% 80% at 100% 10%, rgba(37,99,235,0.06) 0%, transparent 55%),\r\n    radial-gradient(ellipse 50% 60% at 0% 90%, rgba(8,145,178,0.04) 0%, transparent 55%);\r\n  pointer-events: none;\r\n}\r\n\/* Dot grid *\/\r\n#hero::after {\r\n  content: '';\r\n  position: absolute; inset: 0;\r\n  background-image: radial-gradient(rgba(37,99,235,0.12) 1px, transparent 1px);\r\n  background-size: 32px 32px;\r\n  mask-image: radial-gradient(ellipse 90% 80% at 60% 0%, black 0%, transparent 75%);\r\n  pointer-events: none;\r\n}\r\n\r\n.hero-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; position: relative; z-index: 2; }\r\n\r\n\/* LEFT *\/\r\n.hero-badge {\r\n  display: inline-flex; align-items: center; gap: 9px;\r\n  padding: 7px 16px 7px 7px; border-radius: 50px;\r\n  background: var(--blue-pale); border: 1px solid var(--blue-soft);\r\n  font-size: 12px; font-weight: 700; color: var(--blue);\r\n  margin-bottom: 32px;\r\n  animation: fadeUp 0.7s var(--ease) both;\r\n}\r\n.badge-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 11px; color: white; }\r\n\r\n.hero-h1 { margin-bottom: 24px; animation: fadeUp 0.7s 0.08s var(--ease) both; }\r\n.hero-sub {\r\n  font-size: 1.1rem; color: var(--gray-500); line-height: 1.8;\r\n  max-width: 480px; margin-bottom: 12px;\r\n  animation: fadeUp 0.7s 0.15s var(--ease) both;\r\n}\r\n.hero-proof {\r\n  display: flex; align-items: center; gap: 8px;\r\n  font-size: 12.5px; font-weight: 700; color: var(--teal);\r\n  margin-bottom: 36px;\r\n  animation: fadeUp 0.7s 0.2s var(--ease) both;\r\n}\r\n.hero-proof::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }\r\n.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; animation: fadeUp 0.7s 0.25s var(--ease) both; }\r\n\r\n\/* Stat pills *\/\r\n.hero-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 44px; animation: fadeUp 0.7s 0.35s var(--ease) both; }\r\n.pill {\r\n  display: flex; align-items: center; gap: 11px;\r\n  padding: 12px 18px; border-radius: 12px;\r\n  background: var(--white); border: 1px solid var(--gray-100);\r\n  box-shadow: var(--shadow-sm);\r\n}\r\n.pill-n { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; line-height: 1; background: linear-gradient(120deg,var(--blue),var(--indigo)); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }\r\n.pill-l { font-size: 11.5px; color: var(--gray-400); font-weight: 600; line-height: 1.3; }\r\n\r\n@keyframes fadeUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }\r\n\r\n\/* \u2550\u2550 HERO RIGHT \u2014 FLOATING DASHBOARD \u2550\u2550 *\/\r\n.hero-right {\r\n  position: relative;\r\n  height: 560px;\r\n  animation: fadeUp 0.8s 0.2s var(--ease) both;\r\n}\r\n\r\n\/* Glow orb behind cards *\/\r\n.hero-orb {\r\n  position: absolute;\r\n  width: 440px; height: 440px; border-radius: 50%;\r\n  background: radial-gradient(circle, rgba(37,99,235,0.1) 0%, rgba(67,56,202,0.06) 40%, transparent 70%);\r\n  top: 50%; left: 50%; transform: translate(-50%, -50%);\r\n  pointer-events: none;\r\n}\r\n\r\n\/* Main dashboard card *\/\r\n.hdb-main {\r\n  position: absolute;\r\n  top: 50%; left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  width: 340px;\r\n  background: var(--white);\r\n  border: 1px solid var(--gray-100);\r\n  border-radius: 20px;\r\n  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(37,99,235,0.06);\r\n  overflow: hidden;\r\n  animation: floatA 7s ease-in-out infinite;\r\n  z-index: 3;\r\n}\r\n.hdb-bar { padding: 13px 18px; background: var(--gray-50); border-bottom: 1px solid var(--gray-100); display: flex; align-items: center; gap: 8px; }\r\n.hdb-dots { display: flex; gap: 5px; }\r\n.hdb-dots span { width: 9px; height: 9px; border-radius: 50%; }\r\n.hdb-body { padding: 18px; }\r\n.hdb-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }\r\n.hk {\r\n  padding: 11px 10px; border-radius: 9px;\r\n  background: var(--gray-50); border: 1px solid var(--gray-100);\r\n  text-align: center; position: relative; overflow: hidden;\r\n}\r\n.hk::before { content: ''; position: absolute; top:0;left:0;right:0; height:2.5px; border-radius:2px 2px 0 0; }\r\n.hk1::before { background: linear-gradient(90deg,var(--blue),var(--indigo)); }\r\n.hk2::before { background: linear-gradient(90deg,var(--teal),var(--cyan)); }\r\n.hk3::before { background: linear-gradient(90deg,var(--violet),var(--indigo)); }\r\n.hk-val { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; line-height:1; color: var(--ink); }\r\n.hk-lbl { font-family: var(--font-mono); font-size: 9px; color: var(--gray-400); letter-spacing: 0.06em; margin-top:3px; }\r\n.hk-trend { font-size: 10px; color: var(--emerald); font-weight: 700; margin-top: 2px; }\r\n.hdb-chart-wrap { background: var(--gray-50); border-radius: 10px; padding: 14px; }\r\n.hdb-chart-lbl { font-family: var(--font-mono); font-size: 9px; color: var(--gray-400); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; }\r\n\r\n\/* Floating mini cards *\/\r\n.hfc {\r\n  position: absolute;\r\n  background: var(--white);\r\n  border-radius: 14px;\r\n  box-shadow: var(--shadow-lg);\r\n  border: 1px solid var(--gray-100);\r\n  z-index: 4;\r\n  cursor: default;\r\n  transition: transform 0.25s var(--spring), box-shadow 0.25s;\r\n}\r\n.hfc:hover { box-shadow: var(--shadow-xl); transform: scale(1.04) !important; }\r\n\r\n\/* Position each floating card *\/\r\n.hfc-1 { top: 24px; right: 0; padding: 16px 20px; min-width: 150px; animation: floatB 5.5s ease-in-out infinite; }\r\n.hfc-2 { bottom: 80px; left: 0; padding: 14px 18px; min-width: 140px; animation: floatC 6.5s ease-in-out infinite; }\r\n.hfc-3 { top: 200px; right: -10px; padding: 14px 18px; animation: floatD 5s ease-in-out infinite; }\r\n.hfc-4 { bottom: 16px; right: 30px; padding: 12px 16px; animation: floatB 7s ease-in-out infinite; animation-delay: -2s; }\r\n\r\n.hfc-icon { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 10px; }\r\n.ic-blue   { background: var(--blue-pale);  border: 1px solid var(--blue-soft); }\r\n.ic-teal   { background: var(--teal-pale);   border: 1px solid rgba(13,148,136,0.2); }\r\n.ic-violet { background: var(--indigo-pale); border: 1px solid rgba(124,58,237,0.2); }\r\n.ic-amber  { background: var(--amber-pale);  border: 1px solid rgba(217,119,6,0.2); }\r\n\r\n.hfc-val { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; line-height:1; }\r\n.hfc-val.v-blue   { background: linear-gradient(120deg,var(--blue),var(--indigo)); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }\r\n.hfc-val.v-teal   { background: linear-gradient(120deg,var(--teal),var(--cyan)); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }\r\n.hfc-val.v-violet { background: linear-gradient(120deg,var(--violet),var(--indigo)); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }\r\n.hfc-val.v-amber  { background: linear-gradient(120deg,var(--amber),var(--rose)); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }\r\n.hfc-lbl  { font-size: 11.5px; color: var(--gray-400); font-weight: 600; margin-top: 4px; line-height:1.3; }\r\n.hfc-sub  { font-size: 11px; color: var(--emerald); font-weight: 700; margin-top: 3px; }\r\n\r\n\/* pulse dot *\/\r\n.live-dot { display: inline-flex; align-items: center; gap: 6px; }\r\n.live-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); animation: pulse 2s ease-in-out infinite; flex-shrink:0; }\r\n@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.5;transform:scale(0.8);} }\r\n\r\n\/* Float keyframes *\/\r\n@keyframes floatA { 0%,100%{transform:translate(-50%,-50%)} 50%{transform:translate(-50%,calc(-50% - 10px))} }\r\n@keyframes floatB { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }\r\n@keyframes floatC { 0%,100%{transform:translateY(-5px)} 50%{transform:translateY(7px)} }\r\n@keyframes floatD { 0%,100%{transform:translateY(3px)} 50%{transform:translateY(-8px)} }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   CLIENT LOGOS \u2014 SCROLLING\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#clients {\r\n  padding: 40px 0;\r\n  background: var(--gray-50);\r\n  border-top: 1px solid var(--gray-100);\r\n  border-bottom: 1px solid var(--gray-100);\r\n}\r\n.clients-heading {\r\n  text-align: center;\r\n  font-family: var(--font-mono); font-size: 10.5px;\r\n  letter-spacing: 0.18em; text-transform: uppercase;\r\n  color: var(--gray-400); margin-bottom: 28px;\r\n}\r\n.clients-overflow { overflow: hidden; position: relative; }\r\n.clients-overflow::before,\r\n.clients-overflow::after {\r\n  content: ''; position: absolute; top:0;bottom:0; width: 140px; z-index:2; pointer-events:none;\r\n}\r\n.clients-overflow::before { left:0; background: linear-gradient(to right, var(--gray-50), transparent); }\r\n.clients-overflow::after  { right:0; background: linear-gradient(to left, var(--gray-50), transparent); }\r\n.clients-belt {\r\n  display: flex; align-items: center; width: max-content;\r\n  animation: beltScroll 28s linear infinite;\r\n}\r\n.clients-belt:hover { animation-play-state: paused; }\r\n@keyframes beltScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }\r\n.logo-cell {\r\n  display: flex; align-items: center; justify-content: center;\r\n  padding: 0 52px; height: 60px;\r\n  border-right: 1px solid var(--gray-200);\r\n  flex-shrink: 0;\r\n}\r\n.logo-cell img {\r\n  height: 32px; max-width: 120px;\r\n  object-fit: contain;\r\n  filter: grayscale(100%) opacity(0.5);\r\n  transition: filter 0.35s ease, transform 0.35s ease;\r\n}\r\n.logo-cell:hover img { filter: grayscale(0%) opacity(1); transform: scale(1.08); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   SECTION HELPERS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.sec-light { padding: 104px 0; background: var(--white); }\r\n.sec-gray  { padding: 104px 0; background: var(--gray-50); }\r\n.sec-dark  { padding: 104px 0; background: var(--ink); color: #fff; position: relative; overflow: hidden; }\r\n.sec-dark::before {\r\n  content: '';\r\n  position: absolute; inset: 0;\r\n  background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);\r\n  background-size: 28px 28px;\r\n  pointer-events: none;\r\n}\r\n\r\n.sec-head { margin-bottom: 68px; }\r\n.sec-head p { font-size: 1.05rem; line-height: 1.8; margin-top: 14px; max-width: 560px; color: var(--gray-500); }\r\n.sec-head-dark p { color: var(--dark-text); }\r\n.sec-cta { display: flex; justify-content: center; gap: 14px; margin-top: 52px; flex-wrap: wrap; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   METRICS \u2014 DARK SECTION\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#metrics {\r\n  background: var(--ink);\r\n  padding: 0;\r\n  border-top: 1px solid rgba(255,255,255,0.05);\r\n}\r\n.metrics-grid { display: grid; grid-template-columns: repeat(4,1fr); }\r\n.met {\r\n  padding: 52px 40px;\r\n  border-right: 1px solid rgba(255,255,255,0.06);\r\n  position: relative;\r\n  transition: background 0.3s;\r\n}\r\n.met:last-child { border-right: none; }\r\n.met:hover { background: rgba(255,255,255,0.02); }\r\n.met-icon {\r\n  width: 44px; height: 44px; border-radius: 11px;\r\n  display: flex; align-items: center; justify-content: center;\r\n  font-size: 20px; margin-bottom: 20px;\r\n  position: absolute; top: 44px; right: 36px;\r\n}\r\n.mi-1 { background: rgba(37,99,235,0.15); border: 1px solid rgba(37,99,235,0.2); }\r\n.mi-2 { background: rgba(13,148,136,0.12); border: 1px solid rgba(13,148,136,0.2); }\r\n.mi-3 { background: rgba(124,58,237,0.12); border: 1px solid rgba(124,58,237,0.2); }\r\n.mi-4 { background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.2); }\r\n.met-num {\r\n  font-family: var(--font-display);\r\n  font-size: clamp(2.4rem, 4vw, 3.6rem);\r\n  font-weight: 800; line-height: 1; letter-spacing: -0.04em;\r\n  margin-bottom: 10px;\r\n}\r\n.met-desc { font-size: 14px; color: var(--dark-text); font-weight: 500; line-height: 1.5; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   SERVICES\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.svc-hero-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--gray-100); border: 1px solid var(--gray-100); border-radius: var(--r-xl); overflow: hidden; margin-bottom: 1px; }\r\n.svc-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--gray-100); border: 1px solid var(--gray-100); border-radius: var(--r-xl); overflow: hidden; }\r\n\r\n.svc {\r\n  background: var(--white);\r\n  padding: 40px 36px;\r\n  transition: background 0.25s;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n.svc::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,transparent 60%,rgba(37,99,235,0.015)); pointer-events:none; }\r\n.svc:hover { background: var(--cream); }\r\n.svc-badge {\r\n  display: inline-flex; align-items: center; gap: 8px;\r\n  font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;\r\n  padding: 5px 12px; border-radius: 50px; margin-bottom: 22px;\r\n}\r\n.sb-blue   { background: var(--blue-pale);   border: 1px solid var(--blue-soft);         color: var(--blue); }\r\n.sb-indigo { background: var(--indigo-pale);  border: 1px solid rgba(67,56,202,0.2);      color: var(--indigo); }\r\n.sb-teal   { background: var(--teal-pale);    border: 1px solid rgba(13,148,136,0.2);     color: var(--teal); }\r\n.sb-violet { background: rgba(124,58,237,0.07); border: 1px solid rgba(124,58,237,0.18); color: var(--violet); }\r\n.sb-amber  { background: var(--amber-pale);   border: 1px solid rgba(217,119,6,0.2);      color: var(--amber); }\r\n.sb-rose   { background: rgba(225,29,72,0.06); border: 1px solid rgba(225,29,72,0.15);   color: var(--rose); }\r\n\r\n.svc-num { font-family: var(--font-display); font-size: 4rem; font-weight: 800; line-height:1; letter-spacing:-0.05em; color: var(--gray-100); position:absolute; bottom:28px; right:28px; pointer-events:none; transition: color 0.25s; }\r\n.svc:hover .svc-num { color: var(--blue-soft); }\r\n.svc h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; letter-spacing:-0.02em; }\r\n.svc p  { font-size: 14px; color: var(--gray-500); line-height: 1.75; margin-bottom: 18px; max-width: 360px; }\r\n.svc-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--blue); transition: gap 0.2s; }\r\n.svc-link:hover { gap: 11px; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   CASE STUDIES SLIDER\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.cs-controls { display: flex; align-items: center; justify-content: space-between; margin-bottom: 44px; }\r\n.cs-arrows { display: flex; align-items: center; gap: 10px; }\r\n.cs-btn {\r\n  width: 46px; height: 46px; border-radius: 50%;\r\n  background: var(--white); border: 1.5px solid var(--gray-200);\r\n  color: var(--gray-600); font-size: 18px;\r\n  display: flex; align-items: center; justify-content: center;\r\n  cursor: pointer; transition: all 0.2s var(--spring);\r\n  user-select: none; flex-shrink: 0;\r\n}\r\n.cs-btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; transform: scale(1.08); box-shadow: var(--shadow-blue); }\r\n.cs-btn:disabled { opacity:0.3; pointer-events:none; }\r\n.cs-dots-row { display: flex; gap: 6px; }\r\n.cs-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gray-200); border: none; cursor: pointer; transition: all 0.3s var(--spring); padding:0; }\r\n.cs-dot.on { width: 26px; border-radius: 4px; background: var(--blue); }\r\n\r\n.cs-viewport { overflow: hidden; border-radius: var(--r-2xl); }\r\n.cs-track { display: flex; gap: 22px; transition: transform 0.55s var(--ease); will-change: transform; }\r\n.cs-slide { flex-shrink: 0; }\r\n\r\n\/* Card *\/\r\n.cs-card {\r\n  background: var(--white); border: 1px solid var(--gray-100);\r\n  border-radius: 20px; overflow: hidden; height: 100%;\r\n  display: flex; flex-direction: column;\r\n  transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s;\r\n  cursor: default;\r\n}\r\n.cs-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: var(--blue-soft); }\r\n.cs-card-stripe { height: 4px; }\r\n\r\n\/* Visual banner *\/\r\n.cs-visual {\r\n  height: 152px; position: relative; overflow: hidden;\r\n  display: flex; align-items: center; justify-content: center; padding: 20px;\r\n}\r\n.cv-1 { background: linear-gradient(135deg,#eff6ff,#e0e7ff); }\r\n.cv-2 { background: linear-gradient(135deg,#f0fdfa,#d1fae5); }\r\n.cv-3 { background: linear-gradient(135deg,#fdf4ff,#ede9fe); }\r\n.cv-4 { background: linear-gradient(135deg,#fffbeb,#fef3c7); }\r\n.cv-5 { background: linear-gradient(135deg,#1e2436,#252c44); }\r\n.cv-6 { background: linear-gradient(135deg,#ecfdf5,#d1fae5); }\r\n\r\n\/* Mini DB widget inside visual *\/\r\n.mdb {\r\n  width: 100%; max-width: 290px;\r\n  background: rgba(255,255,255,0.88);\r\n  border: 1px solid rgba(255,255,255,0.95);\r\n  border-radius: 12px; padding: 14px 16px;\r\n  box-shadow: 0 4px 20px rgba(17,24,39,0.12);\r\n  backdrop-filter: blur(6px);\r\n}\r\n.mdb.dk { background: rgba(24,30,51,0.88); border-color: rgba(255,255,255,0.09); }\r\n.mdb-kpis { display: flex; gap: 8px; margin-bottom: 10px; }\r\n.mk { flex:1; background: white; border: 1px solid var(--gray-100); border-radius: 8px; padding: 7px 9px; text-align:center; }\r\n.mdb.dk .mk { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.08); }\r\n.mk-n { font-family: var(--font-display); font-size: 14px; font-weight: 800; color: var(--blue); line-height:1; }\r\n.mdb.dk .mk-n { color: #60a5fa; }\r\n.mk-l { font-family: var(--font-mono); font-size: 8px; color: var(--gray-400); letter-spacing:0.05em; }\r\n.mdb.dk .mk-l { color: rgba(255,255,255,0.3); }\r\n.mbar { display:flex; align-items:center; gap:6px; margin-top:4px; }\r\n.mbar + .mbar { margin-top: 5px; }\r\n.mbar-l { font-family:var(--font-mono); font-size:8.5px; color:var(--gray-400); width:34px; flex-shrink:0; }\r\n.mdb.dk .mbar-l { color: rgba(255,255,255,0.3); }\r\n.mbar-t { flex:1; height:4px; background:var(--gray-100); border-radius:3px; overflow:hidden; }\r\n.mdb.dk .mbar-t { background: rgba(255,255,255,0.07); }\r\n.mbar-f { height:100%; border-radius:3px; }\r\n.mbar-v { font-family:var(--font-mono); font-size:8.5px; color:var(--gray-400); width:24px; text-align:right; flex-shrink:0; }\r\n.mdb.dk .mbar-v { color: rgba(255,255,255,0.3); }\r\n.mline { height: 32px; margin-top: 8px; }\r\n.mline svg { width:100%; height:100%; }\r\n\r\n\/* Card body *\/\r\n.cs-body { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }\r\n.cs-tag {\r\n  font-family: var(--font-mono); font-size: 10px; font-weight: 500;\r\n  letter-spacing: 0.12em; text-transform: uppercase;\r\n  padding: 4px 11px; border-radius: 50px;\r\n  display: inline-block; margin-bottom: 14px; width: fit-content;\r\n}\r\n.ct-b { background:var(--blue-pale); border:1px solid var(--blue-soft); color:var(--blue); }\r\n.ct-t { background:var(--teal-pale); border:1px solid rgba(13,148,136,0.2); color:var(--teal); }\r\n.ct-v { background:rgba(124,58,237,0.07); border:1px solid rgba(124,58,237,0.15); color:var(--violet); }\r\n.ct-a { background:var(--amber-pale); border:1px solid rgba(217,119,6,0.2); color:var(--amber); }\r\n.ct-i { background:var(--indigo-pale); border:1px solid rgba(67,56,202,0.18); color:var(--indigo); }\r\n.ct-e { background:var(--emerald-pale); border:1px solid rgba(5,150,105,0.2); color:var(--emerald); }\r\n.cs-body h3 { font-family:var(--font-display); font-size:15px; font-weight:700; margin-bottom:14px; line-height:1.4; letter-spacing:-0.01em; }\r\n.cs-row { margin-bottom: 10px; }\r\n.cs-rl { font-family:var(--font-mono); font-size:9.5px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:3px; }\r\n.rl-p { color:var(--rose); } .rl-s { color:var(--blue); } .rl-r { color:var(--emerald); }\r\n.cs-row p { font-size:12.5px; color:var(--gray-500); line-height:1.65; }\r\n.cs-result-bar {\r\n  margin-top: auto; padding-top: 18px;\r\n  border-top: 1px solid var(--gray-100);\r\n  display: flex; align-items: center; gap: 14px;\r\n}\r\n.cs-num { font-family:var(--font-display); font-size:2rem; font-weight:800; line-height:1; letter-spacing:-0.03em; background:linear-gradient(120deg,var(--blue),var(--indigo)); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }\r\n.cs-ntxt { font-size:12px; color:var(--gray-400); font-weight:600; line-height:1.4; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   DATA VIZ \u2014 DARK SECTION\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#data-viz { position: relative; }\r\n.dv-glow {\r\n  position: absolute;\r\n  width: 500px; height: 500px; border-radius: 50%;\r\n  background: radial-gradient(circle, rgba(37,99,235,0.12) 0%, transparent 70%);\r\n  top: -100px; right: -100px;\r\n  pointer-events: none;\r\n}\r\n.dv-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 22px; }\r\n.dvk {\r\n  padding: 26px 22px; border-radius: 16px; text-align:center;\r\n  background: rgba(255,255,255,0.04);\r\n  border: 1px solid rgba(255,255,255,0.07);\r\n  position: relative; overflow:hidden;\r\n  transition: background 0.3s, border-color 0.3s, transform 0.3s var(--spring);\r\n}\r\n.dvk:hover { background: rgba(255,255,255,0.07); border-color: rgba(37,99,235,0.3); transform: translateY(-4px); }\r\n.dvk::before { content:''; position:absolute;top:0;left:0;right:0;height:2.5px; }\r\n.dvk1::before { background:var(--blue); } .dvk2::before { background:var(--indigo); } .dvk3::before { background:var(--teal); } .dvk4::before { background:var(--violet); }\r\n.dvk-num { font-family:var(--font-display); font-size:2rem; font-weight:800; line-height:1; color:#fff; margin-bottom:6px; }\r\n.dvk-lbl { font-family:var(--font-mono); font-size:10px; color:var(--dark-muted); letter-spacing:0.08em; text-transform:uppercase; }\r\n.dvk-trend { font-size:11.5px; color:#34d399; font-weight:700; margin-top:5px; }\r\n\r\n.dv-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }\r\n.dvc {\r\n  background: rgba(255,255,255,0.04);\r\n  border: 1px solid rgba(255,255,255,0.07);\r\n  border-radius: 16px; padding: 24px;\r\n  transition: background 0.3s;\r\n}\r\n.dvc:hover { background: rgba(255,255,255,0.06); }\r\n.dvc-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }\r\n.dvc-title { font-family:var(--font-mono); font-size:10.5px; font-weight:500; color:rgba(255,255,255,0.4); letter-spacing:0.08em; text-transform:uppercase; }\r\n.dvc-badge { font-family:var(--font-mono); font-size:9.5px; font-weight:500; padding:3px 10px; border-radius:50px; letter-spacing:0.06em; }\r\n.db-live    { background:rgba(5,150,105,0.18); color:#34d399; border:1px solid rgba(5,150,105,0.25); }\r\n.db-ai      { background:rgba(79,70,229,0.18); color:#a5b4fc; border:1px solid rgba(79,70,229,0.25); }\r\n.db-opt     { background:rgba(13,148,136,0.15); color:#5eead4; border:1px solid rgba(13,148,136,0.2); }\r\n.db-proc    { background:rgba(37,99,235,0.18); color:#93c5fd; border:1px solid rgba(37,99,235,0.25); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   WHY US\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.why-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 88px; align-items: center; }\r\n.why-l .eyebrow { margin-bottom: 18px; }\r\n.why-l p { font-size: 1.05rem; color: var(--gray-500); line-height: 1.8; margin: 18px 0 34px; }\r\n.why-btns { display: flex; gap: 12px; flex-wrap: wrap; }\r\n.why-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }\r\n.why-c {\r\n  padding: 26px 24px; border-radius: 16px;\r\n  background: var(--white); border: 1px solid var(--gray-100);\r\n  transition: transform 0.25s var(--ease), border-color 0.25s, box-shadow 0.25s;\r\n}\r\n.why-c:hover { transform: translateY(-4px); border-color: var(--blue-soft); box-shadow: var(--shadow-md); }\r\n.why-c-icon { width: 40px; height: 40px; border-radius: 10px; display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:14px; }\r\n.why-c h4 { font-family:var(--font-display); font-size:14.5px; font-weight:700; margin-bottom:7px; letter-spacing:-0.01em; }\r\n.why-c p  { font-size:13px; color:var(--gray-400); line-height:1.65; }\r\n.why-c.feat { border-color:var(--blue-soft); background:var(--blue-pale); }\r\n.why-c.feat:hover { border-color:var(--blue); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   HUMAN TOUCH \u2014 DARK\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.ht-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 2; }\r\n.ht-l h2 { color: #fff; margin-top: 14px; margin-bottom: 18px; }\r\n.ht-l p { color: var(--dark-text); font-size: 1.05rem; line-height: 1.8; margin-bottom: 28px; }\r\n.ht-facts { display: flex; flex-direction:column; gap: 18px; margin-bottom: 34px; }\r\n.ht-fact { display:flex; align-items:flex-start; gap:14px; }\r\n.ht-fi { width: 38px; height: 38px; border-radius: 10px; background:rgba(37,99,235,0.18); border:1px solid rgba(37,99,235,0.25); display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;margin-top:2px; }\r\n.ht-ft strong { display:block;font-size:14px;font-weight:700;color:#fff;margin-bottom:3px; }\r\n.ht-ft span { font-size:13px; color:var(--dark-text); line-height:1.55; }\r\n\r\n.ht-r { background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:24px; padding:28px; }\r\n.ht-team { background: linear-gradient(135deg,rgba(37,99,235,0.15),rgba(67,56,202,0.1)); border:1px solid rgba(37,99,235,0.2); border-radius:16px; padding:28px; text-align:center; margin-bottom:18px; }\r\n.ht-avs { display:flex; justify-content:center; margin-bottom:16px; }\r\n.ht-av { width:52px;height:52px;border-radius:50%;border:3px solid rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;font-size:22px;margin-left:-10px; }\r\n.ht-av:first-child{margin-left:0}\r\n.av-a{background:linear-gradient(135deg,#3b82f6,#1d4ed8);}\r\n.av-b{background:linear-gradient(135deg,#0d9488,#0f766e);}\r\n.av-c{background:linear-gradient(135deg,#7c3aed,#6d28d9);}\r\n.av-d{background:linear-gradient(135deg,#d97706,#b45309);z-index:-1;}\r\n.ht-tl { font-family:var(--font-mono);font-size:10px;color:var(--dark-muted);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:4px; }\r\n.ht-tm { font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:#fff; }\r\n.ht-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:12px; }\r\n.ht-st { text-align:center;padding:16px 10px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);border-radius:12px; }\r\n.ht-sn { font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:#60a5fa;line-height:1;margin-bottom:4px; }\r\n.ht-sl { font-family:var(--font-mono);font-size:9.5px;color:var(--dark-muted);letter-spacing:0.08em;text-transform:uppercase; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   PARTNERS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.partner-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }\r\n.pt-card {\r\n  padding: 32px 24px; text-align:center;\r\n  background: var(--white); border:1px solid var(--gray-100);\r\n  border-radius: 18px; box-shadow: var(--shadow-sm);\r\n  transition: transform 0.25s var(--ease), border-color 0.25s, box-shadow 0.25s;\r\n}\r\n.pt-card:hover { transform: translateY(-4px); border-color:var(--blue-soft); box-shadow:var(--shadow-md); }\r\n.pt-em { font-size:38px;margin-bottom:14px;display:block; }\r\n.pt-name { font-family:var(--font-display);font-size:1.1rem;font-weight:800;margin-bottom:8px; }\r\n.pt-desc { font-size:12px;color:var(--gray-400);line-height:1.6;margin-bottom:14px; }\r\n.pt-chips { display:flex;flex-wrap:wrap;justify-content:center;gap:6px; }\r\n.pt-chip { font-family:var(--font-mono);font-size:10px;padding:3px 9px;border-radius:5px;background:var(--gray-50);border:1px solid var(--gray-200);color:var(--gray-500);letter-spacing:0.04em; }\r\n.pt-note { text-align:center;font-family:var(--font-mono);font-size:11px;color:var(--gray-400);max-width:640px;margin:28px auto 0;padding:14px 20px;background:var(--gray-50);border:1px solid var(--gray-100);border-radius:var(--r-md);line-height:1.7; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   PROCESS \u2014 DARK\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.process-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; position: relative; margin-top: 60px; }\r\n.process-line { position:absolute; top:28px; left:8%; right:8%; height:1px; background:linear-gradient(90deg,rgba(37,99,235,0.4),rgba(67,56,202,0.4),rgba(13,148,136,0.2),transparent); border-top:1.5px dashed rgba(255,255,255,0.1); pointer-events:none; }\r\n.pstep { text-align:center; padding: 0 20px; }\r\n.pstep-n {\r\n  width: 56px; height: 56px; border-radius: 50%;\r\n  display:flex; align-items:center; justify-content:center;\r\n  margin: 0 auto 22px; position:relative; z-index:1;\r\n  background: rgba(37,99,235,0.12);\r\n  border: 1.5px solid rgba(37,99,235,0.3);\r\n  font-family:var(--font-display); font-size:14px; font-weight:800; color:#60a5fa;\r\n  transition: all 0.3s var(--spring); box-shadow: 0 0 0 0 rgba(37,99,235,0);\r\n}\r\n.pstep:hover .pstep-n { background: rgba(37,99,235,0.25); border-color:rgba(37,99,235,0.6); box-shadow:0 0 0 8px rgba(37,99,235,0.08), 0 0 32px rgba(37,99,235,0.2); transform:scale(1.1); }\r\n.pstep h4 { font-family:var(--font-display);font-size:15px;font-weight:700;color:#fff;margin-bottom:10px; }\r\n.pstep p  { font-size:13px;color:var(--dark-text);line-height:1.7; }\r\n\r\n\/* \u2550\u2550\u2550 TRUST BAND \u2550\u2550\u2550 *\/\r\n#trust-band { padding: 44px 0; background: var(--blue); text-align:center; }\r\n.tb-text { font-size:1.05rem;color:rgba(255,255,255,0.85);line-height:1.8;max-width:720px;margin:0 auto; }\r\n.tb-text strong { color:#fff; }\r\n\r\n\/* \u2550\u2550\u2550 CTA \u2550\u2550\u2550 *\/\r\n#cta {\r\n  padding: 100px 0;\r\n  background: linear-gradient(140deg, var(--ink) 0%, #1a2048 100%);\r\n  position: relative; overflow: hidden;\r\n}\r\n#cta::before { content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);background-size:48px 48px;pointer-events:none; }\r\n#cta::after { content:'';position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,0.14),transparent 65%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none; }\r\n.cta-inner { position:relative;z-index:2;text-align:center;max-width:700px;margin:0 auto; }\r\n.cta-inner h2 { color:#fff; margin-bottom:16px; }\r\n.cta-inner p { color:rgba(255,255,255,0.6);font-size:1.1rem;line-height:1.8;margin-bottom:36px; }\r\n.cta-chips { display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin-bottom:42px; }\r\n.cta-chip { display:flex;align-items:center;gap:9px;font-size:14px;color:rgba(255,255,255,0.7);font-weight:600; }\r\n.cta-chip::before { content:'\u2713';color:#34d399;font-weight:800; }\r\n.cta-btns { display:flex;justify-content:center;gap:14px;flex-wrap:wrap; }\r\n\r\n\/* \u2550\u2550\u2550 FAQ \u2550\u2550\u2550 *\/\r\n.faq-list { max-width: 840px; margin: 0 auto; display:flex;flex-direction:column;gap:10px; }\r\n.faq-i { background:var(--white);border:1px solid var(--gray-100);border-radius:14px;overflow:hidden;transition:border-color 0.2s,box-shadow 0.2s; }\r\n.faq-i:hover { border-color:var(--blue-soft); }\r\n.faq-i.open { border-color:var(--blue-soft);box-shadow:0 0 0 3px rgba(37,99,235,0.06); }\r\n.faq-q { display:flex;align-items:center;justify-content:space-between;padding:20px 26px;gap:24px;font-family:var(--font-display);font-size:15px;font-weight:700;cursor:pointer;user-select:none;letter-spacing:-0.01em; }\r\n.faq-tog { width:30px;height:30px;flex-shrink:0;border-radius:9px;background:var(--gray-50);border:1px solid var(--gray-200);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--gray-400);transition:transform 0.25s,background 0.2s,color 0.2s; }\r\n.faq-i.open .faq-tog { transform:rotate(45deg);background:var(--blue-pale);color:var(--blue);border-color:var(--blue-soft); }\r\n.faq-a { max-height:0;overflow:hidden;transition:max-height 0.4s var(--ease),padding 0.25s;padding:0 26px;font-size:14px;color:var(--gray-500);line-height:1.8; }\r\n.faq-i.open .faq-a { max-height:300px;padding:0 26px 22px; }\r\n\r\n\/* \u2550\u2550\u2550 FOOTER \u2550\u2550\u2550 *\/\r\nfooter { background: var(--ink); padding: 76px 0 36px; color: var(--dark-text); }\r\n.foot-top { display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:52px;margin-bottom:60px;padding-bottom:60px;border-bottom:1px solid rgba(255,255,255,0.06); }\r\n.foot-brand-name { font-family:var(--font-display);font-size:22px;font-weight:800;color:#fff;letter-spacing:-0.04em;margin-bottom:14px;display:flex;align-items:center; }\r\n.foot-brand-name span { color:#60a5fa; }\r\n.foot-brand p { font-size:14px;line-height:1.75;max-width:250px;margin-bottom:20px; }\r\n.foot-contact { display:flex;flex-direction:column;gap:10px; }\r\n.foot-contact a { display:flex;align-items:center;gap:9px;font-size:13px;transition:color 0.2s; }\r\n.foot-contact a:hover { color:#fff; }\r\n.foot-chips { display:flex;flex-wrap:wrap;gap:6px;margin-top:16px; }\r\n.foot-chip { font-family:var(--font-mono);font-size:10px;padding:3px 10px;border-radius:4px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.09);color:rgba(255,255,255,0.35);letter-spacing:0.04em; }\r\n.foot-col h5 { font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.3);margin-bottom:18px; }\r\n.foot-col ul { display:flex;flex-direction:column;gap:10px; }\r\n.foot-col a { font-size:14px;transition:color 0.2s; }\r\n.foot-col a:hover { color:#fff; }\r\n.foot-bottom { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px; }\r\n.foot-bottom p { font-size:13px; }\r\n.foot-socials { display:flex;gap:10px; }\r\n.soc-btn { width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);font-size:14px;color:rgba(255,255,255,0.45);transition:all 0.2s var(--spring); }\r\n.soc-btn:hover { background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-2px); }\r\n\r\n\/* \u2550\u2550\u2550 TRUST STRIP \u2550\u2550\u2550 *\/\r\n#strip { padding: 22px 0; border-top:1px solid var(--gray-100); border-bottom:1px solid var(--gray-100); background:var(--gray-50); overflow:hidden; }\r\n.strip-belt { display:flex;align-items:center;width:max-content;animation:beltScroll 30s linear infinite; }\r\n.strip-i { display:flex;align-items:center;gap:10px;padding:0 34px;font-size:13px;font-weight:600;color:var(--gray-400);white-space:nowrap;border-right:1px solid var(--gray-200); }\r\n.strip-i strong { color:var(--blue); }\r\n\r\n\/* \u2550\u2550\u2550 SCROLL REVEAL \u2550\u2550\u2550 *\/\r\n.sr { opacity:0; transform:translateY(26px); transition:opacity 0.7s var(--ease),transform 0.7s var(--ease); }\r\n.sr.vis { opacity:1; transform:translateY(0); }\r\n.sd1{transition-delay:0.07s}.sd2{transition-delay:0.14s}.sd3{transition-delay:0.21s}.sd4{transition-delay:0.28s}.sd5{transition-delay:0.35s}\r\n\r\n\/* \u2550\u2550\u2550 RESPONSIVE \u2550\u2550\u2550 *\/\r\n@media(max-width:1100px){\r\n  .hero-grid{grid-template-columns:1fr;}.hero-right{display:none;}\r\n  .metrics-grid{grid-template-columns:repeat(2,1fr);}\r\n  .met:nth-child(2){border-right:none;}\r\n  .why-layout{grid-template-columns:1fr;gap:52px;}\r\n  .ht-layout{grid-template-columns:1fr;gap:48px;}\r\n  .partner-grid{grid-template-columns:repeat(2,1fr);}\r\n  .process-steps{grid-template-columns:1fr 1fr;row-gap:44px;}.process-line{display:none;}\r\n  .foot-top{grid-template-columns:1fr 1fr;}\r\n  .dv-kpis{grid-template-columns:repeat(2,1fr);}\r\n  .dv-charts{grid-template-columns:1fr;}\r\n  .cs-slide{width:calc(50% - 11px)!important;}\r\n}\r\n@media(max-width:768px){\r\n  .nav-links{display:none;}\r\n  .metrics-grid{grid-template-columns:1fr 1fr;}\r\n  .svc-hero-grid{grid-template-columns:1fr;}\r\n  .svc-grid-3{grid-template-columns:1fr;}\r\n  .why-cards{grid-template-columns:1fr;}\r\n  .process-steps{grid-template-columns:1fr;}\r\n  .foot-top{grid-template-columns:1fr;}\r\n  .cta-chips{flex-direction:column;align-items:center;gap:10px;}\r\n  .wrap,.wrap-sm{padding:0 20px;}\r\n  .cs-slide{width:100%!important;}\r\n  .cs-controls{flex-direction:column;gap:16px;align-items:flex-start;}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 NAV \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<nav id=\"nav\">\r\n  <div class=\"wrap\">\r\n    <div class=\"nav-inner\">\r\n      <a href=\"\/\" class=\"nav-logo\">CCPL<span>.<\/span>AI<\/a>\r\n      <nav class=\"nav-links\">\r\n        <a href=\"#services\">Services<\/a>\r\n        <a href=\"#case-studies\">Case Studies<\/a>\r\n        <a href=\"#data-viz\">Insights<\/a>\r\n        <a href=\"#why\">Why Us<\/a>\r\n        <a href=\"#process\">Process<\/a>\r\n        <a href=\"#faq\">FAQ<\/a>\r\n      <\/nav>\r\n      <div class=\"nav-actions\">\r\n        <a href=\"mailto:hello@ccpl.ai\" class=\"nav-talk\">Talk to an Expert<\/a>\r\n        <a href=\"#cta\" class=\"btn btn-primary\" style=\"padding:10px 22px;font-size:13.5px;\">Book Free Call <svg class=\"arr\" width=\"13\" height=\"13\" viewBox=\"0 0 16 16\" fill=\"none\" style=\"margin-top:1px\"><path d=\"M3 8h10M9 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/nav>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"hero\">\r\n  <div class=\"wrap\">\r\n    <div class=\"hero-grid\">\r\n\r\n      <!-- Left -->\r\n      <div>\r\n        <div class=\"hero-badge\">\r\n          <div class=\"badge-dot\">\u2726<\/div>\r\n          AI & Data Solutions for Growing Businesses\r\n        <\/div>\r\n\r\n        <h1 class=\"d-hero hero-h1\">\r\n          Transform Your<br>Business with<br>\r\n          <span class=\"g-blue\">AI & Data<\/span>\r\n        <\/h1>\r\n\r\n        <p class=\"hero-sub\">We help businesses analyze data, automate workflows, and build scalable AI solutions using Power BI and cloud platforms \u2014 built for real outcomes, not demos.<\/p>\r\n\r\n        <div class=\"hero-proof\">\r\n          <span>Delivering practical AI solutions to growing businesses globally<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"hero-btns\">\r\n          <a href=\"#cta\" class=\"btn btn-primary btn-lg\">\r\n            Book Free Consultation\r\n            <svg class=\"arr\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M3 8h10M9 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n          <\/a>\r\n          <a href=\"mailto:hello@ccpl.ai\" class=\"btn btn-outline btn-lg\">Talk to an Expert<\/a>\r\n        <\/div>\r\n\r\n        <div class=\"hero-pills\">\r\n          <div class=\"pill\"><div><div class=\"pill-n\">3\u20136wk<\/div><div class=\"pill-l\">First results<br>delivered in<\/div><\/div><\/div>\r\n          <div class=\"pill\"><div><div class=\"pill-n\">3.8\u00d7<\/div><div class=\"pill-l\">Average ROI<br>on projects<\/div><\/div><\/div>\r\n          <div class=\"pill\"><div><div class=\"pill-n\">67%<\/div><div class=\"pill-l\">Reporting<br>time saved<\/div><\/div><\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Right \u2014 Floating Dashboard -->\r\n      <div class=\"hero-right\" aria-hidden=\"true\">\r\n        <div class=\"hero-orb\"><\/div>\r\n\r\n        <!-- Main card -->\r\n        <div class=\"hdb-main\">\r\n          <div class=\"hdb-bar\">\r\n            <div class=\"hdb-dots\">\r\n              <span style=\"background:#ff5f57\"><\/span>\r\n              <span style=\"background:#febc2e\"><\/span>\r\n              <span style=\"background:#28c840\"><\/span>\r\n            <\/div>\r\n            <div style=\"margin-left:auto;font-family:var(--font-mono);font-size:10px;color:var(--gray-400);letter-spacing:0.07em\" class=\"live-dot\">CCPL.AI Analytics \u00b7 Live<\/div>\r\n          <\/div>\r\n          <div class=\"hdb-body\">\r\n            <div class=\"hdb-kpis\">\r\n              <div class=\"hk hk1\"><div class=\"hk-val\" id=\"kpi1\">0K<\/div><div class=\"hk-lbl\">Data Pts<\/div><div class=\"hk-trend\">\u219124.5%<\/div><\/div>\r\n              <div class=\"hk hk2\"><div class=\"hk-val\" id=\"kpi2\">0%<\/div><div class=\"hk-lbl\">Efficiency<\/div><div class=\"hk-trend\">\u21918.2%<\/div><\/div>\r\n              <div class=\"hk hk3\"><div class=\"hk-val\" id=\"kpi3\">$0K<\/div><div class=\"hk-lbl\">Saved<\/div><div class=\"hk-trend\">\u219131%<\/div><\/div>\r\n            <\/div>\r\n            <div class=\"hdb-chart-wrap\">\r\n              <div class=\"hdb-chart-lbl\">Revenue Intelligence \u00b7 Real-time<\/div>\r\n              <canvas id=\"heroChart\" height=\"88\"><\/canvas>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Floating card 1 \u2014 top right -->\r\n        <div class=\"hfc hfc-1\">\r\n          <div class=\"hfc-icon ic-blue\">\ud83d\udcca<\/div>\r\n          <div class=\"hfc-val v-blue\" id=\"fkpi-a\">94%<\/div>\r\n          <div class=\"hfc-lbl\">Automation Rate<\/div>\r\n          <div class=\"hfc-sub\">\u2191 18% this quarter<\/div>\r\n        <\/div>\r\n\r\n        <!-- Floating card 2 \u2014 bottom left -->\r\n        <div class=\"hfc hfc-2\">\r\n          <div class=\"hfc-icon ic-teal\">\ud83d\ude80<\/div>\r\n          <div class=\"hfc-val v-teal\">3.8\u00d7<\/div>\r\n          <div class=\"hfc-lbl\">Avg. ROI on engagements<\/div>\r\n          <div class=\"hfc-sub\" style=\"color:var(--teal);\">\u2191 0.4\u00d7 vs last year<\/div>\r\n        <\/div>\r\n\r\n        <!-- Floating card 3 \u2014 right middle -->\r\n        <div class=\"hfc hfc-3\">\r\n          <div style=\"display:flex;align-items:center;gap:8px;\">\r\n            <div class=\"hfc-icon ic-violet\" style=\"margin-bottom:0;width:30px;height:30px;font-size:15px;\">\u26a1<\/div>\r\n            <div>\r\n              <div class=\"hfc-val v-violet\" style=\"font-size:1.2rem;\">99%<\/div>\r\n              <div class=\"hfc-lbl\" style=\"font-size:10.5px;\">Uptime SLA<\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Floating card 4 \u2014 bottom right -->\r\n        <div class=\"hfc hfc-4\" style=\"display:flex;align-items:center;gap:10px;\">\r\n          <div class=\"hfc-icon ic-amber\" style=\"margin-bottom:0;width:30px;height:30px;font-size:14px;\">\ud83c\udfaf<\/div>\r\n          <div>\r\n            <div class=\"hfc-val v-amber\" style=\"font-size:1.1rem;\">67%<\/div>\r\n            <div class=\"hfc-lbl\" style=\"font-size:10.5px;\">Report time saved<\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n      <\/div><!-- \/hero-right -->\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CLIENT LOGOS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"clients\">\r\n  <div class=\"wrap\">\r\n    <div class=\"clients-heading\">Trusted by industry leaders<\/div>\r\n  <\/div>\r\n  <div class=\"clients-overflow\">\r\n    <div class=\"clients-belt\">\r\n      <div class=\"logo-cell\"><img decoding=\"async\" src=\"pepsico.png\" alt=\"PepsiCo\"><\/div>\r\n      <div class=\"logo-cell\"><img decoding=\"async\" src=\"aurobindo.png\" alt=\"Aurobindo Pharma\"><\/div>\r\n      <div class=\"logo-cell\"><img decoding=\"async\" src=\"zettamine.png\" alt=\"ZettaMine\"><\/div>\r\n      <div class=\"logo-cell\"><img decoding=\"async\" src=\"noblq.png\" alt=\"NoblQ\"><\/div>\r\n      <div class=\"logo-cell\"><img decoding=\"async\" src=\"verint.png\" alt=\"Verint\"><\/div>\r\n      <div class=\"logo-cell\"><img decoding=\"async\" src=\"pepsico.png\" alt=\"PepsiCo\"><\/div>\r\n      <div class=\"logo-cell\"><img decoding=\"async\" src=\"aurobindo.png\" alt=\"Aurobindo Pharma\"><\/div>\r\n      <div class=\"logo-cell\"><img decoding=\"async\" src=\"zettamine.png\" alt=\"ZettaMine\"><\/div>\r\n      <div class=\"logo-cell\"><img decoding=\"async\" src=\"noblq.png\" alt=\"NoblQ\"><\/div>\r\n      <div class=\"logo-cell\"><img decoding=\"async\" src=\"verint.png\" alt=\"Verint\"><\/div>\r\n      <div class=\"logo-cell\"><img decoding=\"async\" src=\"pepsico.png\" alt=\"PepsiCo\"><\/div>\r\n      <div class=\"logo-cell\"><img decoding=\"async\" src=\"aurobindo.png\" alt=\"Aurobindo Pharma\"><\/div>\r\n      <div class=\"logo-cell\"><img decoding=\"async\" src=\"zettamine.png\" alt=\"ZettaMine\"><\/div>\r\n      <div class=\"logo-cell\"><img decoding=\"async\" src=\"noblq.png\" alt=\"NoblQ\"><\/div>\r\n      <div class=\"logo-cell\"><img decoding=\"async\" src=\"verint.png\" alt=\"Verint\"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 METRICS \u2014 DARK \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"metrics\">\r\n  <div class=\"metrics-grid\">\r\n    <div class=\"met sr\">\r\n      <div class=\"met-icon mi-1\">\ud83d\udcca<\/div>\r\n      <div class=\"met-num g-blue\" data-count=\"94\" data-suffix=\"%\">0%<\/div>\r\n      <div class=\"met-desc\">Process Automation<br>Rate Achieved<\/div>\r\n    <\/div>\r\n    <div class=\"met sr sd1\">\r\n      <div class=\"met-icon mi-2\">\ud83d\ude80<\/div>\r\n      <div class=\"met-num g-teal\" data-count=\"3.8\" data-decimal=\"true\" data-suffix=\"\u00d7\">0\u00d7<\/div>\r\n      <div class=\"met-desc\">Average ROI<br>on Engagements<\/div>\r\n    <\/div>\r\n    <div class=\"met sr sd2\">\r\n      <div class=\"met-icon mi-3\">\u23f1\ufe0f<\/div>\r\n      <div class=\"met-num\" style=\"background:linear-gradient(120deg,#a78bfa,#818cf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;\" data-count=\"67\" data-suffix=\"%\">0%<\/div>\r\n      <div class=\"met-desc\">Reporting Time<br>Saved Per Week<\/div>\r\n    <\/div>\r\n    <div class=\"met sr sd3\">\r\n      <div class=\"met-icon mi-4\">\ud83c\udfaf<\/div>\r\n      <div class=\"met-num\" style=\"background:linear-gradient(120deg,#fbbf24,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;\" data-count=\"99\" data-suffix=\"%\">0%<\/div>\r\n      <div class=\"met-desc\">Data Pipeline<br>Uptime Reliability<\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 TRUST STRIP \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<div id=\"strip\">\r\n  <div class=\"strip-belt\">\r\n    <div class=\"strip-i\">\ud83d\udd37 Built on <strong>Microsoft Azure & Power BI<\/strong><\/div>\r\n    <div class=\"strip-i\">\u2601\ufe0f Cloud platforms \u2014 <strong>AWS \u00b7 Azure \u00b7 GCP<\/strong><\/div>\r\n    <div class=\"strip-i\">\ud83c\udfaf Focused on <strong>real business outcomes<\/strong><\/div>\r\n    <div class=\"strip-i\">\ud83d\udee1\ufe0f <strong>GDPR compliant<\/strong> \u00b7 Data privacy first<\/div>\r\n    <div class=\"strip-i\">\u26a1 First results in <strong>3\u20136 weeks<\/strong><\/div>\r\n    <div class=\"strip-i\">\ud83e\udd1d <strong>Direct team access<\/strong> \u00b7 No handoffs<\/div>\r\n    <div class=\"strip-i\">\ud83d\udd12 <strong>NDA<\/strong> available day one<\/div>\r\n    <div class=\"strip-i\">\ud83d\udd37 Built on <strong>Microsoft Azure & Power BI<\/strong><\/div>\r\n    <div class=\"strip-i\">\u2601\ufe0f Cloud platforms \u2014 <strong>AWS \u00b7 Azure \u00b7 GCP<\/strong><\/div>\r\n    <div class=\"strip-i\">\ud83c\udfaf Focused on <strong>real business outcomes<\/strong><\/div>\r\n    <div class=\"strip-i\">\ud83d\udee1\ufe0f <strong>GDPR compliant<\/strong> \u00b7 Data privacy first<\/div>\r\n    <div class=\"strip-i\">\u26a1 First results in <strong>3\u20136 weeks<\/strong><\/div>\r\n    <div class=\"strip-i\">\ud83e\udd1d <strong>Direct team access<\/strong> \u00b7 No handoffs<\/div>\r\n    <div class=\"strip-i\">\ud83d\udd12 <strong>NDA<\/strong> available day one<\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 SERVICES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"services\" class=\"sec-gray\">\r\n  <div class=\"wrap\">\r\n    <div class=\"sec-head sr\">\r\n      <div class=\"eyebrow\">What We Build<\/div>\r\n      <h2 class=\"d-xl\">AI & Data Services That<br><span class=\"g-blue\">Actually Ship<\/span><\/h2>\r\n      <p>Every service is scoped around a specific business outcome. We don't sell capabilities \u2014 we solve problems and measure success in your numbers.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"svc-hero-grid sr\">\r\n      <div class=\"svc\">\r\n        <div class=\"svc-badge sb-blue\">\ud83e\udd16 AI Automation<\/div>\r\n        <h3>Replace Manual Work with<br>Intelligent Workflows<\/h3>\r\n        <p>Identify the most time-consuming manual work in your business and replace it with intelligent, reliable workflows. Document processing, approval flows, customer routing \u2014 we find the highest-ROI opportunities first.<\/p>\r\n        <a href=\"#cta\" class=\"svc-link\">Reduce workload by 40\u201380% <svg class=\"arr\" width=\"13\" height=\"13\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M3 8h10M9 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/a>\r\n        <div class=\"svc-num\">01<\/div>\r\n      <\/div>\r\n      <div class=\"svc\">\r\n        <div class=\"svc-badge sb-indigo\">\ud83d\udcca Power BI<\/div>\r\n        <h3>Dashboards Your Whole<br>Team Actually Uses<\/h3>\r\n        <p>Turn scattered, raw data into clear dashboards connected to your live data so decisions happen on real numbers \u2014 not last week's exports. Interactive analytics that work for everyone, not just the data team.<\/p>\r\n        <a href=\"#cta\" class=\"svc-link\">Real-time clarity, not stale reports <svg class=\"arr\" width=\"13\" height=\"13\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M3 8h10M9 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/a>\r\n        <div class=\"svc-num\">02<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"svc-grid-3 sr sd1\" style=\"margin-top:1px;\">\r\n      <div class=\"svc\">\r\n        <div class=\"svc-badge sb-teal\">\ud83e\udde0 Machine Learning<\/div>\r\n        <h3>Custom ML Models<\/h3>\r\n        <p>Prediction, classification, and anomaly detection \u2014 trained on your data, deployed in your environment, built to improve over time.<\/p>\r\n        <a href=\"#cta\" class=\"svc-link\" style=\"margin-top:14px;\">Explore ML <svg class=\"arr\" width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M3 8h10M9 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/a>\r\n        <div class=\"svc-num\">03<\/div>\r\n      <\/div>\r\n      <div class=\"svc\">\r\n        <div class=\"svc-badge sb-violet\">\u2601\ufe0f Cloud Engineering<\/div>\r\n        <h3>Scalable Data Pipelines<\/h3>\r\n        <p>Data warehouses and lakes on Azure, AWS, or GCP. Clean, reliable infrastructure that supports your entire data stack.<\/p>\r\n        <a href=\"#cta\" class=\"svc-link\" style=\"margin-top:14px;\">Explore Cloud <svg class=\"arr\" width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M3 8h10M9 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/a>\r\n        <div class=\"svc-num\">04<\/div>\r\n      <\/div>\r\n      <div class=\"svc\">\r\n        <div class=\"svc-badge sb-amber\">\u2699\ufe0f AI Strategy<\/div>\r\n        <h3>Find Your Highest-ROI AI<\/h3>\r\n        <p>We audit your current state, find your highest-impact AI opportunities, and build a practical roadmap \u2014 no hype, no jargon.<\/p>\r\n        <a href=\"#cta\" class=\"svc-link\" style=\"margin-top:14px;\">Get Strategy Call <svg class=\"arr\" width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M3 8h10M9 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/a>\r\n        <div class=\"svc-num\">05<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"sec-cta sr\">\r\n      <a href=\"#cta\" class=\"btn btn-primary btn-lg\">Discuss Your Use Case <svg class=\"arr\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M3 8h10M9 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/a>\r\n      <a href=\"#case-studies\" class=\"btn btn-outline btn-lg\">See Case Studies<\/a>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CASE STUDIES SLIDER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"case-studies\" class=\"sec-light\">\r\n  <div class=\"wrap\">\r\n    <div class=\"cs-controls\">\r\n      <div class=\"sr\">\r\n        <div class=\"eyebrow\">Real Work, Real Results<\/div>\r\n        <h2 class=\"d-xl\" style=\"margin-top:12px;\">Case Studies: <span class=\"g-blue\">Solutions We've Built<\/span><\/h2>\r\n      <\/div>\r\n      <div class=\"cs-arrows\">\r\n        <div class=\"cs-dots-row\" id=\"cs-dots\"><\/div>\r\n        <button class=\"cs-btn\" id=\"cs-prev\">&#8592;<\/button>\r\n        <button class=\"cs-btn\" id=\"cs-next\">&#8594;<\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"sr\">\r\n      <div class=\"cs-viewport\">\r\n        <div class=\"cs-track\" id=\"cs-track\">\r\n\r\n          <!-- SLIDE 1 -->\r\n          <div class=\"cs-slide\">\r\n            <div class=\"cs-card\">\r\n              <div class=\"cs-card-stripe\" style=\"background:linear-gradient(90deg,#2563eb,#4338ca)\"><\/div>\r\n              <div class=\"cs-visual cv-1\">\r\n                <div class=\"mdb\">\r\n                  <div class=\"mdb-kpis\">\r\n                    <div class=\"mk\"><div class=\"mk-n\">4h\u219210m<\/div><div class=\"mk-l\">Report Time<\/div><\/div>\r\n                    <div class=\"mk\"><div class=\"mk-n\" style=\"color:#059669\">95%\u2193<\/div><div class=\"mk-l\">Time Saved<\/div><\/div>\r\n                    <div class=\"mk\"><div class=\"mk-n\" style=\"color:#0891b2\">Live<\/div><div class=\"mk-l\">Data Feed<\/div><\/div>\r\n                  <\/div>\r\n                  <div class=\"mbar\"><div class=\"mbar-l\">North<\/div><div class=\"mbar-t\"><div class=\"mbar-f\" style=\"width:88%;background:#2563eb\"><\/div><\/div><div class=\"mbar-v\">$88K<\/div><\/div>\r\n                  <div class=\"mbar\"><div class=\"mbar-l\">South<\/div><div class=\"mbar-t\"><div class=\"mbar-f\" style=\"width:72%;background:#4338ca\"><\/div><\/div><div class=\"mbar-v\">$72K<\/div><\/div>\r\n                  <div class=\"mbar\"><div class=\"mbar-l\">East<\/div><div class=\"mbar-t\"><div class=\"mbar-f\" style=\"width:61%;background:#7c3aed\"><\/div><\/div><div class=\"mbar-v\">$61K<\/div><\/div>\r\n                <\/div>\r\n              <\/div>\r\n              <div class=\"cs-body\">\r\n                <span class=\"cs-tag ct-i\">Power BI<\/span>\r\n                <h3>Sales Performance Dashboard \u2014 Retail Distribution<\/h3>\r\n                <div class=\"cs-row\"><div class=\"cs-rl rl-p\">The Problem<\/div><p>Reports from 3 spreadsheets, took 4 hrs weekly \u2014 always out of date when anyone saw them.<\/p><\/div>\r\n                <div class=\"cs-row\"><div class=\"cs-rl rl-s\">What We Built<\/div><p>Live Power BI dashboard connected to their sales DB \u2014 regional breakdowns and auto-digests.<\/p><\/div>\r\n                <div class=\"cs-row\"><div class=\"cs-rl rl-r\">What Changed<\/div><p>Reporting dropped from 4 hours to under 10 minutes. Manager reviews performance every morning.<\/p><\/div>\r\n                <div class=\"cs-result-bar\"><div class=\"cs-num\">95%<\/div><div class=\"cs-ntxt\">Reduction in<br>manual reporting time<\/div><\/div>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- SLIDE 2 -->\r\n          <div class=\"cs-slide\">\r\n            <div class=\"cs-card\">\r\n              <div class=\"cs-card-stripe\" style=\"background:linear-gradient(90deg,#0d9488,#0891b2)\"><\/div>\r\n              <div class=\"cs-visual cv-2\">\r\n                <div class=\"mdb\">\r\n                  <div class=\"mdb-kpis\">\r\n                    <div class=\"mk\"><div class=\"mk-n\" style=\"color:#0d9488\">30%<\/div><div class=\"mk-l\">Budget Shift<\/div><\/div>\r\n                    <div class=\"mk\"><div class=\"mk-n\" style=\"color:#059669\">\u219118%<\/div><div class=\"mk-l\">True ROAS<\/div><\/div>\r\n                    <div class=\"mk\"><div class=\"mk-n\" style=\"color:#0891b2\">Multi<\/div><div class=\"mk-l\">Sources<\/div><\/div>\r\n                  <\/div>\r\n                  <div class=\"mbar\"><div class=\"mbar-l\">Paid<\/div><div class=\"mbar-t\"><div class=\"mbar-f\" style=\"width:84%;background:#0d9488\"><\/div><\/div><div class=\"mbar-v\">84%<\/div><\/div>\r\n                  <div class=\"mbar\"><div class=\"mbar-l\">Email<\/div><div class=\"mbar-t\"><div class=\"mbar-f\" style=\"width:58%;background:#14b8a6\"><\/div><\/div><div class=\"mbar-v\">58%<\/div><\/div>\r\n                  <div class=\"mbar\"><div class=\"mbar-l\">Social<\/div><div class=\"mbar-t\"><div class=\"mbar-f\" style=\"width:36%;background:#5eead4\"><\/div><\/div><div class=\"mbar-v\">36%<\/div><\/div>\r\n                <\/div>\r\n              <\/div>\r\n              <div class=\"cs-body\">\r\n                <span class=\"cs-tag ct-t\">Analytics<\/span>\r\n                <h3>E-Commerce Order Analytics \u2014 DTC Fashion Brand<\/h3>\r\n                <div class=\"cs-row\"><div class=\"cs-rl rl-p\">The Problem<\/div><p>Couldn't answer which channels were profitable after returns were factored in.<\/p><\/div>\r\n                <div class=\"cs-row\"><div class=\"cs-rl rl-s\">What We Built<\/div><p>Centralized analytics from Shopify, ad platforms, and returns \u2014 true channel profitability.<\/p><\/div>\r\n                <div class=\"cs-row\"><div class=\"cs-rl rl-r\">What Changed<\/div><p>Reallocated 30% of ad budget in two weeks. A product category was quietly losing money.<\/p><\/div>\r\n                <div class=\"cs-result-bar\"><div class=\"cs-num\">30%<\/div><div class=\"cs-ntxt\">Ad budget reallocation<br>within 2 weeks<\/div><\/div>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- SLIDE 3 -->\r\n          <div class=\"cs-slide\">\r\n            <div class=\"cs-card\">\r\n              <div class=\"cs-card-stripe\" style=\"background:linear-gradient(90deg,#7c3aed,#4338ca)\"><\/div>\r\n              <div class=\"cs-visual cv-3\">\r\n                <div class=\"mdb\">\r\n                  <div class=\"mdb-kpis\">\r\n                    <div class=\"mk\"><div class=\"mk-n\" style=\"color:#7c3aed\">\u219122%<\/div><div class=\"mk-l\">Fleet Util.<\/div><\/div>\r\n                    <div class=\"mk\"><div class=\"mk-n\" style=\"color:#4338ca\">14-day<\/div><div class=\"mk-l\">Forecast<\/div><\/div>\r\n                    <div class=\"mk\"><div class=\"mk-n\" style=\"color:#6d28d9\">3yr<\/div><div class=\"mk-l\">History<\/div><\/div>\r\n                  <\/div>\r\n                  <div class=\"mline\">\r\n                    <svg viewBox=\"0 0 260 32\" preserveAspectRatio=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                      <defs><linearGradient id=\"vg\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0%\" stop-color=\"#7c3aed\" stop-opacity=\"0.25\"\/><stop offset=\"100%\" stop-color=\"#7c3aed\" stop-opacity=\"0\"\/><\/linearGradient><\/defs>\r\n                      <path d=\"M0,26 C30,22 60,16 90,18 C120,20 150,8 180,6 C210,4 240,8 260,4 L260,32 L0,32Z\" fill=\"url(#vg)\"\/>\r\n                      <path d=\"M0,26 C30,22 60,16 90,18 C120,20 150,8 180,6 C210,4 240,8 260,4\" fill=\"none\" stroke=\"#7c3aed\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n                    <\/svg>\r\n                  <\/div>\r\n                <\/div>\r\n              <\/div>\r\n              <div class=\"cs-body\">\r\n                <span class=\"cs-tag ct-v\">Machine Learning<\/span>\r\n                <h3>Demand Forecasting \u2014 Regional Logistics Provider<\/h3>\r\n                <div class=\"cs-row\"><div class=\"cs-rl rl-p\">The Problem<\/div><p>Fleet scheduling done manually using last year's volumes \u2014 leading to idle vehicles or scrambles.<\/p><\/div>\r\n                <div class=\"cs-row\"><div class=\"cs-rl rl-s\">What We Built<\/div><p>A demand forecasting model on 3 years of data, outputting a rolling 14-day forecast into their scheduler.<\/p><\/div>\r\n                <div class=\"cs-row\"><div class=\"cs-rl rl-r\">What Changed<\/div><p>Fleet utilization improved 22% in Q1. Ops manager stopped getting weekend emergency calls.<\/p><\/div>\r\n                <div class=\"cs-result-bar\"><div class=\"cs-num\">\u219122%<\/div><div class=\"cs-ntxt\">Fleet utilization<br>improvement Q1<\/div><\/div>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- SLIDE 4 -->\r\n          <div class=\"cs-slide\">\r\n            <div class=\"cs-card\">\r\n              <div class=\"cs-card-stripe\" style=\"background:linear-gradient(90deg,#d97706,#ef4444)\"><\/div>\r\n              <div class=\"cs-visual cv-4\">\r\n                <div class=\"mdb\">\r\n                  <div class=\"mdb-kpis\">\r\n                    <div class=\"mk\"><div class=\"mk-n\" style=\"color:#d97706\">80%<\/div><div class=\"mk-l\">Auto-Proc<\/div><\/div>\r\n                    <div class=\"mk\"><div class=\"mk-n\" style=\"color:#059669\">15hr\/wk<\/div><div class=\"mk-l\">Saved<\/div><\/div>\r\n                    <div class=\"mk\"><div class=\"mk-n\" style=\"color:#0891b2\">OCR<\/div><div class=\"mk-l\">Engine<\/div><\/div>\r\n                  <\/div>\r\n                  <div class=\"mbar\"><div class=\"mbar-l\">Auto<\/div><div class=\"mbar-t\"><div class=\"mbar-f\" style=\"width:80%;background:#d97706\"><\/div><\/div><div class=\"mbar-v\">80%<\/div><\/div>\r\n                  <div class=\"mbar\"><div class=\"mbar-l\">Review<\/div><div class=\"mbar-t\"><div class=\"mbar-f\" style=\"width:15%;background:#f59e0b\"><\/div><\/div><div class=\"mbar-v\">15%<\/div><\/div>\r\n                  <div class=\"mbar\"><div class=\"mbar-l\">Manual<\/div><div class=\"mbar-t\"><div class=\"mbar-f\" style=\"width:5%;background:#fcd34d\"><\/div><\/div><div class=\"mbar-v\">5%<\/div><\/div>\r\n                <\/div>\r\n              <\/div>\r\n              <div class=\"cs-body\">\r\n                <span class=\"cs-tag ct-a\">Automation<\/span>\r\n                <h3>Invoice Processing Automation \u2014 Professional Services<\/h3>\r\n                <div class=\"cs-row\"><div class=\"cs-rl rl-p\">The Problem<\/div><p>Finance spent 15+ hrs\/week extracting from PDF invoices, matching to POs \u2014 error-prone, tedious.<\/p><\/div>\r\n                <div class=\"cs-row\"><div class=\"cs-rl rl-s\">What We Built<\/div><p>Automated document pipeline using OCR. Invoices processed automatically \u2014 flagging only exceptions.<\/p><\/div>\r\n                <div class=\"cs-row\"><div class=\"cs-rl rl-r\">What Changed<\/div><p>Finance handles 80% fewer touchpoints on routine invoices. Hours freed for actual human judgement.<\/p><\/div>\r\n                <div class=\"cs-result-bar\"><div class=\"cs-num\">80%<\/div><div class=\"cs-ntxt\">Fewer manual<br>invoice touchpoints<\/div><\/div>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- SLIDE 5 -->\r\n          <div class=\"cs-slide\">\r\n            <div class=\"cs-card\">\r\n              <div class=\"cs-card-stripe\" style=\"background:linear-gradient(90deg,#2563eb,#0d9488)\"><\/div>\r\n              <div class=\"cs-visual cv-5\">\r\n                <div class=\"mdb dk\">\r\n                  <div class=\"mdb-kpis\">\r\n                    <div class=\"mk\"><div class=\"mk-n\">1 day<\/div><div class=\"mk-l\">Board Deck<\/div><\/div>\r\n                    <div class=\"mk\"><div class=\"mk-n\" style=\"color:#34d399\">Hourly<\/div><div class=\"mk-l\">Refresh<\/div><\/div>\r\n                    <div class=\"mk\"><div class=\"mk-n\" style=\"color:#60a5fa\">5+<\/div><div class=\"mk-l\">Sources<\/div><\/div>\r\n                  <\/div>\r\n                  <div class=\"mbar\"><div class=\"mbar-l\">Stripe<\/div><div class=\"mbar-t\"><div class=\"mbar-f\" style=\"width:90%;background:#60a5fa\"><\/div><\/div><div class=\"mbar-v\">\u2713<\/div><\/div>\r\n                  <div class=\"mbar\"><div class=\"mbar-l\">Intercom<\/div><div class=\"mbar-t\"><div class=\"mbar-f\" style=\"width:90%;background:#818cf8\"><\/div><\/div><div class=\"mbar-v\">\u2713<\/div><\/div>\r\n                  <div class=\"mbar\"><div class=\"mbar-l\">Postgres<\/div><div class=\"mbar-t\"><div class=\"mbar-f\" style=\"width:90%;background:#34d399\"><\/div><\/div><div class=\"mbar-v\">\u2713<\/div><\/div>\r\n                <\/div>\r\n              <\/div>\r\n              <div class=\"cs-body\">\r\n                <span class=\"cs-tag ct-b\">Cloud Engineering<\/span>\r\n                <h3>Data Warehouse Migration \u2014 SaaS Startup<\/h3>\r\n                <div class=\"cs-row\"><div class=\"cs-rl rl-p\">The Problem<\/div><p>Data across product DB, Stripe, Intercom, and 5 spreadsheets. Cross-system queries always conflicted.<\/p><\/div>\r\n                <div class=\"cs-row\"><div class=\"cs-rl rl-s\">What We Built<\/div><p>Modern data warehouse on Azure Synapse with automated pipelines \u2014 one source of truth, refreshed hourly.<\/p><\/div>\r\n                <div class=\"cs-row\"><div class=\"cs-rl rl-r\">What Changed<\/div><p>First board deck built in an afternoon instead of a week. CEO pulls numbers himself before investor calls.<\/p><\/div>\r\n                <div class=\"cs-result-bar\"><div class=\"cs-num\">1 day<\/div><div class=\"cs-ntxt\">Board deck prep<br>down from 1 week<\/div><\/div>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- SLIDE 6 -->\r\n          <div class=\"cs-slide\">\r\n            <div class=\"cs-card\">\r\n              <div class=\"cs-card-stripe\" style=\"background:linear-gradient(90deg,#059669,#0d9488)\"><\/div>\r\n              <div class=\"cs-visual cv-6\">\r\n                <div class=\"mdb\">\r\n                  <div class=\"mdb-kpis\">\r\n                    <div class=\"mk\"><div class=\"mk-n\" style=\"color:#059669\">\u219318%<\/div><div class=\"mk-l\">Churn Rate<\/div><\/div>\r\n                    <div class=\"mk\"><div class=\"mk-n\" style=\"color:#0d9488\">Weekly<\/div><div class=\"mk-l\">Scoring<\/div><\/div>\r\n                    <div class=\"mk\"><div class=\"mk-n\" style=\"color:#2563eb\">ML<\/div><div class=\"mk-l\">Model<\/div><\/div>\r\n                  <\/div>\r\n                  <div class=\"mbar\"><div class=\"mbar-l\">At-Risk<\/div><div class=\"mbar-t\"><div class=\"mbar-f\" style=\"width:28%;background:#ef4444\"><\/div><\/div><div class=\"mbar-v\">28%<\/div><\/div>\r\n                  <div class=\"mbar\"><div class=\"mbar-l\">Healthy<\/div><div class=\"mbar-t\"><div class=\"mbar-f\" style=\"width:72%;background:#059669\"><\/div><\/div><div class=\"mbar-v\">72%<\/div><\/div>\r\n                  <div class=\"mbar\"><div class=\"mbar-l\">Saved<\/div><div class=\"mbar-t\"><div class=\"mbar-f\" style=\"width:65%;background:#34d399\"><\/div><\/div><div class=\"mbar-v\">65%<\/div><\/div>\r\n                <\/div>\r\n              <\/div>\r\n              <div class=\"cs-body\">\r\n                <span class=\"cs-tag ct-e\">Business Intelligence<\/span>\r\n                <h3>Customer Churn Analysis \u2014 Subscription Business<\/h3>\r\n                <div class=\"cs-row\"><div class=\"cs-rl rl-p\">The Problem<\/div><p>Churn trending wrong. Didn't know which segments, when in lifecycle, or what signals came first.<\/p><\/div>\r\n                <div class=\"cs-row\"><div class=\"cs-rl rl-s\">What We Built<\/div><p>Churn dashboard + early-warning ML model scoring active customers weekly \u2014 flagging at-risk accounts.<\/p><\/div>\r\n                <div class=\"cs-row\"><div class=\"cs-rl rl-r\">What Changed<\/div><p>CS team shifted from reactive to proactive. Churn in the target segment dropped 18%.<\/p><\/div>\r\n                <div class=\"cs-result-bar\"><div class=\"cs-num\">\u219318%<\/div><div class=\"cs-ntxt\">Churn reduction<br>in target segment<\/div><\/div>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"sec-cta sr\">\r\n      <a href=\"#cta\" class=\"btn btn-primary btn-lg\">Discuss Your Use Case <svg class=\"arr\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M3 8h10M9 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/a>\r\n      <a href=\"mailto:hello@ccpl.ai\" class=\"btn btn-outline btn-lg\">Talk to an Expert<\/a>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 DATA VIZ \u2014 DARK \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"data-viz\" class=\"sec-dark\">\r\n  <div class=\"dv-glow\"><\/div>\r\n  <div class=\"wrap\" style=\"position:relative;z-index:2;\">\r\n    <div class=\"sec-head sr\">\r\n      <div class=\"eyebrow dark-eye\">In Action<\/div>\r\n      <h2 class=\"d-xl sec-head-dark\">Data-Driven Insights for <span class=\"g-cyan\">Better Decisions<\/span><\/h2>\r\n      <p style=\"color:var(--dark-text)\">What your business data looks like when properly connected, modeled, and visualized \u2014 tracking revenue, customer behavior, and performance in real time.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"dv-kpis sr\">\r\n      <div class=\"dvk dvk1\"><div class=\"dvk-num\" data-count=\"94\" data-suffix=\"%\">0%<\/div><div class=\"dvk-lbl\">Process Automation<\/div><div class=\"dvk-trend\">\u2191 18% this quarter<\/div><\/div>\r\n      <div class=\"dvk dvk2\"><div class=\"dvk-num\" data-count=\"3.8\" data-decimal=\"true\" data-suffix=\"\u00d7\">0\u00d7<\/div><div class=\"dvk-lbl\">Average ROI<\/div><div class=\"dvk-trend\">\u2191 0.4\u00d7 vs last year<\/div><\/div>\r\n      <div class=\"dvk dvk3\"><div class=\"dvk-num\" data-count=\"67\" data-suffix=\"%\">0%<\/div><div class=\"dvk-lbl\">Reporting Time Saved<\/div><div class=\"dvk-trend\">\u2191 12% improvement<\/div><\/div>\r\n      <div class=\"dvk dvk4\"><div class=\"dvk-num\" data-count=\"99\" data-suffix=\"%\">0%<\/div><div class=\"dvk-lbl\">Pipeline Reliability<\/div><div class=\"dvk-trend\">Consistent uptime<\/div><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"dv-charts sr sd1\">\r\n      <div class=\"dvc\">\r\n        <div class=\"dvc-head\"><span class=\"dvc-title\">Revenue Growth \u00b7 Monthly<\/span><span class=\"dvc-badge db-live\">Live Model<\/span><\/div>\r\n        <canvas id=\"lineChart\" height=\"180\"><\/canvas>\r\n      <\/div>\r\n      <div class=\"dvc\">\r\n        <div class=\"dvc-head\"><span class=\"dvc-title\">Performance \u00b7 By Segment<\/span><span class=\"dvc-badge db-ai\">AI Analyzed<\/span><\/div>\r\n        <canvas id=\"barChart\" height=\"180\"><\/canvas>\r\n      <\/div>\r\n      <div class=\"dvc\">\r\n        <div class=\"dvc-head\"><span class=\"dvc-title\">Customer Behavior \u00b7 Neural<\/span><span class=\"dvc-badge db-proc\">Processing<\/span><\/div>\r\n        <canvas id=\"neuralCanvas\" height=\"200\"><\/canvas>\r\n      <\/div>\r\n      <div class=\"dvc\">\r\n        <div class=\"dvc-head\"><span class=\"dvc-title\">Automation Coverage<\/span><span class=\"dvc-badge db-opt\">Optimized<\/span><\/div>\r\n        <div style=\"display:flex;align-items:center;gap:22px;padding-top:8px;\">\r\n          <canvas id=\"doughnutChart\" width=\"150\" height=\"150\" style=\"flex-shrink:0\"><\/canvas>\r\n          <div style=\"flex:1;display:flex;flex-direction:column;gap:11px;\" id=\"donut-legend\"><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"sec-cta sr\">\r\n      <a href=\"#cta\" class=\"btn btn-white btn-lg\">Start Your Project <svg class=\"arr\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M3 8h10M9 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/a>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 WHY US \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"why\" class=\"sec-light\">\r\n  <div class=\"wrap\">\r\n    <div class=\"why-layout\">\r\n      <div class=\"why-l sr\">\r\n        <div class=\"eyebrow\">Why Work With Us<\/div>\r\n        <h2 class=\"d-xl\" style=\"margin-top:0\">A Different Kind of <span class=\"g-blue\">AI Partner<\/span><\/h2>\r\n        <p>Most AI vendors lead with their technology stack. We lead with your problem. We work directly alongside your team, measure success by outcomes visible in your numbers, and stay involved until it actually sticks.<\/p>\r\n        <div class=\"why-btns\">\r\n          <a href=\"#cta\" class=\"btn btn-primary\">Start a Conversation<\/a>\r\n          <a href=\"#process\" class=\"btn btn-outline\">See Our Process<\/a>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"why-cards sr sd2\">\r\n        <div class=\"why-c feat\"><div class=\"why-c-icon\" style=\"background:var(--blue-pale);border:1px solid var(--blue-soft)\">\ud83d\udc64<\/div><h4>Personalized Approach<\/h4><p>Senior-level attention on your project \u2014 not handed to juniors after signing.<\/p><\/div>\r\n        <div class=\"why-c\"><div class=\"why-c-icon\" style=\"background:var(--teal-pale);border:1px solid rgba(13,148,136,0.2)\">\ud83d\udd27<\/div><h4>Flexible & Scalable<\/h4><p>Engagement models that adapt to your budget, timeline, and where you actually are.<\/p><\/div>\r\n        <div class=\"why-c\"><div class=\"why-c-icon\" style=\"background:var(--indigo-pale);border:1px solid rgba(67,56,202,0.2)\">\ud83c\udfaf<\/div><h4>Strong Data Understanding<\/h4><p>We start with your goals and work backwards to the solution \u2014 never the other way.<\/p><\/div>\r\n        <div class=\"why-c\"><div class=\"why-c-icon\" style=\"background:var(--emerald-pale);border:1px solid rgba(5,150,105,0.2)\">\ud83d\ude80<\/div><h4>Practical Solutions<\/h4><p>Built for your real environment, with your real data and constraints.<\/p><\/div>\r\n        <div class=\"why-c\"><div class=\"why-c-icon\" style=\"background:var(--amber-pale);border:1px solid rgba(217,119,6,0.2)\">\ud83d\udcac<\/div><h4>Transparent Communication<\/h4><p>Weekly updates, honest progress, direct access to the people building your solution.<\/p><\/div>\r\n        <div class=\"why-c\"><div class=\"why-c-icon\" style=\"background:rgba(225,29,72,0.06);border:1px solid rgba(225,29,72,0.15)\">\ud83d\udcc8<\/div><h4>Built to Grow With You<\/h4><p>Solutions designed to scale as your business does \u2014 no lock-in.<\/p><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HUMAN TOUCH \u2014 DARK \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"human\" class=\"sec-dark\">\r\n  <div class=\"wrap\">\r\n    <div class=\"ht-layout\">\r\n      <div class=\"ht-l sr\">\r\n        <div class=\"eyebrow dark-eye\">About Our Team<\/div>\r\n        <h2 class=\"d-xl\">Real People.<br><span class=\"g-cyan\">Real Partnership.<\/span><\/h2>\r\n        <p>We're not a faceless agency or offshore vendor. We're a focused team of data engineers, ML practitioners, and BI specialists who care about outcomes \u2014 not just contracts.<\/p>\r\n        <div class=\"ht-facts\">\r\n          <div class=\"ht-fact\"><div class=\"ht-fi\">\ud83e\udd1d<\/div><div class=\"ht-ft\"><strong>Direct access, always<\/strong><span>You work with the person building your solution \u2014 never a PM acting as relay.<\/span><\/div><\/div>\r\n          <div class=\"ht-fact\"><div class=\"ht-fi\">\ud83d\udcd0<\/div><div class=\"ht-ft\"><strong>Honest scoping<\/strong><span>We tell you what's realistic in your timeline and budget before anything starts.<\/span><\/div><\/div>\r\n          <div class=\"ht-fact\"><div class=\"ht-fi\">\ud83d\udd01<\/div><div class=\"ht-ft\"><strong>Long-term thinking<\/strong><span>We design solutions you can maintain and grow \u2014 not ones that create dependency on us.<\/span><\/div><\/div>\r\n        <\/div>\r\n        <a href=\"mailto:hello@ccpl.ai\" class=\"btn btn-ghost-dk btn-lg\">Meet the Team \u2192 hello@ccpl.ai<\/a>\r\n      <\/div>\r\n      <div class=\"ht-r sr sd2\">\r\n        <div class=\"ht-team\">\r\n          <div class=\"ht-avs\">\r\n            <div class=\"ht-av av-a\">\ud83d\udc69\u200d\ud83d\udcbb<\/div>\r\n            <div class=\"ht-av av-b\">\ud83d\udc68\u200d\ud83d\udd2c<\/div>\r\n            <div class=\"ht-av av-c\">\ud83d\udc69\u200d\ud83d\udcca<\/div>\r\n            <div class=\"ht-av av-d\">\ud83d\udc68\u200d\ud83d\udcbc<\/div>\r\n          <\/div>\r\n          <div class=\"ht-tl\">Your dedicated team<\/div>\r\n          <div class=\"ht-tm\">Data Engineers \u00b7 ML Specialists \u00b7 BI Analysts<\/div>\r\n        <\/div>\r\n        <div class=\"ht-stats\">\r\n          <div class=\"ht-st\"><div class=\"ht-sn\">3\u20136wk<\/div><div class=\"ht-sl\">First results<\/div><\/div>\r\n          <div class=\"ht-st\"><div class=\"ht-sn\">100%<\/div><div class=\"ht-sl\">Senior team<\/div><\/div>\r\n          <div class=\"ht-st\"><div class=\"ht-sn\">NDA<\/div><div class=\"ht-sl\">Day one<\/div><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 PARTNERS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"partners\" class=\"sec-gray\">\r\n  <div class=\"wrap\">\r\n    <div class=\"sec-head sr\" style=\"text-align:center\">\r\n      <div class=\"eyebrow\" style=\"justify-content:center\">Technologies We Work With<\/div>\r\n      <h2 class=\"d-xl\" style=\"margin-top:0\">The Platforms Behind <span class=\"g-blue\">Our Solutions<\/span><\/h2>\r\n      <p style=\"margin:14px auto 0;max-width:520px;text-align:center\">Industry-leading platforms chosen for your specific needs \u2014 not a fixed tech stack forced on every project.<\/p>\r\n    <\/div>\r\n    <div class=\"partner-grid sr\">\r\n      <div class=\"pt-card sd1\"><span class=\"pt-em\">\ud83d\udd37<\/span><div class=\"pt-name\">Microsoft<\/div><div class=\"pt-desc\">Cloud, data, and BI platform for enterprise-grade solutions<\/div><div class=\"pt-chips\"><span class=\"pt-chip\">Azure<\/span><span class=\"pt-chip\">Power BI<\/span><span class=\"pt-chip\">Synapse<\/span><span class=\"pt-chip\">Fabric<\/span><\/div><\/div>\r\n      <div class=\"pt-card sd2\"><span class=\"pt-em\">\ud83d\udfe0<\/span><div class=\"pt-name\">AWS<\/div><div class=\"pt-desc\">Scalable cloud infrastructure and managed data services<\/div><div class=\"pt-chips\"><span class=\"pt-chip\">Redshift<\/span><span class=\"pt-chip\">S3<\/span><span class=\"pt-chip\">Glue<\/span><span class=\"pt-chip\">SageMaker<\/span><\/div><\/div>\r\n      <div class=\"pt-card sd3\"><span class=\"pt-em\">\ud83d\udd35<\/span><div class=\"pt-name\">Oracle<\/div><div class=\"pt-desc\">Enterprise data management and cloud database platform<\/div><div class=\"pt-chips\"><span class=\"pt-chip\">Oracle DB<\/span><span class=\"pt-chip\">OCI<\/span><span class=\"pt-chip\">Analytics<\/span><\/div><\/div>\r\n      <div class=\"pt-card sd4\"><span class=\"pt-em\">\ud83d\udfe1<\/span><div class=\"pt-name\">SAP<\/div><div class=\"pt-desc\">ERP data integration and enterprise analytics connectivity<\/div><div class=\"pt-chips\"><span class=\"pt-chip\">SAP HANA<\/span><span class=\"pt-chip\">BTP<\/span><span class=\"pt-chip\">Analytics<\/span><\/div><\/div>\r\n    <\/div>\r\n    <div class=\"pt-note sr\">We build solutions using these platforms. We are not affiliated with, endorsed by, or an official partner of any of these companies. Platform names belong to their respective owners.<\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 PROCESS \u2014 DARK \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"process\" class=\"sec-dark\">\r\n  <div class=\"wrap\" style=\"position:relative;z-index:2\">\r\n    <div class=\"sec-head sr\" style=\"text-align:center\">\r\n      <div class=\"eyebrow dark-eye\" style=\"justify-content:center\">How We Work<\/div>\r\n      <h2 class=\"d-xl sec-head-dark\" style=\"margin-top:0\">From Conversation to <span class=\"g-blue\">Working System<\/span><\/h2>\r\n      <p style=\"color:var(--dark-text);margin:14px auto 0;text-align:center\">Four clear steps designed to move fast without cutting corners. Real progress in weeks, not months.<\/p>\r\n    <\/div>\r\n    <div class=\"process-steps\">\r\n      <div class=\"process-line\"><\/div>\r\n      <div class=\"pstep sr sd1\"><div class=\"pstep-n\">01<\/div><h4>Understand Your Business<\/h4><p>Deep-dive into your workflows, data landscape, pain points, and the outcomes you care about. No templated discovery, no assumptions.<\/p><\/div>\r\n      <div class=\"pstep sr sd2\"><div class=\"pstep-n\">02<\/div><h4>Identify Opportunities<\/h4><p>Map your highest-ROI AI and data opportunities. Build a prioritized roadmap \u2014 quick wins first, solid architecture underneath.<\/p><\/div>\r\n      <div class=\"pstep sr sd3\"><div class=\"pstep-n\">03<\/div><h4>Build the Solution<\/h4><p>Agile development with bi-weekly demos. Every sprint delivers something you can test with real users on real data.<\/p><\/div>\r\n      <div class=\"pstep sr sd4\"><div class=\"pstep-n\">04<\/div><h4>Improve & Optimize<\/h4><p>Launch is the beginning, not the end. We monitor, gather feedback, and continuously improve as your business grows.<\/p><\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 TRUST BAND \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<div id=\"trust-band\">\r\n  <div class=\"wrap\">\r\n    <div class=\"tb-text sr\">We are currently working with <strong>growing businesses<\/strong> building real-world AI solutions. Our engagements are hands-on, practical, and focused on measurable outcomes \u2014 not slide decks about what's theoretically possible.<\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CTA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"cta\">\r\n  <div class=\"wrap\">\r\n    <div class=\"cta-inner sr\">\r\n      <div class=\"eyebrow dark-eye\" style=\"justify-content:center;margin-bottom:18px\">Let's Talk<\/div>\r\n      <h2 class=\"d-xl\">Book Your Free<br><span style=\"color:#60a5fa\">Consultation<\/span><\/h2>\r\n      <p>Working with early clients and offering flexible, personalized engagements. Want to find out what AI and data can realistically do for your business \u2014 let's have a real, no-pressure conversation.<\/p>\r\n      <div class=\"cta-chips\">\r\n        <div class=\"cta-chip\">Free 45-minute strategy call<\/div>\r\n        <div class=\"cta-chip\">No commitment required<\/div>\r\n        <div class=\"cta-chip\">Honest data assessment<\/div>\r\n        <div class=\"cta-chip\">Practical roadmap you can act on<\/div>\r\n      <\/div>\r\n      <div class=\"cta-btns\">\r\n        <a href=\"mailto:hello@ccpl.ai\" class=\"btn btn-white btn-lg\">Book Free Consultation <svg class=\"arr\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M3 8h10M9 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/a>\r\n        <a href=\"#faq\" class=\"btn btn-ghost-dk btn-lg\">Read FAQ First<\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 FAQ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"faq\" class=\"sec-light\">\r\n  <div class=\"wrap\">\r\n    <div class=\"sec-head sr\" style=\"text-align:center\">\r\n      <div class=\"eyebrow\" style=\"justify-content:center\">Questions<\/div>\r\n      <h2 class=\"d-lg\" style=\"margin-top:0\">Common Questions, <span class=\"g-blue\">Straight Answers<\/span><\/h2>\r\n    <\/div>\r\n    <div class=\"faq-list sr\">\r\n      <div class=\"faq-i\"><div class=\"faq-q\"><span>What services does CCPL.AI offer?<\/span><div class=\"faq-tog\">+<\/div><\/div><div class=\"faq-a\">We offer Data Analytics and Power BI dashboards, AI\/ML solutions, cloud data engineering on Azure and AWS, business intelligence, process automation, data migration, and AI strategy consulting. Every engagement is scoped around your specific business problem \u2014 no generic templates.<\/div><\/div>\r\n      <div class=\"faq-i\"><div class=\"faq-q\"><span>Do you work with small businesses?<\/span><div class=\"faq-tog\">+<\/div><\/div><div class=\"faq-a\">Absolutely \u2014 that's a big part of who we serve. We work with startups, growing businesses, and teams beginning to take their data seriously. Flexible engagement models, straightforward pricing, no enterprise-scale minimums.<\/div><\/div>\r\n      <div class=\"faq-i\"><div class=\"faq-q\"><span>What tools and technologies do you use?<\/span><div class=\"faq-tog\">+<\/div><\/div><div class=\"faq-a\">We build solutions using Microsoft Azure and Power BI, AWS, Python, SQL, and modern ML frameworks \u2014 chosen based on what's right for your specific situation. If you have infrastructure in place, we'll work with it rather than forcing you to change.<\/div><\/div>\r\n      <div class=\"faq-i\"><div class=\"faq-q\"><span>How do we get started?<\/span><div class=\"faq-tog\">+<\/div><\/div><div class=\"faq-a\">Book a free 45-minute strategy call via the button on this page or email us at hello@ccpl.ai. We'll talk through your business, your data, and where AI can realistically help. No sales pitch \u2014 if there's a good fit we'll talk about what it looks like. If not, we'll say so.<\/div><\/div>\r\n      <div class=\"faq-i\"><div class=\"faq-q\"><span>How long does a typical project take?<\/span><div class=\"faq-tog\">+<\/div><\/div><div class=\"faq-a\">A focused dashboard or automation project typically delivers first results within 3\u20134 weeks. More complex ML or data infrastructure projects run 8\u201312 weeks depending on scope. We give you an honest timeline before anything starts \u2014 not an optimistic estimate designed to win the deal.<\/div><\/div>\r\n      <div class=\"faq-i\"><div class=\"faq-q\"><span>How do you handle data security and privacy?<\/span><div class=\"faq-tog\">+<\/div><\/div><div class=\"faq-a\">Data privacy is non-negotiable. We sign NDAs before any engagement, follow security best practices throughout, and design GDPR-compliant systems by default \u2014 not as an afterthought. Your data stays yours, always.<\/div><\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 FOOTER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<footer>\r\n  <div class=\"wrap\">\r\n    <div class=\"foot-top\">\r\n      <div>\r\n        <div class=\"foot-brand-name\">CCPL<span>.<\/span>AI<\/div>\r\n        <p>We help businesses analyze data, automate workflows, and make smarter decisions with practical AI solutions built for the real world.<\/p>\r\n        <div class=\"foot-contact\">\r\n          <a href=\"mailto:hello@ccpl.ai\">\u2709 hello@ccpl.ai<\/a>\r\n          <a href=\"#\">\ud83d\udccd Remote-first \u00b7 Available globally<\/a>\r\n        <\/div>\r\n        <div class=\"foot-chips\">\r\n          <span class=\"foot-chip\">Azure<\/span><span class=\"foot-chip\">Power BI<\/span><span class=\"foot-chip\">AWS<\/span><span class=\"foot-chip\">Python<\/span><span class=\"foot-chip\">ML\/AI<\/span><span class=\"foot-chip\">SQL<\/span>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"foot-col\"><h5>Services<\/h5><ul><li><a href=\"#services\">AI Automation<\/a><\/li><li><a href=\"#services\">Data Analytics<\/a><\/li><li><a href=\"#services\">Power BI Dashboards<\/a><\/li><li><a href=\"#services\">Machine Learning<\/a><\/li><li><a href=\"#services\">Cloud Engineering<\/a><\/li><li><a href=\"#services\">AI Strategy<\/a><\/li><\/ul><\/div>\r\n      <div class=\"foot-col\"><h5>Company<\/h5><ul><li><a href=\"#case-studies\">Case Studies<\/a><\/li><li><a href=\"#process\">How We Work<\/a><\/li><li><a href=\"#partners\">Technologies<\/a><\/li><li><a href=\"#faq\">FAQ<\/a><\/li><li><a href=\"#cta\">Book Consultation<\/a><\/li><li><a href=\"mailto:hello@ccpl.ai\">Contact Us<\/a><\/li><\/ul><\/div>\r\n      <div class=\"foot-col\">\r\n        <h5>Connect<\/h5>\r\n        <div class=\"foot-socials\" style=\"margin-bottom:20px\">\r\n          <a href=\"#\" class=\"soc-btn\">in<\/a>\r\n          <a href=\"#\" class=\"soc-btn\">\ud835\udd4f<\/a>\r\n          <a href=\"mailto:hello@ccpl.ai\" class=\"soc-btn\">\u2709<\/a>\r\n        <\/div>\r\n        <h5 style=\"margin-top:20px\">Standards<\/h5>\r\n        <div style=\"display:flex;flex-direction:column;gap:9px;margin-top:4px\">\r\n          <div style=\"font-size:13px;display:flex;align-items:center;gap:9px;color:var(--dark-text)\"><span style=\"color:#34d399;font-weight:800\">\u2713<\/span> GDPR Compliant<\/div>\r\n          <div style=\"font-size:13px;display:flex;align-items:center;gap:9px;color:var(--dark-text)\"><span style=\"color:#34d399;font-weight:800\">\u2713<\/span> NDA Available Day One<\/div>\r\n          <div style=\"font-size:13px;display:flex;align-items:center;gap:9px;color:var(--dark-text)\"><span style=\"color:#34d399;font-weight:800\">\u2713<\/span> Data Privacy First<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"foot-bottom\">\r\n      <p>\u00a9 2026 CCPL.AI. All rights reserved. Building practical AI solutions for forward-thinking businesses.<\/p>\r\n      <div class=\"foot-socials\">\r\n        <a href=\"#\" class=\"soc-btn\" onclick=\"window.scrollTo({top:0,behavior:'smooth'});return false\" title=\"Back to top\">\u2191<\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/footer>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 SCRIPTS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\r\n<script>\r\n\/* \u2500\u2500 NAV \u2500\u2500 *\/\r\nwindow.addEventListener('scroll',()=>{document.getElementById('nav').classList.toggle('scrolled',window.scrollY>40)});\r\n\r\n\/* \u2500\u2500 SCROLL REVEAL \u2500\u2500 *\/\r\nconst srObs=new IntersectionObserver(entries=>{entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('vis');srObs.unobserve(e.target);}});},{threshold:0.07,rootMargin:'0px 0px -28px 0px'});\r\ndocument.querySelectorAll('.sr').forEach(el=>srObs.observe(el));\r\n\r\n\/* \u2500\u2500 COUNTER ANIMATION \u2500\u2500 *\/\r\nfunction animNum(el){\r\n  const tgt=parseFloat(el.dataset.count),sfx=el.dataset.suffix||'',dec=el.dataset.decimal==='true';\r\n  const dur=2200,t0=performance.now();\r\n  (function tick(now){\r\n    const p=Math.min((now-t0)\/dur,1),e=1-Math.pow(1-p,4);\r\n    el.textContent=(dec?(tgt*e).toFixed(1):Math.round(tgt*e))+sfx;\r\n    if(p<1)requestAnimationFrame(tick);\r\n  })(performance.now());\r\n}\r\nconst numObs=new IntersectionObserver(entries=>{entries.forEach(e=>{if(e.isIntersecting){animNum(e.target);numObs.unobserve(e.target);}});},{threshold:0.4});\r\ndocument.querySelectorAll('[data-count]').forEach(el=>numObs.observe(el));\r\n\r\n\/* \u2500\u2500 HERO KPI COUNTERS \u2500\u2500 *\/\r\nfunction heroKPI(id,from,to,sfx,delay,decimal){\r\n  setTimeout(()=>{\r\n    const el=document.getElementById(id);if(!el)return;\r\n    const dur=2000,t0=performance.now();\r\n    (function tick(now){\r\n      const p=Math.min((now-t0)\/dur,1),e=1-Math.pow(1-p,3);\r\n      const v=from+(to-from)*e;\r\n      el.textContent=(decimal?v.toFixed(1):Math.round(v))+sfx;\r\n      if(p<1)requestAnimationFrame(tick);\r\n    })(performance.now());\r\n  },delay);\r\n}\r\nwindow.addEventListener('load',()=>{\r\n  heroKPI('kpi1',0,1240,'K+',600,false);\r\n  heroKPI('kpi2',0,68,'%',800,false);\r\n  heroKPI('kpi3',0,124,'K',1000,false);\r\n});\r\n\r\n\/* \u2500\u2500 CHART.JS DEFAULTS FOR DARK \u2500\u2500 *\/\r\nconst BLUE='#3b82f6',INDIGO='#818cf8',TEAL='#2dd4bf',VIOLET='#a78bfa',GREEN='#34d399';\r\nconst GRID_D='rgba(255,255,255,0.06)';\r\nconst GRID_L='rgba(17,24,39,0.06)';\r\n\r\n\/* Hero sparkline *\/\r\n(function(){\r\n  const c=document.getElementById('heroChart');if(!c)return;\r\n  const ctx=c.getContext('2d');\r\n  const g=ctx.createLinearGradient(0,0,0,80);\r\n  g.addColorStop(0,'rgba(59,130,246,0.18)');g.addColorStop(1,'rgba(59,130,246,0)');\r\n  new Chart(c,{type:'line',data:{labels:['J','F','M','A','M','J','J','A'],datasets:[{data:[42,65,58,82,76,95,91,118],borderColor:BLUE,backgroundColor:g,borderWidth:2,fill:true,tension:0.45,pointRadius:0}]},options:{responsive:true,plugins:{legend:{display:false},tooltip:{enabled:false}},scales:{x:{display:false},y:{display:false}},animation:{duration:2200}}});\r\n})();\r\n\r\n\/* Revenue line chart \u2014 on dark bg *\/\r\n(function(){\r\n  const c=document.getElementById('lineChart');if(!c)return;\r\n  const ctx=c.getContext('2d');\r\n  const g=ctx.createLinearGradient(0,0,0,180);\r\n  g.addColorStop(0,'rgba(59,130,246,0.2)');g.addColorStop(1,'rgba(59,130,246,0)');\r\n  Chart.defaults.color='rgba(255,255,255,0.35)';\r\n  Chart.defaults.font.family=\"'Manrope', sans-serif\";\r\n  Chart.defaults.font.size=11;\r\n  new Chart(c,{type:'line',data:{\r\n    labels:['Q1','Q2','Q3','Q4','Q1','Q2','Q3','Q4','Q1'],\r\n    datasets:[\r\n      {label:'With AI',data:[42,60,64,82,85,98,108,122,138],borderColor:BLUE,backgroundColor:g,borderWidth:2.5,fill:true,tension:0.4,pointRadius:4,pointBackgroundColor:BLUE,pointBorderColor:'#111827',pointBorderWidth:2},\r\n      {label:'Baseline',data:[42,44,47,50,52,53,55,57,59],borderColor:'rgba(255,255,255,0.2)',borderWidth:1.5,borderDash:[5,4],fill:false,tension:0.4,pointRadius:0}\r\n    ]\r\n  },options:{\r\n    responsive:true,interaction:{mode:'index',intersect:false},\r\n    plugins:{legend:{position:'top',labels:{boxWidth:10,padding:16,color:'rgba(255,255,255,0.5)'}},tooltip:{backgroundColor:'#1e2436',borderColor:'rgba(59,130,246,0.4)',borderWidth:1,padding:12,titleColor:'#fff',bodyColor:'rgba(255,255,255,0.65)'}},\r\n    scales:{x:{grid:{color:GRID_D},border:{display:false},ticks:{color:'rgba(255,255,255,0.3)'}},y:{grid:{color:GRID_D},border:{display:false},ticks:{color:'rgba(255,255,255,0.3)'}}}\r\n  }});\r\n})();\r\n\r\n\/* Bar chart \u2014 on dark bg *\/\r\n(function(){\r\n  const c=document.getElementById('barChart');if(!c)return;\r\n  new Chart(c,{type:'bar',data:{\r\n    labels:['Ops','Finance','Sales','Mktg','Support','Product'],\r\n    datasets:[\r\n      {label:'Automated',data:[78,65,88,72,91,60],backgroundColor:BLUE,borderRadius:5,borderSkipped:false},\r\n      {label:'Manual',data:[22,35,12,28,9,40],backgroundColor:'rgba(255,255,255,0.1)',borderRadius:5,borderSkipped:false}\r\n    ]\r\n  },options:{\r\n    responsive:true,\r\n    plugins:{legend:{position:'top',labels:{boxWidth:10,padding:16,color:'rgba(255,255,255,0.5)'}},tooltip:{backgroundColor:'#1e2436',borderColor:'rgba(59,130,246,0.4)',borderWidth:1,padding:12,titleColor:'#fff',bodyColor:'rgba(255,255,255,0.65)'}},\r\n    scales:{x:{stacked:true,grid:{display:false},border:{display:false},ticks:{color:'rgba(255,255,255,0.3)'}},y:{stacked:true,grid:{color:GRID_D},border:{display:false},ticks:{color:'rgba(255,255,255,0.3)'}}}\r\n  }});\r\n})();\r\n\r\n\/* Doughnut \u2014 on dark bg *\/\r\n(function(){\r\n  const c=document.getElementById('doughnutChart');if(!c)return;\r\n  const DL=['Data Ingestion','Reporting','Communication','Manual Entry'];\r\n  const DC=[BLUE,INDIGO,TEAL,VIOLET];\r\n  const DV=[94,87,76,62];\r\n  new Chart(c,{type:'doughnut',data:{labels:DL,datasets:[{data:DV,backgroundColor:DC,borderColor:'#111827',borderWidth:3,hoverOffset:8}]},options:{responsive:false,cutout:'72%',plugins:{legend:{display:false},tooltip:{backgroundColor:'#1e2436',borderColor:'rgba(59,130,246,0.4)',borderWidth:1,padding:12}},animation:{duration:2000}}});\r\n  const leg=document.getElementById('donut-legend');\r\n  if(leg)DL.forEach((l,i)=>{\r\n    leg.innerHTML+=`<div style=\"display:flex;align-items:center;gap:10px\"><div style=\"width:10px;height:10px;border-radius:3px;background:${DC[i]};flex-shrink:0\"><\/div><div><div style=\"font-size:12px;font-weight:600;color:rgba(255,255,255,0.8)\">${l}<\/div><div style=\"font-size:11px;color:rgba(255,255,255,0.3);font-family:var(--font-mono)\">${DV[i]}% automated<\/div><\/div><\/div>`;\r\n  });\r\n})();\r\n\r\n\/* Neural canvas *\/\r\n(function(){\r\n  const NC=document.getElementById('neuralCanvas');if(!NC)return;\r\n  const nc=NC.getContext('2d');\r\n  NC.width=NC.offsetWidth||380;NC.height=NC.offsetHeight||200;\r\n  const W=NC.width,H=NC.height;\r\n  const layers=[4,6,6,4];\r\n  const nodePos=[];\r\n  const lx=layers.map((_,i)=>(W\/(layers.length+1))*(i+1));\r\n  layers.forEach((cnt,li)=>{\r\n    const ln=[];\r\n    for(let ni=0;ni<cnt;ni++)ln.push({x:lx[li],y:(H\/(cnt+1))*(ni+1),r:5,g:Math.random(),gd:Math.random()>.5?1:-1,gs:.015+Math.random()*.02,active:false,at:0});\r\n    nodePos.push(ln);\r\n  });\r\n  let sigs=[];\r\n  setInterval(()=>{\r\n    const li=Math.floor(Math.random()*(layers.length-1));\r\n    const a=Math.floor(Math.random()*nodePos[li].length);\r\n    const b=Math.floor(Math.random()*nodePos[li+1].length);\r\n    sigs.push({x1:nodePos[li][a].x,y1:nodePos[li][a].y,x2:nodePos[li+1][b].x,y2:nodePos[li+1][b].y,t:0,c:[BLUE,INDIGO,TEAL][Math.floor(Math.random()*3)],dn:[li+1,b]});\r\n  },300);\r\n  (function draw(){\r\n    nc.clearRect(0,0,W,H);\r\n    for(let li=0;li<layers.length-1;li++)nodePos[li].forEach(s=>nodePos[li+1].forEach(d=>{nc.beginPath();nc.moveTo(s.x,s.y);nc.lineTo(d.x,d.y);nc.strokeStyle='rgba(59,130,246,0.07)';nc.lineWidth=.8;nc.stroke();}));\r\n    sigs=sigs.filter(s=>s.t<1);\r\n    sigs.forEach(s=>{\r\n      s.t+=.022;\r\n      const x=s.x1+(s.x2-s.x1)*s.t,y=s.y1+(s.y2-s.y1)*s.t;\r\n      nc.beginPath();nc.moveTo(s.x1+(s.x2-s.x1)*Math.max(0,s.t-.2),s.y1+(s.y2-s.y1)*Math.max(0,s.t-.2));nc.lineTo(x,y);\r\n      nc.strokeStyle=s.c;nc.globalAlpha=.75*(1-s.t);nc.lineWidth=1.8;nc.stroke();nc.globalAlpha=1;\r\n      nc.beginPath();nc.arc(x,y,2.5,0,Math.PI*2);nc.fillStyle=s.c;nc.shadowColor=s.c;nc.shadowBlur=10;nc.fill();nc.shadowBlur=0;\r\n      if(s.t>.85){const[dl,dn]=s.dn;nodePos[dl][dn].active=true;nodePos[dl][dn].at=18;}\r\n    });\r\n    nodePos.forEach(layer=>layer.forEach(n=>{\r\n      n.g+=n.gd*n.gs;if(n.g>1||n.g<0)n.gd*=-1;\r\n      if(n.at>0)n.at--;else n.active=false;\r\n      nc.beginPath();nc.arc(n.x,n.y,n.r,0,Math.PI*2);\r\n      nc.fillStyle=n.active?GREEN:BLUE;nc.globalAlpha=n.active?1:.3+n.g*.35;\r\n      nc.shadowColor=n.active?GREEN:BLUE;nc.shadowBlur=n.active?16:7;nc.fill();nc.shadowBlur=0;nc.globalAlpha=1;\r\n    }));\r\n    requestAnimationFrame(draw);\r\n  })();\r\n})();\r\n\r\n\/* \u2500\u2500 CASE STUDIES SLIDER \u2500\u2500 *\/\r\n(function(){\r\n  const track=document.getElementById('cs-track');\r\n  const dotsEl=document.getElementById('cs-dots');\r\n  const btnP=document.getElementById('cs-prev');\r\n  const btnN=document.getElementById('cs-next');\r\n  if(!track)return;\r\n  const slides=Array.from(track.querySelectorAll('.cs-slide'));\r\n  let cur=0,pv=3,auto;\r\n\r\n  function getPV(){if(window.innerWidth<=768)return 1;if(window.innerWidth<=1100)return 2;return 3;}\r\n  function maxI(){return Math.max(0,slides.length-pv);}\r\n\r\n  function buildDots(){\r\n    dotsEl.innerHTML='';\r\n    for(let i=0;i<=maxI();i++){\r\n      const d=document.createElement('button');\r\n      d.className='cs-dot'+(i===cur?' on':'');\r\n      d.onclick=()=>go(i);\r\n      dotsEl.appendChild(d);\r\n    }\r\n  }\r\n  function syncDots(){dotsEl.querySelectorAll('.cs-dot').forEach((d,i)=>d.classList.toggle('on',i===cur));}\r\n\r\n  function go(idx){\r\n    cur=Math.max(0,Math.min(idx,maxI()));\r\n    const gap=22;\r\n    const sw=slides[0].offsetWidth+gap;\r\n    track.style.transform=`translateX(-${cur*sw}px)`;\r\n    syncDots();\r\n    btnP.disabled=cur===0;\r\n    btnN.disabled=cur>=maxI();\r\n  }\r\n\r\n  function init(){\r\n    pv=getPV();\r\n    const gap=22,vp=track.parentElement,vpW=vp.offsetWidth;\r\n    const sw=(vpW-gap*(pv-1))\/pv;\r\n    slides.forEach(s=>s.style.width=sw+'px');\r\n    if(cur>maxI())cur=maxI();\r\n    buildDots();go(cur);\r\n  }\r\n\r\n  btnP.onclick=()=>go(cur-1);\r\n  btnN.onclick=()=>go(cur+1);\r\n  init();window.addEventListener('resize',init);\r\n\r\n  \/\/ Auto-play\r\n  function startAuto(){auto=setInterval(()=>{cur<maxI()?go(cur+1):go(0);},5800);}\r\n  function stopAuto(){clearInterval(auto);}\r\n  startAuto();\r\n  track.addEventListener('mouseenter',stopAuto);\r\n  track.addEventListener('mouseleave',startAuto);\r\n\r\n  \/\/ Drag\/swipe\r\n  let sX=0,drag=false;\r\n  track.addEventListener('mousedown',e=>{sX=e.clientX;drag=true;stopAuto();});\r\n  track.addEventListener('touchstart',e=>{sX=e.touches[0].clientX;drag=true;stopAuto();},{passive:true});\r\n  document.addEventListener('mouseup',e=>{if(!drag)return;drag=false;const dx=e.clientX-sX;if(dx<-45)go(cur+1);else if(dx>45)go(cur-1);startAuto();});\r\n  document.addEventListener('touchend',e=>{if(!drag)return;drag=false;const dx=e.changedTouches[0].clientX-sX;if(dx<-45)go(cur+1);else if(dx>45)go(cur-1);startAuto();});\r\n})();\r\n\r\n\/* \u2500\u2500 FAQ \u2500\u2500 *\/\r\ndocument.querySelectorAll('.faq-i').forEach(item=>{\r\n  item.querySelector('.faq-q').addEventListener('click',()=>{\r\n    const isOpen=item.classList.contains('open');\r\n    document.querySelectorAll('.faq-i.open').forEach(el=>el.classList.remove('open'));\r\n    if(!isOpen)item.classList.add('open');\r\n  });\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>CCPL.AI \u2014 AI &#038; Data Analytics Solutions CCPL.AI Services Case Studies Insights Why Us Process FAQ Talk to an Expert Book Free Call \u2726 AI &#038; Data Solutions for Growing Businesses Transform YourBusiness with AI &#038; Data We help businesses analyze data, automate workflows, and build scalable AI solutions using Power BI and cloud platforms [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-84","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/solidwiki.com\/index.php\/wp-json\/wp\/v2\/pages\/84","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidwiki.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/solidwiki.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/solidwiki.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidwiki.com\/index.php\/wp-json\/wp\/v2\/comments?post=84"}],"version-history":[{"count":28,"href":"https:\/\/solidwiki.com\/index.php\/wp-json\/wp\/v2\/pages\/84\/revisions"}],"predecessor-version":[{"id":119,"href":"https:\/\/solidwiki.com\/index.php\/wp-json\/wp\/v2\/pages\/84\/revisions\/119"}],"wp:attachment":[{"href":"https:\/\/solidwiki.com\/index.php\/wp-json\/wp\/v2\/media?parent=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}