/* TROOS GLOBAL — motion layer (fx) */
/* ---------- Intro ---------- */
#intro{display:none}
html.has-intro #intro{display:flex}
html.has-intro body{overflow:hidden}
#intro{position:fixed;inset:0;z-index:5000;align-items:center;justify-content:center;background:radial-gradient(900px 600px at 50% 40%,#123a6b 0,#0a1a33 55%,#050d1a 100%);color:#fff;overflow:hidden;cursor:pointer}
#intro .i-grid{position:absolute;inset:-50%;background-image:linear-gradient(rgba(56,189,248,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.08) 1px,transparent 1px);background-size:60px 60px;transform:perspective(600px) rotateX(60deg) translateY(0);animation:igrid 6s linear infinite;mask-image:radial-gradient(ellipse at center,#000 20%,transparent 65%)}
@keyframes igrid{to{background-position:0 60px}}
#intro .i-panel{position:absolute;top:0;bottom:0;width:50.5%;background:inherit;z-index:0;transition:transform 1s cubic-bezier(.77,0,.18,1)}
#intro .i-panel.l{left:0;background:#07142a}#intro .i-panel.r{right:0;background:#07142a}
#intro .i-wrap{position:relative;z-index:2;display:flex;align-items:center;gap:34px;padding:20px;direction:ltr}
#intro .i-logo{position:relative;width:170px;height:170px;flex:0 0 auto;display:grid;place-items:center}
#intro .i-logo img{width:110px;height:auto;position:relative;z-index:2;filter:drop-shadow(0 0 22px rgba(56,189,248,.65));animation:ilogo 1.6s cubic-bezier(.2,1.4,.4,1) both,ifloat 3s ease-in-out 1.6s infinite}
@keyframes ilogo{0%{transform:scale(0) rotate(-540deg);opacity:0}70%{opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes ifloat{50%{transform:translateY(-6px) rotate(6deg)}}
#intro .ring{position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:#38bdf8;border-right-color:rgba(56,189,248,.3);animation:ispin 1.4s linear infinite}
#intro .ring.r2{inset:14px;border-top-color:#f59e0b;border-left-color:rgba(245,158,11,.3);animation-duration:2.2s;animation-direction:reverse}
#intro .ring.r3{inset:-14px;border:1px dashed rgba(255,255,255,.18);animation-duration:12s}
#intro .orb{position:absolute;width:10px;height:10px;border-radius:50%;background:#fbbf24;box-shadow:0 0 14px #fbbf24;top:-5px;left:calc(50% - 5px);transform-origin:5px 90px;animation:ispin 2.4s linear infinite}
@keyframes ispin{to{transform:rotate(360deg)}}
#intro .pulse{position:absolute;inset:20px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.35),transparent 70%);animation:ipulse 1.8s ease-out infinite}
@keyframes ipulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.8);opacity:0}}
#intro .i-text{min-width:300px}
#intro .i-brand{font-weight:900;font-size:clamp(34px,6vw,64px);letter-spacing:3px;line-height:1.1;white-space:nowrap;background:linear-gradient(90deg,#fff,#7dd3fc,#fff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ishine 2.5s linear infinite}
@keyframes ishine{to{background-position:-200% 0}}
#intro .i-line{font-size:clamp(16px,2.4vw,24px);font-weight:700;color:#fbbf24;margin-top:8px;min-height:1.6em;direction:rtl;text-align:left}
#intro .i-line[dir=ltr]{direction:ltr}
#intro .caret{display:inline-block;width:3px;height:1em;background:#38bdf8;vertical-align:-3px;margin-inline:3px;animation:iblink .7s steps(1) infinite}
@keyframes iblink{50%{opacity:0}}
#intro .i-bar{position:absolute;bottom:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#38bdf8,#f59e0b);z-index:3;animation:ibar 3.4s linear forwards}
@keyframes ibar{to{width:100%}}
#intro .i-skip{position:absolute;bottom:22px;right:24px;z-index:3;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#cbd5e1;border-radius:99px;padding:6px 16px;font:700 13px var(--font);cursor:pointer}
#intro .i-plane{position:absolute;z-index:1;width:46px;left:-60px;top:28%;color:#fff;opacity:.85;animation:iplane 3.2s cubic-bezier(.45,0,.3,1) .3s forwards}
@keyframes iplane{0%{transform:translate(0,40px) rotate(-8deg)}100%{transform:translate(calc(100vw + 120px),-80px) rotate(-14deg)}}
#intro.out .i-wrap,#intro.out .i-grid,#intro.out .i-skip,#intro.out .i-bar,#intro.out .i-plane{opacity:0;transform:scale(1.15);transition:.5s}
#intro.out{background:transparent}
#intro.out .i-panel.l{transform:translateX(-101%)}#intro.out .i-panel.r{transform:translateX(101%)}
@media (max-width:640px){#intro .i-wrap{flex-direction:column;gap:18px;text-align:center}#intro .i-text{min-width:0}#intro .i-line{text-align:center}#intro .i-logo{width:130px;height:130px}#intro .i-logo img{width:84px}#intro .orb{transform-origin:5px 70px}}

/* ---------- Progress + header ---------- */
.fx-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--orange),#38bdf8)}
[dir=rtl] .fx-progress{transform-origin:100% 50%}
.header{transition:box-shadow .3s,background .3s}
.header.scrolled{box-shadow:0 10px 30px rgba(10,26,51,.1)}
.header.scrolled .container{height:64px}
.header .container{transition:height .3s}
.logo img.mark{transition:transform .8s cubic-bezier(.2,1.4,.4,1)}
.logo:hover img.mark{transform:rotate(360deg) scale(1.08)}

