/* SitesUp hub — components. Builds on tokens.css (colors, type scale, controls). */

/* ---------- utilities ---------- */
[hidden]{display:none!important}
.muted{color:var(--muted)}
.selectable{user-select:all}
.hl{color:var(--teal)}
.req{color:var(--bad)}
.row-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.center-row{display:flex;justify-content:center;margin-top:48px}
.btn-lg{--bh:58px;padding-inline:28px;font-size:16px}
.btn-block{width:100%}
.flip-x{transform:scaleX(-1)}
:root[dir="rtl"] .flip-x{transform:none}
:root[dir="rtl"] .rail-nav [data-rail-next] svg{transform:scaleX(-1)}
:root[dir="rtl"] svg.dir{transform:scaleX(-1)}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;text-decoration:none;color:var(--teal-ink)}
.link-arrow svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}
:root[dir="rtl"] .link-arrow:hover svg.dir{transform:scaleX(-1) translateX(4px)}
.link-arrow.muted{color:var(--muted)}
.skip{position:fixed;top:-60px;inset-inline-start:16px;z-index:200;background:var(--teal);color:var(--on-teal);padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600;transition:top .2s}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}
.scroll-progress{position:fixed;inset:0 0 auto;height:2px;z-index:120;background:var(--teal);transform-origin:0 50%;transform:scaleX(var(--p,0));pointer-events:none}
:root[dir="rtl"] .scroll-progress{transform-origin:100% 50%}
.dots{display:inline-flex;gap:6px}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.dots i:first-child{background:#F2667A}.dots i:nth-child(2){background:#F2C14E}.dots i:nth-child(3){background:#3DD598}
.pill-list{display:flex;flex-wrap:wrap;gap:8px}
.pill-list li{font-size:13px;padding:6px 11px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2)}
.check-list,.check-grid{display:grid;gap:10px}
.check-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px 24px;margin-top:20px}
.check-list li,.check-grid li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink-2)}
.check-list svg,.check-grid svg{width:18px;height:18px;flex:none;color:var(--teal);margin-top:3px}
.num-list{display:grid;gap:14px;counter-reset:n}
.num-list li{display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:baseline;color:var(--ink-2)}
.num-list .mono{color:var(--teal-ink);font-size:12.5px}
.prose{max-width:72ch;display:grid;gap:14px}
.prose h2{font-family:var(--f-display);font-size:24px;margin-top:20px}
:root[lang="ar"] .prose h2{font-family:var(--f-ar)}
.prose p{color:var(--ink-2)}

