@font-face{font-family:"Cairo";src:url(../fonts/cairo.woff2) format("woff2");font-weight:200 1000;font-display:swap}
@font-face{font-family:"Montserrat";src:url(../fonts/montserrat.woff2) format("woff2");font-weight:100 900;font-display:swap}
/* ===== KEV design system tokens (P1) — see DESIGN_SYSTEM.md ===== */
:root{--c-violet:#7739F7;--c-blue:#258BFF;--c-cyan:#12D9E8;--c-cyan-d:#0A7381;--c-navy:#080D28;--c-navy-2:#0E1538;--c-navy-3:#111940;--c-off:#F4F3EF;--c-white:#FFFFFF;
 --grad-brand:linear-gradient(110deg,var(--c-violet) 0%,var(--c-blue) 50%,var(--c-cyan) 100%);
 --fs-xs:.8125rem;--fs-sm:.9375rem;--fs-md:1.0625rem;--fs-lg:clamp(1.125rem,1.6vw,1.3rem);--fs-xl:clamp(1.4rem,2.4vw,1.75rem);--fs-2xl:clamp(2rem,5.2vw,4rem);--fs-3xl:clamp(2.6rem,8vw,6.6rem);
 --lh-body:1.75;--lh-tight:1.12;
 --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;
 --r-xs:8px;--r-sm:12px;--r-md:18px;--r-lg:28px;--r-pill:999px;
 --sh-1:0 1px 2px rgba(8,13,40,.06),0 8px 24px -12px rgba(8,13,40,.18);--sh-2:0 24px 60px -24px rgba(8,13,40,.35);
 --focus-ring:0 0 0 3px var(--c-navy),0 0 0 5px var(--c-cyan);
 --icon-sm:18px;--icon-md:24px;--icon-lg:34px;
 --dur-1:.18s;--dur-2:.3s;--dur-3:.9s}
/* ===== tokens: navy + one accent (cyan; deeper tone of same hue for text on light bands) ===== */
:root{--navy:var(--c-navy);--navy2:var(--c-navy-2);--off:var(--c-off);--paper:var(--c-white);--acc:var(--c-cyan);--acc-d:var(--c-cyan-d);--on-acc:var(--c-navy);
 --bg:var(--off);--surface:var(--paper);--ink:#080D28;--mute:#4A5070;--line:#DAD8D0;--hl:var(--acc-d);
 --f-en:"Montserrat","Segoe UI",system-ui,sans-serif;--f-ar:"Cairo","Segoe UI",Tahoma,system-ui,sans-serif;--f:var(--f-ar);--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 --r:var(--r-md);--r-s:var(--r-sm);--pill:var(--r-pill);--w:1200px;--ease:cubic-bezier(.2,.7,.2,1)}
