/* ===== "awards" layer – shared by index.html and web-design.html ===== */
/* ---- grain (static, no blend mode: cheap) ---- */
body::after{content:"";position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml;utf8,")}
/* ---- scroll progress ---- */
.prog{position:fixed;inset:0;z-index:9996;pointer-events:none;opacity:var(--fo,1);transition:opacity .3s}
.prog svg{display:block;width:100%;height:100%;overflow:visible}
.prog path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.prog .tr{filter:drop-shadow(0 0 4px rgba(255,122,217,.5))}
.prog .tr path{stroke-linecap:round}
.prog .pr{fill:rgba(255,208,71,.22)}
.prog .pb{fill:#FFD047;filter:drop-shadow(0 0 8px rgba(255,208,71,.9))}
html.mm-open .prog{opacity:0}
/* ---- custom cursor (fine pointers only) ---- */
@media(hover:hover) and (pointer:fine){
html.has-cur,html.has-cur *{cursor:none!important}
html.has-cur input,html.has-cur textarea{cursor:text!important}
}
.cur,.cur-ring{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .3s}
.cur{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:linear-gradient(135deg,#c9a6ff,#ff5cc8);box-shadow:0 0 12px rgba(255,92,200,.8)}
.cur-ring{width:44px;height:44px;margin:-22px 0 0 -22px;border:1.5px solid rgba(255,170,232,.8);background:rgba(255,92,200,.08);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 16px rgba(255,92,200,.25);display:grid;place-items:center;transition:width .3s cubic-bezier(.2,.8,.2,1),height .3s cubic-bezier(.2,.8,.2,1),margin .3s cubic-bezier(.2,.8,.2,1),background .25s,opacity .3s}
.cur-ring span{font-size:.85rem;font-weight:700;color:#fff;text-shadow:0 1px 8px rgba(120,20,120,.6);opacity:0;transition:opacity .2s}
html.cur-on .cur,html.cur-on .cur-ring{opacity:1}
html.cur-hover .cur-ring{width:78px;height:78px;margin:-39px 0 0 -39px;border-color:rgba(255,255,255,.6);background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,92,200,.2));-webkit-backdrop-filter:blur(10px) saturate(170%);backdrop-filter:blur(10px) saturate(170%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 34px rgba(255,92,200,.35)}
html.cur-drag .cur-ring{width:100px;height:100px;margin:-50px 0 0 -50px;border-color:rgba(255,255,255,.6);background:linear-gradient(135deg,rgba(255,255,255,.3),rgba(255,92,200,.24));-webkit-backdrop-filter:blur(12px) saturate(170%);backdrop-filter:blur(12px) saturate(170%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 12px 40px rgba(255,92,200,.4)}
html.cur-drag .cur-ring span{opacity:1}
html.cur-down .cur-ring{width:30px;height:30px;margin:-15px 0 0 -15px}
/* ---- text roll on hover ---- */
.rl{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom;line-height:1.35}
.rl1,.rl2{display:block;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.rl2{position:absolute;inset:0;transform:translateY(115%)}
[data-roll]:hover .rl1,[data-roll]:focus-visible .rl1{transform:translateY(-115%)}
[data-roll]:hover .rl2,[data-roll]:focus-visible .rl2{transform:none}
/* ---- spotlight that follows the pointer ---- */
.pc,.srv-card,.stat,.contact{position:relative}
.pc::after,.stat::after,.contact::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.2),transparent 62%)}
.srv-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(138,43,226,.16),transparent 62%)}
.pc:hover::after,.srv-card:hover::after,.stat:hover::after,.contact:hover::after{opacity:1}
/* ---- tilt (web-design cards) ---- */
.pc-tile{transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s ease-out;will-change:transform}
/* ---- marquee band ---- */
.mq{direction:ltr;position:relative;overflow:hidden;margin:clamp(30px,5vw,70px) 0;padding:clamp(16px,2.6vw,34px) 0;border-block:1px solid rgba(255,255,255,.16);background:rgba(5,3,15,.4);z-index:2}
.mq-track{display:flex;width:max-content;direction:ltr;will-change:transform}
.mq-row{display:flex;align-items:center;flex:none}
.mq-row span{direction:rtl;font-family:'Rubik',sans-serif;font-weight:400;font-size:clamp(1.8rem,3.6vw,3.4rem);line-height:1.25;white-space:nowrap;padding:0 .3em .06em;color:rgba(255,255,255,.72)}
.mq-row span.o{background:linear-gradient(90deg,#b9a3e6,#d98bc4);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.8}
.mq-row i{flex:none;width:clamp(22px,2.8vw,38px);height:clamp(22px,2.8vw,38px);background:linear-gradient(135deg,#b9a3e6,#d98bc4);opacity:.55;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:mqSpin 6s linear infinite}
@keyframes mqSpin{to{transform:rotate(360deg)}}
/* ---- ghost word behind hero ---- */
.hero{isolation:isolate}
.ghost-wrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.ghost-word{position:absolute;left:0;top:50%;white-space:nowrap;direction:ltr;font-family:'Rubik',sans-serif;font-weight:700;font-size:clamp(8rem,26vw,26rem);line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.13);translate:calc(var(--ghx,0) * 1px) -50%}
/* ---- header: room for 5 items, action cluster, menu pill ---- */
.hd-actions{justify-self:end;display:flex;align-items:center;gap:10px}
.hd-actions .tel{justify-self:auto}
.burger{display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 8px;gap:0;border:0;background:none;cursor:pointer;color:#fff;font:inherit;font-size:16px;font-weight:700;transition:color .25s}
.burger:hover{color:#ff7ad9}
.burger .bt{display:none}
.burger .bl{display:grid;gap:7px;width:30px}
.burger .bl i{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.burger[aria-expanded="true"] .bl i:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.burger[aria-expanded="true"] .bl i:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)}
.mega-w{grid-template-columns:repeat(4,1fr)}
.mega-w a{flex-direction:column;align-items:flex-start;gap:6px;padding:20px 22px;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.mega-w a:hover{background:rgba(255,255,255,.14)}
.mega-w .mw-n{font-family:'Rubik',sans-serif;font-weight:700;font-size:clamp(2.6rem,4vw,4rem);line-height:1;background:linear-gradient(90deg,#c9a6ff,#ff7ad9);-webkit-background-clip:text;background-clip:text;color:transparent}
.mega-w b{font-size:1.4rem}
.mega-w .mw-all{background:linear-gradient(135deg,#8a2be2,#ff5c8a);border-color:transparent;justify-content:center}
.mega-w .mw-all b{font-size:1.6rem}
@media(max-width:1180px){
.brand-txt small{display:none}
nav{font-size:16px}
nav a{padding:8px 11px}
.tel{font-size:16px}
.burger{font-size:16px;padding:0 16px}
.mega-s{grid-template-columns:repeat(2,1fr)}
}
/* the hamburger + full-screen mega menu is the main navigation at every width */
.glass-nav nav{display:none!important}
.glass-nav{grid-template-columns:1fr auto!important;gap:10px!important}
.has-mega .mega{display:none!important}
@media(max-width:560px){.burger .bt{display:none}.burger{padding:0 15px}}
/* over light (white) sections the bar shortens to its content and turns dark purple */
.glass-nav{transition:max-width .55s cubic-bezier(.2,.8,.2,1),background-color .35s,border-color .35s,box-shadow .35s}
header .glass-nav{max-width:min(100%,600px)}
html.hd-light .glass-nav{background:linear-gradient(135deg,rgba(40,18,84,.96),rgba(22,10,50,.96));border-color:rgba(201,166,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 36px -14px rgba(40,10,90,.7)}
/* ---- full-screen mega menu ---- */
.mm{position:fixed;inset:0;z-index:19;display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:minmax(0,1fr) auto;gap:0 clamp(24px,4vw,70px);padding:112px clamp(22px,5vw,80px) 30px;background:radial-gradient(110% 90% at 85% 0%,rgba(138,43,226,.94),rgba(12,8,44,.985) 62%);clip-path:circle(0 at var(--ox,50%) var(--oy,40px));visibility:hidden;overflow:auto;transition:clip-path .9s cubic-bezier(.76,0,.24,1),visibility 0s .9s}
html.mm-open .mm{clip-path:circle(170% at var(--ox,50%) var(--oy,40px));visibility:visible;transition:clip-path .9s cubic-bezier(.76,0,.24,1),visibility 0s 0s}
html.mm-open{overflow:hidden;padding-right:var(--sbw,0px)}
html.mm-open header{position:fixed;left:0;right:var(--sbw,0px);top:env(safe-area-inset-top,0px)}
.mm-links{align-self:center}
.mm-links ul{list-style:none}
.mm-links li{position:relative;padding:clamp(6px,1.1vh,14px) 0;border-bottom:1px solid rgba(255,255,255,.14)}
.mm-w{display:block;overflow:hidden;padding:.04em 0 .14em}
.mm-a{display:inline-block;font-size:clamp(1.9rem,min(4.4vw,6.6vh),4.2rem);font-weight:900;line-height:1.05;letter-spacing:-.02em;transition:transform .5s cubic-bezier(.2,.8,.2,1),color .3s}
.mm-t{display:inline-block;transform:translateY(112%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
html.mm-open .mm-t{transform:none;transition-delay:calc(var(--i) * 80ms + .35s)}
.mm-links li:hover .mm-a,.mm-links li.act .mm-a{transform:translateX(-18px);background:linear-gradient(90deg,#c9a6ff,#ff7ad9);-webkit-background-clip:text;background-clip:text;color:transparent}
.mm-sub{display:flex;flex-wrap:wrap;gap:8px;max-height:0;overflow:hidden;padding:0;opacity:0;transform:translateY(10px);transition:max-height .6s cubic-bezier(.2,.8,.2,1),opacity .4s,transform .5s,padding .4s}
.mm-links li.act .mm-sub{max-height:150px;opacity:1;transform:none;padding:4px 0 8px}
.mm-sub a{font-size:clamp(.85rem,.95vw,1rem);font-weight:500;padding:6px 16px;border-radius:99px;border:1px solid rgba(255,255,255,.3);transition:background .2s,color .2s}
.mm-sub a:hover{background:#fff;color:#1a1040}
.mm-view{position:relative;align-self:stretch;margin-bottom:6px;min-height:0;border-radius:34px;overflow:hidden;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 40px 90px -40px rgba(0,0,0,.7);opacity:0;transform:translateY(40px);transition:opacity .6s .55s,transform .8s .55s cubic-bezier(.2,.8,.2,1)}
html.mm-open .mm-view{opacity:1;transform:none}
.mm-v{position:absolute;inset:0;padding:clamp(18px,2.4vw,34px);display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,rgba(40,24,100,.97),rgba(14,9,40,.98));clip-path:inset(100% 0 0 0);transition:clip-path .7s cubic-bezier(.76,0,.24,1)}
.mm-v.on{clip-path:inset(0);z-index:2}
.mm-v.prev{clip-path:inset(0 0 100% 0);z-index:1}
.mm-v h4{font-size:clamp(1.1rem,1.4vw,1.4rem);font-weight:700;margin-bottom:14px}
.mm-grid{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
.mm-grid.two{grid-template-columns:repeat(2,1fr)}
.mm-card{display:block;position:relative;border-radius:18px;overflow:hidden;background:rgba(255,255,255,.08);aspect-ratio:4/3}
.mm-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.mm-card:hover img{transform:scale(1.08)}
.mm-card span{position:absolute;inset:auto 0 0 0;padding:26px 12px 10px;font-weight:700;font-size:1rem;background:linear-gradient(0deg,rgba(5,3,15,.85),transparent)}
.mm-ico{display:grid;place-items:center;gap:6px;padding:16px 10px;border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.06));-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 30px -18px rgba(0,0,0,.6);color:#fff;font-weight:700;text-align:center;font-size:1rem;transition:transform .35s cubic-bezier(.2,.8,.2,1),background .25s,border-color .25s}
.mm-ico:hover{transform:translateY(-4px);background:linear-gradient(145deg,rgba(255,255,255,.3),rgba(255,255,255,.1));border-color:rgba(255,255,255,.5)}
.mm-ico i{display:block;width:64px;height:64px}
.mm-big{font-family:'Rubik',sans-serif;font-weight:700;font-size:clamp(1.6rem,3vw,3rem);line-height:1.05;background:linear-gradient(90deg,#c9a6ff,#ff7ad9);-webkit-background-clip:text;background-clip:text;color:transparent;display:block}
.mm-stat{display:flex;align-items:baseline;gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.16);font-size:clamp(1rem,1.2vw,1.2rem)}
.mm-stat b{font-family:'Rubik',sans-serif;font-size:clamp(1.8rem,2.6vw,2.6rem);line-height:1}
.mm-face{width:min(70%,260px);margin:0 auto;display:block}
.mm-name{display:block;text-align:center;margin-top:14px;font-family:'Rubik',sans-serif;font-weight:700;font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.1;background:linear-gradient(90deg,#c9a6ff,#ff7ad9);-webkit-background-clip:text;background-clip:text;color:transparent}
.mm-role{display:block;text-align:center;margin-top:6px;font-size:.85rem;font-weight:400;color:rgba(255,255,255,.7)}
.mm-site{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:16/10;border-radius:16px;overflow:hidden;padding:10px 12px;background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.mm-site:hover{transform:translateY(-4px);box-shadow:0 18px 36px -16px rgba(0,0,0,.7)}
.mm-site .ms-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:4px;padding:7px 10px;background:rgba(255,255,255,.14)}
.mm-site .ms-bar i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.7)}
.mm-site .ms-bar em{font-style:normal;direction:ltr;margin-inline-start:auto;font-size:.62rem;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}
.mm-site b{position:absolute;left:12px;top:34%;font-family:'Rubik',sans-serif;font-size:clamp(1.6rem,2.4vw,2.4rem);line-height:1;opacity:.28;letter-spacing:-1px}
.mm-site small{position:relative;font-size:.9rem;font-weight:700;direction:ltr;text-align:right}
.mm-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.mm-chips a{font-size:.9rem;padding:7px 16px;border-radius:99px;border:1px solid rgba(255,255,255,.3);transition:background .2s,color .2s}
.mm-chips a b{font-family:'Rubik',sans-serif;margin-inline-start:4px}
.mm-chips a:hover{background:#fff;color:#1a1040}
.mm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;align-self:flex-start;margin-top:18px;padding:13px 30px;border-radius:99px;background:linear-gradient(90deg,#c9a6ff,#ff7ad9);color:#1a1040;font-weight:700;font-size:1.05rem;box-shadow:0 12px 34px -12px rgba(255,92,200,.7);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.mm-btn:hover{transform:translateY(-3px);box-shadow:0 18px 44px -12px rgba(255,92,200,.9)}
.mm-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding-top:20px;opacity:0;transform:translateY(20px);transition:opacity .5s .9s,transform .5s .9s}
html.mm-open .mm-foot{opacity:1;transform:none}
.mm-foot a{font-size:1rem;font-weight:700;padding:11px 24px;border-radius:99px;border:1.5px solid #fff;transition:background .2s,color .2s}
.mm-foot a:first-child{background:#FFD047;color:#1a1040;border-color:#FFD047}
.mm-foot a:hover{background:#fff;color:#1a1040}
.mm-foot small{margin-inline-start:auto;color:var(--muted);font-size:1rem}
@media(max-width:900px){
.mm{grid-template-columns:1fr;padding-top:100px}
.mm-view{display:none}
.mm-a{font-size:clamp(1.9rem,9vw,3.4rem)}
}
/* ---- hero: pointer parallax ---- */
.hero-img,.stats{transform:translate3d(calc(var(--hmx,0) * -16px),calc(var(--hmy,0) * -10px),0)}
.ghost-word{margin-left:calc(var(--hmx,0) * 38px)}
@media(prefers-reduced-motion:reduce){.hero-img,.stats{transform:none}}
/* ---- preloader ---- */
#pre{position:fixed;inset:0;z-index:10000;display:none;background:radial-gradient(90% 80% at 50% 45%,#150a35,#05030f 70%);color:#fff;overflow:hidden}
html.pre #pre{display:block}
.pre-logo{position:absolute;left:50%;top:46%;width:clamp(130px,17vw,210px);translate:-50% -50%}
.pre-logo svg{display:block;width:100%;height:auto;overflow:visible}
.pre-ball{filter:drop-shadow(0 0 12px rgba(255,208,71,.9))}
#pre.done .pre-ball{animation:preDock .5s cubic-bezier(.2,.8,.2,1)}
#pre.done .pre-logo{animation:preLogo .6s cubic-bezier(.2,.8,.2,1)}
@keyframes preDock{0%{transform:scale(1)}40%{transform:scale(1.9)}100%{transform:scale(1)}}
@keyframes preLogo{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}
.pre-ball{transform-box:fill-box;transform-origin:center}
.pre-count{position:absolute;left:clamp(20px,4vw,60px);bottom:clamp(18px,4vw,52px);direction:ltr;display:flex;align-items:flex-end;gap:.15em;line-height:.8}
.pre-n{font-family:'Rubik',sans-serif;font-weight:700;font-size:clamp(5rem,17vw,14rem);line-height:.8;letter-spacing:-.04em;font-variant-numeric:tabular-nums;background:linear-gradient(90deg,#c9a6ff,#ff7ad9);-webkit-background-clip:text;background-clip:text;color:transparent}
.pre-pc{font-family:'Rubik',sans-serif;font-weight:500;font-size:clamp(1.6rem,4vw,3.4rem);line-height:1;color:rgba(255,255,255,.55);padding-bottom:.1em}
.pre-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.1)}
.pre-bar i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#c9a6ff,#ff7ad9)}
#pre.out{animation:preOut .95s cubic-bezier(.76,0,.24,1) forwards}
@keyframes preOut{to{transform:translateY(-100%)}}
html.pre,html.pre body{overflow:hidden}
/* hold the hero reveals back until the curtain lifts */
html.pre.js .rv.in{opacity:0!important;transform:translateY(34px)!important}
html.pre .chs.on .ch{transform:translate3d(0,115%,0)!important;opacity:0!important}
/* ---- page transition curtain ---- */
.pt{position:fixed;inset:0;z-index:9997;display:flex;pointer-events:none}
.pt i{flex:1;background:linear-gradient(180deg,#0c0626,#1d0f52 55%,#341773);transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s cubic-bezier(.76,0,.24,1);transition-delay:calc(var(--k) * 60ms)}
.pt.cover{pointer-events:all}
.pt.cover i{transform:scaleY(1)}
html.ptin .pt i{transform:scaleY(1);transition:none}
html.ptin.ptout .pt i{transform:scaleY(0);transform-origin:50% 0;transition:transform .65s cubic-bezier(.76,0,.24,1);transition-delay:calc(var(--k) * 60ms)}
@media(prefers-reduced-motion:reduce){
.mq-row i{animation:none}
.pc-tile{transform:none!important}
.pt{display:none}
}
/* ---- menu: tidy contact rows with icons ---- */
.mm-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mm-row{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:26px 10px;border-radius:22px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);transition:background .25s,transform .35s cubic-bezier(.2,.8,.2,1),border-color .25s}
.mm-row:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);transform:translateY(-5px)}
.mm-row i{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#c9a6ff,#ff7ad9);color:#1a1040}
.mm-row i svg{width:22px;height:22px}
.mm-row span{min-width:0;max-width:100%;text-align:center}
.mm-row b{display:block;font-size:1.1rem;font-weight:700;line-height:1.25}
.mm-row small{display:block;color:var(--muted);font-size:.95rem;line-height:1.35;text-align:center;unicode-bidi:plaintext;overflow-wrap:anywhere}
/* ---- menu: the preview content sits directly on the menu background (no card behind it) ---- */
.mm-view{background:none;border:0;box-shadow:none;border-radius:0}
.mm-v{background:none;padding-inline:0}
/* ---- typography: headings in Rubik, text in Assistant ---- */
html body,button,input,textarea,select{font-family:'Assistant',Arial,sans-serif}
h1,h2,h3,h4,h5,h6,.pnum,.stat b,.mm-a,.mm-stat b,.mm-name,.mm-big,.mw-n,.about-hello,.g-title,.pre-n{font-family:'Rubik',Arial,sans-serif}
.brand-txt small{font-family:'Assistant',Arial,sans-serif}
.hero-sub{font-family:'Assistant',Arial,sans-serif}
/* ---- slider cards: glass ---- */
.sc-root .sc-in{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(246,240,255,.9));-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(138,43,226,.08),0 24px 50px -24px rgba(90,40,160,.4)}
.sc-root .sc-card:hover .sc-in{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 40px 80px -24px rgba(90,40,160,.55)}
/* ---- "drag" cursor: bolder and easier to read ---- */
html.cur-drag .cur-ring{width:112px;height:112px;margin:-56px 0 0 -56px;border-color:rgba(255,255,255,.75);background:linear-gradient(135deg,rgba(60,24,120,.82),rgba(150,40,140,.78));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 36px -10px rgba(60,10,110,.7)}
html.cur-drag .cur-ring span{font-size:1.15rem;font-weight:800;letter-spacing:.2px;color:#fff;text-shadow:none}
/* ---- footer contact: icon circles like the mega menu ---- */
footer li.fi{display:flex;align-items:center;gap:12px;margin-bottom:12px}
footer li.fi i{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#c9a6ff,#ff7ad9);color:#1a1040;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
footer li.fi i svg{width:16px;height:16px}
footer li.fi:hover i{transform:scale(1.12)}
footer li.fi a{unicode-bidi:plaintext;overflow-wrap:anywhere}
/* ---- web-design cards: real screenshots that scroll on hover, whole card opens the site in a new tab ---- */
.pc-link{display:block;color:inherit;text-decoration:none;cursor:pointer}
.pc-tile.has-shot{aspect-ratio:auto;padding:0;background:linear-gradient(135deg,var(--c1),var(--c2))}
.pc-tile.has-shot{display:block;height:auto;aspect-ratio:auto}
.pc-shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:#fff;margin:0}
.pc-tile.has-shot+.pc-shot{margin-top:0}
.pc-shot img{position:absolute;left:0;top:0;width:100%;height:auto;display:block;transform:translateY(0);transition:top 1.1s cubic-bezier(.4,0,.2,1),transform 1.1s cubic-bezier(.4,0,.2,1)}
.pc:hover .pc-shot:not(.static) img,.pc:focus-within .pc-shot:not(.static) img{top:100%;transform:translateY(-100%);transition-duration:var(--dur,7s)}
.pc-info h3::after{content:"";}
.pc:hover .pc-info h3::after{content:" ↗";color:#ff7ad9}
/* ---- web-design cards: round "view the site" button, bottom left ---- */
.pc-link{position:relative}
.pc-link .pc-info{padding-left:158px}
.pc-go{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:10px;z-index:2}
.pc-go b{font-size:.92rem;font-weight:700;color:rgba(255,255,255,.92);white-space:nowrap}
.pc-go i{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#c9a6ff,#ff7ad9);color:#1a1040;box-shadow:0 10px 24px -8px rgba(255,92,200,.7);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.pc-go i svg{width:18px;height:18px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pc:hover .pc-go i{transform:scale(1.1);box-shadow:0 14px 30px -8px rgba(255,92,200,.9)}
.pc:hover .pc-go i svg{transform:translate(2px,-2px)}
@media(max-width:600px){.pc-link .pc-info{padding-left:150px}}
.sc-root .sc-sub{color:#4a3f6b}
/* mega menu: purple glass over the live molten background (the canvas is lifted above the page and revealed with the same circle) */
html.mm-vis body.gl #moltenBg{z-index:18;clip-path:circle(0 at var(--ox,50%) var(--oy,40px));transition:clip-path .9s cubic-bezier(.76,0,.24,1)}
html.mm-open body.gl #moltenBg{clip-path:circle(170% at var(--ox,50%) var(--oy,40px))}
body.gl .mm{background:radial-gradient(110% 90% at 85% 0%,rgba(138,43,226,.42),rgba(14,9,48,.5) 62%);-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5)}
/* cookie notice */
.ck{position:fixed;z-index:60;right:clamp(12px,2vw,28px);bottom:clamp(12px,2vw,28px);width:min(420px,calc(100vw - 24px));display:flex;gap:14px;align-items:flex-start;padding:18px 18px 16px;border-radius:18px;background:linear-gradient(145deg,rgba(40,22,96,.9),rgba(16,9,48,.92));-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(255,255,255,.22);box-shadow:0 24px 60px -20px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.18);color:#f4f1ff;direction:rtl;opacity:0;transform:translateY(24px);visibility:hidden;transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s .6s}
.ck.on{opacity:1;transform:none;visibility:visible;transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s 0s}
.ck-i{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#c9a6ff,#ff7ad9);color:#1a1040}
.ck-i svg{width:26px;height:26px}
.ck-b{min-width:0}
.ck-b p{font-size:.95rem;line-height:1.6;margin:0 0 12px;color:rgba(244,241,255,.92)}
.ck-b a{color:#ffd6f4;text-decoration:underline;text-underline-offset:3px}
.ck-act{display:flex;gap:8px;flex-wrap:wrap}
.ck-act button{font:inherit;font-weight:700;font-size:.92rem;cursor:pointer;border-radius:99px;padding:8px 22px;border:1.5px solid rgba(255,255,255,.55);background:none;color:#fff;transition:background .2s,color .2s}
.ck-act .ck-ok{background:linear-gradient(90deg,#c9a6ff,#ff7ad9);border-color:transparent;color:#1a1040}
.ck-act button:hover{background:#fff;color:#1a1040}
.ck-x{position:absolute;top:8px;left:10px;width:26px;height:26px;border:0;background:none;color:rgba(255,255,255,.7);font-size:1.3rem;line-height:1;cursor:pointer}
.ck-x:hover{color:#fff}
@media(max-width:600px){.ck{right:12px;left:12px;width:auto;bottom:12px}}
.copy a{color:inherit;text-decoration:underline;text-underline-offset:3px;margin-inline-start:6px}
.copy a:hover{color:#fff}
/* web-design hero: no boxes, counters with their description sit along the bottom */
.hero>.wrap{width:calc(100% - 40px);display:flex;flex-direction:column;align-items:stretch;gap:clamp(40px,7vh,84px)}
.hero .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(255,255,255,.2);padding-top:clamp(18px,2.4vw,30px)}
.hero .stat{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:0 clamp(10px,2vw,28px);border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.hero .stat+.stat{border-inline-start:1px solid rgba(255,255,255,.16)}
.hero .stat:first-child{padding-inline-start:0}
.hero .stat b{font-size:clamp(2.6rem,5vw,4.6rem)}
.hero .stat span{font-size:clamp(1rem,1.2vw,1.25rem);color:rgba(244,241,255,.82)}
.hero .stat::after{display:none}
@media(max-width:900px){.hero .stats{grid-template-columns:repeat(3,1fr)}.hero .stat b{font-size:clamp(2rem,9vw,3rem)}.hero .stat{padding:0 10px}}
/* web-design hero fills the first screen: text on the right (room for an image on the left), counters at the very bottom, filter chips below the fold */
.hero{min-height:100vh;min-height:100svh;align-items:stretch;padding-bottom:clamp(26px,4vh,48px)}
.hero>.wrap{min-height:calc(100svh - var(--hh,90px) - clamp(26px,4vh,48px));justify-content:space-between;gap:clamp(24px,5vh,60px)}
.hero-text{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;max-width:min(46%,640px)}
@media(max-width:900px){.hero{min-height:0}.hero>.wrap{min-height:0}.hero-text{max-width:none}}
/* web-design cards: no arrow next to the title; the round arrow points up-left (reading direction) and loops through the circle on hover */
.pc:hover .pc-info h3::after{content:""}
.pc-go i{overflow:hidden}
.pc:hover .pc-go i svg{transform:none;animation:pcArr .6s cubic-bezier(.65,0,.35,1)}
@keyframes pcArr{0%{transform:translate(0,0)}45%{transform:translate(-22px,-22px)}46%{transform:translate(22px,22px)}100%{transform:translate(0,0)}}
@media(prefers-reduced-motion:reduce){.pc:hover .pc-go i svg{animation:none}}
/* card titles stay on one line: only the subtitle makes room for the button */
.pc-link .pc-info{padding-left:20px}
.pc-link .pc-info p{padding-left:138px}
.pc-info h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:600px){.pc-link .pc-info{padding-left:20px}.pc-link .pc-info p{padding-left:130px}}
/* web-design projects area: white background with floating pastel blobs, light glass cards, readable text */
.wd-white{position:relative;isolation:isolate;overflow:clip;background:#fff;color:#2a1a4d;--muted:rgba(42,26,77,.68);--ink:#2a1a4d;padding-bottom:clamp(50px,7vw,96px)}
.wd-white>*:not(.pm-blobs){position:relative;z-index:1}
.wd-white .pm-blobs{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.wd-white .pm-blobs i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.72;will-change:transform}
.wd-white .pm-blobs i:nth-child(1){width:34vw;height:34vw;left:-8vw;top:2%;background:#cdb4ff;animation:blobA 18s ease-in-out infinite alternate}
.wd-white .pm-blobs i:nth-child(2){width:30vw;height:30vw;right:-6vw;top:10%;background:#ffb8dc;animation:blobB 20s ease-in-out infinite alternate}
.wd-white .pm-blobs i:nth-child(3){width:28vw;height:28vw;left:30vw;top:21%;background:#e3ccff;animation:blobC 23s ease-in-out infinite alternate}
.wd-white .pm-blobs i:nth-child(4){width:26vw;height:26vw;right:20vw;top:32%;background:#ffd3ea;animation:blobD 19s ease-in-out infinite alternate}
.wd-white .pm-blobs i:nth-child(5){width:32vw;height:32vw;left:-6vw;top:43%;background:#ffb8dc;animation:blobB 21s ease-in-out infinite alternate}
.wd-white .pm-blobs i:nth-child(6){width:34vw;height:34vw;right:-8vw;top:54%;background:#cdb4ff;animation:blobA 17s ease-in-out infinite alternate}
.wd-white .pm-blobs i:nth-child(7){width:28vw;height:28vw;left:34vw;top:65%;background:#ffd3ea;animation:blobC 24s ease-in-out infinite alternate}
.wd-white .pm-blobs i:nth-child(8){width:30vw;height:30vw;left:-8vw;top:76%;background:#e3ccff;animation:blobD 20s ease-in-out infinite alternate}
.wd-white .pm-blobs i:nth-child(9){width:32vw;height:32vw;right:-4vw;top:86%;background:#ffb8dc;animation:blobA 22s ease-in-out infinite alternate}
.wd-white .pm-blobs i:nth-child(10){width:30vw;height:30vw;left:26vw;top:95%;background:#cdb4ff;animation:blobB 19s ease-in-out infinite alternate}
@keyframes blobA{to{transform:translate(38vw,14vw) scale(1.25)}}
@keyframes blobB{to{transform:translate(-36vw,10vw) scale(1.15)}}
@keyframes blobC{to{transform:translate(-30vw,-12vw) scale(1.3)}}
@keyframes blobD{to{transform:translate(-26vw,-8vw) scale(.85)}}
.wd-white .chip{background:rgba(255,255,255,.75);border-color:rgba(138,43,226,.22);color:#2a1a4d}
.wd-white .chip:hover{border-color:#e0409a}
.wd-white .chip.on{background:linear-gradient(90deg,#c9a6ff,#ff7ad9);color:#1a1040;border-color:transparent}
.wd-white .cat-head h2{background:linear-gradient(90deg,#8a2be2,#e0409a,#8a2be2);background-size:200% 100%;-webkit-background-clip:text;background-clip:text}
.wd-white .cat-n{background:rgba(255,255,255,.7);border-color:rgba(138,43,226,.22);color:#2a1a4d}
.wd-white .cat-head p{color:rgba(42,26,77,.72)}
.wd-white .pc{background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.62));border-color:rgba(138,43,226,.16);box-shadow:inset 0 1px 0 #fff,0 24px 56px -34px rgba(90,40,160,.45)}
.wd-white .pc-info h3{color:#2a1a4d}
.wd-white .pc-info p,.wd-white .pc-v{color:rgba(42,26,77,.68)}
.wd-white .pc-go b{color:#2a1a4d}
.wd-white .pc::after{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(201,166,255,.28),transparent 60%)}
/* bigger hero texts (home + web design) */
body:not([data-page="web"]):not([data-page="project"]) .hero h1{font-size:clamp(2.2rem,3.8vw,4.6rem)}
.hero-sub{font-size:clamp(1.25rem,1.9vw,2.1rem)!important;margin-top:18px!important}
.hero p{font-size:clamp(1.1rem,1.5vw,1.6rem)!important;line-height:1.65!important}
.hero .btn{font-size:1.05rem!important;padding:14px 30px!important}
@media(max-width:900px){.hero-sub{font-size:clamp(1.1rem,3.4vw,1.4rem)!important}.hero p{font-size:clamp(1rem,3.2vw,1.2rem)!important}}
/* home hero: the pink headline sits on two lines, the sub-headline on one */
.hero h1 em{display:block;white-space:nowrap}
.hero-sub{white-space:nowrap;font-size:clamp(1.1rem,1.55vw,1.9rem)!important}
@media(max-width:900px){
body:not([data-page="web"]):not([data-page="project"]) .hero h1{font-size:min(8vw,4.2rem)}
.hero-sub{font-size:min(3.4vw,1.5rem)!important}
}
/* floating category menu (web-design) */
.wd-white .cnav{position:fixed!important;z-index:40!important;right:clamp(10px,1.4vw,26px);top:50%;transform:translate(24px,-50%);display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:22px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border:1px solid rgba(138,43,226,.18);box-shadow:0 20px 50px -24px rgba(70,30,140,.5),inset 0 1px 0 #fff;opacity:0;pointer-events:none;transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.wd-white .cnav.on{opacity:1;pointer-events:auto;transform:translate(0,-50%)}
.cnav a{display:flex;align-items:center;gap:10px;padding:9px 6px;color:#2a1a4d;font-weight:600;font-size:.98rem;white-space:nowrap;border-radius:12px;transition:color .25s}
.cnav a i{flex:none;width:12px;height:12px;border-radius:50%;border:2px solid #b79cff;transition:background .25s,border-color .25s,transform .25s}
.cnav a small{margin-inline-start:auto;font-family:'Rubik',sans-serif;font-size:.78rem;color:rgba(42,26,77,.6);padding-inline-start:6px}
.cnav a:hover i{border-color:#e0409a;transform:scale(1.2)}
.cnav a.is-on{color:#8a2be2;font-weight:800}
.cnav a.is-on i{background:linear-gradient(135deg,#8a2be2,#e0409a);border-color:transparent;transform:scale(1.15)}
.cnav a:focus-visible{outline:2px solid #8a2be2;outline-offset:2px}
@media(max-width:1500px){
.cnav .cn-t,.cnav a small{display:none}
.cnav:hover .cn-t,.cnav:hover a small,.cnav:focus-within .cn-t,.cnav:focus-within a small{display:inline}
}
@media(max-width:900px){.wd-white .cnav{top:auto;bottom:16px;right:50%;flex-direction:row;transform:translate(50%,24px);padding:6px 8px}.wd-white .cnav.on{transform:translate(50%,0)}.cnav .cn-t{display:inline!important}.cnav a small{display:none!important}.cnav a{padding:8px 10px;font-size:.9rem}}
@media(prefers-reduced-motion:reduce){.wd-white .cnav{transition:opacity .2s}}
.cnav a small{display:none!important}
.cnav a{padding:9px 4px;font-size:.94rem;gap:9px}
.wd-white .cnav{padding:8px 10px;right:clamp(8px,1vw,18px)}
/* floating category menu sits on the left edge, clear of the slider's number rail on the right */
.wd-white .cnav{right:auto!important;left:clamp(8px,1vw,18px);transform:translate(-24px,-50%)}
.wd-white .cnav.on{transform:translate(0,-50%)}
@media(max-width:900px){.wd-white .cnav{left:50%!important;right:auto!important;transform:translate(-50%,24px)}.wd-white .cnav.on{transform:translate(-50%,0)}}
/* mega menu services: no card backgrounds, bigger icons */
.mm-ico,.mm-ico:hover{background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.mm-ico{gap:10px;padding:12px 8px;font-size:1.2rem}
.mm-ico i{width:112px!important;height:112px!important}
.mm-ico:hover{transform:translateY(-6px)}
.mm-ico:hover i{filter:drop-shadow(0 12px 22px rgba(255,122,217,.45))}
.mm-grid.two{gap:14px 10px}
/* mega menu: web view with real screenshots, buttons on top; contact form */
.mm-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.mm-top .mm-btn{margin:0;padding:10px 22px;font-size:.95rem;align-self:auto}
.mm-chip{font-size:.9rem;padding:8px 16px;border-radius:99px;border:1px solid rgba(255,255,255,.3);transition:background .2s,color .2s}
.mm-chip b{font-family:'Rubik',sans-serif;margin-inline-start:4px}
.mm-chip:hover{background:#fff;color:#1a1040}
.mm-card.top img{object-position:top}
.mm-form{display:grid;gap:10px;margin:0 0 14px}
.mm-form .mf-r{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mm-form input,.mm-form textarea{width:100%;font:inherit;font-size:1rem;color:#fff;padding:12px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);outline:0;transition:border-color .2s,background .2s;resize:none;direction:rtl}
.mm-form input::placeholder,.mm-form textarea::placeholder{color:rgba(255,255,255,.62)}
.mm-form input:focus,.mm-form textarea:focus{border-color:#ff7ad9;background:rgba(255,255,255,.14)}
.mm-form .mm-btn{margin:0;align-self:start;border:0;cursor:pointer;font:inherit;font-weight:700;padding:11px 28px}
/* services icons: two rows of three */
.mm-grid.two{grid-template-columns:repeat(3,1fr)!important;gap:22px 10px}
.mm-ico i{width:104px!important;height:104px!important}
/* mega menu "about": as on the home page – the photo with a glow and a fade at its foot, the text beside it on the left */
.mm-v:has(.mm-about){padding-block:0}
.mm-about{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);align-items:end;gap:clamp(10px,2vw,28px);height:100%;min-height:0}
.mm-abimg{position:relative;align-self:end;display:flex;justify-content:center}
.mm-abimg::before{content:"";position:absolute;inset:12% 2% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(255,92,200,.6),rgba(138,43,226,.45) 58%,transparent);filter:blur(34px)}
.mm-abimg img{position:relative;display:block;width:100%;max-height:min(62vh,560px);object-fit:contain;object-position:bottom;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 78%,rgba(0,0,0,.65) 88%,rgba(0,0,0,.25) 95%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 78%,rgba(0,0,0,.65) 88%,rgba(0,0,0,.25) 95%,transparent 100%)}
.mm-abtx{align-self:center;text-align:right;padding-bottom:6%}
.mm-abk{font-family:'Rubik',sans-serif;font-weight:900;font-size:clamp(1.6rem,2.4vw,2.4rem);line-height:1.1;background:linear-gradient(90deg,#c9a6ff,#ff7ad9);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px}
.mm-abh{font-family:'Rubik',sans-serif;font-weight:700;font-size:clamp(1.1rem,1.5vw,1.5rem);color:#fff;margin-bottom:12px}
.mm-abtx p{font-size:clamp(.95rem,1.05vw,1.1rem);line-height:1.7;color:rgba(244,241,255,.88);margin:0 0 14px}
.mm-abtx .mm-role{text-align:right;margin:0;color:rgba(255,255,255,.7)}
/* mega menu: about block centred vertically; contact form spaced from the cards */
.mm-about{align-items:center;height:auto}
.mm-abimg{align-self:center}
.mm-abtx{align-self:center;padding-bottom:0}
.mm-form{margin-bottom:30px}
/* chat widget: pinned to the left edge, with the avatar */
.bot{align-items:flex-end!important}
.bot-wa{align-self:flex-end!important;margin-left:16px!important}
.bot-btn{width:104px!important;align-self:flex-end;margin-left:6px}
.bot-btn img{filter:none}
.bot-head img{border-radius:50%;object-fit:cover;object-position:top}
@media(max-width:560px){.bot-btn{width:78px!important}}
/* avatar in a cream circle with a moving pink-purple ring */
@property --ang{syntax:'';initial-value:0deg;inherits:false}
@keyframes botRing{to{--ang:360deg}}
.bot-btn{width:92px!important;height:92px;padding:4px!important;border-radius:50%;background:conic-gradient(from var(--ang),#c9a6ff,#ff7ad9,#8a2be2,#ff7ad9,#c9a6ff)!important;animation:botFloat 4s ease-in-out infinite,botRing 3.2s linear infinite!important;filter:drop-shadow(0 12px 20px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(201,106,255,.5))!important}
.bot-btn img{width:100%!important;height:100%!important;border-radius:50%;background:#fbf3e4;object-fit:cover;object-position:50% 12%;display:block}
.bot-btn:hover{animation-play-state:running,running!important}
@media(max-width:560px){.bot-btn{width:70px!important;height:70px}}
@media(prefers-reduced-motion:reduce){.bot-btn{animation:none!important}}
/* chat panel head: the avatar sits in the same cream circle with the moving ring */
.bot-head img{width:46px!important;height:46px!important;border-radius:50%;object-fit:cover;object-position:50% 12%;border:3px solid transparent;background:linear-gradient(#fbf3e4,#fbf3e4) padding-box,conic-gradient(from var(--ang),#c9a6ff,#ff7ad9,#8a2be2,#ff7ad9,#c9a6ff) border-box;animation:botRing 3.2s linear infinite}
@media(prefers-reduced-motion:reduce){.bot-head img{animation:none}}
/* mega menu: the left (content) part is larger */
.mm{grid-template-columns:.72fr 1.28fr!important;gap:0 clamp(24px,3.5vw,60px)!important;padding-inline:clamp(22px,3vw,52px)!important}
.mm-v h4{font-size:clamp(1.3rem,1.9vw,2rem)!important;margin-bottom:18px!important}
.mm-card span,.mm-site small{font-size:clamp(1rem,1.2vw,1.3rem)!important}
.mm-btn{font-size:1.15rem!important;padding:14px 34px!important}
.mm-chip,.mm-chips a{font-size:1rem!important;padding:9px 20px!important}
.mm-row b{font-size:1.25rem!important}.mm-row small{font-size:1.05rem!important}
.mm-form input,.mm-form textarea{font-size:1.1rem!important;padding:14px 18px!important}
.mm-abtx p{font-size:clamp(1.05rem,1.25vw,1.3rem)!important}
.mm-abk{font-size:clamp(1.9rem,2.9vw,3rem)!important}.mm-abh{font-size:clamp(1.25rem,1.8vw,1.9rem)!important}
.mm-ico i{width:128px!important;height:128px!important}
.mm-ico{font-size:1.35rem!important}
.mm-links .mm-a{font-size:clamp(1.9rem,min(4vw,6vh),3.8rem)}
.mm-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.mm-grid.four .mm-card span{font-size:clamp(.9rem,1vw,1.1rem)!important;padding:20px 8px 8px}
/* home hero: two bold lines, slightly larger supporting text */
.hero-sub{line-height:1.35!important}
.hero p{font-size:clamp(1.2rem,1.7vw,1.85rem)!important;line-height:1.6!important}
/* larger running text on the home page */
.about-card p,.about-more p{font-size:clamp(1.2rem,1.5vw,1.55rem)!important;line-height:1.75!important}
.srv-card p{font-size:clamp(1.05rem,1.2vw,1.3rem)!important;line-height:1.65!important}
.contact p{font-size:clamp(1.15rem,1.4vw,1.5rem)!important}
.about-toggle{font-size:clamp(1.05rem,1.2vw,1.25rem)!important}
/* CSS version of the animated background for devices that cannot run the shader */
body.glfb #moltenBg{display:block;background:radial-gradient(55% 50% at 22% 28%,rgba(112,64,255,.55),transparent 62%),radial-gradient(48% 56% at 82% 72%,rgba(255,92,200,.34),transparent 62%),radial-gradient(40% 40% at 60% 12%,rgba(201,166,255,.22),transparent 60%),#07041a;background-size:170% 170%;animation:glfbMove 18s ease-in-out infinite alternate}
@keyframes glfbMove{0%{background-position:0% 0%}100%{background-position:100% 100%}}
@media(prefers-reduced-motion:reduce){body.glfb #moltenBg{animation:none}}
/* ===== home: "the process" section (lines draw while scrolling) ===== */
.proc{position:relative;height:calc(100vh + 240vh);color:#f4f1ff}
.proc-stage{position:sticky;top:0;height:100vh;overflow:hidden}
.proc-band{margin:0 -20vw;padding:6vw 20vw 0;height:13.5vw;text-align:center;border-radius:0 0 50% 50%/0 0 14vw 14vw;background:linear-gradient(135deg,rgba(75,29,143,.85),rgba(138,43,226,.55));border-bottom:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.proc-band h2{margin:0;font-size:5vw;font-weight:900;line-height:1;background:linear-gradient(90deg,#e8dcff,#ffb8ec);-webkit-background-clip:text;background-clip:text;color:transparent}
.proc-lines{position:absolute;inset:18vw 0 0;pointer-events:none}
.pline{position:absolute;overflow:hidden}
.pline svg{display:block;width:100%;height:auto}
.pline path{stroke:#c9a6ff;stroke-width:3;vector-effect:non-scaling-stroke}
.proc-lines.base{opacity:.2}
.proc-lines.draw path{stroke:#ee8fd8}
.proc-steps{position:relative;display:flex;justify-content:center;padding:7.5vw 5vw 0}
.pstep{--on:0;width:25vw;flex:1;display:flex;flex-direction:column;gap:1vw;align-items:center;text-align:center;margin:0 -3vw;opacity:calc(.12 + var(--on)*.88);filter:grayscale(calc(1 - var(--on)))}
.pstep2{padding-top:16vw}.pstep4{padding-top:17vw}
.pnum2{aspect-ratio:1;min-width:5vw;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#c9a6ff,#ff7ad9);color:#1a1040;font-family:'Rubik',sans-serif;font-size:2vw;font-weight:700;line-height:1;box-shadow:0 14px 30px -10px rgba(255,92,200,.6)}
.pstep h3{margin:0;font-size:1.8vw;font-weight:800;line-height:1.1}
.pstep p{margin:0;font-size:1.25vw;line-height:1.7;color:rgba(244,241,255,.88)}
@media(max-width:767px){
.proc{height:auto}.proc-stage{position:static;height:auto;overflow:visible;padding-bottom:60px}
.proc-band{height:auto;margin:0;padding:60px 6vw 50px;border-radius:0 0 50% 50%/0 0 60px 60px}.proc-band h2{font-size:40px}
.proc-lines{display:none}
.proc-steps{flex-direction:column;align-items:center;gap:46px;padding:50px 20px 0}
.pstep{width:100%;max-width:340px;margin:0;gap:12px;padding-top:0!important}
.pnum2{min-width:54px;font-size:22px}.pstep h3{font-size:22px}.pstep p{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.pstep{opacity:1;filter:none}}
/* phones: no progress line and ball */
@media(max-width:900px){.prog{display:none!important}}
/* ===== services: cards that slide sideways while the section is pinned ===== */
.svs{--badge:clamp(54px,5vw,84px);position:relative;background:#fff;color:#2a1a4d}
.svs-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:flex-end;isolation:isolate}
.svs .sc-blobs{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.svs-head{position:absolute;z-index:2;top:clamp(84px,11vh,130px);right:5vw;width:min(45vw,720px)}
.svs-head h2{margin:0;line-height:1.05}
.svs-h1{font-size:clamp(1.8rem,3.2vw,3.6rem);font-weight:900;color:#2a1a4d}
.svs-h2{font-size:clamp(2.2rem,4.4vw,4.8rem);font-weight:900;background:linear-gradient(90deg,#8a2be2,#e0409a,#8a2be2);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradFlow 5s linear infinite}
.svs-track{position:relative;z-index:1;display:flex;flex-direction:row;gap:clamp(22px,2.6vw,44px);padding:calc(var(--badge)/2 + 6px) 5vw 0;margin-bottom:clamp(34px,8vh,100px);direction:rtl;will-change:transform}
.svs .srv-card{flex:0 0 clamp(300px,25vw,430px);position:relative;opacity:calc(.22 + var(--on,1) * .78);filter:grayscale(calc(1 - var(--on,1)));text-align:center;border-radius:30px;padding:calc(var(--badge)/2 + clamp(14px,1.6vw,26px)) clamp(20px,2vw,34px) clamp(26px,2.6vw,42px);background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,255,255,.7));border:1px solid rgba(138,43,226,.14);box-shadow:inset 0 1px 0 #fff,0 30px 60px -34px rgba(90,40,160,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.svs .srv-card:hover{translate:0 -6px}
.srv-n{position:absolute;top:calc(var(--badge) / -2);left:50%;translate:-50% 0;width:var(--badge);height:var(--badge);display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#c9a6ff,#ff7ad9);color:#1a1040;font-family:'Rubik',sans-serif;font-weight:900;font-size:calc(var(--badge) * .38);line-height:1;box-shadow:0 14px 30px -10px rgba(255,92,200,.65)}
.svs .srv-anim,.svs .srv-ico{width:clamp(100px,9.5vw,150px);margin:0 auto 10px}
.svs .srv-card h3{font-size:clamp(1.3rem,1.8vw,1.95rem)}
.svs .srv-card p{font-size:clamp(1.02rem,1.15vw,1.25rem)!important;line-height:1.65}
@media(max-width:1024px),(prefers-reduced-motion:reduce){
.svs-stage{position:static;height:auto;display:block;padding:clamp(70px,12vw,120px) 0 50px;overflow:hidden}
.svs-head{position:relative;top:auto;right:auto;width:auto;padding:0 5vw 34px}
.svs-track{overflow-x:auto;scroll-snap-type:x mandatory;gap:20px;padding:calc(var(--badge)/2 + 10px) 5vw 24px;margin:0;-webkit-overflow-scrolling:touch;scrollbar-width:none;transform:none!important}
.svs-track::-webkit-scrollbar{display:none}
.svs .srv-card{flex:0 0 min(78vw,360px);scroll-snap-align:start;opacity:1;filter:none}
.svs{height:auto!important}
}
@media(prefers-reduced-motion:reduce){.svs-h2{animation:none}}
/* process: title like the other section titles, the site's purple throughout, lines never run through the text */
.proc-band{margin:0!important;padding:clamp(86px,9vw,140px) 20px 0!important;height:auto!important;border-radius:0!important;background:none!important;border:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.proc-band h2{font-size:clamp(2.2rem,4.6vw,4rem)!important;font-weight:900;line-height:1.1;background:linear-gradient(90deg,#c9a6ff,#ff7ad9,#c9a6ff)!important;background-size:200% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;animation:gradFlow 5s linear infinite}
.proc-lines{inset:21vw 0 0!important}
.proc-lines.base{opacity:.28}
.pline path{stroke:#c9a6ff}
.proc-lines.draw path{stroke:#ff7ad9}
.proc-steps{padding-top:5vw!important}
.pnum2{min-width:4.6vw!important;font-size:1.8vw!important;box-shadow:0 12px 26px -10px rgba(201,166,255,.7)}
.pstep h3{font-size:1.55vw!important;text-shadow:0 0 12px rgba(10,5,30,.9)}
.pstep p{font-size:1.15vw!important;line-height:1.6!important;text-shadow:0 0 12px rgba(10,5,30,.9)}
.pstep1,.pstep3{padding-top:0}
@media(prefers-reduced-motion:reduce){.proc-band h2{animation:none}}
@media(max-width:767px){.proc-band{padding:90px 20px 0!important}.proc-band h2{font-size:clamp(2rem,9vw,2.6rem)!important}.pstep h3{font-size:22px!important}.pstep p{font-size:16px!important}.pnum2{min-width:54px!important;font-size:22px!important}}
.proc-lines svg{display:block;position:absolute;left:0;top:0;overflow:visible}
.proc-lines path{fill:none;stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}
.proc-lines.base path{stroke:#c9a6ff}
.proc-lines.draw path{stroke:#ff7ad9}
.proc-lines{inset:0!important}
.pstep{padding-inline:3.8vw}
.pstep2{padding-top:11vw!important}.pstep4{padding-top:12vw!important}
.proc-band{padding-top:clamp(80px,7.5vw,118px)!important}
.proc-steps{padding-top:4vw!important}
/* new hero artwork: black background blends into the page, no crop */
.hero-img img{object-view-box:none!important;-webkit-mask-image:radial-gradient(ellipse farthest-corner at center,#000 62%,transparent 92%)!important;mask-image:radial-gradient(ellipse farthest-corner at center,#000 62%,transparent 92%)!important}
/* hero artwork: only the bottom edge fades out (the floor reflection melts into the page) */
.hero-img img{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 66%,rgba(0,0,0,.55) 84%,transparent 100%)!important;mask-image:linear-gradient(180deg,#000 0,#000 66%,rgba(0,0,0,.55) 84%,transparent 100%)!important}
/* the artwork now carries its own transparency: no blend mode needed */
.hero-img img{mix-blend-mode:normal!important}
/* headline reveal: letters melt in (soft fade + a small rise) instead of a wave rising from below */
.ch{transform:translate3d(0,34%,0)!important;filter:blur(7px);opacity:0!important;transition:transform 1.05s cubic-bezier(.16,1,.3,1),opacity .85s ease,filter .95s ease!important;transition-delay:calc(var(--i) * 13ms)!important}
.chs.on .ch{transform:none!important;filter:none;opacity:1!important}
.chs:not(.on) .ch{transition-delay:0s!important;transition-duration:.35s,.3s,.3s!important}
html.pre .chs.on .ch{transform:translate3d(0,34%,0)!important;opacity:0!important;filter:blur(7px)}
@media(prefers-reduced-motion:reduce){.ch{transform:none!important;filter:none;opacity:1!important;transition:none!important}}
/* ===== Scroll story (before services) ===== */
.story{position:relative;height:calc(var(--beats,6) * 75vh + 100vh);color:#f4f1ff}
.story-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0 clamp(16px,5vw,80px)}
.story-beats{position:relative;width:min(1100px,100%);height:60vh;display:grid;place-items:center}
.beat{grid-area:1/1;margin:0;text-align:center;font-family:'Rubik',Arial,sans-serif;font-weight:900;font-size:clamp(1.9rem,4.6vw,4.4rem);line-height:1.18;letter-spacing:-1px;opacity:0;transform:translateY(40px) scale(.97);filter:blur(8px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1),filter .7s ease;pointer-events:none}
.beat em{font-style:normal;background:linear-gradient(90deg,#c9a6ff,#ff7ad9,#c9a6ff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradFlow 5s linear infinite}
.beat.on{opacity:1;transform:none;filter:none;pointer-events:auto}
.beat.past{opacity:0;transform:translateY(-40px) scale(.97);filter:blur(8px)}
.beat-lead{font-family:'Assistant',Arial,sans-serif;font-weight:600;font-size:clamp(1.25rem,2.4vw,2.2rem);line-height:1.5;letter-spacing:0}
.beat-lead em{font-weight:800}
.story-cta{display:table;margin:clamp(22px,3vw,40px) auto 0;font-size:clamp(1rem,1.2vw,1.15rem);letter-spacing:0}
.story-rail{position:absolute;inset-inline-start:clamp(14px,3vw,48px);top:20vh;bottom:20vh;width:3px;border-radius:3px;background:rgba(255,255,255,.12)}
.story-fill{position:absolute;inset:0 0 auto 0;height:calc(var(--p,0) * 100%);border-radius:3px;background:linear-gradient(#c9a6ff,#ff7ad9)}
.story-ball{position:absolute;left:50%;top:calc(var(--p,0) * 100%);width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6c8,#ffd047 45%,#b9861a);box-shadow:0 0 18px rgba(255,208,71,.7)}
@media(max-width:700px){.story{height:calc(var(--beats,6) * 65vh + 100vh)}.story-rail{inset-inline-start:8px}.beat{font-size:clamp(1.6rem,7.4vw,2.4rem)}.beat-lead{font-size:clamp(1.1rem,4.8vw,1.4rem)}}
@media(prefers-reduced-motion:reduce){.story{height:auto}.story-stage{position:static;height:auto;padding-block:12vh}.story-beats{height:auto;display:flex;flex-direction:column;gap:8vh}.beat{opacity:1;transform:none;filter:none;pointer-events:auto}.beat em{animation:none}.story-rail{display:none}}
/* services: white background again, centred headings, tighter gap between the title and the cards */
.svs-stage{flex-direction:column;justify-content:center;align-items:stretch}
.svs-head{position:relative;z-index:2;top:auto;right:auto;left:auto;width:auto;text-align:center;margin:clamp(70px,9vh,110px) 0 clamp(10px,2.2vh,26px)}
.svs-track{margin-bottom:0;flex:none}
@media(max-width:1024px),(prefers-reduced-motion:reduce){.svs-head{margin:0;padding:0 5vw 24px;text-align:center}}
/* story line: right edge -> bend to the middle -> down into the services slide */
.story-rail{display:none}
.story-line{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.story-line path{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.story-line .sl-base{stroke:none;display:none}
.story-line .sl-fill{stroke:url(#sline);filter:drop-shadow(0 0 6px rgba(255,122,217,.45))}
.story-line .sl-ball{fill:url(#sball);filter:drop-shadow(0 0 10px rgba(255,208,71,.75))}
@media(max-width:700px){.story-line .sl-fill,.story-line .sl-base{stroke-width:2.5}}
/* first sentence of the story: same size and weight as the other sentences */
.beat-lead{font-family:'Rubik',Arial,sans-serif!important;font-weight:900!important;font-size:clamp(1.9rem,4.6vw,4.4rem)!important;line-height:1.18!important;letter-spacing:-1px!important}
.beat-lead em{font-weight:900}
@media(max-width:700px){.beat-lead{font-size:clamp(1.6rem,7.4vw,2.4rem)!important}}
/* the line inside the services slide: same weight and colour as the one in the story */
.svs-stage>.svs-tail{position:absolute;left:0;top:0;z-index:1;overflow:visible;pointer-events:none}
.svs-tail path{fill:none;stroke:#ff7ad9;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(255,122,217,.45))}
.svs-tail circle{fill:url(#sball);filter:drop-shadow(0 0 10px rgba(255,208,71,.75))}
.story-line .sl-fill{stroke:#ff7ad9}
/* line in the About slide */
.lane2{position:absolute;top:0;z-index:0;overflow:visible;pointer-events:none}
.lane2 path{fill:none;stroke:#ff7ad9;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(255,122,217,.45))}
.lane2 circle{fill:url(#sball);filter:drop-shadow(0 0 10px rgba(255,208,71,.75))}
/* space between the hero sub-headline and the buttons */
.hero .cta{margin-top:clamp(26px,3.2vw,44px)!important}
#about{position:relative}
/* story: the white text is regular weight, only the coloured part stays bold */
.beat,.beat-lead{font-weight:400!important}
.beat em,.beat-lead em{font-weight:800!important}
/* the page line that left the logo is gone: the story, services and about slides carry their own lines */
.prog{display:none!important}
/* section titles as large as "how I can help"; their colours stay as they are */
.sec-title h2,.about-title h2,.extra-head h2,.proc-band h2,.svs-h2{font-size:clamp(2.4rem,4.8vw,5.2rem)!important}
.svs-h1{font-size:clamp(1.9rem,3.4vw,3.8rem)}
/* "how I can help" in blue-indigo instead of pink-purple */
.svs-h2{background-image:linear-gradient(90deg,#2b2a9e,#4f46e5,#2b2a9e)!important}
/* the line that goes on down to the project number */
.lane3{position:absolute;left:0;top:0;z-index:0;overflow:visible;pointer-events:none}
.lane3 path{fill:none;stroke:#ff7ad9;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(255,122,217,.45))}
.lane3-ball{position:fixed;left:0;top:0;z-index:9996;width:18px;height:18px;border-radius:50%;box-shadow:0 0 18px rgba(255,208,71,.7);pointer-events:none;opacity:0;will-change:transform}
.lane3-line{position:fixed;left:0;top:0;z-index:9995;width:3px;border-radius:2px;background:#ff7ad9;box-shadow:0 0 6px rgba(255,122,217,.45);pointer-events:none;opacity:0;will-change:transform,height}
@media(max-width:899px){.lane3-ball,.lane3-line{display:none}}
.proc-lines .proc-ball{fill:url(#sball);stroke:none;vector-effect:none;filter:drop-shadow(0 0 10px rgba(255,208,71,.75))}
/* the "got an idea" card: pale until the line hits its top-left corner, then the gradient spreads out of that corner */
.contact{background:#130b27!important;border:1px solid rgba(255,255,255,.1);overflow:hidden;z-index:6}
.contact::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,#2a1f6e,var(--accent) 55%,var(--accent2));clip-path:circle(0 at var(--hx,0px) 0);transition:clip-path 1.3s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.contact.hit::before{clip-path:circle(150% at var(--hx,0px) 0)}
.contact>*{position:relative;z-index:1;transition:opacity .9s}
.contact:not(.hit)>*{opacity:.4}
.cta-line{position:absolute;left:0;z-index:5;overflow:visible;pointer-events:none}
.cta-line path{fill:none;stroke:#ff7ad9;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(255,122,217,.45))}
.cta-line circle{fill:url(#sball);filter:drop-shadow(0 0 10px rgba(255,208,71,.75))}
[data-cta-line] .proc-ball{opacity:0!important}
@media(max-width:900px){.cta-line{display:none}}
.lane3-ball::before{content:"";position:absolute;inset:0;border-radius:50%;background:url(gold-ball.webp) center/100% 100% no-repeat;}
.lane3-ball.spin::before{animation:ballspin 4s linear infinite}
@keyframes ballspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.lane3-ball::before{animation:none}}
/* hero line: the gold ball leaves the S and rolls to the story */
.hero-line{position:absolute;left:0;top:0;z-index:1;overflow:visible;pointer-events:none}
.hero-line path{fill:none;stroke:#ff7ad9;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(255,122,217,.45))}
.hero-line circle{fill:url(#sball);filter:drop-shadow(0 0 10px rgba(255,208,71,.75))}
.story.story-done .beat{opacity:0;transform:translateY(-40px) scale(.97);filter:blur(8px);pointer-events:none}
@media(max-width:899px){.hero-line{display:none}}
/* hero: the picture and the big UI/UX word stay put (no parallax, no drifting), and the word is stronger */
.hero-img img{translate:none!important}
.ghost-word{translate:0 -50%!important;margin-left:0!important;-webkit-text-stroke:2.5px rgba(214,178,255,.62)!important;filter:drop-shadow(0 0 22px rgba(255,122,217,.32))}
.hero-img img{-webkit-mask-image:radial-gradient(ellipse farthest-corner at 50% 50%,#000 80%,transparent 100%)!important;mask-image:radial-gradient(ellipse farthest-corner at 50% 50%,#000 80%,transparent 100%)!important}
/* ===== one reading size for every small text on the site (the size of the process step text) ===== */
:root{--tx:clamp(1.05rem,1.2vw,1.3rem);--th:clamp(1.3rem,1.55vw,1.9rem)}
@media(max-width:700px){:root{--tx:1rem;--th:1.35rem}}
.pstep p{font-size:var(--tx)!important}
.pinfo .tag,.pinfo li,.pinfo .more,.pinfo p,.pinfo p.fill .fw,.pin-skip,.pin-skip span,
.copy,.copy a,footer p,footer li a,.fgrid p,.fi a,
.brand-txt small,.mm-role,.mm-card span,.mm-chip,.mm-chip b,.mm-foot small,.mega a small,.mm-site small,.mm-row small,
.crumbs,.crumbs a,.crumbs span,.kick,
.ck-b p,.ck-b p a,.ck-act button,
.bot-tip,.bot-chips button,.bot-head small,.bot-form button,
.rl1,.rl2,.tel span,.legal-up,
.pc-go b,.pc-info p,.pc-v,.cat-head p,.cat-n,.ac-cat,.acard li,.ac-b h3 small,.acard p,
.chip,.chip small,.dm-rail-label h4,.dm-go,.apps-stats small,
.pfact small,.ppersona dt,.ppersona dd,.sw b,.ptxt p,.pcard p,.ppain p,.psteps small,.pds-row small,figcaption,.prail-hint{font-size:var(--tx)!important}
.mm-grid.four .mm-card span,body .legal-up,.dms-go{font-size:var(--tx)!important}
/* ===== story character: silent under sentences 1-5, talks with a glass bubble on the last ===== */
.story-stage{align-items:flex-start}
.story-beats{align-self:flex-start;margin-top:clamp(84px,17vh,190px);height:auto;min-height:26vh;place-items:start center}
.story-av{--s:min(300px,30vh);position:absolute;left:50%;bottom:clamp(40px,9vh,110px);width:var(--s);height:var(--s);translate:-50% 0;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s,transform .6s;pointer-events:none}
.story-av-on .story-av{opacity:1;visibility:visible}
.sav-circle{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;background:#e7e2db;border:4px solid #b78bff;box-shadow:0 0 0 8px rgba(124,84,214,.28),0 22px 60px -18px rgba(0,0,0,.7);animation:savNod 3.6s ease-in-out infinite;transition:background .5s,box-shadow .6s,border-color .5s,transform .6s}
.sav-circle img{position:absolute;left:50%;bottom:-6%;width:112%;max-width:none;height:auto;translate:-50% 0}
.story-av.react .sav-circle,.story-av .sav-circle.react{animation:savNod 3.6s ease-in-out infinite,savReact .7s ease}
@keyframes savNod{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(5px) rotate(-1.2deg)}60%{transform:translateY(-2px) rotate(.8deg)}}
@keyframes savReact{0%{scale:1}40%{scale:1.05}100%{scale:1}}
.sav-bubble,.sav-sound{opacity:0;visibility:hidden;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1),visibility .5s}
.sav-bubble{position:absolute;left:calc(100% + 6px);top:6%;width:max-content;max-width:min(330px,28vw);padding:clamp(18px,2vw,30px) clamp(22px,2.4vw,34px);border-radius:32px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(246,240,255,.9));-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(255,255,255,.75);box-shadow:0 20px 50px -16px rgba(20,8,60,.6),inset 0 1px 0 rgba(255,255,255,.9);color:#2a1a4d;font-family:'Rubik',Arial,sans-serif;font-weight:700;font-size:clamp(1.3rem,2vw,2.1rem);line-height:1.4;text-align:right;transform:translateX(-14px) scale(.9);transform-origin:left center}
.sav-bubble::before{content:;position:absolute;right:100%;top:46%;width:18px;height:22px;background:inherit;-webkit-backdrop-filter:inherit;backdrop-filter:inherit;clip-path:polygon(100% 0,0 50%,100% 100%)}
.sav-sound{position:absolute;left:2%;bottom:2%;width:clamp(44px,4vw,60px);height:clamp(44px,4vw,60px);border-radius:50%;border:0;background:#ffc83d;color:#3a1c6e;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 22px -6px rgba(255,200,61,.7);transform:scale(.8)}
.sav-sound[aria-pressed=true]{background:#ff7ad9;color:#fff}
.story-talk .story-av{--s:min(330px,32vh)}
.story-talk .sav-circle{background:#f6f0e7;border-color:#c18bff;box-shadow:0 0 0 10px rgba(150,104,58,.75),0 0 70px 6px rgba(255,190,90,.35),0 22px 60px -18px rgba(0,0,0,.7);animation:savNod 3.6s ease-in-out infinite,savGlow 2.4s ease-in-out infinite}
@keyframes savGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,200,100,0))}50%{filter:drop-shadow(0 0 22px rgba(255,200,100,.55))}}
.story-talk .sav-bubble,.story-talk .sav-sound{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.story-talk .sav-sound{transform:none}
body.bot-off .bot-btn,body.bot-off .bot-tip{opacity:0!important;visibility:hidden;pointer-events:none}
.bot-btn,.bot-tip{transition:opacity .4s,visibility .4s}
.story.story-done .story-av{opacity:0;visibility:hidden}
@media(max-width:700px){
.story-beats{margin-top:clamp(76px,13vh,120px)}
.story-av{--s:min(150px,20vh);bottom:clamp(120px,19vh,170px)}
.story-talk .story-av{--s:min(170px,22vh)}
.sav-bubble{left:50%;top:calc(100% + 16px);translate:-50% 0;max-width:80vw;font-size:1.15rem;padding:14px 20px;transform-origin:center top;transform:scale(.92)}
.sav-bubble::before{right:auto;left:50%;top:auto;bottom:100%;margin-left:-11px;clip-path:polygon(50% 0,0 100%,100% 100%)}
.sav-sound{left:-4%}
}
@media(prefers-reduced-motion:reduce){.story-av{display:none}.sav-circle{animation:none}}
/* story character, tightened: text sits right above her, she never moves, her head comes out of the circle */
.story-stage{flex-direction:column;justify-content:center;align-items:center;gap:clamp(16px,3.2vh,36px);padding-top:clamp(64px,9vh,96px);padding-bottom:clamp(24px,4vh,48px)}
.story-beats{margin-top:0!important;align-self:center;height:var(--bmax,36vh);min-height:0;place-items:end center}
.story-av,.story-talk .story-av{--s:min(280px,28vh);position:relative;left:auto;bottom:auto;translate:none;flex:none;margin:0}
.sav-circle,.story-talk .sav-circle,.story-av .sav-circle.react{animation:none!important;overflow:visible;background:none!important;border:0;box-shadow:none}
.sav-disc{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#e7e2db;box-shadow:0 0 0 8px rgba(124,84,214,.28),0 22px 60px -18px rgba(0,0,0,.7);transition:background .5s,box-shadow .6s,border-color .5s}
.story-talk .sav-disc{background:#f6f0e7;border-color:#c18bff;box-shadow:0 0 0 10px rgba(150,104,58,.75),0 0 70px 6px rgba(255,190,90,.3),0 22px 60px -18px rgba(0,0,0,.7)}
.sav-disc img,.sav-pop{position:absolute;left:50%;bottom:-12%;width:130%;max-width:none;height:auto;translate:-50% 0}
.sav-pop{inset:auto;pointer-events:none;clip-path:inset(-70% -10% 52% -10%)}
@media(max-width:700px){
.story-stage{padding-top:78px}
.story-av,.story-talk .story-av{--s:min(150px,19vh);position:relative;bottom:auto}
.sav-bubble{top:calc(100% + 14px)}
}
.sav-disc::after{content:"";position:absolute;inset:0;border-radius:50%;border:4px solid #b78bff;pointer-events:none;transition:border-color .5s}
.story-talk .sav-disc::after{border-color:#c18bff}
.story-av,.story-talk .story-av{margin-top:clamp(10px,2vh,22px)}
/* character back inside the circle (head clear of the edge), more air above her, dark glass bubble with white text and a pink-purple title */
.sav-disc img{bottom:-9%;width:94%}
.sav-pop{display:none}
.story-av,.story-talk .story-av{margin-top:clamp(22px,4.2vh,44px)}
.sav-bubble{background:linear-gradient(145deg,rgba(40,22,92,.62),rgba(14,8,38,.58))!important;-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);border:1px solid rgba(255,255,255,.22)!important;box-shadow:0 24px 60px -18px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.28)!important;color:#fff!important;font-weight:500}
.sav-bubble .sb-t{display:inline-block;font-weight:900;background:linear-gradient(90deg,#c9a6ff,#ff7ad9,#c9a6ff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradFlow 5s linear infinite}
/* dining rooms scene: tablet + plate (not cut) + steam rising over the plate */
.dsc{aspect-ratio:1.3068;pointer-events:none}
.pimg .dsc{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(94%,calc((100svh - 150px) * 1.3068))}
.ph-vis .dsc{position:relative;width:100%}
.dsc img{position:absolute;display:block;height:auto;max-width:none;user-select:none}
.dsc .d-tab{left:-.29%;top:-.38%;width:80.12%}
.dsc .d-plate{left:49.37%;top:59.11%;width:49.5%;filter:drop-shadow(0 22px 26px rgba(0,0,0,.5))}
.dsc-steam{position:absolute;left:63.5%;top:34%;width:21%;height:36%}
.dsc-steam i{position:absolute;bottom:0;left:calc(8% + var(--x,0%));width:30%;height:78%;border-radius:50%;background:radial-gradient(ellipse at 50% 72%,rgba(255,255,255,.6),rgba(255,255,255,0) 66%);filter:blur(10px);opacity:0;animation:dscSteam var(--t,5.2s) ease-in infinite;animation-delay:var(--d,0s)}
.dsc-steam i:nth-child(1){--x:0%;--t:5.4s;--d:0s;--w:-14%}
.dsc-steam i:nth-child(2){--x:16%;--t:4.8s;--d:-1.6s;--w:12%}
.dsc-steam i:nth-child(3){--x:30%;--t:5.8s;--d:-3.1s;--w:-10%}
.dsc-steam i:nth-child(4){--x:44%;--t:5.1s;--d:-.8s;--w:14%}
.dsc-steam i:nth-child(5){--x:58%;--t:6.2s;--d:-4s;--w:-12%}
@keyframes dscSteam{0%{opacity:0;transform:translate(0,22%) scale(.55)}22%{opacity:.7}55%{opacity:.38;transform:translate(var(--w,0),-55%) scale(1)}100%{opacity:0;transform:translate(calc(var(--w,0) * -.8),-125%) scale(1.5)}}
@media(min-width:821px){.pimg .dsc{left:calc(50% + 4vw)}}
@media(max-width:820px){.pimg .dsc{width:min(94%,calc(36svh * 1.3068))}}
@media(prefers-reduced-motion:reduce){.dsc-steam{display:none}}
.dsc-steam i{background:radial-gradient(ellipse at 50% 70%,rgba(255,255,255,.95) 0,rgba(255,255,255,.7) 22%,rgba(200,180,255,.5) 46%,rgba(130,100,210,0) 72%);filter:blur(7px);width:34%;height:88%}
@keyframes dscSteam{0%{opacity:0;transform:translate(0,22%) scale(.55)}22%{opacity:.95}58%{opacity:.6;transform:translate(var(--w,0),-58%) scale(1.05)}100%{opacity:0;transform:translate(calc(var(--w,0) * -.8),-100%) scale(1.5)}}
@media(min-width:821px){.pimg img[src*="avodata-chat"]{padding-top:11vh;padding-bottom:2vh}}
/* dining scene: bigger tablet and plate, plate further left */
.dsc .d-plate{left:36%;top:55%;width:58%}
.dsc-steam{left:52%;top:28%}
@media(min-width:821px){.pimg .dsc{scale:1.14;transform-origin:50% 45%}}
@media(min-width:821px){.pimg .dsc{translate:-50% -45%}}
/* About portrait: smaller, so it stays clear of the line that runs across the top of the slide */
@media(min-width:821px){.about-img{width:min(40%,600px)!important;right:5%!important}}
/* header brand: logo on the left of the name, name in Montserrat */
.brand{display:flex;align-items:center;gap:12px}
.brand img{order:2}
.brand-txt{direction:ltr;text-align:left}
.brand-txt b{font-family:'Montserrat',Arial,sans-serif!important;font-weight:700;letter-spacing:-.2px}
.brand-txt small{direction:rtl;text-align:right;font-weight:500}
.brand-txt small{font-size:.8rem!important;white-space:nowrap;margin-top:1px}
.brand-txt b{font-size:1.3rem}
.brand-txt{align-items:flex-start;width:max-content}
.brand-txt b{color:#fff!important;line-height:1;font-weight:700}
.brand-txt small{color:rgba(255,255,255,.92)!important;font-size:.82rem!important;line-height:1.2}
/* header without the glass pill: menu + phone on the right, logo and name on the left */
header .glass-nav{max-width:none;width:100%;display:flex!important;direction:rtl;justify-content:space-between;align-items:center;gap:14px;padding:0 clamp(14px,2.2vw,36px);background:none;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
header .glass-nav .burger{order:1}
header .glass-nav .tel{order:2;margin-inline-end:auto}
header .glass-nav .brand{order:9;margin-inline-start:auto;direction:rtl}
html.hd-light header .glass-nav{background:linear-gradient(135deg,rgba(40,18,84,.94),rgba(22,10,50,.94));border-color:rgba(201,166,255,.28);box-shadow:0 14px 36px -14px rgba(40,10,90,.7)}
html.hd-scrolled header .glass-nav{max-width:none;padding:0 clamp(18px,2.2vw,36px);background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.22);border-radius:99px;-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 14px 40px -16px rgba(0,0,0,.55)}
html.hd-scrolled.hd-light header .glass-nav{background:linear-gradient(135deg,rgba(40,18,84,.72),rgba(22,10,50,.62));border-color:rgba(201,166,255,.3)}
/* bigger buttons and card text, icons on every button, yellow phone button */
.btn,.dms-go{font-size:clamp(1.1rem,1.25vw,1.3rem)!important;padding:15px clamp(24px,2.2vw,36px)!important;gap:12px}
.hero .btn{font-size:clamp(1.1rem,1.25vw,1.3rem)!important;padding:15px 32px!important}
.btn .bi,.dms-go .bi{flex:none;width:1.3em;height:1.3em}
.btn[href^="tel:"]{background:#ffd047!important;color:#2a1a4d!important;border-color:#ffd047!important;box-shadow:0 12px 30px -12px rgba(255,208,71,.7)}
.btn[href^="tel:"]:hover{background:#ffdd73!important;color:#2a1a4d!important}
.contact h2{font-size:clamp(2rem,3.4vw,3.2rem)!important;margin-bottom:16px}
.contact p{font-size:clamp(1.3rem,1.7vw,1.7rem)!important;margin-bottom:34px!important}
.contact .cta{gap:16px}
.contact .btn{font-size:clamp(1.15rem,1.4vw,1.4rem)!important;padding:17px clamp(26px,2.6vw,42px)!important}
.contact .btn.ghost{color:#fff}
@media(max-width:600px){.btn,.hero .btn,.contact .btn{padding:13px 22px!important;font-size:1.05rem!important}}
/* steps 1-5: no outline around her picture; step 6: full outline, then she hops to the chat avatar */
.sav-disc,.story-av .sav-disc{border-color:transparent;box-shadow:none}
.sav-disc::after{border-color:transparent!important}
.story-talk .sav-disc::after{border-color:#c18bff!important}
.story-talk .sav-disc{box-shadow:0 0 0 10px rgba(124,84,214,.55),0 0 60px 4px rgba(193,139,255,.35),0 22px 60px -18px rgba(0,0,0,.7)}
.sav-fly{position:fixed;z-index:10001;pointer-events:none;transform-origin:50% 50%;will-change:transform}
.sav-fly .sav-circle{position:relative;width:100%;height:100%}
.sav-fly .sav-disc{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#f6f0e7;box-shadow:0 0 0 10px rgba(124,84,214,.55),0 20px 50px -14px rgba(0,0,0,.7)}
.sav-fly .sav-disc img{position:absolute;left:50%;bottom:-9%;width:94%;max-width:none;height:auto;translate:-50% 0}
.sav-fly .sav-disc::after{content:"";position:absolute;inset:0;border-radius:50%;border:4px solid #c18bff}
.bot-btn.pop{animation:botPop .5s cubic-bezier(.2,.8,.2,1)}
@keyframes botPop{0%{scale:.7}60%{scale:1.15}100%{scale:1}}
/* menu: the same dark animated background as the page, under the purple glass (the raised canvas was too bright and blue) */
html.mm-vis body.gl #moltenBg{filter:brightness(.5) saturate(.8)}
body.gl .mm{background:radial-gradient(110% 90% at 85% 0%,rgba(110,50,200,.3),rgba(10,6,32,.4) 62%)!important}
html.mm-vis body.gl #moltenBg{filter:brightness(.72) saturate(.85)}
body.gl .mm{-webkit-backdrop-filter:blur(3px) saturate(1.2)!important;backdrop-filter:blur(3px) saturate(1.2)!important;background:radial-gradient(110% 90% at 85% 0%,rgba(110,50,200,.22),rgba(10,6,32,.3) 62%)!important}
/* glass ring around the character: empty at first, fills pink-purple with every sentence, full on the last */
@property --f{syntax:'';inherits:true;initial-value:0}
.story{transition:--f .7s ease}
.sav-ring{position:absolute;inset:-16px;border-radius:50%;pointer-events:none;--w:11px;transition:--f .7s ease}
.sav-ring::before,.sav-ring::after{content:"";position:absolute;inset:0;border-radius:50%;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--w)),#000 calc(100% - var(--w) + 1px));mask:radial-gradient(farthest-side,transparent calc(100% - var(--w)),#000 calc(100% - var(--w) + 1px))}
.sav-ring::before{background:linear-gradient(145deg,rgba(255,255,255,.26),rgba(255,255,255,.07));-webkit-backdrop-filter:blur(10px) saturate(1.6);backdrop-filter:blur(10px) saturate(1.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.sav-ring::after{background:conic-gradient(from -90deg,#c9a6ff,#ff7ad9 calc(var(--f) * 360deg),transparent calc(var(--f) * 360deg));filter:drop-shadow(0 0 8px rgba(255,122,217,.55))}
.sav-disc,.story-talk .sav-disc,.sav-fly .sav-disc{box-shadow:none!important;border:0}
.sav-disc::after,.story-talk .sav-disc::after,.sav-fly .sav-disc::after{border-color:transparent!important;border-width:0}
.sav-fly .sav-ring{inset:-16px}
.sav-sound{display:none!important}
/* the filling arc has round ends */
.sav-ring{--w:calc((var(--s) + 32px) * .04)}
.sav-ring::after{display:none}
.sav-ring svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(-90deg);filter:drop-shadow(0 0 8px rgba(255,122,217,.55))}
.sav-ring .sr-p{fill:none;stroke:url(#savg);stroke-width:4;stroke-linecap:round;stroke-dasharray:calc(var(--f) * 100) 100}
.sav-fly .sav-ring{--w:calc((var(--s,280px) + 32px) * .04)}
.proc{background:#14082a;position:relative;z-index:1}
/* bright yellow dot at the head of the filling arc; the arc starts at the top and runs clockwise */
.sav-ring{--d:calc(var(--w) * 1.9)}
.sav-ring .sr-dot{position:absolute;inset:0;transform:rotate(calc(var(--f) * 360deg));pointer-events:none}
.sav-ring .sr-dot::after{content:"";position:absolute;left:calc(50% - var(--d) / 2);top:calc(2% * 1 - var(--d) / 2 + 0px);width:var(--d);height:var(--d);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fffbd0,#ffe14a 45%,#ffc400);box-shadow:0 0 14px 4px rgba(255,214,60,.85),0 0 30px 8px rgba(255,190,40,.45)}
/* the 'let's talk' button lives inside the character's bubble: yellow, with a phone icon */
.sav-bubble{display:flex;flex-direction:column;align-items:stretch;gap:16px}
.sav-bubble .sav-cta{justify-content:center;white-space:nowrap;font-size:clamp(1.05rem,1.2vw,1.25rem)!important;padding:13px 22px!important;margin:0}
.story-line .sl-ball{filter:drop-shadow(0 0 7px rgba(255,214,60,.95)) drop-shadow(0 0 16px rgba(255,190,40,.55))!important}
/* phone buttons glow on hover */
.btn[href^="tel:"],.tel{transition:box-shadow .3s,filter .3s,background-color .3s,transform .3s!important}
.btn[href^="tel:"]:hover,.btn[href^="tel:"]:focus-visible,.tel:hover,.tel:focus-visible{background:#ffe066!important;filter:brightness(1.06);box-shadow:0 0 0 3px rgba(255,224,102,.35),0 0 22px 4px rgba(255,214,60,.95),0 0 56px 14px rgba(255,190,40,.55)!important;transform:translateY(-2px)}
/* the hero line's ball matches the story ball (bright yellow), so there is no visible swap when the story arrives */
.hero-line circle{fill:url(#syel)!important;filter:drop-shadow(0 0 7px rgba(255,214,60,.95)) drop-shadow(0 0 16px rgba(255,190,40,.55))!important}
/* every ball that runs along the line is the same bright glowing yellow */
.svs-tail circle,.lane2 circle,.proc-lines .proc-ball,.cta-line circle{fill:url(#syel)!important;r:10px;filter:drop-shadow(0 0 7px rgba(255,214,60,.95)) drop-shadow(0 0 16px rgba(255,190,40,.55))!important}
.lane3-ball{width:20px!important;height:20px!important;background:radial-gradient(circle at 35% 30%,#fffbd0,#ffe14a 45%,#ffc400)!important;box-shadow:0 0 14px 3px rgba(255,214,60,.9),0 0 30px 8px rgba(255,190,40,.45)!important}
.lane3-ball::before{display:none!important}
.story-line .sl-ball{transition:opacity .45s ease}
/* speech-bubble look: the bubble sits a little further right and has a tail pointing at her */
@media(min-width:701px){
.sav-bubble{left:calc(100% + 40px)!important;overflow:visible}
.sav-bubble::before{content:"";position:absolute;right:calc(100% - 1px);top:58px;width:20px;height:28px;background:rgba(36,22,84,.97);-webkit-backdrop-filter:none;backdrop-filter:none;clip-path:polygon(100% 0,0 50%,100% 100%);border:0}
.sav-bubble::after{content:"";position:absolute;right:calc(100% + 1px);top:56px;width:22px;height:32px;background:rgba(255,255,255,.22);clip-path:polygon(100% 0,0 50%,100% 100%);z-index:-1}
}
/* services title: the same flowing pink-purple as the process title (a little deeper so it reads on white) */
.svs-h2{background-image:linear-gradient(90deg,#a56cf5,#ff5ccb,#a56cf5)!important;background-size:200% 100%!important}
@media(min-width:768px){.pstep4{translate:clamp(60px,5.4vw,110px) 0}}
/* bigger texts across the site */
:root{--tx:clamp(1.18rem,1.42vw,1.6rem);--th:clamp(1.5rem,1.85vw,2.2rem)}
@media(max-width:700px){:root{--tx:1.1rem;--th:1.45rem}}
.contact h2{font-size:clamp(2.4rem,4.2vw,4.6rem)!important}
.contact p{font-size:clamp(1.45rem,2vw,2.1rem)!important}
.contact .btn{font-size:clamp(1.25rem,1.6vw,1.7rem)!important;padding:19px clamp(28px,3vw,48px)!important}
.pstep h3{font-size:clamp(1.5rem,1.9vw,2.2rem)!important}
.pstep p{font-size:var(--tx)!important}
.svs .srv-card h3,.srv-card h3{font-size:clamp(1.6rem,1.9vw,2.2rem)!important}
.svs .srv-card p,.srv-card p{font-size:clamp(1.2rem,1.42vw,1.6rem)!important}
.about-card p,.about-toggle{font-size:clamp(1.4rem,1.7vw,1.95rem)!important}
.pinfo p{font-size:clamp(1.25rem,1.5vw,1.7rem)!important}
.hero .hero-sub,.hero p{font-size:clamp(1.3rem,1.7vw,1.9rem)!important}
:root{--tx:clamp(1.12rem,1.3vw,1.45rem);--th:clamp(1.4rem,1.7vw,2rem)}
.contact h2{font-size:clamp(2.2rem,3.3vw,3.8rem)!important}
.contact p{font-size:clamp(1.35rem,1.8vw,1.9rem)!important}
.contact .btn{font-size:clamp(1.2rem,1.45vw,1.55rem)!important;padding:18px clamp(26px,2.8vw,44px)!important}
.pstep h3{font-size:clamp(1.4rem,1.7vw,2rem)!important}
.svs .srv-card h3,.srv-card h3{font-size:clamp(1.5rem,1.75vw,2rem)!important}
.svs .srv-card p,.srv-card p{font-size:clamp(1.15rem,1.3vw,1.45rem)!important}
.about-card p,.about-toggle{font-size:clamp(1.3rem,1.55vw,1.8rem)!important}
.pinfo p{font-size:clamp(1.2rem,1.4vw,1.55rem)!important}
.hero .hero-sub,.hero p{font-size:clamp(1.25rem,1.55vw,1.75rem)!important}
/* process steps: centred, balanced lines, narrow enough that the text never touches the connector lines */
@media(min-width:768px){
.pstep p{max-width:min(17vw,330px);margin-inline:auto!important;text-align:center;text-wrap:balance}
.pstep h3{text-align:center;text-wrap:balance;max-width:20vw;margin-inline:auto}
}
/* home project slides: bigger text block */
.pinfo p{font-size:clamp(1.4rem,1.75vw,2rem)!important;line-height:1.55!important}
.pinfo .tag,.pinfo li,.pinfo .more{font-size:clamp(1.25rem,1.5vw,1.7rem)!important}
.pinfo li{padding:7px 18px!important}
@media(min-width:901px){.pinfo{max-width:min(40vw,640px)}}
.story-line .sl-fill{transition:opacity .4s ease}
.story-end{position:absolute;left:0;top:0;z-index:2;overflow:visible;pointer-events:none}
.story-end path{fill:none;stroke:#ff7ad9;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(255,122,217,.45))}
.story-end circle{fill:url(#syel);filter:drop-shadow(0 0 7px rgba(255,214,60,.95)) drop-shadow(0 0 16px rgba(255,190,40,.55))}
/* home project slides: the description is the big text, the tags and link are smaller; tighter lines */
.pinfo p{font-size:clamp(1.55rem,2.05vw,2.3rem)!important;line-height:1.32!important}
.pinfo .tag,.pinfo li,.pinfo .more{font-size:clamp(1.05rem,1.25vw,1.4rem)!important}
.pinfo li{padding:6px 16px!important}
@media(min-width:901px){.pinfo{max-width:min(42vw,700px)}}
.pinfo p.fill .fw{font-size:inherit!important;line-height:inherit!important}
/* the fixed line and ball go under the header */
.lane3-line,.lane3-ball{z-index:15!important}
/* hero: "חוויה זורמת" is regular weight, the pink part stays bold */
.hero h1{font-weight:400!important}
.hero h1 em{font-weight:900!important}
/* ===== desktop: inline mega-menu bar instead of the hamburger (logo right, menu in the middle, phone left) ===== */
@media(min-width:901px){
header .glass-nav{direction:rtl;justify-content:flex-start;gap:clamp(14px,2vw,34px)}
header .glass-nav .brand{order:0;margin-inline-start:0!important}
header .glass-nav .dnav{order:1;margin-inline:auto}
header .glass-nav .hd-actions{order:2;margin-inline-start:0!important}
header .glass-nav .burger{display:none}
.dnav ul{display:flex;gap:clamp(2px,.6vw,10px);margin:0;padding:0;list-style:none}
.dnav a{display:inline-flex;align-items:center;gap:7px;padding:10px clamp(12px,1.3vw,22px);border-radius:99px;font-size:clamp(1.05rem,1.2vw,1.3rem);font-weight:600;color:#fff;white-space:nowrap;transition:background .25s}
.dnav li.on>a,.dnav a:hover{background:rgba(255,255,255,.14)}
.dnav svg{transition:transform .25s}
.dnav li.on svg{transform:rotate(180deg)}
.dpanel{position:fixed;z-index:19;top:84px;left:50%;width:min(1240px,calc(100vw - 40px));max-height:calc(100vh - 110px);overflow:auto;padding:clamp(20px,2.4vw,36px);border-radius:30px;background:linear-gradient(135deg,rgba(40,22,100,.92),rgba(14,8,40,.94));-webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);border:1px solid rgba(255,255,255,.2);box-shadow:0 40px 90px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.22);color:#fff;opacity:0;visibility:hidden;transform:translate(-50%,-10px);transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s .25s}
html.dp-open .dpanel{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s}
.dpanel .dp{display:none}
.dpanel .dp.on{display:block}
.dpanel h4{font-size:clamp(1.3rem,1.6vw,1.8rem);margin:0 0 16px;font-weight:800}
}
@media(max-width:900px){.dnav,.dpanel{display:none!important}}
@media(min-width:901px){header .glass-nav nav.dnav{display:block!important}}
/* home project slides: bigger titles */
.pinfo h3{font-size:clamp(2.3rem,3.7vw,3.8rem)!important;line-height:1.08!important}
/* ===== accessibility widget ===== */
.a11y-btn{position:fixed;left:14px;bottom:clamp(196px,26vh,260px);z-index:61;width:54px;height:54px;border-radius:50%;border:2px solid #fff;background:#3b2a8f;color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 28px -8px rgba(0,0,0,.6)}
.a11y-btn:hover{background:#5a3fd0}
.a11y-btn:focus-visible,.a11y-panel button:focus-visible,.a11y-link:focus-visible{outline:3px solid #ffd047;outline-offset:3px}
.a11y-panel{position:fixed;left:14px;bottom:calc(clamp(196px,26vh,260px) + 66px);z-index:62;width:min(340px,calc(100vw - 28px));max-height:calc(100vh - 120px);overflow:auto;padding:18px;border-radius:24px;background:#fff;color:#1f1840;box-shadow:0 30px 70px -18px rgba(0,0,0,.65);font-family:'Assistant',Arial,sans-serif;direction:rtl}
.a11y-panel[hidden]{display:none}
.a11y-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.a11y-h b{font-size:1.4rem;font-weight:800}
.a11y-x{width:38px;height:38px;border-radius:50%;border:0;background:#efeaff;color:#1f1840;font-size:1.6rem;line-height:1;cursor:pointer}
.a11y-fsrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:16px;background:#f4f1ff;margin-bottom:10px;font-size:1.1rem;font-weight:700}
.a11y-fsrow div{display:flex;align-items:center;gap:8px}
.a11y-fsrow button{width:40px;height:40px;border-radius:50%;border:0;background:#3b2a8f;color:#fff;font-size:1.4rem;cursor:pointer}
.a11y-fsrow output{min-width:56px;text-align:center;font-weight:700}
.a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.a11y-t{padding:12px 8px;border-radius:14px;border:2px solid #d9d2f6;background:#fff;color:#1f1840;font:inherit;font-size:1.02rem;font-weight:700;cursor:pointer}
.a11y-t.on{background:#3b2a8f;border-color:#3b2a8f;color:#fff}
.a11y-reset{width:100%;padding:12px;border-radius:14px;border:0;background:#efeaff;color:#1f1840;font:inherit;font-size:1.05rem;font-weight:700;cursor:pointer;margin-bottom:8px}
.a11y-link{display:block;text-align:center;padding:8px;color:#3b2a8f;font-weight:700;text-decoration:underline}
html.a11y-f{filter:var(--a11y-f)}
html.a11y-fs{font-size:var(--a11y-fs)}
html.a11y-links a{text-decoration:underline!important;text-underline-offset:3px;outline:2px dashed rgba(255,208,71,.9);outline-offset:3px}
html.a11y-font *{font-family:Arial,'Assistant',sans-serif!important;font-style:normal!important}
html.a11y-space body *{letter-spacing:.04em!important;word-spacing:.14em!important}
html.a11y-space p,html.a11y-space li{line-height:1.9!important}
html.a11y-pause *,html.a11y-pause *::before,html.a11y-pause *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.a11y-cursor,html.a11y-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 9-6.5 1.8L9.5 19z' fill='%23000' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2,auto!important}
.a11y-btn,.a11y-panel{filter:none}
@media(max-width:700px){.a11y-btn{width:48px;height:48px;bottom:calc(150px + env(safe-area-inset-bottom,0px))}.a11y-panel{bottom:calc(150px + 60px)}}
/* menu panels: no headings above the content */
.mm-v>h4,.dpanel h4{display:none!important}
/* the contact card stays pink-purple (no dim state before the line arrives) */
body:not([data-page="home"]) .contact::before{clip-path:circle(150% at var(--hx,0px) 0)!important;transition:none!important}
body:not([data-page="home"]) .contact:not(.hit)>*{opacity:1!important}
/* hero picture: the Lego logo (not a cut-out), its purple backdrop feathers into the page */
.hero-img img{mix-blend-mode:normal!important;-webkit-mask-image:radial-gradient(ellipse farthest-corner at 50% 52%,#000 56%,transparent 97%)!important;mask-image:radial-gradient(ellipse farthest-corner at 50% 52%,#000 56%,transparent 97%)!important}
.hero-img img{-webkit-mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 64%,rgba(0,0,0,.55) 82%,transparent 100%)!important;mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 64%,rgba(0,0,0,.55) 82%,transparent 100%)!important}
.hero-img img{-webkit-mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 74%,rgba(0,0,0,.6) 88%,transparent 100%)!important;mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 74%,rgba(0,0,0,.6) 88%,transparent 100%)!important;scale:1.12;transform-origin:50% 50%}
/* cookie notice: smaller text, tighter lines, smaller buttons, no bold */
.ck{width:min(380px,calc(100vw - 24px))!important;padding:16px 18px!important}
.ck-b p,.ck-b p a{font-size:1rem!important;line-height:1.4!important;font-weight:400!important}
.ck-act{gap:8px!important}
.ck-act button{font-size:.95rem!important;font-weight:500!important;padding:8px 18px!important;line-height:1.2!important}
.ck-x{font-size:1.1rem!important}
/* story sentences: much smaller, and painted word by word */
.beat,.beat-lead{font-size:clamp(1.35rem,2.5vw,2.7rem)!important;line-height:1.35!important;letter-spacing:0!important}
.beat-lead{font-size:clamp(1.25rem,2.2vw,2.4rem)!important}
.bw{display:inline;transition:opacity .25s ease}
@media(max-width:700px){.beat,.beat-lead{font-size:clamp(1.2rem,5.6vw,1.6rem)!important;line-height:1.4!important}}
/* equal air above and below each sentence */
.story-beats{place-items:center!important}
.story-av,.story-talk .story-av{margin-top:42px!important}
/* bubble: smaller text and button */
.sav-bubble{font-size:clamp(1rem,1.25vw,1.35rem)!important;line-height:1.4!important;padding:16px 20px!important;max-width:min(300px,26vw)!important;gap:12px!important}
.sav-bubble .sb-t{font-size:1.1em}
.sav-bubble .sav-cta{font-size:clamp(.92rem,1vw,1.05rem)!important;padding:9px 18px!important}
/* home project slides: description a notch smaller */
.pinfo p{font-size:clamp(1.2rem,1.55vw,1.7rem)!important;line-height:1.38!important}
.pinfo .tag,.pinfo li,.pinfo .more{font-size:clamp(1rem,1.15vw,1.25rem)!important}
/* home project slides: text block moved right, one-line titles, 20px description */
@media(min-width:901px){.pinfo{translate:clamp(28px,4.4vw,80px) 0}}
.pinfo h3{white-space:nowrap!important;font-size:clamp(1.8rem,2.7vw,2.9rem)!important;line-height:1.15!important}
.pinfo p{font-size:20px!important;line-height:1.4!important}
.pinfo .tag,.pinfo li,.pinfo .more{font-size:17px!important}
/* hero: the picture is the background across the whole width, no fade */
.hero-img{position:absolute!important;inset:0!important;left:0!important;width:100%!important;height:100%!important;padding:0!important;z-index:-2!important;translate:none!important;transform:none!important;display:block!important}
.hero-img img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;object-fit:cover!important;object-position:50% 50%!important;-webkit-mask-image:none!important;mask-image:none!important;mix-blend-mode:normal!important;scale:1!important;translate:none!important;transform:none!important;filter:none!important}
.hero{overflow:hidden}
/* soft dark veil on the text side so the headline stays readable over the picture */
.hero-img::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(270deg,rgba(14,6,40,.72) 0,rgba(14,6,40,.5) 32%,rgba(14,6,40,0) 62%)}
@media(max-width:900px){.hero-img::after{background:linear-gradient(180deg,rgba(14,6,40,.5),rgba(14,6,40,.65))}.hero-img img{object-position:30% 50%!important}}
/* hero text block further to the right */
@media(min-width:901px){.hero-text{translate:clamp(50px,9vw,190px) 0}}
/* no "filling" text effect anywhere: every word is fully coloured from the start */
.fw{color:var(--lit,inherit)!important}
.bw{opacity:1!important}
/* step 3 sits midway between steps 4 and 2, so its text is centred between the two connector lines */
@media(min-width:768px){.pstep3{translate:calc(clamp(60px,5.4vw,110px) / 2 + .4vw) 0}}
/* footer: every text is 16px */
footer,footer *{font-size:16px!important;line-height:1.5!important}
footer h4,footer h3,footer .fh,footer b{font-size:16px!important}
footer:not(#a) :not(#a),footer:not(#a){font-size:16px!important;line-height:1.5!important}
footer:not(#a) .copy,footer:not(#a) .copy a{font-size:16px!important}
/* services slide: clean dark purple like the process slide */
.svs{background:#14082a!important;color:#f4f1ff}
.svs .sc-blobs{display:none!important}
.svs-h1{color:#fff!important}
.svs-h2{background-image:linear-gradient(90deg,#c9a6ff,#ff7ad9,#c9a6ff)!important;background-size:200% 100%!important}
.svs .srv-card{background:linear-gradient(145deg,#ffffff,#f3edff)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* ===== one reading size: all running texts 20px with tighter lines, all buttons 20px ===== */
html:not(#a) .about-card p,html:not(#a) .about-more p,html:not(#a) .about-more li,html:not(#a) .srv-card p,html:not(#a) .pinfo p,html:not(#a) .pstep p,html:not(#a) .ptxt p,html:not(#a) .ptxt li,html:not(#a) .pcard p,html:not(#a) .pg-t p,html:not(#a) .ppain p,html:not(#a) .acard p,html:not(#a) .legal p,html:not(#a) .legal li,html:not(#a) .contact p,html:not(#a) .ph .lead,html:not(#a) .ppersona dd,html:not(#a) .cat-head p,html:not(#a) .pc-info p,html:not(#a) .pben-i p,html:not(#a) .psteps small,html:not(#a) .pds-row small,html:not(#a) .pfact small,html:not(#a) .pshot figcaption,html:not(#a) .pfig figcaption,html:not(#a) .wshot figcaption,html:not(#a) .prail-hint,html:not(#a) .apps-d .lead,html:not(#a) .pmain p,html:not(#a) .pmain li,html:not(#a) .pmain dd{font-size:20px!important;line-height:1.45!important}
html:not(#a) .btn,html:not(#a) .dms-go,html:not(#a) .story-cta,html:not(#a) .more-cta a,html:not(#a) .sav-cta,html:not(#a) .mm-btn,html:not(#a) .xbtn,html:not(#a) .pc-go b,html:not(#a) .about-toggle{font-size:20px!important;line-height:1.25!important}
html:not(#a) .btn,html:not(#a) .dms-go,html:not(#a) .story-cta,html:not(#a) .sav-cta{padding:12px 26px!important;gap:10px!important}
html:not(#a) .btn .bi,html:not(#a) .dms-go .bi{width:1.15em!important;height:1.15em!important}
@media(max-width:700px){
html:not(#a) .about-card p,html:not(#a) .about-more p,html:not(#a) .about-more li,html:not(#a) .srv-card p,html:not(#a) .pinfo p,html:not(#a) .pstep p,html:not(#a) .ptxt p,html:not(#a) .ptxt li,html:not(#a) .pcard p,html:not(#a) .pg-t p,html:not(#a) .ppain p,html:not(#a) .acard p,html:not(#a) .legal p,html:not(#a) .legal li,html:not(#a) .contact p,html:not(#a) .ph .lead,html:not(#a) .ppersona dd,html:not(#a) .cat-head p,html:not(#a) .pc-info p,html:not(#a) .pben-i p,html:not(#a) .psteps small,html:not(#a) .pds-row small,html:not(#a) .pfact small,html:not(#a) .pshot figcaption,html:not(#a) .pfig figcaption,html:not(#a) .wshot figcaption,html:not(#a) .prail-hint,html:not(#a) .apps-d .lead,html:not(#a) .pmain p,html:not(#a) .pmain li,html:not(#a) .pmain dd{font-size:17px!important}
html:not(#a) .btn,html:not(#a) .dms-go,html:not(#a) .story-cta,html:not(#a) .more-cta a,html:not(#a) .sav-cta,html:not(#a) .mm-btn,html:not(#a) .xbtn,html:not(#a) .pc-go b,html:not(#a) .about-toggle{font-size:17px!important}
html:not(#a) .btn,html:not(#a) .dms-go,html:not(#a) .story-cta,html:not(#a) .sav-cta{padding:11px 20px!important}
}
/* hero slider: the pictures dissolve into each other (blur + zoom), changing by themselves */
.hero-img img.hs{opacity:0;filter:blur(18px)!important;scale:1.06!important;transition:opacity 1.4s ease,filter 1.4s ease,scale 1.75s cubic-bezier(.2,.65,.3,1)}
.hero-img img.hs.is-on{opacity:1;filter:blur(0)!important;scale:1.01!important}
.hs-dots{position:absolute;z-index:3;left:50%;bottom:clamp(18px,4vh,40px);translate:-50% 0;display:flex;gap:12px;direction:ltr}
.hs-dots button{width:34px;height:4px;border:0;border-radius:4px;background:rgba(255,255,255,.4);cursor:pointer;padding:0;transition:background .3s,width .3s}
.hs-dots button.is-on{background:#fff;width:54px}
.hs-dots button:focus-visible{outline:2px solid #ffd047;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.hero-img img.hs{transition:opacity .2s;filter:none!important;scale:1!important}}
@media(max-width:900px){.hs-dots{bottom:10px}}
@media(prefers-reduced-motion:reduce){.hero-img img.hs{transition:opacity .8s ease!important}}
/* hero: the text block's right edge sits on the logo's right edge (set by script); the big X fades out under the text but stays readable */
@media(min-width:901px){.hero-text{translate:var(--htx,clamp(50px,9vw,190px)) 0!important}}
.ghost-word{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 58%,rgba(0,0,0,.4) 82%,rgba(0,0,0,.22) 100%);mask-image:linear-gradient(90deg,#000 0,#000 58%,rgba(0,0,0,.4) 82%,rgba(0,0,0,.22) 100%)}
/* the hero clips only its picture, so the line and ball that leave the hero are never cut */
.hero{overflow:visible!important}
.hero-img{overflow:hidden}
/* outline buttons turn yellow on hover */
html:not(#a) .btn.ghost:hover,html:not(#a) .btn.ghost:focus-visible,html:not(#a) .hero .btn.ghost:hover,html:not(#a) .contact .btn.ghost:hover{background:#ffd047!important;border-color:#ffd047!important;color:#2a1a4d!important;box-shadow:0 0 22px 3px rgba(255,208,71,.7)!important}
/* hero slider: after the first reveal a plain cross-fade; pictures are toned toward the logo's purple/pink (soft-light colour layer, lower saturation) */
.hero-img img.hs{filter:saturate(.8) contrast(.97)!important;scale:1.03!important;transition:opacity 1.2s ease,scale 1.8s ease}
.hero-img img.hs.is-on{filter:saturate(.8) contrast(.97)!important;scale:1!important}
.hero-img.hs-intro img.hs{filter:blur(18px) saturate(.8)!important;scale:1.06!important;transition:opacity 1.4s ease,filter 1.4s ease,scale 1.75s cubic-bezier(.2,.65,.3,1)}
.hero-img.hs-intro img.hs.is-on{filter:blur(0) saturate(.8) contrast(.97)!important;scale:1.01!important}
.hero-img::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:soft-light;opacity:.55;background:linear-gradient(135deg,#b58cff 0%,#7a46e8 45%,#ff7ad9 100%)}
.hero-img::after{z-index:2}
/* hero slider: plain cross-fade, no glass/blur, and no colour layer (the pictures are already toned) */
.hero-img img.hs,.hero-img img.hs.is-on,.hero-img.hs-intro img.hs,.hero-img.hs-intro img.hs.is-on{filter:none!important;scale:1!important;transition:opacity 1.1s ease!important}
.hero-img::before{display:none!important}
/* hero: a single picture (no slider) */
.hs-dots{display:none!important}
/* hero: UI/UX with the pink-purple AI sparkle runs along the bottom without stopping */
.hero-marq{position:absolute;left:0;right:0;bottom:clamp(14px,3.5vh,44px);z-index:3;overflow:hidden;pointer-events:none;direction:ltr;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.hm-track{display:flex;width:max-content;animation:hmRun 38s linear infinite}
.hm-set{display:flex;align-items:center;flex:none}
.hm-t{font-family:'Montserrat','Rubik',Arial,sans-serif;font-weight:800;font-size:clamp(2rem,4.4vw,4.6rem);line-height:1;letter-spacing:-.02em;padding:0 clamp(18px,2.4vw,40px);color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.75);white-space:nowrap}
.hm-star{flex:none;width:clamp(30px,3.6vw,56px);height:clamp(30px,3.6vw,56px);filter:drop-shadow(0 0 12px rgba(255,122,217,.6))}
@keyframes hmRun{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.hm-track{animation-duration:90s}}
@media(max-width:900px){.hero-marq{position:relative;bottom:auto;margin-top:26px}.hm-t{font-size:clamp(1.6rem,8vw,2.6rem)}}
/* the fixed line runs behind the ball (and under the header) */
.lane3-line{z-index:15!important}
.lane3-ball{z-index:16!important}
/* dining scene: tablet pushed left so the dish's steam is clear; a barcode scan animation sits on the top of the plate */
.dsc .d-tab{left:-18%!important}
.dsc-scan{position:absolute;left:79%;top:57.5%;width:11.5%;aspect-ratio:1;z-index:3;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45))}
.dsc-scan svg{width:100%;height:100%;overflow:visible}
.dsc-scan .sc-bg{fill:rgba(26,12,52,.62)}
.dsc-scan .sc-bars rect{fill:#fff}
.dsc-scan .sc-corners path{fill:none;stroke:#ff8a2b;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.dsc-scan .sc-line{fill:#ff8a2b;filter:drop-shadow(0 0 5px rgba(255,138,43,.95));animation:dscScan 2.2s ease-in-out infinite alternate}
@keyframes dscScan{from{transform:translateY(14px)}to{transform:translateY(82px)}}
@media(prefers-reduced-motion:reduce){.dsc-scan .sc-line{animation:none;transform:translateY(48px)}}
.ph-vis .dsc .d-tab{left:-6%!important}
/* hero marquee: thinner, softer outline (static 800 font has no overlapping contours, so the X joint no longer shows) */
.hm-t{-webkit-text-stroke:1px rgba(205,185,255,.34)!important;paint-order:stroke fill}
/* dining scene: bigger tablet pushed left, big QR on the plate with an orange scan line */
.dsc .d-tab{left:-27%!important;width:88%!important}
.ph-vis .dsc .d-tab{left:-4%!important;width:84%!important}
.dsc-scan{left:63%!important;top:52%!important;width:19%!important}
.dsc-scan .qr-card{fill:#fff}
.dsc-scan .sc-qr{fill:#1a0c34}
.dsc-scan .sc-corners path{stroke-width:4.5}
.dsc-scan .sc-line{fill:#ff8a2b;filter:drop-shadow(0 0 6px rgba(255,138,43,1)) drop-shadow(0 0 14px rgba(255,138,43,.7));animation:dscScan 2.2s ease-in-out infinite alternate!important}
@keyframes dscScan{from{transform:translateY(12px)}to{transform:translateY(85px)}}
@media(prefers-reduced-motion:reduce){.dsc-scan .sc-line{animation:none!important;transform:translateY(48px)}}
.ghost-wrap{display:none!important}
/* hero: the text block sits centred between the header and the UI/UX band (equal space above and below) */
@media(min-width:901px){.hero>.wrap{padding-bottom:clamp(2rem,4.4vw,4.6rem)!important}}
/* UI/UX outline = outer contour only (SVG filter), so overlapping glyph parts like the X joint never show */
.hm-t{display:inline-block;color:#000!important;-webkit-text-stroke:0!important;filter:url(#hmo)}
/* dining scene (home slide): tablet further left; QR is white on a transparent background, orange stays */
.dsc .d-tab{left:-46%!important}
.ph-vis .dsc .d-tab{left:-4%!important}
.dsc-scan .qr-card{fill:none!important}
.dsc-scan .sc-qr{fill:#fff!important}
.dsc-scan{filter:drop-shadow(0 2px 4px rgba(20,8,42,.75)) drop-shadow(0 6px 14px rgba(20,8,42,.5))!important}
/* desktop mega menu: small thumbnails with the project name in pink-purple beside them */
@media(min-width:901px){
.dpanel .mm-grid{gap:10px 14px}
.dpanel .mm-card{display:flex;align-items:center;gap:14px;aspect-ratio:auto;overflow:visible;padding:9px 12px 9px 10px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);transition:background .25s,transform .25s,border-color .25s}
.dpanel .mm-card:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);transform:translateY(-2px)}
.dpanel .mm-card img{position:static;inset:auto;flex:none;width:86px;height:64px;border-radius:12px;object-fit:cover;box-shadow:0 8px 18px -8px rgba(0,0,0,.7)}
.dpanel .mm-card:hover img{transform:none}
.dpanel .mm-card span{position:static;inset:auto;padding:0;background:linear-gradient(90deg,#c9a6ff,#ff7ad9);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;font-size:1.2rem;line-height:1.2}
}
/* menu: thinner, smaller type */
@media(min-width:901px){
.dnav a{font-weight:400!important;font-size:clamp(.95rem,1.05vw,1.1rem)!important}
.dpanel h4{font-weight:500!important;font-size:clamp(1.1rem,1.3vw,1.4rem)!important}
.dpanel .mm-card span{font-weight:500!important;font-size:1.02rem!important}
.dpanel .mm-btn{font-weight:500!important;font-size:.95rem!important}
.dpanel .mm-chip,.dpanel .mm-ico{font-weight:400!important;font-size:.95rem!important}
}
/* hero picture zoomed out a little; its edges melt into the dark page colour */
.hero-img img.hs,.hero-img img.hs.is-on,.hero-img.hs-intro img.hs,.hero-img.hs-intro img.hs.is-on{scale:.86!important;transform-origin:42% 52%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)!important;mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)!important;-webkit-mask-composite:source-in!important;mask-composite:intersect!important}
/* hero picture: left edge runs all the way to the screen edge (no fade there); only the right side melts into the page */
.hero-img img.hs,.hero-img img.hs.is-on,.hero-img.hs-intro img.hs,.hero-img.hs-intro img.hs.is-on{transform-origin:0% 52%!important;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)!important;mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)!important}
@media(min-width:901px){.hero-img img.hs,.hero-img img.hs.is-on{object-position:0% 50%!important}}
/* dining scene: the QR sits high, over the right part of the tablet */
.dsc-scan{left:77%!important;top:16%!important}
.ph-vis .dsc-scan{left:54%!important;top:17%!important}
/* ===== projects: opaque cards that stick and stack (each keeps its project colour) ===== */
.cfp{position:relative;overflow:visible}
.cfp-root{display:flex;flex-direction:column;width:100%;padding:2vw clamp(20px,6vw,110px) 6vw}
.cfp-a{display:block;height:0}
.cfp-card{position:sticky;top:calc(var(--hh,90px) + 6px + var(--i,0) * 22px);z-index:calc(10 + var(--i,0));display:flex;flex-direction:row;align-items:center;gap:3vw;min-height:min(70vh,640px);margin:0 0 9vw;padding:3.2vw 4vw;border-radius:28px;background:var(--c);box-shadow:0 30px 70px -30px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.12);transform:scale(calc(1 - var(--cf-depth,0) * .06));filter:brightness(calc(1 - var(--cf-depth,0) * .18));transform-origin:50% 0;isolation:isolate}
.cfp-card:last-of-type{margin-bottom:0}
.cfp-card:not(.live) .lia img.l{animation-play-state:paused}
.cfp .pinfo{position:static!important;inset:auto!important;translate:none!important;width:44%!important;max-width:none!important;padding:0!important;align-content:center;z-index:2;display:grid}
.cfp .pnum{visibility:visible!important;margin-bottom:10px}
.cfp .pimg{grid-column:auto!important;position:relative;flex:1 1 0;min-width:0;width:auto;height:min(52vh,520px);overflow:visible}
.cfp .pimg>img{padding:0!important;translate:none!important}
.cfp .pimg>.vbox{translate:0 -50%!important}
.cfp .pimg .lia,.cfp .pimg .dsc{left:50%!important}
@media(max-width:820px){
.cfp-card{flex-direction:column;top:calc(var(--hh,64px) + 8px + var(--i,0) * 14px);gap:5vw;min-height:0;margin-bottom:14vw;padding:6vw 5vw}
.cfp .pinfo{width:100%!important;order:2}
.cfp .pimg{order:1;flex:none;width:100%;height:30vh}
}
@media(prefers-reduced-motion:reduce){.cfp-card{transform:none;filter:none}}
.cfp-card{overflow:hidden}
.mm-btns{display:flex;flex-wrap:wrap;gap:12px}
.mm-btn.ghost{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.6);box-shadow:none}
.mm-btn.ghost:hover{background:#fff!important;color:#1a1040!important}
/* ===== LiaMOR scene: scrolling events on the tablet, a cheering couple and confetti (liascroll.js) ===== */
.lia-scr{position:absolute;aspect-ratio:1100/878;pointer-events:none;z-index:1}
.lia-scr-in{position:absolute;left:0;top:0;width:1100px;height:878px;transform-origin:0 0}
.lia-win{position:absolute;left:0;top:0;width:900px;height:740px;overflow:hidden;transform-origin:0 0;background:#fff;backface-visibility:hidden}
.lia-strip{width:900px;height:2220px;background-size:900px 2220px;background-repeat:no-repeat;animation:liaScroll 15s cubic-bezier(.6,0,.3,1) infinite}
@keyframes liaScroll{0%,9%{transform:translateY(0)}20%,29%{transform:translateY(-370px)}40%,49%{transform:translateY(-740px)}60%,69%{transform:translateY(-1110px)}80%,89%{transform:translateY(-1480px)}100%{transform:translateY(-1480px)}}
.lia img.l.couple{animation:liaCheer 2.8s ease-in-out infinite!important;transform-origin:50% 92%}
@keyframes liaCheer{0%,100%{rotate:0deg;scale:1}25%{rotate:-1.4deg;scale:1.012}50%{rotate:0deg;scale:1}75%{rotate:1.2deg;scale:1.012}}
.lia-conf{position:absolute;left:58%;top:20%;width:44%;height:62%;pointer-events:none;z-index:6;overflow:hidden}
.lia-conf i{position:absolute;top:-6%;width:7px;height:11px;border-radius:2px;opacity:0;animation:liaConf var(--t,4.5s) linear infinite;animation-delay:var(--d,0s)}
@keyframes liaConf{0%{opacity:0;top:-6%;transform:translateX(0) rotate(0)}8%{opacity:1}85%{opacity:1}100%{opacity:0;top:100%;transform:translateX(var(--x,0)) rotate(var(--r,360deg))}}
@media(prefers-reduced-motion:reduce){.lia-strip,.lia img.l.couple,.lia-conf i{animation:none!important}.lia-conf{display:none}}
.lia-strip{background-image:url("פרוייקטים/ליאמור/events-strip.jpg")}
/* LiaMOR couple: rises out of the ring, stays, sinks back (ring never moves) */
.lia img.l.couple{animation:none!important}
.lia-cpl{position:absolute;aspect-ratio:1324/1188;pointer-events:none}
.lia-cpl svg,.lia-cpl .cpl-win,.lia .lia-cpl img.cpl-front{position:absolute!important;left:0!important;top:0!important;width:100%!important;height:100%!important;inset:0!important;padding:0!important;margin:0!important;max-width:none!important;object-fit:fill!important;translate:none!important;transform:none;animation:none}
.lia .lia-cpl img.cpl-mv{position:absolute!important;left:0!important;top:0!important;inset:0!important;width:100%!important;height:100%!important;padding:0!important;max-width:none!important;object-fit:fill!important;translate:none!important;animation:cplRise 8s cubic-bezier(.45,0,.25,1) infinite}
@keyframes cplRise{0%{transform:translateY(64%)}13%{transform:translateY(-1.5%)}17%,64%{transform:translateY(0)}78%,100%{transform:translateY(64%)}}
@media(prefers-reduced-motion:reduce){.lia .lia-cpl img.cpl-mv{animation:none}}
/* home hero: a thin glowing line traces the glass logo in the picture, fills softly, then undraws (same cover box as the picture) */
.hero-img svg.hero-mg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible;scale:.86;transform-origin:0% 52%}
.hmg-l{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100 100;stroke-dashoffset:100;filter:drop-shadow(0 0 4px rgba(255,122,217,.95));animation:hmgDraw 7s cubic-bezier(.6,0,.3,1) infinite}
.hmg-l.l2{stroke:#ffe1f6;animation-delay:.35s}
.hmg-l.l3{stroke:#ffd23f;animation-delay:.8s}
@keyframes hmgDraw{0%{stroke-dashoffset:100}40%,72%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
.hmg-f{fill:url(#hmgP);opacity:0;mix-blend-mode:screen;animation:hmgFill 7s ease-in-out infinite}
.hmg-f.f2{animation-delay:.35s}
@keyframes hmgFill{0%,38%{opacity:0}52%,66%{opacity:.22}82%,100%{opacity:0}}
.hmg-dot{fill:#fff;filter:drop-shadow(0 0 5px #ff7ad9)}
@media(max-width:900px){.hero-img svg.hero-mg{display:none}}
@media(prefers-reduced-motion:reduce){.hmg-l,.hmg-f{animation:none}.hmg-l{stroke-dashoffset:0}.hmg-dot{display:none}}
/* ===== website menu: three animated buttons (sites, online stores, landing pages) ===== */
.wk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,22px)}
.wk{display:flex;flex-direction:column;gap:14px;padding:18px 18px 16px;border-radius:24px;background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.16);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,background .3s}
.wk:hover{transform:translateY(-4px);border-color:rgba(255,122,217,.55);background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.05))}
.wk-art{position:relative;aspect-ratio:1.45;perspective:900px}
.wk-scr{position:absolute;inset:6% 8% 4%;border-radius:12px;overflow:hidden;background:#f7f3ff;transform:rotateX(10deg) rotateY(-14deg) rotateZ(1deg);box-shadow:0 0 0 1px rgba(255,255,255,.5),0 24px 40px -16px rgba(0,0,0,.7),0 0 34px -6px rgba(255,122,217,.45);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.wk:hover .wk-scr{transform:rotateX(4deg) rotateY(-6deg)}
.wk-art i,.wk-art em,.wk-art u,.wk-art b,.wk-art s{display:block;font-style:normal;text-decoration:none}
.wk-bar{position:relative;height:13%;display:flex;align-items:center;gap:4%;padding:0 6%;background:#fff;border-bottom:1px solid #ece4fb}
.wk-bar em{width:5%;aspect-ratio:1;border-radius:50%;background:#e2d6f7}
.wk-bar em:nth-child(1){background:#ff7ad9}.wk-bar em:nth-child(2){background:#ffd23f}.wk-bar em:nth-child(3){background:#c9a6ff}
.wk-pg{position:absolute;left:0;right:0;top:13%;padding:6%;display:flex;flex-direction:column;gap:6%}
.wk-cur{position:absolute;width:9%;aspect-ratio:1;z-index:3;background:#fff;clip-path:polygon(0 0,100% 55%,55% 62%,40% 100%);filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
/* sites: the page scrolls, a cursor follows */
.wk-site{animation:wkScroll 6s cubic-bezier(.6,0,.3,1) infinite}
.s-nav{height:7px;border-radius:4px;background:linear-gradient(90deg,#e9e0f8 70%,#8a2be2 70%)}
.s-hero{display:flex!important;flex-direction:column;gap:6px;padding:10% 8%;border-radius:8px;background:linear-gradient(135deg,#c9a6ff,#ff7ad9)}
.s-hero em{height:7px;width:70%;border-radius:4px;background:#fff}
.s-hero em+em{width:45%;opacity:.7}
.s-hero u{width:30%;height:9px;border-radius:9px;background:#ffd23f;margin-top:4px}
.s-row{display:grid!important;grid-template-columns:repeat(3,1fr);gap:6px}
.s-row em{aspect-ratio:1.1;border-radius:6px;background:#fff;box-shadow:0 2px 6px rgba(90,40,160,.15)}
.s-txt{height:26px;border-radius:5px;background:repeating-linear-gradient(180deg,#e2d6f7 0 5px,transparent 5px 10px)}
@keyframes wkScroll{0%,18%{transform:translateY(0)}45%,62%{transform:translateY(-38%)}88%,100%{transform:translateY(0)}}
.wk0 .wk-cur{animation:wkCur0 6s ease-in-out infinite}
@keyframes wkCur0{0%,100%{left:70%;top:72%}30%{left:58%;top:60%}55%{left:40%;top:52%}75%{left:62%;top:40%}}
/* online stores: tap "add", a product flies to the cart, the badge counts */
.wk-shop{display:grid!important;grid-template-columns:1fr 1fr;gap:7px}
.wk-shop .p{display:flex!important;flex-direction:column;gap:4px;padding:5px;border-radius:7px;background:#fff;box-shadow:0 2px 6px rgba(90,40,160,.15)}
.wk-shop .p em{aspect-ratio:1.5;border-radius:5px;background:linear-gradient(135deg,#ffe0f3,#e6d6ff)}
.wk-shop .p:nth-child(2) em{background:linear-gradient(135deg,#fff1c2,#ffd6e8)}
.wk-shop .p:nth-child(3) em{background:linear-gradient(135deg,#d9f3ff,#e6d6ff)}
.wk-shop .p u{height:7px;width:55%;border-radius:4px;background:#8a2be2;margin-inline-start:auto}
.wk-shop .p:first-child u{animation:wkBuy 4.5s ease-in-out infinite}
@keyframes wkBuy{0%,22%,40%,100%{transform:scale(1);background:#8a2be2}28%{transform:scale(.8);background:#ff7ad9}}
.wk-cart{position:absolute!important;right:6%;top:50%;translate:0 -50%;width:9%;aspect-ratio:1;border-radius:3px;background:#2a1a4d}
.wk-cart s{position:absolute;top:-55%;right:-55%;min-width:100%;padding:0 2px;border-radius:9px;background:#ff7ad9;color:#fff;font:800 8px/1.4 Assistant,sans-serif;text-align:center}
.wk-cart s::after{content:"";}
.wk1 .wk-cart{animation:wkCartPop 4.5s ease-in-out infinite}
@keyframes wkCartPop{0%,52%,70%,100%{transform:scale(1)}58%{transform:scale(1.35)}}
.wk1 .wk-cart s{font-size:0}
.wk1 .wk-cart s::before{content:"1";font-size:8px;animation:wkCount 4.5s steps(1) infinite}
@keyframes wkCount{0%,55%{content:"1"}56%,100%{content:"2"}}
.wk-fly{position:absolute;width:10%;aspect-ratio:1;border-radius:3px;background:linear-gradient(135deg,#ff7ad9,#c9a6ff);opacity:0;animation:wkFly 4.5s cubic-bezier(.5,0,.3,1) infinite}
@keyframes wkFly{0%,28%{opacity:0;left:30%;top:40%;transform:scale(1)}32%{opacity:1}54%{opacity:1;left:86%;top:2%;transform:scale(.4)}58%,100%{opacity:0;left:86%;top:2%}}
.wk1 .wk-cur{animation:wkCur1 4.5s ease-in-out infinite}
@keyframes wkCur1{0%,100%{left:62%;top:78%}20%,30%{left:40%;top:47%}60%{left:72%;top:66%}}
/* landing pages: fields fill, the button is pressed, success */
.l-h{height:9px;width:80%;border-radius:4px;background:linear-gradient(90deg,#8a2be2,#e0409a);margin:2% auto 0}
.l-h2{height:6px;width:55%;border-radius:4px;background:#d8cbf0;margin:0 auto 4%}
.l-f{height:14%;border-radius:6px;background:#fff;border:1px solid #e2d6f7;padding:0 6%;display:flex!important;align-items:center}
.l-f em{height:5px;width:0;border-radius:3px;background:#2a1a4d;animation:wkType 5s steps(8) infinite}
.l-f+.l-f em{animation-delay:.6s}
@keyframes wkType{0%,10%{width:0}40%,100%{width:60%}}
.l-cta{height:16%;width:70%;margin:2% auto 0;border-radius:99px;background:#ffd23f;box-shadow:0 4px 10px -4px rgba(255,190,40,.9);animation:wkCta 5s ease-in-out infinite}
@keyframes wkCta{0%,55%,64%,100%{transform:scale(1)}59%{transform:scale(.9);filter:brightness(.9)}}
.l-ok{position:absolute!important;inset:0;display:grid!important;place-items:center;background:rgba(247,243,255,.94);color:#8a2be2;font:800 30px/1 Assistant,sans-serif;opacity:0;animation:wkOk 5s ease-in-out infinite}
@keyframes wkOk{0%,62%{opacity:0;transform:scale(.6)}68%,90%{opacity:1;transform:none}100%{opacity:0}}
.wk2 .wk-cur{animation:wkCur2 5s ease-in-out infinite}
@keyframes wkCur2{0%,100%{left:70%;top:80%}15%,40%{left:58%;top:48%}52%,60%{left:52%;top:70%}}
.wk-t{display:flex;align-items:baseline;gap:8px;color:#fff;font-weight:700;font-size:1.15rem}
.wk-t b{font-family:'Montserrat','Rubik',sans-serif;font-size:1.7rem;font-weight:800;background:linear-gradient(90deg,#c9a6ff,#ff7ad9);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:900px){.wk-grid{grid-template-columns:1fr}.wk{flex-direction:row;align-items:center}.wk-art{width:45%;flex:none}}
@media(prefers-reduced-motion:reduce){.wk-art *{animation:none!important}}
.wk-land{bottom:0;justify-content:center;gap:5%}.wk-land .l-f{flex:none;height:15%}.wk-land .l-cta{flex:none}.wk-cart s{top:-60%!important}
/* ===== web-design hero: a shop screen whose products hop into the cart, and a rocket launching beside it ===== */
.hero .wrap:has(.wds){grid-template-columns:1fr 1fr;align-items:center}
.hero .wrap:has(.wds)>.hero-text{grid-column:1;grid-row:1;translate:none!important;max-width:none}
.hero .wrap:has(.wds)>.stats{grid-column:1/-1}
.wds{position:relative;grid-column:2;grid-row:1;width:100%;max-width:640px;aspect-ratio:1.2;container-type:inline-size;perspective:1500px;justify-self:start}
.wds *{box-sizing:border-box}
.wds i,.wds em,.wds b,.wds u,.wds s{display:block;font-style:normal;text-decoration:none}
.wds-glow{position:absolute;inset:10% 4% 4%;border-radius:50%;background:radial-gradient(closest-side,rgba(201,166,255,.35),rgba(255,122,217,.16) 55%,transparent 75%);filter:blur(22px)}
.wds-dev{position:absolute;left:2%;top:10%;width:74%;height:74%;padding:1.6cqw;border-radius:3.4cqw;background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(220,200,255,.18) 45%,rgba(255,255,255,.35));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 4cqw 8cqw -3cqw rgba(0,0,0,.7),0 0 6cqw -1cqw rgba(255,122,217,.45);transform:rotateX(8deg) rotateY(16deg) rotateZ(-1deg);animation:wdsTilt 9s ease-in-out infinite}
@keyframes wdsTilt{0%,100%{transform:rotateX(8deg) rotateY(16deg) rotateZ(-1deg)}50%{transform:rotateX(5deg) rotateY(9deg) rotateZ(0deg)}}
.wds-scr{position:relative;width:100%;height:100%;border-radius:2.2cqw;overflow:hidden;background:linear-gradient(170deg,#fbf8ff,#f1e9ff)}
.wds-bar{display:flex!important;align-items:center;gap:1.4cqw;height:13%;padding:0 3cqw;background:#fff;box-shadow:0 .4cqw 1.2cqw -.6cqw rgba(90,40,160,.25)}
.wds-bar .d{width:1.4cqw;aspect-ratio:1;border-radius:50%;background:#e2d6f7}
.wds-bar .d:nth-child(1){background:#ff7ad9}.wds-bar .d:nth-child(2){background:#ffd23f}.wds-bar .d:nth-child(3){background:#c9a6ff}
.wds-bar .srch{flex:1;height:38%;border-radius:2cqw;background:#efe7ff;margin:0 2cqw}
.wds-cart-ic{position:relative;width:3.6cqw;aspect-ratio:1;border-radius:.8cqw;background:#2a1a4d;animation:wdsIcPop 4.8s ease-in-out infinite}
.wds-cart-ic s{position:absolute;top:-1.2cqw;right:-1.4cqw;min-width:2.6cqw;height:2.6cqw;border-radius:2cqw;background:#ff7ad9;color:#fff;font:800 1.7cqw/2.6cqw Montserrat,sans-serif;text-align:center}
.wds-cart-ic s::before{content:"0";animation:wdsCount 4.8s steps(1) infinite}
@keyframes wdsCount{0%,30%{content:"0"}31%,55%{content:"1"}56%,80%{content:"2"}81%,100%{content:"3"}}
@keyframes wdsIcPop{0%,30%,36%,55%,61%,80%,86%,100%{transform:scale(1)}33%,58%,83%{transform:scale(1.25)}}
.wds-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw;padding:3.4cqw 4cqw 0}
.wds-p{display:flex!important;flex-direction:column;gap:1cqw;padding:1.4cqw;border-radius:1.8cqw;background:#fff;box-shadow:0 .8cqw 2cqw -1cqw rgba(90,40,160,.35)}
.wds-p em{aspect-ratio:1.15;border-radius:1.2cqw;background:linear-gradient(135deg,#ffd6ef,#e6d6ff)}
.wds-p.p1 em{background:linear-gradient(135deg,#fff1c2,#ffd6e8)}
.wds-p.p2 em{background:linear-gradient(135deg,#d6f0ff,#e6d6ff)}
.wds-p b{height:1cqw;width:70%;border-radius:1cqw;background:#2a1a4d}
.wds-p u{height:2.4cqw;border-radius:2cqw;background:linear-gradient(90deg,#8a2be2,#e0409a);animation:wdsBtn 4.8s ease-in-out infinite}
.wds-p.p1 u{animation-delay:1.2s}.wds-p.p2 u{animation-delay:2.4s}
@keyframes wdsBtn{0%,6%,14%,100%{transform:scale(1);filter:none}9%{transform:scale(.85);filter:brightness(1.3)}}
.wds-cart{position:absolute!important;left:50%;bottom:4%;width:30%;translate:-50% 0;transform-origin:50% 90%;animation:wdsCartBump 1.2s ease-in-out infinite;animation-delay:.6s}
.wds-cart svg{display:block;width:100%;filter:drop-shadow(0 1.2cqw 1.4cqw rgba(90,40,160,.35))}
@keyframes wdsCartBump{0%,60%,100%{transform:scale(1)}72%{transform:scale(1.1,.9)}84%{transform:scale(.96,1.05)}}
/* each product hops in an arc: x moves linearly, y goes up then drops into the cart */
.wds-hop{position:absolute!important;top:30%;width:9%;aspect-ratio:1;opacity:0;animation:wdsHopX 4.8s linear infinite}
.wds-hy{width:100%;height:100%;animation:wdsHopY 4.8s linear infinite}
.wds-hy em{width:100%;height:100%;border-radius:1.2cqw;box-shadow:0 1cqw 2cqw -.6cqw rgba(224,64,154,.8);animation:wdsSpin 4.8s linear infinite}
.wds-hop.h0{left:78%;--tx:-32cqw}.wds-hop.h1{left:45.5%;--tx:0cqw;animation-delay:1.2s}.wds-hop.h2{left:13%;--tx:32cqw;animation-delay:2.4s}
.wds-hop.h1 .wds-hy,.wds-hop.h1 .wds-hy em{animation-delay:1.2s}.wds-hop.h2 .wds-hy,.wds-hop.h2 .wds-hy em{animation-delay:2.4s}
.wds-hop.h0 .wds-hy em{background:linear-gradient(135deg,#ff9ad9,#c9a6ff)}
.wds-hop.h1 .wds-hy em{background:linear-gradient(135deg,#ffd23f,#ff9f43)}
.wds-hop.h2 .wds-hy em{background:linear-gradient(135deg,#7dd3fc,#c9a6ff)}
@keyframes wdsHopX{0%,8%{opacity:0;translate:0 0}10%,24%{opacity:1}26%,100%{opacity:0;translate:var(--tx,0) 0}}
@keyframes wdsHopY{0%,8%{transform:translateY(0);animation-timing-function:ease-out}14%{transform:translateY(-14cqw);animation-timing-function:ease-in}26%,100%{transform:translateY(30cqw)}}
@keyframes wdsSpin{0%,8%{rotate:0deg;scale:1}26%,100%{rotate:220deg;scale:.6}}
/* rocket beside the screen: rumbles, launches on a column of smoke, comes back */
.wds-rocket{position:absolute;right:3%;bottom:4%;width:18%;height:92%}
.wds-rk{position:absolute!important;left:50%;bottom:9%;width:56%;translate:-50% 0;animation:wdsLaunch 6s cubic-bezier(.5,0,.75,0) infinite}
.wds-rk svg{display:block;width:100%;filter:drop-shadow(0 0 2cqw rgba(201,166,255,.6))}
.wds-flame{position:absolute!important;left:50%;top:92%;width:34%;height:30%;translate:-50% 0;border-radius:50% 50% 50% 50%/30% 30% 70% 70%;background:linear-gradient(180deg,#fff7c2,#ffd23f 35%,#ff7ad9 75%,transparent);transform-origin:50% 0;opacity:0;animation:wdsFlame 6s linear infinite}
@keyframes wdsLaunch{0%{transform:translateY(0)}6%,22%{transform:translate(-.3cqw,0)}8%,24%{transform:translate(.3cqw,0)}10%,26%{transform:translate(-.2cqw,0)}28%{transform:translateY(0)}62%{transform:translateY(-130cqw);opacity:1}62.1%{opacity:0;transform:translateY(40cqw)}70%{opacity:0;transform:translateY(40cqw)}78%{opacity:1;transform:translateY(0);animation-timing-function:cubic-bezier(.2,.8,.3,1)}100%{transform:translateY(0)}}
@keyframes wdsFlame{0%,18%{opacity:0;transform:scaleY(.3)}22%{opacity:1;transform:scaleY(.8)}26%{transform:scaleY(.6)}30%,60%{opacity:1;transform:scaleY(1.6)}62%,100%{opacity:0}}
.wds-smoke{position:absolute!important;left:0;right:0;bottom:0;height:30%}
.wds-smoke .pf{position:absolute;bottom:4%;left:50%;width:44%;aspect-ratio:1;margin-left:-22%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9),rgba(233,220,255,.55) 55%,rgba(233,220,255,0) 72%);opacity:0;animation:wdsPuff 6s ease-out infinite}
.wds-smoke .f1{--sx:-90%;animation-delay:.15s}.wds-smoke .f2{--sx:90%;animation-delay:.3s}.wds-smoke .f3{--sx:-150%;animation-delay:.5s}.wds-smoke .f4{--sx:150%;animation-delay:.65s}.wds-smoke .f5{--sx:-40%;animation-delay:.9s}.wds-smoke .f6{--sx:40%;animation-delay:1.1s}
@keyframes wdsPuff{0%,20%{opacity:0;transform:translate(0,0) scale(.3)}26%{opacity:1}55%{opacity:.7;transform:translate(var(--sx,0),-10%) scale(1.8)}75%,100%{opacity:0;transform:translate(calc(var(--sx,0) * 1.4),-30%) scale(2.4)}}
.wds-st{position:absolute!important;color:#ffd23f;font-size:3cqw;animation:wdsTw 3s ease-in-out infinite}
.wds-st.s1{right:6%;top:4%}.wds-st.s2{right:24%;top:18%;color:#ff7ad9;animation-delay:-1s}.wds-st.s3{left:6%;top:4%;color:#c9a6ff;animation-delay:-2s}
@keyframes wdsTw{0%,100%{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
@media(max-width:900px){.hero .wrap:has(.wds){grid-template-columns:1fr}.wds{grid-column:1;grid-row:auto;max-width:520px;justify-self:center}}
@media(prefers-reduced-motion:reduce){.wds *{animation:none!important}.wds-hop{display:none!important}}
/* round buttons on the hero counters, each to its category */
.hero .stat{position:relative}
.stat-go{position:absolute;left:clamp(10px,2vw,28px);top:50%;translate:0 -50%;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .25s,color .25s,transform .25s,box-shadow .25s}
.stat-go:hover,.stat-go:focus-visible{background:linear-gradient(135deg,#c9a6ff,#ff7ad9);color:#1a1040;border-color:transparent;transform:scale(1.08);box-shadow:0 10px 26px -10px rgba(255,122,217,.8)}
@media(max-width:600px){.stat-go{width:40px;height:40px;position:static;translate:none;margin-top:8px}}
@media(min-width:901px){.hero>.wrap:has(.wds){display:grid!important;grid-template-columns:1fr 1fr!important;grid-template-rows:auto auto;align-items:center;column-gap:clamp(30px,4vw,70px)}
.hero>.wrap:has(.wds)>.hero-text{grid-column:1!important;grid-row:1!important}
.hero>.wrap:has(.wds)>.wds{grid-column:2!important;grid-row:1!important}
.hero>.wrap:has(.wds)>.stats{grid-column:1/-1!important;grid-row:2!important}}
.wds-rocket{overflow:hidden;top:0;height:auto!important}
.wds-rocket{overflow:visible;top:auto;height:92%!important}
.wds-rk{animation-name:wdsLaunch2}
@keyframes wdsLaunch2{0%{transform:translateY(0);opacity:1}6%,22%{transform:translate(-.3cqw,0)}8%,24%{transform:translate(.3cqw,0)}10%,26%{transform:translate(-.2cqw,0)}28%{transform:translateY(0);opacity:1}48%{opacity:1}60%{transform:translateY(-95cqw);opacity:0}61%,70%{opacity:0;transform:translateY(30cqw)}80%{opacity:1;transform:translateY(0);animation-timing-function:cubic-bezier(.2,.8,.3,1)}100%{transform:translateY(0);opacity:1}}
/* rocket: always on screen, hovering and turning around itself; the exhaust is moving pink circles */
.wds-rocket{perspective:600px}
.wds-rk{animation:wdsHover 3.2s ease-in-out infinite!important;opacity:1!important}
.wds-rk svg{animation:wdsTurn 4s linear infinite;transform-style:preserve-3d}
@keyframes wdsHover{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-6cqw) rotate(4deg)}}
@keyframes wdsTurn{to{transform:rotateY(360deg)}}
.wds-flame{opacity:1!important;animation:wdsFlick .18s ease-in-out infinite alternate!important}
@keyframes wdsFlick{from{transform:scaleY(1) scaleX(1)}to{transform:scaleY(1.35) scaleX(.85)}}
.wds-smoke{bottom:auto;top:56%;height:44%;overflow:visible}
.wds-smoke .pf{bottom:auto;top:0;width:22%;margin-left:-11%;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffd0f0,#ff7ad9 55%,#c95fd6);box-shadow:0 0 1.6cqw rgba(255,122,217,.7);animation:wdsBubble 2.4s linear infinite!important}
.wds-smoke .f0{--sx:0cqw;animation-delay:0s!important}
.wds-smoke .f1{--sx:-4cqw;animation-delay:-.35s!important}
.wds-smoke .f2{--sx:4cqw;animation-delay:-.7s!important}
.wds-smoke .f3{--sx:-7cqw;animation-delay:-1.05s!important}
.wds-smoke .f4{--sx:7cqw;animation-delay:-1.4s!important}
.wds-smoke .f5{--sx:-2cqw;animation-delay:-1.75s!important}
.wds-smoke .f6{--sx:2cqw;animation-delay:-2.1s!important}
@keyframes wdsBubble{0%{opacity:0;transform:translate(0,0) scale(.3)}12%{opacity:1}100%{opacity:0;transform:translate(var(--sx),24cqw) scale(1.5)}}
.wds-smoke{top:auto;bottom:-6%;height:20%}.wds-smoke .pf{top:0}.wds-rk svg{animation-duration:3s}
.wds-flame{top:64%}.wds-smoke{bottom:2%}
/* category side nav: bigger */
@media(min-width:901px){
.wd-white .cnav{padding:16px 18px!important;gap:6px;border-radius:26px}
.cnav a{padding:12px 8px!important;font-size:20px!important;gap:12px!important}
.cnav a i{width:16px;height:16px}
}
/* products slide left in a loop, fading out at the left edge and coming back in from the right */
.wds-grid{display:block;overflow:hidden;padding:3.4cqw 0 0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.wds-belt{display:flex;gap:2.4cqw;width:max-content;direction:ltr;animation:wdsBelt 14s linear infinite}
.wds-belt .wds-p{width:15cqw;flex:none}
@keyframes wdsBelt{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 1.2cqw))}}
/* rocket: standing still, much bigger, with big pink exhaust circles */
.wds-rocket{right:-6%;bottom:2%;width:30%;height:96%!important;perspective:none}
.wds-rk{animation:none!important;transform:none!important;bottom:22%;width:62%}
.wds-rk svg{animation:none!important;transform:none!important}
.wds-flame{top:64%;width:40%;height:34%}
.wds-smoke{bottom:-4%;height:26%}
.wds-smoke .pf{width:30%;margin-left:-15%;animation-duration:2.6s!important}
.wds-smoke .f1{--sx:-8cqw}.wds-smoke .f2{--sx:8cqw}.wds-smoke .f3{--sx:-13cqw}.wds-smoke .f4{--sx:13cqw}.wds-smoke .f5{--sx:-4cqw}.wds-smoke .f6{--sx:4cqw}
@keyframes wdsBubble{0%{opacity:0;transform:translate(0,0) scale(.35)}12%{opacity:1}100%{opacity:0;transform:translate(var(--sx),30cqw) scale(1.9)}}
@media(prefers-reduced-motion:reduce){.wds-belt{animation:none}}
.wds-grid{direction:ltr}
.hero .wrap:has(.wds) h1{white-space:nowrap}.hero .wrap:has(.wds) h1 em{display:inline!important;white-space:nowrap}
/* chat avatar: a softer, wider shadow; the tooltip in a soft purple */
.bot-btn{box-shadow:0 18px 50px -10px rgba(138,43,226,.45),0 6px 30px rgba(255,122,217,.28)!important;filter:none!important}
.bot-tip{background:linear-gradient(135deg,#efe6ff,#e3d4ff)!important;color:#3a2470!important;border:1px solid rgba(201,166,255,.7)!important;box-shadow:0 14px 40px -12px rgba(138,43,226,.4)!important}
.bot-tip::after,.bot-tip::before{border-color:transparent!important;background:#e9ddff!important}
/* ===== services menu: compact cards, brand-coloured icons that move only on hover, name to the left of the icon ===== */
.svx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.svx{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:18px;background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);color:#fff;transition:background .3s,border-color .3s,transform .3s}
.svx:hover,.svx:focus-visible{background:linear-gradient(150deg,rgba(255,255,255,.17),rgba(255,255,255,.06));border-color:rgba(255,122,217,.55);transform:translateY(-2px)}
.svx b{font-weight:600;font-size:1.05rem;white-space:nowrap}
.svx-ic{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:rgba(201,166,255,.12);box-shadow:inset 0 0 0 1px rgba(201,166,255,.25)}
.svx-ic svg{width:34px;height:34px;overflow:visible}
.svx-ic .o{fill:none;stroke:#c9a6ff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.svx-ic .l{fill:none;stroke:#e9dcff;stroke-width:2.4;stroke-linecap:round}
.svx-ic .p{fill:#ff7ad9}.svx-ic .y{fill:#ffd23f}
.svx-ic .pf{fill:#ff7ad9}.svx-ic .yf{fill:#ffd23f}.svx-ic .lf{fill:#c9a6ff}
.svx-ic .pfa{fill:#ff7ad9;opacity:.85}.svx-ic .yfa{fill:#ffd23f;opacity:.85}.svx-ic .lfa{fill:#c9a6ff;opacity:.85}
.svx-ic svg *{transform-box:fill-box;transform-origin:center}
.svx:hover .mv-scroll,.svx:focus-visible .mv-scroll{animation:svxScroll 1.6s ease-in-out infinite alternate}
@keyframes svxScroll{to{transform:translateY(-6px)}}
.svx:hover .mv-ring,.svx:focus-visible .mv-ring{stroke-dasharray:6 4;animation:svxRing 1.6s linear infinite}
@keyframes svxRing{to{stroke-dashoffset:-20}}
.svx:hover .mv-play,.svx:focus-visible .mv-play{animation:svxPulse .8s ease-in-out infinite alternate}
@keyframes svxPulse{to{transform:scale(1.18)}}
.svx:hover .mv-t1,.svx:hover .mv-t2,.svx:hover .mv-t3,.svx:hover .mv-t4{animation:svxPop 1.2s ease-in-out infinite}
.svx .mv-t2{animation-delay:.15s!important}.svx .mv-t3{animation-delay:.3s!important}.svx .mv-t4{animation-delay:.45s!important}
@keyframes svxPop{0%,60%,100%{transform:scale(1)}30%{transform:scale(1.3)}}
.svx .mv-heart{opacity:0}
.svx:hover .mv-heart,.svx:focus-visible .mv-heart{animation:svxHeart 1.4s ease-out infinite}
@keyframes svxHeart{0%{opacity:0;transform:translateY(4px) scale(.5)}30%{opacity:1}100%{opacity:0;transform:translateY(-22px) scale(1)}}
.svx:hover .mv-spin,.svx:focus-visible .mv-spin{animation:svxSpin 2.4s linear infinite}
@keyframes svxSpin{to{transform:rotate(360deg)}}
.svx:hover .mv-s1,.svx:hover .mv-s2,.svx:hover .mv-s3{animation:svxTw 1.1s ease-in-out infinite}
.svx .mv-s2{animation-delay:.35s!important}.svx .mv-s3{animation-delay:.7s!important}
@keyframes svxTw{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.6);opacity:.5}}
@media(min-width:901px){.dpanel:has(.dp.on .svx-grid){width:min(860px,calc(100vw - 40px))!important;padding:22px 24px!important}}
@media(max-width:900px){.svx-grid{grid-template-columns:1fr 1fr}.svx{padding:10px 12px}.svx-ic{width:44px;height:44px}.svx b{font-size:.95rem}}
@media(prefers-reduced-motion:reduce){.svx *{animation:none!important}}
/* home: "פרויקטים נבחרים" sits on the page background, not on a solid band */
.sec-title{background:transparent!important}
/* line from the services to the first project */
.pl-svg{position:absolute;left:0;z-index:30;pointer-events:none;overflow:visible}
.pl-base{fill:none;stroke:rgba(201,166,255,.18);stroke-width:3;stroke-linecap:round}
.pl-fill{fill:none;stroke:#ff7ad9;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(255,122,217,.6))}
.pl-ball{fill:#ffd23f;filter:drop-shadow(0 0 7px rgba(255,214,60,.95)) drop-shadow(0 0 16px rgba(255,190,40,.55));transition:opacity .3s}
/* WhatsApp centred above the chat avatar; accessibility button at the bottom right */
.bot{align-items:center!important}
.bot-wa{align-self:center!important;margin:0 0 10px!important}
.a11y-btn{left:auto!important;right:18px!important;bottom:18px!important}
.a11y-panel{left:auto!important;right:18px!important;bottom:84px!important}
@media(max-width:700px){.a11y-btn{right:12px!important;bottom:calc(12px + env(safe-area-inset-bottom,0px))!important}.a11y-panel{right:12px!important;bottom:calc(72px + env(safe-area-inset-bottom,0px))!important}}
.pl-svg{transition:opacity .3s}.pl-ball{transition:opacity .25s}
/* WhatsApp sits exactly above the centre of the chat avatar */
.bot{align-items:flex-end!important}
.bot-wa{align-self:flex-end!important;margin:0 0 12px 25px!important}
@media(max-width:560px){.bot-wa{margin-left:8px!important}}
/* services: the three cards start centred (equal space on both sides); the faint base under the projects line is gone */
@media(min-width:1025px){.svs-track{justify-content:safe center}}
.pl-base{stroke:none!important}
/* AUTO 360 (home card + project hero): the dashboard sits straight inside a clear glass tablet, the logo above its corner; nothing moves */
.a3{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(94%,max(240px,calc((100svh - 150px) * 1.56)));aspect-ratio:566/363}
.ph-vis .a3{position:relative;left:auto;top:auto;translate:none;width:100%}
html:not(#a) .a3 img{display:block;position:static;inset:auto;max-width:none;padding:0;transform:none;translate:none;opacity:1;animation:none;will-change:auto}
.a3-glow{position:absolute;inset:18% 4% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(61,123,255,.4),rgba(201,166,255,.18) 60%,transparent 80%);filter:blur(28px);pointer-events:none}
.a3-dev{position:absolute;right:0;bottom:0;width:90%;padding:1.8%;border-radius:clamp(14px,1.6vw,26px);background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.06) 45%,rgba(255,255,255,.16));-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(255,255,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,255,255,.08),0 30px 60px -24px rgba(0,0,0,.7)}
html:not(#a) .a3-dev img{width:100%;height:auto;border-radius:clamp(8px,1vw,16px);object-fit:fill}
html:not(#a) .a3 .a3-logo{position:absolute;left:-2%;top:-5%;width:22%;height:auto;z-index:3;filter:drop-shadow(0 8px 20px rgba(0,0,0,.45))}
/* home card only: a transparent Mini in front of the tablet, turning 360° with the scroll (Safari can't show VP9 alpha, so it gets the still) */
html:not(#a) .a3 .a3-car{position:absolute;inset:auto -9% -6% auto;padding:0;translate:none;width:46%;max-height:none;height:auto;aspect-ratio:3/2;object-fit:contain;z-index:2;pointer-events:none;filter:drop-shadow(0 22px 26px rgba(0,0,0,.55))}
@media(max-width:820px){html:not(#a) .a3 .a3-car{right:-4%;bottom:-8%;width:52%}}
html:not(#a) .pimg .a3 .a3-logo{left:auto;right:-2%}
html:not(#a) .a3 img.a3-car{display:none}
/* scroll room for the turn: the anchor before the next card grows, so the AUTO 360 card stays pinned and fully visible while the car spins
(not margin on the card itself: a sticky box's own margin eats into how long it can stay pinned) */
.cfp-a.a3-hold{height:110vh}
@media(max-width:820px){.cfp-a.a3-hold{height:90vh}}
.a3.no-alpha video.a3-car{display:none}
html:not(#a) .a3.no-alpha img.a3-car{display:block}
@media(min-width:821px){.pimg .a3{left:calc(50% + 4vw)}}
@media(max-width:820px){.pimg .a3{width:min(94%,calc(36svh * 1.56))}}
/* LiaMOR tablet: the coloured reflection under it (rows 784-878 of tablet.webp) is softened */
.lia img.screen{-webkit-mask-image:linear-gradient(#000 0,#000 88.6%,rgba(0,0,0,.38) 90.5%,rgba(0,0,0,.14) 100%);mask-image:linear-gradient(#000 0,#000 88.6%,rgba(0,0,0,.38) 90.5%,rgba(0,0,0,.14) 100%)}
/* project page: a marketing site that scrolls by itself inside a glass browser window (pauses under the mouse) */
.psite{display:grid;justify-items:center;gap:22px;margin-top:10px}
.psite-t{max-width:46em;text-align:center;color:inherit;opacity:.85;font-size:20px;line-height:1.6;margin:0}
.psite-win{width:min(100%,1080px);border-radius:22px;padding:0 10px 10px;background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.06) 45%,rgba(255,255,255,.14));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 40px 80px -30px rgba(0,0,0,.7),0 0 60px -20px rgba(201,166,255,.45)}
.psite-bar{display:flex;align-items:center;gap:8px;height:42px;padding:0 8px;direction:ltr}
.psite-bar i{width:11px;height:11px;border-radius:50%;background:#ff7ad9}.psite-bar i:nth-child(2){background:#ffd23f}.psite-bar i:nth-child(3){background:#c9a6ff}
.psite-bar span{flex:1;max-width:360px;margin:0 auto;height:26px;border-radius:13px;background:rgba(20,8,42,.45);color:rgba(255,255,255,.8);font:500 13px/26px Montserrat,system-ui,sans-serif;text-align:center}
.psite-vp{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:12px;background:#fff;container-type:inline-size}
html:not(#a) .psite-vp img{display:block;width:100%;height:auto;max-width:none;animation:psiteScroll 34s ease-in-out infinite alternate}
.psite-win:hover .psite-vp img{animation-play-state:paused}
@keyframes psiteScroll{0%,6%{transform:translateY(0)}94%,100%{transform:translateY(calc(-100% + 62.5cqw))}}
.psite-go{margin-top:6px}
@media(max-width:700px){.psite-win{padding:0 6px 6px;border-radius:16px}.psite-bar{height:34px}.psite-bar span{font-size:11px;height:22px;line-height:22px}}
@media(prefers-reduced-motion:reduce){html:not(#a) .psite-vp img{animation:none}.psite-vp{overflow-y:auto}}
/* services menu: the original animations (recoloured) on a light tile, still only moving under the mouse */
.svx-ic{background:linear-gradient(145deg,#ffffff,#efe6ff)!important;box-shadow:0 6px 16px -8px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.6)!important}
.svx-lot{display:block;width:52px;height:52px;border-radius:14px;overflow:hidden}
.svx-lot svg{transform:scale(1.45)}
.svx-ic{overflow:hidden}
.svx-lot svg{display:block;width:100%!important;height:100%!important}
.svx-ic .svx-lot svg *{transform-box:view-box!important;transform-origin:0 0!important}
@media(max-width:900px){.svx-lot{width:44px;height:44px}}
/* services menu: the original animations (recoloured) on a light tile, still only moving under the mouse */
.svx-ic{background:linear-gradient(145deg,#ffffff,#efe6ff)!important;box-shadow:0 6px 16px -8px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.6)!important}
.svx-lot{display:block;width:52px;height:52px;border-radius:14px;overflow:hidden}
.svx-lot svg{transform:scale(1.45)}
.svx-ic{overflow:hidden}
.svx-lot svg{display:block;width:100%!important;height:100%!important}
.svx-ic .svx-lot svg *{transform-box:view-box!important;transform-origin:0 0!important}
@media(max-width:900px){.svx-lot{width:44px;height:44px}}
/* ===== phones: hero text first and the picture under it; nothing cut at the sides; wider story bubble ===== */
@media(max-width:900px){
html:not(#a) .hero{min-height:0!important;height:auto!important;display:block!important;padding-bottom:20px!important}
html:not(#a) .hero .wrap{display:flex!important;flex-direction:column!important;align-items:stretch!important}
html:not(#a) .hero-text{order:1;max-width:none!important;translate:none!important}
html:not(#a) .hero .hero-sub,html:not(#a) .hero-sub{white-space:normal!important;font-size:clamp(1.05rem,4.6vw,1.3rem)!important;text-wrap:balance}
html:not(#a) .hero-sub br{display:none}
html:not(#a) .hero-img{order:2;position:relative!important;inset:auto!important;width:100%!important;height:auto!important;aspect-ratio:1.35;margin:22px 0 0!important;z-index:0!important;border-radius:24px;overflow:hidden}
html:not(#a) .hero-img img.hs{object-position:30% 50%!important;scale:1!important;-webkit-mask-image:none!important;mask-image:none!important}
html:not(#a) .hero-img::after{background:linear-gradient(180deg,rgba(14,6,40,0) 60%,rgba(14,6,40,.45))!important}
html:not(#a) .hero-marq{order:3}
html:not(#a) .sav-bubble{max-width:86vw!important;width:max-content!important;min-width:230px}
html:not(#a) .sav-bubble span{white-space:nowrap}
}
/* phones: the story sits higher (just under the header line) with bigger sentences and a bigger character */
@media(max-width:700px){
html:not(#a) .story-stage{justify-content:flex-start!important;padding-top:clamp(112px,16vh,150px)!important;gap:clamp(14px,2.6vh,26px)!important}
html:not(#a) .beat{font-size:clamp(1.55rem,7.2vw,2.1rem)!important;line-height:1.25!important}
html:not(#a) .story-av,html:not(#a) .story-talk .story-av{--s:min(200px,25vh)!important;margin-top:clamp(18px,3vh,30px)!important}
html:not(#a) .sav-bubble{font-size:1.15rem!important}
}
@media(max-width:900px){.svs-stage>.svs-tail{display:none!important}}
/* phones and tablets: the three service cards stack one under the other */
@media(max-width:1024px){
html:not(#a) .svs-track{flex-direction:column!important;align-items:center!important;overflow:visible!important;scroll-snap-type:none!important;gap:calc(var(--badge,64px)/2 + 26px)!important;padding:calc(var(--badge,64px)/2 + 10px) 5vw 30px!important;transform:none!important}
html:not(#a) .svs .srv-card{flex:none!important;width:min(100%,460px)!important;opacity:1!important;filter:none!important}
}
/* phones: bigger main headings */
@media(max-width:700px){
html:not(#a) .sec-title h2,html:not(#a) .about-title h2,html:not(#a) .proc-band h2,html:not(#a) #contact .contact h2,html:not(#a) .pmore-t,html:not(#a) .pch h2{font-size:clamp(2.3rem,10.5vw,3.1rem)!important;line-height:1.1!important}
html:not(#a) .svs-head .svs-h1{font-size:clamp(1.9rem,8.6vw,2.5rem)!important}
html:not(#a) .svs-head .svs-h2{font-size:clamp(2.5rem,11.5vw,3.3rem)!important}
}
/* phones: LiaMOR card scene, bigger logo and the couple lower, beside the tablet's bottom */
@media(max-width:820px){
html:not(#a) .pimg .lia img.logo{width:36%!important;left:47%!important;top:-4%!important}
html:not(#a) .pimg .lia img.couple{top:62%!important}
html:not(#a) .pimg .lia img.gold{top:114%!important}
html:not(#a) .pimg .lia img.gold.b{top:112%!important}
html:not(#a) .pimg .lia{margin-top:6%}
}
/* phones: dining card with a bigger barcode and the plate lower; bigger project titles */
@media(max-width:820px){
html:not(#a) .pimg .dsc .dsc-scan{width:27%!important;left:72%!important;top:10%!important}
html:not(#a) .pimg .dsc img.d-plate{translate:0 16%!important}
html:not(#a) .pinfo h3{font-size:clamp(2rem,9vw,2.6rem)!important;white-space:normal!important}
html:not(#a) .cfp .pimg{margin-bottom:14px}
}
/* phones: the name and the tagline stay beside the logo */
@media(max-width:900px){
html:not(#a) .brand-txt{display:flex!important;flex-direction:column;min-width:0}
html:not(#a) .brand-txt b{font-size:clamp(1rem,4.6vw,1.25rem)!important}
html:not(#a) .brand-txt small{display:block!important;font-size:clamp(.56rem,2.45vw,.72rem)!important;white-space:nowrap}
html:not(#a) .logo.brand{gap:8px;min-width:0}
}
/* burger: three shorter lines, the bottom one ends in a yellow dot; it turns into an X when open */
html:not(#a) .burger .bl{display:grid;gap:6px;width:24px;position:relative}
html:not(#a) .burger .bl i{height:2.4px;transition:transform .45s cubic-bezier(.7,0,.2,1),opacity .3s}
html:not(#a) .burger .bl i:nth-child(3){position:relative;overflow:visible}
html:not(#a) .burger .bl i:nth-child(3)::after{content:"";position:absolute;left:-10px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#ffd23f;box-shadow:0 0 8px rgba(255,210,63,.85);transition:opacity .25s}
html:not(#a) .burger[aria-expanded="true"] .bl i:nth-child(1){transform:translateY(8.4px) rotate(45deg)}
html:not(#a) .burger[aria-expanded="true"] .bl i:nth-child(2){opacity:0;transform:none}
html:not(#a) .burger[aria-expanded="true"] .bl i:nth-child(3){transform:translateY(-8.4px) rotate(-45deg)}
html:not(#a) .burger[aria-expanded="true"] .bl i:nth-child(3)::after{opacity:0}
@media(max-width:400px){html:not(#a) .brand-txt small{font-size:clamp(.5rem,2.25vw,.7rem)!important}}
/* footer accordion (phones) */
@media(max-width:700px){
html:not(#a) footer .facc{border-bottom:1px solid rgba(255,255,255,.12)}
html:not(#a) footer .facc>h4{display:flex;align-items:center;justify-content:space-between;margin:0;padding:16px 0;cursor:pointer;font-size:1.15rem}
html:not(#a) footer .facc>h4::after{content:"";width:9px;height:9px;border-left:2px solid #ff7ad9;border-bottom:2px solid #ff7ad9;transform:rotate(-45deg);transition:transform .3s;margin-inline-start:12px}
html:not(#a) footer .facc.open>h4::after{transform:rotate(135deg)}
html:not(#a) footer .facc>h4~*{display:none}
html:not(#a) footer .facc.open>h4~*{display:block;padding-bottom:14px;animation:faccIn .35s ease}
@keyframes faccIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}
/* phones: bigger story sentences, balanced lines (no single word left alone on a line) */
@media(max-width:700px){
html:not(#a) .beat{font-size:clamp(1.75rem,8.2vw,2.35rem)!important;line-height:1.22!important;text-wrap:balance;padding-inline:4px}
html:not(#a) .beat br{display:none}
html:not(#a) .beat em{display:block;text-wrap:balance}
}
/* phones: once the character has flown down, the services come straight up instead of an empty screen */
@media(max-width:700px){
html:not(#a) .story{margin-bottom:-66vh;margin-bottom:-66svh}
html:not(#a) .svs-stage{padding-top:44px!important}
html:not(#a) #services{position:relative;z-index:3}
}
/* ===== phones: header, floating buttons and the sticky call button ===== */
.m-cta{display:none}
@media(max-width:700px){
html:not(#a) .m-cta{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:18;display:flex;align-items:center;justify-content:center;gap:10px;height:54px;border-radius:30px;background:#ffd23f;color:#14082a;font-weight:800;font-size:1.1rem;text-decoration:none;box-shadow:0 10px 26px -8px rgba(0,0,0,.6),0 0 22px -6px rgba(255,210,63,.75)}
html:not(#a) .m-cta:active{transform:scale(.98)}
html.mm-open .m-cta{opacity:0;pointer-events:none}
html:not(#a) body{padding-bottom:78px}
/* header: no call button, bigger name, tagline on two lines */
html:not(#a) header .tel{display:none!important}
html:not(#a) .brand-txt b{font-size:clamp(1.2rem,5.4vw,1.45rem)!important;line-height:1!important}
html:not(#a) .brand-txt small{white-space:normal!important;max-width:11.2em;font-size:clamp(.66rem,2.9vw,.78rem)!important;line-height:1.18!important;margin-top:3px}
/* burger: thin lines, a shorter bottom line with the yellow dot inside the icon */
html:not(#a) .burger .bl{width:26px;gap:6px}
html:not(#a) .burger .bl i{height:1.6px}
html:not(#a) .burger .bl i:nth-child(3){width:56%;justify-self:start;transition:transform .45s cubic-bezier(.7,0,.2,1),width .3s}
html:not(#a) .burger .bl i:nth-child(3)::after{left:-9px;width:6px;height:6px;margin-top:-3px}
html:not(#a) .burger[aria-expanded="true"] .bl i:nth-child(3){width:100%;transform:translateY(-7.6px) rotate(-45deg)}
html:not(#a) .burger[aria-expanded="true"] .bl i:nth-child(1){transform:translateY(7.6px) rotate(45deg)}
/* chat avatar and WhatsApp share one centre line; both sit above the call button, the accessibility button a little higher */
html:not(#a) .bot{bottom:76px!important}
html:not(#a) .bot-wa{margin-left:18px!important}
html:not(#a) .a11y-btn{bottom:90px!important}
html:not(#a) .a11y-panel{bottom:152px!important}
}
.copy-l::before{content:" · "}
/* phones: footer logo and line centred, padded accordion, the legal links on their own line */
@media(max-width:700px){
html:not(#a) footer .fgrid>div:first-child{text-align:center}
html:not(#a) footer .fgrid>div:first-child .logo{margin-inline:auto}
html:not(#a) footer .fgrid>div:first-child p{margin-inline:auto;max-width:12.5em;text-wrap:balance}
html:not(#a) footer .facc{padding-inline:18px;margin-inline:2px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.04);margin-bottom:10px}
html:not(#a) footer .facc>h4{padding:16px 0}
html:not(#a) footer .copy{text-align:center;line-height:1.8}
html:not(#a) footer .copy .copy-l{display:block;margin-top:4px}
html:not(#a) footer .copy .copy-l::before{content:none}
}
/* the chat container is as tall as its hidden panel: only its buttons (and the open panel) take clicks, so it never blocks the page under it */
html:not(#a) .bot{pointer-events:none}
html:not(#a) .bot>*{pointer-events:auto}
/* phones: tighter footer accordion */
@media(max-width:700px){
html:not(#a) footer .fgrid{gap:10px!important}
html:not(#a) footer .facc{margin-bottom:0}
html:not(#a) footer .facc>h4{padding:13px 0}
html:not(#a) footer .fgrid>div:first-child{margin-bottom:10px}
}
@media(max-width:700px){html:not(#a) footer .facc>h4::after{margin-top:-5px}html:not(#a) footer .facc.open>h4::after{margin-top:4px}}
/* phones: the line through the stacked numbers */
.mspine{display:none}
@media(max-width:900px){
#services .svs-track,.proc-steps{position:relative}
.mspine{display:block;position:absolute;width:3px;margin-left:-1.5px;z-index:0;pointer-events:none;border-radius:2px;background:none}
.mspine .ms-fill{position:absolute;left:0;top:0;width:100%;height:calc(var(--k,0) * 100%);border-radius:2px;background:#ff7ad9;box-shadow:0 0 6px rgba(255,122,217,.5)}
.mspine .ms-ball{position:absolute;left:50%;top:calc(var(--k,0) * 100%);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7c2,#ffd23f 55%,#f0a800);box-shadow:0 0 8px rgba(255,214,60,.95),0 0 18px rgba(255,190,40,.55);opacity:0;transition:opacity .3s}
.mspine.on .ms-ball{opacity:1}
#services .srv-card,.pstep{position:relative;z-index:1}
.pnum2{position:relative;z-index:1}
}
@media(max-width:767px){
html:not(#a) .proc-steps{gap:26px!important}
html:not(#a) .pstep p{text-wrap:balance;max-width:21em;margin-inline:auto}
html:not(#a) .pstep{gap:8px!important}
}
/* the header tagline: one line on desktop, exactly two lines on phones */
.brand-txt .m-br{display:none}
@media(max-width:900px){
html:not(#a) .brand-txt small{white-space:nowrap!important;max-width:none!important}
html:not(#a) .brand-txt .m-br{display:inline}
}
/* phones: logo on the right, menu on the left; hero centred with room above it, a bigger title and a smaller line under it */
@media(max-width:900px){
html:not(#a) .glass-nav>.brand{order:0!important;margin:0!important;position:static!important;translate:none!important;transform:none!important;left:auto!important;right:auto!important}
html:not(#a) .glass-nav>.hd-actions{order:9!important}
html:not(#a) .hero{padding-top:calc(var(--hh,80px) + 34px)!important}
html:not(#a) .hero-text{text-align:center!important;align-items:center}
html:not(#a) .hero-text h1,html:not(#a) .hero-text .hero-sub{margin-inline:auto!important}
html:not(#a) .hero .cta{justify-content:center!important}
html:not(#a) .hero h1{font-size:clamp(2rem,8.9vw,2.6rem)!important;line-height:1.14!important}
html:not(#a) .hero h1 em{font-size:1em!important}
html:not(#a) .hero .hero-sub,html:not(#a) .hero-sub{font-size:clamp(.98rem,4.2vw,1.12rem)!important;line-height:1.5!important;margin-top:16px!important}
}
@media(max-width:900px){html:not(#a) #services .svs-track{padding-top:calc(var(--badge,64px)/2 + 56px)!important}}
/* hero: the moving line that traced the glass logo is removed */
.hero-img svg.hero-mg{display:none!important}
/* ===== hero: the purple stage as the background, the glass logo with the ball floating over it at the left ===== */
html:not(#a) .hero-img{background:#1a0a3a url("hero-stage.webp") center/cover no-repeat!important}
html:not(#a) .hero-img::after{background:linear-gradient(270deg,rgba(14,6,40,.55) 0,rgba(14,6,40,.25) 34%,rgba(14,6,40,0) 60%)!important}
html:not(#a) .hero-img img.hs,html:not(#a) .hero-img img.hs.is-on,html:not(#a) .hero-img.hs-intro img.hs,html:not(#a) .hero-img.hs-intro img.hs.is-on{inset:auto!important;left:1%!important;top:15%!important;width:auto!important;height:68%!important;max-width:58%!important;object-fit:contain!important;object-position:50% 50%!important;scale:1!important;filter:none!important;opacity:1!important;transform-origin:50% 50%!important;
-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 48%,#000 40%,rgba(0,0,0,.65) 62%,rgba(0,0,0,.2) 80%,transparent 94%)!important;mask-image:radial-gradient(ellipse 50% 50% at 50% 48%,#000 40%,rgba(0,0,0,.65) 62%,rgba(0,0,0,.2) 80%,transparent 94%)!important;
translate:none!important;animation:none!important}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media(prefers-reduced-motion:reduce){html:not(#a) .hero-img img.hs{animation:none!important}}
@media(max-width:900px){
html:not(#a) .hero-img img.hs,html:not(#a) .hero-img img.hs.is-on{left:0!important;right:0!important;top:2%!important;height:96%!important;max-width:none!important;margin:0 auto!important}
}
@media(min-width:901px){html:not(#a) .hero-img{-webkit-mask-image:linear-gradient(#000 82%,transparent 100%);mask-image:linear-gradient(#000 82%,transparent 100%)}}
/* home AUTO 360 card: dashboard up and to the left, a much bigger Mini at the lower right with the logo above it, and two glowing white arrows orbiting it (360) */
html:not(#a) .pimg .a3 .a3-dev{left:-4%;top:-8%;right:auto;bottom:auto;width:78%}
html:not(#a) .pimg .a3 .a3-car{inset:auto -14% -6% auto;width:70%;z-index:3}
html:not(#a) .pimg .a3 .a3-logo{left:auto;right:10%;top:22%;width:24%;z-index:5}
.a3-orbit{position:absolute;right:-10%;bottom:-8%;width:66%;height:auto;overflow:visible;pointer-events:none}
.a3-orbit.back{z-index:2}.a3-orbit.front{z-index:4}
.a3-orbit path{fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px rgba(255,255,255,.9)) drop-shadow(0 0 16px rgba(201,166,255,.9))}
.a3-orbit .ah{stroke-width:3.6}
.a3-orbit{animation:a3Glow 2.4s ease-in-out infinite}
@keyframes a3Glow{0%,100%{opacity:.75}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.a3-orbit{animation:none}}
/* the float lives on a wrapper: the picture itself is pinned by older !important transforms */
.hero-float{position:absolute;inset:0;display:block;animation:heroFloat 6s ease-in-out infinite;will-change:transform}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@media(prefers-reduced-motion:reduce){.hero-float{animation:none}}
/* home AUTO 360 card: the Mini stands inside the ring of arrows; the logo sits in a white circle with a blue border on the dashboard's top corner */
html:not(#a) .pimg .a3 .a3-car{bottom:-11%}
html:not(#a) .pimg .a3-orbit{bottom:-5%}
html:not(#a) .pimg .a3 .a3-logo{left:64%;right:auto;top:-17%;width:17%;aspect-ratio:1;height:auto;object-fit:contain;padding:2.2%;box-sizing:border-box;border-radius:50%;background:#fff;border:3px solid #2557e6;box-shadow:0 10px 26px -8px rgba(0,0,0,.6),0 0 0 6px rgba(37,87,230,.18);filter:none;z-index:6}
html:not(#a) .pimg .a3 .a3-dev{top:0%}
html:not(#a) .pimg .a3 .a3-logo{top:-8%;left:63%;width:16%}
/* project hero: the same AUTO 360 layout as the home card (dashboard up-left, big Mini in the arrow ring, logo badge on the dashboard corner) */
html:not(#a) .ph-vis .a3 .a3-dev{left:-4%;top:0%;right:auto;bottom:auto;width:78%}
html:not(#a) .ph-vis .a3 .a3-car{inset:auto -14% -11% auto;width:70%;z-index:3}
html:not(#a) .ph-vis .a3-orbit{right:-10%;bottom:-5%;width:66%}
html:not(#a) .ph-vis .a3 .a3-logo{left:63%;right:auto;top:-8%;width:16%;aspect-ratio:1;height:auto;object-fit:contain;padding:2.2%;box-sizing:border-box;border-radius:50%;background:#fff;border:3px solid #2557e6;box-shadow:0 10px 26px -8px rgba(0,0,0,.6),0 0 0 6px rgba(37,87,230,.18);filter:none;z-index:6}
html:not(#a) .ph-vis .a3{margin-top:6%}
@media(max-width:900px){html:not(#a) .ph-vis .a3 .a3-dev{left:0;width:76%}html:not(#a) .ph-vis .a3{margin-top:10%}}
@media(max-width:900px){html:not(#a) .ph-vis .a3 .a3-car{right:-4%;width:62%}html:not(#a) .ph-vis .a3-orbit{right:-2%;width:58%}}
/* ===== hero: the header logo extruded in 3D on the stage; its height breathes and the gold ball rolls through the channel ===== */
@property --lgd{syntax:'';inherits:true;initial-value:2px}
html:not(#a) #hero.has-lg3d .hero-img img.hs{opacity:0!important;visibility:hidden}
.lg3d{position:absolute;left:4%;top:50%;width:min(36vw,520px);aspect-ratio:1;translate:0 -50%;perspective:1600px;pointer-events:none}
.lg3d-scene{position:absolute;left:50%;top:50%;width:378px;height:380px;margin:-190px 0 0 -189px;transform-style:preserve-3d;scale:calc(min(36vw,520px) / 378px * .78);transform:rotateX(54deg) rotateZ(-28deg);animation:lg3dSway 12s ease-in-out infinite,lg3dGrow 7s ease-in-out infinite}
@keyframes lg3dSway{0%,100%{transform:rotateX(54deg) rotateZ(-28deg)}50%{transform:rotateX(50deg) rotateZ(-16deg)}}
@keyframes lg3dGrow{0%,100%{--lgd:1.1px}45%,60%{--lgd:3.4px}}
.lg3d-l{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:translateZ(calc(var(--i) * var(--lgd)))}
.lg3d-l path{fill:#5b2aa8}
.lg3d-l:nth-child(odd) path{fill:#6431b5}
.lg3d-l path.b{fill:#a5309a}.lg3d-l:nth-child(odd) path.b{fill:#b1389f}
.lg3d-l:first-child{filter:drop-shadow(0 30px 26px rgba(0,0,0,.55))}
.lg3d-l.top path.a{fill:url(#lg3a)}.lg3d-l.top path.b{fill:url(#lg3b)}
.lg3d-l.top{filter:drop-shadow(0 0 14px rgba(255,170,240,.45))}
.lg3d-rest,.lg3d-ball{position:absolute;left:0;top:0;offset-rotate:0deg;offset-anchor:50% 50%}
.lg3d-rest{width:2px;height:2px;offset-distance:0%}
.lg3d-ball{width:52px;height:52px;transform-style:preserve-3d;transform:translateZ(26px);animation:lg3dRoll 9s ease-in-out infinite}
.lg3d-ball i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fffbe0 0,#ffe24a 22%,#ffc400 58%,#c98a00 100%);box-shadow:0 0 18px rgba(255,214,60,.6);transform:rotateZ(28deg) rotateX(-54deg)}
@keyframes lg3dRoll{0%,12%{offset-distance:0%}50%,62%{offset-distance:100%}100%{offset-distance:0%}}
@media(prefers-reduced-motion:reduce){.lg3d-scene,.lg3d-ball{animation:none!important}.lg3d-scene{--lgd:2.4px}}
@media(max-width:900px){.lg3d{left:50%;width:min(78vw,420px);translate:-50% -50%}.lg3d-scene{scale:calc(min(78vw,420px) / 378px * .62)}}
/* project buttons ("לצפייה בפרויקט"): a rounded glass button with a light running round its edge */
@property --ra{syntax:'';inherits:false;initial-value:0deg}
html:not(#a) .pinfo a.more{position:relative;display:inline-flex;align-items:center;gap:8px;padding:13px 26px!important;border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.04));color:#fff!important;text-decoration:none!important;border:0!important;border-bottom:0!important;box-shadow:0 10px 26px -12px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.14);isolation:isolate;transition:background .3s,transform .3s}
html:not(#a) .pinfo a.more::after{display:none!important}
html:not(#a) .pinfo a.more::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--ra),transparent 0 62%,rgba(201,166,255,.6) 72%,#fff 80%,#ff7ad9 86%,transparent 94%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:moreSpin 3.2s linear infinite;pointer-events:none;filter:drop-shadow(0 0 4px rgba(255,122,217,.8))}
@keyframes moreSpin{to{--ra:360deg}}
html:not(#a) .pinfo a.more:hover{background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.08));transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){html:not(#a) .pinfo a.more::before{animation:none}}
/* 3D logo, round 2: glass surfaces (see-through, light rims), a smaller ball that keeps clear of the walls, a bigger logo */
.lg3d{width:min(46vw,660px)}
.lg3d-scene{scale:calc(min(46vw,660px) / 378px * .84)}
.lg3d-l path,.lg3d-l:nth-child(odd) path{fill:rgba(190,150,255,.07);stroke:rgba(255,255,255,.16);stroke-width:.5}
.lg3d-l path.b,.lg3d-l:nth-child(odd) path.b{fill:rgba(255,130,220,.07)}
.lg3d-l:first-child path{fill:rgba(120,60,200,.22);stroke:rgba(255,255,255,.3)}
.lg3d-l:first-child{filter:drop-shadow(0 26px 30px rgba(20,0,60,.55))}
.lg3d-l.top path.a,.lg3d-l.top path.b{fill-opacity:.5;stroke:rgba(255,255,255,.85);stroke-width:1.1}
.lg3d-l.top{filter:drop-shadow(0 0 10px rgba(255,190,245,.55)) drop-shadow(0 0 2px rgba(255,255,255,.7))}
.lg3d-ball{width:28px;height:28px;transform:translateZ(14px)}
.lg3d-ball i{box-shadow:0 0 14px rgba(255,214,60,.7)}
@media(max-width:900px){.lg3d{width:min(86vw,460px)}.lg3d-scene{scale:calc(min(86vw,460px) / 378px * .7)}}
/* 3D logo, round 3: white rim on the bottom face too; taller; grows and settles at one angle, turns to a second angle and does it again, then back */
@property --lgx{syntax:'';inherits:true;initial-value:54deg}
@property --lgz{syntax:'';inherits:true;initial-value:-28deg}
.lg3d{left:11%}
.lg3d-scene{transform:rotateX(var(--lgx)) rotateZ(var(--lgz));animation:lg3dSeq 16s ease-in-out infinite!important}
@keyframes lg3dSeq{
0%{--lgx:54deg;--lgz:-28deg;--lgd:1.2px}
18%,24%{--lgx:54deg;--lgz:-28deg;--lgd:5.2px}
42%{--lgx:54deg;--lgz:-28deg;--lgd:1.2px}
52%{--lgx:62deg;--lgz:24deg;--lgd:1.2px}
68%,74%{--lgx:62deg;--lgz:24deg;--lgd:5.2px}
90%{--lgx:62deg;--lgz:24deg;--lgd:1.2px}
100%{--lgx:54deg;--lgz:-28deg;--lgd:1.2px}}
.lg3d-ball i{transform:rotateZ(calc(var(--lgz) * -1)) rotateX(calc(var(--lgx) * -1))!important}
.lg3d-l:first-child path,.lg3d-l:first-child path.b{stroke:rgba(255,255,255,.85)!important;stroke-width:1.1!important}
.lg3d-l:first-child{filter:drop-shadow(0 0 2px rgba(255,255,255,.6)) drop-shadow(0 26px 30px rgba(20,0,60,.55))!important}
@media(prefers-reduced-motion:reduce){.lg3d-scene{animation:none!important;--lgd:3px}}
@media(max-width:900px){.lg3d{left:50%}}
/* 3D logo intro: first the white outline of the shape draws itself (top and bottom faces), then the glass fills in, the walls appear and the movement starts */
.lg3d.intro .lg3d-l path{stroke-dasharray:1 1}
.lg3d.intro .lg3d-l.top path,.lg3d.intro .lg3d-l:first-child path{animation:lg3dDraw 2.2s cubic-bezier(.6,0,.3,1) both}
.lg3d.intro .lg3d-l.top path.b,.lg3d.intro .lg3d-l:first-child path.b{animation-delay:.25s}
@keyframes lg3dDraw{0%{stroke-dashoffset:1;fill-opacity:0}72%{stroke-dashoffset:0;fill-opacity:0}}
.lg3d.intro .lg3d-l:not(.top):not(:first-child){animation:lg3dWalls 2.8s ease both}
@keyframes lg3dWalls{0%,75%{opacity:0}100%{opacity:1}}
.lg3d.intro .lg3d-scene{animation-delay:2.8s!important}
.lg3d.intro .lg3d-ball{opacity:0;animation:lg3dRoll 9s ease-in-out 2.8s infinite,lg3dIn .5s ease 2.6s forwards}
@keyframes lg3dIn{to{opacity:1}}
.lg3d.wait,.lg3d.wait *{animation-play-state:paused!important}
/* the ball's fade-in sits on the ball itself, not on its 3D holder: opacity under 1 on the holder flattens it (that made the ball look squashed) */
.lg3d.intro .lg3d-ball{opacity:1!important;animation:lg3dRoll 9s ease-in-out 2.8s infinite!important}
.lg3d.intro .lg3d-ball i{opacity:0;animation:lg3dIn .5s ease 2.6s forwards}
/* home: TRIGO card on black, the phone picture with feathered edges */
html:not(#a) .cfp .pimg img[src*="trigo-phone"]{object-fit:contain!important;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,rgba(0,0,0,.5) 82%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,rgba(0,0,0,.5) 82%,transparent 100%)}
/* 3D logo, round 4: thinner white rims, a slightly bigger ball on a path that keeps clear of the walls, and the ball runs on the same 16s clock so the angle changes while it is still on its way */
.lg3d-l.top path.a,.lg3d-l.top path.b,.lg3d-l:first-child path,.lg3d-l:first-child path.b{stroke-width:.55!important}
.lg3d-ball{width:32px;height:32px;transform:translateZ(16px)}
.lg3d-ball,.lg3d.intro .lg3d-ball{animation:lg3dRoll2 16s ease-in-out infinite!important}
.lg3d.intro .lg3d-ball{animation-delay:2.8s!important}
@keyframes lg3dRoll2{0%,6%{offset-distance:0%}62%,68%{offset-distance:100%}97%,100%{offset-distance:0%}}
/* hero 3D ball: a warm glow, and it fades away as soon as the page scrolls */
.lg3d-ball i{box-shadow:0 0 10px 2px rgba(255,214,60,.9),0 0 26px 8px rgba(255,190,40,.55),0 0 52px 16px rgba(255,170,40,.25)!important;transition:opacity .35s ease}
.lg3d.ball-off .lg3d-ball i{opacity:0!important;animation:none!important}
/* 3D logo, round 5: three states (two angles and a stretched, rectangle-like proportion), each one grows and settles; the angle changes just before the ball reaches the top or the bottom end. Ball: one leg per 8s window, logo: one state per 8s window */
@property --lgsx{syntax:'';inherits:true;initial-value:1}
@property --lgsy{syntax:'';inherits:true;initial-value:1}
.lg3d-scene{--lgd:1.2px;transform:rotateX(var(--lgx)) rotateZ(var(--lgz)) scale(var(--lgsx),var(--lgsy));animation:lg3dSeq3 24s linear infinite!important}
.lg3d.intro .lg3d-scene{animation-delay:2.8s!important}
@keyframes lg3dSeq3{
0.00%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
2.67%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
11.67%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:5.2px}
15.00%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:5.2px}
22.67%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
23.33%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
28.67%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
33.33%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
36.00%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
45.00%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:5.2px}
48.33%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:5.2px}
56.00%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
56.67%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
62.00%{--lgx:50deg;--lgz:-6deg;--lgsx:1.42;--lgsy:0.72;--lgd:1.2px}
66.67%{--lgx:50deg;--lgz:-6deg;--lgsx:1.42;--lgsy:0.72;--lgd:1.2px}
69.33%{--lgx:50deg;--lgz:-6deg;--lgsx:1.42;--lgsy:0.72;--lgd:1.2px}
78.33%{--lgx:50deg;--lgz:-6deg;--lgsx:1.42;--lgsy:0.72;--lgd:5.2px}
81.67%{--lgx:50deg;--lgz:-6deg;--lgsx:1.42;--lgsy:0.72;--lgd:5.2px}
89.33%{--lgx:50deg;--lgz:-6deg;--lgsx:1.42;--lgsy:0.72;--lgd:1.2px}
90.00%{--lgx:50deg;--lgz:-6deg;--lgsx:1.42;--lgsy:0.72;--lgd:1.2px}
95.33%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
100.00%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
}
.lg3d-scene{animation-timing-function:ease-in-out!important}
.lg3d-ball i{transform:scale(calc(1 / var(--lgsx)),calc(1 / var(--lgsy))) rotateZ(calc(var(--lgz) * -1)) rotateX(calc(var(--lgx) * -1))!important}
.lg3d-ball,.lg3d.intro .lg3d-ball{animation:lg3dRoll3 16s ease-in-out infinite!important}
.lg3d.intro .lg3d-ball{animation-delay:2.8s!important}
@keyframes lg3dRoll3{0%,3%{offset-distance:0%}46%,53%{offset-distance:100%}96%,100%{offset-distance:0%}}
@media(prefers-reduced-motion:reduce){.lg3d-scene,.lg3d-ball{animation:none!important}}
/* 3D logo: the ball back at its earlier pace (about 9s per way); 10s windows keep the angle change just before each end. Scrolling back up brings the ball straight back */
.lg3d-scene{animation:lg3dSeq4 30s ease-in-out infinite!important}
.lg3d.intro .lg3d-scene{animation-delay:2.8s!important}
@keyframes lg3dSeq4{
0.00%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
2.67%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
11.67%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:5.2px}
15.00%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:5.2px}
22.67%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
23.33%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
28.67%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
33.33%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
36.00%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
45.00%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:5.2px}
48.33%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:5.2px}
56.00%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
56.67%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
62.00%{--lgx:50deg;--lgz:-6deg;--lgsx:1.42;--lgsy:0.72;--lgd:1.2px}
66.67%{--lgx:50deg;--lgz:-6deg;--lgsx:1.42;--lgsy:0.72;--lgd:1.2px}
69.33%{--lgx:50deg;--lgz:-6deg;--lgsx:1.42;--lgsy:0.72;--lgd:1.2px}
78.33%{--lgx:50deg;--lgz:-6deg;--lgsx:1.42;--lgsy:0.72;--lgd:5.2px}
81.67%{--lgx:50deg;--lgz:-6deg;--lgsx:1.42;--lgsy:0.72;--lgd:5.2px}
89.33%{--lgx:50deg;--lgz:-6deg;--lgsx:1.42;--lgsy:0.72;--lgd:1.2px}
90.00%{--lgx:50deg;--lgz:-6deg;--lgsx:1.42;--lgsy:0.72;--lgd:1.2px}
95.33%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
100.00%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
}
.lg3d-ball,.lg3d.intro .lg3d-ball{animation:lg3dRoll4 20s ease-in-out infinite!important}
.lg3d.intro .lg3d-ball{animation-delay:2.8s!important}
@keyframes lg3dRoll4{0%,3%{offset-distance:0%}48%,53%{offset-distance:100%}98%,100%{offset-distance:0%}}
.lg3d.ball-off .lg3d-ball i{animation:lg3dIn .5s ease 2.6s forwards!important}
.lg3d.ball-off .lg3d-ball i{opacity:0!important}
@media(prefers-reduced-motion:reduce){.lg3d-scene,.lg3d-ball{animation:none!important}}
/* the ball and the logo's movement wait for the outline intro to finish (started by hero3d.js adding .go), so nothing rolls while the outline draws */
.lg3d.intro:not(.go) .lg3d-scene,.lg3d.intro:not(.go) .lg3d-ball{animation-name:none!important}
.lg3d.intro.go .lg3d-scene,.lg3d.intro.go .lg3d-ball{animation-delay:0s!important}
/* TRIGO picture is a clean cut-out now: no feathering needed */
html:not(#a) .cfp .pimg img[src*="trigo-phone"]{-webkit-mask-image:none!important;mask-image:none!important;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
html:not(#a) .cfp .pimg img[src*="avodata-phones"]{object-fit:contain!important;scale:1;filter:drop-shadow(0 26px 36px rgba(0,0,0,.55))}
/* 3D logo: back to two angles (no stretched rectangle); the ball starts rolling while the outline is still drawing */
.lg3d-scene,.lg3d.intro.go .lg3d-scene{animation:lg3dSeq5 20s ease-in-out infinite!important}
@keyframes lg3dSeq5{
0.00%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
4.00%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
17.50%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:5.2px}
22.50%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:5.2px}
34.00%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
35.00%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
43.00%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
50.00%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
54.00%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
67.50%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:5.2px}
72.50%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:5.2px}
84.00%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
85.00%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
93.00%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
100.00%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
}
.lg3d.intro:not(.go) .lg3d-scene{animation-name:none!important}
.lg3d.intro.ball-go .lg3d-ball{animation-name:lg3dRoll4!important;animation-delay:0s!important}
.lg3d.intro .lg3d-ball i{animation:none!important;opacity:0;transition:opacity .5s ease}
.lg3d.intro.ball-go .lg3d-ball i{opacity:1}
.lg3d.ball-off .lg3d-ball i{opacity:0!important}
/* the scene starts 1.7s after the ball, so the angle change is timed a bit earlier to finish before the ball reaches each end */
.lg3d-scene,.lg3d.intro.go .lg3d-scene{animation-name:lg3dSeq6!important}
.lg3d.intro:not(.go) .lg3d-scene{animation-name:none!important}
@keyframes lg3dSeq6{
0.00%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
2.50%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
12.50%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:5.2px}
16.00%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:5.2px}
25.00%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
27.50%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
36.00%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
50.00%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
52.50%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
62.50%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:5.2px}
66.00%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:5.2px}
75.00%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
77.50%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
86.00%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
100.00%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px}
}
/* ===== 3D logo, round 6: a faster ball, and a third state where the two parts join: a light runs round the joined outline, the ball rides the seam on top, a blue-purple grid wave spreads under it, then the parts separate and the grid fades ===== */
@property --j{syntax:'';inherits:true;initial-value:0}
@property --gw{syntax:'';inherits:true;initial-value:0}
@property --go{syntax:'';inherits:true;initial-value:0}
.lg3d-scene,.lg3d.intro.go .lg3d-scene{animation:lg3dSeq7 18s ease-in-out infinite!important}
.lg3d.intro:not(.go) .lg3d-scene{animation-name:none!important}
@keyframes lg3dSeq7{
0.00%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px;--j:0;--gw:0;--go:0}
1.67%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px;--j:0;--gw:0;--go:0}
6.00%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:5.2px;--j:0;--gw:0;--go:0}
7.33%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:5.2px;--j:0;--gw:0;--go:0}
12.00%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px;--j:0;--gw:0;--go:0}
13.33%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px;--j:0;--gw:0;--go:0}
19.33%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.2px;--j:0;--gw:0;--go:0}
35.00%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.2px;--j:0;--gw:0;--go:0}
39.33%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:5.2px;--j:0;--gw:0;--go:0}
40.67%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:5.2px;--j:0;--gw:0;--go:0}
45.33%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.2px;--j:0;--gw:0;--go:0}
46.67%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.2px;--j:0;--gw:0;--go:0}
52.67%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px;--j:0;--gw:0;--go:0}
68.00%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:2.4px;--j:0;--gw:0;--go:0}
73.33%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:2.4px;--j:1;--gw:0.05;--go:1}
85.00%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:2.4px;--j:1;--gw:1;--go:1}
90.00%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:2.4px;--j:1;--gw:1;--go:0}
95.33%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px;--j:0;--gw:0;--go:0}
100%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.2px;--j:0;--gw:0;--go:0}
}
.lg3d-ball,.lg3d.intro.ball-go .lg3d-ball{animation:lg3dRoll5 12s ease-in-out infinite!important;animation-delay:0s!important}
.lg3d.intro:not(.ball-go) .lg3d-ball{animation-name:none!important}
@keyframes lg3dRoll5{0%,3%{offset-distance:0%}47%,53%{offset-distance:100%}97%,100%{offset-distance:0%}}
.lg3d-ball{transform:translateZ(calc(16px + var(--j) * 15 * var(--lgd)))}
.lg3d-l path.a{transform:translate(calc(var(--j) * 7.5px),calc(var(--j) * -7.5px))}
.lg3d-l path.b{transform:translate(calc(var(--j) * -7.5px),calc(var(--j) * 7.5px))}
.lg3d-l.top{filter:drop-shadow(0 0 calc(2px + var(--j) * 10px) rgba(255,190,245,calc(.55 + var(--j) * .4))) drop-shadow(0 0 2px rgba(255,255,255,.7))!important}
html:not(#a) .lg3d .lg3d-l.top path.g{fill:none!important;stroke:#fff!important;stroke-width:1.8!important;stroke-linecap:round;stroke-dasharray:.12 .88!important;opacity:var(--j);animation:lg3dRun 1.4s linear infinite!important;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #c9a6ff)}
@keyframes lg3dRun{from{stroke-dashoffset:0}to{stroke-dashoffset:-1}}
.lg3d-grid{position:absolute;inset:-45%;transform:translateZ(-1px);pointer-events:none;opacity:var(--go);
background:repeating-linear-gradient(0deg,rgba(110,150,255,.75) 0 1.2px,transparent 1.2px 24px),repeating-linear-gradient(90deg,rgba(200,120,255,.75) 0 1.2px,transparent 1.2px 24px);
-webkit-mask-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,.18) 0,rgba(0,0,0,.18) calc(var(--gw) * 60% - 9%),#000 calc(var(--gw) * 60% - 2%),transparent calc(var(--gw) * 60% + 3%));mask-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,.18) 0,rgba(0,0,0,.18) calc(var(--gw) * 60% - 9%),#000 calc(var(--gw) * 60% - 2%),transparent calc(var(--gw) * 60% + 3%));filter:drop-shadow(0 0 4px rgba(150,120,255,.9))}
@media(prefers-reduced-motion:reduce){.lg3d-grid,.lg3d-l.top path.g{display:none}}
/* project cards (desktop): the text column sits further left, towards the picture */
@media(min-width:821px){html:not(#a) .cfp .pinfo{translate:-5vw 0}}
/* services cards: dark purple, white text, and the same light running round the edge as the project buttons */
html:not(#a) .svs .srv-card{background:linear-gradient(150deg,#2a1257,#1a0a3a 60%,#221047)!important;border:0!important;color:#fff;box-shadow:0 24px 50px -24px rgba(0,0,0,.8),inset 0 0 0 1px rgba(201,166,255,.18)!important;isolation:isolate}
html:not(#a) .svs .srv-card h3,html:not(#a) .svs .srv-card h3 *{color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important}
html:not(#a) .svs .srv-card p{color:rgba(255,255,255,.88)!important}
html:not(#a) .svs .srv-card::after{content:""!important;position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--ra),transparent 0 62%,rgba(201,166,255,.6) 72%,#fff 80%,#ff7ad9 86%,transparent 94%)!important;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:moreSpin 4.5s linear infinite;pointer-events:none;opacity:1!important;filter:drop-shadow(0 0 5px rgba(255,122,217,.8));z-index:2}
html:not(#a) .svs .srv-card:nth-child(2)::after{animation-delay:-1.5s}html:not(#a) .svs .srv-card:nth-child(3)::after{animation-delay:-3s}
@media(prefers-reduced-motion:reduce){html:not(#a) .svs .srv-card::after{animation:none}}
html:not(#a) .svs .srv-card p,html:not(#a) .svs .srv-card p *{color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:.92!important}
/* 3D logo, round 7: one smooth, faster loop (4s per part, no pauses), the logo and the ball start together during the outline draw, every change finishes well before the ball reaches an end; the grid fades out completely; white rim on the bottom face again */
.lg3d-scene,.lg3d.intro.go .lg3d-scene{animation:lg3dSeq8 12s ease-in-out infinite!important;animation-delay:0s!important}
.lg3d.intro:not(.go) .lg3d-scene{animation-name:none!important}
@keyframes lg3dSeq8{
0.00%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--gw:0;--go:0}
9.33%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:5.2px;--j:0;--gw:0;--go:0}
16.67%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.6px;--j:0;--gw:0;--go:0}
26.00%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--gw:0;--go:0}
42.67%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:5.2px;--j:0;--gw:0;--go:0}
50.00%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.6px;--j:0;--gw:0;--go:0}
59.33%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--gw:0;--go:0}
68.33%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:2.4px;--j:0;--gw:0;--go:0}
75.00%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:2.4px;--j:1;--gw:0.1;--go:1}
83.33%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:2.4px;--j:1;--gw:1;--go:1}
87.33%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:2.4px;--j:1;--gw:1;--go:0}
94.00%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--gw:0;--go:0}
100%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--gw:0;--go:0}
}
.lg3d-ball,.lg3d.intro.ball-go .lg3d-ball{animation:lg3dRoll6 8s ease-in-out infinite!important;animation-delay:0s!important}
.lg3d.intro:not(.ball-go) .lg3d-ball{animation-name:none!important}
@keyframes lg3dRoll6{0%,4%{offset-distance:0%}46%,54%{offset-distance:100%}96%,100%{offset-distance:0%}}
.lg3d-grid{visibility:visible}
.lg3d-l.bot path,.lg3d-l.bot path.b{stroke:rgba(255,255,255,.85)!important;stroke-width:.55!important;fill:rgba(120,60,200,.22)!important}
.lg3d-l.bot{filter:drop-shadow(0 0 2px rgba(255,255,255,.6)) drop-shadow(0 26px 30px rgba(20,0,60,.55))!important}
.lg3d.intro .lg3d-l.bot path{animation:lg3dDraw 2.2s cubic-bezier(.6,0,.3,1) both}
.lg3d.intro .lg3d-l.bot path.b{animation-delay:.25s}
/* intro: both parts draw their outline together, then the glass fill of the top, the bottom and all the walls appears at the same moment */
.lg3d.intro .lg3d-l.top path.b,.lg3d.intro .lg3d-l.bot path.b{animation-delay:0s!important}
.lg3d.intro .lg3d-l.bot{animation:none!important}
.lg3d.intro .lg3d-l:not(.top):not(.bot){animation:lg3dWalls2 2.2s ease both!important}
@keyframes lg3dWalls2{0%,72%{opacity:0}100%{opacity:1}}
/* 3D logo, round 8: the join is its own 8s part: first the glowing lines run round the outline, then the two parts close into one shape, the ball rides on top and the grid wave spreads; then it all reverses. Heights stay constant during the join */
@property --gl{syntax:'';inherits:true;initial-value:0}
@property --lift{syntax:'';inherits:true;initial-value:0}
.lg3d-scene,.lg3d.intro.go .lg3d-scene{animation:lg3dSeq9 16s ease-in-out infinite!important;animation-delay:0s!important}
.lg3d.intro:not(.go) .lg3d-scene{animation-name:none!important}
@keyframes lg3dSeq9{
0%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--gl:0;--lift:0;--gw:0;--go:0}
7%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:5.2px;--j:0;--gl:0;--lift:0;--gw:0;--go:0}
12.5%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.6px;--j:0;--gl:0;--lift:0;--gw:0;--go:0}
19.5%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--gl:0;--lift:0;--gw:0;--go:0}
32%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:5.2px;--j:0;--gl:0;--lift:0;--gw:0;--go:0}
37.5%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.6px;--j:0;--gl:0;--lift:0;--gw:0;--go:0}
44.5%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--gl:0;--lift:0;--gw:0;--go:0}
50%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:2.2px;--j:0;--gl:0;--lift:0;--gw:0;--go:0}
53%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:2.2px;--j:0;--gl:0;--lift:0;--gw:0;--go:0}
58%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:2.2px;--j:0;--gl:1;--lift:0;--gw:0;--go:0}
66%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:2.2px;--j:1;--gl:1;--lift:0;--gw:0;--go:0}
68%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:2.2px;--j:1;--gl:1;--lift:0;--gw:0;--go:0}
71%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:2.2px;--j:1;--gl:1;--lift:1;--gw:0.06;--go:1}
84%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:2.2px;--j:1;--gl:1;--lift:1;--gw:1;--go:1}
89%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:2.2px;--j:1;--gl:1;--lift:1;--gw:1;--go:0}
92%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:2.2px;--j:1;--gl:0.6;--lift:0;--gw:0;--go:0}
97%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--gl:0;--lift:0;--gw:0;--go:0}
100%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--gl:0;--lift:0;--gw:0;--go:0}
}
.lg3d-ball{transform:translateZ(calc(16px + var(--lift) * 15 * var(--lgd)))!important}
.lg3d-l path.a{transform:translate(calc(var(--j) * 5.5px),calc(var(--j) * -5.5px))}
.lg3d-l path.b{transform:translate(calc(var(--j) * -5.5px),calc(var(--j) * 5.5px))}
html:not(#a) .lg3d .lg3d-l.top path.g{opacity:var(--gl)!important}
.lg3d-l.top{filter:drop-shadow(0 0 calc(2px + var(--gl) * 10px) rgba(255,190,245,calc(.55 + var(--gl) * .4))) drop-shadow(0 0 2px rgba(255,255,255,.7))!important}
.lg3d-mirror{transform:scaleY(-1);opacity:.5;pointer-events:none}
@media(max-width:700px){.lg3d-mirror{display:none}}
/* the old glass-logo photo is never shown (it flashed for a moment on refresh before the 3D logo was built) */
html:not(#a) .hero-img img.hs{visibility:hidden!important;opacity:0!important}
/* 3D logo, round 9: the third part turns the logo to face the front like the header logo, a short run of light round its outline, then the grid wave; then back to the first angle */
.lg3d-scene,.lg3d.intro.go .lg3d-scene{animation:lg3dSeq10 16s ease-in-out infinite!important;animation-delay:0s!important}
.lg3d.intro:not(.go) .lg3d-scene{animation-name:none!important}
@keyframes lg3dSeq10{
0%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0}
7%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:5.2px;--j:0;--lift:0;--gl:0;--gw:0;--go:0}
12.5%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0}
19.5%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0}
32%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:5.2px;--j:0;--lift:0;--gl:0;--gw:0;--go:0}
37.5%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0}
44.5%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0}
50%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0}
57%{--lgx:0deg;--lgz:0deg;--lgsx:.8;--lgsy:.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0}
59%{--lgx:0deg;--lgz:0deg;--lgsx:.8;--lgsy:.8;--lgd:1.6px;--j:0;--lift:0;--gl:1;--gw:0;--go:0}
64%{--lgx:0deg;--lgz:0deg;--lgsx:.8;--lgsy:.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0.06;--go:1}
76%{--lgx:0deg;--lgz:0deg;--lgsx:.8;--lgsy:.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:1;--go:1}
81%{--lgx:0deg;--lgz:0deg;--lgsx:.8;--lgsy:.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:1;--go:0}
83%{--lgx:0deg;--lgz:0deg;--lgsx:.8;--lgsy:.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0}
93%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0}
100%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0}
}
/* the reflection fades in and out with the logo's intro instead of popping */
.lg3d-mirror{transition:opacity .6s ease}
.lg3d-mirror.wait,.lg3d-mirror.intro:not(.go){opacity:0!important}
/* hero picture: a dark purple shade from under the header, fading to clear further down */
html:not(#a) .hero-img::after{background:linear-gradient(180deg,#14082a 0,rgba(20,8,42,.78) 10%,rgba(20,8,42,.35) 22%,rgba(20,8,42,0) 36%),linear-gradient(270deg,rgba(14,6,40,.55) 0,rgba(14,6,40,.25) 34%,rgba(14,6,40,0) 60%)!important}
/* 3D logo colours as in the header logo: each part runs lavender to pink along its own width (not one lavender part and one pink part); in the front-facing part the glass turns opaque gradually and clears again on the way back */
@property --op{syntax:'';inherits:true;initial-value:0}
.lg3d-scene,.lg3d.intro.go .lg3d-scene{animation:lg3dSeq11 16s ease-in-out infinite!important;animation-delay:0s!important}
.lg3d.intro:not(.go) .lg3d-scene{animation-name:none!important}
@keyframes lg3dSeq11{
0%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--op:0}
7%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:5.2px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--op:0}
12.5%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--op:0}
19.5%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--op:0}
32%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:5.2px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--op:0}
37.5%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--op:0}
44.5%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--op:0}
50%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--op:0}
57%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--op:0.35}
61%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:1;--gw:0;--go:0;--op:1}
65%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0.06;--go:1;--op:1}
76%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:1;--go:1;--op:1}
81%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:1;--go:0;--op:1}
84%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--op:0.8}
93%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--op:0}
100%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--op:0}
}
html:not(#a) .lg3d .lg3d-l path.a:not(.g){fill:url(#lg3a)!important;fill-opacity:calc(.09 + var(--op) * .5)!important}
html:not(#a) .lg3d .lg3d-l path.b:not(.g){fill:url(#lg3b)!important;fill-opacity:calc(.09 + var(--op) * .5)!important}
html:not(#a) .lg3d .lg3d-l.bot path.a,html:not(#a) .lg3d .lg3d-l.bot path.b{fill-opacity:calc(.25 + var(--op) * .75)!important}
html:not(#a) .lg3d .lg3d-l.top path.a:not(.g),html:not(#a) .lg3d .lg3d-l.top path.b:not(.g){fill-opacity:calc(.55 + var(--op) * .45)!important}
/* grid wave, round 2: bigger and a second earlier; it clears from the centre outwards, gradually and broken up into rays, instead of fading all at once */
@property --gi{syntax:'';inherits:true;initial-value:0}
.lg3d-scene,.lg3d.intro.go .lg3d-scene{animation:lg3dSeq12 16s ease-in-out infinite!important;animation-delay:0s!important}
.lg3d.intro:not(.go) .lg3d-scene{animation-name:none!important}
@keyframes lg3dSeq12{
0%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
7%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:5.2px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
12.5%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
19.5%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
32%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:5.2px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
37.5%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
44.5%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
50%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
57%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0.35}
58.5%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0.03;--go:1;--gi:0;--op:1}
59.5%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:1;--gw:0.12;--go:1;--gi:0;--op:1}
64%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0.6;--go:1;--gi:0;--op:1}
70%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:1;--go:1;--gi:0;--op:1}
72%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:1;--go:1;--gi:0;--op:1}
87%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:1;--go:1;--gi:1;--op:1}
88%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:1;--go:0;--gi:1;--op:1}
90%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0.8}
96%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
100%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
}
html:not(#a) .lg3d-grid{inset:-85%;opacity:var(--go);background:repeating-linear-gradient(0deg,rgba(110,150,255,.75) 0 1.3px,transparent 1.3px 30px),repeating-linear-gradient(90deg,rgba(200,120,255,.75) 0 1.3px,transparent 1.3px 30px);
-webkit-mask-image:radial-gradient(circle at 50% 50%,transparent calc(var(--gi) * 72% - 2%),rgba(0,0,0,.35) calc(var(--gi) * 72% + 7%),#000 calc(var(--gi) * 72% + 16%),#000 calc(var(--gw) * 68% - 5%),transparent calc(var(--gw) * 68% + 1%)),repeating-conic-gradient(from calc(var(--gi) * 120deg),#000 0 7deg,rgba(0,0,0,calc(1 - var(--gi) * 1.6)) 7deg 13deg,rgba(0,0,0,calc(1 - var(--gi) * .7)) 13deg 19deg);-webkit-mask-composite:source-in;
mask-image:radial-gradient(circle at 50% 50%,transparent calc(var(--gi) * 72% - 2%),rgba(0,0,0,.35) calc(var(--gi) * 72% + 7%),#000 calc(var(--gi) * 72% + 16%),#000 calc(var(--gw) * 68% - 5%),transparent calc(var(--gw) * 68% + 1%)),repeating-conic-gradient(from calc(var(--gi) * 120deg),#000 0 7deg,rgba(0,0,0,calc(1 - var(--gi) * 1.6)) 7deg 13deg,rgba(0,0,0,calc(1 - var(--gi) * .7)) 13deg 19deg);mask-composite:intersect}
/* second angle: the growth reads as going down there, so the whole logo is lifted by as much as it grows, keeping its base in place and the growth going up */
@property --up{syntax:'';inherits:true;initial-value:0}
.lg3d-scene,.lg3d.intro.go .lg3d-scene{animation:lg3dSeq12 16s ease-in-out infinite,lg3dUp 16s linear infinite!important;animation-delay:0s!important}
.lg3d.intro:not(.go) .lg3d-scene{animation-name:none!important}
@keyframes lg3dUp{0%,14%{--up:0}16%,42%{--up:1}44%,100%{--up:0}}
.lg3d-scene{transform:translateY(calc((var(--lgd) - 1.4px) * var(--up) * -11)) rotateX(var(--lgx)) rotateZ(var(--lgz)) scale(var(--lgsx),var(--lgsy))!important}
/* grid wave back to its earlier size and ring shape; it now fades in and out slowly (about 2s in, 2s out) */
.lg3d-scene,.lg3d.intro.go .lg3d-scene{animation:lg3dSeq13 16s ease-in-out infinite,lg3dUp 16s linear infinite!important;animation-delay:0s!important}
.lg3d.intro:not(.go) .lg3d-scene{animation-name:none!important}
@keyframes lg3dSeq13{
0%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
7%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:5.2px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
12.5%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
19.5%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
32%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:5.2px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
37.5%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
44.5%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
50%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
57%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0.35}
58.5%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0.04;--go:0;--gi:0;--op:1}
59.5%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:1;--gw:0.12;--go:0.25;--gi:0;--op:1}
64%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0.6;--go:0.8;--gi:0;--op:1}
70%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:1;--go:1;--gi:0;--op:1}
74%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:1;--go:1;--gi:0;--op:1}
87%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:1;--go:0;--gi:0;--op:1}
89%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:1;--go:0;--gi:0;--op:1}
91%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0.8}
97%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
100%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
}
html:not(#a) .lg3d-grid{inset:-45%;opacity:var(--go);background:repeating-linear-gradient(0deg,rgba(110,150,255,.75) 0 1.2px,transparent 1.2px 24px),repeating-linear-gradient(90deg,rgba(200,120,255,.75) 0 1.2px,transparent 1.2px 24px);-webkit-mask-composite:source-over;mask-composite:add;
-webkit-mask-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,.18) 0,rgba(0,0,0,.18) calc(var(--gw) * 60% - 9%),#000 calc(var(--gw) * 60% - 2%),transparent calc(var(--gw) * 60% + 3%));mask-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,.18) 0,rgba(0,0,0,.18) calc(var(--gw) * 60% - 9%),#000 calc(var(--gw) * 60% - 2%),transparent calc(var(--gw) * 60% + 3%))}
/* apps menu: a list of names on the right, a big picture on the left that changes with the hovered name */
.mx{display:grid;grid-template-columns:minmax(220px,.8fr) 1.4fr;gap:22px;align-items:stretch}
.mx-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.mx-i{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:14px;color:rgba(255,255,255,.78);text-decoration:none;font-size:1.08rem;font-weight:500;transition:background .25s,color .25s,padding .25s}
.mx-i i{font-style:normal;opacity:0;transform:translateX(6px);transition:opacity .25s,transform .25s;color:#ff7ad9}
.mx-i.on,.mx-i:focus-visible{background:rgba(255,255,255,.1);color:#fff;padding-inline-start:20px}
.mx-i.on span{background:linear-gradient(90deg,#c9a6ff,#ff7ad9);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.mx-i.on i{opacity:1;transform:none}
.mx-pv{position:relative;min-height:340px;border-radius:22px;overflow:hidden;background:radial-gradient(circle at 50% 40%,rgba(201,166,255,.22),rgba(20,8,42,.6) 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.mx-pv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .45s ease,transform .7s ease}
.mx-pv img.fit{object-fit:contain;padding:18px;box-sizing:border-box}
.mx-pv img.on{opacity:1;transform:none}
@media(min-width:901px){.dpanel:has(.dp.on .mx){width:min(980px,calc(100vw - 40px))!important}}
@media(max-width:900px){.mx{grid-template-columns:1fr}.mx-pv{display:none}.mx-i{font-size:1.15rem}}
/* smaller chat tooltip ("היי, אפשר לעזור?") and smaller chat option chips */
html:not(#a) .bot-tip{font-size:15px!important;padding:6px 12px!important;line-height:1.3!important}
html:not(#a) .bot-chips{gap:6px!important;padding:4px 12px 8px!important}
html:not(#a) .bot-chips button{font-size:14px!important;padding:4px 11px!important;line-height:1.3!important}
/* apps menu: a little tighter so all names fit */
.mx-i{padding:7px 14px}
.mx-pv{min-height:300px}
/* front part, round 3: a light runs along the letter S (the channel), the grid spreads, and the moment the ball reaches the top the grid clears in a wave from the centre outwards; then the loop starts again */
.lg3d-scene,.lg3d.intro.go .lg3d-scene{animation:lg3dSeq14 16s ease-in-out infinite,lg3dUp 16s linear infinite!important;animation-delay:0s!important}
.lg3d.intro:not(.go) .lg3d-scene{animation-name:none!important}
@keyframes lg3dSeq14{
0%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
7%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:5.2px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
12.5%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
19.5%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
32%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:5.2px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
37.5%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
44.5%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
50%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
57%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0.35}
59%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:1;--gw:0.08;--go:0.3;--gi:0;--op:1}
64%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0.4;--gw:0.65;--go:1;--gi:0;--op:1}
68%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:1;--go:1;--gi:0;--op:1}
73%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:1;--go:1;--gi:0;--op:1}
78%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:1;--go:1;--gi:1;--op:1}
78.5%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:1}
80%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0.85}
90%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
100%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
}
html:not(#a) .lg3d-grid{-webkit-mask-image:radial-gradient(circle at 50% 50%,transparent calc(var(--gi) * 64% - 3%),rgba(0,0,0,.18) calc(var(--gi) * 64% + 1%),rgba(0,0,0,.18) calc(var(--gw) * 60% - 9%),#000 calc(var(--gw) * 60% - 2%),transparent calc(var(--gw) * 60% + 3%))!important;mask-image:radial-gradient(circle at 50% 50%,transparent calc(var(--gi) * 64% - 3%),rgba(0,0,0,.18) calc(var(--gi) * 64% + 1%),rgba(0,0,0,.18) calc(var(--gw) * 60% - 9%),#000 calc(var(--gw) * 60% - 2%),transparent calc(var(--gw) * 60% + 3%))!important}
html:not(#a) .lg3d .lg3d-l.top path.g{opacity:calc(var(--gl) * .3)!important}
html:not(#a) .lg3d .lg3d-l.top path.sline{fill:none!important;stroke:#fff!important;stroke-linecap:round;stroke-width:5!important;opacity:calc(var(--gl) * .35);filter:blur(3px) drop-shadow(0 0 6px #ff7ad9)}
html:not(#a) .lg3d .lg3d-l.top path.sline.run{stroke-width:3!important;stroke-dasharray:.3 .7!important;opacity:var(--gl);filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #c9a6ff);animation:lg3dRun 1.1s linear infinite!important}
html:not(#a) .lg3d .lg3d-l:not(.top) path.sline{display:none}
/* front part, round 3: a light runs along the letter S (the channel), the grid spreads, and the moment the ball reaches the top the grid clears in a wave from the centre outwards; then the loop starts again */
.lg3d-scene,.lg3d.intro.go .lg3d-scene{animation:lg3dSeq14 16s ease-in-out infinite,lg3dUp 16s linear infinite!important;animation-delay:0s!important}
.lg3d.intro:not(.go) .lg3d-scene{animation-name:none!important}
@keyframes lg3dSeq14{
0%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
7%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:5.2px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
12.5%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
19.5%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
32%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:5.2px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
37.5%{--lgx:62deg;--lgz:24deg;--lgsx:1;--lgsy:1;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
44.5%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
50%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
57%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0.35}
59%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:1;--gw:0.08;--go:0.3;--gi:0;--op:1}
64%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0.4;--gw:0.65;--go:1;--gi:0;--op:1}
66%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:1;--go:1;--gi:0;--op:1}
68%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:1;--go:.85;--gi:.3;--op:1}
71.5%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:1;--go:0;--gi:1;--op:1}
72.5%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:1}
75%{--lgx:0deg;--lgz:0deg;--lgsx:0.8;--lgsy:0.8;--lgd:1.6px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0.85}
90%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
100%{--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--j:0;--lift:0;--gl:0;--gw:0;--go:0;--gi:0;--op:0}
}
html:not(#a) .lg3d-grid{-webkit-mask-image:radial-gradient(circle at 50% 50%,transparent calc(var(--gi) * 64% - 3%),rgba(0,0,0,.18) calc(var(--gi) * 64% + 1%),rgba(0,0,0,.18) calc(var(--gw) * 60% - 9%),#000 calc(var(--gw) * 60% - 2%),transparent calc(var(--gw) * 60% + 3%))!important;mask-image:radial-gradient(circle at 50% 50%,transparent calc(var(--gi) * 64% - 3%),rgba(0,0,0,.18) calc(var(--gi) * 64% + 1%),rgba(0,0,0,.18) calc(var(--gw) * 60% - 9%),#000 calc(var(--gw) * 60% - 2%),transparent calc(var(--gw) * 60% + 3%))!important}
html:not(#a) .lg3d .lg3d-l.top path.g{opacity:calc(var(--gl) * .3)!important}
html:not(#a) .lg3d .lg3d-l.top path.sline{fill:none!important;stroke:#fff!important;stroke-linecap:round;stroke-width:5!important;stroke-dasharray:none!important;opacity:calc(var(--gl) * .35);filter:blur(3px) drop-shadow(0 0 6px #ff7ad9);animation:none!important}
html:not(#a) .lg3d .lg3d-l.top path.sline.run{stroke-width:3!important;stroke-dasharray:.3 .7!important;opacity:var(--gl);filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #c9a6ff);animation:lg3dRun 1.1s linear infinite!important}
/* second angle, round 2: the top face stays where it is and only the underside grows downward (no lift of the whole logo), so the ball in the channel stays in view */
.lg3d-scene{transform:rotateX(var(--lgx)) rotateZ(var(--lgz)) scale(var(--lgsx),var(--lgsy))!important}
.lg3d-l{transform:translateZ(calc((var(--i) - 15 * var(--up)) * var(--lgd)))!important}
/* the ball rides at the middle height of the logo's walls (it was at a fixed low height, so in perspective it slid over the walls); a touch smaller so it keeps clear of them */
.lg3d-ball{width:28px!important;height:28px!important;transform:translateZ(calc((7.5 - 15 * var(--up)) * var(--lgd)))!important}
/* intro: only the white outline at first, no colour; the colour fades in once the outline is drawn */
html:not(#a) .lg3d.intro:not(.filled) .lg3d-l path:not(.g):not(.sline){fill-opacity:0!important}
html:not(#a) .lg3d.intro:not(.filled) .lg3d-l:not(.top):not(.bot){opacity:0!important}
html:not(#a) .lg3d .lg3d-l path{transition:fill-opacity .6s ease}
html:not(#a) .lg3d .lg3d-l{transition:opacity .6s ease}
/* services: a fourth card with the other services as small links */
.srv-more .srv-more-ic{width:clamp(100px,9.5vw,150px);aspect-ratio:1;display:grid;place-items:center}
.srv-more .srv-more-ic svg{width:62%;height:62%;filter:drop-shadow(0 0 12px rgba(255,122,217,.5))}
.srv-chips{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.srv-chips a{display:inline-block;padding:6px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.28);color:#fff;text-decoration:none;font-size:15px;transition:background .25s,border-color .25s}
.srv-chips a:hover,.srv-chips a:focus-visible{background:rgba(255,122,217,.22);border-color:#ff7ad9}
html:not(#a) .svs .srv-card:nth-child(4)::after{animation-delay:-2.2s}
html:not(#a) .srv-more .srv-more-ic svg{width:72px!important;height:72px!important;max-width:none!important}
/* mobile icon (apps): the screen tiles pop in turn, all the time on the services card, on hover in the menu */
.srv-mob{width:clamp(100px,9.5vw,150px);aspect-ratio:1;display:grid;place-items:center;margin:0 auto 10px}
html:not(#a) .srv-mob svg{width:78%;height:78%;filter:drop-shadow(0 10px 18px rgba(138,43,226,.45))}
.mob-ic .t{transform-box:fill-box;transform-origin:center}
.srv-mob .mob-ic .t,.svx:hover .mob-ic .t,.svx:focus-visible .mob-ic .t{animation:mobPop 2.4s ease-in-out infinite}
.mob-ic .t2{animation-delay:.2s!important}.mob-ic .t3{animation-delay:.4s!important}.mob-ic .t4{animation-delay:.6s!important}.mob-ic .t5{animation-delay:.8s!important}
@keyframes mobPop{0%,40%,100%{transform:scale(1);opacity:1}20%{transform:scale(1.25);opacity:.75}}
.svx-ic .mob-ic{width:40px;height:40px}
@media(prefers-reduced-motion:reduce){.mob-ic .t{animation:none!important}}
html:not(#a) .srv-mob svg{width:104px!important;height:104px!important;max-width:none!important}
/* scrollbars (page, chat and panels) in the heading colours: a lavender to pink thumb on a dark purple track */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#14082a}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#c9a6ff,#ff7ad9);border-radius:10px;border:2px solid #14082a}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#d9bcff,#ff95e2)}
::-webkit-scrollbar-button{display:none;width:0;height:0}
.bot-log::-webkit-scrollbar{width:6px}
.bot-log::-webkit-scrollbar-track{background:transparent}
.bot-log::-webkit-scrollbar-thumb{border:0}
@supports not selector(::-webkit-scrollbar){html,.bot-log{scrollbar-color:#e08ae6 #14082a;scrollbar-width:thin}}
/* AUTO 360: bigger logo badge (home card and project hero) */
html:not(#a) .pimg .a3 .a3-logo,html:not(#a) .ph-vis .a3 .a3-logo{width:22%!important;left:60%!important;top:-12%!important}
/* menu buttons ("לכל הפרויקטים", "מערכות מורכבות"): the same glass button with a light running round it as the project buttons */
html:not(#a) .mm-btns .mm-btn{position:relative;display:inline-flex;align-items:center;gap:8px;padding:12px 24px!important;border-radius:16px!important;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.04))!important;color:#fff!important;border:0!important;box-shadow:0 10px 26px -12px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.14)!important;isolation:isolate;text-decoration:none;transition:background .3s,transform .3s}
html:not(#a) .mm-btns .mm-btn::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--ra),transparent 0 62%,rgba(201,166,255,.6) 72%,#fff 80%,#ff7ad9 86%,transparent 94%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:moreSpin 3.2s linear infinite;pointer-events:none;filter:drop-shadow(0 0 4px rgba(255,122,217,.8))}
html:not(#a) .mm-btns .mm-btn.ghost::before{animation-delay:-1.6s}
html:not(#a) .mm-btns .mm-btn:hover{background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.08))!important;transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){html:not(#a) .mm-btns .mm-btn::before{animation:none}}
/* desktop too: the empty tail of the story (after the character has flown to the chat) is covered by the services sliding up over it, so there is no long empty screen in either direction */
@media(min-width:701px){html:not(#a) .story{margin-bottom:-100vh;margin-bottom:-100svh}html:not(#a) #services{position:relative;z-index:3}}
/* apps menu: one button, on the left under the picture */
.mx+.mm-btns{justify-content:flex-end!important}
/* services menu: the services in one column on the right, a project picture on the left */
.svx-wrap{display:grid;grid-template-columns:minmax(260px,.9fr) 1.3fr;gap:20px;align-items:stretch}
html:not(#a) .svx-wrap .svx-grid{grid-template-columns:1fr!important;gap:8px}
.svx-pv{position:relative;min-height:320px;border-radius:22px;overflow:hidden;background:radial-gradient(circle at 50% 40%,rgba(201,166,255,.22),rgba(20,8,42,.6) 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.svx-pv a{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .45s ease}
.svx-pv a.on{opacity:1;pointer-events:auto}
.svx-pv img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform .7s ease}
.svx-pv a.on img{transform:none}
.svx-pv img[src*="trigo-phone"],.svx-pv img[src*="dining-scene"],.svx-pv img[src*="liamor-tablet"]{object-fit:contain;padding:16px;box-sizing:border-box}
.svx-pv span{position:absolute;right:14px;bottom:12px;padding:6px 14px;border-radius:99px;background:rgba(20,8,42,.75);color:#fff;font-weight:600;font-size:15px}
@media(min-width:901px){.dpanel:has(.dp.on .svx-wrap){width:min(900px,calc(100vw - 40px))!important}}
@media(max-width:900px){.svx-wrap{grid-template-columns:1fr}.svx-pv{display:none}html:not(#a) .svx-wrap .svx-grid{grid-template-columns:1fr 1fr!important}}
/* header: smaller logo so it keeps clear of the bar's edges */
@media(min-width:901px){html:not(#a) header .logo.brand img{height:40px!important}}
/* header phone: just a yellow circle with the phone icon; on hover it opens to "התקשרו 054-9216799" */
@media(min-width:701px){
html:not(#a) header .tel{display:inline-flex!important;align-items:center;gap:0;height:48px;min-width:48px;padding:0 12px!important;border-radius:99px!important;background:#ffd23f!important;color:#14082a!important;overflow:hidden;white-space:nowrap;box-shadow:0 8px 22px -8px rgba(255,210,63,.7);transition:gap .35s ease,padding .35s ease,box-shadow .3s!important;text-decoration:none}
html:not(#a) header .tel svg{width:22px;height:22px;flex:none}
html:not(#a) header .tel span{display:inline-block;max-width:0;opacity:0;overflow:hidden;font-weight:800;font-size:16px;transition:max-width .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
html:not(#a) header .tel span::before{content:"התקשרו ";font-weight:600}
html:not(#a) header .tel:hover,html:not(#a) header .tel:focus-visible{gap:10px;padding:0 20px!important;box-shadow:0 10px 30px -8px rgba(255,210,63,.95)}
html:not(#a) header .tel:hover span,html:not(#a) header .tel:focus-visible span{max-width:240px;opacity:1}
}
/* story progress bars */
.story-prog{position:absolute;left:clamp(18px,3vw,52px);top:50%;translate:0 -50%;display:flex;flex-direction:column;gap:10px;opacity:0;transition:opacity .4s ease;pointer-events:none;z-index:3}
.story-prog.show{opacity:1}
.story-prog i{position:relative;display:block;width:4px;height:clamp(34px,5.5vh,56px);border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden;transition:width .3s ease}
.story-prog i b{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,#c9a6ff,#ff7ad9);transform-origin:top;transform:scaleY(0)}
.story-prog i.on{width:6px;box-shadow:0 0 10px rgba(255,122,217,.6)}
@media(max-width:700px){.story-prog{left:10px;gap:7px}.story-prog i{height:26px;width:3px}.story-prog i.on{width:4px}}
/* the bubble "בואו נדבר" button: smaller */
html:not(#a) .sav-bubble .sav-cta{font-size:15px!important;padding:7px 16px!important;min-height:0!important;gap:6px!important;align-self:flex-start}
html:not(#a) .sav-bubble .sav-cta svg{width:16px;height:16px}
/* header: smaller name; the phone circle sits as far from the bar's left edge as from its top and bottom */
@media(min-width:901px){html:not(#a) .brand-txt b{font-size:1.45rem!important}}
@media(min-width:701px){html:not(#a) header .glass-nav{padding-left:7px!important}}
/* story progress: small pink dashes */
html:not(#a) .story-prog{gap:7px}
html:not(#a) .story-prog i{height:16px;width:3px;background:rgba(255,122,217,.25)}
html:not(#a) .story-prog i b{background:#ff7ad9}
html:not(#a) .story-prog i.on{width:4px;box-shadow:0 0 8px rgba(255,122,217,.7)}
@media(max-width:700px){html:not(#a) .story-prog i{height:12px}}
/* chat header status line ("מחובר · נענה בקרוב"): smaller */
html:not(#a) .bot-head b small{font-size:13px!important;line-height:1.3!important;opacity:.85}
/* header phone, round 2: a smaller circle that never moves; on hover the yellow pill slides open to the right over the bar (the circle keeps its place, so nothing jumps under the mouse) */
@media(min-width:701px){
html:not(#a) header .tel{position:relative;width:40px!important;min-width:40px!important;height:40px!important;padding:0!important;gap:0!important;justify-content:center;overflow:visible!important;translate:none!important;box-shadow:0 6px 16px -6px rgba(255,210,63,.7)!important;z-index:2}
html:not(#a) header .tel svg{position:relative;z-index:2;width:18px;height:18px}
html:not(#a) header .tel span{position:absolute;left:0;top:0;height:40px;max-width:none!important;opacity:1!important;display:flex;align-items:center;padding:0 16px 0 44px;border-radius:99px;background:#ffd23f;color:#14082a;font-size:15px;white-space:nowrap;direction:rtl;z-index:1;clip-path:inset(0 calc(100% - 40px) 0 0 round 99px);transition:clip-path .45s cubic-bezier(.2,.8,.2,1)!important;box-shadow:0 8px 22px -8px rgba(255,210,63,.8)}
html:not(#a) header .tel:hover span,html:not(#a) header .tel:focus-visible span{clip-path:inset(0 0 0 0 round 99px)}
html:not(#a) header .tel:hover,html:not(#a) header .tel:focus-visible{padding:0!important;gap:0!important}
html:not(#a) header .glass-nav{padding-left:11px!important}
}
@media(min-width:701px){html:not(#a) header .tel span::before{margin-left:6px}}
/* the services come up right after the line from the left has reached the middle */
@media(min-width:701px){html:not(#a) .story{margin-bottom:-115vh;margin-bottom:-115svh}}
/* the progress dashes sit just left of the character */
html:not(#a) .story-av .story-prog{left:auto;right:calc(100% + 34px);top:50%}
html:not(#a) .story-av{overflow:visible}
@media(max-width:700px){html:not(#a) .story-av .story-prog{right:calc(100% + 16px)}}
/* header brand: the icon at the far right, the Hebrew name and the line right-aligned beside it */
html:not(#a) header .logo.brand{direction:rtl!important;flex-direction:row!important;gap:10px}
html:not(#a) .brand-txt{align-items:flex-start!important;text-align:right!important;direction:rtl}
html:not(#a) .brand-txt b{font-family:'Rubik',Arial,sans-serif!important;font-weight:800!important;letter-spacing:0!important}
@media(min-width:701px){html:not(#a) header .glass-nav{padding-right:12px!important}}
html:not(#a) header .logo.brand>img{order:0!important}
html:not(#a) header .logo.brand>.brand-txt{order:1!important}
/* story progress: a horizontal row of small pink dashes under the character */
html:not(#a) .story-av .story-prog{flex-direction:row;left:50%;right:auto;top:calc(100% + 26px);translate:-50% 0;gap:8px;direction:rtl}
html:not(#a) .story-av .story-prog i{width:22px!important;height:3px!important}
html:not(#a) .story-av .story-prog i b{transform-origin:right;transform:scaleX(0)}
html:not(#a) .story-av .story-prog i.on{height:4px!important;width:22px!important}
@media(max-width:700px){html:not(#a) .story-av .story-prog{top:calc(100% + 16px)}html:not(#a) .story-av .story-prog i{width:16px!important}}
html:not(#a) .story-av .story-prog{top:calc(100% + 44px)!important}
.story.av-wait .story-av{opacity:0!important;transition:none!important}
.lg3d-scene{--lgx:54deg;--lgz:-28deg}
/* ===== phones, round N ===== */
@media(max-width:900px){
/* burger: three equal lines, the yellow dot the same weight as a line, sitting just left of the bottom one */
html:not(#a) .burger .bl{width:22px!important;gap:6px!important;position:relative}
html:not(#a) .burger .bl i,html:not(#a) .burger .bl i:nth-child(3){width:100%!important;height:2px!important;justify-self:stretch!important}
html:not(#a) .burger .bl i:nth-child(3)::after{left:-9px!important;width:5px!important;height:5px!important;margin-top:-2.5px!important}
/* the header bar is solid enough that the page's lines don't show through the name */
html:not(#a) header .glass-nav{background:linear-gradient(135deg,rgba(40,18,84,.94),rgba(22,10,50,.94))!important}
}
@media(max-width:700px){
/* sentences higher; the dashes sit between the character and the bubble */
html:not(#a) .story-stage{padding-top:clamp(86px,12vh,118px)!important}
html:not(#a) .story-av .story-prog{top:calc(100% + 14px)!important}
html:not(#a) .sav-bubble{top:calc(100% + 40px)!important}
/* bubble: one centred line of text and the button centred under it */
html:not(#a) .sav-bubble{align-items:center!important;text-align:center!important;max-width:92vw!important}
html:not(#a) .sav-bubble span{white-space:nowrap!important}
html:not(#a) .sav-bubble span br{display:none}
html:not(#a) .sav-bubble span b{margin-left:4px}
html:not(#a) .sav-bubble .sav-cta{align-self:center!important}
}
@media(max-width:700px){html:not(#a) .sav-bubble{font-size:15px!important;padding:12px 16px!important;max-width:80vw!important}}
/* ===== animation page hero: a glass video/motion editor in the site colours ===== */
.mo{position:relative;width:100%;aspect-ratio:1.25;container-type:inline-size}
.mo *{box-sizing:border-box}
.mo b,.mo i,.mo s,.mo u{display:block;font-style:normal;text-decoration:none}
.mo-glow{position:absolute;inset:10% 6% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(201,166,255,.35),rgba(255,122,217,.16) 55%,transparent 75%);filter:blur(24px)}
.mo-win{position:absolute;left:4%;top:6%;width:79%;padding:1.6cqw;border-radius:3cqw;background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.05) 45%,rgba(255,255,255,.12));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4cqw 8cqw -3cqw rgba(0,0,0,.7)}
.mo-bar{display:flex!important;align-items:center;gap:1.2cqw;height:5cqw;padding:0 1cqw;direction:ltr}
.mo-bar i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:#ff7ad9}.mo-bar i:nth-child(2){background:#ffd23f}.mo-bar i:nth-child(3){background:#c9a6ff}
.mo-bar span{margin-left:auto;color:rgba(255,255,255,.8);font:600 1.8cqw/1 Montserrat,system-ui,sans-serif}
.mo-stage{position:relative;height:36cqw;border-radius:2cqw;overflow:hidden;background:radial-gradient(circle at 50% 120%,#3a1670,#1a0a3a 70%)}
.mo-path{position:absolute;left:4%;top:6%;width:92%;height:84%;overflow:visible}
.mo-path path{fill:none;stroke:rgba(201,166,255,.45);stroke-width:1.4;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.mo-ball{position:absolute;left:6%;top:6%;width:6cqw;height:6cqw;animation:moX 3s linear infinite}
.mo-ball i{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fffbe0,#ffd23f 50%,#f0a800);box-shadow:0 0 2cqw rgba(255,210,63,.8);transform-origin:50% 100%;animation:moY 1s linear infinite}
@keyframes moX{0%{transform:translateX(0)}100%{transform:translateX(66cqw)}}
@keyframes moY{0%{transform:translateY(24cqw) scale(1.3,.7);animation-timing-function:ease-out}8%{transform:translateY(21cqw) scale(.85,1.15);animation-timing-function:ease-out}50%{transform:translateY(0) scale(1);animation-timing-function:ease-in}92%{transform:translateY(21cqw) scale(.9,1.1)}100%{transform:translateY(24cqw) scale(1.3,.7)}}
.mo-shadow{position:absolute;left:6%;bottom:6%;width:6cqw;height:1.4cqw;border-radius:50%;background:rgba(0,0,0,.5);filter:blur(.4cqw);animation:moX 3s linear infinite}
.mo-shadow::after{content:none}
.mo-star{position:absolute;width:2.4cqw;height:2.4cqw;background:#ff7ad9;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:moTw 2.4s ease-in-out infinite}
.mo-star.s1{right:12%;top:14%}.mo-star.s2{right:30%;top:30%;background:#c9a6ff;animation-delay:-.8s}.mo-star.s3{left:40%;top:10%;background:#ffd23f;animation-delay:-1.6s}
@keyframes moTw{0%,100%{transform:scale(.5) rotate(0);opacity:.4}50%{transform:scale(1.15) rotate(45deg);opacity:1}}
.mo-rec{position:absolute;left:3%;top:5%;display:flex!important;align-items:center;gap:.8cqw;color:#fff;font:700 1.6cqw/1 Montserrat,sans-serif;direction:ltr}
.mo-rec::before{content:"";width:1.4cqw;height:1.4cqw;border-radius:50%;background:#ff4f7a;animation:moRec 1s steps(1) infinite}
@keyframes moRec{50%{opacity:0}}
.mo-play{position:absolute;right:4%;bottom:7%;width:6cqw;height:6cqw;border-radius:50%;background:linear-gradient(135deg,#c9a6ff,#ff7ad9);animation:moPulse 2s ease-out infinite;display:grid!important;place-items:center}
.mo-play i{width:0;height:0;border-left:2cqw solid #14082a;border-top:1.2cqw solid transparent;border-bottom:1.2cqw solid transparent;margin-left:.5cqw}
@keyframes moPulse{0%{box-shadow:0 0 0 0 rgba(255,122,217,.6)}100%{box-shadow:0 0 0 3cqw rgba(255,122,217,0)}}
.mo-tl{position:relative;margin-top:1.4cqw;padding:1cqw 0 .6cqw;direction:ltr}
.mo-ruler{height:1.4cqw;margin-bottom:.8cqw;background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,transparent 1px 2.5cqw)}
.mo-trk{position:relative;height:3cqw;margin-bottom:.8cqw;border-radius:1cqw;background:rgba(255,255,255,.07)}
.mo-trk u{position:absolute;top:.6cqw;bottom:.6cqw;border-radius:.8cqw;opacity:.85}
.mo-trk.t1 u{left:2%;right:4%;background:linear-gradient(90deg,#8a2be2,#c9a6ff)}
.mo-trk.t2 u{left:10%;right:28%;background:linear-gradient(90deg,#e0409a,#ff7ad9)}
.mo-trk.t3 u{left:16%;right:10%;background:linear-gradient(90deg,#f0a800,#ffd23f)}
.mo-trk s{position:absolute;top:50%;width:1.6cqw;height:1.6cqw;margin:-.8cqw 0 0 -.8cqw;background:#fff;transform:rotate(45deg);box-shadow:0 0 .8cqw rgba(255,255,255,.8)}
.mo-head{position:absolute;top:0;bottom:0;left:2%;width:2px;background:#ff7ad9;box-shadow:0 0 1cqw #ff7ad9;animation:moHead 3s linear infinite}
.mo-head::before{content:"";position:absolute;top:0;left:50%;width:1.8cqw;height:1.8cqw;margin-left:-.9cqw;background:#ff7ad9;clip-path:polygon(0 0,100% 0,50% 100%)}
@keyframes moHead{to{left:96%}}
.mo-film{position:absolute;right:0;top:3%;width:16%;height:70%;overflow:hidden;border-radius:2cqw;background:#120626;box-shadow:0 2cqw 4cqw -2cqw rgba(0,0,0,.7);-webkit-mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent)}
.mo-film div{display:flex!important;flex-direction:column;gap:1.4cqw;padding:1.4cqw 2.6cqw;animation:moFilm 6s linear infinite}
.mo-film div i{flex:none;aspect-ratio:1.3;border-radius:1cqw;background:linear-gradient(135deg,#3a1670,#8a2be2)}
.mo-film div i:nth-child(3n+1){background:linear-gradient(135deg,#e0409a,#ff7ad9)}.mo-film div i:nth-child(3n+2){background:linear-gradient(135deg,#c9a6ff,#8a2be2)}
.mo-film::before,.mo-film::after{content:"";position:absolute;top:0;bottom:0;width:1.6cqw;background:repeating-linear-gradient(#120626 0 1cqw,rgba(255,255,255,.55) 1cqw 2.2cqw,#120626 2.2cqw 3cqw);z-index:1}
.mo-film::before{left:.4cqw}.mo-film::after{right:.4cqw}
@keyframes moFilm{to{transform:translateY(-50%)}}
.mo-curve{position:absolute;left:0;bottom:2%;width:30%;padding:1.4cqw;border-radius:2cqw;background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.05));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.3);box-shadow:0 2cqw 4cqw -2cqw rgba(0,0,0,.7)}
.mo-curve svg{display:block;width:100%;overflow:visible}
.mo-curve path{fill:none;stroke:#ff7ad9;stroke-width:2}
.mo-curve circle{fill:#fff}.mo-curve circle.h{fill:#c9a6ff}.mo-curve circle.dot{fill:#ffd23f;filter:drop-shadow(0 0 3px #ffd23f)}
.mo-curve span{display:block;margin-top:.6cqw;color:rgba(255,255,255,.85);font:600 1.6cqw/1 Montserrat,sans-serif;direction:ltr}
@media(prefers-reduced-motion:reduce){.mo *{animation:none!important}}
/* services menu previews: looping video and YouTube embeds fill the frame */
.svx-pv video{width:100%;height:100%;object-fit:cover;display:block}
.svx-yt{position:absolute;inset:0}
.svx-yt iframe{position:absolute;left:50%;top:50%;width:178%;height:100%;min-width:100%;min-height:56.25cqw;translate:-50% -50%;border:0;pointer-events:none}
.svx-pv{container-type:inline-size}
.svx-pv a.k-y img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* animation page: video categories */
.ytcat{margin:clamp(22px,3vw,40px) 0 0;font-size:clamp(1.4rem,2vw,2rem);font-weight:800;background:linear-gradient(90deg,#8a2be2,#e0409a);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content}
.ytcat+.ytgrid{margin-top:14px}
/* breadcrumbs: small on every page */
html:not(#a) .crumbs,html:not(#a) .crumbs a,html:not(#a) .crumbs span,html:not(#a) .crumbs i{font-size:14px!important;line-height:1.4!important}
html:not(#a) .crumbs{gap:6px!important;margin-bottom:14px!important;opacity:.85}
@media(max-width:700px){html:not(#a) .crumbs,html:not(#a) .crumbs a,html:not(#a) .crumbs span,html:not(#a) .crumbs i{font-size:13px!important}}
/* animation hero: the scene sits midway between the header and the facts row */
@media(min-width:901px){html:not(#a) .ph-vis .mo{translate:0 3.7vw}}