/* ---------- header ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:101;background:var(--bg)}
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:100;height:var(--header-h);display:flex;align-items:center;transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s}
.site-header::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--line);opacity:0;transition:opacity .35s}
.site-header.is-scrolled{background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
.site-header.is-scrolled::after{opacity:1}
.header-in{display:flex;align-items:center;gap:28px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.brand-mark{width:34px;height:34px;color:var(--ink)}
.brand-word{font-family:var(--f-display);font-weight:800;font-size:23px;letter-spacing:-.03em;font-variation-settings:"wdth" 88;direction:ltr}
.brand-word b{color:var(--teal)}
.brand-word.big{font-size:44px}
.nav{display:flex;align-items:center;gap:4px;margin-inline-start:12px}
.nav-link{display:inline-flex;align-items:center;height:40px;padding-inline:14px;border-radius:999px;text-decoration:none;font-size:14.5px;color:var(--ink-2);transition:color .2s,background .2s}
.nav-link:hover,.nav-link.is-active{color:var(--ink);background:var(--surface-2)}
.nav-item{position:relative}
.mega{position:absolute;top:calc(100% + 10px);inset-inline-start:-20px;width:min(860px,calc(100vw - 40px));display:grid;grid-template-columns:1fr 240px;gap:8px;padding:10px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(8px) scale(.98);transform-origin:20% 0;transition:opacity .25s var(--ease),transform .3s var(--ease),visibility 0s .3s}
.has-menu::after{content:"";position:absolute;inset:100% 0 auto;height:14px}
.has-menu:hover .mega,.has-menu:focus-within .mega{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease),transform .3s var(--ease)}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.mega-link{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:14px;text-decoration:none;transition:background .2s}
.mega-link:hover{background:var(--surface-2)}
.mega-link b{display:block;font-size:14.5px;font-weight:550}
.mega-link small{display:block;font-size:12.5px;color:var(--muted);line-height:1.4}
.mega-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);color:var(--teal);flex:none}
.mega-ic svg{width:18px;height:18px}
.mega-side{border-radius:16px;padding:18px;background:linear-gradient(160deg,color-mix(in srgb,var(--teal) 22%,var(--surface-2)),var(--surface-2));display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.mega-side p{font-size:14px;color:var(--ink-2)}
.mega-side .btn{margin-top:auto}
.header-tools{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.tool-btn{display:inline-grid;place-items:center;min-width:42px;height:42px;padding-inline:10px;border-radius:999px;border:1px solid var(--line-2);background:transparent;text-decoration:none;font-size:14px;transition:border-color .2s,background .2s}
.tool-btn:hover{border-color:var(--ink)}
.tool-btn svg{width:18px;height:18px}
.lang-switch{font-family:var(--f-ar);font-weight:600}
.lang-switch[lang="en"]{font-family:var(--f-body)}
.theme-toggle .i-sun{display:none}
:root[data-theme="light"] .theme-toggle .i-sun{display:block}
:root[data-theme="light"] .theme-toggle .i-moon{display:none}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .theme-toggle .i-sun{display:block}:root:not([data-theme="dark"]) .theme-toggle .i-moon{display:none}}
.menu-btn{display:none}
.mobile-menu{position:fixed;inset:0;z-index:150;background:var(--bg);overflow-y:auto;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.mobile-menu-in{min-height:100%;display:flex;flex-direction:column;gap:24px;padding:16px max(20px,env(safe-area-inset-right,0px)) 28px max(20px,env(safe-area-inset-left,0px));animation:su-rise .4s var(--ease)}
.mm-top{display:flex;justify-content:space-between;align-items:center;height:56px}
.mobile-menu nav{display:grid}
.mobile-menu nav>a{font-family:var(--f-display);font-weight:750;font-size:34px;font-variation-settings:"wdth" 85;text-decoration:none;padding:8px 0;border-bottom:1px solid var(--line)}
:root[lang="ar"] .mobile-menu nav>a{font-family:var(--f-ar);font-size:28px}
.mm-sub{display:flex;flex-wrap:wrap;gap:6px;padding:12px 0}
.mm-sub a{font-size:13.5px;padding:7px 12px;border-radius:999px;border:1px solid var(--line-2);text-decoration:none;color:var(--ink-2)}
.mm-foot{display:grid;gap:10px;margin-top:auto}
@media (max-width:1080px){.nav,.header-cta{display:none}.menu-btn{display:inline-grid}}
@media (max-width:420px){.lang-switch{display:none}}

/* ---------- sections ---------- */
.section{padding-block:clamp(64px,8vw,120px)}
.section-tight{padding-block:clamp(36px,5vw,64px)}
.sec-head{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,64px);max-width:900px}
.sec-head-row{max-width:none;grid-template-columns:1fr auto;align-items:end;gap:24px}
.sec-head-row>div:first-child{display:grid;gap:18px;max-width:860px}
.sec-head-row>.tabs,.sec-head-row>.btn{flex-wrap:nowrap;justify-self:end}
@media (max-width:860px){.sec-head-row{grid-template-columns:1fr}.sec-head-row>.tabs,.sec-head-row>.btn{justify-self:start}}
[data-scrub-width]{--w:100;font-variation-settings:"wdth" var(--w)}
.page-hero{padding-block:clamp(40px,7vw,100px) clamp(24px,4vw,48px);position:relative;overflow:hidden}
.page-hero .wrap{display:grid;gap:18px;justify-items:start}
.page-hero::before{content:"";position:absolute;inset:-40% -10% auto auto;width:60vw;height:60vw;max-width:800px;max-height:800px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c1,var(--teal)) 18%,transparent),transparent);pointer-events:none;z-index:-1}
:root[dir="rtl"] .page-hero::before{inset:-40% auto auto -10%}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs a{text-decoration:none;color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.crumbs span:last-child{color:var(--ink-2)}
.detail-head{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end;width:100%}
.detail-head>div:first-child{display:grid;gap:16px;min-width:0}
.detail-actions{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:860px){.detail-head{grid-template-columns:1fr}}
.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(28px,4vw,64px);align-items:start}
.detail-main{display:grid;gap:18px;min-width:0}
.detail-main .sub{margin-top:18px}
.detail-side{display:grid;gap:14px;position:sticky;top:calc(var(--header-h) + 20px)}
.side-h{font-size:12.5px;font-family:var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:12px}
:root[lang="ar"] .side-h{font-family:var(--f-body);letter-spacing:0}
.panel-cta{background:linear-gradient(160deg,color-mix(in srgb,var(--teal) 16%,var(--surface)),var(--surface));display:grid;gap:12px;justify-items:start}
@media (max-width:960px){.detail-grid{grid-template-columns:1fr}.detail-side{position:static}}
.signature{display:grid;gap:8px;border-inline-start:3px solid var(--teal)}
.swatches{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.sw{display:grid;gap:6px;justify-items:center;font-size:11px}
.sw i{width:44px;height:44px;border-radius:12px;background:var(--c);border:1px solid var(--line-2)}
.sw code{font-family:var(--f-mono);color:var(--muted)}
.note-sim{display:grid;gap:8px;justify-items:start;border-color:color-mix(in srgb,var(--amber) 40%,transparent)}
.next-card{display:grid;gap:8px;padding:clamp(28px,4vw,48px);border-radius:var(--r-xl);border:1px solid var(--line);background:var(--surface);text-decoration:none;transition:border-color .3s,background .3s}
.next-card .t-2{display:flex;align-items:center;gap:16px}
.next-card svg{width:.7em;height:.7em;transition:transform .4s var(--ease)}
.next-card:hover{border-color:var(--teal)}
.next-card:hover svg{transform:translateX(10px)}
:root[dir="rtl"] .next-card:hover svg.dir{transform:scaleX(-1) translateX(10px)}

/* ---------- hero ---------- */
.hero{position:relative;padding-block:clamp(36px,5vw,72px) clamp(40px,5vw,72px);overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-grid-lines{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 75%)}
.hero-glow{position:absolute;width:900px;height:900px;max-width:120vw;inset-inline-end:-200px;top:-300px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--teal) 28%,transparent),transparent 70%);filter:blur(10px);animation:glow-drift 16s ease-in-out infinite alternate}
@keyframes glow-drift{to{transform:translate(-120px,80px) scale(1.1)}}
.hero-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:center}
.hero-copy{display:grid;gap:26px;justify-items:start;min-width:0}
.display.hero-title{--w:76;font-size:clamp(48px,5.8vw,98px);font-variation-settings:"wdth" var(--w);display:grid}
:root[lang="ar"] .display.hero-title{font-size:clamp(38px,4.4vw,72px)}
:root[lang="ar"] .hero-line{white-space:normal}
.hero-line{display:block;overflow:hidden;padding-bottom:.06em;white-space:nowrap}
.hero-line>span{display:inline-block}
.kinetic{font-style:normal;display:inline-block;color:var(--teal);background:linear-gradient(100deg,var(--teal) 0 38%,var(--teal-ink) 46%,#fff 50%,var(--teal-ink) 54%,var(--teal) 62% 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:sheen 5.5s var(--ease-io) 1.4s infinite}
@keyframes sheen{0%{background-position:100% 0}45%,100%{background-position:0 0}}
:root[lang="ar"] .kinetic{animation:none}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero-in{opacity:0;transform:translateY(28px);animation:hero-in .9s var(--ease) forwards;animation-delay:calc(var(--d,0) * 90ms + 80ms)}
.hero-line .hero-in{transform:translateY(105%)}
@keyframes hero-in{to{opacity:1;transform:none}}
.hero-stage{display:grid;gap:14px;min-width:0}
.builder{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.builder-q{font-family:var(--f-mono);font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-inline-end:4px}
:root[lang="ar"] .builder-q{font-family:var(--f-body);letter-spacing:0}
.builder-chips{display:flex;flex-wrap:wrap;gap:6px}
.builder-chips .chip{height:32px;font-size:13px}
.stage-window{border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-lg);overflow:hidden}
.stage-chrome{display:flex;align-items:center;gap:14px;height:44px;padding-inline:14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.stage-url{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:28px;padding-inline:12px;border-radius:8px;background:var(--bg);font-family:var(--f-mono);font-size:12px;color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.stage-url .lock svg{width:12px;height:12px;color:var(--ok)}
.stage-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 var(--ok);animation:live-dot 1.6s infinite}
@keyframes live-dot{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}100%{box-shadow:0 0 0 8px transparent}}
.stage-view{position:relative;aspect-ratio:16/10;background:var(--bg-2);max-width:100%}
.stage-slide{position:absolute;inset:0;margin:0;opacity:0;clip-path:inset(0 0 100% 0);transition:opacity .5s var(--ease),clip-path .9s var(--ease-io)}
.stage-slide.is-on{opacity:1;clip-path:inset(0 0 0 0);z-index:1}
.stage-slide img,.stage-slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.stage-slide video{opacity:0;transition:opacity .6s}
.stage-slide video.is-playing{opacity:1}
.stage-slide figcaption{position:absolute;inset-inline-start:14px;bottom:14px;z-index:2;display:flex;gap:10px;align-items:baseline;padding:8px 14px;border-radius:999px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);font-size:13px}
.stage-slide figcaption span{color:var(--muted)}
.stage-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-top:1px solid var(--line)}
.hero-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--line)}
.hero-facts li{display:grid;gap:6px;padding:22px 20px 0;border-inline-start:1px solid var(--line)}
.hero-facts li:first-child{border-inline-start:0;padding-inline-start:0}
.hero-facts b{font-size:clamp(30px,3vw,44px);font-variation-settings:"wdth" 80}
.hero-facts span{font-size:13.5px;color:var(--muted);max-width:24ch}
@media (max-width:1080px){.hero-layout{grid-template-columns:1fr}.display.hero-title{font-size:clamp(46px,12vw,104px)}}
@media (max-width:720px){.hero-facts{grid-template-columns:1fr 1fr;row-gap:20px}.hero-facts li:nth-child(3){border-inline-start:0;padding-inline-start:0}.stage-foot .small{display:none}.stage-foot{justify-content:flex-end}.stage-chrome .tag{display:none}}

