{"id":7,"date":"2026-07-23T13:08:59","date_gmt":"2026-07-23T13:08:59","guid":{"rendered":"https:\/\/test.kdlink.dev\/?page_id=7"},"modified":"2026-07-29T14:05:47","modified_gmt":"2026-07-29T14:05:47","slug":"elementor-7","status":"publish","type":"page","link":"https:\/\/test.kdlink.dev\/?page_id=7","title":{"rendered":"Elementor #7"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"7\" class=\"elementor elementor-7\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c5ce9e8 e-con-full e-flex e-con e-parent\" data-id=\"c5ce9e8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-006ec34 elementor-widget elementor-widget-html\" data-id=\"006ec34\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     KL PORTFOLIO \u2014 combined page (v10)\r\n     Hero (always animated) + Motion toggle (default OFF) + EN\/AR.\r\n     Paste as ONE full-width Elementor \"HTML\" widget.\r\n     Frames:      https:\/\/test.kdlink.dev\/wp-content\/uploads\/kl-hero\/frames | frames-m\r\n     Screenshots: https:\/\/test.kdlink.dev\/wp-content\/uploads\/kl-hero\/shots\/\r\n     ============================================================ -->\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<div class=\"klx\" id=\"klx\" data-anim=\"off\" data-lang=\"en\" dir=\"ltr\">\r\n\r\n  <div class=\"klx-ctrl\">\r\n    <div class=\"klx-pop\" id=\"klxPop\" hidden>\r\n      <span data-i18n=\"popText\">Want to see this page fully animated? Turn on Motion.<\/span>\r\n      <button class=\"klx-pop-x\" id=\"klxPopX\" aria-label=\"Dismiss\">\u00d7<\/button>\r\n    <\/div>\r\n    <button class=\"klx-toggle\" id=\"klxMotion\" type=\"button\" aria-pressed=\"false\">\r\n      <span class=\"klx-dot\"><\/span><span data-i18n=\"motionLabel\">Motion<\/span>\r\n    <\/button>\r\n    <button class=\"klx-toggle\" id=\"klxLang\" type=\"button\">\u0639\u0631\u0628\u064a<\/button>\r\n  <\/div>\r\n\r\n  <!-- HERO -->\r\n  <section class=\"klx-stage\" id=\"klxStage\">\r\n    <div class=\"klx-pin\">\r\n      <canvas class=\"klx-canvas\" id=\"klxCanvas\"><\/canvas>\r\n      <span class=\"klx-load\" id=\"klxLoad\"><\/span>\r\n      <div class=\"klx-hero\">\r\n        <p class=\"klx-kick\" data-i18n=\"heroKick\">Web developer &amp; online store specialist \u2014 Dubai<\/p>\r\n        <h1 class=\"klx-title\" data-i18n=\"heroTitle\">Online stores that actually <em>sell<\/em>.<\/h1>\r\n        <p class=\"klx-sub\" data-i18n=\"heroSub\">I build online stores and business websites, set up their email, keep them running, move them to faster hosting, and fix them when they get hacked.<\/p>\r\n        <p class=\"klx-cue\" data-i18n=\"scroll\">Scroll<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <div class=\"klp\">\r\n\r\n    <section class=\"klp-words\" id=\"klpWords\">\r\n      <div class=\"klp-words-pin\">\r\n        <p class=\"klp-para\" id=\"klpPara\" data-i18n-html=\"para\">I don't just build websites. I set up the email so it reaches the inbox, keep the site fast and online, move it to better hosting when it's slow \u2014 and clean it up when it gets hacked.<\/p>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <section class=\"klp-deck\" id=\"klpDeck\">\r\n      <div class=\"klp-deck-pin\">\r\n        <p class=\"klp-eyebrow klp-deck-label\" data-i18n=\"deckLabel\">My work \u2014 click any to open it<\/p>\r\n        <div class=\"klp-stack\" id=\"klpStack\"><\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <section class=\"klp-sec klp-sec--line\">\r\n      <div class=\"klp-stats\" id=\"klpStats\"><\/div>\r\n      <div class=\"klp-head\" style=\"margin-top:clamp(48px,8vh,88px)\">\r\n        <p class=\"klp-eyebrow\" data-i18n=\"dirKick\">Everything I look after<\/p>\r\n        <h2 class=\"klp-h2\" data-i18n=\"dirTitle\">Sites I build, host and look after.<\/h2>\r\n      <\/div>\r\n      <div class=\"klp-legend\" id=\"klpLegend\"><\/div>\r\n      <div class=\"klp-dir\" id=\"klpDir\"><\/div>\r\n    <\/section>\r\n\r\n    <section class=\"klp-sec klp-sec--line\">\r\n      <div class=\"klp-head\">\r\n        <p class=\"klp-eyebrow\" data-i18n=\"doKick\">What I can do for you<\/p>\r\n        <h2 class=\"klp-h2\" data-i18n=\"doTitle\">Everything your site needs, from one person.<\/h2>\r\n      <\/div>\r\n      <div class=\"klp-layers\" id=\"klpLayers\"><\/div>\r\n    <\/section>\r\n\r\n    <section class=\"klp-sec klp-sec--line\">\r\n      <div class=\"klp-head\">\r\n        <p class=\"klp-eyebrow\" data-i18n=\"caseKick\">Recovering hacked sites<\/p>\r\n        <h2 class=\"klp-h2\" data-i18n=\"caseTitle\">When it's already been hacked.<\/h2>\r\n      <\/div>\r\n      <div id=\"klpCases\"><\/div>\r\n      <p class=\"klp-casenote\" data-i18n=\"caseNote\">Two client sites recovered. Their names stay private \u2014 that's part of the job.<\/p>\r\n    <\/section>\r\n\r\n    <section class=\"klp-sec klp-sec--line\">\r\n      <p class=\"klp-eyebrow\" data-i18n=\"contactKick\">Dubai, UAE \u2014 GMT+4<\/p>\r\n      <h2 class=\"klp-cta klp-rise\" data-i18n-html=\"cta\">Need a site built<br>or one <em>fixed?<\/em><\/h2>\r\n      <a class=\"klp-mail klp-rise\" href=\"mailto:hello@kdlink.dev\">hello@kdlink.dev<\/a>\r\n      <div class=\"klp-foot\">\r\n        <span data-i18n=\"footName\">Zeeshan \u2014 web developer &amp; certified ethical hacker (CEH)<\/span>\r\n        <span data-i18n=\"footFree\">Available for freelance work<\/span>\r\n      <\/div>\r\n    <\/section>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"klp-modal\" id=\"klpModal\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Site preview\">\r\n  <div class=\"klp-modal-bd\" data-klp-close><\/div>\r\n  <div class=\"klp-win\">\r\n    <div class=\"klp-chrome\">\r\n      <span class=\"klp-dots\"><i><\/i><i><\/i><i><\/i><\/span>\r\n      <span class=\"klp-url\" id=\"klpUrl\" dir=\"ltr\">https:\/\/<\/span>\r\n      <a class=\"klp-btn klp-btn--go\" id=\"klpGo\" href=\"#\" target=\"_blank\" rel=\"noopener\" data-i18n=\"openLive\">Open live \u2197<\/a>\r\n      <button class=\"klp-btn\" data-klp-close id=\"klpClose\" type=\"button\" data-i18n=\"close\">Close<\/button>\r\n    <\/div>\r\n    <div class=\"klp-frame\">\r\n      <iframe id=\"klpFrame\" title=\"Live site preview\"><\/iframe>\r\n      <div class=\"klp-fallback\" id=\"klpFall\">\r\n        <img id=\"klpFallImg\" alt=\"\">\r\n        <p data-i18n=\"fallText\">This site won't load inside another page \u2014 that's a safety setting doing its job. Open it in a new tab instead.<\/p>\r\n        <a class=\"klp-btn klp-btn--go\" id=\"klpFallGo\" href=\"#\" target=\"_blank\" rel=\"noopener\" data-i18n=\"openSite\">Open live site \u2197<\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n.klx{\r\n  --bg:#05070C; --panel:#0A0F17; --fg:#E8EEF7; --soft:#7C8798;\r\n  --cyan:#4FC3FF; --amber:#FF9A2E; --line:rgba(79,195,255,.18);\r\n  --built:#4FC3FF; --migrated:#8B7BFF; --email:#F0A93B;\r\n  --pad:clamp(20px,5vw,72px);\r\n  --mono:ui-monospace,'SF Mono',Consolas,monospace;\r\n  --ar:'IBM Plex Sans Arabic',sans-serif;\r\n  background:var(--bg);color:var(--fg);position:relative;\r\n}\r\n.klx *{box-sizing:border-box;margin:0;padding:0}\r\n.klx :where(p,h1,h2,h3){margin:0}\r\n.klx[data-lang=\"ar\"]{font-family:var(--ar)}\r\n.klx[data-lang=\"ar\"] :where(.klp-eyebrow,.klx-kick,.klp-card-kick,.klx-cue,.klp-badge,.klp-chip span,.klp-stat span,.klp-legend,.klp-casenote){font-family:var(--ar);text-transform:none;letter-spacing:0}\r\n\r\n.klx-ctrl{position:fixed;top:16px;right:16px;z-index:100000;display:flex;gap:8px;align-items:center}\r\n.klx[dir=\"rtl\"] .klx-ctrl{right:auto;left:16px}\r\n.klx-toggle{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;padding:9px 14px;border-radius:100px;border:1px solid var(--line);background:rgba(8,12,19,.72);backdrop-filter:blur(8px);color:var(--fg);cursor:pointer;transition:border-color .3s,background .3s}\r\n.klx[data-lang=\"ar\"] .klx-toggle{font-family:var(--ar)}\r\n.klx-toggle:hover{border-color:var(--cyan)}\r\n.klx-dot{width:8px;height:8px;border-radius:50%;background:var(--soft);transition:background .3s,box-shadow .3s}\r\n.klx[data-anim=\"on\"] #klxMotion .klx-dot{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}\r\n.klx-pop{position:relative;display:flex;align-items:center;gap:10px;max-width:250px;font-family:var(--mono);font-size:12px;line-height:1.35;color:#0B0703;background:var(--amber);padding:10px 12px;border-radius:12px;box-shadow:0 18px 40px -18px rgba(240,169,59,.7);animation:klxfloat 2.4s ease-in-out infinite}\r\n.klx[data-lang=\"ar\"] .klx-pop{font-family:var(--ar)}\r\n.klx-pop::after{content:\"\";position:absolute;top:-6px;right:26px;width:12px;height:12px;background:var(--amber);transform:rotate(45deg)}\r\n.klx[dir=\"rtl\"] .klx-pop::after{right:auto;left:26px}\r\n.klx-pop-x{border:0;background:rgba(11,7,3,.15);color:#0B0703;width:20px;height:20px;border-radius:50%;cursor:pointer;font-size:14px;line-height:1;flex:none}\r\n@keyframes klxfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}\r\n\r\n.klx-stage{position:relative;height:250vh}\r\n.klx-pin{position:sticky;top:0;height:100svh;overflow:hidden}\r\n.klx-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}\r\n.klx-pin::after{content:\"\";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 40%,rgba(5,7,12,.78) 100%)}\r\n.klx-load{position:absolute;left:0;top:0;height:2px;width:0;background:var(--cyan);z-index:5;transition:width .3s ease,opacity .5s ease .3s}\r\n.klx-load.is-done{opacity:0}\r\n.klx-hero{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--pad) clamp(48px,9vh,96px);pointer-events:none;color:var(--fg)}\r\n.klx-hero>*{pointer-events:auto}\r\n.klx-kick{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:18px}\r\n.klx-title{font-size:clamp(2.2rem,6.4vw,5rem);line-height:1;letter-spacing:-.035em;font-weight:700;max-width:16ch}\r\n.klx-title em{font-style:normal;color:var(--amber)}\r\n.klx-sub{color:var(--soft);max-width:46ch;margin-top:20px;font-size:clamp(.95rem,1.4vw,1.05rem)}\r\n.klx-cue{position:absolute;bottom:18px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}\r\n.klx[dir=\"ltr\"] .klx-cue{left:var(--pad)} .klx[dir=\"rtl\"] .klx-cue{right:var(--pad)}\r\n@media(max-width:760px){.klx-title{font-size:clamp(1.9rem,8.5vw,2.6rem)}}\r\n\r\n.klp{background:var(--bg);position:relative}\r\n.klp-sec{padding:clamp(70px,11vh,130px) var(--pad);position:relative}\r\n.klp-sec--line{border-top:1px solid var(--line)}\r\n.klp-eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}\r\n.klp-h2{font-size:clamp(1.9rem,5vw,3.4rem);line-height:1;letter-spacing:-.035em;font-weight:700;color:var(--fg)}\r\n.klp-head{margin-bottom:clamp(36px,6vh,64px)} .klp-head .klp-eyebrow{margin-bottom:16px}\r\n.klp-p{color:var(--soft);font-size:.97rem;line-height:1.6}\r\n.klp-p+.klp-p{margin-top:14px}\r\n\r\n.klp-words{height:420vh;position:relative}\r\n.klp-words-pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 clamp(24px,8vw,140px)}\r\n.klp-para{font-size:clamp(1.5rem,3.8vw,3rem);line-height:1.4;letter-spacing:-.02em;font-weight:600;max-width:24ch}\r\n.klp-para .w{color:rgba(232,238,247,.05);filter:blur(9px);transition:color .22s linear,filter .22s linear;display:inline}\r\n.klp-para .w.lit{color:var(--fg);filter:blur(0)}\r\n.klp-para .w.amber.lit{color:var(--amber)}\r\n\r\n.klp-deck{position:relative}\r\n.klp-deck-pin{position:sticky;top:0;height:100svh;overflow:hidden}\r\n.klp-deck-label{position:absolute;top:clamp(22px,4.5vh,44px);z-index:100}\r\n.klx[dir=\"ltr\"] .klp-deck-label{left:var(--pad)} .klx[dir=\"rtl\"] .klp-deck-label{right:var(--pad)}\r\n.klp-stack{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}\r\n.klp-card{position:absolute;width:min(1040px,92vw);height:min(60vh,440px);cursor:pointer;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:0 50px 110px -50px rgba(0,0,0,.95);will-change:transform;text-align:start;font:inherit;color:inherit;transition:border-color .4s}\r\n.klp-card:hover{border-color:rgba(79,195,255,.5)}\r\n.klp-card-text{padding:clamp(24px,3.4vw,46px);display:flex;flex-direction:column;justify-content:center;gap:13px}\r\n.klp-badge{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:100px;border:1px solid var(--line);color:var(--soft)}\r\n.klp-badge i{width:7px;height:7px;border-radius:50%}\r\n.klp-card-name{font-size:clamp(1.5rem,3vw,2.4rem);letter-spacing:-.03em;font-weight:700;line-height:1.02;color:var(--fg)}\r\n.klp-card-host{font-family:var(--mono);font-size:12px;color:var(--soft)}\r\n.klp-card-desc{color:var(--soft);font-size:clamp(.9rem,1.4vw,1rem);line-height:1.55;max-width:42ch}\r\n.klp-card-go{margin-top:4px;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-family:var(--mono);font-size:12px;color:#0B0703;background:var(--amber);padding:9px 15px;border-radius:100px;font-weight:500;transition:gap .3s}\r\n.klx[data-lang=\"ar\"] .klp-card-go{font-family:var(--ar);text-transform:none}\r\n.klp-card:hover .klp-card-go{gap:14px}\r\n.klp-card-media{position:relative;overflow:hidden;background:linear-gradient(135deg,#0B1220,#060A11 60%,#0A1826);border-inline-start:1px solid var(--line)}\r\n.klp-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.8,.2,1)}\r\n.klp-card:hover .klp-card-media img{transform:scale(1.05)}\r\n@media(max-width:760px){\r\n  .klp-card{grid-template-columns:1fr;height:min(66vh,540px)}\r\n  .klp-card-media{order:-1;border-inline-start:0;border-bottom:1px solid var(--line);min-height:40%}\r\n  .klp-card-desc{display:none}\r\n}\r\n\r\n.klp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,3vw,40px)}\r\n@media(max-width:640px){.klp-stats{grid-template-columns:repeat(2,1fr);gap:24px}}\r\n.klp-stat b{display:block;font-size:clamp(1.3rem,2.8vw,2rem);font-weight:700;letter-spacing:-.02em;color:var(--fg)}\r\n.klp-stat span{display:block;margin-top:4px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--soft)}\r\n.klx[data-lang=\"ar\"] .klp-stat span{font-family:var(--ar);text-transform:none}\r\n\r\n.klp-legend{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:26px;font-family:var(--mono);font-size:12px;color:var(--soft)}\r\n.klx[data-lang=\"ar\"] .klp-legend{font-family:var(--ar)}\r\n.klp-legend span{display:inline-flex;align-items:center;gap:8px}\r\n.klp-legend i{width:9px;height:9px;border-radius:50%}\r\n.klp-dir{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}\r\n.klp-chip{display:flex;align-items:center;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--fg);text-decoration:none;transition:border-color .3s,transform .3s;cursor:pointer}\r\n.klp-chip:hover{border-color:rgba(79,195,255,.5);transform:translateY(-2px)}\r\n.klp-chip i{width:8px;height:8px;border-radius:50%;flex:none}\r\n.klp-chip span{font-family:var(--mono);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\r\n\r\n.klp-layers{display:grid;gap:0}\r\n.klp-layer{display:grid;grid-template-columns:64px minmax(0,240px) minmax(0,1fr);gap:clamp(14px,3vw,44px);align-items:start;padding:clamp(22px,3.4vh,34px) 0;border-top:1px solid var(--line);position:relative;transition:padding-inline-start .45s cubic-bezier(.2,.8,.2,1)}\r\n.klp-layer:last-child{border-bottom:1px solid var(--line)}\r\n.klp-layer::before{content:\"\";position:absolute;inset-inline-start:0;top:-1px;height:1px;width:0;background:var(--cyan);box-shadow:0 0 12px var(--cyan);transition:width .6s cubic-bezier(.2,.8,.2,1)}\r\n.klp-layer:hover::before{width:100%}\r\n.klp-layer:hover{padding-inline-start:12px}\r\n.klp-num{font-family:var(--mono);font-size:12px;color:var(--cyan);letter-spacing:.1em;padding-top:6px}\r\n.klp-layer h3{font-size:clamp(1.2rem,2.4vw,1.7rem);letter-spacing:-.02em;font-weight:600;color:var(--fg)}\r\n.klp-layer p{color:var(--soft);font-size:.95rem;line-height:1.6;max-width:58ch}\r\n@media(max-width:820px){.klp-layer{grid-template-columns:44px 1fr;gap:12px}.klp-layer p{grid-column:2}}\r\n\r\n.klp-case{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);border:1px solid var(--line);border-inline-start:2px solid var(--amber);border-radius:14px;padding:clamp(24px,4vw,44px);background:var(--panel)}\r\n.klp-case+.klp-case{margin-top:18px}\r\n@media(max-width:760px){.klp-case{grid-template-columns:1fr}}\r\n.klp-case-t{font-size:clamp(1.25rem,2.6vw,1.9rem);letter-spacing:-.025em;font-weight:600;margin-bottom:18px;color:var(--fg);line-height:1.15}\r\n.klp-log{display:flex;flex-direction:column;gap:8px;font-family:var(--mono);font-size:12px;color:var(--soft)}\r\n.klx[data-lang=\"ar\"] .klp-log{font-family:var(--ar)}\r\n.klp-log b{color:var(--fg);font-weight:400}.klp-log i{color:var(--amber);font-style:normal}.klp-log u{color:var(--cyan);text-decoration:none}\r\n.klp-casenote{margin-top:20px;font-family:var(--mono);font-size:11.5px;color:var(--soft)}\r\n\r\n.klp-cta{font-size:clamp(2.4rem,9vw,6.5rem);line-height:.94;letter-spacing:-.04em;font-weight:700;color:var(--fg)}\r\n.klp-cta em{font-style:normal;color:var(--amber)}\r\n.klp-mail{display:inline-block;margin-top:clamp(28px,5vh,52px);font-family:var(--mono);font-size:clamp(.95rem,2vw,1.2rem);color:var(--cyan);text-decoration:none;padding-bottom:6px;border-bottom:1px solid var(--line);transition:border-color .3s,color .3s}\r\n.klp-mail:hover{border-color:var(--cyan);color:var(--fg)}\r\n.klp-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(50px,9vh,100px);padding-top:20px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11.5px;color:var(--soft)}\r\n.klx[data-lang=\"ar\"] .klp-foot{font-family:var(--ar)}\r\n\r\n.klp-modal{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:clamp(10px,2.4vw,32px)}\r\n.klp-modal.is-open{display:flex}\r\n.klp-modal-bd{position:absolute;inset:0;background:rgba(3,5,9,.78);backdrop-filter:blur(8px);opacity:0;transition:opacity .4s}\r\n.klp-modal.is-show .klp-modal-bd{opacity:1}\r\n.klp-win{position:relative;width:min(1180px,100%);height:min(88svh,900px);background:#080C13;border:1px solid rgba(79,195,255,.28);border-radius:14px;overflow:hidden;box-shadow:0 60px 140px -50px rgba(79,195,255,.35);opacity:0;transform:perspective(1600px) rotateY(-13deg) scale(.88) translateY(28px);transition:opacity .5s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}\r\n.klp-modal.is-show .klp-win{opacity:1;transform:perspective(1600px) rotateY(0) scale(1) translateY(0)}\r\n.klp-chrome{display:flex;align-items:center;gap:12px;padding:11px 13px;border-bottom:1px solid rgba(79,195,255,.18);background:#05070C}\r\n.klp-dots{display:flex;gap:6px}.klp-dots i{width:9px;height:9px;border-radius:50%;background:rgba(124,135,152,.45)}\r\n.klp-url{flex:1;font-family:ui-monospace,Consolas,monospace;font-size:12px;color:#7C8798;background:#080C13;border:1px solid rgba(79,195,255,.18);border-radius:100px;padding:6px 14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\r\n.klp-btn{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;padding:8px 13px;border-radius:100px;border:1px solid rgba(79,195,255,.28);background:transparent;color:#E8EEF7;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}\r\n.klx[data-lang=\"ar\"] .klp-btn{font-family:var(--ar)}\r\n.klp-btn:hover{background:#E8EEF7;color:#05070C;border-color:#E8EEF7}\r\n.klp-btn--go{background:#FF9A2E;color:#0B0703;border-color:#FF9A2E}\r\n.klp-btn--go:hover{background:#E8EEF7;border-color:#E8EEF7;color:#05070C}\r\n.klp-frame{position:relative;width:100%;height:calc(100% - 51px);background:#080C13}\r\n.klp-frame iframe{width:100%;height:100%;border:0;display:block;background:#fff}\r\n.klp-fallback{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:30px;background:#080C13}\r\n.klp-fallback.is-on{display:flex}\r\n.klp-fallback p{color:#7C8798;max-width:44ch;font-size:.93rem;line-height:1.6}\r\n.klp-fallback img{width:min(520px,84%);border:1px solid rgba(79,195,255,.18);border-radius:10px}\r\n\r\n.klp-rise{opacity:0;transform:translateY(46px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}\r\n.klp-rise.is-in{opacity:1;transform:none}\r\n\r\n.klx[data-anim=\"off\"] .klp-words{height:auto}\r\n.klx[data-anim=\"off\"] .klp-words-pin{position:static;height:auto;padding:clamp(70px,11vh,120px) var(--pad)}\r\n.klx[data-anim=\"off\"] .klp-para{max-width:36ch;margin:0 auto}\r\n.klx[data-anim=\"off\"] .klp-para .w{color:var(--fg) !important;filter:none !important}\r\n.klx[data-anim=\"off\"] .klp-para .w.amber{color:var(--amber) !important}\r\n.klx[data-anim=\"off\"] .klp-deck{height:auto !important}\r\n.klx[data-anim=\"off\"] .klp-deck-pin{position:static;height:auto;overflow:visible;padding:clamp(70px,11vh,120px) var(--pad)}\r\n.klx[data-anim=\"off\"] .klp-deck-label{position:static;margin-bottom:36px}\r\n.klx[data-anim=\"off\"] .klp-stack{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2.2vw,26px);align-items:stretch}\r\n.klx[data-anim=\"off\"] .klp-card{position:static !important;width:auto;height:auto;transform:none !important}\r\n.klx[data-anim=\"off\"] .klp-rise{opacity:1;transform:none}\r\n@media(max-width:760px){.klx[data-anim=\"off\"] .klp-stack{grid-template-columns:1fr}}\r\n\r\n@media (prefers-reduced-motion: reduce){\r\n  .klx-stage{height:100svh}.klx-load{display:none}\r\n  .klp-words{height:auto}.klp-words-pin{position:static;height:auto;padding:80px var(--pad)}\r\n  .klp-para .w{color:var(--fg);filter:none}.klp-para .w.amber{color:var(--amber)}\r\n  .klp-deck{height:auto !important}.klp-deck-pin{position:static;height:auto}\r\n  .klp-stack{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:24px}\r\n  .klp-card{position:static !important;transform:none !important;width:auto;height:auto}\r\n  .klp-rise{opacity:1;transform:none}.klx-pop{display:none}\r\n}\r\n<\/style>\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js\"><\/script>\r\n<script>\r\n(function(){\r\n'use strict';\r\n\r\nvar BASE  = 'https:\/\/test.kdlink.dev\/wp-content\/uploads\/kl-hero\/';\r\nvar SHOTS = BASE + 'shots\/';\r\nvar CACHE = 'v2';\r\nvar root  = document.getElementById('klx');\r\nvar reduce= window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\nvar CATCOLOR = {built:'#4FC3FF', migrated:'#8B7BFF', email:'#F0A93B'};\r\n\r\nvar STR = {\r\n  en:{\r\n    motionLabel:'Motion', scroll:'Scroll',\r\n    popText:'Want to see this page fully animated? Turn on Motion.',\r\n    heroKick:'Web developer &amp; online store specialist \u2014 Dubai',\r\n    heroTitle:'Online stores that actually <em>sell<\/em>.',\r\n    heroSub:'I build online stores and business websites, set up their email, keep them running, move them to faster hosting, and fix them when they get hacked.',\r\n    para:\"I don't just build websites. I set up the email so it reaches the inbox, keep the site fast and online, move it to better hosting when it's slow \u2014 and clean it up when it gets hacked.\",\r\n    amber:['clean','hacked'],\r\n    deckLabel:'My work \u2014 click any to open it',\r\n    dirKick:'Everything I look after', dirTitle:'Sites I build, host and look after.',\r\n    doKick:'What I can do for you', doTitle:'Everything your site needs, from one person.',\r\n    caseKick:'Recovering hacked sites', caseTitle:\"When it's already been hacked.\",\r\n    caseNote:\"Two client sites recovered. Their names stay private \u2014 that's part of the job.\",\r\n    contactKick:'Dubai, UAE \u2014 GMT+4',\r\n    cta:'Need a site built<br>or one <em>fixed?<\/em>',\r\n    footName:'Zeeshan \u2014 web developer &amp; certified ethical hacker (CEH)',\r\n    footFree:'Available for freelance work',\r\n    openLive:'Open live \u2197', close:'Close', openSite:'Open live site \u2197',\r\n    fallText:\"This site won't load inside another page \u2014 that's a safety setting doing its job. Open it in a new tab instead.\",\r\n    cat:{built:'Built &amp; managed', migrated:'Moved &amp; managed', email:'Email managed'},\r\n    catLegend:{built:'I built and manage these', migrated:'Moved to my hosting, and I manage them', email:'I manage their email'},\r\n    stats:[['WordPress','&amp; WooCommerce expert'],['All-in-one','site \u00b7 hosting \u00b7 email \u00b7 security'],['CEH','certified ethical hacker'],['Dubai','UAE \u2014 GMT+4']],\r\n    layers:[\r\n      ['01','Websites &amp; online stores','I build business websites and online shops that look right, load fast, and work properly on a phone.'],\r\n      ['02','Moving to better hosting','If your site is slow or on the wrong host, I move it over completely \u2014 the site, the email, everything \u2014 with no downtime, and look after it afterwards.'],\r\n      ['03','Payments &amp; checkout','Card payments and buy-now-pay-later options like Tabby and Tamara, set up so checkout actually works and you don\\'t lose sales.'],\r\n      ['04','Business email','Professional email on your own name, working in Outlook, Gmail or your phone, so your messages reach the inbox and not the spam folder.'],\r\n      ['05','Hosting &amp; keeping it online','I host and look after client sites and keep them online. When something goes down I find the real reason and fix it, instead of just restarting and hoping.'],\r\n      ['06','Backups &amp; safe updates','A saved copy of everything and regular backups, so a bad update or a hack can be undone in minutes instead of rebuilding the whole site.'],\r\n      ['07','Animations &amp; special effects','The moving, scrolling effects that make a site feel modern and premium \u2014 like the animation at the top of this page.'],\r\n      ['08','Security &amp; hacked-site recovery','If your site has been hacked, showing pop-ups or sending visitors elsewhere, I clean it, close the hole and give you a plain report. Certified ethical hacker (CEH).']\r\n    ],\r\n    cases:[\r\n      {head:'A hacked site was sending its visitors to strangers.',\r\n       p1:\"People coming from Google were being secretly redirected to another network. Hidden inside the site were tools that didn't show up anywhere in the dashboard, a hidden back door that came back every time the page loaded, and an admin account whose email had been quietly swapped.\",\r\n       p2:'I cleaned it out, closed the hole, and handed it back with a simple written report.',\r\n       log:[['found','4 hidden tools','i'],['found','a hidden back door','i'],['found','admin email swapped','i'],['fixed','back doors removed','u'],['fixed','passwords reset','u'],['done','clean &amp; watched','u']]},\r\n      {head:\"A company's email was being quietly read and redirected.\",\r\n       p1:'Someone had set up secret rules that copied incoming mail to an outside address and forwarded the replies, using a fake look-alike domain to fool staff. The real owner had no idea their conversations were being watched.',\r\n       p2:'I removed the hidden rules, secured every mailbox, took down the fake setup, and locked the accounts back down.',\r\n       log:[['found','secret forwarding rules','i'],['found','fake look-alike domain','i'],['fixed','hidden rules removed','u'],['fixed','all mailboxes secured','u'],['done','safe &amp; monitored','u']]}\r\n    ]\r\n  },\r\n  ar:{\r\n    motionLabel:'\u0627\u0644\u062d\u0631\u0643\u0629', scroll:'\u0645\u0631\u0651\u0631',\r\n    popText:'\u062a\u0631\u064a\u062f \u0631\u0624\u064a\u0629 \u0627\u0644\u0635\u0641\u062d\u0629 \u0628\u0643\u0627\u0645\u0644 \u062d\u0631\u0643\u062a\u0647\u0627\u061f \u0641\u0639\u0651\u0644 \u0627\u0644\u062d\u0631\u0643\u0629.',\r\n    heroKick:'\u0645\u0637\u0648\u0651\u0631 \u0645\u0648\u0627\u0642\u0639 \u0648\u0645\u062a\u062e\u0635\u0651\u0635 \u0645\u062a\u0627\u062c\u0631 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u2014 \u062f\u0628\u064a',\r\n    heroTitle:'\u0645\u062a\u0627\u062c\u0631 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 <em>\u062a\u0628\u064a\u0639<\/em> \u0641\u0639\u0644\u0627\u064b.',\r\n    heroSub:'\u0623\u0628\u0646\u064a \u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0648\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0634\u0631\u0643\u0627\u062a\u060c \u0648\u0623\u064f\u0639\u0650\u062f\u0651 \u0628\u0631\u064a\u062f\u0647\u0627\u060c \u0648\u0623\u064f\u0628\u0642\u064a\u0647\u0627 \u062a\u0639\u0645\u0644\u060c \u0648\u0623\u0646\u0642\u0644\u0647\u0627 \u0625\u0644\u0649 \u0627\u0633\u062a\u0636\u0627\u0641\u0629 \u0623\u0633\u0631\u0639\u060c \u0648\u0623\u064f\u0635\u0644\u062d\u0647\u0627 \u0639\u0646\u062f \u0627\u062e\u062a\u0631\u0627\u0642\u0647\u0627.',\r\n    para:'\u0623\u0646\u0627 \u0644\u0627 \u0623\u0628\u0646\u064a \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0641\u062d\u0633\u0628. \u0623\u064f\u0639\u0650\u062f\u0651 \u0627\u0644\u0628\u0631\u064a\u062f \u0644\u064a\u0635\u0644 \u0625\u0644\u0649 \u0635\u0646\u062f\u0648\u0642 \u0627\u0644\u0648\u0627\u0631\u062f\u060c \u0648\u0623\u064f\u0628\u0642\u064a \u0627\u0644\u0645\u0648\u0642\u0639 \u0633\u0631\u064a\u0639\u064b\u0627 \u0648\u0645\u062a\u0635\u0644\u064b\u0627\u060c \u0648\u0623\u0646\u0642\u0644\u0647 \u0625\u0644\u0649 \u0627\u0633\u062a\u0636\u0627\u0641\u0629 \u0623\u0641\u0636\u0644 \u062d\u064a\u0646 \u064a\u0628\u0637\u0624 \u2014 \u0648\u0623\u064f\u0646\u0638\u0651\u0641\u0647 \u062d\u064a\u0646 \u064a\u064f\u062e\u062a\u0631\u0642.',\r\n    amber:['\u0623\u064f\u0646\u0638\u0651\u0641\u0647','\u064a\u064f\u062e\u062a\u0631\u0642'],\r\n    deckLabel:'\u0623\u0639\u0645\u0627\u0644\u064a \u2014 \u0627\u0646\u0642\u0631 \u0644\u0641\u062a\u062d \u0623\u064a\u064d\u0651 \u0645\u0646\u0647\u0627',\r\n    dirKick:'\u0643\u0644 \u0645\u0627 \u0623\u062a\u0648\u0644\u0651\u0649 \u0625\u062f\u0627\u0631\u062a\u0647', dirTitle:'\u0645\u0648\u0627\u0642\u0639 \u0623\u0628\u0646\u064a\u0647\u0627 \u0648\u0623\u0633\u062a\u0636\u064a\u0641\u0647\u0627 \u0648\u0623\u062a\u0648\u0644\u0651\u0649 \u0625\u062f\u0627\u0631\u062a\u0647\u0627.',\r\n    doKick:'\u0645\u0627 \u064a\u0645\u0643\u0646\u0646\u064a \u0641\u0639\u0644\u0647 \u0644\u0643', doTitle:'\u0643\u0644 \u0645\u0627 \u064a\u062d\u062a\u0627\u062c\u0647 \u0645\u0648\u0642\u0639\u0643\u060c \u0645\u0646 \u0634\u062e\u0635 \u0648\u0627\u062d\u062f.',\r\n    caseKick:'\u0625\u0646\u0642\u0627\u0630 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0645\u062e\u062a\u0631\u0642\u0629', caseTitle:'\u062d\u064a\u0646 \u064a\u0642\u0639 \u0627\u0644\u0627\u062e\u062a\u0631\u0627\u0642 \u0641\u0639\u0644\u0627\u064b.',\r\n    caseNote:'\u0645\u0648\u0642\u0639\u0627\u0646 \u0644\u0639\u0645\u064a\u0644\u064a\u0646 \u062c\u0631\u0649 \u0625\u0646\u0642\u0627\u0630\u0647\u0645\u0627. \u062a\u0628\u0642\u0649 \u0623\u0633\u0645\u0627\u0624\u0647\u0645\u0627 \u062e\u0627\u0635\u0629 \u2014 \u0647\u0630\u0627 \u062c\u0632\u0621 \u0645\u0646 \u0627\u0644\u0639\u0645\u0644.',\r\n    contactKick:'\u062f\u0628\u064a\u060c \u0627\u0644\u0625\u0645\u0627\u0631\u0627\u062a \u2014 \u062a\u0648\u0642\u064a\u062a +4',\r\n    cta:'\u062a\u0631\u064a\u062f \u0645\u0648\u0642\u0639\u064b\u0627 \u062c\u062f\u064a\u062f\u064b\u0627<br>\u0623\u0648 <em>\u0625\u0635\u0644\u0627\u062d<\/em> \u0645\u0648\u0642\u0639\u0643\u061f',\r\n    footName:'\u0632\u064a\u0634\u0627\u0646 \u2014 \u0645\u0637\u0648\u0651\u0631 \u0645\u0648\u0627\u0642\u0639 \u0648\u0645\u062e\u062a\u0631\u0642 \u0623\u062e\u0644\u0627\u0642\u064a \u0645\u0639\u062a\u0645\u062f (CEH)',\r\n    footFree:'\u0645\u062a\u0627\u062d \u0644\u0644\u0639\u0645\u0644 \u0627\u0644\u062d\u0631',\r\n    openLive:'\u0641\u062a\u062d \u0645\u0628\u0627\u0634\u0631 \u2197', close:'\u0625\u063a\u0644\u0627\u0642', openSite:'\u0641\u062a\u062d \u0627\u0644\u0645\u0648\u0642\u0639 \u2197',\r\n    fallText:'\u0644\u0627 \u064a\u064f\u062d\u0645\u0651\u0644 \u0647\u0630\u0627 \u0627\u0644\u0645\u0648\u0642\u0639 \u062f\u0627\u062e\u0644 \u0635\u0641\u062d\u0629 \u0623\u062e\u0631\u0649 \u2014 \u0647\u0630\u0627 \u0625\u0639\u062f\u0627\u062f \u0623\u0645\u0627\u0646 \u064a\u0642\u0648\u0645 \u0628\u0639\u0645\u0644\u0647. \u0627\u0641\u062a\u062d\u0647 \u0641\u064a \u062a\u0628\u0648\u064a\u0628 \u062c\u062f\u064a\u062f \u0628\u062f\u0644\u0627\u064b \u0645\u0646 \u0630\u0644\u0643.',\r\n    cat:{built:'\u0628\u0646\u064a\u062a\u064f\u0647 \u0648\u0623\u064f\u062f\u064a\u0631\u0647', migrated:'\u0646\u0642\u0644\u062a\u064f\u0647 \u0648\u0623\u064f\u062f\u064a\u0631\u0647', email:'\u0623\u064f\u062f\u064a\u0631 \u0628\u0631\u064a\u062f\u0647'},\r\n    catLegend:{built:'\u0628\u0646\u064a\u062a\u064f\u0647\u0627 \u0648\u0623\u064f\u062f\u064a\u0631\u0647\u0627', migrated:'\u0646\u0642\u0644\u062a\u064f\u0647\u0627 \u0625\u0644\u0649 \u0627\u0633\u062a\u0636\u0627\u0641\u062a\u064a \u0648\u0623\u064f\u062f\u064a\u0631\u0647\u0627', email:'\u0623\u064f\u062f\u064a\u0631 \u0628\u0631\u064a\u062f\u0647\u0627'},\r\n    stats:[['\u0648\u0648\u0631\u062f\u0628\u0631\u064a\u0633','\u0648\u062e\u0628\u064a\u0631 \u0648\u0648\u0643\u0648\u0645\u0631\u0633'],['\u062d\u0644 \u0634\u0627\u0645\u0644','\u0645\u0648\u0642\u0639 \u00b7 \u0627\u0633\u062a\u0636\u0627\u0641\u0629 \u00b7 \u0628\u0631\u064a\u062f \u00b7 \u0623\u0645\u0646'],['CEH','\u0645\u062e\u062a\u0631\u0642 \u0623\u062e\u0644\u0627\u0642\u064a \u0645\u0639\u062a\u0645\u062f'],['\u062f\u0628\u064a','\u0627\u0644\u0625\u0645\u0627\u0631\u0627\u062a \u2014 \u062a\u0648\u0642\u064a\u062a +4']],\r\n    layers:[\r\n      ['01','\u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0648\u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629','\u0623\u0628\u0646\u064a \u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0634\u0631\u0643\u0627\u062a \u0648\u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0627\u0644\u062a\u064a \u062a\u0628\u062f\u0648 \u062c\u064a\u062f\u0629\u060c \u0648\u062a\u064f\u062d\u0645\u0651\u0644 \u0628\u0633\u0631\u0639\u0629\u060c \u0648\u062a\u0639\u0645\u0644 \u062c\u064a\u062f\u064b\u0627 \u0639\u0644\u0649 \u0627\u0644\u0647\u0627\u062a\u0641.'],\r\n      ['02','\u0627\u0644\u0646\u0642\u0644 \u0625\u0644\u0649 \u0627\u0633\u062a\u0636\u0627\u0641\u0629 \u0623\u0641\u0636\u0644','\u0625\u0646 \u0643\u0627\u0646 \u0645\u0648\u0642\u0639\u0643 \u0628\u0637\u064a\u0626\u064b\u0627 \u0623\u0648 \u0639\u0644\u0649 \u0627\u0633\u062a\u0636\u0627\u0641\u0629 \u063a\u064a\u0631 \u0645\u0646\u0627\u0633\u0628\u0629\u060c \u0623\u0646\u0642\u0644\u0647 \u0628\u0627\u0644\u0643\u0627\u0645\u0644 \u2014 \u0627\u0644\u0645\u0648\u0642\u0639 \u0648\u0627\u0644\u0628\u0631\u064a\u062f \u0648\u0643\u0644 \u0634\u064a\u0621 \u2014 \u062f\u0648\u0646 \u0623\u064a \u062a\u0648\u0642\u0651\u0641\u060c \u0648\u0623\u062a\u0648\u0644\u0651\u0649 \u0625\u062f\u0627\u0631\u062a\u0647 \u0628\u0639\u062f \u0630\u0644\u0643.'],\r\n      ['03','\u0627\u0644\u062f\u0641\u0639 \u0648\u0625\u062a\u0645\u0627\u0645 \u0627\u0644\u0634\u0631\u0627\u0621','\u0627\u0644\u062f\u0641\u0639 \u0628\u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0648\u062e\u064a\u0627\u0631\u0627\u062a \u0627\u0634\u062a\u0631\u0650 \u0627\u0644\u0622\u0646 \u0648\u0627\u062f\u0641\u0639 \u0644\u0627\u062d\u0642\u064b\u0627 \u0645\u062b\u0644 \u062a\u0627\u0628\u064a \u0648\u062a\u0645\u0627\u0631\u0627\u060c \u0645\u064f\u0639\u062f\u0651\u0629 \u0628\u062d\u064a\u062b \u064a\u0639\u0645\u0644 \u0625\u062a\u0645\u0627\u0645 \u0627\u0644\u0634\u0631\u0627\u0621 \u0641\u0639\u0644\u0627\u064b \u0641\u0644\u0627 \u062a\u062e\u0633\u0631 \u0645\u0628\u064a\u0639\u0627\u062a.'],\r\n      ['04','\u0628\u0631\u064a\u062f \u0627\u0644\u0639\u0645\u0644','\u0628\u0631\u064a\u062f \u0627\u062d\u062a\u0631\u0627\u0641\u064a \u0628\u0627\u0633\u0645\u0643\u060c \u064a\u0639\u0645\u0644 \u0641\u064a \u0623\u0648\u062a\u0644\u0648\u0643 \u0623\u0648 \u062c\u064a\u0645\u064a\u0644 \u0623\u0648 \u0647\u0627\u062a\u0641\u0643\u060c \u0644\u062a\u0635\u0644 \u0631\u0633\u0627\u0626\u0644\u0643 \u0625\u0644\u0649 \u0635\u0646\u062f\u0648\u0642 \u0627\u0644\u0648\u0627\u0631\u062f \u0644\u0627 \u0625\u0644\u0649 \u0627\u0644\u0633\u0628\u0627\u0645.'],\r\n      ['05','\u0627\u0644\u0627\u0633\u062a\u0636\u0627\u0641\u0629 \u0648\u0627\u0644\u0627\u0633\u062a\u0645\u0631\u0627\u0631\u064a\u0629','\u0623\u0633\u062a\u0636\u064a\u0641 \u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0639\u0645\u0644\u0627\u0621 \u0648\u0623\u0639\u062a\u0646\u064a \u0628\u0647\u0627 \u0648\u0623\u064f\u0628\u0642\u064a\u0647\u0627 \u0645\u062a\u0635\u0644\u0629. \u0648\u062d\u064a\u0646 \u064a\u062a\u0639\u0637\u0651\u0644 \u0634\u064a\u0621 \u0623\u062c\u062f \u0627\u0644\u0633\u0628\u0628 \u0627\u0644\u062d\u0642\u064a\u0642\u064a \u0648\u0623\u064f\u0635\u0644\u062d\u0647\u060c \u0628\u062f\u0644 \u0645\u062c\u0631\u062f \u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u062a\u0634\u063a\u064a\u0644 \u0648\u0627\u0644\u0623\u0645\u0644.'],\r\n      ['06','\u0627\u0644\u0646\u0633\u062e \u0627\u0644\u0627\u062d\u062a\u064a\u0627\u0637\u064a \u0648\u0627\u0644\u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0622\u0645\u0646','\u0646\u0633\u062e\u0629 \u0645\u062d\u0641\u0648\u0638\u0629 \u0645\u0646 \u0643\u0644 \u0634\u064a\u0621 \u0648\u0646\u0633\u062e \u0627\u062d\u062a\u064a\u0627\u0637\u064a \u0645\u0646\u062a\u0638\u0645\u060c \u0641\u064a\u0645\u0643\u0646 \u0627\u0644\u062a\u0631\u0627\u062c\u0639 \u0639\u0646 \u062a\u062d\u062f\u064a\u062b \u062e\u0627\u0637\u0626 \u0623\u0648 \u0627\u062e\u062a\u0631\u0627\u0642 \u0641\u064a \u062f\u0642\u0627\u0626\u0642 \u0628\u062f\u0644 \u0625\u0639\u0627\u062f\u0629 \u0628\u0646\u0627\u0621 \u0627\u0644\u0645\u0648\u0642\u0639 \u0643\u0644\u0647.'],\r\n      ['07','\u0627\u0644\u0631\u0633\u0648\u0645 \u0648\u0627\u0644\u0645\u0624\u062b\u0631\u0627\u062a \u0627\u0644\u062e\u0627\u0635\u0629','\u0627\u0644\u0645\u0624\u062b\u0631\u0627\u062a \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 \u0639\u0646\u062f \u0627\u0644\u062a\u0645\u0631\u064a\u0631 \u0627\u0644\u062a\u064a \u062a\u062c\u0639\u0644 \u0627\u0644\u0645\u0648\u0642\u0639 \u064a\u0628\u062f\u0648 \u0639\u0635\u0631\u064a\u064b\u0627 \u0648\u0645\u0645\u064a\u0632\u064b\u0627 \u2014 \u0645\u062b\u0644 \u0627\u0644\u062d\u0631\u0643\u0629 \u0641\u064a \u0623\u0639\u0644\u0649 \u0647\u0630\u0647 \u0627\u0644\u0635\u0641\u062d\u0629.'],\r\n      ['08','\u0627\u0644\u0623\u0645\u0646 \u0648\u0625\u0646\u0642\u0627\u0630 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0645\u062e\u062a\u0631\u0642\u0629','\u0625\u0646 \u0627\u062e\u062a\u064f\u0631\u0642 \u0645\u0648\u0642\u0639\u0643 \u0623\u0648 \u0623\u0638\u0647\u0631 \u0646\u0648\u0627\u0641\u0630 \u0645\u0646\u0628\u062b\u0642\u0629 \u0623\u0648 \u062d\u0648\u0651\u0644 \u0627\u0644\u0632\u0648\u0651\u0627\u0631\u060c \u0623\u064f\u0646\u0638\u0651\u0641\u0647 \u0648\u0623\u064f\u063a\u0644\u0642 \u0627\u0644\u062b\u063a\u0631\u0629 \u0648\u0623\u064f\u0639\u0637\u064a\u0643 \u062a\u0642\u0631\u064a\u0631\u064b\u0627 \u0648\u0627\u0636\u062d\u064b\u0627. \u0645\u062e\u062a\u0631\u0642 \u0623\u062e\u0644\u0627\u0642\u064a \u0645\u0639\u062a\u0645\u062f (CEH).']\r\n    ],\r\n    cases:[\r\n      {head:'\u0645\u0648\u0642\u0639 \u0645\u062e\u062a\u0631\u0642 \u0643\u0627\u0646 \u064a\u064f\u0631\u0633\u0644 \u0632\u0648\u0651\u0627\u0631\u0647 \u0625\u0644\u0649 \u062c\u0647\u0627\u062a \u063a\u0631\u064a\u0628\u0629.',\r\n       p1:'\u0643\u0627\u0646 \u0627\u0644\u0623\u0634\u062e\u0627\u0635 \u0627\u0644\u0642\u0627\u062f\u0645\u0648\u0646 \u0645\u0646 \u062c\u0648\u062c\u0644 \u064a\u064f\u062d\u0648\u064e\u0651\u0644\u0648\u0646 \u0633\u0631\u064b\u0651\u0627 \u0625\u0644\u0649 \u0634\u0628\u0643\u0629 \u0623\u062e\u0631\u0649. \u0648\u0643\u0627\u0646 \u0645\u062e\u0641\u064a\u064b\u0627 \u062f\u0627\u062e\u0644 \u0627\u0644\u0645\u0648\u0642\u0639 \u0623\u062f\u0648\u0627\u062a \u0644\u0627 \u062a\u0638\u0647\u0631 \u0641\u064a \u0644\u0648\u062d\u0629 \u0627\u0644\u062a\u062d\u0643\u0645\u060c \u0648\u00ab\u0628\u0627\u0628 \u062e\u0644\u0641\u064a\u00bb \u064a\u0639\u0648\u062f \u0645\u0639 \u0643\u0644 \u062a\u062d\u0645\u064a\u0644 \u0644\u0644\u0635\u0641\u062d\u0629\u060c \u0648\u062d\u0633\u0627\u0628 \u0645\u062f\u064a\u0631 \u063a\u064f\u064a\u0651\u0631 \u0628\u0631\u064a\u062f\u0647 \u0628\u0647\u062f\u0648\u0621.',\r\n       p2:'\u0646\u0638\u0651\u0641\u062a\u0647 \u0648\u0623\u063a\u0644\u0642\u062a \u0627\u0644\u062b\u063a\u0631\u0629 \u0648\u0623\u0639\u062f\u062a\u0647 \u0645\u0639 \u062a\u0642\u0631\u064a\u0631 \u0645\u0643\u062a\u0648\u0628 \u0628\u0633\u064a\u0637.',\r\n       log:[['\u0648\u064f\u062c\u062f','\u0664 \u0623\u062f\u0648\u0627\u062a \u0645\u062e\u0641\u064a\u0629','i'],['\u0648\u064f\u062c\u062f','\u0628\u0627\u0628 \u062e\u0644\u0641\u064a \u0645\u062e\u0641\u064a','i'],['\u0648\u064f\u062c\u062f','\u0628\u0631\u064a\u062f \u0627\u0644\u0645\u062f\u064a\u0631 \u0645\u064f\u0628\u062f\u0651\u0644','i'],['\u0623\u064f\u0635\u0644\u062d','\u0625\u0632\u0627\u0644\u0629 \u0627\u0644\u0623\u0628\u0648\u0627\u0628 \u0627\u0644\u062e\u0644\u0641\u064a\u0629','u'],['\u0623\u064f\u0635\u0644\u062d','\u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646 \u0643\u0644\u0645\u0627\u062a \u0627\u0644\u0645\u0631\u0648\u0631','u'],['\u062a\u0645','\u0646\u0638\u064a\u0641 \u0648\u0645\u064f\u0631\u0627\u0642\u064e\u0628','u']]},\r\n      {head:'\u0643\u0627\u0646 \u0628\u0631\u064a\u062f \u0634\u0631\u0643\u0629 \u064a\u064f\u0642\u0631\u0623 \u0648\u064a\u064f\u062d\u0648\u064e\u0651\u0644 \u0628\u0647\u062f\u0648\u0621.',\r\n       p1:'\u0643\u0627\u0646 \u0623\u062d\u062f\u0647\u0645 \u0642\u062f \u0623\u0646\u0634\u0623 \u0642\u0648\u0627\u0639\u062f \u0633\u0631\u0651\u064a\u0629 \u062a\u0646\u0633\u062e \u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0648\u0627\u0631\u062f \u0625\u0644\u0649 \u0639\u0646\u0648\u0627\u0646 \u062e\u0627\u0631\u062c\u064a \u0648\u062a\u064f\u062d\u0648\u0651\u0644 \u0627\u0644\u0631\u062f\u0648\u062f\u060c \u0645\u0633\u062a\u062e\u062f\u0645\u064b\u0627 \u0646\u0637\u0627\u0642\u064b\u0627 \u0645\u0632\u064a\u0651\u0641\u064b\u0627 \u0645\u0634\u0627\u0628\u0647\u064b\u0627 \u0644\u062e\u062f\u0627\u0639 \u0627\u0644\u0645\u0648\u0638\u0641\u064a\u0646. \u0648\u0644\u0645 \u064a\u0643\u0646 \u0627\u0644\u0645\u0627\u0644\u0643 \u0627\u0644\u062d\u0642\u064a\u0642\u064a \u064a\u062f\u0631\u064a \u0623\u0646 \u0645\u062d\u0627\u062f\u062b\u0627\u062a\u0647 \u0645\u064f\u0631\u0627\u0642\u064e\u0628\u0629.',\r\n       p2:'\u0623\u0632\u0644\u062a \u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0645\u062e\u0641\u064a\u0629\u060c \u0648\u0623\u0645\u0651\u0646\u062a \u0643\u0644 \u0635\u0646\u0627\u062f\u064a\u0642 \u0627\u0644\u0628\u0631\u064a\u062f\u060c \u0648\u0623\u0632\u0644\u062a \u0627\u0644\u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0645\u0632\u064a\u0651\u0641\u060c \u0648\u0623\u0639\u062f\u062a \u062a\u0623\u0645\u064a\u0646 \u0627\u0644\u062d\u0633\u0627\u0628\u0627\u062a.',\r\n       log:[['\u0648\u064f\u062c\u062f','\u0642\u0648\u0627\u0639\u062f \u062a\u062d\u0648\u064a\u0644 \u0633\u0631\u0651\u064a\u0629','i'],['\u0648\u064f\u062c\u062f','\u0646\u0637\u0627\u0642 \u0645\u0632\u064a\u0651\u0641 \u0645\u0634\u0627\u0628\u0647','i'],['\u0623\u064f\u0635\u0644\u062d','\u0625\u0632\u0627\u0644\u0629 \u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0645\u062e\u0641\u064a\u0629','u'],['\u0623\u064f\u0635\u0644\u062d','\u062a\u0623\u0645\u064a\u0646 \u0643\u0644 \u0627\u0644\u0635\u0646\u0627\u062f\u064a\u0642','u'],['\u062a\u0645','\u0622\u0645\u0646 \u0648\u0645\u064f\u0631\u0627\u0642\u064e\u0628','u']]}\r\n    ]\r\n  }\r\n};\r\n\r\nvar FEATURED = [\r\n  {name:'Lace & Luxe', url:'https:\/\/laceandluxe.ae', img:'laceandluxe.jpg', cat:'built',\r\n   desc:{en:'An online lingerie store I built from scratch. I fixed a checkout that took thirty seconds to load \u2014 now it\\'s under two \u2014 and added a custom slider, product pages and shop layout.',\r\n         ar:'\u0645\u062a\u062c\u0631 \u0645\u0644\u0627\u0628\u0633 \u062f\u0627\u062e\u0644\u064a\u0629 \u0628\u0646\u064a\u062a\u0647 \u0645\u0646 \u0627\u0644\u0635\u0641\u0631. \u0623\u0635\u0644\u062d\u062a \u0633\u0644\u0629 \u0634\u0631\u0627\u0621 \u0643\u0627\u0646\u062a \u062a\u0633\u062a\u063a\u0631\u0642 \u062b\u0644\u0627\u062b\u064a\u0646 \u062b\u0627\u0646\u064a\u0629 \u0644\u0644\u062a\u062d\u0645\u064a\u0644 \u2014 \u0627\u0644\u0622\u0646 \u0623\u0642\u0644 \u0645\u0646 \u062b\u0627\u0646\u064a\u062a\u064a\u0646 \u2014 \u0648\u0623\u0636\u0641\u062a \u0633\u0644\u0627\u064a\u062f\u0631 \u0648\u0635\u0641\u062d\u0627\u062a \u0645\u0646\u062a\u062c\u0627\u062a \u0648\u062a\u062e\u0637\u064a\u0637 \u0645\u062a\u062c\u0631 \u0645\u062e\u0635\u0651\u0635.'}},\r\n  {name:'Black Pearl', url:'https:\/\/blackpearldxb.com', img:'blackpearl.jpg', cat:'built',\r\n   desc:{en:'A jewellery store where customers design their own piece on screen and the final picture is created automatically for the order. I also built the step-by-step checkout and a currency switcher.',\r\n         ar:'\u0645\u062a\u062c\u0631 \u0645\u062c\u0648\u0647\u0631\u0627\u062a \u064a\u0635\u0645\u0651\u0645 \u0641\u064a\u0647 \u0627\u0644\u0639\u0645\u0644\u0627\u0621 \u0642\u0637\u0639\u062a\u0647\u0645 \u0639\u0644\u0649 \u0627\u0644\u0634\u0627\u0634\u0629\u060c \u0648\u062a\u064f\u0646\u0634\u0623 \u0627\u0644\u0635\u0648\u0631\u0629 \u0627\u0644\u0646\u0647\u0627\u0626\u064a\u0629 \u062a\u0644\u0642\u0627\u0626\u064a\u064b\u0627 \u0644\u0644\u0637\u0644\u0628. \u0628\u0646\u064a\u062a\u064f \u0623\u064a\u0636\u064b\u0627 \u062e\u0637\u0648\u0627\u062a \u0627\u0644\u062f\u0641\u0639 \u0648\u0645\u0628\u062f\u0651\u0644 \u0627\u0644\u0639\u0645\u0644\u0627\u062a.'}},\r\n  {name:'ThatShop', url:'https:\/\/thatshop.ae', img:'thatshop.jpg', cat:'built',\r\n   desc:{en:'A custom-printing store where customers design a product from every side, and the print-ready file is made automatically at checkout. Unfinished designs are saved so nobody starts over.',\r\n         ar:'\u0645\u062a\u062c\u0631 \u0637\u0628\u0627\u0639\u0629 \u0645\u062e\u0635\u0651\u0635\u0629 \u064a\u0635\u0645\u0651\u0645 \u0641\u064a\u0647 \u0627\u0644\u0639\u0645\u0644\u0627\u0621 \u0627\u0644\u0645\u0646\u062a\u062c \u0645\u0646 \u0643\u0644 \u062c\u0647\u0629\u060c \u0648\u064a\u064f\u0646\u0634\u0623 \u0645\u0644\u0641 \u0627\u0644\u0637\u0628\u0627\u0639\u0629 \u062a\u0644\u0642\u0627\u0626\u064a\u064b\u0627 \u0639\u0646\u062f \u0627\u0644\u062f\u0641\u0639. \u0648\u062a\u064f\u062d\u0641\u0638 \u0627\u0644\u062a\u0635\u0627\u0645\u064a\u0645 \u063a\u064a\u0631 \u0627\u0644\u0645\u0643\u062a\u0645\u0644\u0629 \u062d\u062a\u0649 \u0644\u0627 \u064a\u0628\u062f\u0623 \u0623\u062d\u062f \u0645\u0646 \u062c\u062f\u064a\u062f.'}},\r\n  {name:'Movability', url:'https:\/\/movability.ae', img:'movability.jpg', cat:'built',\r\n   desc:{en:'A business website I built and still look after \u2014 the design, the hosting, the updates and the support, all from me.',\r\n         ar:'\u0645\u0648\u0642\u0639 \u062a\u062c\u0627\u0631\u064a \u0628\u0646\u064a\u062a\u0647 \u0648\u0645\u0627 \u0632\u0644\u062a \u0623\u0639\u062a\u0646\u064a \u0628\u0647 \u2014 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0648\u0627\u0644\u0627\u0633\u062a\u0636\u0627\u0641\u0629 \u0648\u0627\u0644\u062a\u062d\u062f\u064a\u062b\u0627\u062a \u0648\u0627\u0644\u062f\u0639\u0645\u060c \u0643\u0644\u0647\u0627 \u0645\u0646\u064a.'}},\r\n  {name:'Jenna Skin Lab', url:'https:\/\/jennaskinlab.com', img:'jennaskinlab.jpg', cat:'built',\r\n   desc:{en:'A clinic website I built and keep running \u2014 kept updated, safe and online.',\r\n         ar:'\u0645\u0648\u0642\u0639 \u0639\u064a\u0627\u062f\u0629 \u0628\u0646\u064a\u062a\u0647 \u0648\u0623\u064f\u0628\u0642\u064a\u0647 \u064a\u0639\u0645\u0644 \u2014 \u0645\u064f\u062d\u062f\u0651\u062b \u0648\u0622\u0645\u0646 \u0648\u0645\u062a\u0635\u0644.'}},\r\n  {name:'Kasiyasky', url:'https:\/\/kasiyasky.com', img:'kasiyasky.jpg', cat:'migrated',\r\n   desc:{en:'A property-listing site I moved onto my own hosting with no downtime, and have managed ever since.',\r\n         ar:'\u0645\u0648\u0642\u0639 \u0642\u0648\u0627\u0626\u0645 \u0639\u0642\u0627\u0631\u064a\u0629 \u0646\u0642\u0644\u062a\u0647 \u0625\u0644\u0649 \u0627\u0633\u062a\u0636\u0627\u0641\u062a\u064a \u062f\u0648\u0646 \u062a\u0648\u0642\u0651\u0641\u060c \u0648\u0623\u064f\u062f\u064a\u0631\u0647 \u0645\u0646\u0630 \u0630\u0644\u0643 \u0627\u0644\u062d\u064a\u0646.'}}\r\n];\r\n\r\nvar DIRLIST = [\r\n  {name:'laceandluxe.ae', url:'https:\/\/laceandluxe.ae', cat:'built'},\r\n  {name:'blackpearldxb.com', url:'https:\/\/blackpearldxb.com', cat:'built'},\r\n  {name:'thatshop.ae', url:'https:\/\/thatshop.ae', cat:'built'},\r\n  {name:'movability.ae', url:'https:\/\/movability.ae', cat:'built'},\r\n  {name:'jennaskinlab.com', url:'https:\/\/jennaskinlab.com', cat:'built'},\r\n  {name:'aisglobalconsulting.com', url:'https:\/\/aisglobalconsulting.com', cat:'built'},\r\n  {name:'bioadd-tech.com', url:'https:\/\/bioadd-tech.com', cat:'built'},\r\n  {name:'kodelink.dev', url:'https:\/\/kodelink.dev', cat:'built'},\r\n  {name:'kasiyasky.com', url:'https:\/\/kasiyasky.com', cat:'migrated'},\r\n  {name:'alfalehgroup.ae', url:'http:\/\/alfalehgroup.ae', cat:'migrated'},\r\n  {name:'gardenianursery.ae', url:'https:\/\/gardenianursery.ae', cat:'migrated'},\r\n  {name:'dermalaser.ae', url:'https:\/\/dermalaser.ae', cat:'email'},\r\n  {name:'fazuu.ae', url:'https:\/\/fazuu.ae', cat:'email'},\r\n  {name:'kqtrading.ae', url:'https:\/\/kqtrading.ae', cat:'email'}\r\n];\r\n\r\nvar lang='en', animOn=false;\r\n\r\nfunction fill(k,html){ var e=root.querySelectorAll('[data-i18n=\"'+k+'\"],[data-i18n-html=\"'+k+'\"]'); for(var i=0;i<e.length;i++) e[i].innerHTML=html; }\r\nfunction renderLang(L){\r\n  lang=L; var S=STR[L];\r\n  root.setAttribute('data-lang',L); root.setAttribute('dir', L==='ar'?'rtl':'ltr');\r\n  Object.keys(S).forEach(function(k){ if(['layers','cases','amber','cat','catLegend','stats'].indexOf(k)!==-1) return; fill(k,S[k]); });\r\n  document.getElementById('klxLang').textContent = (L==='ar'?'EN':'\u0639\u0631\u0628\u064a');\r\n  buildStats(); buildLegend(); buildDir(); buildLayers(); buildCases(); buildCards(); wrapWords();\r\n  var ft=document.querySelector('#klpFall p'); if(ft) ft.innerHTML=S.fallText;\r\n  document.getElementById('klpClose').textContent=S.close;\r\n  document.getElementById('klpGo').textContent=S.openLive;\r\n  document.getElementById('klpFallGo').textContent=S.openSite;\r\n  applyMotionState(); observeRise();\r\n}\r\n\r\nfunction buildStats(){ var h=document.getElementById('klpStats'); h.innerHTML=''; STR[lang].stats.forEach(function(s){ var d=document.createElement('div'); d.className='klp-stat'; d.innerHTML='<b>'+s[0]+'<\/b><span>'+s[1]+'<\/span>'; h.appendChild(d); }); }\r\nfunction buildLegend(){ var h=document.getElementById('klpLegend'); h.innerHTML=''; ['built','migrated','email'].forEach(function(c){ var s=document.createElement('span'); s.innerHTML='<i style=\"background:'+CATCOLOR[c]+'\"><\/i>'+STR[lang].catLegend[c]; h.appendChild(s); }); }\r\nfunction buildDir(){ var h=document.getElementById('klpDir'); h.innerHTML=''; DIRLIST.forEach(function(d){ var a=document.createElement('a'); a.className='klp-chip'; a.href=d.url; a.target='_blank'; a.rel='noopener'; a.innerHTML='<i style=\"background:'+CATCOLOR[d.cat]+'\"><\/i><span dir=\"ltr\">'+d.name+'<\/span>'; h.appendChild(a); }); }\r\nfunction buildLayers(){ var h=document.getElementById('klpLayers'); h.innerHTML=''; STR[lang].layers.forEach(function(r,i){ var d=document.createElement('div'); d.className='klp-layer klp-rise'; d.style.transitionDelay=(i*70)+'ms'; d.innerHTML='<span class=\"klp-num\">'+r[0]+'<\/span><h3>'+r[1]+'<\/h3><p>'+r[2]+'<\/p>'; h.appendChild(d); }); }\r\nfunction buildCases(){\r\n  var h=document.getElementById('klpCases'); h.innerHTML='';\r\n  STR[lang].cases.forEach(function(cs){\r\n    var w=document.createElement('div'); w.className='klp-case klp-rise';\r\n    var log='<div class=\"klp-log\">'+cs.log.map(function(r){ return '<span><b>'+r[0]+'<\/b> \u2192 <'+r[2]+'>'+r[1]+'<\/'+r[2]+'><\/span>'; }).join('')+'<\/div>';\r\n    w.innerHTML='<div><h3 class=\"klp-case-t\">'+cs.head+'<\/h3><p class=\"klp-p\">'+cs.p1+'<\/p><p class=\"klp-p\">'+cs.p2+'<\/p><\/div>'+log;\r\n    h.appendChild(w);\r\n  });\r\n}\r\nvar cards=[];\r\nfunction buildCards(){\r\n  var h=document.getElementById('klpStack'); h.innerHTML='';\r\n  FEATURED.forEach(function(s,i){\r\n    var c=document.createElement('button'); c.type='button'; c.className='klp-card'; c.style.zIndex=(i+1);\r\n    c.setAttribute('aria-label',(lang==='ar'?'\u0645\u0639\u0627\u064a\u0646\u0629 ':'Preview ')+s.name);\r\n    c.innerHTML='<span class=\"klp-card-text\"><span class=\"klp-badge\"><i style=\"background:'+CATCOLOR[s.cat]+'\"><\/i>'+STR[lang].cat[s.cat]+'<\/span><span class=\"klp-card-name\">'+s.name+'<\/span><span class=\"klp-card-host\" dir=\"ltr\">'+s.url.replace(\/^https?:\\\/\\\/\/,'')+'<\/span><span class=\"klp-card-desc\">'+s.desc[lang]+'<\/span><span class=\"klp-card-go\">'+(lang==='ar'?'\u0641\u062a\u062d \u0627\u0644\u0645\u0639\u0627\u064a\u0646\u0629 \u2190':'Open preview \u2192')+'<\/span><\/span><span class=\"klp-card-media\"><img decoding=\"async\" src=\"'+SHOTS+s.img+'\" alt=\"'+s.name+'\" loading=\"lazy\" onerror=\"this.style.display=\\'none\\'\"><\/span>';\r\n    c.addEventListener('click',function(){ openSite(i); });\r\n    h.appendChild(c);\r\n  });\r\n  cards=Array.prototype.slice.call(h.querySelectorAll('.klp-card'));\r\n}\r\nfunction wrapWords(){\r\n  var p=document.getElementById('klpPara'); var amber=STR[lang].amber;\r\n  var t=STR[lang].para.replace(\/\\s+\/g,' ').trim();\r\n  p.innerHTML=t.split(' ').map(function(w){ var k=w.replace(\/[.,\u2014\u2013\\-!?:\u061b\u060c\u061f]\/g,'').trim(); return '<span class=\"w'+(amber.indexOf(k)!==-1?' amber':'')+'\">'+w+'<\/span>'; }).join(' ');\r\n}\r\n\r\n\/* ---- animation ---- *\/\r\nvar triggers=[], HEAD_PEEK=26;\r\nfunction buildAnim(){\r\n  if(reduce||typeof gsap==='undefined') return;\r\n  gsap.registerPlugin(ScrollTrigger); killTriggers();\r\n  var words=root.querySelectorAll('#klpPara .w');\r\n  triggers.push(ScrollTrigger.create({trigger:'#klpWords',start:'top top',end:'bottom bottom',scrub:0.3,\r\n    onUpdate:function(self){ var lit=Math.round(self.progress*words.length); for(var i=0;i<words.length;i++){ if(i<lit) words[i].classList.add('lit'); else words[i].classList.remove('lit'); } }}));\r\n  cards.forEach(function(c,i){ gsap.set(c,{y:i*HEAD_PEEK}); });\r\n  var deck=document.getElementById('klpDeck'); deck.style.height=(cards.length*80+40)+'vh';\r\n  var tl=gsap.timeline({scrollTrigger:{trigger:'#klpDeck',start:'top top',end:'bottom bottom',scrub:0.6}});\r\n  cards.forEach(function(c,i){ if(i===0) return; gsap.set(c,{yPercent:115,y:i*HEAD_PEEK}); tl.to(c,{yPercent:0,duration:1,ease:'power2.out'},(i-1)); });\r\n  triggers.push(tl.scrollTrigger); ScrollTrigger.refresh();\r\n}\r\nfunction killTriggers(){ triggers.forEach(function(t){ if(t) t.kill(); }); triggers=[]; if(typeof gsap!=='undefined') gsap.set(cards,{clearProps:'transform'}); var d=document.getElementById('klpDeck'); if(d) d.style.height=''; }\r\n\/* rebuild after a frame so the fresh DOM is measured correctly (fixes AR-switch bug) *\/\r\nfunction applyMotionState(){\r\n  killTriggers();\r\n  if(animOn && !reduce){\r\n    requestAnimationFrame(function(){ requestAnimationFrame(function(){\r\n      buildAnim();\r\n      setTimeout(function(){ if(typeof ScrollTrigger!=='undefined') ScrollTrigger.refresh(); },250);\r\n    }); });\r\n  }\r\n}\r\n\r\nvar io=new IntersectionObserver(function(es){ es.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add('is-in'); io.unobserve(e.target); } }); },{threshold:.14,rootMargin:'0px 0px -8% 0px'});\r\nfunction observeRise(){ root.querySelectorAll('.klp-rise:not(.is-in)').forEach(function(n){ io.observe(n); }); }\r\n\r\nvar pop=document.getElementById('klxPop');\r\nfunction hidePop(remember){ pop.hidden=true; if(remember){ try{ localStorage.setItem('klxPopSeen','1'); }catch(e){} } }\r\nfunction maybeShowPop(){ if(animOn) return; var seen=false; try{ seen=localStorage.getItem('klxPopSeen')==='1'; }catch(e){} if(!seen){ pop.hidden=false; setTimeout(function(){ if(!pop.hidden) hidePop(false); },9000); } }\r\ndocument.getElementById('klxPopX').addEventListener('click',function(){ hidePop(true); });\r\nfunction setAnim(on){ animOn=on; root.setAttribute('data-anim',on?'on':'off'); document.getElementById('klxMotion').setAttribute('aria-pressed',on?'true':'false'); if(on) hidePop(true); applyMotionState(); observeRise(); }\r\ndocument.getElementById('klxMotion').addEventListener('click',function(){ setAnim(!animOn); });\r\ndocument.getElementById('klxLang').addEventListener('click',function(){ renderLang(lang==='en'?'ar':'en'); });\r\n\r\nvar modal=document.getElementById('klpModal'),frame=document.getElementById('klpFrame'),\r\n    urlEl=document.getElementById('klpUrl'),goEl=document.getElementById('klpGo'),\r\n    fall=document.getElementById('klpFall'),fImg=document.getElementById('klpFallImg'),\r\n    fGo=document.getElementById('klpFallGo'),closeBtn=document.getElementById('klpClose'),lastFocus=null,timer=null;\r\nfunction openSite(i){\r\n  var s=FEATURED[i]; lastFocus=document.activeElement;\r\n  urlEl.textContent=s.url; goEl.href=s.url; fGo.href=s.url; fImg.src=SHOTS+s.img; fImg.alt=s.name; fall.classList.remove('is-on');\r\n  frame.src=s.url; modal.classList.add('is-open'); document.documentElement.style.overflow='hidden';\r\n  requestAnimationFrame(function(){ modal.classList.add('is-show'); }); closeBtn.focus();\r\n  clearTimeout(timer); timer=setTimeout(function(){ fall.classList.add('is-on'); },4500); frame.onload=function(){ clearTimeout(timer); };\r\n}\r\nfunction closeSite(){ modal.classList.remove('is-show'); document.documentElement.style.overflow=''; clearTimeout(timer); setTimeout(function(){ modal.classList.remove('is-open'); frame.src='about:blank'; },420); if(lastFocus) lastFocus.focus(); }\r\nmodal.addEventListener('click',function(e){ if(e.target.hasAttribute('data-klp-close')) closeSite(); });\r\ndocument.addEventListener('keydown',function(e){ if(e.key==='Escape'&&modal.classList.contains('is-open')) closeSite(); });\r\n\r\n(function heroSeq(){\r\n  var MOBILE=window.matchMedia('(max-width: 760px)').matches;\r\n  var DIRF=BASE+(MOBILE?'frames-m\/':'frames\/');\r\n  var COUNT=MOBILE?61:121, EAGER=12, PARALLEL=6, MOB_ZOOM=1.45, MOB_TOP=0.12;\r\n  function url(i){ return DIRF+'f_'+String(i).padStart(4,'0')+'.webp?'+CACHE; }\r\n  var stage=document.getElementById('klxStage'),canvas=document.getElementById('klxCanvas'),\r\n      ctx=canvas.getContext('2d',{alpha:false}),bar=document.getElementById('klxLoad');\r\n  var frames=new Array(COUNT+1),loaded=0,drawn=-1,ready=false,cw=0,ch=0,target=1,eased=1;\r\n  function checkMobile(){ if(!MOBILE) return Promise.resolve(); return fetch(url(1),{method:'HEAD'}).then(function(r){ if(!r.ok) throw 0; }).catch(function(){ DIRF=BASE+'frames\/'; COUNT=121; frames=new Array(COUNT+1); }); }\r\n  function grab(i){ return fetch(url(i),{cache:'force-cache'}).then(function(r){ if(!r.ok) throw 0; return r.blob(); })\r\n      .then(function(b){ return window.createImageBitmap?createImageBitmap(b):new Promise(function(ok,no){var im=new Image();im.onload=function(){ok(im);};im.onerror=no;im.src=URL.createObjectURL(b);}); })\r\n      .then(function(img){ frames[i]=img; }).catch(function(){})\r\n      .then(function(){ loaded++; bar.style.width=(loaded\/COUNT*100)+'%'; if(loaded>=COUNT) bar.classList.add('is-done'); }); }\r\n  function queue(a,b){ var n=a; function w(){ if(n>b) return Promise.resolve(); return grab(n++).then(w);} var j=[]; for(var k=0;k<PARALLEL;k++) j.push(w()); return Promise.all(j); }\r\n  function nearest(i){ if(frames[i]) return frames[i]; for(var d=1;d<COUNT;d++){ if(frames[i-d]) return frames[i-d]; if(frames[i+d]) return frames[i+d]; } return null; }\r\n  function resize(){ var dpr=Math.min(window.devicePixelRatio||1,2); cw=canvas.clientWidth; ch=canvas.clientHeight; canvas.width=Math.round(cw*dpr); canvas.height=Math.round(ch*dpr); ctx.setTransform(dpr,0,0,dpr,0,0); drawn=-1; }\r\n  function paint(img){ if(!img) return; var fit,x,y,w,h;\r\n    if(MOBILE){ fit=(cw\/img.width)*MOB_ZOOM; w=img.width*fit; h=img.height*fit; x=(cw-w)\/2; y=ch*MOB_TOP; }\r\n    else { fit=Math.max(cw\/img.width,ch\/img.height); w=img.width*fit; h=img.height*fit; x=(cw-w)\/2; y=(ch-h)\/2; }\r\n    ctx.fillStyle='#05070C'; ctx.fillRect(0,0,cw,ch); ctx.drawImage(img,x,y,w,h); }\r\n  function prog(){ var span=stage.offsetHeight-window.innerHeight; if(span<=0) return 1; var p=-stage.getBoundingClientRect().top\/span; return p<0?0:(p>1?1:p); }\r\n  function tick(){ requestAnimationFrame(tick); if(!ready) return; target=1+prog()*(COUNT-1); eased+=(target-eased)*(reduce?1:0.18); var i=Math.round(eased); if(i!==drawn){ paint(nearest(i)); drawn=i; } }\r\n  window.addEventListener('resize',resize,{passive:true}); window.addEventListener('orientationchange',resize,{passive:true}); resize();\r\n  checkMobile().then(function(){\r\n    if(reduce){ return grab(COUNT).then(function(){ ready=true; paint(frames[COUNT]); drawn=COUNT; bar.classList.add('is-done'); }); }\r\n    return grab(1).then(function(){ paint(frames[1]); drawn=1; return queue(2,Math.min(EAGER,COUNT)); }).then(function(){ ready=true; tick(); queue(EAGER+1,COUNT); });\r\n  });\r\n})();\r\n\r\nfunction boot(){\r\n  if(typeof gsap==='undefined'||typeof ScrollTrigger==='undefined'){ return setTimeout(boot,120); }\r\n  renderLang('en');\r\n  setAnim(false);\r\n  maybeShowPop();\r\n}\r\nboot();\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7a9adcd e-con-full e-flex e-con e-parent\" data-id=\"7a9adcd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Want to see this page fully animated? Turn on Motion. \u00d7 Motion \u0639\u0631\u0628\u064a Web developer &amp; online store specialist \u2014 Dubai Online stores that actually sell. I build online stores and business websites, set up their email, keep them running, move them to faster hosting, and fix them when they get hacked. Scroll I don&#8217;t [&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-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/test.kdlink.dev\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.kdlink.dev\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.kdlink.dev\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.kdlink.dev\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.kdlink.dev\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":44,"href":"https:\/\/test.kdlink.dev\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":64,"href":"https:\/\/test.kdlink.dev\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/64"}],"wp:attachment":[{"href":"https:\/\/test.kdlink.dev\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}