/* ---------- Hero ---------- */
.hero.has-photo{background-attachment:scroll}
.hero .fx-bg{position:absolute;inset:-6%;background:var(--bg) center/cover no-repeat;z-index:0;animation:kenburns 22s ease-in-out infinite alternate;will-change:transform}
.hero .fx-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,26,51,.97) 0%,rgba(10,26,51,.86) 45%,rgba(10,26,51,.5) 100%)}
[dir=ltr] .hero .fx-bg::after{background:linear-gradient(260deg,rgba(10,26,51,.97) 0%,rgba(10,26,51,.86) 45%,rgba(10,26,51,.5) 100%)}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.12) translateX(-2%)}}
.hero.fx-ready{background:var(--navy)}
.hero canvas.fx-net{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.7}
.hero .container{z-index:1}
.hero-plane{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-plane svg{position:absolute;width:100%;height:100%}
.fx-in .hero h1,.fx-in .hero .lead,.fx-in .hero .pill,.fx-in .hero .hero-cta,.fx-in .hero .hero-stats,.fx-in .hero .track-card,
.fx-in .page-hero h1,.fx-in .page-hero p,.fx-in .page-hero .crumbs,.fx-in .page-hero .hero-cta,.fx-in .page-hero .hero-ic,.fx-in .page-hero .post-meta{animation:heroUp 1s cubic-bezier(.2,.8,.2,1) both}
.fx-in .hero .pill,.fx-in .page-hero .crumbs{animation-delay:.05s}
.fx-in .hero h1,.fx-in .page-hero .hero-ic{animation-delay:.15s}
.fx-in .hero .lead,.fx-in .page-hero h1{animation-delay:.3s}
.fx-in .hero .hero-cta,.fx-in .page-hero p,.fx-in .page-hero .post-meta{animation-delay:.45s}
.fx-in .hero .hero-stats,.fx-in .page-hero .hero-cta{animation-delay:.6s}
.fx-in .hero .track-card{animation:cardIn 1.2s cubic-bezier(.2,.8,.2,1) .5s both}
@keyframes heroUp{from{opacity:0;transform:translateY(40px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes cardIn{from{opacity:0;transform:perspective(900px) rotateY(-25deg) translateX(-40px) scale(.9)}to{opacity:1;transform:none}}
html.has-intro .hero *,html.has-intro .page-hero *{animation-play-state:paused!important}
.hero h1 em{background-size:200% 100%;animation:shine 4s linear infinite}
@keyframes shine{to{background-position:-200% 0}}
.page-hero.has-photo{background-size:cover}
.page-hero .blob{position:absolute;border-radius:50%;filter:blur(40px);opacity:.45;z-index:0;animation:blob 14s ease-in-out infinite alternate}
.page-hero .blob.b1{width:320px;height:320px;background:#1f6feb;top:-80px;inset-inline-start:10%}
.page-hero .blob.b2{width:260px;height:260px;background:#f59e0b;bottom:-120px;inset-inline-end:15%;animation-delay:-5s;opacity:.25}
@keyframes blob{to{transform:translate(60px,40px) scale(1.25)}}

/* ---------- Reveal variants ---------- */
.js .reveal{transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1),filter .9s,clip-path 1.1s cubic-bezier(.77,0,.18,1)}
.js .reveal[data-fx=left]{transform:translateX(-70px)}
.js .reveal[data-fx=right]{transform:translateX(70px)}
.js .reveal[data-fx=zoom]{transform:scale(.85);filter:blur(4px)}
.js .reveal[data-fx=flip]{transform:perspective(900px) rotateX(25deg) translateY(50px);transform-origin:50% 100%}
.js .reveal[data-fx=mask]{clip-path:inset(0 0 100% 0);transform:none;opacity:1}
.js .reveal[data-fx=mask].in{clip-path:inset(0 0 0 0)}
.js .reveal.in{opacity:1;transform:none;filter:none}
.sec-head .eyebrow{position:relative;overflow:hidden}
.sec-head.in .eyebrow::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);transform:translateX(-120%);animation:sweep 1.2s .4s}
@keyframes sweep{to{transform:translateX(120%)}}
.sec-head h2 .w{display:inline-block;opacity:0;transform:translateY(.6em) rotate(4deg);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1)}
.sec-head.in h2 .w{opacity:1;transform:none}

/* ---------- Interactions ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);z-index:-1;transition:left .6s}
.btn:hover::after{left:130%}
.btn-primary{animation:btnGlow 2.8s ease-in-out infinite}
@keyframes btnGlow{50%{box-shadow:0 8px 30px rgba(245,158,11,.6)}}
.tilt{transform-style:preserve-3d;will-change:transform;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.tilt .glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.35),transparent 55%);opacity:0;transition:opacity .3s;z-index:3}
.tilt:hover .glare{opacity:1}
.svc-card,.feat,.post-card{position:relative}
.svc-body .ic{transition:transform .5s cubic-bezier(.2,1.4,.4,1)}
.svc-card:hover .svc-body .ic{transform:rotate(-10deg) scale(1.12)}
.step{transition:transform .4s,border-color .4s,background .4s}
.step:hover{transform:translateY(-8px);border-color:rgba(245,158,11,.5);background:rgba(255,255,255,.07)}
.step .n{transition:color .4s}
.step:hover .n{color:var(--orange)}
.fx-cursor{position:fixed;width:340px;height:340px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(56,189,248,.12),transparent 65%);transform:translate(-50%,-50%);transition:opacity .3s;mix-blend-mode:screen;opacity:0}
.wa-float{animation:waPulse 2.4s infinite}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ---------- Marquee ---------- */
.marquee{background:linear-gradient(90deg,var(--orange),var(--orange-2));color:#111;padding:16px 0;overflow:hidden;transform:rotate(-1.5deg);margin:-10px -20px;position:relative;z-index:2;box-shadow:0 10px 30px rgba(245,158,11,.3)}
.marquee .track{display:flex;gap:48px;width:max-content;animation:marq 32s linear infinite;font-weight:900;font-size:20px;white-space:nowrap}
.marquee .track span{display:flex;align-items:center;gap:48px}
.marquee .track span::after{content:"✦";font-size:16px}
[dir=rtl] .marquee .track{animation-name:marqR}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes marqR{to{transform:translateX(50%)}}
.marquee-wrap{overflow:hidden;padding:20px 0;background:var(--bg)}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:3000;background:rgba(5,13,26,.92);display:grid;place-items:center;opacity:0;pointer-events:none;transition:.35s;padding:20px;cursor:zoom-out}
.lb.open{opacity:1;pointer-events:auto}
.lb img{max-width:min(1100px,94vw);max-height:86vh;border-radius:16px;transform:scale(.85);transition:.4s cubic-bezier(.2,1.4,.4,1);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb.open img{transform:none}
.g-item,.brand-grid figure{cursor:zoom-in}

@media (prefers-reduced-motion:reduce){
  #intro,.fx-cursor,.hero canvas.fx-net,.hero-plane{display:none!important}
  html.has-intro body{overflow:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media (hover:none){.fx-cursor{display:none}}

.marquee{margin:-10px -60px}

main{overflow-x:clip}

@media (max-width:640px){.logo{font-size:17px;gap:7px;white-space:nowrap}.logo small{display:none}.logo img.mark{width:36px;height:36px}.h-actions{gap:5px}.lang-btn{padding:6px 9px}.h-actions .btn-sm{padding:6px 9px}}

/* --- v4 fixes: curtain reveal (clip-path blocked lazy images), rotating logo, compact nav --- */
.js .reveal[data-fx=mask]{clip-path:none!important;opacity:1;transform:none;position:relative}
.js .reveal[data-fx=mask]::after{content:"";position:absolute;inset:0;z-index:6;border-radius:24px;pointer-events:none;background:linear-gradient(135deg,var(--navy),var(--blue));transform-origin:50% 0;transition:transform 1.1s cubic-bezier(.77,0,.18,1)}
.js .reveal[data-fx=mask].in::after{transform:scaleY(0)}
.c-logo{position:absolute;bottom:18px;inset-inline-start:4%;width:132px;height:132px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 20px 50px rgba(10,26,51,.25);z-index:4}
.c-logo img{width:70px;height:auto;animation:logoSpin 9s linear infinite}
.c-logo::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px dashed rgba(31,111,235,.45);animation:logoSpin 22s linear infinite reverse}
.c-logo::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:3px solid transparent;border-top-color:var(--orange);border-right-color:var(--orange);animation:logoSpin 2.6s linear infinite}
@keyframes logoSpin{to{transform:rotate(360deg)}}
.c-logo:hover img{animation-duration:1.5s}
@media (max-width:640px){.c-logo{width:96px;height:96px}.c-logo img{width:50px}}
.nav a{white-space:nowrap}.logo{white-space:nowrap}
@media (max-width:1280px){.nav{gap:2px}.nav a{padding:8px 9px;font-size:14px}.header .container{gap:10px}}
@media (max-width:1120px){
  .nav{position:fixed;top:74px;inset-inline:0;background:#fff;flex-direction:column;align-items:stretch;padding:14px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:none}
  .nav.open{display:flex}.nav a{font-size:15px;padding:10px 14px}
  .burger{display:grid}
}