/* ---------- marquee ---------- */
.marquee-band{border-block:1px solid var(--line);padding-block:20px;overflow:hidden;background:var(--bg-2)}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;gap:28px;width:max-content;animation:marquee 46s linear infinite;direction:ltr}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:var(--f-display);font-weight:700;font-size:clamp(22px,2.6vw,34px);font-variation-settings:"wdth" 80;color:var(--ink-2);white-space:nowrap}
.marquee-track i{color:var(--teal);font-style:normal;font-size:14px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- bento (services) ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.bento-tile{--mx:50%;--my:50%;position:relative;display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);text-decoration:none;min-height:260px;overflow:hidden;transform-style:preserve-3d;transition:border-color .35s,transform .5s var(--ease)}
.bento-tile::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx) var(--my),color-mix(in srgb,var(--teal) 14%,transparent),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.bento-tile:hover{border-color:color-mix(in srgb,var(--teal) 40%,var(--line))}
.bento-tile:hover::before{opacity:1}
.bento-tile.s0{grid-column:span 7;min-height:340px}
.bento-tile.s1{grid-column:span 5}
.bento-tile.s2,.bento-tile.s3,.bento-tile.s4{grid-column:span 4}
.bento-tile.s5{grid-column:span 5}
.bento-tile.s6{grid-column:span 4}
.bento-cta{grid-column:span 3;background:var(--teal);color:var(--on-teal);border-color:var(--teal)}
.bento-cta .bento-text,.bento-cta .bento-more{color:var(--on-teal)}
.bento-cta .bento-ic{background:rgba(0,0,0,.12);color:var(--on-teal)}
.bento-tile.s0 .t-3{font-size:clamp(28px,3vw,44px)}
.bento-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--surface-2);color:var(--teal);border:1px solid var(--line)}
.bento-ic svg{width:22px;height:22px}
.bento-k{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
:root[lang="ar"] .bento-k{font-family:var(--f-body);letter-spacing:0}
.bento-text{color:var(--muted);font-size:15px;max-width:52ch}
.bento-more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--teal-ink)}
.bento-more svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.bento-tile:hover .bento-more svg{transform:translateX(5px)}
:root[dir="rtl"] .bento-tile:hover .bento-more svg.dir{transform:scaleX(-1) translateX(5px)}
@media (max-width:1080px){.bento-tile.s0,.bento-tile.s1,.bento-tile.s2,.bento-tile.s3,.bento-tile.s4,.bento-tile.s5,.bento-tile.s6,.bento-cta{grid-column:span 6}}
@media (max-width:640px){.bento{grid-template-columns:1fr}.bento-tile.s0,.bento-tile.s1,.bento-tile.s2,.bento-tile.s3,.bento-tile.s4,.bento-tile.s5,.bento-tile.s6,.bento-cta{grid-column:auto;min-height:0}}

