/* OP Studio — interactive portfolio layer. Colors are the site's existing tokens. */
:root{--op-bg:#07090f;--op-bg2:#0c1019;--op-card:#111726;--op-line:rgba(255,255,255,.09);--op-text:#eef1f8;--op-muted:#9aa3b8;--op-a1:#7c5cff;--op-a2:#22d3ee;--op-grad:linear-gradient(120deg,#7c5cff,#22d3ee);--ops-ease:cubic-bezier(.2,.7,.2,1);--ops-ease-io:cubic-bezier(.7,0,.2,1);--ops-display:'Readex Pro','IBM Plex Sans Arabic','Inter',system-ui,sans-serif}
.ops-page,.ops-page body{background:var(--op-bg);color:var(--op-text);font-family:'IBM Plex Sans Arabic','Inter',system-ui,sans-serif;margin:0}
html.ops-lock{overflow:hidden}
html.ops-ready body{overflow-x:clip}

/* ---------- shared atoms ---------- */
.ops-kick{margin:0 0 8px;color:var(--op-a2);font-size:13px;font-weight:600;letter-spacing:.02em}
.ops-actions{display:flex;flex-wrap:wrap;gap:10px}
.ops-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:999px;background:var(--op-grad);color:#fff!important;font-weight:700;font-size:15px;line-height:1.2;text-decoration:none!important;border:0;box-shadow:0 12px 30px -12px rgba(124,92,255,.8);transition:transform .3s var(--ops-ease),box-shadow .3s;white-space:nowrap}
.ops-btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(124,92,255,1)}
.ops-btn-ghost{background:rgba(255,255,255,.04);border:1px solid var(--op-line);box-shadow:none}
.ops-btn-ghost:hover{background:rgba(255,255,255,.08);box-shadow:none}
.ops-btn-sm{padding:10px 18px;font-size:13.5px}
.ops-btn:focus-visible,.ops-arrow:focus-visible,.ops-tab:focus-visible,.ops-rail:focus-visible,.ops-cine-track:focus-visible{outline:2px solid var(--op-a2);outline-offset:3px}

