/* Dash Solutions — home. Logical properties only, so the same CSS serves AR (rtl) and EN (ltr). */

@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/ibm-plex-sans-arabic-arabic-300-normal.woff2") format("woff2");font-weight:300;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/ibm-plex-sans-arabic-latin-300-normal.woff2") format("woff2");font-weight:300;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2");font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/ibm-plex-sans-arabic-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/ibm-plex-sans-arabic-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --brand:#7145ff; --brand-hover:#5d32db; --brand-soft:#eee9ff; --lav:#b9a6ff;
  --bg:#faf9fc; --surface:#fff; --surface-2:#f2eff8; --ink:#17131f; --muted:#655f70;
  --line:#ded9e7; --ctl:#82798f;
  --r-ctl:12px; --r-card:20px; --r-lg:28px;
  --shadow:0 8px 24px rgb(23 19 31/6%);
  --ease:cubic-bezier(.2,.8,.2,1);
  --pad:clamp(20px,5vw,48px); --sec:clamp(64px,10vw,112px);
  --f:"IBM Plex Sans Arabic",system-ui,sans-serif; --fs:var(--f);
  color-scheme:light;
}
:root[data-theme=dark]{
  --bg:#17131f; --surface:#211b2c; --surface-2:#2a2338; --ink:#f6f3fb; --muted:#b3abc2;
  --line:#372f47; --ctl:#8b82a0; --brand-soft:#2d2347; --shadow:none;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html.lenis,html.lenis body{block-size:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
html{scroll-padding-block-start:calc(96px + var(--promo-h,0px));-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:1.0625rem;line-height:1.8;overflow-x:clip}
html[lang|=en] body{font-size:1rem;line-height:1.65}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,blockquote,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px}
.sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
.wrap{inline-size:min(100% - var(--pad)*2,1280px);margin-inline:auto}
section{padding-block:var(--sec)}

/* headings */
h1,h2,h3{font-weight:700;letter-spacing:0;text-wrap:balance}
html[lang|=en] :is(h1,h2){letter-spacing:-.03em}
h1{font-size:clamp(2.5rem,6.2vw + .5rem,4.5rem);line-height:1.3}
html[lang|=en] h1{font-size:clamp(2.6rem,6.4vw + .5rem,5rem);line-height:1.08}
h2{font-size:clamp(1.75rem,3.4vw + .6rem,2.75rem);line-height:1.4}
html[lang|=en] h2{line-height:1.15}
h3{font-size:1.4rem;line-height:1.45}
em{font-style:normal;font-weight:inherit;color:var(--brand)}
:root[data-theme=dark] em{color:var(--lav)}
.lead{font-size:1.25rem;line-height:1.8;color:var(--muted);max-inline-size:44ch}

/* the dash — brand motif */
.dash{display:inline-block;inline-size:2.2em;block-size:.34em;background:var(--brand);transform:skewX(-28deg);border-radius:2px}
.eyebrow{display:flex;align-items:center;gap:12px;font-weight:500;color:var(--brand);margin-block-end:20px;font-size:1rem}
:root[data-theme=dark] .eyebrow{color:var(--lav)}
.eyebrow .dash{inline-size:28px;block-size:8px}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:24px;margin-block-end:clamp(32px,5vw,56px)}
.sec-head h2{max-inline-size:20ch}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-block-size:52px;padding-inline:26px;border-radius:var(--r-ctl);font-weight:700;text-decoration:none;border:2px solid transparent;transition:background .16s,color .16s,border-color .16s,transform .16s var(--ease)}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-hover)}
.btn-primary:active{background:#4d24bc;transform:scale(.98)}
.btn-ghost{border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bg)}
.btn svg{inline-size:20px;block-size:20px;flex:none}
[dir=rtl] .btn .arr{transform:scaleX(-1)}