/* ---------- template cards / rail / grids ---------- */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(290px,29vw,410px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding-bottom:12px;scrollbar-width:thin;overscroll-behavior-x:contain}
.rail>*{scroll-snap-align:start}
.rail>[hidden]{display:none}
.rail-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:28px;flex-wrap:wrap}
.rail-nav{display:flex;gap:8px}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:22px}
.tgrid-3{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.tcard{display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);overflow:hidden;transition:border-color .35s,transform .5s var(--ease),box-shadow .5s var(--ease)}
.tcard:hover{border-color:color-mix(in srgb,var(--c1) 55%,var(--line));transform:translateY(-4px);box-shadow:var(--shadow-md)}
.tcard-media,.fcard-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,var(--c1,var(--teal)),var(--c2,var(--surface-2)));max-width:100%}
.tcard-media img,.tcard-media video,.fcard-media img,.fcard-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.2s var(--ease),opacity .5s}
.tcard:hover .tcard-media img{transform:scale(1.04)}
.tcard-media video,.fcard-media video{opacity:0}
.tcard-media video.is-playing,.fcard-media video.is-playing{opacity:1}
.tcard-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center}
.tcard-fallback b{line-height:1;font-family:var(--f-display);font-size:clamp(28px,3vw,40px);font-variation-settings:"wdth" 80;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.35)}
.tcard-play{position:absolute;inset-inline-start:12px;bottom:12px;display:inline-flex;gap:6px;align-items:center;padding:6px 11px;border-radius:999px;background:rgba(6,9,10,.68);color:#E8F1EF;font-size:12px;backdrop-filter:blur(8px);transition:opacity .3s}
.tcard-play svg{width:12px;height:12px}
.tcard:hover .tcard-play{opacity:0}
.tcard-body{display:flex;flex-direction:column;gap:10px;padding:20px 20px 22px;flex:1}
.tcard-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tcard-title{font-family:var(--f-display);font-size:26px;font-weight:800;font-variation-settings:"wdth" 82;letter-spacing:-.015em}
.tcard-text{color:var(--muted);font-size:14.5px}
.tcard-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:18px}
.fgrid-3{grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr))}
.fgrid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.fcard{display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);overflow:hidden;transition:border-color .35s,transform .5s var(--ease)}
.fcard:hover{border-color:color-mix(in srgb,var(--teal) 45%,var(--line));transform:translateY(-3px)}
.fcard-media{aspect-ratio:11/7;--c1:var(--teal-deep);--c2:var(--surface-2)}
.fcard-body{display:flex;flex-direction:column;gap:8px;padding:18px 18px 20px;flex:1;align-items:flex-start}
.fcard-title{font-size:19px;font-weight:600;font-family:var(--f-body);letter-spacing:-.005em}
.fcard-body .link-arrow{margin-top:auto;padding-top:6px}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cgrid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:960px){.cgrid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cgrid,.cgrid-2{grid-template-columns:1fr}}
.ccard{display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);overflow:hidden}
.ccard-media{display:block;background:var(--surface-2);text-decoration:none;overflow:hidden}
.ccard-media img{width:100%;aspect-ratio:1100/576;object-fit:cover;object-position:top;transition:transform 1.4s var(--ease)}
.ccard:hover .ccard-media img{transform:scale(1.03)}
.browser-mini{display:flex;align-items:center;gap:10px;height:30px;padding-inline:12px;background:var(--surface-3);font-family:var(--f-mono);font-size:11.5px;color:var(--muted)}
.browser-mini .dots i{width:7px;height:7px}
.ccard-body{display:grid;gap:8px;padding:20px}
.ccard-text{color:var(--ink-2);font-size:15px}
.ccard-actions{display:flex;flex-wrap:wrap;gap:18px;margin-top:6px}
.browser-shot{margin:0;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--shadow-md)}
.browser-shot img{width:100%}
.case-shots{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.case-shots .browser-shot:first-child{grid-column:1/-1}
@media (max-width:720px){.case-shots{grid-template-columns:1fr}}

/* ---------- toolbar / gallery ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);position:sticky;top:calc(var(--header-h) + env(safe-area-inset-top,0px) + 8px);z-index:20}
.tabs{display:flex;flex-wrap:wrap;gap:6px}
.chip .count{font-family:var(--f-mono);font-size:11px;opacity:.6}
.search-box{flex:1;min-width:200px;display:flex;align-items:center;gap:10px;height:40px;padding-inline:14px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line)}
.search-box:focus-within{border-color:var(--teal)}
.search-box svg{width:16px;height:16px;color:var(--muted);flex:none}
.search-box input{flex:1;min-width:0;border:0;background:transparent;outline:none;height:100%}
.sort-box .select{height:40px;min-height:0;padding-block:0;border-radius:999px;background:var(--bg-2)}
.result-line{margin:18px 4px}
.empty-state{display:grid;justify-items:center;text-align:center;gap:12px;padding:64px 20px;border:1px dashed var(--line-2);border-radius:var(--r-lg)}
@media (max-width:720px){.toolbar{border-radius:var(--r-md);position:static}.search-box{min-width:100%;order:3}}

/* ---------- device preview & stages ---------- */
.device-preview{border-radius:var(--r-xl);border:1px solid var(--line-2);background:var(--surface);overflow:hidden}
.device-bar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line)}
.device-bar .chip svg{width:15px;height:15px}
.device-note{flex:1;min-width:200px}
.device-stage{display:grid;place-items:start center;padding:clamp(12px,2vw,28px);background:repeating-linear-gradient(45deg,var(--bg-2) 0 12px,var(--bg) 12px 24px);overflow:hidden}
.device-frame{--fw:100%;position:relative;width:var(--fw);max-width:100%;height:min(78vh,820px);border-radius:16px;overflow:hidden;background:var(--bg-2);border:1px solid var(--line-2);box-shadow:var(--shadow-lg);transition:width .6s var(--ease-io),border-radius .6s}
.device-frame[data-size="tablet"]{--fw:820px}
.device-frame[data-size="mobile"]{--fw:390px;border-radius:34px;border-width:8px;border-color:var(--surface-3);height:min(80vh,780px)}
.device-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.device-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;filter:saturate(.9)}
.device-load{position:absolute;inset:auto 0 28px;margin-inline:auto;width:max-content;max-width:calc(100% - 32px);z-index:2;box-shadow:var(--shadow-lg)}
.device-frame.is-loaded .device-poster,.device-frame.is-loaded .device-load{display:none}
.feature-stage{border-radius:var(--r-xl);border:1px solid var(--line-2);overflow:hidden;background:var(--surface);height:min(78vh,760px);box-shadow:var(--shadow-md)}
.feature-stage.tall{height:min(86vh,900px)}
.feature-stage iframe{width:100%;height:100%;border:0;display:block}
.stage-hint{margin-top:12px}
.showcase-head{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:20px}
.showcase-head .link-arrow{margin-inline-start:auto}
.video-frame{margin:0;display:grid;gap:10px}
.video-frame video{width:100%;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--bg-2)}