/* ---------- devices ---------- */
.ops-devices{position:relative;width:100%;padding:0 0 4% 0}
.ops-laptop{position:relative;width:88%;margin-inline-start:auto}
.ops-laptop-screen{position:relative;aspect-ratio:16/10;border-radius:14px 14px 4px 4px;border:clamp(6px,1vw,12px) solid #0d111b;background:#0d111b;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 50px 100px -40px rgba(124,92,255,.55)}
.ops-laptop-screen img,.ops-laptop-screen video{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.ops-laptop-base{height:clamp(8px,1.2vw,14px);margin:0 -6%;border-radius:0 0 18px 18px;background:linear-gradient(#2a3040,#141925);box-shadow:0 20px 40px -18px rgba(0,0,0,.9)}
.ops-laptop-base:before{content:"";display:block;width:16%;height:40%;margin:0 auto;border-radius:0 0 8px 8px;background:#0b0e16}
.ops-phone{position:absolute;inset-inline-start:0;bottom:0;width:26%;aspect-ratio:9/19.2;border-radius:clamp(18px,2.6vw,34px);border:clamp(4px,.7vw,8px) solid #0d111b;background:#0d111b;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 80px -30px rgba(0,0,0,.95);z-index:2}
.ops-phone:before{content:"";position:absolute;top:6px;left:50%;width:32%;height:5%;max-height:18px;transform:translateX(-50%);border-radius:20px;background:#0d111b;z-index:2}
.ops-phone-screen{position:absolute;inset:0}
.ops-phone-screen img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.ops-shot{border-radius:22px;overflow:hidden;border:1px solid var(--op-line);background:var(--op-card);box-shadow:0 50px 100px -45px rgba(124,92,255,.55)}
.ops-shot img{width:100%;height:auto;display:block}

/* ---------- hero stage ---------- */
.ops-stage{position:relative;width:100%;perspective:1600px;padding-bottom:64px}
.ops-stage-glow{position:absolute;inset:8% 6% 14%;border-radius:50%;background:radial-gradient(circle,rgba(124,92,255,.35),rgba(34,211,238,.12) 45%,transparent 70%);filter:blur(30px);z-index:0}
.ops-stage-track{position:relative;display:grid;transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transform-style:preserve-3d;transition:transform .7s var(--ops-ease);z-index:1}
.ops-stage-item{grid-area:1/1;display:block;opacity:0;visibility:hidden;transition:opacity 1s ease,visibility 0s linear 1s}
.ops-stage-item.is-on{opacity:1;visibility:visible;transition:opacity 1s ease}
.ops-stage-item .ops-laptop-screen img{transform:scale(1.08);transition:transform 5s var(--ops-ease)}
.ops-stage-item.is-on .ops-laptop-screen img{transform:scale(1)}
.ops-stage-item .ops-phone{transform:translateY(30px);opacity:0;transition:transform 1s var(--ops-ease) .25s,opacity .8s ease .25s}
.ops-stage-item.is-on .ops-phone{transform:translateZ(60px);opacity:1}
.ops-stage-cap{position:absolute;bottom:0;inset-inline:6%;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:16px;background:rgba(12,16,25,.75);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--op-line);color:var(--op-text);font-size:14px;z-index:3}
.ops-stage-cap b{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ops-stage-n{color:var(--op-muted);font-variant-numeric:tabular-nums;font-size:13px}
.ops-stage-dot{width:8px;height:8px;border-radius:50%;background:var(--op-a2);box-shadow:0 0 0 5px rgba(34,211,238,.15)}
.ops-stage-bar{position:absolute;bottom:0;inset-inline:6%;height:2px;border-radius:2px;background:var(--op-grad);transform:scaleX(0);transform-origin:100% 50%;z-index:4}
.ops-stage.run .ops-stage-bar{animation:opsBar 5s linear forwards}

/* ---------- cinematic horizontal slider ---------- */
.ops-cine{position:relative;margin:30px 0 70px}
.ops-cine-track{display:flex;gap:4vw;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;padding:20px 9vw 30px;margin:0 calc(50% - 50vw);width:100vw;box-sizing:border-box;cursor:grab}
.ops-cine-track::-webkit-scrollbar{display:none}
.ops-cine-track.is-drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.ops-cine-track.is-drag *{pointer-events:none;user-select:none}
.ops-slide{flex:0 0 82vw;max-width:1240px;scroll-snap-align:center;display:grid;grid-template-columns:1.45fr 1fr;gap:clamp(24px,4vw,60px);align-items:center;transform:scale(calc(.86 + .14 * var(--f,1)));opacity:calc(.35 + .65 * var(--f,1));transition:transform .2s linear,opacity .2s linear;will-change:transform}
.ops-slide-media{position:relative}
.ops-slide-media .ops-devices{transform:perspective(1400px) rotateY(calc(var(--d,0) * 8deg))}
.ops-slide-info{position:relative}
.ops-slide-n{position:absolute;top:-.55em;inset-inline-end:0;font-family:var(--ops-display);font-size:clamp(70px,9vw,140px);font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.1);pointer-events:none}
.ops-slide-title{margin:0 0 12px;font-family:var(--ops-display);font-size:clamp(28px,3.4vw,48px);font-weight:700;line-height:1.15;color:var(--op-text);overflow:hidden}
.ops-slide-title span{display:block;transform:translateY(105%);transition:transform .9s var(--ops-ease) .1s}
.ops-slide.is-on .ops-slide-title span{transform:none}
.ops-slide-desc{margin:0 0 22px;color:var(--op-muted);font-size:16.5px;line-height:1.9}
.ops-slide .ops-kick,.ops-slide-desc,.ops-slide .ops-actions{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s var(--ops-ease)}
.ops-slide.is-on .ops-kick{opacity:1;transform:none;transition-delay:.05s}
.ops-slide.is-on .ops-slide-desc{opacity:1;transform:none;transition-delay:.25s}
.ops-slide.is-on .ops-actions{opacity:1;transform:none;transition-delay:.38s}
.ops-cine-nav,.ops-gal-nav{display:flex;align-items:center;gap:20px;margin-top:10px}
.ops-count{color:var(--op-muted);font-variant-numeric:tabular-nums;font-size:14px;white-space:nowrap;min-width:74px}
.ops-count b{color:var(--op-text);font-size:24px;font-weight:800;margin-inline-end:2px}
.ops-progress{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.ops-progress i{display:block;height:100%;width:100%;background:var(--op-grad);transform:scaleX(var(--p,0));transform-origin:100% 50%;transition:transform .25s linear}
.ops-arrows{display:flex;gap:10px}
.ops-arrow{width:54px;height:54px;border-radius:50%;border:1px solid var(--op-line);background:rgba(255,255,255,.04);color:var(--op-text);display:grid;place-items:center;cursor:pointer;padding:0;transition:background .3s,border-color .3s,transform .3s}
.ops-arrow:hover{background:var(--op-grad);border-color:transparent;transform:translateY(-2px)}
.ops-arrow[disabled]{opacity:.35;pointer-events:none}
.ops-arrow svg{width:20px;height:20px}

/* ---------- horizontal editorial gallery ---------- */
.ops-gal{position:relative;margin-top:20px}
.ops-tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:26px}
.ops-tab{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;border:1px solid var(--op-line);background:rgba(255,255,255,.03);color:var(--op-muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:color .25s,background .25s,border-color .25s}
.ops-tab small{font-size:11px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.08)}
.ops-tab:hover{color:var(--op-text)}
.ops-tab.is-on{background:var(--op-grad);border-color:transparent;color:#fff;box-shadow:0 12px 30px -14px rgba(124,92,255,.85)}
.ops-rail-wrap{position:relative;margin:0 calc(50% - 50vw);width:100vw}
.ops-rail-wrap:before,.ops-rail-wrap:after{content:"";position:absolute;top:0;bottom:0;width:6vw;z-index:2;pointer-events:none}
.ops-rail-wrap:before{left:0;background:linear-gradient(90deg,var(--op-bg),transparent)}
.ops-rail-wrap:after{right:0;background:linear-gradient(270deg,var(--op-bg),transparent)}
.ops-rail{display:flex;align-items:flex-start;gap:22px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:8vw;padding:6px 8vw 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;cursor:grab}
.ops-rail::-webkit-scrollbar{display:none}
.ops-rail.is-drag{cursor:grabbing;scroll-snap-type:none}
.ops-rail.is-drag *{pointer-events:none;user-select:none}
.ops-card{flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column;background:var(--op-card);border:1px solid var(--op-line);border-radius:24px;overflow:hidden;transition:border-color .35s,box-shadow .5s,transform .5s var(--ops-ease)}
.ops-card.ops-w{width:min(560px,78vw)}
.ops-card.ops-n{width:min(400px,72vw)}
.ops-card.ops-t{width:min(360px,70vw)}
.ops-card.ops-t .ops-card-media img{aspect-ratio:4/5}
.ops-card:hover{border-color:rgba(124,92,255,.45);box-shadow:0 34px 70px -38px rgba(124,92,255,.6);transform:translateY(-6px)}
.ops-card[hidden]{display:none}
.ops-card.is-in{animation:opsCardIn .7s var(--ops-ease) backwards;animation-delay:calc(var(--k,0) * 70ms)}
.ops-card-media{display:block;overflow:hidden;background:var(--op-bg2)}
.ops-card-media img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;display:block;transition:transform 1.1s var(--ops-ease)}
.ops-card:hover .ops-card-media img{transform:scale(1.05)}
.ops-card-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.ops-card-title{margin:0 0 8px;font-family:var(--ops-display);font-size:20px;font-weight:700;line-height:1.35}
.ops-card-title a{color:var(--op-text);text-decoration:none}
.ops-card-desc{margin:0 0 18px;color:var(--op-muted);font-size:14.5px;line-height:1.85;flex:1}

/* ---------- logo marquee ---------- */
.ops-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);direction:ltr}
.ops-marquee-track{display:flex;width:max-content;animation:opsMarq 50s linear infinite}
.ops-marquee:hover .ops-marquee-track{animation-play-state:paused}
.ops-marquee-set{display:flex;gap:14px;padding-inline-end:14px}
.ops-brand{display:inline-flex;align-items:center;justify-content:center;min-width:150px;height:64px;padding:0 24px;border-radius:16px;border:1px solid var(--op-line);background:rgba(255,255,255,.025);color:var(--op-text)!important;font-weight:700;font-size:15px;white-space:nowrap;text-decoration:none!important;direction:rtl;transition:border-color .3s,background .3s,transform .3s}
.ops-brand img{max-height:34px;width:auto;filter:grayscale(1) brightness(1.6);opacity:.8;transition:filter .3s,opacity .3s}
.ops-brand:hover{border-color:rgba(34,211,238,.45);background:rgba(34,211,238,.06);transform:translateY(-2px)}
.ops-brand:hover img{filter:none;opacity:1}

/* ---------- section motion for the existing Elementor sections ---------- */
.ops-ready .ops-wm{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.12em .04em .32em;margin:-.12em -.04em -.32em}
.ops-ready .ops-wi{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ops-ease);transition-delay:calc(var(--i,0) * 55ms)}
.ops-ready .ops-split-in .ops-wi{transform:none}
.elementor-heading-title em .ops-wi{background:inherit;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ops-ready [data-ops-rv]{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s var(--ops-ease);transition-delay:var(--dl,0s)}
.ops-ready [data-ops-rv].is-in{opacity:1;transform:none}
/* hero */
.ops-ready .op-hero .op-chip,.ops-ready .op-hero .op-lead,.ops-ready .op-hero .op-cta,.ops-ready .op-hero .op-stats{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s var(--ops-ease)}
.ops-ready .op-hero.is-in .op-chip{opacity:1;transform:none;transition-delay:.05s}
.ops-ready .op-hero.is-in .op-lead{opacity:1;transform:none;transition-delay:.75s}
.ops-ready .op-hero.is-in .op-cta{opacity:1;transform:none;transition-delay:.9s}
.ops-ready .op-hero.is-in .op-stats{opacity:1;transform:none;transition-delay:1.05s}
.ops-hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ops-hero-bg:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:60px 60px;-webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 45%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse 75% 65% at 50% 45%,#000 25%,transparent 78%)}
.ops-hero-bg:after{content:"";position:absolute;width:680px;height:680px;left:var(--mx,30%);top:var(--my,45%);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(124,92,255,.22),rgba(34,211,238,.08) 45%,transparent 70%);transition:left .9s var(--ops-ease),top .9s var(--ops-ease)}
.op-hero{isolation:isolate}
.op-hero>*:not(.ops-hero-bg){position:relative;z-index:1}
.op-hero .op-h1 .elementor-heading-title{font-family:var(--ops-display)!important;letter-spacing:-.01em}
/* services: clip reveal + spotlight */
.ops-ready .op-card.ops-svc-rv{clip-path:inset(18% 0 0 0 round 22px);opacity:0;transition:clip-path 1s var(--ops-ease-io),opacity .8s ease;transition-delay:var(--dl,0s)}
.ops-ready .op-card.ops-svc-rv.is-in{clip-path:inset(0 0 0 0 round 22px);opacity:1}
.op-card{position:relative}
.op-card:after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(420px circle at var(--x,50%) var(--y,0%),rgba(124,92,255,.14),transparent 45%);opacity:0;transition:opacity .4s;pointer-events:none}
.op-card:hover:after{opacity:1}
/* process timeline */
.ops-timeline{position:relative;padding-top:30px!important}
.ops-timeline:before,.ops-timeline:after{content:"";position:absolute;top:0;left:4%;right:4%;height:2px;border-radius:2px}
.ops-timeline:before{background:rgba(255,255,255,.08)}
.ops-timeline:after{background:var(--op-grad);transform:scaleX(var(--p,0));transform-origin:100% 50%}
.ops-ready .ops-timeline .op-step{opacity:.35;transform:translateY(16px);transition:opacity .6s ease,transform .6s var(--ops-ease),border-color .6s,box-shadow .6s}
.ops-ready .ops-timeline .op-step.is-on{opacity:1;transform:none;border-color:rgba(124,92,255,.5)!important;box-shadow:0 30px 60px -35px rgba(124,92,255,.65)}
/* experience: slide from the side + line */
.ops-xline{position:relative;padding-inline-start:36px!important}
.ops-xline:before{content:"";position:absolute;inset-inline-start:11px;top:10px;bottom:10px;width:2px;border-radius:2px;background:linear-gradient(var(--op-a1),var(--op-a2));transform:scaleY(var(--p,0));transform-origin:50% 0}
.ops-xline .op-exp{position:relative;overflow:visible!important}
.ops-xdot{position:absolute;inset-inline-start:-32px;top:30px;width:14px;height:14px;border-radius:50%;background:var(--op-bg);border:3px solid var(--op-a2);box-shadow:0 0 0 6px rgba(34,211,238,.12)}
.ops-ready .ops-xline .op-exp{opacity:0;transform:translateX(40px);transition:opacity .8s ease,transform .8s var(--ops-ease)}
html[dir="ltr"] .ops-ready .ops-xline .op-exp{transform:translateX(-40px)}
.ops-ready .ops-xline .op-exp.is-in{opacity:1;transform:none}
/* packages: 3D flip-up + animated border on the popular plan */
.ops-ready .op-pk.ops-pk-rv{opacity:0;transform:perspective(1000px) rotateX(18deg) translateY(40px);transform-origin:50% 100%;transition:opacity .9s ease,transform 1s var(--ops-ease);transition-delay:var(--dl,0s)}
.ops-ready .op-pk.ops-pk-rv.is-in{opacity:1;transform:none}
.op-pk.is-in:hover{transform:translateY(-8px)!important}
.op-pk.op-pop{background:linear-gradient(var(--op-card),var(--op-card)) padding-box,conic-gradient(from var(--ang,0deg),#7c5cff,#22d3ee,#7c5cff) border-box!important;border:1.5px solid transparent!important;box-shadow:0 40px 90px -45px rgba(124,92,255,.85)}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.op-pk.op-pop{animation:opsSpin 6s linear infinite}
/* contact CTA: pulse ring guiding attention */
.ops-pulse{position:relative}
.ops-pulse .elementor-button:after{content:"";position:absolute;inset:-6px;border-radius:999px;border:2px solid rgba(34,211,238,.6);animation:opsPulse 2.4s ease-out infinite;pointer-events:none}
.ops-pulse .elementor-button{position:relative}
/* scroll progress + cursor */
.ops-progress-top{position:fixed;top:0;left:0;right:0;height:3px;z-index:99999;background:var(--op-grad);transform:scaleX(0);transform-origin:100% 50%;pointer-events:none}
.ops-cursor{position:fixed;top:0;left:0;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:1.5px solid rgba(34,211,238,.7);pointer-events:none;z-index:99998;transition:width .25s,height .25s,margin .25s,background .25s,opacity .25s;opacity:0}
.ops-cursor.is-on{opacity:1}
.ops-cursor.is-hover{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(124,92,255,.12);border-color:transparent}

/* ---------- project detail page ---------- */
.ops-top{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 5vw;background:rgba(7,9,15,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--op-line)}
.ops-logo{font-family:var(--ops-display);font-weight:700;font-size:20px;color:var(--op-text);text-decoration:none}
.ops-logo span{color:var(--op-a2)}
.ops-top-nav{display:flex;align-items:center;gap:14px}
.ops-back{display:inline-flex;align-items:center;gap:6px;color:var(--op-muted);text-decoration:none;font-size:14px}
.ops-back svg{width:16px;height:16px}
.ops-back:hover{color:var(--op-text)}
.ops-detail{max-width:1240px;margin:0 auto;padding:0 5vw}
.ops-d-hero{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:center;min-height:calc(100vh - 70px);padding:50px 0}
.ops-d-logo img{max-height:56px;width:auto;margin-bottom:18px}
.ops-d-title{margin:0 0 16px;font-family:var(--ops-display);font-size:clamp(34px,5vw,64px);line-height:1.1;font-weight:700}
.ops-d-lead{margin:0 0 26px;color:var(--op-muted);font-size:18px;line-height:1.9}
.ops-d-body{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;padding:70px 0;border-top:1px solid var(--op-line)}
.ops-d-h2{margin:0 0 18px;font-family:var(--ops-display);font-size:clamp(22px,2.4vw,30px);font-weight:700}
.ops-d-content{color:var(--op-muted);font-size:16.5px;line-height:2}
.ops-d-services{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ops-d-services li{padding:14px 18px;border-radius:14px;background:var(--op-card);border:1px solid var(--op-line);font-weight:600}
.ops-d-services li:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--op-grad);margin-inline-end:10px}
.ops-d-section{padding:60px 0;border-top:1px solid var(--op-line)}
.ops-laptop-xl{width:100%;max-width:1000px;margin:0 auto}
.ops-browse-screen img{position:absolute;inset:0;opacity:0;transition:opacity 1s ease,transform 6s var(--ops-ease);transform:scale(1.04)}
.ops-browse-screen img.is-on{opacity:1;transform:none}
.ops-d-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.ops-d-shot{display:block;border-radius:16px;overflow:hidden;border:1px solid var(--op-line)}
.ops-d-shot img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;display:block;transition:transform .8s var(--ops-ease)}
.ops-d-shot:hover img{transform:scale(1.05)}
.ops-d-similar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ops-sim{display:flex;flex-direction:column;gap:6px;padding-bottom:16px;border-radius:18px;overflow:hidden;background:var(--op-card);border:1px solid var(--op-line);color:var(--op-text);text-decoration:none;transition:transform .4s var(--ops-ease),border-color .3s}
.ops-sim:hover{transform:translateY(-4px);border-color:rgba(124,92,255,.5)}
.ops-sim img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;margin-bottom:10px}
.ops-sim .ops-kick,.ops-sim strong{padding:0 16px}
.ops-d-cta{text-align:center;padding:90px 0;border-top:1px solid var(--op-line)}
.ops-d-cta h2{font-family:var(--ops-display);font-size:clamp(28px,4vw,48px);margin:0 0 12px;line-height:1.25}
.ops-d-cta em{font-style:normal;background:var(--op-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ops-d-cta p{color:var(--op-muted);margin:0 0 26px}
.ops-foot{text-align:center;color:var(--op-muted);font-size:13px;padding:26px;border-top:1px solid var(--op-line)}

/* ---------- responsive ---------- */
@media (max-width:1024px){
	.ops-slide{flex-basis:86vw;grid-template-columns:1fr;gap:22px}
	.ops-slide-n{font-size:80px;top:-.4em}
	.ops-d-hero{grid-template-columns:1fr;min-height:0;gap:36px;padding:40px 0}
	.ops-d-body{grid-template-columns:1fr}
}
@media (max-width:767px){
	.ops-cine-track{padding:10px 7vw 24px;gap:14px}
	.ops-slide{flex-basis:80vw;transform:scale(calc(.9 + .1 * var(--f,1)))}
	.ops-slide-media .ops-devices{transform:none}
	.ops-slide-title{font-size:26px}
	.ops-slide-desc{font-size:15px;margin-bottom:16px}
	.ops-cine-nav,.ops-gal-nav{gap:14px}
	.ops-arrow{width:44px;height:44px}
	.ops-tabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin:0 -16px 20px;padding:0 16px 4px}
	.ops-tabs::-webkit-scrollbar{display:none}
	.ops-tab{flex:0 0 auto}
	.ops-rail{gap:14px;padding:6px 7vw 20px;scroll-padding-inline:7vw}
	.ops-card.ops-w,.ops-card.ops-n,.ops-card.ops-t{width:80vw}
	.ops-card.ops-t .ops-card-media img{aspect-ratio:16/10}
	.ops-rail-wrap:before,.ops-rail-wrap:after{width:5vw}
	.ops-stage{padding-bottom:58px}
	.ops-phone{width:28%}
	.ops-d-gallery,.ops-d-similar{grid-template-columns:1fr 1fr}
	.ops-top{padding:12px 16px}.ops-back{display:none}
	.ops-timeline:before,.ops-timeline:after{top:0;bottom:0;left:auto;right:8px;width:2px;height:auto}
	.ops-timeline:after{transform:scaleY(var(--p,0));transform-origin:50% 0}
	.ops-timeline{padding-top:0!important;padding-inline-start:28px!important}
	.ops-cursor{display:none}
}
@media (prefers-reduced-motion:reduce){.ops-cursor{display:none}}
@keyframes opsBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes opsCardIn{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
@keyframes opsMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes opsSpin{to{--ang:360deg}}
@keyframes opsPulse{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
/* services: real project visuals per service (class op-svc-N on each service card) */
.op-svc{padding-top:196px!important;overflow:hidden}
.op-svc:before{content:"";position:absolute;top:12px;left:12px;right:12px;height:168px;border-radius:16px;border:1px solid var(--op-line);background:var(--svc,none) center bottom/cover no-repeat,var(--op-bg2);transition:transform 1s var(--ops-ease)}
.op-svc:hover:before{transform:scale(1.04)}
.op-svc-1{--svc:url(/wp-content/uploads/2026/11/hd-promise.jpg)}
.op-svc-2{--svc:url(/wp-content/uploads/2026/11/hd-edra.jpg)}
.op-svc-3{--svc:url(/wp-content/uploads/2026/11/hd-leadtec.jpg)}
.op-svc-4{--svc:url(/wp-content/uploads/2026/11/hd-admind.jpg)}
.op-svc-6{--svc:url(/wp-content/uploads/2026/11/hd-almaha.jpg)}
.op-svc-5:before{background:linear-gradient(180deg,var(--op-a1),var(--op-a2)) 14% calc(100% - 18px)/9% 30% no-repeat,linear-gradient(180deg,var(--op-a1),var(--op-a2)) 30% calc(100% - 18px)/9% 46% no-repeat,linear-gradient(180deg,var(--op-a1),var(--op-a2)) 46% calc(100% - 18px)/9% 38% no-repeat,linear-gradient(180deg,var(--op-a1),var(--op-a2)) 62% calc(100% - 18px)/9% 58% no-repeat,linear-gradient(180deg,var(--op-a1),var(--op-a2)) 78% calc(100% - 18px)/9% 74% no-repeat,linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/100% 28px,radial-gradient(circle at 85% 12%,rgba(34,211,238,.2),transparent 55%),var(--op-bg2)}
@media (max-width:767px){.op-svc{padding-top:176px!important}.op-svc:before{height:148px}}
/* section headings above the components */
.ops-sec-sub,.ops-sec-sub .elementor-heading-title{text-align:center!important}
.op-trust{padding-top:46px!important;padding-bottom:46px!important;border-top:1px solid var(--op-line);border-bottom:1px solid var(--op-line)}
.op-trust .op-kicker,.op-trust .op-kicker .elementor-heading-title{text-align:center!important}

/* ===================== v1.1: tighter rhythm ===================== */
.ops-ready .op-sec{padding-top:64px!important;padding-bottom:64px!important}
.ops-ready .op-hero{min-height:min(84vh,820px)!important}
.ops-cine{margin:6px 0 26px}
.ops-gal{margin-top:6px}
.ops-tabs{margin-bottom:18px}
.ops-ready .op-sec .op-h2{margin-bottom:8px}
@media (max-width:767px){
	.ops-ready .op-sec{padding-top:46px!important;padding-bottom:46px!important}
	.ops-ready .op-hero{min-height:0!important;padding-bottom:30px!important}
}

/* ===================== pinned horizontal showcase (desktop) ===================== */
.ops-gal.ops-pin{position:relative}
.ops-pin-inner{position:sticky;top:var(--ops-top,72px);height:calc(100vh - var(--ops-top,72px));display:flex;flex-direction:column;justify-content:center;overflow:visible}
.ops-gal.ops-pin .ops-rail{overflow:visible;scroll-snap-type:none;cursor:default;will-change:transform;transform:translate3d(var(--tx,0px),0,0)}
.ops-gal.ops-pin .ops-card{transform:translateY(calc((1 - var(--v,1)) * 46px)) scale(calc(.9 + .1 * var(--v,1)));opacity:calc(.35 + .65 * var(--v,1));transition:border-color .35s,box-shadow .5s}
.ops-gal.ops-pin .ops-card:hover{transform:translateY(-6px) scale(1)}
.ops-gal.ops-pin .ops-card-media img{transform:translate3d(calc(var(--px,0) * 34px),0,0) scale(1.1);transition:none}
.ops-gal.ops-pin .ops-card-body>*{opacity:calc(var(--v,1) * 1.4 - .4);transform:translateY(calc((1 - var(--v,1)) * 14px))}
.ops-gal.ops-pin .ops-card-title{transition-delay:.05s}
.ops-pin-hint{display:flex;align-items:center;gap:10px;justify-content:center;color:var(--op-muted);font-size:13px;margin-top:8px}
.ops-pin-hint i{display:block;width:22px;height:34px;border:2px solid var(--op-line);border-radius:12px;position:relative}
.ops-pin-hint i:after{content:"";position:absolute;top:6px;left:50%;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:var(--op-a2);animation:opsWheel 1.6s ease-in-out infinite}
@keyframes opsWheel{0%{transform:translateY(0);opacity:1}100%{transform:translateY(12px);opacity:0}}

/* text reveal on scroll */
.ops-ready [data-ops-tx]{opacity:0;transform:translateY(18px);filter:blur(4px);transition:opacity .8s ease,transform .8s var(--ops-ease),filter .8s ease;transition-delay:var(--dl,0s)}
.ops-ready [data-ops-tx].is-in{opacity:1;transform:none;filter:none}

/* ===================== theme toggle ===================== */
.ops-theme{width:42px;height:42px;border-radius:50%;border:1px solid var(--op-line);background:rgba(255,255,255,.04);color:var(--op-text);display:inline-grid;place-items:center;cursor:pointer;padding:0;transition:background .3s,transform .4s var(--ops-ease);flex:0 0 auto}
.ops-theme:hover{transform:rotate(-20deg)}
.ops-theme svg{width:19px;height:19px}
.ops-theme .ops-sun{display:none}
html[data-theme="light"] .ops-theme .ops-sun{display:block}
html[data-theme="light"] .ops-theme .ops-moon{display:none}
html.ops-theming,html.ops-theming *{transition:background-color .45s ease,color .45s ease,border-color .45s ease!important}

/* ===================== light theme (same accents, light surfaces) ===================== */
html[data-theme="light"]{--op-bg:#f5f6fb;--op-bg2:#eceef6;--op-card:#ffffff;--op-line:rgba(15,20,40,.11);--op-text:#0e1324;--op-muted:#5a647c;color-scheme:light}
html[data-theme="light"] body{background:var(--op-bg)!important;color:var(--op-text)}
html[data-theme="light"] .op-logo .elementor-heading-title,html[data-theme="light"] .op-h1 .elementor-heading-title,html[data-theme="light"] .op-h2 .elementor-heading-title,html[data-theme="light"] .op-cat .elementor-heading-title,html[data-theme="light"] .op-card .elementor-icon-box-title,html[data-theme="light"] .op-step .elementor-icon-box-title,html[data-theme="light"] .op-card .elementor-icon-box-title a,html[data-theme="light"] .op-exp-t .elementor-heading-title,html[data-theme="light"] .op-tag .elementor-heading-title,html[data-theme="light"] .op-pk-t .elementor-heading-title,html[data-theme="light"] .op-faq .elementor-tab-title,html[data-theme="light"] .op-faq .elementor-tab-title a,html[data-theme="light"] .op-faq .elementor-toggle-title,html[data-theme="light"] .op-contacts .elementor-icon-list-text,html[data-theme="light"] .op-counter .elementor-counter-number-wrapper,html[data-theme="light"] .op-nav .elementor-icon-list-item:hover .elementor-icon-list-text,html[data-theme="light"] .op-soc .elementor-social-icon i,html[data-theme="light"] .op-loc .elementor-heading-title{color:var(--op-text)!important}
html[data-theme="light"] .op-card,html[data-theme="light"] .op-step,html[data-theme="light"] .op-pk,html[data-theme="light"] .op-exp{background:linear-gradient(180deg,#ffffff,#f9fafe)!important;box-shadow:0 18px 40px -28px rgba(30,40,90,.25)}
html[data-theme="light"] .op-pk.op-pop{background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--ang,0deg),#7c5cff,#22d3ee,#7c5cff) border-box!important}
html[data-theme="light"] .op-btn.op-ghost .elementor-button,html[data-theme="light"] .op-lang .elementor-button{background:rgba(15,20,40,.04)!important;color:var(--op-text)!important}
html[data-theme="light"] .op-form input,html[data-theme="light"] .op-form select,html[data-theme="light"] .op-form textarea{background:#fff!important;color:var(--op-text)!important}
html[data-theme="light"] .op-form select option{background:#fff}
html[data-theme="light"] .op-loc .elementor-heading-title,html[data-theme="light"] .op-soc .elementor-social-icon{background:rgba(15,20,40,.06)!important}
html[data-theme="light"] .op-header,html[data-theme="light"] .ops-top{background:rgba(245,246,251,.82)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html[data-theme="light"] .ops-hero-bg:before{background-image:linear-gradient(rgba(15,20,40,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(15,20,40,.06) 1px,transparent 1px)}
html[data-theme="light"] .ops-stage-cap{background:rgba(255,255,255,.85)}
html[data-theme="light"] .ops-btn-ghost,html[data-theme="light"] .ops-arrow,html[data-theme="light"] .ops-tab,html[data-theme="light"] .ops-theme{background:rgba(15,20,40,.04)}
html[data-theme="light"] .ops-card,html[data-theme="light"] .ops-sim,html[data-theme="light"] .ops-d-services li{box-shadow:0 18px 40px -28px rgba(30,40,90,.3)}
html[data-theme="light"] .ops-slide-n{-webkit-text-stroke-color:rgba(15,20,40,.12)}
html[data-theme="light"] .ops-progress,html[data-theme="light"] .ops-timeline:before{background:rgba(15,20,40,.1)}
html[data-theme="light"] .ops-cursor{border-color:rgba(124,92,255,.7)}
html.ops-ready{overflow-x:clip}
.ops-gal.ops-pin .ops-card.ops-w{width:min(500px,34vw)}
.ops-gal.ops-pin .ops-card.ops-n{width:min(380px,26vw)}
.ops-gal.ops-pin .ops-card.ops-t{width:min(340px,24vw)}
.ops-gal.ops-pin .ops-card.ops-t .ops-card-media img{aspect-ratio:16/10}
.ops-gal.ops-pin .ops-card{opacity:calc(.5 + .5 * var(--v,1))}
.ops-gal.ops-pin .ops-card-desc{margin-bottom:14px}
.ops-gal.ops-pin .ops-gal-nav{margin-top:4px}
@media (max-height:760px){.ops-gal.ops-pin .ops-card-desc{display:none}}

/* swipe rail on touch: cards breathe as they pass the centre */
.ops-gal.ops-fx .ops-card{transform:translateY(calc((1 - var(--v,1)) * 18px)) scale(calc(.94 + .06 * var(--v,1)));opacity:calc(.55 + .45 * var(--v,1));transition:transform .25s ease-out,opacity .25s ease-out,border-color .35s,box-shadow .5s}
.ops-gal.ops-fx .ops-card-media img{transform:translate3d(calc(var(--px,0) * 22px),0,0) scale(1.08);transition:transform .25s ease-out}