:root[lang="en"]{--f:var(--f-en)}
.dark,[data-band="dark"]{--bg:#E6F2F4;--surface:#FFFFFF;--ink:#080D28;--mute:#3F4766;--line:#CBDDE2;--hl:var(--acc-d)}
:root.is-dark .dark,:root.is-dark [data-band="dark"]{--bg:var(--navy);--surface:var(--navy2);--ink:#F1F3FF;--mute:#A9B1D6;--line:#232C5C;--hl:var(--acc)}
:root[data-theme="dark"]{--off:#0C1233;--paper:#111940;--ink:#F1F3FF;--mute:#A9B1D6;--line:#232C5C;--hl:var(--acc);--bg:var(--off);--surface:var(--paper)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--off:#0C1233;--paper:#111940;--ink:#F1F3FF;--mute:#A9B1D6;--line:#232C5C;--hl:var(--acc);--bg:var(--off);--surface:var(--paper)}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:90px}html.smooth{scroll-behavior:smooth}
body{margin:0;background:var(--off);color:var(--ink);font:400 1.0625rem/1.75 var(--f);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3{margin:0;line-height:1.08;font-weight:800;letter-spacing:-.01em}
:root[lang="en"] h1,:root[lang="en"] h2{letter-spacing:-.035em}
p{margin:0}a{color:inherit}img{max-width:100%}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;box-shadow:var(--focus-ring)}
.wrap{max-width:var(--w);margin-inline:auto;padding-inline:clamp(18px,4vw,40px)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
:root[lang="ar"] .en,:root[lang="en"] .ar{display:none!important}
.skip{position:absolute;inset-inline-start:12px;top:-80px;background:var(--acc);color:var(--on-acc);padding:10px 16px;border-radius:var(--pill);z-index:90;font-weight:700}
.skip:focus{top:12px}
/* ===== bands ===== */
.band{background:var(--bg);color:var(--ink);padding-block:clamp(72px,11vw,140px);position:relative}
.band.tight{padding-block:clamp(48px,7vw,84px)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 .78rem var(--f-en);letter-spacing:.22em;text-transform:uppercase;color:var(--hl)}
:root[lang="ar"] .eyebrow{font-family:var(--f-ar);letter-spacing:.06em;font-size:.9rem}
.eyebrow::before{content:"";width:28px;height:2px;background:currentColor;border-radius:2px}
.hl{color:var(--hl)}
.display{font-size:clamp(2.6rem,8.4vw,7.2rem)}
.h2{font-size:clamp(2rem,5.2vw,4rem)}
.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--mute);max-width:36em}
.head{display:grid;gap:16px;margin-bottom:clamp(36px,5vw,64px);max-width:48em}
/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:var(--pill);font:700 1rem var(--f);text-decoration:none;border:1.5px solid var(--acc);background:var(--acc);color:var(--on-acc);cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -10px color-mix(in srgb,var(--acc) 70%,transparent)}
.btn.ghost{background:transparent;color:var(--ink);border-color:color-mix(in srgb,var(--ink) 35%,transparent)}
.btn.ghost:hover{border-color:var(--ink);box-shadow:none}
.btn.sm{min-height:42px;padding:0 18px;font-size:.92rem}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
/* ===== header ===== */
.progress{position:fixed;top:0;inset-inline:0;height:3px;z-index:80;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:var(--acc);transform:scaleX(var(--p,0));transform-origin:0 50%}
:root[dir="rtl"] .progress i{transform-origin:100% 50%}
header.top{position:fixed;top:0;inset-inline:0;z-index:70;transition:background .3s,color .3s,border-color .3s;--ink:#080D28;--line:rgba(8,13,40,.12);color:var(--ink);background:color-mix(in srgb,var(--off) 72%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line)}
.is-dark header.top.on-dark{--ink:#F1F3FF;--line:rgba(255,255,255,.10);background:rgba(8,13,40,.55)}
:root[data-theme="dark"] header.top{--ink:#F1F3FF;--line:rgba(255,255,255,.10);background:rgba(8,13,40,.6)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) header.top{--ink:#F1F3FF;--line:rgba(255,255,255,.10);background:rgba(8,13,40,.6)}}
.bar{display:flex;align-items:center;gap:20px;height:72px}
.brand{display:flex;text-decoration:none}.brand img{height:44px;width:auto;display:block}
.brand .lk-dark{display:none}
.is-dark header.on-dark .brand .lk-light,:root[data-theme="dark"] .brand .lk-light{display:none}
.is-dark header.on-dark .brand .lk-dark,:root[data-theme="dark"] .brand .lk-dark{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand .lk-light{display:none}:root:not([data-theme="light"]) .brand .lk-dark{display:block}}
nav{margin-inline-start:auto;display:flex;gap:4px}
nav a{text-decoration:none;font-weight:600;font-size:.93rem;padding:8px 12px;border-radius:var(--pill);opacity:.8}
nav a:hover{opacity:1;background:color-mix(in srgb,var(--ink) 8%,transparent)}
nav a[aria-current="page"]{opacity:1;background:color-mix(in srgb,var(--ink) 10%,transparent)}
.tools{display:flex;gap:8px;align-items:center}
.chip{font:700 .85rem var(--f-en);background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:var(--pill);min-width:44px;height:44px;padding:0 14px;cursor:pointer;display:inline-grid;place-items:center;text-decoration:none}
.chip:hover{border-color:var(--ink)}
.cartlink{position:relative}
.cartlink b{position:absolute;top:-4px;inset-inline-end:-4px;background:var(--acc);color:var(--on-acc);border-radius:var(--pill);font:800 .7rem var(--f-en);min-width:19px;height:19px;display:grid;place-items:center;padding:0 5px}
.menu{display:inline-grid}
.burg{display:grid;gap:4px;width:18px}.burg i{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease),opacity .3s}
.burg i:nth-child(2){width:70%;margin-inline-start:auto}
@media (max-width:1080px){header nav#nav{display:none}.tools{margin-inline-start:auto}}
/* ===== drawer ===== */
.dr-back{position:fixed;inset:0;z-index:90;background:rgba(4,7,26,.55);opacity:0;transition:opacity .35s ease}
.drawer{position:fixed;inset-block:0;inset-inline-end:0;z-index:95;width:min(380px,88vw);background:var(--navy);color:#F1F3FF;--ink:#F1F3FF;--mute:#A9B1D6;--line:#232C5C;border-inline-start:1px solid #232C5C;box-shadow:-20px 0 60px rgba(0,0,0,.35);transform:translateX(105%);transition:transform .45s cubic-bezier(.22,1,.36,1);overflow-y:auto;overscroll-behavior:contain}
:root[dir="rtl"] .drawer{transform:translateX(-105%)}
.drawer.on,:root[dir="rtl"] .drawer.on{transform:none}.dr-back.on{opacity:1}
.dr-in{display:flex;flex-direction:column;gap:22px;min-height:100%;padding:18px 22px 28px}
.dr-head{display:flex;align-items:center;justify-content:space-between}
.dr-nav{display:flex;flex-direction:column;align-items:stretch;gap:2px;margin:0;width:100%;justify-content:flex-start}
.dr-nav a{color:#F1F3FF;text-decoration:none;font-weight:700;font-size:1.08rem;padding:12px 14px;border-radius:12px;opacity:.85;transition:background .2s,opacity .2s}
.dr-nav a:hover,.dr-nav a[aria-current="page"]{opacity:1;background:rgba(18,217,232,.10)}
.dr-nav a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--acc)}:root[dir="rtl"] .dr-nav a[aria-current="page"]{box-shadow:inset -3px 0 0 var(--acc)}
.dr-opts{margin-top:auto;display:grid;gap:10px;padding-top:18px;border-top:1px solid #232C5C}
.dr-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 4px}
.dr-lbl{font-weight:700;color:#A9B1D6;font-size:.95rem}
.seg{display:inline-flex;padding:3px;border-radius:999px;border:1px solid #232C5C;background:#0E1538;cursor:pointer;font:700 .85rem var(--f-en)}
.seg span{padding:6px 12px;border-radius:999px;color:#A9B1D6;transition:background .25s,color .25s}
.seg span[lang="ar"]{font-family:var(--f-ar)}
:root[lang="ar"] .seg span[lang="ar"],:root[lang="en"] .seg span[lang="en"]{background:var(--acc);color:#080D28}
.tsw{position:relative;width:66px;height:36px;border-radius:999px;border:1px solid #2C3870;background:linear-gradient(90deg,#FFE7A8,#BDEFF5);cursor:pointer;padding:0;transition:background .4s ease,border-color .4s;margin-inline-start:auto}
.tsw[aria-checked="true"]{background:linear-gradient(90deg,#0E1538,#1B2A6B);border-color:#12D9E8}
.tsw-thumb{position:absolute;top:3px;inset-inline-start:3px;width:28px;height:28px;border-radius:50%;background:#fff;color:#F5A623;display:grid;place-items:center;box-shadow:0 2px 8px rgba(8,13,40,.3);transition:transform .45s cubic-bezier(.34,1.4,.64,1),background .4s,color .4s}
.tsw[aria-checked="true"] .tsw-thumb{transform:translateX(30px);background:#080D28;color:#12D9E8;box-shadow:0 0 0 1px #12D9E8,0 0 14px rgba(18,217,232,.45)}
:root[dir="rtl"] .tsw[aria-checked="true"] .tsw-thumb{transform:translateX(-30px)}
.tsw svg{width:20px;height:20px;overflow:visible;transition:transform .5s var(--ease)}
.tsw[aria-checked="true"] svg{transform:rotate(-40deg)}
.tsw-core{transition:r .45s var(--ease)}
.tsw[aria-checked="true"] .tsw-core{r:8}
.tsw-bite{transition:cx .45s var(--ease),cy .45s var(--ease)}
.tsw[aria-checked="true"] .tsw-bite{cx:17;cy:8}
.tsw-rays{transform-origin:12px 12px;transition:transform .45s var(--ease),opacity .3s}
.tsw[aria-checked="true"] .tsw-rays{transform:scale(.4) rotate(90deg);opacity:0}
.tsw:focus-visible,.seg:focus-visible,.dr-nav a:focus-visible,.dr-x:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.tsw-st{min-width:44px;font-size:.85rem;color:#A9B1D6}
.tsw-st .st-d{display:none}.tsw[aria-checked="true"]+.tsw-st .st-d{display:inline}.tsw[aria-checked="true"]+.tsw-st .st-l{display:none}
@media (prefers-reduced-motion:reduce){.drawer,.dr-back,.tsw,.tsw *{transition:none!important}}
@media (max-width:440px){.brand img{height:34px}.bar{gap:10px}.tools{gap:6px}.chip{min-width:40px;height:40px;padding:0 10px}}
main{display:block}
main:focus{outline:none}
/* ===== hero ===== */
.hero{min-height:100svh;display:grid;align-items:center;overflow:hidden;padding-block:120px 90px}
.hero .wrap{position:relative;z-index:2;display:grid;gap:28px}
.glow{position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(60% 50% at 80% 20%,rgba(37,139,255,.20),transparent 70%),radial-gradient(45% 45% at 10% 90%,rgba(18,217,232,.14),transparent 70%)}
:root[dir="rtl"] .glow{transform:scaleX(-1)}
.motif{--o:.3;position:absolute;inset-block:0;inset-inline-end:-9vw;width:min(54vw,740px);z-index:1;display:grid;place-items:center;opacity:calc(var(--o)*var(--fade,1));pointer-events:none}
.motif svg{width:100%;height:auto;overflow:visible}
.k-tilt{position:relative;width:70%;margin-inline-start:8%;transform:perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));transition:transform .6s var(--ease)}
.k-halo{position:absolute;inset:2% 4% 16%;border-radius:50%;background:radial-gradient(closest-side,rgba(18,217,232,.32),rgba(119,57,247,.16) 55%,rgba(119,57,247,.05) 80%,transparent 100%);animation:kHalo 7s ease-in-out 2.6s infinite;opacity:.6;will-change:transform,opacity}
@keyframes kHalo{0%,100%{opacity:.45;transform:scale(.94)}50%{opacity:.85;transform:scale(1.04)}}
.k-ring{stroke-dasharray:1;stroke-dashoffset:1;animation:kDraw 2s cubic-bezier(.65,0,.35,1) .2s forwards}
@keyframes kDraw{to{stroke-dashoffset:0}}
.k-blades path{opacity:0;transform-box:fill-box;transform-origin:center;animation:kIn .9s var(--ease) forwards}
.k-blades path:nth-child(1){animation-delay:.9s}.k-blades path:nth-child(2){animation-delay:1s}.k-blades path:nth-child(3){animation-delay:1.1s}.k-blades path:nth-child(4){animation-delay:1.2s}.k-blades path:nth-child(5){animation-delay:1.3s}.k-blades path:nth-child(6){animation-delay:1.4s}
@keyframes kIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.k-let path{opacity:0;animation:kUp .9s var(--ease) forwards}
.k-let path:nth-child(1){animation-delay:1.2s}.k-let path:nth-child(2){animation-delay:1.35s}.k-let path:nth-child(3){animation-delay:1.5s}
@keyframes kUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.k-bar{transform-box:fill-box;transform-origin:center;transform:scaleY(0);animation:kRise .7s var(--ease) forwards,kLvl 2.8s ease-in-out infinite alternate}
.k-b1{animation-delay:1.7s,2.4s}.k-b2{animation-delay:1.85s,2.9s;animation-duration:.7s,3.3s}.k-b3{animation-delay:2s,2.6s;animation-duration:.7s,2.4s}
@keyframes kRise{to{transform:scaleY(1)}}
@keyframes kLvl{0%{transform:scaleY(1)}100%{transform:scaleY(.62)}}
.k-word{opacity:0;animation:kFade 1.2s ease 2.2s forwards}
@keyframes kFade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.motif *{animation:none!important;transition:none!important}.k-ring{stroke-dashoffset:0}.k-blades path,.k-let path,.k-word{opacity:1}.k-bar{transform:none}.k-tilt{transform:none}}
.cue{position:absolute;bottom:26px;inset-inline-start:50%;transform:translateX(-50%);z-index:2;display:grid;justify-items:center;gap:8px;font:600 .72rem var(--f-en);letter-spacing:.24em;text-transform:uppercase;color:var(--mute);text-decoration:none}
:root[dir="rtl"] .cue{transform:translateX(50%)}
.cue i{width:24px;height:38px;border:1.5px solid currentColor;border-radius:14px;position:relative}
.cue i::after{content:"";position:absolute;top:7px;inset-inline-start:calc(50% - 2px);width:4px;height:8px;border-radius:2px;background:var(--acc);animation:cue 1.8s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
@media (max-width:760px){.motif{--o:.2;width:115vw;inset-inline-end:-38vw}}
/* page hero (inner pages) */
.page-hero{padding-block:clamp(130px,16vw,190px) clamp(56px,8vw,96px);overflow:hidden}
.page-hero .wrap{position:relative;z-index:2;display:grid;gap:16px}
.page-hero h1{font-size:clamp(2.3rem,6.4vw,5rem)}
.page-hero p{color:var(--mute);max-width:40em;font-size:1.12rem}
.crumbs{font-size:.9rem;color:var(--mute)}.crumbs a{color:var(--mute)}
/* ===== slogan ===== */
.slogan{background:var(--bg);color:var(--ink);padding-block:clamp(44px,6vw,80px)}
.slogan .wrap{display:flex;justify-content:center}
.sl-card{position:relative;display:inline-block;max-width:min(720px,100%);padding:clamp(18px,2.4vw,26px) clamp(26px,4vw,52px);border-radius:20px;background:var(--surface);box-shadow:0 10px 40px rgba(18,217,232,.10),0 2px 10px rgba(8,13,40,.06);isolation:isolate}
.sl-ring{position:absolute;inset:0;border-radius:inherit;padding:1.6px;overflow:hidden;pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.sl-ring::before{content:"";position:absolute;left:50%;top:50%;width:160%;aspect-ratio:1;translate:-50% -50%;background:conic-gradient(from 0deg,transparent 0 55%,rgba(18,217,232,.15) 62%,#12D9E8 74%,#7739F7 82%,transparent 90%);animation:slSpin 7s linear infinite;will-change:transform}
.sl-card::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid var(--line);z-index:-1}
@keyframes slSpin{to{transform:rotate(360deg)}}
.sl-txt{position:relative;margin:0;text-align:center;font:800 clamp(1.35rem,3.2vw,2.3rem)/1.3 var(--f-en);letter-spacing:-.01em;overflow:hidden;padding-block:.08em}
:root[lang="ar"] .sl-txt{font-family:var(--f-ar);letter-spacing:0;line-height:1.55}
.sl-txt .w{display:inline-block;opacity:0;transform:translateY(.6em);transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:calc(.25s + var(--i)*.14s)}
.sl-txt .hl{color:var(--hl)}
.sl-card.in .w{opacity:1;transform:none}
.sl-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);mix-blend-mode:soft-light;transform:translateX(-120%);will-change:transform}

@keyframes slShine{0%{transform:translateX(-120%)}35%,100%{transform:translateX(120%)}}
.sl-boxi{position:absolute;top:-22px;inset-inline-end:-18px;width:44px;height:44px;color:var(--hl);background:var(--surface);border-radius:12px;padding:4px;box-shadow:0 4px 14px rgba(8,13,40,.12)}
.sl-boxi .spark{transform-box:fill-box;transform-origin:center;animation:slPop 3.2s cubic-bezier(.34,1.56,.64,1) infinite}
.sl-boxi .lid{transform-box:view-box;transform-origin:24px 20px;animation:slLid 3.2s ease-in-out infinite}
@keyframes slPop{0%,15%{transform:translateY(14px) scale(.4);opacity:0}35%{transform:translateY(-6px) scale(1);opacity:1}70%{transform:translateY(-4px) scale(1);opacity:1}100%{transform:translateY(-14px) scale(.6);opacity:0}}
@keyframes slLid{0%,10%,90%,100%{transform:scaleY(.6)}30%,70%{transform:none}}
@media (max-width:760px){.sl-card{border-radius:16px}.sl-boxi{width:36px;height:36px;top:-16px;inset-inline-end:-10px}}
@media (prefers-reduced-motion:reduce){.sl-txt .w{opacity:1;transform:none}.sl-ring::before,.sl-shine,.sl-boxi *{animation:none!important}.sl-shine{display:none}}
@keyframes mq{to{transform:translateX(-50%)}}
/* ===== stats ===== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.stat{padding:30px 22px 6px;border-inline-end:1px solid var(--line)}.stat:last-child{border-inline-end:0}
.stat b{display:block;font:800 clamp(2.4rem,5vw,4rem)/1 var(--f-en);direction:ltr;text-align:start}
.stat b{font-variant-numeric:tabular-nums}.stat b .cn{display:inline-block;text-align:start;font:inherit;color:inherit}
.stat b em{font-style:normal;color:var(--hl)}
.stat span{color:var(--mute);font-size:.98rem}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr}.stat:nth-child(2){border-inline-end:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line);padding-bottom:22px}}
/* ===== cards ===== */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.grid3{grid-template-columns:1fr 1fr}}@media (max-width:640px){.grid2,.grid3{grid-template-columns:1fr}}
.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,40px);display:grid;gap:14px;align-content:start;transition:transform .35s var(--ease),border-color .35s}
.box:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--hl) 60%,var(--line))}
.box h3{font-size:clamp(1.3rem,2.2vw,1.8rem)}.box p{color:var(--mute)}
.box .num{font:800 .9rem var(--f-en);color:var(--hl);letter-spacing:.14em}
.box.big h3{font-size:clamp(1.6rem,3vw,2.4rem)}
.pills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.pills li{border:1px solid var(--line);border-radius:var(--pill);padding:4px 14px;font-size:.88rem;font-weight:600}
.svc{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:stretch}
.svc+.svc{margin-top:20px}
@media (max-width:860px){.svc{grid-template-columns:1fr}}
.media{border-radius:var(--r);min-height:260px;background:radial-gradient(70% 60% at 30% 30%,rgba(37,139,255,.25),transparent 70%),var(--navy);color:#B4BEEB;display:grid;place-items:center;text-align:center;padding:20px;border:1px solid #232C5C;font-weight:700;position:relative;overflow:hidden}
.media small{display:block;font-weight:500;opacity:.8}
/* timeline */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s;position:relative}
.flow::before{content:"";position:absolute;top:27px;inset-inline:0;height:1px;background:var(--line)}
.flow li{counter-increment:s;position:relative;display:grid;gap:10px;padding-top:76px}
.flow li::before{content:"0" counter(s);position:absolute;top:0;inset-inline-start:0;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font:800 1rem var(--f-en);background:var(--bg);border:1.5px solid var(--hl);color:var(--hl)}
.flow h3{font-size:1.35rem}.flow p{color:var(--mute)}
@media (max-width:860px){.flow{grid-template-columns:1fr;gap:28px}.flow::before{top:0;bottom:0;inset-inline-start:27px;inset-inline-end:auto;width:1px;height:auto}.flow li{padding-top:4px;padding-inline-start:84px}}
/* logo carousel */
.logos{overflow:hidden;direction:ltr;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.logos .track{display:flex;gap:20px;width:max-content;animation:mq 40s linear infinite}
.logos .lg{width:190px;height:84px;border:1px dashed var(--line);border-radius:var(--r-s);display:grid;place-items:center;color:var(--mute);font:700 .8rem var(--f-en);letter-spacing:.14em;flex:none}
/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.formcard{background:var(--paper);color:#080D28;--ink:#080D28;--mute:#4A5070;--line:#DAD8D0;border-radius:var(--r);padding:clamp(22px,3vw,40px);display:grid;gap:16px;min-width:0;box-shadow:0 30px 80px -30px rgba(0,0,0,.5)}
:root[data-theme="dark"] .formcard{background:#111940;color:#F1F3FF;--ink:#F1F3FF;--mute:#A9B1D6;--line:#2A3566}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .formcard{background:#111940;color:#F1F3FF;--ink:#F1F3FF;--mute:#A9B1D6;--line:#2A3566}}
.direct{display:grid;gap:6px;margin-top:28px}.direct a{font:700 clamp(1.1rem,2.4vw,1.6rem) var(--f-en);color:var(--hl);word-break:break-all}
/* forms */
form{display:grid;gap:14px;min-width:0}
label{display:grid;gap:6px;font-weight:600;font-size:.95rem;min-width:0}
input,select,textarea{font:400 1rem var(--f);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-s);padding:12px 14px;min-height:50px;width:100%;max-width:100%}
.formcard input,.formcard select,.formcard textarea{background:transparent}
textarea{min-height:130px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--hl)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#C62828}
.err{color:#B3261E;font-size:.88rem;min-height:1.2em}
.dark .err,[data-band="dark"] .err{color:#FFB0B0}
:root[data-theme="dark"] .err{color:#FFB0B0}
#status,#k-st{min-height:1.5em;color:var(--hl)}
fieldset{border:1px solid var(--line);border-radius:var(--r-s);padding:12px 16px;margin:0;min-width:0}
/* ===== store (kept class names) ===== */
.note{border:1px dashed var(--hl);border-radius:var(--r-s);padding:12px 16px;font-size:.93rem;background:color-mix(in srgb,var(--acc) 7%,transparent)}
.warn{border:2px solid #C0392B;background:#FFF1EF;color:#5A1209;border-radius:var(--r-s);padding:12px 16px;font-size:.95rem}
.badge{display:inline-block;font:700 .74rem var(--f);border:1px solid var(--hl);color:var(--hl);border-radius:var(--pill);padding:2px 10px;width:max-content}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;list-style:none;margin:0;padding:0}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}}@media (max-width:600px){.cards{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:grid;gap:12px;align-content:start;transition:transform .35s var(--ease),border-color .35s}
.card:hover{transform:translateY(-4px);border-color:var(--hl)}
.card h2,.card h3{font-size:1.4rem}.card p{color:var(--mute)}.card .from{font-weight:700;color:var(--ink)}
.pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}@media (max-width:860px){.pkgs{grid-template-columns:1fr}}
.pkg{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:grid;gap:14px;align-content:start}
.pkg.hl{border:2px solid var(--hl);color:var(--ink)}
.pkg h3{font-size:1.3rem}
.pkg .price{font:800 2.4rem var(--f-en);direction:ltr;text-align:start}
.pkg ul{margin:0;padding-inline-start:1.2em;display:grid;gap:4px}
.pkg dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:.95rem}.pkg dt{color:var(--mute)}.pkg dd{margin:0;font-weight:700}
table.t{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
table.t th,table.t td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:start;vertical-align:middle}
table.t tfoot th,table.t tfoot td{border-bottom:0}
table.t td.num,table.t th.num{text-align:end;direction:ltr;white-space:nowrap}
table.t select{width:auto;min-height:40px;padding:6px 10px}
@media (max-width:560px){table.t th,table.t td{padding:10px 8px;font-size:.92rem}}
.two{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:start}@media (max-width:860px){.two{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3vw,32px);display:grid;gap:14px;min-width:0}
.mono{font-family:var(--mono);direction:ltr;unicode-bidi:isolate;word-break:break-all}
.copyrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.copyrow code{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px}
.qr{width:200px;height:200px;border:1px solid var(--line);border-radius:var(--r-s);background:#fff}
.steps{display:flex;gap:8px;list-style:none;padding:0;margin:0 0 22px;flex-wrap:wrap}
.steps li{border:1px solid var(--line);border-radius:var(--pill);padding:6px 16px;font-size:.9rem;color:var(--mute)}
.steps li[aria-current="step"]{background:var(--acc);color:var(--on-acc);border-color:var(--acc);font-weight:700}
.prose{max-width:48em;display:grid;gap:16px}.prose h2{font-size:1.6rem;margin-top:14px}.prose ul,.prose ol{margin:0;display:grid;gap:6px}
details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 22px}
details+details{margin-top:12px}summary{font-weight:700;cursor:pointer;font-size:1.08rem}details p{color:var(--mute);margin-top:10px}
.iconbtn{background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:var(--pill);min-height:40px;min-width:40px;cursor:pointer}
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;list-style:none;margin:0;padding:0}
@media (max-width:900px){.works{grid-template-columns:1fr 1fr}}@media (max-width:600px){.works{grid-template-columns:1fr}}
.work{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.work .txt{padding:20px 22px 24px;display:grid;gap:6px}.work h3{font-size:1.15rem}.work p{color:var(--mute);font-size:.95rem}.work small{font-weight:700;color:var(--hl)}
.ph{aspect-ratio:16/10;display:grid;place-items:center;background:radial-gradient(60% 60% at 30% 30%,rgba(37,139,255,.22),transparent 70%),var(--navy);color:#B4BEEB;font-weight:700}
/* ===== footer ===== */
footer{background:var(--navy);color:#A9B1D6;padding-block:56px 30px;border-top:1px solid #232C5C}
footer .wrap{display:grid;gap:28px}
footer .ft{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
footer .ft img{height:52px;width:auto}
footer .links{display:flex;gap:18px;flex-wrap:wrap}footer a{color:#DDE2FF}
footer .fb{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid #232C5C;padding-top:20px;font-size:.9rem}
/* ===== motion ===== */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.rv.in{opacity:1;transform:none;filter:none}
.no-js .rv{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none;filter:none}.logos .track{transform:none}}
/* hero scroll-out + background drift */
@keyframes kenb{from{transform:scale(1)}to{transform:scale(1.12)}}
@keyframes kenbr{from{transform:scaleX(-1)}to{transform:scale(-1.12,1.12)}}
/* ===== press feedback (no tap box) ===== */
html,a,button,input,select,textarea,label,summary,[role="button"],[role="switch"]{-webkit-tap-highlight-color:transparent}
:focus:not(:focus-visible){outline:none}
a,button,summary,.chip,.btn,.card,.pkg,.svc .box,.seg,.tsw{transition:box-shadow .25s ease,filter .25s ease,transform .18s ease,text-shadow .25s ease,background .25s,border-color .25s,color .25s,opacity .25s}
:root .btn:active,:root .chip:active,:root .seg:active,:root .tsw:active,:root .card:active:not(:has(a:active,button:active)),:root .pkg:active:not(:has(a:active,button:active)),:root .svc .box:active:not(:has(a:active,button:active)),:root .dr-nav a:active,:root nav a:active,:root button:active{box-shadow:0 0 0 1px rgba(18,217,232,.55),0 0 22px rgba(18,217,232,.35);filter:brightness(1.08);transform:scale(.98)}
:root .chip:active,:root .dr-x:active,:root .menu:active,:root .cartlink:active{background:radial-gradient(circle,rgba(18,217,232,.28),rgba(18,217,232,.06) 70%,transparent)}
:root a:not(.btn):not(.chip):not(.brand):not([class*="dr-"]):active{text-shadow:0 0 12px rgba(18,217,232,.65);box-shadow:none;transform:none}
:root nav a:active,:root .dr-nav a:active{text-shadow:0 0 12px rgba(18,217,232,.5)}
:root .brand:active{filter:drop-shadow(0 0 10px rgba(18,217,232,.5))}
@media (prefers-reduced-motion:reduce){*:active{transform:none!important}}

/* ===== light theme: genuinely light surfaces ===== */
:root:not(.is-dark) .hero{background:radial-gradient(80% 70% at 85% 15%,#DDF3F6 0%,transparent 60%),linear-gradient(180deg,#F4F3EF,#EAF3F5)}
:root:not(.is-dark) .glow{opacity:.55}
:root:not(.is-dark) .drawer{background:#FFFFFF;color:#080D28;--ink:#080D28;--mute:#4A5070;--line:#DAD8D0;border-inline-start-color:#DAD8D0;box-shadow:-20px 0 60px rgba(8,13,40,.18)}
:root:not(.is-dark) .dr-nav a{color:#080D28}
:root:not(.is-dark) .dr-nav a:hover,:root:not(.is-dark) .dr-nav a[aria-current="page"]{background:rgba(10,115,129,.08)}
:root:not(.is-dark) .dr-nav a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--acc-d)}:root:not(.is-dark)[dir="rtl"] .dr-nav a[aria-current="page"]{box-shadow:inset -3px 0 0 var(--acc-d)}
:root:not(.is-dark) .dr-opts{border-top-color:#DAD8D0}
:root:not(.is-dark) .dr-lbl,:root:not(.is-dark) .tsw-st{color:#4A5070}
:root:not(.is-dark) .seg{background:#F4F3EF;border-color:#DAD8D0}
:root:not(.is-dark) .seg span{color:#4A5070}
:root:not(.is-dark) .dr-head img{content:url(../brand/kev_horizontal_light.svg)}
:root:not(.is-dark) .tsw{border-color:#C9D6DA}
:root:not(.is-dark) footer{background:#ECEAE3;color:#4A5070;border-top-color:#DAD8D0}
:root:not(.is-dark) footer .fb{border-top-color:#D3D0C6}
:root:not(.is-dark) footer a{color:#080D28}
:root:not(.is-dark) .media,:root:not(.is-dark) .ph{background:radial-gradient(70% 60% at 30% 30%,rgba(18,217,232,.18),transparent 70%),#E6F2F4;color:#3F4766}
:root:not(.is-dark) .sl-card{box-shadow:0 10px 40px rgba(10,115,129,.12),0 2px 10px rgba(8,13,40,.06)}
:root:not(.is-dark) footer .ft img{content:url(../brand/kev_horizontal_light.svg)}
.scrub-on>*{transition:box-shadow .25s,border-color .25s!important}
/* ===== contacts + payment methods ===== */
.contacts{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.ct-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.contacts a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font:600 .95rem var(--f-en);padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.contacts a:hover{border-color:var(--hl)}
.contacts svg{color:var(--hl);flex:none}
.contacts .ct-wa{background:#15803D;border-color:#15803D;color:#fff}.contacts .ct-wa svg{color:#fff}
.contacts .ct-wa:hover{border-color:#116B33;background:#116B33}
.ct-tag{font-size:.8rem;color:var(--mute);font-weight:700}
.contacts.sm a{font-size:.85rem;padding:6px 12px}
footer .ft-ct{border-top:1px solid currentColor;border-top-color:color-mix(in srgb,currentColor 20%,transparent);padding-top:18px}
footer .contacts a{color:inherit;background:transparent}footer .contacts .ct-wa{color:#fff;background:#15803D}
.drawer .dr-ct .contacts{margin:0}.drawer .contacts a{color:inherit;background:transparent}.drawer .contacts .ct-wa{color:#fff;background:#15803D}
.paybox{margin-top:40px;padding:clamp(20px,3vw,32px);border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.paybox.sm{margin-top:14px;padding:14px;background:transparent}
.paym{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.paym li{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);border-radius:999px;font-weight:700;font-size:.9rem;background:var(--bg);color:var(--ink)}
.paym svg{color:var(--hl)}
.paybox.sm .paym li{font-size:.8rem;padding:6px 10px}
:root footer .contacts a.ct-wa,:root .drawer .contacts a.ct-wa,:root .contacts a.ct-wa{color:#fff}
/* ===== imagery ===== */
.pic{display:block;width:100%;height:100%;overflow:hidden}
.pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.media,.ph{position:relative;overflow:hidden;padding:0!important;background:#080D28!important}
.media .pic,.ph .pic{position:absolute;inset:0}
.work:hover .pic img,.svc:hover .media .pic img,.svc-hero:hover .pic img{transform:scale(1.05)}
.ctag{position:absolute;top:12px;inset-inline-start:12px;z-index:2;font:700 .7rem var(--f-en);letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(8,13,40,.6);color:#E8FBFD;border:1px solid rgba(18,217,232,.4);backdrop-filter:blur(6px)}
:root[lang="ar"] .ctag{font-family:var(--f-ar);letter-spacing:0;text-transform:none}
.svc-hero{margin:0 0 32px;border-radius:var(--r);overflow:hidden;aspect-ratio:16/7;border:1px solid var(--line)}
@media (max-width:760px){.svc-hero{aspect-ratio:16/10}}
@media (prefers-reduced-motion:reduce){.pic img{transition:none}.work:hover .pic img,.svc:hover .media .pic img,.svc-hero:hover .pic img{transform:none}}

/* ================= v19 ================= */
/* ---- 4) type scale per language (same visual mass in RTL/LTR) ---- */
:root{--fs-body:1.0625rem;--lh-body:1.72;--fs-lead:clamp(1.05rem,1.6vw,1.3rem);--lh-lead:1.65;
 --fs-display:clamp(2.6rem,8.4vw,7.2rem);--fs-h1:clamp(2.3rem,6.4vw,5rem);--fs-h2:clamp(2rem,5.2vw,4rem);--fs-h3:clamp(1.3rem,2.2vw,1.8rem);--fs-h3b:clamp(1.6rem,3vw,2.4rem);--fs-h4:1.15rem;
 --fw-head:800;--fw-h3:700;--lh-head:1.06;--lh-h3:1.2;--ls-head:-.035em;--ls-h3:-.012em;--fs-btn:1rem;--fw-btn:700;--fs-nav:.93rem;--fw-nav:600;--fs-eyebrow:.78rem;--ls-eyebrow:.22em}
:root[lang="ar"]{--fs-body:1.125rem;--lh-body:1.9;--fs-lead:clamp(1.12rem,1.7vw,1.38rem);--lh-lead:1.85;
 --fs-display:clamp(2.75rem,8.6vw,7.4rem);--fs-h1:clamp(2.45rem,6.6vw,5.2rem);--fs-h2:clamp(2.1rem,5.3vw,4.1rem);--fs-h3:clamp(1.36rem,2.3vw,1.88rem);--fs-h3b:clamp(1.68rem,3.1vw,2.5rem);--fs-h4:1.22rem;
 --fw-head:700;--fw-h3:700;--lh-head:1.3;--lh-h3:1.45;--ls-head:0;--ls-h3:0;--fs-btn:1.05rem;--fw-btn:700;--fs-nav:1rem;--fw-nav:600;--fs-eyebrow:.92rem;--ls-eyebrow:0}
body{font:400 var(--fs-body)/var(--lh-body) var(--f)}
h1,h2,:root[lang="en"] h1,:root[lang="en"] h2{font-weight:var(--fw-head);line-height:var(--lh-head);letter-spacing:var(--ls-head)}
h3{font-weight:var(--fw-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
.display{font-size:var(--fs-display)}.h2{font-size:var(--fs-h2)}.page-hero h1{font-size:var(--fs-h1)}
.box h3{font-size:var(--fs-h3)}.box.big h3{font-size:var(--fs-h3b)}.work h3,.card h2,.card h3,.pkg h3{font-size:var(--fs-h4);font-size:calc(var(--fs-h4) * 1.12)}.work h3{font-size:var(--fs-h4)}
.lead{font-size:var(--fs-lead);line-height:var(--lh-lead)}
.btn{font:var(--fw-btn) var(--fs-btn)/1.2 var(--f)}.btn.sm{font-size:calc(var(--fs-btn) * .92)}
nav a{font-size:var(--fs-nav);font-weight:var(--fw-nav)}
.eyebrow,:root[lang="ar"] .eyebrow{font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow)}
:root[lang="ar"] :is(h1,h2,h3,h4,p,li,a,button,label,summary,.btn,.badge,.ctag,.eyebrow,.wp-lbl,.ba-tag){letter-spacing:0}
:root[lang="ar"] .display .hl,:root[lang="ar"] h1 .hl,:root[lang="ar"] h2 .hl{font-weight:800}

/* ---- 3) theme personality ---- */
:root:not(.is-dark){--off:#F6F5F1;--paper:#FFFFFF;--line:#D6D3C8;--mute:#454B69}
:root:not(.is-dark) :is(.box,.card,.pkg,.work,.paybox,.formcard){box-shadow:0 1px 2px rgba(8,13,40,.04),0 10px 28px -18px rgba(8,13,40,.16)}
:root:not(.is-dark) .pkg.hl{box-shadow:0 1px 2px rgba(8,13,40,.05),0 18px 40px -22px rgba(10,115,129,.4)}
.pkg{padding:clamp(26px,3vw,36px);gap:16px}.pkg ul{gap:8px}
:root:not(.is-dark) .prose{line-height:1.9}:root:not(.is-dark) .prose h2{margin-top:22px}
:root.is-dark{--off:#070B20;--paper:#0D1435;--line:#1F2852;--mute:#AEB6DA;--bg:var(--off);--surface:var(--paper)}
:root.is-dark .dark,:root.is-dark [data-band="dark"]{--bg:#050817;--surface:#0B1131;--line:#1C244B}
:root.is-dark body{background:#070B20}
:root.is-dark .band[data-band="dark"],:root.is-dark .page-hero{box-shadow:inset 0 0 180px rgba(0,0,0,.55)}
:root.is-dark :is(.box,.card,.pkg,.work,.paybox){background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 42%),var(--surface);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
:root.is-dark .hl{text-shadow:0 0 22px rgba(18,217,232,.32)}
:root.is-dark .btn:not(.ghost):not(:active){box-shadow:0 0 0 1px rgba(18,217,232,.25),0 10px 30px -12px rgba(18,217,232,.6)}
:root.is-dark .km{box-shadow:0 24px 60px -24px rgba(0,0,0,.85),0 0 0 1px rgba(18,217,232,.10)}
:root.is-dark .km .pic img{filter:contrast(1.06) saturate(1.08)}
:root.is-dark .km .ba-before .pic img{filter:none}

/* ---- 1) studio motifs (sparing, behind content) ---- */
.has-studio{isolation:isolate;overflow:hidden}
.has-studio>.wrap,.edge>.wrap{position:relative;z-index:1}
.studio{position:absolute;z-index:0;pointer-events:none;color:var(--hl);opacity:.2}
.studio svg{display:block;width:100%;height:auto}
.studio .sv-vf{stroke-width:1.4}.studio .sv-af{stroke-dasharray:5 6;opacity:.65}.studio .sv-tick{opacity:.6}
.studio .sv-w1{stroke-width:1.3}.studio .sv-w2{stroke-width:1;opacity:.5}
.st-hero{inset-inline-end:-1%;top:50%;width:min(44vw,600px);transform:translateY(-40%)}
.st-head{inset-inline-end:-3%;top:clamp(36px,6vw,90px);width:min(40vw,520px);opacity:.13}
.st-cta{inset-inline-start:-5%;bottom:-30px;width:min(40vw,540px);opacity:.11}
:root.is-dark .studio{opacity:.17}:root.is-dark .st-head{opacity:.1}:root.is-dark .st-cta{opacity:.09}
:root[dir="rtl"] .studio svg{transform:scaleX(-1)}
@media (max-width:760px){.st-hero{width:78vw;inset-inline-end:-28vw;opacity:.11!important}.st-head{width:64vw;inset-inline-end:-26vw;top:24px;opacity:.08!important}.st-cta{display:none}}
.edge::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(48% 55% at 100% 0%,rgba(10,115,129,.07),transparent 70%),radial-gradient(40% 50% at 0% 100%,rgba(119,57,247,.04),transparent 70%)}
:root.is-dark .edge::before{background:radial-gradient(48% 55% at 100% 0%,rgba(18,217,232,.10),transparent 70%),radial-gradient(40% 50% at 0% 100%,rgba(119,57,247,.08),transparent 70%)}

/* ---- 2) custom media cards ---- */
.km{position:relative;overflow:hidden;isolation:isolate;background:#05081A}
.ph.km{display:block}
.svc-hero.km{display:block;margin:0 0 32px}
.km .ctag{z-index:4}
/* waveform player */
.km-wp .wp-bg{position:absolute;inset:0}.km-wp .wp-bg img{filter:brightness(.62)!important}
.km-wp::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 35%,rgba(5,8,26,.75));pointer-events:none}
.wp{position:absolute;inset-inline:12px;bottom:12px;z-index:3;display:flex;gap:12px;align-items:center;padding:10px 14px 10px 10px;border-radius:16px;background:rgba(5,8,26,.78);border:1px solid rgba(18,217,232,.28);color:#EAF6FF;direction:ltr}
.wp-btn{flex:none;width:48px;height:48px;border-radius:50%;border:0;background:#12D9E8;color:#050817;display:grid;place-items:center;cursor:pointer;padding:0}
.wp-btn svg{width:22px;height:22px}.wp .i-pause,.wp.on .i-play{display:none}.wp.on .i-pause{display:block}
:root .wp.on .wp-btn{box-shadow:0 0 0 6px rgba(18,217,232,.16),0 0 26px rgba(18,217,232,.55)}
.wp-main{flex:1;min-width:0;display:grid;gap:4px}
.wp-top{display:flex;justify-content:space-between;align-items:center;gap:8px;line-height:1.2}
.wp-lbl{font:700 .74rem var(--f);color:#9FEFF6}.wp-lbl.ar{font-family:var(--f-ar)}.wp-lbl.en{font-family:var(--f-en);letter-spacing:.04em}
:root[lang="ar"] .wp-top{flex-direction:row-reverse}
.wp-time{font:600 .74rem var(--mono);color:#C9D2F2;white-space:nowrap}.wp-time b{color:#fff}
.wp-wave{--p:0;position:relative;overflow:hidden;height:38px;cursor:pointer;touch-action:none;border-radius:4px}
.wp-wave svg{position:absolute;inset:0;width:100%;height:100%}
.wp-s0{fill:rgba(201,210,242,.38)}.wp-s1{fill:#12D9E8;clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0)}
.wp-head{position:absolute;top:0;bottom:0;left:calc(var(--p) * 100%);width:2px;margin-left:-1px;background:#fff;border-radius:2px;box-shadow:0 0 8px #12D9E8}
.wp-wave:focus-visible,.wp-btn:focus-visible{outline:2px solid #12D9E8;outline-offset:3px}
.svc-hero .wp{inset-inline:clamp(14px,3vw,32px);bottom:clamp(14px,3vw,28px);max-width:640px}
/* before / after */
.ba{--x:50;position:absolute;inset:0;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ba .pic{position:absolute;inset:0}.ba img{pointer-events:none;-webkit-user-drag:none}
.ba-before{position:absolute;inset:0;z-index:1;clip-path:inset(0 calc(100% - var(--x) * 1%) 0 0)}
:root[dir="rtl"] .ba-before{clip-path:inset(0 0 0 calc(100% - var(--x) * 1%))}
.ba-h{position:absolute;top:0;bottom:0;z-index:3;inset-inline-start:calc(var(--x) * 1%);width:44px;margin-inline-start:-22px;display:grid;place-items:center;outline:none}
.ba-h::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.45)}
.ba-h i{position:relative;width:42px;height:42px;border-radius:50%;background:#fff;color:#080D28;display:grid;place-items:center;box-shadow:0 4px 18px rgba(0,0,0,.4);transition:transform .2s}
.ba-h svg{width:20px;height:20px}
.ba-h:focus-visible i{box-shadow:0 0 0 3px #12D9E8,0 4px 18px rgba(0,0,0,.4)}
.ba.drag .ba-h i{transform:scale(1.1)}
.ba-tag{position:absolute;bottom:12px;z-index:2;font:700 .74rem/1.2 var(--f);padding:5px 11px;border-radius:999px;background:rgba(5,8,26,.7);color:#fff;pointer-events:none}
.ba-b{inset-inline-start:12px}.ba-a{inset-inline-end:12px}
:root .km-ba:hover .pic img{transform:none}
/* device frame */
.km-dev{background:radial-gradient(60% 70% at 50% 25%,rgba(37,139,255,.30),transparent 70%),radial-gradient(40% 45% at 88% 92%,rgba(119,57,247,.25),transparent 70%),#05081A}
.dev{--rx:0deg;--ry:0deg;position:absolute;inset:0;container-type:size;display:grid;place-items:center;perspective:1200px}
.dev-lap{position:relative;width:min(70cqw,112cqh);transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s var(--ease)}
.dev-scr{overflow:hidden;background:#000;--max:0px;--dur:6s}
.dev-lap .dev-scr{aspect-ratio:16/10;border:solid #1A1F36;border-width:7px 7px 9px;border-radius:12px 12px 3px 3px;box-shadow:0 24px 50px -10px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)}
.dev-base{display:block;height:9px;margin:0 -8%;background:linear-gradient(#323A5E,#151a33);border-radius:0 0 14px 14px;box-shadow:0 10px 24px rgba(0,0,0,.5)}
.dev-ph{position:absolute;width:min(17cqw,27cqh);inset-inline-end:8cqw;bottom:9cqh;transform:rotateX(var(--rx)) rotateY(var(--ry)) translateZ(40px);transition:transform .5s var(--ease)}
.dev-ph .dev-scr{aspect-ratio:9/19;border:4px solid #1A1F36;border-radius:16px;box-shadow:0 18px 40px -8px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
.dev-scr img{display:block;width:100%;height:auto;transform:translateY(0);transition:transform var(--dur) cubic-bezier(.45,0,.55,1)}
.dev:hover .dev-scr img{transform:translateY(var(--max))}
.dev:hover .dev-lap{--rx:2deg}
.dev.auto .dev-scr img{animation:devscroll calc(var(--dur) * 2) ease-in-out .6s infinite alternate}
@keyframes devscroll{0%,8%{transform:none}92%,100%{transform:translateY(var(--max))}}
@media (prefers-reduced-motion:reduce){.dev:hover .dev-scr img,.dev.auto .dev-scr img{transform:none!important;animation:none!important}.dev-lap,.dev-ph{transform:none!important}}
/* viewfinder (branding) */
.km-vf .vf{position:absolute;inset:7%;width:86%;height:86%;z-index:2;fill:none;stroke:#fff;stroke-width:1.6;opacity:.75;pointer-events:none;transition:inset .6s var(--ease),width .6s var(--ease),height .6s var(--ease),opacity .4s}
.km-vf:hover .vf,.work:hover .km-vf .vf{inset:10%;width:80%;height:80%;opacity:.95}
/* services catalogue thumbs */
.cthumb{margin:-28px -28px 6px;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r) var(--r) 0 0;background:#05081A}
.cthumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.card:hover .cthumb img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.card:hover .cthumb img{transform:none}}
:root{--fs-sm:.88rem;--fs-xs:.74rem}:root[lang="ar"]{--fs-sm:.96rem;--fs-xs:.84rem}
.badge{font-size:var(--fs-xs)}.pills li,.crumbs,.work p{font-size:var(--fs-sm)}.pkg dl{font-size:calc(var(--fs-sm) * 1.06)}
.ba-tag,.wp-lbl.ar{font-size:var(--fs-xs)}:root[lang="ar"] .ctag{font-size:.78rem}
.page-hero p{font-size:calc(var(--fs-body) * 1.06)}

/* first paint matches theme (set by inline head script) */
html{background:#F6F5F1;color-scheme:light}
html.is-dark{background:#070B20;color-scheme:dark}
/* ===== v22 service visuals ===== */
/* equalizer (voice-over) */
.eqz{position:absolute;inset:16% 8% 36%;z-index:1;display:flex;align-items:center;justify-content:center;gap:1.4%;pointer-events:none}
.eqz i{flex:1;max-width:9px;height:calc(var(--h) * 100%);border-radius:3px;background:linear-gradient(180deg,#12D9E8,#258BFF 55%,#7739F7);opacity:.5;transform:scaleY(.25);transform-origin:50% 50%}
.km.live .eqz i{animation:eqb var(--s) ease-in-out var(--d) infinite alternate}
.km.playing .eqz i{opacity:.85;animation-duration:calc(var(--s) * .45)}
@keyframes eqb{0%{transform:scaleY(.18)}100%{transform:scaleY(1)}}
/* LED meters (sound engineering) */
.mtr{position:absolute;inset:12% 18% 36%;opacity:.85;z-index:1;display:flex;gap:3%;justify-content:center;pointer-events:none}
.mtr i{position:relative;width:5.5%;border-radius:4px;background:rgba(255,255,255,.06);overflow:hidden}
.mtr b{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(5,8,26,.9) 3px 5px),linear-gradient(0deg,#12D9E8 0%,#258BFF 55%,#7739F7 80%,#FF4D7A 100%)}
.mtr i::after{content:"";position:absolute;inset:0;background:rgba(9,13,34,.94);transform-origin:50% 0;transform:scaleY(.6)}
.km.live .mtr i::after{animation:mtr var(--s) cubic-bezier(.3,0,.2,1) var(--d) infinite alternate}
.km.playing .mtr i::after{animation-duration:calc(var(--s) * .4)}
@keyframes mtr{0%{transform:scaleY(.85)}35%{transform:scaleY(.3)}60%{transform:scaleY(.55)}100%{transform:scaleY(.08)}}
/* idle shimmer on waveform */
.wp-wave::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(18,217,232,.55),transparent);width:22%;mix-blend-mode:screen;opacity:0}

@keyframes shim{0%{transform:translateX(-30%)}100%{transform:translateX(480%)}}
.km.live .wp:not(.on) .wp-btn{animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(18,217,232,.45)}60%{box-shadow:0 0 0 10px rgba(18,217,232,0)}}
/* motion canvas */
.km-mg{background:#060A1F}.mg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* code typing */
.km-code{background:radial-gradient(60% 70% at 50% 25%,rgba(37,139,255,.28),transparent 70%),radial-gradient(40% 45% at 85% 90%,rgba(119,57,247,.25),transparent 70%),#05081A}
.cd{position:absolute;inset:0;container-type:size;display:grid;place-items:center}
.cd-lap{width:min(80cqw,128cqh)}
.cd-scr{position:relative;display:flex;flex-direction:column;background:#0A0F26!important}
.cd-bar{display:flex;align-items:center;gap:5px;padding:5px 9px;background:#11173A;border-bottom:1px solid #1F2852;font:600 9px/1 var(--mono);color:#7F8AB8;direction:ltr}
.cd-bar i{width:7px;height:7px;border-radius:50%;background:#FF5F57}.cd-bar i:nth-child(2){background:#FEBC2E}.cd-bar i:nth-child(3){background:#28C840}.cd-bar span{margin-inline-start:8px}
.cd-body{position:relative;flex:1;overflow:hidden;padding:8px 10px;direction:ltr;text-align:left}
.cd-pre{margin:0;font:500 clamp(8px,1.55cqw,12.5px)/1.55 var(--mono);color:#C9D2F2;white-space:pre-wrap;word-break:break-word;will-change:transform}
.k-c{color:#5F6B9A;font-style:italic}.k-t{color:#7FA6FF}.k-a{color:#12D9E8}.k-p{color:#C9D2F2}.k-s{color:#F5B86A}.k-x{color:#FFFFFF}.k-k{color:#B48CFF}.k-f{color:#5EE3B1}
.cd-cur{display:inline-block;width:.55em;height:1.1em;margin-inline-start:1px;vertical-align:-.18em;background:#12D9E8;box-shadow:0 0 8px #12D9E8;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.cd-ui{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity .45s ease,transform .6s var(--ease);pointer-events:none;background:#070B20}
.cd-ui img{width:100%;height:auto;display:block}
.cd.show .cd-ui{opacity:1;transform:none}

@keyframes flash{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
/* brand board */
.km-brand{background:#080D28}
.bb{position:absolute;inset:0;display:grid;grid-template-columns:1.05fr 1fr;grid-template-rows:1fr auto auto;gap:3%;padding:4.5%;container-type:size}
.bb-logo{grid-row:1/3;position:relative;display:grid;place-items:center;border-radius:14px;background:radial-gradient(closest-side,rgba(18,217,232,.18),transparent),#0B1131;border:1px solid rgba(18,217,232,.18);overflow:hidden}
.bb-logo img{width:72%;height:auto;max-height:86%;position:relative;z-index:1}
.bb-ring{position:absolute;width:80%;aspect-ratio:1;border-radius:50%;background:conic-gradient(from 0deg,transparent,rgba(18,217,232,.35),transparent 30%,rgba(119,57,247,.35),transparent 60%);opacity:.7}
.km.live .bb-ring{animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.bb-mk{grid-column:2;grid-row:1;position:relative;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.08);min-height:0}
.bb-mk picture{position:absolute;inset:0;opacity:0}.bb-mk picture:first-child{opacity:1}
.bb-mk img{width:100%;height:100%;object-fit:cover;display:block}
.km.live .bb-mk picture{animation:mk 9s ease-in-out calc(var(--i) * 3s - 9s) infinite;opacity:0}
@keyframes mk{0%{opacity:0;transform:scale(1.08)}8%,33%{opacity:1}41%,100%{opacity:0;transform:scale(1)}}
.bb-sw{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;align-self:end}
.bb-sw div{display:grid;gap:3px;min-width:0}
.bb-sw i{display:block;aspect-ratio:1.4;border-radius:8px;background:var(--c);border:1px solid rgba(255,255,255,.12);transform-origin:50% 100%}
.km.live .bb-sw i{animation:sw 4.5s var(--ease) calc(var(--i) * .12s) infinite}
@keyframes sw{0%,70%,100%{transform:none}10%{transform:translateY(-6px) scale(1.06)}}
.bb-sw b,.bb-sw span{font:600 clamp(6px,1.6cqw,10px)/1.2 var(--f-en);color:#C9D2F2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr;text-align:left}
.bb-sw span{color:#7F8AB8;font-family:var(--mono)}
.bb-type{grid-column:1/3;display:flex;align-items:baseline;gap:12px;color:#EAF6FF;direction:ltr}
.bb-type b{font:800 clamp(16px,6cqh,34px)/1 var(--f-en);background:linear-gradient(90deg,#7739F7,#258BFF,#12D9E8);-webkit-background-clip:text;background-clip:text;color:transparent}
.bb-type span{font:600 clamp(8px,2cqw,12px) var(--f-en);color:#A9B1D6;letter-spacing:.08em}
@media (prefers-reduced-motion:reduce){.eqz i,.mtr i::after,.bb-ring,.bb-mk picture,.bb-sw i,.wp-wave::after,.wp-btn,.cd-cur{animation:none!important}.eqz i{transform:scaleY(.7)}.mtr i::after{transform:scaleY(.4)}.bb-mk picture:first-child{opacity:1}}
/* promo video (video & motion) */
.svc-hero.km-vid{aspect-ratio:16/9;background:#060515}
.kv{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;background:#060515}
.kv-fr{position:relative;height:92%;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#060515;box-shadow:0 22px 50px -14px rgba(0,0,0,.75),0 0 0 1px rgba(18,217,232,.28),0 0 34px -6px rgba(122,40,255,.45)}
.kv-v{display:block;width:100%;height:100%;object-fit:contain;background:#060515;cursor:pointer}
.cthumb-v{position:relative}.cthumb-v .kv-fr{height:90%;border-radius:10px}.cthumb-v .kv-v{cursor:default}
.kv-snd{position:absolute;inset-inline-end:10px;bottom:10px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(18,217,232,.45);background:rgba(6,5,21,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#EAF6FF;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s,background .25s}
.kv-snd svg{width:20px;height:20px}.kv-snd .s-on{display:none}.kv.sound .kv-snd .s-on{display:inline}.kv.sound .kv-snd .s-off{display:none}
.kv.sound .kv-snd{background:linear-gradient(135deg,#00D2FF,#7A28FF);border-color:transparent;box-shadow:0 0 18px rgba(0,210,255,.55)}
.kv-snd:hover,.kv-snd:focus-visible{transform:scale(1.08);box-shadow:0 0 18px rgba(0,210,255,.5)}
.kv-full{position:absolute;left:50%;top:14px;translate:-50% 0;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:9px 16px;border-radius:999px;border:1px solid rgba(18,217,232,.5);background:rgba(6,5,21,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-weight:700;font-size:.85rem;cursor:pointer;transition:opacity .35s,transform .25s var(--ease)}
.kv-full svg{width:16px;height:16px;color:#00D2FF}.kv-full:hover{transform:scale(1.05)}
.kv.sound .kv-full{opacity:0;pointer-events:none}
@media (max-width:760px){.kv-fr{height:94%}.kv-full{font-size:.8rem;padding:8px 13px}}
/* sound engineering: real-audio meters */
.km.an .mtr i::after{animation:none!important;transform:scaleY(calc(1 - var(--lv,0)));transition:transform 60ms linear}
.cthumb-a{position:relative}.cthumb-a>.km{position:absolute;inset:0}
.cthumb-a .wp{inset-inline:8px;bottom:8px;padding:6px 10px 6px 6px;gap:8px}.cthumb-a .wp-btn{width:38px;height:38px}.cthumb-a .wp-lbl{font-size:.66rem}.cthumb-a .wp-wave{height:24px}
.km.an .eqz i{animation:none!important;opacity:.9;transform:scaleY(calc(.12 + var(--lv,0) * .88));transition:transform 60ms linear}
/* ===== P0: header CTA, CTA strips, portfolio media, testimonials, clients, form ===== */
.hdr-cta{min-height:40px;padding:0 16px;gap:8px;font-size:.9rem}
.fab-cta{display:none}
@media (max-width:720px){.hdr-cta{display:none}.fab-cta{position:fixed;z-index:65;inset-inline-end:16px;bottom:calc(16px + env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;border-radius:var(--pill);background:var(--acc);color:var(--on-acc);font:700 .95rem var(--f);text-decoration:none;box-shadow:0 12px 30px -10px rgba(8,13,40,.55)}}
.hdr-cta:focus-visible,.fab-cta:focus-visible,.cta-wa:focus-visible,.wf-btn:focus-visible,.wf-bars:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.cta-strip{margin-top:clamp(36px,5vw,56px);display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:space-between;padding:clamp(20px,3vw,30px);border:1px solid var(--line);border-radius:var(--r);background:color-mix(in srgb,var(--surface) 70%,transparent)}
.cta-strip>div:first-child{flex:1 1 280px;display:grid;gap:4px}
.cta-t{font-weight:800;font-size:clamp(1.15rem,2vw,1.4rem);color:var(--ink)}.cta-s{color:var(--mute);font-size:.95rem}
.cta-a{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cta-wa{display:inline-flex;gap:8px;font:600 .88rem var(--f-en);color:var(--ink)}
[data-band="dark"] .cta-strip{background:rgba(255,255,255,.04)}
/* portfolio media */
.work>.km,.work>.pf-vid,.work>.wf{aspect-ratio:16/9}
.pf-vid{position:relative;overflow:hidden;background:#060515;display:grid;place-items:center}
.pf-vbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(18px) brightness(.6);transform:scale(1.2)}
.pf-vid video{position:relative;height:100%;width:auto;max-width:100%;aspect-ratio:9/16;object-fit:cover;background:#060515}
.wf{position:relative;overflow:hidden;background:linear-gradient(135deg,#0B0726,#101A4A 60%,#0A2C46);color:#F1F3FF;display:grid;align-content:center;gap:14px;padding:22px 24px}
.wf-bg{position:absolute;inset:0;background:radial-gradient(circle at 85% 15%,rgba(119,57,247,.35),transparent 50%),radial-gradient(circle at 10% 90%,rgba(18,217,232,.22),transparent 50%);pointer-events:none}
.wf-lab{position:relative;font:700 .78rem var(--f);letter-spacing:.08em;color:#9EE9F0}
.wf-row{position:relative;direction:ltr;display:flex;align-items:center;gap:16px}
.wf-btn{flex:none;width:52px;height:52px;border-radius:50%;border:0;background:#12D9E8;color:#080D28;display:grid;place-items:center;cursor:pointer;transition:transform .2s var(--ease)}
.wf-btn:hover{transform:scale(1.06)}.wf .i-pause,.wf.on .i-play{display:none}.wf.on .i-pause{display:block}
.wf-bars{flex:1;height:64px;display:flex;align-items:center;gap:2px;cursor:pointer;min-width:0}
.wf-bars i{flex:1;min-width:1px;height:calc(var(--h) * 100%);border-radius:2px;background:rgba(241,243,255,.32);transition:background .15s}
.wf-bars i.p{background:linear-gradient(#12D9E8,#7739F7)}
.wf-t{position:relative;direction:ltr;font:600 .8rem var(--f-en);color:#C9CFEE;text-align:end}
.wf-t b{color:#fff}
/* testimonials */
.tsts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:980px){.tsts{grid-template-columns:1fr}}
.tst{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3vw,32px);display:grid;gap:18px;align-content:space-between}
.stars{display:flex;gap:3px;color:#F5B83D}
.tst blockquote{margin:0}.tst blockquote p{font-size:1.05rem;line-height:1.75;color:var(--ink)}
.who{display:flex;gap:12px;align-items:center}.who b{display:block}.who small{color:var(--mute);font-size:.88rem}
.av{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:800 1.05rem var(--f);color:#fff;background:linear-gradient(135deg,#7739F7,#258BFF 55%,#12D9E8)}
/* clients */
.clients{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
@media (max-width:1020px){.clients{grid-template-columns:repeat(3,1fr)}}@media (max-width:520px){.clients{grid-template-columns:repeat(2,1fr)}}
.cl{direction:ltr;display:flex;align-items:center;justify-content:center;gap:10px;min-height:88px;padding:14px;border:1px solid var(--line);border-radius:var(--r-s);color:var(--mute);transition:color .3s,border-color .3s}
.cl:hover{color:var(--ink);border-color:color-mix(in srgb,var(--hl) 60%,var(--line))}
.cl-n{display:grid;font:800 .95rem var(--f-en);letter-spacing:.14em;line-height:1.1}.cl-n small{font-weight:500;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;opacity:.8}
.demo-note{margin-top:18px;font-size:.8rem;color:var(--mute);opacity:.85}
/* form */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
#k-st.bad{color:#B3261E}#k-st.ok{color:var(--hl)}
:root[data-theme="dark"] #k-st.bad{color:#FFB0B0}
.thanks .row{display:flex;flex-wrap:wrap;gap:12px}
.hdr-cta{white-space:nowrap;flex:none}
header nav#nav a{white-space:nowrap;padding-inline:10px}
header nav#nav a[href="contact.html"]{display:none} /* replaced by the sticky header CTA */
@media (max-width:1280px){header nav#nav{display:none}.tools{margin-inline-start:auto}}
/* ===================== P1 layer: studio home, buttons, type balance, RTL ===================== */
/* type balance: Cairo renders taller than Montserrat at the same size — equalise optical size + shared line rhythm */
body{font-size:var(--fs-md);line-height:var(--lh-body)}
:root[lang="en"] body{font-size:calc(var(--fs-md) * .97)}
:root[lang="ar"] h1,:root[lang="ar"] h2,:root[lang="ar"] h3{line-height:1.3;letter-spacing:0}
:root[lang="en"] h1,:root[lang="en"] h2,:root[lang="en"] h3{line-height:var(--lh-tight)}
/* buttons: primary (solid cyan, navy ink = 11:1), secondary (brand-gradient hairline), ghost */
.btn{border-radius:var(--r-pill);transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2),background var(--dur-2),border-color var(--dur-2),color var(--dur-2)}
.btn.secondary{background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad-brand) border-box;border:1.5px solid transparent;color:var(--ink)}
.btn.secondary:hover{box-shadow:0 12px 30px -14px rgba(37,139,255,.55)}
.btn:focus-visible{outline:2px solid var(--c-cyan);outline-offset:3px;box-shadow:var(--focus-ring)}
/* cards: one radius/shadow/hover language */
.box,.tst,.work,.formcard,.panel{border-radius:var(--r-md)}
@media (hover:hover){.box,.tst,.cl{transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2),border-color var(--dur-2)}.box:hover,.tst:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}}
/* gradient accent rule under section eyebrows */
.head .h2::after{content:"";display:block;width:64px;height:3px;margin-block-start:var(--sp-5);border-radius:3px;background:var(--grad-brand)}
.contact-grid .head .h2::after{display:none}
/* ---------- cinematic hero ---------- */
.hero{padding-block:clamp(104px,14vw,140px) clamp(84px,10vw,120px);isolation:isolate}
:root.is-dark .hero{background:radial-gradient(70% 55% at 75% 30%,rgba(37,139,255,.16),transparent 70%),radial-gradient(50% 50% at 15% 85%,rgba(119,57,247,.14),transparent 70%),linear-gradient(180deg,#060A20 0%,var(--c-navy) 60%,#0A1030 100%)}
.hero .h-grid{display:grid;gap:clamp(36px,6vw,72px);align-items:center;grid-template-columns:1fr}
.hero .h-copy{display:grid;gap:var(--sp-5);max-width:40em}
@keyframes recb{50%{opacity:.2}}
.h-wave{position:absolute;inset-inline:0;inset-block-end:0;width:100%;height:56px;color:var(--c-cyan);opacity:.12;z-index:1;pointer-events:none;-webkit-mask:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);mask:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}
:root:not(.is-dark) .h-wave{color:var(--c-cyan-d);opacity:.14}
.hero .cue{display:none}

/* soft ambient light on dark bands (cinema hall); light bands stay clean */
:root.is-dark [data-band="dark"].band:not(.hero)::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 40% at 50% 0%,rgba(37,139,255,.07),transparent 70%)}
/* KEV logo stays crisp: no halo/glow */
.k-halo{display:none!important}
:root .brand:active{filter:none}
/* RTL: mirror directional glyphs */
:root[dir="rtl"] .dir-i,:root[dir="rtl"] .arrow{transform:scaleX(-1)}
.hp{position:absolute!important;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
@media (prefers-reduced-motion:reduce){.box:hover,.tst:hover{transform:none}}
.hero{min-height:min(100svh,940px)}
@media (min-width:820px){.hero .display{font-size:clamp(2.8rem,6vw,5.8rem)}:root[lang="en"] .hero .display{font-size:clamp(2.6rem,5.4vw,5.2rem)}}

/* ---------- P1b lightweight hero: CSS-only motif, one entrance, no loops ---------- */
.hero{position:relative;text-align:center;place-items:center}
.hero .h-copy{display:grid;gap:var(--sp-5);max-width:46em;justify-items:center;position:relative;z-index:2}
.hero .h-copy .lead{max-width:36em;margin-inline:auto}
.hero .h-cta{justify-content:center;flex-wrap:wrap;gap:12px}
.h-amb{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(55% 45% at 50% 38%,rgba(37,139,255,.14),transparent 70%),radial-gradient(40% 35% at 50% 80%,rgba(18,217,232,.07),transparent 70%)}
:root:not(.is-dark) .h-amb{background:radial-gradient(55% 45% at 50% 38%,rgba(18,217,232,.12),transparent 70%)}
.h-vf{position:absolute;z-index:1;pointer-events:none;inset:clamp(84px,11vw,120px) clamp(16px,5vw,72px) clamp(64px,8vw,96px)}
.h-vf i{position:absolute;width:clamp(28px,4vw,54px);height:clamp(28px,4vw,54px);border:1.5px solid currentColor;color:var(--c-cyan);opacity:.22}
:root:not(.is-dark) .h-vf i{color:var(--c-cyan-d);opacity:.3}
.h-vf i:nth-child(1){top:0;inset-inline-start:0;border-inline-end:0;border-block-end:0}
.h-vf i:nth-child(2){top:0;inset-inline-end:0;border-inline-start:0;border-block-end:0}
.h-vf i:nth-child(3){bottom:0;inset-inline-start:0;border-inline-end:0;border-block-start:0}
.h-vf i:nth-child(4){bottom:0;inset-inline-end:0;border-inline-start:0;border-block-start:0}
.hero .h-wave{opacity:.09;height:48px}
.hero .h-in{animation:hIn .6s cubic-bezier(.2,.7,.2,1) both}
.hero .h-in:nth-child(2){animation-delay:.06s}.hero .h-in:nth-child(3){animation-delay:.12s}.hero .h-in:nth-child(4){animation-delay:.18s}
@keyframes hIn{from{opacity:.01;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero .h-in{animation:none}}
.kv-play{position:absolute;inset:0;margin:auto;z-index:3;width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(5,8,26,.6);color:#fff;display:grid;place-items:center;cursor:pointer}.kv-play svg{width:26px;height:26px}.kv.on .kv-play{display:none}

/* ---------- P1c: production hero restored (faint KEV logo behind headline) + lightweight motion ---------- */
.hero{text-align:start;place-items:center stretch}
.hero .h-copy{justify-items:start;max-width:none;gap:28px}
.hero .h-copy .lead{margin-inline:0}
.hero .h-cta{justify-content:flex-start}
.hero .h-vf{display:none}
.hero .motif{z-index:1}
.k-br{animation:kBreath 9s ease-in-out 2.6s infinite;transform-origin:50% 45%;will-change:transform}
@keyframes kBreath{0%,100%{transform:scale(1) translate3d(0,0,0)}50%{transform:scale(1.035) translate3d(0,-6px,0)}}
.k-br{position:relative}.k-br>.kl{display:block}
.motif .h-ap{transform-box:view-box;transform-origin:0 0;color:var(--c-cyan);opacity:.5;animation:apSpin 60s linear infinite;will-change:transform}
@keyframes apSpin{to{transform:rotate(360deg)}}

@keyframes hSweep{0%{transform:translate3d(-120%,0,0) skewX(-12deg)}55%,100%{transform:translate3d(330%,0,0) skewX(-12deg)}}
.hero .h-wave .wb{transform-box:fill-box;transform-origin:center;animation:wbB 1.6s ease-in-out infinite alternate}
.wb1{animation-delay:-.3s!important;animation-duration:1.3s!important}.wb2{animation-delay:-.7s!important}.wb3{animation-delay:-1.1s!important;animation-duration:1.9s!important}.wb4{animation-delay:-.5s!important;animation-duration:1.45s!important}
@keyframes wbB{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.hero .h-wave{opacity:.14}
.h-words .w{display:inline-block;animation:hW .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.12s + var(--i)*.16s)}
@keyframes hW{from{opacity:.01;transform:translate3d(0,.45em,0) scale(.96)}to{opacity:1;transform:none}}
.hero .eyebrow.h-in{animation-delay:0s}.hero .lead.h-in{animation-delay:.55s}.hero .h-cta.h-in{animation-delay:.7s}
/* play only while visible */
.anim-off,.anim-off *{animation-play-state:paused!important}
/* scroll reveal variety */
.rv.rv-l{transform:translate3d(-48px,0,0)}:root[dir="rtl"] .rv.rv-l{transform:translate3d(48px,0,0)}:root[dir] .rv.rv-l.in{transform:none}
.rv.rv-s{transform:scale(.92)}
.rv.rv-l.in,.rv.rv-s.in{transform:none}
/* card tilt */
.tilt{transform-style:preserve-3d}
.tilt.tilting{transform:perspective(900px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)) translateY(-3px)!important;transition:transform .12s linear!important}
/* service icons */
.sv-ico{width:44px;height:44px;color:var(--hl);display:block;margin-block-end:12px;overflow:visible}
.sv-ico *{transform-box:fill-box;transform-origin:center}
.i-mic .p{animation:icPulse 1.8s ease-out infinite}
@keyframes icPulse{0%{transform:scale(.7);opacity:.8}100%{transform:scale(1.5);opacity:0}}
.i-ap .bl{animation:icAp 3.2s ease-in-out infinite}
@keyframes icAp{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(60deg) scale(.55)}}
.i-code .c{animation:icType 2.4s steps(1) infinite;opacity:0}.i-code .c2{animation-delay:.4s}.i-code .c3{animation-delay:.8s}
@keyframes icType{0%{opacity:0}15%,80%{opacity:1}100%{opacity:0}}
.i-film .f{animation:icRoll 1.6s linear infinite}
@keyframes icRoll{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-8px,0)}}
.i-eq .e{animation:wbB .9s ease-in-out infinite alternate;transform-origin:bottom}.i-eq .e2{animation-delay:-.3s}.i-eq .e3{animation-delay:-.6s}.i-eq .e4{animation-delay:-.2s}
.i-id .s{animation:apSpin 8s linear infinite}
/* clients marquee */
.marq{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq .clients{display:flex;width:max-content;grid-template-columns:none;animation:marq 32s linear infinite}
.marq .clients .cl{width:200px;flex:none}
.marq:hover .clients{animation-play-state:paused}
@keyframes marq{to{transform:translate3d(-50%,0,0)}}
:root[dir="rtl"] .marq .clients{animation-name:marqr}
@keyframes marqr{to{transform:translate3d(50%,0,0)}}
/* buttons: light sweep */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translate3d(-110%,0,0);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.btn:hover::after{transform:translate3d(110%,0,0)}
.btn.mag{transition:translate .25s ease-out,transform var(--dur-2) var(--ease),box-shadow var(--dur-2),background var(--dur-2)}
/* animated heading underline */
.head .h2::after{background:linear-gradient(90deg,#7739F7,#258BFF,#12D9E8,#7739F7);background-size:300% 100%;transform-origin:var(--o-s,left);transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.7,.2,1) .25s;animation:ulG 6s linear infinite}
:root[dir="rtl"] .head .h2::after{--o-s:right}
.head .h2.in::after,.no-js .head .h2::after{transform:scaleX(1)}
@keyframes ulG{to{background-position:300% 0}}
@media (prefers-reduced-motion:reduce){.marq .clients{animation:none;flex-wrap:wrap;width:auto}.head .h2::after{transform:none}.h-words .w{animation:none}}
.hero:not(.ld) .wb,.hero:not(.ld) .h-sweep,.hero:not(.ld) .h-ap,.hero:not(.ld) .k-br{animation:none}
.h-words .w{animation-duration:.6s;animation-delay:calc(.05s + var(--i)*.1s)}.hero .lead.h-in{animation-delay:.15s}.hero .h-cta.h-in{animation-delay:.25s}
/* v23 QA fixes */
.contacts{container-type:inline-size}
.contacts>.ct-row:has(.ct-wa){display:grid;grid-template-columns:12.75rem 9.5rem;justify-content:start;align-items:stretch}
.contacts .ct-row>a.ct-call,.contacts .ct-row>a.ct-wa{justify-content:center;min-width:0}
@container (max-width:372px){.contacts>.ct-row:has(.ct-wa){grid-template-columns:minmax(0,22.25rem)}}
@media (max-width:720px){footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}}
@media (max-width:760px){:root:not(.is-dark) .hero .motif{--o:.3}}
@media (min-width:1100px){:root:not(.is-dark) .hero .motif{--o:.2}.hero .h-copy h1{text-shadow:0 0 18px var(--bg,#fff),0 0 2px var(--bg,#fff)}}
.ab-grid{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:820px){.ab-grid{grid-template-columns:minmax(0,1fr)}}
.ab-grid .box{padding:22px;display:grid;gap:6px;align-content:start}.ab-grid p{color:var(--mute)}
.ab-note{color:var(--mute);font-size:var(--fs-sm);margin-top:6px}
.ab-av{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--hl);color:var(--surface);font:800 1.2rem var(--f-en)}
.hp{position:absolute!important;inset:auto!important;left:0!important;top:0!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}
html{overflow-x:clip}

/* passing glow/shine sweeps removed (v23j) */
.h-sweep,.sl-shine{display:none!important}

.pf-vh video{width:100%;height:100%;max-width:none;aspect-ratio:16/9;object-fit:contain;background:#060515}
.kv-fr,.kv .kv-fr{width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none}
.kv-v{object-fit:contain}
.km:has(>.kv),.svc-hero.km-vid{aspect-ratio:16/9!important;height:auto!important;min-height:0!important;width:100%;max-width:100%;align-self:center}
.sm-on .rv{transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 110ms)}
.sm-on .rv.rv-z{transform:translate3d(0,44px,0) scale(.93)}
.sm-on .rv.rv-z.in{transform:none}
.sm-on .rv.rv-l{transform:translate3d(0,32px,0)}
.sm-on .tilt.tilting{transition:transform .12s linear!important}

@media (prefers-reduced-motion:reduce){.rv,.sm-on .rv{opacity:1!important;transform:none!important}}