/* ---------- split band ---------- */
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.split-card{display:grid;border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line);overflow:hidden}
.split-media{position:relative;aspect-ratio:16/10;background:linear-gradient(140deg,var(--teal-deep),var(--surface-2));overflow:hidden;max-width:100%}
.split-media img,.split-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.split-media video{opacity:0;transition:opacity .6s}
.split-media video.is-playing{opacity:1}
.split-sim{position:absolute;top:14px;inset-inline-end:14px;background:rgba(6,9,10,.72);backdrop-filter:blur(8px)}
.split-body{display:grid;gap:16px;padding:clamp(22px,3vw,36px);align-content:start;justify-items:start}
@media (max-width:960px){.split-grid{grid-template-columns:1fr}}

/* ---------- reel ---------- */
.reel-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(160px,auto);gap:14px}
.reel-item{position:relative;display:block;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/10;background:var(--surface-2);text-decoration:none;max-width:100%}
.reel-item.r0{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.reel-item img,.reel-item video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.reel-item video{opacity:0;transition:opacity .6s}
.reel-item video.is-playing{opacity:1}
.reel-cap{position:absolute;inset:auto 10px 10px;display:flex;gap:8px;align-items:baseline;padding:7px 12px;border-radius:999px;background:rgba(6,9,10,.7);color:#E8F1EF;font-size:12.5px;backdrop-filter:blur(8px);width:max-content;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:860px){.reel-grid{grid-template-columns:1fr 1fr}}

/* ---------- process ---------- */
.process-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,96px);align-items:start}
.process-head{position:sticky;top:calc(var(--header-h) + 40px)}
.steps{position:relative;display:grid;gap:0}
.step{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:28px 0;border-bottom:1px solid var(--line)}
.step .step-n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:1px solid var(--line-2);font-size:13px;color:var(--teal-ink);position:relative;z-index:1;transition:background .4s,color .4s,border-color .4s}
.step.is-passed .step-n{background:var(--teal);border-color:var(--teal);color:var(--on-teal)}
.step h3{margin-bottom:8px}
.step p{color:var(--muted)}
.steps-rail{position:absolute;inset-block:50px 50px;inset-inline-start:21px;width:2px;background:var(--line);list-style:none}
.steps-rail span{position:absolute;inset:0 0 auto;height:calc(var(--sp,0) * 100%);background:var(--teal)}
@media (max-width:960px){.process-grid{grid-template-columns:1fr}.process-head{position:static}}