/* header */
.hdr{position:sticky;inset-block-start:var(--promo-h,0px);z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);border-block-end:1px solid transparent;transition:border-color .2s}
.hdr.stuck{border-color:var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:24px;block-size:72px}
@media(min-width:1024px){.hdr .wrap{block-size:88px}}
.logo{display:block;flex:none}
.logo img{block-size:34px;inline-size:auto;display:none}
html[lang|=ar][data-theme=light] .logo .ar-d,html[lang|=ar][data-theme=dark] .logo .ar-w,
html[lang|=en][data-theme=light] .logo .en-d,html[lang|=en][data-theme=dark] .logo .en-w{display:block}
.nav{display:none;margin-inline-start:auto;gap:4px}
.nav a{padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:500;color:var(--muted);transition:color .16s,background .16s}
.nav a:hover{color:var(--ink);background:var(--surface-2)}
.tools{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.ico-btn{display:grid;place-items:center;min-inline-size:44px;min-block-size:44px;padding-inline:12px;border-radius:var(--r-ctl);border:1px solid var(--line);font-weight:500;font-size:.95rem;transition:background .16s,border-color .16s}
.ico-btn:hover{background:var(--surface-2);border-color:var(--ctl)}
.ico-btn svg{inline-size:20px;block-size:20px}
.sun{display:none}
[data-theme=dark] .sun{display:block}[data-theme=dark] .moon{display:none}
.hdr .btn{display:none;min-block-size:44px;padding-inline:20px}
.burger{display:grid}
.mnav{display:none;border-block-start:1px solid var(--line);background:var(--bg)}
.mnav.open{display:block}
.mnav a{display:block;padding:16px var(--pad);font-weight:500;text-decoration:none;border-block-end:1px solid var(--line)}
@media(min-width:1024px){.nav{display:flex}.tools{margin-inline-start:0}.hdr .btn{display:inline-flex}.burger,.mnav{display:none!important}}

/* hero */
.hero{padding-block:clamp(40px,7vw,96px) clamp(48px,7vw,88px);position:relative;overflow:clip}
.hero-grid{display:grid;gap:56px;align-items:center}
@media(min-width:1024px){.hero-grid{grid-template-columns:1.05fr .95fr}}
.hero h1{margin-block:8px 28px}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:36px}
.stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:clamp(20px,5vw,56px);margin-block-start:clamp(40px,6vw,64px);padding-block-start:28px;border-block-start:1px solid var(--line)}
.stat b{display:block;font-size:clamp(2rem,4vw,3rem);line-height:1.1;font-weight:700;font-variant-numeric:tabular-nums}
.stat b i{font-style:normal;color:var(--brand)}
:root[data-theme=dark] .stat b i{color:var(--lav)}
.stat>span{color:var(--muted);font-size:.95rem}
/* hero reel: one large frame cycling through real work; the brand dash is the timer */
.collage{position:relative;aspect-ratio:1/1.02;max-inline-size:560px;inline-size:100%;margin-inline:auto;perspective:1200px}
.collage::before{content:"";position:absolute;inset:6% 4%;background:var(--brand);transform:skewX(-8deg);border-radius:var(--r-lg);opacity:.95}
:root[data-theme=dark] .collage::before{background:linear-gradient(160deg,#5d32db,#7145ff)}
.reel{position:absolute;inset-block:12%;inset-inline:0 7%;display:grid;align-content:center;gap:22px;transform:rotateY(calc(var(--px,0)*-7deg)) rotateX(calc(var(--py,0)*5deg));transition:transform .5s var(--ease)}
.frame{background:var(--surface);border-radius:14px;overflow:hidden;box-shadow:0 28px 64px rgb(23 19 31/32%);border:1px solid rgb(255 255 255/10%)}
.frame::before{content:"";display:block;block-size:22px;background:var(--surface-2);background-image:radial-gradient(circle,var(--ctl) 2.5px,transparent 3px),radial-gradient(circle,var(--ctl) 2.5px,transparent 3px),radial-gradient(circle,var(--ctl) 2.5px,transparent 3px);background-size:14px 22px;background-repeat:no-repeat;background-position:10px 50%,24px 50%,38px 50%}
.slides{display:grid}
.slide{grid-area:1/1;position:relative;overflow:hidden;opacity:0;transition:opacity .6s var(--ease)}
.slide.on{opacity:1}
.slide img{inline-size:100%;block-size:auto;aspect-ratio:4/3;object-fit:cover;object-position:top;transform:scale(1.06);transition:transform 4.5s linear}
.slide.on img{transform:none}
.slide figcaption{position:absolute;inset-block-end:12px;inset-inline-start:12px;display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:10px;background:var(--surface);color:var(--ink);font-size:.9rem;box-shadow:var(--shadow)}
.slide figcaption span{color:var(--muted)}
.tick{inline-size:64px;block-size:8px;background:rgb(255 255 255/30%);transform:skewX(-28deg);border-radius:2px;overflow:hidden;--o:left}
[dir=rtl] .tick{--o:right}
.tick i{display:block;inline-size:100%;block-size:100%;background:#fff;transform:scaleX(0);transform-origin:var(--o);animation:fill 4s linear 1.2s infinite}
.reel:hover .tick i{animation-play-state:paused}
@keyframes fill{to{transform:scaleX(1)}}
/* hero entrance — one orchestrated moment */
.js .hero [data-in]{opacity:0;transform:translateY(16px);animation:rise .7s var(--ease) forwards;animation-delay:calc(var(--i,0)*90ms + 80ms)}
@keyframes rise{to{opacity:1;transform:none}}
.js .hero h1[data-in]{animation-name:wipe;animation-duration:.9s}
@keyframes wipe{from{clip-path:inset(-12% -4% 100% -4%);transform:translateY(.3em)}to{opacity:1;clip-path:inset(-12% -4% -12% -4%);transform:none}}
.hero h1{isolation:isolate}
.hero h1 em{position:relative;display:inline-block}
.hero h1 em::after{content:"";position:absolute;inset-inline:-.12em;inset-block-end:.1em;block-size:.3em;background:var(--brand-soft);z-index:-1;transform:skewX(-28deg) scaleX(0);transform-origin:var(--o,left);animation:draw .7s var(--ease) 1s forwards}
[dir=rtl] .hero h1 em::after{--o:right}
@keyframes draw{to{transform:skewX(-28deg) scaleX(1)}}
.js .collage{opacity:0;animation:rise .9s var(--ease) .35s forwards}

/* projects */
.work-grid{display:grid;gap:36px 24px}
@media(min-width:640px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.work-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{display:flex;flex-direction:column;gap:18px;text-decoration:none}
.shot{--p:7%;aspect-ratio:1.45;padding:var(--p) var(--p) 0;border-radius:var(--r-card);background:var(--brand-soft);overflow:hidden;transition:background .3s}
.card:nth-child(3n+2) .shot{background:var(--brand)}
.card:nth-child(3n) .shot{background:#17131f}
:root[data-theme=dark] .card:nth-child(3n) .shot{background:#2a2338}
.win{border-radius:10px 10px 0 0;overflow:hidden;background:var(--surface);box-shadow:0 18px 40px rgb(23 19 31/25%);transition:transform .5s var(--ease)}
.win::before{content:"";display:block;block-size:22px;background:var(--surface-2);background-image:radial-gradient(circle,var(--ctl) 2.5px,transparent 3px),radial-gradient(circle,var(--ctl) 2.5px,transparent 3px),radial-gradient(circle,var(--ctl) 2.5px,transparent 3px);background-size:14px 22px;background-repeat:no-repeat;background-position:10px 50%,24px 50%,38px 50%}
.win img{inline-size:100%;block-size:auto;display:block}
.vp{aspect-ratio:1440/1000;overflow:hidden;container-type:size}
.vp img{transform:translateY(0);transition:transform .8s var(--ease);will-change:transform}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.card:hover .vp img{transform:translateY(calc(-100% + 100cqh));transition:transform 8s cubic-bezier(.45,.05,.3,1)}}
.card:hover .win{transform:translateY(-10px)}
.card-t{display:flex;justify-content:space-between;align-items:center;gap:16px}
.card-t h3{font-size:1.3rem}
.card p{color:var(--muted);font-size:.97rem;line-height:1.7;margin-block-start:-8px}
.tag{display:inline-block;padding:2px 12px;border-radius:99px;background:var(--brand-soft);color:var(--brand-hover);font-size:.85rem;font-weight:500;white-space:nowrap}
:root[data-theme=dark] .tag{color:var(--lav)}

/* products for sale */
.prods{display:grid;gap:24px}
.prod{position:relative;display:flex;flex-direction:column;text-decoration:none;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);border:1px solid var(--line);transition:border-color .24s,transform .3s var(--ease)}
.prod:hover{border-color:var(--brand);transform:translateY(-4px)}
.pv{position:relative;background:var(--brand);padding:clamp(22px,4vw,44px) clamp(22px,4vw,44px) 0;overflow:hidden;isolation:isolate}
.pv::before{content:"";position:absolute;inset-block:-20%;inset-inline-end:8%;inline-size:22%;background:rgb(255 255 255/10%);transform:skewX(-28deg);z-index:-1}
.sale{position:absolute;inset-block-start:18px;inset-inline-start:18px;z-index:2;padding:4px 16px;border-radius:99px;background:#17131f;color:#fff;font-size:.9rem;font-weight:700}
.mkwrap{margin-block-start:36px}
.mk{display:grid;gap:8px;aspect-ratio:16/10;padding:12px;border-radius:12px 12px 0 0;background:var(--surface);box-shadow:0 20px 44px rgb(0 0 0/28%);transition:transform .5s var(--ease)}
.prod:hover .mk{transform:translateY(-8px)}
.mk b,.mk i{display:block;border-radius:6px;background:var(--surface-2)}
.mk-m{grid-template-columns:22% 1fr}
.mk-m .side{display:grid;align-content:start;gap:6px;padding:8px;background:var(--surface-2)}
.mk-m .side b{block-size:8px;background:var(--ctl);opacity:.5}.mk-m .side b:first-child{background:var(--brand);opacity:1}
.mk-m .main{display:grid;grid-template-rows:auto 1fr auto;gap:8px;min-inline-size:0}
.mk-m .kp{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.mk-m .kp b{block-size:22px}
.mk-m .chart{display:flex;align-items:end;gap:6px;padding:8px;background:var(--surface-2);border-radius:6px}
.mk-m .chart b{flex:1;block-size:var(--h);background:var(--brand);border-radius:3px 3px 0 0}
.mk-m .rows{display:grid;gap:5px}.mk-m .rows b{block-size:9px}
.mk-t{grid-template-rows:1.1fr auto 1fr}
.mk-t .hero{display:grid;align-content:end;gap:6px;padding:12px;border-radius:8px;background:#17131f}
.mk-t .hero b{block-size:9px;background:rgb(255 255 255/70%)}.mk-t .hero b:first-child{inline-size:62%;block-size:14px;background:#fff}.mk-t .hero b:last-child{inline-size:38%;background:var(--lav)}
.mk-t .people{display:flex;gap:8px;justify-content:center}
.mk-t .people i{inline-size:26px;block-size:26px;border-radius:50%;background:var(--ctl);opacity:.55}
.mk-t .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mk-t .cards b{border-block-start:4px solid var(--brand)}
.mk-c{grid-template-rows:auto auto 1fr;align-content:stretch}
.mk-c .st{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.mk-c .st b{block-size:22px;border-block-end:3px solid var(--ctl)}
.mk-c .st b:nth-child(1){border-color:var(--brand)}.mk-c .st b:nth-child(2){border-color:var(--lav)}.mk-c .st b:nth-child(3){border-color:#17131f}
.mk-c .fb{display:flex;gap:6px}.mk-c .fb b{flex:1;block-size:14px}.mk-c .fb b:first-child{flex:2}.mk-c .fb b:last-child{flex:0 0 18%;background:var(--brand)}
.mk-c .rw{display:grid;grid-auto-rows:1fr;gap:6px}
.mk-c .r{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:4px 8px;border-radius:6px;background:var(--surface-2)}
.mk-c .r i{inline-size:18px;block-size:18px;border-radius:50%;background:var(--ctl);opacity:.55}
.mk-c .r span{display:grid;gap:3px}.mk-c .r span b{block-size:5px;inline-size:58%;background:var(--ctl);opacity:.55}.mk-c .r span b+b{inline-size:34%;opacity:.3}
.mk-c .r .p{inline-size:30px;block-size:10px;border-radius:99px;background:var(--brand)}.mk-c .r .p2{background:var(--lav)}.mk-c .r .p3{background:#17131f}
.mk-c .r.on{box-shadow:inset 3px 0 0 var(--brand);background:var(--brand-soft)}
[dir=rtl] .mk-c .r.on{box-shadow:inset -3px 0 0 var(--brand)}
.pb{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,3vw,32px)}
.pb .tag{align-self:start}
.pb h3{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.pd{color:var(--muted);max-inline-size:40ch}
.more{display:inline-flex;align-items:center;gap:10px;margin-block-start:8px;font-weight:700;color:var(--brand)}
:root[data-theme=dark] .more{color:var(--lav)}
.more svg{inline-size:20px;block-size:20px;transition:transform .3s var(--ease)}
[dir=rtl] .more svg{transform:scaleX(-1)}
.prod:hover .more svg{transform:translateX(4px)}
[dir=rtl] .prod:hover .more svg{transform:scaleX(-1) translateX(4px)}

/* client logos — auto-scrolling strip */
.others{margin-block-start:56px}
.others h3{font-size:1.05rem;margin-block-end:20px;color:var(--muted);font-weight:500}
.mq{overflow:clip;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);--d:-1}
[dir=rtl] .mq{--d:1}
.logos{display:flex;gap:14px;inline-size:max-content;animation:mq 42s linear infinite}
.mq:hover .logos{animation-play-state:paused}
@keyframes mq{to{transform:translateX(calc(50% * var(--d)))}}
.logos li{flex:none}
.logos a{display:grid;place-items:center;inline-size:160px;block-size:92px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);transition:border-color .24s}
.logos img{max-inline-size:100%;max-block-size:56px;inline-size:auto;block-size:auto;object-fit:contain;filter:grayscale(1);opacity:.65;transition:filter .3s,opacity .3s}
.logos a:hover{border-color:var(--brand)}
.logos a:hover img{filter:none;opacity:1}

/* about — violet block with a ruled capability grid */
.vio-box{position:relative;overflow:hidden;isolation:isolate;background:var(--brand);color:#fff;border-radius:var(--r-lg);padding:clamp(28px,6vw,88px)}
.vio-box::before,.vio-box::after{content:"";position:absolute;background:rgb(255 255 255/9%);transform:skewX(-28deg);z-index:-1}
.vio-box::before{inset-block:-10%;inset-inline-end:10%;inline-size:16%}
.vio-box::after{inset-block:20%;inset-inline-end:30%;inline-size:5%}
.vio-box .eyebrow{color:#fff}
.vio-box .dash{background:#fff}
.statement{font-size:clamp(1.7rem,4.2vw + .4rem,3.6rem);line-height:1.5;font-weight:700;max-inline-size:26em;margin-block-end:clamp(28px,4vw,48px);text-wrap:pretty}
html[lang|=en] .statement{line-height:1.25;letter-spacing:-.02em}
.statement .w{opacity:.3;transition:opacity .25s}
.statement .w.on{opacity:1}
.vio-sub{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;margin-block-end:clamp(36px,6vw,72px)}
.vio-sub .lead{color:rgb(255 255 255/88%);max-inline-size:56ch}
.vio-sub .btn{background:#fff;color:#17131f}
.vio-sub .btn:hover{background:#17131f;color:#fff}
.ruled{display:grid;border-block-start:1px solid rgb(255 255 255/30%);border-inline-start:1px solid rgb(255 255 255/30%)}
@media(min-width:640px){.ruled{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.ruled{grid-template-columns:repeat(4,1fr)}}
.ruled li{display:flex;flex-direction:column;justify-content:space-between;gap:36px;min-block-size:210px;padding:24px;border-block-end:1px solid rgb(255 255 255/30%);border-inline-end:1px solid rgb(255 255 255/30%);transition:background .3s,color .3s}
.ruled li:hover,.ruled li.hl{background:#fff;color:#17131f}
.ruled svg{inline-size:30px;block-size:30px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ruled li:hover svg,.ruled li.hl svg{stroke:var(--brand)}
.ruled h3{font-size:1.2rem;margin-block-end:6px}
.ruled p{font-size:.95rem;line-height:1.65;color:rgb(255 255 255/85%)}
.ruled li:hover p,.ruled li.hl p{color:#655f70}

/* process — cards fly in and gather into one deck while the section is pinned */
.story-track{--n:5;block-size:calc(100svh + var(--n)*55svh);position:relative}
.story-pin{position:sticky;inset-block-start:0;block-size:100svh;display:flex;align-items:center;overflow:clip}
.story-grid{display:grid;gap:28px;align-items:center}
@media(min-width:900px){.story-grid{grid-template-columns:1fr 1.15fr;gap:64px}}
.story-text h2{margin-block-end:28px}
.rail{display:none}
@media(min-width:900px){.rail{display:grid;gap:0;border-inline-start:2px solid var(--line)}}
.rail li{padding:10px 24px;color:var(--muted);font-weight:500;position:relative;transition:color .3s}
.rail li::before{content:"";position:absolute;inset-inline-start:-2px;inset-block:0;inline-size:2px;background:var(--brand);transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)}
.rail li.on{color:var(--ink)}.rail li.on::before{transform:scaleY(1)}
.deck{position:relative;block-size:clamp(360px,60svh,500px);inline-size:min(100%,540px);margin-inline:auto;--dir:1}
[dir=rtl] .deck{--dir:-1}
.scard{--t:1;--fx:0;--fy:0;--fr:0;--tx:0;--ty:0;--tr:0;position:absolute;inset-inline:0;inset-block-start:0;block-size:calc(100% - 4*34px);padding:26px 28px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);box-shadow:0 18px 40px rgb(23 19 31/12%);z-index:var(--z);
  transform:translate3d(calc((1 - var(--t))*var(--fx)*1% + var(--t)*var(--tx)*var(--dir)*1px),calc((1 - var(--t))*var(--fy)*1% + var(--t)*var(--ty)*1px),0) rotate(calc((1 - var(--t))*var(--fr)*1deg + var(--t)*var(--tr)*1deg));
  opacity:min(1,calc(var(--t)*3));will-change:transform}
.scard:nth-child(1){--z:1;--fx:-150;--fy:-90;--fr:-16;--tx:-26;--ty:0;--tr:-2}
.scard:nth-child(2){--z:2;--fx:160;--fy:-70;--fr:14;--tx:-13;--ty:34;--tr:1.2}
.scard:nth-child(3){--z:3;--fx:-130;--fy:110;--fr:12;--tx:0;--ty:68;--tr:-1}
.scard:nth-child(4){--z:4;--fx:150;--fy:120;--fr:-12;--tx:13;--ty:102;--tr:1.6}
.scard:nth-child(5){--z:5;--fx:0;--fy:170;--fr:8;--tx:26;--ty:136;--tr:-.6;background:var(--brand);color:#fff;border-color:var(--brand)}
.scard{display:flex;flex-direction:column}
.scard ul{display:grid;gap:8px;margin-block-start:16px;padding-block-start:14px;border-block-start:1px solid var(--line);font-weight:500;font-size:.97rem}
.scard li{display:flex;align-items:center;gap:12px}
.scard li::before{content:"";flex:none;inline-size:14px;block-size:5px;background:var(--brand);transform:skewX(-28deg)}
.scard .need{margin-block-start:auto;padding-block-start:12px;font-size:.92rem;color:var(--muted)}
.scard .need b{font-family:inherit;font-size:inherit;font-weight:700;line-height:inherit;color:var(--ink)}
.scard:nth-child(5) ul{border-color:rgb(255 255 255/30%)}.scard:nth-child(5) li::before{background:#fff}
.scard:nth-child(5) .need,.scard:nth-child(5) .need b{color:#fff}
.scard header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-block-end:12px}
.scard h3{font-size:1.35rem}
.scard b{font-weight:700;font-size:1.6rem;color:var(--brand);line-height:1}
.scard:nth-child(5) b,.scard:nth-child(5) p{color:#fff}
:root[data-theme=dark] .scard:not(:nth-child(5)) b{color:var(--lav)}
.scard p{color:var(--muted);font-size:1rem;line-height:1.75}
@media(max-width:899px){.scard{padding:20px 22px}.deck{block-size:clamp(330px,56svh,440px)}.scard .need{display:none}.scard ul{margin-block-start:10px;padding-block-start:10px;gap:6px;font-size:.9rem}.story-text h2{margin-block-end:8px}.story-text .eyebrow{margin-block-end:12px}}

/* testimonials — carousel */
.car{position:relative}
.track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-block:4px;overscroll-behavior-x:contain}
.track::-webkit-scrollbar{display:none}
.quote{flex:none;inline-size:min(86%,440px);scroll-snap-align:start;display:flex;flex-direction:column;gap:20px;padding:32px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);margin:0}
.stars{display:flex;gap:4px;color:var(--brand)}
:root[data-theme=dark] .stars{color:var(--lav)}
.stars svg{inline-size:18px;block-size:18px;fill:currentColor}
.quote blockquote{font-size:1.1rem;line-height:1.85;flex:1}
.quote figcaption{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.95rem;line-height:1.5}
.quote figcaption b{color:var(--ink)}
.av{inline-size:40px;block-size:40px;border-radius:50%;background:var(--brand-soft);display:grid;place-items:center;font-weight:700;color:var(--brand-hover)}
:root[data-theme=dark] .av{color:var(--lav)}
.quote .todo{font-size:.8rem;color:var(--muted);border:1px dashed var(--ctl);padding:2px 10px;border-radius:99px;align-self:start}
.car-ui{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-block-start:28px}
.dots{display:flex;gap:8px}
.dots button{inline-size:10px;block-size:10px;border-radius:99px;background:var(--line);transition:inline-size .3s var(--ease),background .3s;position:relative}
.dots button::before{content:"";position:absolute;inset:-17px -4px}
.dots button.on{inline-size:28px;background:var(--brand)}
.arrows{display:flex;gap:8px}
.arrows .ico-btn:disabled{opacity:.35;cursor:default}
.arrows .ico-btn:not(:disabled):hover{background:var(--brand);border-color:var(--brand);color:#fff}
.arrows svg{inline-size:20px;block-size:20px}
.arrows .prev svg{transform:scaleX(-1)}
[dir=rtl] .arrows .prev svg{transform:none}
[dir=rtl] .arrows .next svg{transform:scaleX(-1)}

/* faq */
.faq{max-inline-size:860px;margin-inline:auto}
.faq details{border-block-start:1px solid var(--line)}
.faq details:last-child{border-block-end:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:24px;font-size:1.2rem;font-weight:500;cursor:pointer;list-style:none;min-block-size:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;inline-size:14px;block-size:14px;background:linear-gradient(var(--brand),var(--brand)) center/100% 2px no-repeat,linear-gradient(var(--brand),var(--brand)) center/2px 100% no-repeat;transition:transform .22s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-block-end:24px;color:var(--muted);max-inline-size:68ch}
@supports(interpolate-size:allow-keywords){.faq{interpolate-size:allow-keywords}.faq details::details-content{block-size:0;overflow:clip;transition:block-size .22s var(--ease),content-visibility .22s allow-discrete}.faq details[open]::details-content{block-size:auto}}

/* cta */
.cta-box{position:relative;overflow:hidden;background:var(--brand);color:#fff;border-radius:var(--r-lg);padding:clamp(40px,8vw,96px) clamp(24px,6vw,80px);text-align:center;isolation:isolate}
.cta-box::before,.cta-box::after{content:"";position:absolute;inset-block:-10%;inline-size:18%;background:rgb(255 255 255/9%);transform:skewX(-28deg);z-index:-1}
.cta-box::before{inset-inline-start:8%}.cta-box::after{inset-inline-end:14%;inline-size:8%}
.cta-box h2{max-inline-size:18ch;margin-inline:auto;margin-block-end:20px}
.cta-box em{color:#fff;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.2em}
.cta-box p{max-inline-size:48ch;margin-inline:auto;margin-block-end:36px;color:rgb(255 255 255/90%);font-size:1.15rem}
.cta-box .btn{background:#fff;color:#17131f}
.cta-box .btn:hover{background:#17131f;color:#fff}
.cta-box .btn.o{background:transparent;color:#fff;border-color:#fff}
.cta-box .btn.o:hover{background:#fff;color:#17131f}
.cta-box .row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* footer */
.ftr{background:#17131f;color:#f6f3fb;padding-block:80px 32px;margin-block-start:var(--sec)}
.ftr-g{display:grid;gap:44px}
@media(min-width:700px){.ftr-g{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.ftr-g{grid-template-columns:1.6fr .8fr 1fr 1.2fr;gap:56px}}
.ftr .logo img{block-size:60px}
html[lang|=ar] .ftr .logo .ar-w,html[lang|=en] .ftr .logo .en-w{display:block}
.ftr p{color:#b3abc2;max-inline-size:38ch;margin-block-start:20px}
.ftr h3{font-size:1rem;color:#b3abc2;font-weight:500;margin-block-end:16px}
.ftr li a{display:inline-block;padding-block:6px;text-decoration:none}
.ftr li a:hover{color:var(--lav)}
.soc{display:flex;gap:10px;margin-block-start:24px}
.soc a{display:grid;place-items:center;inline-size:44px;block-size:44px;border:1px solid #372f47;border-radius:50%;transition:background .2s,border-color .2s,color .2s}
.soc a:hover{background:var(--brand);border-color:var(--brand)}
.soc svg{inline-size:18px;block-size:18px;fill:currentColor}
.ftr-cta p{margin-block:0 20px}
.ftr-cta .btn{background:var(--brand);color:#fff;inline-size:100%}
.ftr-cta .btn:hover{background:#fff;color:#17131f}
.ftr-b{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-block-start:56px;padding-block-start:24px;border-block-start:1px solid #372f47;color:#b3abc2;font-size:.9rem}

/* scroll progress + reveal (progressive enhancement) */
.bar{position:fixed;inset-block-start:0;inset-inline:0;block-size:3px;background:var(--brand);transform-origin:var(--o,left);transform:scaleX(0);z-index:60}
[dir=rtl] .bar{--o:right}
@supports(animation-timeline:scroll()){.bar{animation:grow linear both;animation-timeline:scroll(root)}@keyframes grow{to{transform:scaleX(1)}}}
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.js .rv.on{opacity:1;transform:none}

/* theme/lang switch */
::view-transition-old(root),::view-transition-new(root){animation-duration:.4s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv,.js .hero [data-in],.js .collage{opacity:1;transform:none;clip-path:none}
  .hero h1 em::after{transform:skewX(-28deg)}.tick{display:none}
  .story-track{block-size:auto}.story-pin{position:static;block-size:auto}.story-grid{padding-block:var(--sec)}
  .statement .w{opacity:1}
  .logos{animation:none;flex-wrap:wrap;inline-size:auto}.logos li[aria-hidden]{display:none}.mq{mask-image:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* product detail pages */
.ph{padding-block:clamp(40px,7vw,88px) var(--sec)}
.ph-grid{display:grid;gap:40px;align-items:center}
@media(min-width:1024px){.ph-grid{grid-template-columns:1fr 1fr;gap:72px}}
.ph .lead{margin-block:20px 32px}
.ph .row{display:flex;flex-wrap:wrap;gap:12px}
.back{display:inline-flex;gap:8px;align-items:center;margin-block-end:24px;color:var(--muted);text-decoration:none;font-weight:500}
.back:hover{color:var(--brand)}
.ph .pv{border-radius:var(--r-lg)}
.spec{display:grid;gap:40px}
@media(min-width:900px){.spec{grid-template-columns:1.4fr 1fr;gap:72px}}
.spec h2{font-size:1.6rem;margin-block-end:20px}
.fl{display:grid;gap:0;border-block-start:1px solid var(--line)}
.fl li{padding-block:16px;border-block-end:1px solid var(--line);display:flex;gap:14px;align-items:start;font-weight:500}
.fl li::before{content:"";flex:none;inline-size:14px;block-size:5px;margin-block-start:.7em;background:var(--brand);transform:skewX(-28deg)}
.fl small{display:block;color:var(--muted);font-weight:400;font-size:.95rem}
.side-box{padding:28px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);display:grid;gap:24px;align-content:start}
.side-box h3{font-size:1.1rem;margin-block-end:8px}
.side-box ul{display:grid;gap:6px;color:var(--muted)}
.side-box .ltr{direction:ltr;text-align:start}

@media(min-width:800px){.prods{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.prods{grid-template-columns:repeat(3,1fr)}}

/* floating WhatsApp: fixed to the physical right edge on every page; pops in, pulses, asks how it can help */
.wa-fab{position:fixed;right:1.25rem;bottom:1.25rem;z-index:90;width:56px;height:56px;display:grid;place-items:center;background:#25d366;color:#fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 8px 22px rgba(0,0,0,.28);transition:background-color .3s var(--ease)}
.wa-fab svg{width:28px;height:28px}
.wa-fab:hover{background:#1ebe5a}
.wa-fab:focus-visible{outline:2px solid #000;outline-offset:3px;box-shadow:0 0 0 5px #fff}
.wa-fab::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25d366;z-index:-1;opacity:0;pointer-events:none}
.wa-fab__msg{position:absolute;right:calc(100% + 14px);inset-block-start:50%;margin-block-start:-1.35rem;white-space:nowrap;padding:.55rem 1rem;background:#fff;color:#000;font-size:.95rem;font-weight:500;line-height:1.6;opacity:0;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.14),0 8px 24px rgba(0,0,0,.28)}
.wa-fab__msg::after{content:"";position:absolute;right:-6px;inset-block-start:50%;margin-block-start:-6px;width:12px;height:12px;background:#fff;clip-path:polygon(0 0,100% 50%,0 100%)}
.wa-fab:hover .wa-fab__msg,.wa-fab:focus-visible .wa-fab__msg{animation:none;opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){
  .wa-fab{animation:wa-in .7s var(--ease) 1.2s backwards;isolation:isolate}
  .wa-fab::before{animation:wa-ring 2.8s ease-out 2.2s infinite}
  .wa-fab:hover::before{animation:none}
  .wa-fab__msg{animation:wa-msg 8s ease 3.5s both}
}
@keyframes wa-in{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes wa-ring{0%{opacity:.55;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.7)}}
@keyframes wa-msg{0%{opacity:0;transform:translateX(10px)}7%,88%{opacity:1;transform:none}100%{opacity:0;transform:translateX(10px)}}

/* project popup */
.dlg{border:0;padding:0;border-radius:var(--r-lg);inline-size:min(92vw,560px);max-block-size:92svh;background:var(--surface);color:var(--ink);box-shadow:0 30px 80px rgb(0 0 0/40%)}
.dlg::backdrop{background:rgb(23 19 31/62%);backdrop-filter:blur(4px)}
.dlg[open]{animation:dlg-in .3s var(--ease)}
@keyframes dlg-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.dlg form{position:relative;display:grid;gap:16px;padding:clamp(24px,4vw,40px)}
.dlg h2{font-size:1.75rem;line-height:1.3;padding-inline-end:48px}
.dlg-p{color:var(--muted);margin-block-start:-8px}
.dlg-x{position:absolute;inset-block-start:16px;inset-inline-end:16px;display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:50%;border:1px solid var(--line);transition:background .16s}
.dlg-x:hover{background:var(--surface-2)}
.dlg-x svg{inline-size:20px;block-size:20px}
.dlg label{display:grid;gap:6px;font-weight:500}
.dlg input:not([type=hidden]),.dlg select,.dlg textarea{inline-size:100%;min-block-size:52px;padding:12px 16px;font:inherit;color:inherit;background:var(--bg);border:1px solid var(--ctl);border-radius:var(--r-ctl);transition:border-color .16s}
.dlg textarea{min-block-size:144px;resize:vertical;line-height:1.7}
.dlg input:focus,.dlg select:focus,.dlg textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 25%,transparent)}
.dlg [aria-invalid=true]{border-color:#b42318}
.dlg-err{color:#b42318;font-weight:500}
:root[data-theme=dark] .dlg-err{color:#ff8a7a}
.dlg .btn{inline-size:100%}

/* inner pages */
.nav a[aria-current=page]{color:var(--ink);background:var(--surface-2)}
.pg-h{padding-block:clamp(48px,8vw,104px) clamp(24px,4vw,48px)}
.pg-h h1{max-inline-size:18ch;margin-block-end:20px}
html[lang|=en] .pg-h h1{max-inline-size:20ch}
.two{display:grid;gap:40px;align-items:start}
@media(min-width:900px){.two{grid-template-columns:1fr 1fr;gap:72px}}
.prose p{margin-block-end:1.2em;max-inline-size:62ch;font-size:1.1rem}
.prose h2{font-size:1.5rem;margin-block:1.6em .6em}
.band{background:var(--surface-2);border-radius:var(--r-lg)}
.vals{display:grid;gap:16px}
@media(min-width:640px){.vals{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.vals{grid-template-columns:repeat(4,1fr)}}
.vals li{padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}
.vals h3{font-size:1.15rem;margin-block-end:8px}
.vals p{color:var(--muted);font-size:.97rem;line-height:1.7}
.vals .dash{margin-block-end:20px;inline-size:34px;block-size:8px}
.svc{display:grid;gap:20px;padding-block:44px;border-block-start:1px solid var(--line);scroll-margin-block-start:100px}
@media(min-width:900px){.svc{grid-template-columns:.9fr 1.1fr;gap:72px}}
.svc h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-block-end:12px}
.svc p{color:var(--muted);max-inline-size:48ch}
.svc.hl{background:var(--brand);color:#fff;border:0;border-radius:var(--r-lg);padding:clamp(28px,5vw,56px);margin-block-end:24px}
.svc.hl p{color:rgb(255 255 255/88%)}
.svc.hl .fl{border-color:rgb(255 255 255/30%)}.svc.hl .fl li{border-color:rgb(255 255 255/30%)}.svc.hl .fl li::before{background:#fff}
.fchips{display:flex;flex-wrap:wrap;gap:10px;margin-block-end:32px}
.fchips a{padding:8px 20px;border:1px solid var(--line);border-radius:99px;text-decoration:none;font-weight:500;transition:background .16s,color .16s,border-color .16s}
.fchips a:hover{border-color:var(--brand)}
.fchips a[aria-current]{background:var(--brand);border-color:var(--brand);color:#fff}
[hidden]{display:none!important}
.card.rv .shot img{object-position:top}
.meta{display:grid;gap:0;border-block-start:1px solid var(--line)}
.meta div{display:flex;justify-content:space-between;gap:16px;padding-block:14px;border-block-end:1px solid var(--line)}
.meta dt{color:var(--muted)}.meta dd{margin:0;font-weight:700;text-align:end}
.cs-top{display:grid;gap:32px;align-items:end}
@media(min-width:900px){.cs-top{grid-template-columns:1.4fr 1fr;gap:72px}}
.cs-shot{--p:5%;padding:var(--p) var(--p) 0;background:var(--brand);border-radius:var(--r-lg);overflow:hidden}
.cs-shot .win{box-shadow:0 24px 60px rgb(0 0 0/30%)}
.cs-sec{display:grid;gap:16px;padding-block:36px;border-block-start:1px solid var(--line)}
@media(min-width:900px){.cs-sec{grid-template-columns:.6fr 1.4fr;gap:72px}}
.cs-sec h2{font-size:1.4rem}
.cs-body{display:grid;gap:16px;max-inline-size:62ch}
.cs-body p{line-height:1.9}
.todo-box{padding:22px 24px;border:1px dashed var(--ctl);border-radius:var(--r-card);color:var(--muted)}
.nxt{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-block:36px;border-block-start:1px solid var(--line)}
.nxt a{font-size:1.3rem;font-weight:700;text-decoration:none}
.nxt a:hover{color:var(--brand)}
.person{display:grid;gap:28px;padding:clamp(24px,4vw,48px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
@media(min-width:700px){.person{grid-template-columns:auto 1fr;align-items:center}}
.pavatar{display:grid;place-items:center;inline-size:140px;block-size:140px;border-radius:50%;background:var(--brand);color:#fff;font-family:var(--fs);font-size:3.4rem}
.person h2{font-size:1.8rem}
.person .role{color:var(--brand);font-weight:700;margin-block:4px 14px}
.person p{color:var(--muted);max-inline-size:56ch}
.posts{display:grid;gap:28px}
@media(min-width:700px){.posts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.posts{grid-template-columns:repeat(3,1fr)}}
.post{display:flex;flex-direction:column;gap:16px;text-decoration:none}
.pcover{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:16/10;border-radius:var(--r-card);background:var(--brand);display:flex;align-items:flex-end;padding:20px;color:#fff;font-weight:700;transition:transform .4s var(--ease)}
.post:nth-child(2) .pcover{background:#17131f}.post:nth-child(3) .pcover{background:var(--brand-hover)}
.pcover::before,.pcover::after{content:"";position:absolute;background:rgb(255 255 255/10%);transform:skewX(-28deg);z-index:-1}
.pcover::before{inset-block:-10%;inset-inline-end:14%;inline-size:22%}.pcover::after{inset-block:30%;inset-inline-end:42%;inline-size:7%}
.post:hover .pcover{transform:translateY(-4px)}
.post h3{font-size:1.25rem;line-height:1.5}
.post p{color:var(--muted);font-size:.97rem;line-height:1.7}
.article{max-inline-size:720px;margin-inline:auto}
.article h1{font-size:clamp(2rem,4.4vw,3.2rem);max-inline-size:none;margin-block:12px 28px}
.article p{font-size:1.15rem;line-height:1.95;margin-block-end:1.3em}
.cgrid{display:grid;gap:32px;align-items:start}
@media(min-width:900px){.cgrid{grid-template-columns:1.25fr .75fr;gap:56px}}
.cform{padding:clamp(24px,4vw,40px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.cform form{display:grid;gap:16px}
.cform label{display:grid;gap:6px;font-weight:500}
.cform input:not([type=hidden]),.cform select,.cform textarea{inline-size:100%;min-block-size:52px;padding:12px 16px;font:inherit;color:inherit;background:var(--bg);border:1px solid var(--ctl);border-radius:var(--r-ctl)}
.cform textarea{min-block-size:160px;resize:vertical;line-height:1.7}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 25%,transparent)}
.cform [aria-invalid=true]{border-color:#b42318}
.cform .btn{inline-size:100%}
.cinfo{display:grid;gap:16px}
.cinfo a.row{display:flex;align-items:center;gap:16px;padding:20px 24px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);text-decoration:none;transition:border-color .2s}
.cinfo a.row:hover{border-color:var(--brand)}
.cinfo svg{inline-size:28px;block-size:28px;flex:none;fill:#25d366}
.cinfo b{display:block}.cinfo span{color:var(--muted);font-size:.95rem}

.phone{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:8px}
@media(max-width:420px){.phone{grid-template-columns:1fr}}
.phone{direction:ltr}
html[dir=rtl] .phone select{direction:rtl}

.fit{margin-block-start:14px;font-size:.95rem;color:var(--muted)}
.fit b{color:var(--ink)}
.svc.hl .fit,.svc.hl .fit b{color:#fff}
.grp{display:flex;align-items:center;gap:16px;margin-block:56px 8px;font-size:1.1rem;color:var(--muted);font-weight:500}
.grp::after{content:"";flex:1;block-size:1px;background:var(--line)}
.steps3{counter-reset:s;display:grid;gap:16px}
@media(min-width:800px){.steps3{grid-template-columns:repeat(3,1fr)}}
.steps3 li{counter-increment:s;padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}
.steps3 li::before{content:counter(s,decimal-leading-zero);display:block;font-family:var(--fs);font-size:2.2rem;color:var(--brand);line-height:1;margin-block-end:16px}
.steps3 h3{font-size:1.2rem;margin-block-end:6px}
.steps3 p{color:var(--muted);font-size:.97rem;line-height:1.7}
.pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-block-start:56px}
.pager a{display:grid;place-items:center;min-inline-size:44px;block-size:44px;padding-inline:16px;border:1px solid var(--line);border-radius:var(--r-ctl);text-decoration:none;font-weight:500;transition:background .16s,border-color .16s,color .16s}
.pager a:hover{border-color:var(--brand)}
.pager a[aria-current]{background:var(--brand);border-color:var(--brand);color:#fff}
.pager a[aria-disabled]{opacity:.4;pointer-events:none}
.team{display:grid;gap:20px}
@media(min-width:700px){.team{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.team{grid-template-columns:repeat(4,1fr)}}
.tm{display:flex;flex-direction:column;gap:14px;padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);transition:border-color .24s,transform .3s var(--ease)}
.tm:hover{border-color:var(--brand);transform:translateY(-4px)}
.tm .pavatar{inline-size:96px;block-size:96px;font-size:2.4rem}
.tm h3{font-size:1.3rem}
.tm .role{color:var(--brand);font-weight:700;font-size:.97rem}
:root[data-theme=dark] .tm .role{color:var(--lav)}
.tm p{color:var(--muted);font-size:.97rem;line-height:1.7}
.tm.lead-m{background:var(--brand);color:#fff;border-color:var(--brand)}
.tm.lead-m .role,.tm.lead-m p{color:rgb(255 255 255/90%)}
.tm.lead-m .pavatar{background:#fff;color:var(--brand)}
@media(min-width:1100px){.tm.lead-m{grid-column:span 1}}
.stats.s4{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
.shot.plain{display:grid;place-items:center;padding:0;background:#fff!important;border:1px solid var(--line)}
.plain{display:grid;place-items:center;inline-size:100%;block-size:100%;padding:10%}
.plain img{max-inline-size:70%;max-block-size:60%;inline-size:auto;block-size:auto;object-fit:contain}
.plain b{font-size:1.6rem;color:#17131f;text-align:center;line-height:1.3}
.cs-shot.plain{aspect-ratio:16/7;padding:0;background:#fff}
.cs-shot.plain img{max-block-size:55%}
.logos .nm{font-weight:700;color:#17131f;opacity:.75;text-align:center;font-size:1rem;line-height:1.3}

.logos a.dk,.shot.plain.dk,.cs-shot.plain.dk{background:#17131f!important}
.two-h{display:grid;gap:48px;align-items:center}
@media(min-width:900px){.two-h{grid-template-columns:1.05fr .95fr;gap:64px}}
.pg-h .btns{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:32px}
.others.tight{margin-block-start:0}
/* services: hero orbit, icons, action bar */
.orb{inline-size:min(100%,520px);margin-inline:auto;display:block;overflow:visible}
.orb-line{stroke:var(--line);stroke-width:1.5;fill:none}
.orb-core{fill:var(--brand)}
.orb-core-t{fill:#fff;font-family:var(--fs);font-size:34px;text-anchor:middle}
.orb-n circle{fill:var(--surface);stroke:var(--line);stroke-width:1.5;transition:fill .25s,stroke .25s}
.orb-n path,.orb-n rect,.orb-n g>circle{fill:none}
.orb-n .ic{stroke:var(--brand);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
:root[data-theme=dark] .orb-n .ic{stroke:var(--lav)}
.orb-n a{cursor:pointer}
.orb-n a:hover circle,.orb-n a:focus-visible circle{fill:var(--brand);stroke:var(--brand)}
.orb-n a:hover .ic,.orb-n a:focus-visible .ic{stroke:#fff}
.orb-ring{fill:none;stroke:var(--line);stroke-dasharray:3 7;stroke-width:1.5}
.sv-h{display:grid;gap:40px;align-items:center}
@media(min-width:900px){.sv-h{grid-template-columns:1.05fr .95fr;gap:56px}}
.si{display:grid;place-items:center;inline-size:56px;block-size:56px;border-radius:16px;background:var(--brand-soft);margin-block-end:18px}
.si svg{inline-size:28px;block-size:28px;stroke:var(--brand);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
:root[data-theme=dark] .si svg{stroke:var(--lav)}
.svc.hl .si{background:rgb(255 255 255/16%)}.svc.hl .si svg{stroke:#fff}
.actbar{display:none;position:fixed;left:1rem;bottom:1rem;z-index:80;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:0 18px 50px rgb(0 0 0/22%);max-inline-size:calc(100% - 6.5rem)}
.actbar.gs{display:flex}
.actbar span{font-weight:700}
.actbar .btn{min-block-size:44px;padding-inline:18px}
@media(max-width:560px){.actbar span{display:none}}

/* services: stacking 3D cards */
.stack{perspective:1600px}
.svc{position:sticky;top:calc(92px + var(--promo-h,0px) + var(--i,0)*14px);display:block;grid-template-columns:none;padding:0;border:0;margin-block-end:16vh;transform-origin:50% 0}
.svc:last-child{margin-block-end:0}
.svc .svc-in{position:relative;overflow:hidden;display:grid;gap:24px;align-content:center;min-block-size:min(64svh,460px);padding:clamp(24px,4.5vw,56px);border-radius:28px;background:var(--cbg);color:var(--cfg);box-shadow:0 40px 80px -30px rgb(23 19 31/45%),0 0 0 1px var(--line);will-change:transform}
@media(min-width:900px){.svc{grid-template-columns:none}.svc .svc-in{grid-template-columns:1fr 1fr;gap:56px;align-items:center}}
.svc .big{position:absolute;inset-block-end:-40px;inset-inline-end:-30px;inline-size:min(340px,42%);block-size:auto;fill:none;stroke:currentColor;stroke-width:.45;opacity:.12;pointer-events:none}
.svc .svc-l{position:relative;z-index:1}
.svc .tag{margin-block-end:16px}
.svc h2{margin-block-end:12px}
.svc p{color:inherit;opacity:.82}
.svc .fl{position:relative;z-index:1;border-color:color-mix(in srgb,currentColor 22%,transparent)}
.svc .fl li{border-color:color-mix(in srgb,currentColor 22%,transparent)}
.svc .fl li::before{background:var(--brand)}
.svc .fit,.svc .fit b{color:inherit}
.c-soft{--cbg:var(--brand-soft);--cfg:var(--ink)}
.c-surf{--cbg:var(--surface);--cfg:var(--ink)}
.c-alt{--cbg:var(--surface-2);--cfg:var(--ink)}
.c-brand{--cbg:var(--brand);--cfg:#fff}
.c-ink{--cbg:#17131f;--cfg:#fff}
:root[data-theme=dark] .c-ink{--cbg:#0e0b14}
.c-brand .fl li::before,.c-ink .fl li::before{background:#fff}
.c-brand .tag,.c-ink .tag{background:rgb(255 255 255/16%);color:#fff}
.c-brand .si,.c-ink .si{background:rgb(255 255 255/14%)}.c-brand .si svg,.c-ink .si svg{stroke:#fff}
@media(prefers-reduced-motion:reduce){.svc{position:static;margin-block-end:24px}}

/* services cards, simplified */
.stack{perspective:none}
.svc{top:calc(92px + var(--i,0)*10px);margin-block-end:10vh}
.svc .svc-in{min-block-size:0;padding:clamp(24px,4vw,44px);border-radius:20px;box-shadow:0 0 0 1px var(--line)}
.svc.spec .svc-in{box-shadow:0 0 0 2px var(--brand)}
.svc .big{display:none}
@media(min-width:900px){.svc .svc-in{gap:48px;align-items:start}}

.svc{position:static;margin-block-end:20px}
.svc:last-child{margin-block-end:0}

/* services: interactive list + detail panel (no card borders) */
.lg-en{display:none}
html[lang|=en] .lg-ar{display:none}
html[lang|=en] .lg-en{display:inline}
.md{display:grid;gap:24px}
@media(min-width:960px){.md{grid-template-columns:340px minmax(0,1fr);gap:40px;align-items:start}}
.md-list{display:flex;gap:8px;overflow-x:auto;padding-block:8px;scrollbar-width:none;position:sticky;inset-block-start:calc(72px + var(--promo-h,0px));z-index:5;background:var(--bg)}
.md-list::-webkit-scrollbar{display:none}
@media(min-width:960px){.md-list{flex-direction:column;overflow:visible;inset-block-start:104px;padding-block:0;background:none}}
.md-list button{display:flex;align-items:center;gap:12px;inline-size:100%;padding:10px 14px;border-radius:16px;text-align:start;font-weight:700;font-size:1.02rem;color:var(--muted);white-space:nowrap;transition:background .2s,color .2s}
.md-list button:hover{background:var(--surface-2);color:var(--ink)}
.md-list button[aria-current=true]{background:var(--brand);color:#fff}
.mi{display:grid;place-items:center;flex:none;inline-size:36px;block-size:36px;border-radius:10px;background:var(--brand-soft);transition:background .2s}
.mi svg{inline-size:20px;block-size:20px;stroke:var(--brand);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
:root[data-theme=dark] .mi svg{stroke:var(--lav)}
.mi-l{inline-size:44px;block-size:44px;border-radius:12px;background:rgb(255 255 255/18%)}
.mi-l svg{inline-size:24px;block-size:24px;stroke:#fff}
.md-list button[aria-current=true] .mi{background:rgb(255 255 255/18%)}
.md-list button[aria-current=true] .mi svg{stroke:#fff}
.dot{margin-inline-start:auto;inline-size:9px;block-size:9px;border-radius:50%;background:#ff6b4a}
.md-panels{display:grid;gap:24px}
.mdp{background:var(--brand-soft);border-radius:28px;padding:clamp(24px,4vw,52px);scroll-margin-block-start:100px}
.mdp-h{display:flex;align-items:center;gap:12px;margin-block-end:18px}
.offer{padding:4px 14px;border-radius:99px;background:#17131f;color:#fff;font-weight:700;font-size:.9rem}
:root[data-theme=dark] .offer{background:#fff;color:#17131f}
.mdp h2{font-size:clamp(1.7rem,3vw,2.5rem);margin-block-end:12px}
.mdp-d{color:var(--muted);max-inline-size:58ch;font-size:1.1rem}
.mdp-d+.mdp-d{margin-block-start:12px;font-weight:700}
.chips2{display:grid;gap:12px;margin-block:28px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.chips2 li{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;background:var(--surface);border-radius:16px;font-weight:500;line-height:1.6}
.chips2 li::before{content:"";flex:none;inline-size:14px;block-size:5px;margin-block-start:.65em;background:var(--brand);transform:skewX(-28deg)}
.mdp .btn{margin-block-start:8px}

/* home offer band */
.offer-band{display:grid;gap:24px;align-items:center;background:var(--brand-soft);border-radius:28px;padding:clamp(24px,4vw,48px)}
@media(min-width:900px){.offer-band{grid-template-columns:1fr auto;gap:48px}}
.offer-band .offer{display:inline-block;margin-block-end:14px}
.offer-band h2{font-size:clamp(1.6rem,3vw,2.4rem);margin-block-end:10px}
.offer-band p{color:var(--muted);max-inline-size:56ch}
.ob-actions{display:flex;flex-wrap:wrap;gap:12px}

/* services: the 2-day offer panel is a solid brand card so it stands out from the soft ones */
#quick-site{background:var(--brand);color:#fff}
#quick-site h2,#quick-site .mdp-d,#quick-site .fit,#quick-site .fit b{color:#fff}
#quick-site .tag{background:rgb(255 255 255/18%);color:#fff}
#quick-site .offer{background:#ff6b4a;color:#17131f}
#quick-site .chips2 li{background:rgb(255 255 255/12%);color:#fff}
#quick-site .chips2 li::before{background:#ff6b4a}
#quick-site .btn-primary{background:#fff;color:var(--brand-hover)}
#quick-site .btn-primary:hover{background:#17131f;color:#fff}

/* blog: feature image under the article title */
.feat{margin:0 0 2.2em}
.feat img{display:block;inline-size:100%;block-size:auto;aspect-ratio:16/9;object-fit:cover;border-radius:20px;background:var(--surface-2)}

/* about: story stats as cards aligned with the prose */
.two .stats.s4{margin-block-start:0;padding-block-start:0;border-block-start:0}
.two .stat{padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}

/* about hero: type-led, no collage or buttons, so it reads differently from the home hero */
.about-h{padding-block-end:clamp(32px,5vw,56px);border-block-end:1px solid var(--line)}
.about-h h1{font-size:clamp(2.4rem,6.5vw,5.2rem);line-height:1.25;max-inline-size:16ch;margin-block-end:28px}
.about-h .lead{max-inline-size:52ch}

/* blog list: the article's feature image fills the card cover, category as a chip */
.pcover:has(img){background:var(--surface-2);padding:0}
.pcover:has(img)::before,.pcover:has(img)::after{display:none}
.pcover img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;z-index:-1}
.pcover span{position:relative;margin:14px;padding:3px 14px;border-radius:99px;background:rgb(23 19 31/72%);backdrop-filter:blur(6px);font-size:.85rem;font-weight:500}

/* project dialog: the requested service */
.dlg-svc{justify-self:start;padding:6px 16px;border-radius:99px;background:var(--brand-soft);color:var(--brand-hover);font-weight:700;margin-block-start:-4px}
:root[data-theme=dark] .dlg-svc{color:var(--lav)}
.dlg-svc[hidden]{display:none}

/* contact: one screen. Left: who/how to reach us; right: a visual form on a brand slab */
.ct{display:grid;gap:clamp(32px,6vw,72px);align-items:start}
@media(min-width:960px){.ct{grid-template-columns:.9fr 1.1fr}}
.ct-info h1{max-inline-size:14ch}
.ct-ch{display:flex;flex-wrap:wrap;gap:24px;margin-block:32px}
.chb{display:grid;justify-items:center;align-content:start;gap:8px;color:inherit;text-decoration:none;font-weight:500;font-size:.95rem}
.chc{display:grid;place-items:center;inline-size:64px;block-size:64px;border-radius:50%;background:var(--brand-soft);transition:transform .3s var(--ease)}
a.chb:hover .chc{transform:translateY(-4px)}
.chc svg{inline-size:28px;block-size:28px;fill:none;stroke:var(--brand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:root[data-theme=dark] .chc svg{stroke:var(--lav)}
.chc.wa{background:#25d366}.chc.wa svg{fill:#fff;stroke:none}
.chs{display:flex;gap:8px;align-items:center;block-size:64px}
.chs a{display:grid;place-items:center;inline-size:40px;block-size:40px;border-radius:50%;background:var(--brand-soft);color:var(--brand);transition:background .2s,color .2s}
:root[data-theme=dark] .chs a{color:var(--lav)}
.chs a:hover{background:var(--brand);color:#fff}
.chs svg{inline-size:17px;block-size:17px;fill:currentColor}
.ct-steps{display:grid;gap:0;counter-reset:n;max-inline-size:420px}
.ct-steps li{counter-increment:n;position:relative;display:grid;padding-block-end:20px;padding-inline-start:52px}
.ct-steps li::before{content:counter(n);position:absolute;inset-block-start:0;inset-inline-start:0;display:grid;place-items:center;inline-size:36px;block-size:36px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700}
.ct-steps li:not(:last-child)::after{content:"";position:absolute;inset-block:40px 4px;inset-inline-start:17.5px;inline-size:1px;background:var(--ctl)}
.ct-steps b{line-height:1.6}
.ct-steps span{color:var(--muted);font-size:.95rem;line-height:1.6}
.ct-form{position:relative;isolation:isolate}
.ct-form::before{content:"";position:absolute;inset:5% -3% -4%;z-index:-1;background:var(--brand);transform:skewX(-6deg);border-radius:var(--r-lg)}
.ct-form .cform{box-shadow:0 24px 60px rgb(23 19 31/22%)}
.tchips{display:none}
.js .tfield select{display:none}
.tiles{display:none}
.js .tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-block-start:-2px}
@media(min-width:560px){.js .tiles{grid-template-columns:repeat(4,1fr)}}
.tiles button{display:grid;justify-items:center;align-content:center;gap:6px;min-block-size:84px;padding:10px 6px;border:1px solid var(--ctl);border-radius:var(--r-card);background:var(--bg);color:inherit;font:inherit;font-size:.85rem;font-weight:500;line-height:1.4;text-align:center;transition:background .2s,color .2s,border-color .2s}
.tiles button:hover{border-color:var(--brand)}
.tiles svg{inline-size:26px;block-size:26px;fill:none;stroke:var(--brand);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
:root[data-theme=dark] .tiles svg{stroke:var(--lav)}
.tiles button[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:#fff}
.tiles button[aria-pressed=true] svg{stroke:#fff}
.hp{position:absolute;inset-inline-start:-9999px;inline-size:1px;block-size:1px;opacity:0}
:root[data-theme] .dlg-err.ok{color:var(--ink);font-weight:500}
.ico-btn{text-decoration:none;color:inherit}
.soc a[hidden],.chs a[hidden]{display:none}
/* UI/UX work: screens are shown whole on the work's own colour, no browser frame */
.card-ux .ux-cover{aspect-ratio:4/3;border-radius:var(--r-card);background:var(--ux-bg,var(--brand-soft));display:grid;place-items:center;padding:7%;overflow:hidden}
.card-ux .ux-cover img{max-inline-size:100%;max-block-size:100%;inline-size:auto;block-size:auto;object-fit:contain;filter:drop-shadow(0 12px 24px rgb(23 19 31/16%));transition:transform .24s var(--ease)}
.card-ux:hover .ux-cover img{transform:scale(1.03)}
.ux-head .lead{font-size:clamp(1.2rem,2.2vw,1.55rem);line-height:1.7;max-inline-size:58ch;color:var(--ink)}
.ux-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-block-start:36px}
.ux-meta div{padding:20px 22px;border-radius:var(--r-card);background:var(--ux-bg,var(--brand-soft))}
.ux-meta dt{color:var(--muted);font-size:.88rem;font-weight:500}
.ux-meta dd{margin:6px 0 0;font-size:1.2rem;font-weight:700;line-height:1.5}
.ux-hero{display:grid;place-items:end center;padding:clamp(24px,6vw,72px) clamp(20px,6vw,72px) 0;overflow:hidden;border-radius:var(--r-lg);background:var(--ux-bg,var(--brand-soft))}
.ux-hero img{inline-size:auto;max-inline-size:100%;block-size:auto;max-block-size:80vh;filter:drop-shadow(0 24px 40px rgb(23 19 31/20%))}
.ux-sec{display:grid;gap:16px;padding-block:clamp(32px,5vw,64px);border-block-start:1px solid var(--line)}
.ux-sec h2{font-size:1.4rem}
@media(min-width:900px){.ux-sec{grid-template-columns:1fr 2fr;gap:48px}}
/* story blocks */
.ux-blk{display:grid;gap:24px;padding-block:clamp(32px,5vw,64px);border-block-start:1px solid var(--line)}
.ux-h{font-size:1.4rem}
.ux-fig{margin:0;display:grid;gap:12px;align-content:start;margin-block:clamp(24px,4vw,48px)}
.ux-fig .pic,.ux-pair .pic,.ux-split .pic{display:grid;place-items:center;padding:clamp(16px,4vw,40px);border-radius:var(--r-card);background:var(--ux-bg,var(--brand-soft))}
.pic.bare{background:none;padding:0}
.ux-fig .pic img,.ux-pair .pic img,.ux-split .pic img{inline-size:auto;max-inline-size:100%;block-size:auto;filter:drop-shadow(0 16px 28px rgb(23 19 31/16%))}
.ux-fig figcaption{color:var(--muted);font-size:.95rem;line-height:1.7}
.ux-fig.sz-md{max-inline-size:640px;margin-inline:auto}.ux-fig.sz-sm{max-inline-size:400px;margin-inline:auto}
.ux-grid{display:grid;gap:24px}
@media(min-width:768px){.ux-grid.c2{grid-template-columns:repeat(2,1fr)}.ux-grid.c3{grid-template-columns:repeat(3,1fr)}.ux-grid.c4{grid-template-columns:repeat(4,1fr)}}
.ux-grid .ux-fig{margin-block:0}
.ux-pair{display:grid;gap:20px;padding:clamp(20px,3vw,32px);border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.ux-pair h3{font-size:1.25rem}
.ux-pair p{line-height:1.85;margin-block-start:10px}
.ux-pair .pic.wide{grid-column:1/-1}
@media(min-width:768px){.ux-pair{grid-template-columns:1fr 1fr;gap:20px 40px}.ux-pair h3{grid-column:1/-1}}
.tag.bad{background:#fde8e6;color:#b42318}.tag.good{background:#e3f4ec;color:#18794e}
:root[data-theme=dark] .tag.bad{background:#4a1d19;color:#ffb4a8}:root[data-theme=dark] .tag.good{background:#14382a;color:#8fe0b5}
.ux-split{display:grid;gap:28px;align-items:center;padding-block:clamp(32px,5vw,64px);border-block-start:1px solid var(--line)}
.ux-split h2{font-size:1.4rem;margin-block-end:16px}
@media(min-width:900px){.ux-split{grid-template-columns:1fr 1fr;gap:56px}.ux-split.rev>:first-child{order:2}}
.ux-points{display:grid;gap:16px;list-style:none;padding:0;margin:0}
@media(min-width:768px){.ux-points{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.ux-points{grid-template-columns:repeat(3,1fr)}}
.ux-points li{padding:24px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.ux-points h3{font-size:1.1rem;margin-block-end:8px}.ux-points p{color:var(--muted);line-height:1.8}
.ux-head .back{display:flex;inline-size:max-content}.ux-head .tag{margin-block-end:16px}

/* floating request button on work pages: after the middle of the page */
.req-fab{position:fixed;inset-block-end:1rem;left:50%;z-index:80;display:flex;align-items:center;gap:14px;padding:10px;padding-inline:20px 12px;background:var(--surface);border:1px solid var(--line);border-radius:99px;box-shadow:0 18px 50px rgb(23 19 31/22%);inline-size:max-content;max-inline-size:calc(100% - 9rem);transform:translateX(-50%)}
.req-fab span{font-weight:700;white-space:nowrap}
.req-fab .btn{min-block-size:44px;padding-inline:20px;white-space:nowrap}
.js .req-fab{opacity:0;pointer-events:none;transform:translate(-50%,16px);transition:opacity .24s var(--ease),transform .24s var(--ease)}
.js .req-fab.on{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
@media(max-width:700px){.req-fab span{display:none}.req-fab{padding:8px}.req-fab .btn{white-space:normal;text-align:center;line-height:1.3}}
@media(prefers-reduced-motion:reduce){.js .req-fab{transition:none}}

/* UI/UX story: chapters (user question, what the screen shows, design decision) and the reality-to-decision bridge */
.ux-story{counter-reset:ch}
.ux-ch{counter-increment:ch;display:grid;gap:28px;padding-block:clamp(40px,6vw,88px);border-block-start:1px solid var(--line)}
@media(min-width:900px){.ux-ch{grid-template-columns:1fr 1fr;gap:28px clamp(40px,6vw,88px);align-items:start}.ux-ch .pic{grid-column:1/-1}}
.ux-k{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--brand)}
:root[data-theme=dark] .ux-k{color:var(--lav)}
.ux-k::before{content:counter(ch,decimal-leading-zero);display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:var(--r-ctl);background:var(--brand);color:#fff;font-size:1rem}
.ux-ch h2{font-size:clamp(1.6rem,3vw,2.4rem);margin-block:16px 22px}
.ux-q{margin:0;max-inline-size:34ch;padding:18px 24px;border-radius:var(--r-card);border-end-start-radius:4px;background:var(--ux-bg,var(--brand-soft));color:#17131f;font-size:clamp(1.15rem,2vw,1.45rem);font-weight:700;line-height:1.6}
.ux-q small{display:block;color:#5a5063;font-size:.85rem;font-weight:500}
.ux-ch-b .cs-body{max-inline-size:56ch}
.ux-d{margin-block-start:22px;padding:14px 20px;max-inline-size:56ch;border-inline-start:3px solid var(--brand);background:var(--surface);border-radius:0 var(--r-ctl) var(--r-ctl) 0;line-height:1.8}
html[dir=rtl] .ux-d{border-radius:var(--r-ctl) 0 0 var(--r-ctl)}
.ux-d b{display:block;color:var(--brand);font-size:.9rem}
:root[data-theme=dark] .ux-d b{color:var(--lav)}
.ux-bridge{gap:12px}
.ux-bridge .ux-h{margin-block-end:12px}
.ux-br-h{display:none}
.ux-br{display:grid;gap:8px;margin-block-end:16px}
.ux-br p{margin:0;padding:20px 24px;border-radius:var(--r-card);line-height:1.8}
.ux-br .a{border:1.5px dashed var(--ctl);color:var(--muted)}
.ux-br .b{position:relative;background:var(--ux-bg,var(--brand-soft));color:#17131f;font-weight:500}
@media(min-width:900px){
  .ux-br-h,.ux-br{grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,88px)}
  .ux-br-h{display:grid;color:var(--muted);font-size:.9rem;font-weight:500;padding-inline:24px}
  .ux-br{margin-block-end:12px}
  .ux-br .b::before{content:"";position:absolute;inset-inline-end:100%;inset-block-start:50%;inline-size:clamp(28px,4vw,56px);block-size:7px;margin-inline-end:calc(clamp(40px,6vw,88px)/2 - clamp(28px,4vw,56px)/2);background:var(--brand);transform:translateY(-50%) skewX(-28deg);border-radius:2px}
}

/* ui-ux page (templates/page-ui-ux.php): question-led hero, role switcher, decision cards, process line */
.uxp-hg{display:grid;gap:clamp(32px,5vw,64px);align-items:center}
@media(min-width:960px){.uxp-hg{grid-template-columns:1.1fr .9fr}}
.uxp-h h1{max-inline-size:14ch}
.qs{display:grid;gap:12px}
.qs li{display:grid;inline-size:fit-content;max-inline-size:100%;padding:12px 20px;border-radius:20px;border-end-start-radius:4px;background:var(--brand-soft);font-weight:700;line-height:1.5}
.qs li:nth-child(even){margin-inline-start:auto;border-end-start-radius:20px;border-end-end-radius:4px;background:var(--brand);color:#fff}
.qs small{font-weight:500;font-size:.8rem;opacity:.8}
.uxp-c{padding-block:var(--sec)}
.uxp-two{display:grid;gap:clamp(32px,6vw,80px);align-items:center}
@media(min-width:960px){.uxp-two{grid-template-columns:1fr 1fr}}
.uxp-k{display:flex;align-items:center;gap:10px;font-weight:500;color:var(--brand);margin-block-end:16px}
:root[data-theme=dark] .uxp-k{color:var(--lav)}
.uxp-k::before{content:"";inline-size:22px;block-size:7px;background:currentColor;transform:skewX(-28deg);border-radius:2px}
.uxp-t h2{max-inline-size:18ch;margin-block-end:20px}
.uxp-t p{color:var(--muted);max-inline-size:54ch}
.uxp-t p+p{margin-block-start:14px}
.uxp-note{font-size:.95rem;border-inline-start:3px solid var(--brand);padding-inline-start:14px}
.ln{display:block;block-size:8px;border-radius:4px;background:var(--line);margin-block-start:8px}
.ln.s{inline-size:55%}.ln.m{inline-size:80%}
.sc{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:12px}
.sc>div{padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);transform:rotate(var(--r))}
.sc>div:nth-child(2){margin-block-start:28px}.sc>div:nth-child(3){margin-block-start:-12px}
.sc small{display:block;font-weight:700;font-size:.85rem;color:var(--muted)}
.sc .pn{background:#ffd9cf;border-color:transparent}.sc .pn small,.sc .pn .ln{color:#17131f}.sc .pn .ln{background:rgb(23 19 31/20%)}

.uxp-roles{background:#17131f;color:#fff}
.uxp-roles .uxp-k{color:var(--lav)}
.uxp-roles .uxp-t p{color:#c9c1d8}
.uxp-roles :focus-visible{outline-color:#fff}
.rt{display:flex;gap:8px;overflow-x:auto;margin-block:32px 28px;padding-block:4px;scrollbar-width:none}
.rt::-webkit-scrollbar{display:none}
.rt button{flex:none;min-block-size:44px;padding-inline:20px;border-radius:99px;border:1px solid rgb(255 255 255/30%);font-weight:700;transition:background .2s,color .2s,border-color .2s}
.rt button:hover{border-color:#fff}
.rt button[aria-selected=true]{background:#fff;color:#17131f;border-color:#fff}
.rp{display:grid;gap:clamp(24px,4vw,56px);align-items:center}
.rp[hidden]{display:none}
@media(min-width:960px){.rp{grid-template-columns:.8fr 1.2fr}}
.rp.in{animation:rp-in .35s var(--ease)}
@keyframes rp-in{from{opacity:0;transform:translateY(12px)}}
.rp-k{color:var(--lav);font-weight:500;margin-block-end:10px}
.rp blockquote{margin:0;font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.4;font-weight:700;text-wrap:balance}
.rp-d{margin-block-start:20px;color:#d7d0e6;max-inline-size:44ch}
.rp-d b{color:#fff}

/* the product screen is always light: it is the thing being shown, not page chrome */
.scr{background:#fff;color:#17131f;border-radius:var(--r-card);overflow:hidden;box-shadow:0 24px 60px rgb(0 0 0/35%)}
.scr-bar{display:flex;gap:6px;padding:12px 16px;background:#f2eff8}
.scr-bar i{inline-size:10px;block-size:10px;border-radius:50%;background:#d6cfe4}
.scr-b{display:grid;grid-template-columns:150px 1fr;min-block-size:300px}
.scr-n{display:grid;align-content:start;gap:4px;padding:16px 12px;background:#faf9fc;border-inline-end:1px solid #ded9e7;font-size:.85rem;font-weight:500}
.scr-n li{padding:8px 10px;border-radius:10px;color:#655f70}
.scr-n li.on{background:#7145ff;color:#fff}
.scr-m{display:grid;gap:12px;padding:16px;align-content:start}
.scr-g{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.scr-c{display:grid;gap:8px;padding:14px 16px;border:1px solid #ded9e7;border-radius:14px;background:#fff}
.scr-c.hl{background:#eee9ff;border-color:transparent}
.scr-c b{font-size:.9rem}
.scr .ln{background:#ded9e7;margin:0}
.bars{display:flex;align-items:end;gap:8px;block-size:120px}
.bars i{flex:1;block-size:var(--h);background:#7145ff;border-radius:4px 4px 0 0}
.bars i:nth-child(odd){background:#b9a6ff}
.al{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid #ded9e7;font-size:.85rem;font-weight:500;color:#17131f}
.al::before{content:"";inline-size:8px;block-size:8px;border-radius:50%;background:#ff6b4a;flex:none}
.al .ln{flex:1}
.pill{margin-inline-start:auto;padding:2px 10px;border-radius:99px;background:#eee9ff;color:#5d32db;font-size:.75rem;font-weight:700;font-style:normal}
.pill.u{background:#ffe3dc;color:#8a2c14}
.go{justify-self:start;padding:5px 14px;border-radius:8px;background:#7145ff;color:#fff;font-size:.78rem;font-weight:700}
.th{inline-size:36px;block-size:36px;border-radius:4px;background:#d6cfe4;flex:none}
@media(max-width:560px){.scr-b{grid-template-columns:96px 1fr}.scr-n{padding:12px 6px;font-size:.75rem}.scr-g{grid-template-columns:1fr}}

.dcs{display:grid;gap:20px}
@media(min-width:900px){.dcs{grid-template-columns:repeat(3,1fr)}}
.dc{display:grid;gap:14px;align-content:start;padding:clamp(20px,3vw,28px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.dc p{color:var(--muted)}
.dv{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-block-end:8px}
.dv figure{display:grid;gap:8px;align-content:start}
.dv figcaption{font-size:.8rem;font-weight:700;color:var(--muted)}
.dv figure:last-child figcaption{color:var(--brand)}
:root[data-theme=dark] .dv figure:last-child figcaption{color:var(--lav)}
.fr{display:grid;gap:6px;align-content:start;min-block-size:150px;padding:10px;border-radius:14px;background:var(--surface-2);font-size:.75rem}
.dv figure:first-child .fr{opacity:.7}
.fr .ln{margin:0}
.fr .al{background:var(--surface);border-color:var(--line);color:var(--ink);padding:8px 10px;font-size:.75rem}
.fr .al svg{inline-size:16px;block-size:16px;margin-inline-start:auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fld{display:block;block-size:14px;border-radius:5px;background:var(--surface);border:1px solid var(--line)}
.stp{display:grid;grid-auto-flow:column;gap:3px}
.stp i{block-size:4px;border-radius:2px;background:var(--line)}
.stp i.d{background:var(--brand)}
.fr .go{justify-self:end;margin-block-start:4px}

.tl{display:grid;counter-reset:s;margin-block-start:clamp(8px,2vw,24px)}
.tl li{position:relative;padding-block-end:clamp(24px,4vw,36px);padding-inline-start:64px}
.tl li::before{content:counter(s);counter-increment:s;position:absolute;inset-inline-start:0;inset-block-start:0;display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:var(--r-ctl);background:var(--brand);color:#fff;font-weight:700}
.tl li:not(:last-child)::after{content:"";position:absolute;inset-inline-start:21px;inset-block:48px 4px;inline-size:2px;background:var(--line)}
.tl h3{margin-block-end:6px}
.tl p{color:var(--muted)}
@media(min-width:900px){
  .tl{grid-template-columns:repeat(4,1fr);gap:24px}
  .tl li{padding-inline-start:0;padding-block:64px 0}
  .tl li:not(:last-child)::after{inset-block:21px auto;inset-inline:56px -12px;inline-size:auto;block-size:2px}
}
.uxp-close{margin-block-start:clamp(24px,4vw,48px);max-inline-size:28ch;font-size:clamp(1.4rem,2.6vw,2rem);font-weight:700;line-height:1.5;text-wrap:balance}
.uxp-more{margin-block-start:16px}
.uxp-more a{color:var(--brand);font-weight:700}
:root[data-theme=dark] .uxp-more a{color:var(--lav)}
@media(prefers-reduced-motion:reduce){.rp.in{animation:none}}
.scr .stp i{background:#ded9e7}
.scr .stp i.d{background:#7145ff}

/* promo bar: fixed on top, sits above the sticky header; countdown + two buttons */
.promo{position:sticky;inset-block-start:0;z-index:55;background:#17131f;color:#fff}
.promo[hidden]{display:none}
.promo .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 20px;padding-block:8px}
.promo-t{font-weight:700;font-size:1rem;margin:0}
.promo-c{display:flex;gap:6px;margin:0;direction:ltr}
.promo-c span{display:grid;justify-items:center;min-inline-size:44px;padding:3px 6px;border-radius:8px;background:rgb(255 255 255/12%);line-height:1.1}
.promo-c b{font-size:1.05rem;font-variant-numeric:tabular-nums}
.promo-c small{font-size:.68rem;color:var(--lav)}
.promo-b{display:flex;gap:8px}
.promo .btn{min-block-size:36px;padding-inline:16px;font-size:.9rem}
.promo .btn-ghost{border-color:rgb(255 255 255/55%);color:#fff}
.promo .btn-ghost:hover{background:#fff;color:#17131f}
@media(max-width:640px){.promo-t{font-size:.9rem;text-align:center;inline-size:100%}}

/* cookie banner */
.cookie{position:fixed;inset-inline:1rem;inset-block-end:1rem;z-index:100;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;max-inline-size:760px;margin-inline:auto;padding:16px 20px;border-radius:var(--r-card);background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 18px 48px rgb(0 0 0/22%)}
.cookie[hidden]{display:none}
.cookie p{flex:1 1 320px;margin:0;font-size:.95rem}
.cookie a{color:var(--brand);text-decoration:underline}
:root[data-theme=dark] .cookie a{color:var(--lav)}
.cookie-b{display:flex;gap:8px}
.cookie .btn{min-block-size:40px;padding-inline:20px;font-size:.9rem}