/* ---------- services list / detail ---------- */
.svc-list{display:grid;border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:48px 52px minmax(0,1fr) auto 44px;gap:20px;align-items:center;padding:26px 8px;border-bottom:1px solid var(--line);text-decoration:none;transition:background .3s,padding .4s var(--ease)}
.svc-row:hover{background:var(--surface);padding-inline:20px}
.svc-n{color:var(--faint);font-size:13px}
.svc-main{display:grid;gap:4px;min-width:0}
.svc-main .t-3{font-size:clamp(22px,2.4vw,32px)}
.svc-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:360px}
.svc-go{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);transition:background .3s,color .3s}
.svc-go svg{width:18px;height:18px}
.svc-row:hover .svc-go{background:var(--teal);border-color:var(--teal);color:var(--on-teal)}
@media (max-width:960px){.svc-row{grid-template-columns:40px minmax(0,1fr) 44px}.svc-n,.svc-tags{display:none}}
.svc-hero{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;width:100%}
.svc-hero>div{display:grid;gap:18px;justify-items:start;min-width:0}
.svc-hero-ic{width:clamp(120px,16vw,220px);aspect-ratio:1;border-radius:36%;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--teal) 40%,var(--surface-2)),var(--surface));border:1px solid var(--line-2);color:var(--teal-ink);animation:float 7s ease-in-out infinite}
.svc-hero-ic svg{width:42%;height:42%}
@keyframes float{50%{transform:translateY(-12px) rotate(-3deg)}}
@media (max-width:720px){.svc-hero{grid-template-columns:1fr}.svc-hero-ic{display:none}}
.deliver-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
.deliver{display:grid;gap:10px;align-content:start;padding:24px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.step-n{color:var(--teal-ink);font-size:12.5px}
@media (max-width:1080px){.deliver-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.deliver-grid{grid-template-columns:1fr}}
.cap-cloud{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.cap-cloud li{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.cap-cloud svg{width:14px;height:14px;color:var(--teal)}
.faq-wrap{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,4vw,64px);align-items:start}
.faq{display:grid;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;cursor:pointer;list-style:none;font-size:18px;font-weight:500}
.faq-item summary::-webkit-details-marker{display:none}
.faq-plus{position:relative;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);flex:none}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;inset:50% 8px auto;height:1.5px;background:currentColor;transform:translateY(-50%);transition:transform .3s var(--ease)}
.faq-plus::after{transform:translateY(-50%) rotate(90deg)}
.faq-item[open] .faq-plus::after{transform:translateY(-50%) rotate(0)}
.faq-item p{padding:0 0 24px;color:var(--ink-2);max-width:68ch}
@media (max-width:860px){.faq-wrap{grid-template-columns:1fr}}

/* ---------- about / tech ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:start}
.about-statement .t-2{font-variation-settings:"wdth" 82;line-height:1}
.about-body{display:grid;gap:16px;color:var(--ink-2);font-size:17px}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.principle{display:grid;gap:12px;align-content:start;padding:26px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
@media (max-width:960px){.about-grid{grid-template-columns:1fr}.principles{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.principles{grid-template-columns:1fr}}
.tech-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px}
.tech-card{display:grid;gap:12px;align-content:start;padding:26px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(20px,3vw,40px);align-items:start}
.contact-side{display:grid;gap:14px;position:sticky;top:calc(var(--header-h) + 20px)}
.contact-side .panel{display:grid;gap:12px}
.contact-side svg{width:16px;height:16px;vertical-align:-3px;color:var(--teal)}
@media (max-width:960px){.contact-grid{grid-template-columns:1fr}.contact-side{position:static}}
.inq-form{display:grid;gap:28px;padding:clamp(20px,3vw,36px);border-radius:var(--r-xl)}
.form-step{border:0;margin:0;padding:0;display:grid;gap:16px;min-width:0}
.step-leg{display:flex;gap:12px;align-items:center;font-family:var(--f-display);font-size:22px;font-weight:700;font-variation-settings:"wdth" 90;padding:0;margin-bottom:6px}
:root[lang="ar"] .step-leg{font-family:var(--f-ar);font-size:20px}
.step-leg .mono{font-size:12px;color:var(--teal-ink);padding:4px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--teal) 40%,transparent)}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:8px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;cursor:pointer}
.choice-in{display:flex;gap:10px;align-items:center;min-height:56px;padding:12px 14px;border-radius:14px;border:1px solid var(--line-2);background:var(--bg-2);transition:border-color .2s,background .2s,box-shadow .2s}
.choice-in svg{width:18px;height:18px;color:var(--teal);flex:none}
.choice-in b{font-weight:500;font-size:14px;line-height:1.3}
.choice input:checked+.choice-in{border-color:var(--teal);background:color-mix(in srgb,var(--teal) 12%,var(--bg-2));box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 18%,transparent)}
.choice input:focus-visible+.choice-in{outline:2px solid var(--teal);outline-offset:2px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.field-row{grid-template-columns:1fr}}
.field-meta{display:flex;justify-content:space-between;gap:12px}
.field-meta .mono{margin-inline-start:auto}
.field-err{font-size:13px;color:var(--bad)}
.is-invalid .input,.is-invalid .select,.is-invalid .textarea,.is-invalid.choice-grid .choice-in{border-color:var(--bad)}
.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);inset-inline-start:-9999px}
.form-foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding-top:8px;border-top:1px solid var(--line)}
.form-foot .small{max-width:44ch}
.form-status{border-radius:var(--r-md);padding:18px 20px;display:grid;gap:10px;justify-items:start;animation:su-rise .4s var(--ease)}
.form-status.ok{background:color-mix(in srgb,var(--ok) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--ok) 40%,transparent)}
.form-status.warn{background:color-mix(in srgb,var(--amber) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--amber) 40%,transparent)}
.form-status.bad{background:color-mix(in srgb,var(--bad) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--bad) 40%,transparent)}
.form-status h3{font-size:18px}
.copy-btn{margin-inline-start:8px;border:1px solid var(--line-2);background:transparent;border-radius:999px;padding:2px 10px;font-size:12px}
.btn.is-loading{pointer-events:none;opacity:.8}
.btn.is-loading svg{display:none}
.btn.is-loading::after{content:"";width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:su-spin .8s linear infinite}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);padding-block:clamp(64px,9vw,120px) calc(28px + env(safe-area-inset-bottom,0px));background:var(--bg-2);position:relative;overflow:hidden}
.footer-cta{display:grid;gap:28px;justify-items:start;padding-bottom:clamp(48px,7vw,96px);border-bottom:1px solid var(--line)}
.footer-cta .t-1{font-size:clamp(44px,7vw,112px);--w:78;font-variation-settings:"wdth" var(--w)}
.footer-cta-actions{display:flex;flex-wrap:wrap;gap:12px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:32px;padding-block:48px}
.footer-brand{display:grid;gap:14px;align-content:start;max-width:38ch}
.footer-h{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:14px}
:root[lang="ar"] .footer-h{font-family:var(--f-body);letter-spacing:0}
.footer-links{display:grid;gap:10px}
.footer-links a{text-decoration:none;color:var(--ink-2);font-size:14.5px}
.footer-links a:hover{color:var(--teal-ink)}
.contact-list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-2)}
.contact-list svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--teal)}
.footer-base{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
@media (max-width:960px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.nf{min-height:50vh;display:grid;align-content:center}

/* ---------- motion helpers ---------- */
.js [data-reveal]{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--rd,0ms)}
.js [data-reveal].is-in{opacity:1;transform:none}
[data-tilt]{will-change:transform}
@media (prefers-reduced-motion:reduce){
  [data-reveal],.hero-in{opacity:1!important;transform:none!important;animation:none!important}
  .marquee-track,.hero-glow,.kinetic,.svc-hero-ic{animation:none!important}
  .stage-slide{transition:none}
}
@media print{.site-header,.site-footer,.scroll-progress{display:none}}
.display:not(.hero-title){--w:84}

/* ---------- live demos index ---------- */
.demo-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px;align-items:start}
.demo-group{display:grid;gap:6px;min-width:0}
.demo-group-wide{grid-column:1/-1}
.demo-col{display:grid;gap:28px;min-width:0;align-content:start}
.demo-list-2{grid-template-columns:1fr 1fr;column-gap:40px}
@media (max-width:900px){.demo-list-2{grid-template-columns:1fr}}
.demo-list{display:grid;border-top:1px solid var(--line)}
.demo-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:12px 6px;border-bottom:1px solid var(--line);text-decoration:none;transition:background .25s,padding .3s var(--ease)}
.demo-row:hover{background:var(--surface);padding-inline:12px}
.demo-row-main{display:grid;min-width:0}
.demo-row-main b{font-weight:550}
.demo-row-main .small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-thumb{width:96px;height:60px;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,var(--teal-deep),var(--surface-2));flex:none}
.demo-thumb img{width:100%;height:100%;object-fit:cover;object-position:top}
.demo-row .svc-go{width:36px;height:36px}
.demo-row:hover .svc-go{background:var(--teal);border-color:var(--teal);color:var(--on-teal)}
@media (max-width:900px){.demo-index{grid-template-columns:1fr}}
@media (max-width:480px){.demo-thumb{width:64px;height:40px}}