/* Layout: cinematic full-bleed chapters (Apple/Tesla rhythm), dark brand surfaces alternating with one light band; logo E-bars as section markers. Single committed dark look. */
:root{
  --ink:#08090B; --slate:#121418; --slate-2:#1A1D22; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --steel:#9198A2; --mist:#C9CDD3; --white:#FFFFFF; --paper:#F4F5F6; --paper-line:#DFE2E6; --graphite:#4B515B;
  --f-en:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-ar:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --max:1280px; --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--white);font-family:var(--f-en);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
html[lang=ar] body{font-family:var(--f-ar);line-height:1.85}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.light :focus-visible{outline-color:var(--ink)}
.wrap{max-width:var(--max);margin-inline:auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance;letter-spacing:-.015em}
html[lang=ar] :is(h1,h2,h3){letter-spacing:0;font-weight:500}
p{margin:0}
.wide{font-variation-settings:"wdth" 118}
html[lang=ar] .wide{font-variation-settings:normal}
.muted{color:var(--steel)}

.ebar{display:inline-grid;gap:3px;width:20px;flex:none}
.ebar i{display:block;height:2.5px;background:currentColor}
.ebar i:nth-child(2){width:76%}
.eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--steel);font-weight:500}
html[lang=ar] .eyebrow{letter-spacing:0;font-size:14px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:14px;font-weight:500;min-height:48px;padding:0 26px;border-radius:999px;border:1px solid transparent;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease);white-space:nowrap;cursor:pointer;font-family:inherit}
.btn-w{background:var(--white);color:var(--ink)}
.btn-w:hover{background:#DADDE1}
.btn-g{border-color:var(--line-2);color:var(--white);background:rgba(255,255,255,.04);backdrop-filter:blur(8px)}
.btn-g:hover{border-color:var(--white)}
.btn-k{background:var(--ink);color:var(--white)}
.btn-k:hover{background:#24272D}
.arw{display:inline-block;transition:transform .25s var(--ease)}
html[lang=ar] .arw{transform:scaleX(-1)}
.btn:hover .arw,.lnk:hover .arw{transform:translateX(4px)}
html[lang=ar] .btn:hover .arw,html[lang=ar] .lnk:hover .arw{transform:scaleX(-1) translateX(4px)}
.lnk{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;border-bottom:1px solid var(--line-2);padding-bottom:4px}
.lnk:hover{border-color:currentColor}

/* Header */
.top{position:fixed;top:0;left:0;right:0;z-index:40;padding-top:env(safe-area-inset-top,0px);transition:background .35s,border-color .35s;border-bottom:1px solid transparent}
.top.solid{background:rgba(8,9,11,.82);backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);border-color:var(--line)}
.top .wrap{display:flex;align-items:center;gap:30px;height:72px}
.logo{display:block;width:138px;flex:none;color:var(--white)}
.logo svg{display:block;width:100%;height:auto}
.nav{display:flex;align-items:center;gap:4px;margin-inline-start:auto;font-size:13.5px}
.nav>a,.nav>.dd>button{color:var(--mist);padding:10px 14px;border-radius:999px;background:none;border:0;font:inherit;cursor:pointer;display:flex;align-items:center;gap:6px}
.nav>a:hover,.nav>.dd>button:hover,.dd.open>button{color:var(--white);background:rgba(255,255,255,.06)}
.dd{position:relative}
.dd>button::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7}
.mega{position:absolute;top:calc(100% + 14px);inset-inline-start:-180px;width:min(720px,90vw);background:rgba(18,20,24,.97);backdrop-filter:blur(20px);border:1px solid var(--line);border-radius:18px;padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:4px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.25s var(--ease);box-shadow:0 40px 80px -20px rgba(0,0,0,.7)}
.dd.open .mega{opacity:1;visibility:visible;transform:none}
.mega a{padding:12px 14px;border-radius:10px;display:grid;gap:2px}
.mega a:hover{background:rgba(255,255,255,.05)}
.mega b{font-weight:500;font-size:14px}
.mega span{font-size:12.5px;color:var(--steel);line-height:1.45}
.mega .all{grid-column:1/-1;border-top:1px solid var(--line);margin-top:8px;padding-top:16px;border-radius:0;display:flex;justify-content:space-between;align-items:center}
.tools{display:flex;align-items:center;gap:10px}
.lang{background:none;border:1px solid var(--line-2);color:var(--white);font:inherit;font-size:13px;height:38px;min-width:56px;border-radius:999px;cursor:pointer}
.lang:hover{border-color:var(--white)}
.top .btn{min-height:38px;padding:0 18px;font-size:13px}
.burger{display:none;width:40px;height:38px;border:1px solid var(--line-2);border-radius:999px;background:none;color:var(--white);cursor:pointer;place-items:center}
.burger i{display:block;width:16px;height:1.5px;background:currentColor;box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor}
.drawer{position:fixed;inset:0;z-index:39;background:var(--ink);padding:calc(96px + env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) 40px max(24px,env(safe-area-inset-left,0px));display:grid;align-content:start;gap:2px;overflow:auto}
.drawer[hidden]{display:none}
.drawer a{font-size:24px;padding:12px 0;border-bottom:1px solid var(--line)}
.drawer .btn{margin-top:24px;font-size:15px}
@media (max-width:1060px){.nav{display:none}.burger{display:grid}.tools{margin-inline-start:auto}}
@media (max-width:520px){.top .btn-w{display:none}.logo{width:118px}}

/* Hero */
.hero{position:relative;height:100svh;min-height:640px;max-height:1100px;overflow:hidden;display:grid;place-items:center;text-align:center;isolation:isolate}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,9,11,.55) 0%,rgba(8,9,11,0) 30%,rgba(8,9,11,0) 55%,var(--ink) 100%)}
.hero-in{display:grid;justify-items:center;gap:26px;padding-top:40px}
.hero .tag{font-size:13px;letter-spacing:.6em;text-transform:uppercase;color:var(--mist);font-weight:500;padding-inline-start:.6em}
html[lang=ar] .hero .tag{letter-spacing:.05em;font-size:16px}
.hero h1{font-size:clamp(40px,6.6vw,96px);line-height:1;max-width:14ch;font-weight:300}
html[lang=ar] .hero h1{line-height:1.25;font-size:clamp(38px,5.6vw,80px);font-weight:400}
.hero h1 b{font-weight:600}
.hero p{max-width:56ch;color:var(--mist);font-size:clamp(16px,1.4vw,19px)}
.hero .row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px}
.scroll{position:absolute;bottom:calc(28px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);width:22px;height:36px;border:1.5px solid var(--line-2);border-radius:12px}
.scroll::after{content:"";position:absolute;left:50%;top:7px;width:2px;height:7px;margin-left:-1px;background:var(--white);border-radius:2px;animation:sc 2s var(--ease) infinite}
@keyframes sc{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}100%{opacity:0;transform:translateY(10px)}}

/* Statement */
.statement{padding-block:clamp(90px,14vw,190px) clamp(60px,9vw,120px)}
.statement h2{font-size:clamp(30px,4.4vw,62px);line-height:1.12;max-width:22ch;font-weight:300}
html[lang=ar] .statement h2{line-height:1.45;font-weight:400}
.statement h2 em{font-style:normal;color:var(--steel)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(56px,7vw,96px);border-top:1px solid var(--line)}
.kpis div{padding:28px 24px 0 0;display:grid;gap:6px}
html[lang=ar] .kpis div{padding:28px 0 0 24px}
.kpis strong{font-size:clamp(34px,4vw,54px);font-weight:300;line-height:1;font-variant-numeric:tabular-nums}
.kpis span{font-size:13.5px;color:var(--steel)}
@media (max-width:760px){.kpis{grid-template-columns:1fr 1fr;row-gap:32px}}

/* Chapters */
.chapters{display:grid;gap:14px;padding-inline:14px}
.chap{position:relative;border-radius:28px;overflow:hidden;min-height:min(86vh,820px);display:grid;align-items:end;isolation:isolate;background:var(--slate)}
.chap .vis{position:absolute;inset:0;z-index:-1}
.chap .vis svg{width:100%;height:100%;display:block}
.chap::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(8,9,11,.92) 0%,rgba(8,9,11,.35) 45%,rgba(8,9,11,0) 70%)}
.chap-in{padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:end;width:100%}
.chap h3{font-size:clamp(32px,4.6vw,64px);line-height:1.04;font-weight:300;margin-top:16px}
html[lang=ar] .chap h3{line-height:1.35;font-weight:400}
.chap p{color:var(--mist);max-width:46ch;font-size:16.5px}
.chap .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-self:end}
html[lang=ar] .chips{justify-self:start}
.chips span{font-size:12.5px;padding:8px 14px;border:1px solid var(--line-2);border-radius:999px;color:var(--mist);background:rgba(8,9,11,.35);backdrop-filter:blur(6px)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.duo .chap{min-height:min(72vh,680px)}
.duo .chap-in{grid-template-columns:1fr}
.duo .chap h3{font-size:clamp(28px,3.4vw,46px)}
@media (max-width:900px){.chap .vis{bottom:42%}.chap{background:#0E1013}.chap-in{grid-template-columns:1fr}.chips{justify-self:start}.duo{grid-template-columns:1fr}.chap{min-height:640px}.duo .chap{min-height:560px}}
@media (max-width:520px){.chapters{padding-inline:8px;gap:8px}.chap{border-radius:20px;min-height:600px}}

/* drawings */
.d-line{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1}
.d-strong{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.4}
.d-dim{fill:none;stroke:rgba(255,255,255,.08);stroke-width:1}
.d-txt{fill:rgba(255,255,255,.45);font:500 11px var(--f-en);letter-spacing:.14em}
.flow{fill:none;stroke:#fff;stroke-width:1.6;stroke-dasharray:6 14;animation:flow 2.2s linear infinite;opacity:.75}
@keyframes flow{to{stroke-dashoffset:-40}}
.pulse{animation:pl 3s ease-in-out infinite}
@keyframes pl{50%{opacity:.25}}
.trail{fill:none;stroke-linecap:round;stroke-dasharray:120 900;animation:tr 3.4s linear infinite}
@keyframes tr{from{stroke-dashoffset:1020}to{stroke-dashoffset:0}}

/* All services */
.sec{padding-block:clamp(90px,12vw,160px)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,64px)}
.sec-head h2{font-size:clamp(30px,4vw,54px);line-height:1.08;font-weight:300;max-width:18ch;margin-top:18px}
html[lang=ar] .sec-head h2{line-height:1.4;font-weight:400}
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.svc a{background:var(--ink);padding:30px 26px;display:grid;grid-template-rows:auto auto 1fr auto;gap:14px;min-height:280px;transition:background .3s}
.svc a:hover{background:var(--slate)}
.svc .ic{width:40px;height:40px;color:var(--white)}
.svc .ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.3}
.svc h3{font-size:19px;font-weight:500;line-height:1.3}
.svc p{font-size:14px;color:var(--steel);line-height:1.55}
.svc .go{font-size:13px;color:var(--mist);display:flex;gap:8px;align-items:center}
.svc a:hover .arw{transform:translateX(4px)}
html[lang=ar] .svc a:hover .arw{transform:scaleX(-1) translateX(4px)}
@media (max-width:1060px){.svc{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.svc{grid-template-columns:1fr}.svc a{min-height:0}}

/* About (light) */
.light{background:var(--paper);color:var(--ink)}
.light .eyebrow{color:var(--graphite)}
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px)}
.about h2{font-size:clamp(30px,4vw,54px);line-height:1.08;font-weight:300;margin-top:18px}
html[lang=ar] .about h2{line-height:1.4;font-weight:400}
.about .txt{display:grid;gap:20px;color:var(--graphite);font-size:17px;align-content:start}
.vm{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.vm div{background:var(--white);border:1px solid var(--paper-line);border-radius:18px;padding:24px;display:grid;gap:10px}
.vm b{color:var(--ink);font-weight:500;font-size:15px}
.vm p{font-size:14.5px}
.offices{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(56px,7vw,96px);border-top:1px solid var(--paper-line)}
.offices div{padding:26px 24px 0 0;display:grid;gap:6px}
html[lang=ar] .offices div{padding:26px 0 0 24px}
.offices b{font-weight:500}
.offices span{color:var(--graphite);font-size:14.5px}
.offices em{font-style:normal;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--graphite)}
html[lang=ar] .offices em{letter-spacing:0;font-size:13px}
@media (max-width:860px){.about,.vm{grid-template-columns:1fr}.offices{grid-template-columns:1fr;row-gap:8px}}

/* Clients & technologies */
.tabs{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px}
.tabs button{background:none;border:0;color:var(--steel);font:inherit;font-size:13.5px;padding:9px 18px;border-radius:999px;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--white);color:var(--ink)}
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.logos div{background:var(--ink);height:120px;display:grid;place-items:center;color:#5B616B;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
html[lang=ar] .logos div{letter-spacing:0}
.logos div::before{content:"";width:46%;height:22px;border-radius:4px;background:linear-gradient(90deg,#16191D,#1E2227,#16191D)}
.logos-note{font-size:13px;color:#646B75;margin-top:14px}
.tech{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,64px);align-items:center;justify-content:space-between;margin-top:clamp(56px,7vw,88px);padding-top:36px;border-top:1px solid var(--line)}
.tech span:not(.tech-l){font-size:clamp(20px,2.2vw,28px);font-weight:600;color:#6E757F;letter-spacing:.02em;font-variation-settings:"wdth" 112}
.tech-l{font-size:12px;color:var(--steel);letter-spacing:.3em;text-transform:uppercase;width:100%;margin-bottom:-8px}
html[lang=ar] .tech-l{letter-spacing:0;font-size:14px}
@media (max-width:900px){.logos{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.logos{grid-template-columns:repeat(2,1fr)}.logos div{height:96px}}

/* Quote */
.quote{background:var(--slate);border-radius:28px;margin-inline:14px;padding-block:clamp(56px,8vw,110px)}
@media (max-width:520px){.quote{margin-inline:8px;border-radius:20px}}
.q-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,96px)}
.q-grid h2{font-size:clamp(32px,4.4vw,60px);line-height:1.06;font-weight:300;margin-top:18px}
html[lang=ar] .q-grid h2{line-height:1.4;font-weight:400}
.q-side{display:grid;gap:28px;align-content:start}
.q-side p{color:var(--mist);max-width:42ch}
.contacts{display:grid;gap:14px}
.contacts div{display:flex;flex-direction:column;gap:2px;padding:18px 0;border-top:1px solid var(--line)}
.contacts small{font-size:12px;color:var(--steel);letter-spacing:.2em;text-transform:uppercase}
html[lang=ar] .contacts small{letter-spacing:0;font-size:13px}
.contacts span{font-size:19px}
form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f{display:grid;gap:8px}
.f.full{grid-column:1/-1}
.f label{font-size:13px;color:var(--mist)}
.f input,.f select,.f textarea{width:100%;background:var(--ink);border:1px solid var(--line-2);border-radius:14px;color:var(--white);font:inherit;font-size:15px;padding:14px 16px;transition:border-color .2s}
.f textarea{min-height:120px;resize:vertical}
.f :is(input,select,textarea):focus{outline:none;border-color:var(--white)}
.f input:invalid:not(:placeholder-shown){border-color:#C5534C}
.drop{border:1px dashed var(--line-2);border-radius:14px;padding:16px;display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--steel);font-size:14px;cursor:pointer}
.drop input{display:none}
.drop b{color:var(--white);font-weight:500}
.form-foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px}
.form-foot small{color:var(--steel);font-size:12.5px;max-width:42ch}
.sent{grid-column:1/-1;padding:22px;border:1px solid var(--line-2);border-radius:14px;color:var(--mist)}
@media (max-width:900px){.q-grid{grid-template-columns:1fr}}
@media (max-width:560px){form{grid-template-columns:1fr}}

/* Footer */
footer{padding-block:clamp(72px,9vw,120px) 36px;color:var(--steel);font-size:14px}
.big-logo{color:var(--white);opacity:.95;width:100%;max-width:var(--max);margin-inline:auto;margin-bottom:clamp(56px,7vw,96px)}
.big-logo svg{width:100%;height:auto;display:block}
.fcols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.fcols h4{margin:0 0 14px;font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--white)}
html[lang=ar] .fcols h4{letter-spacing:0;font-size:14px}
.fcols ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fcols a:hover{color:var(--white)}
.soc{display:flex;gap:10px;margin-top:20px}
.soc a{width:40px;height:40px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;color:var(--mist)}
.soc a:hover{border-color:var(--white);color:var(--white)}
.soc svg{width:16px;height:16px;fill:currentColor}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:64px;padding-top:24px;border-top:1px solid var(--line);font-size:12.5px}
.ltr{direction:ltr;unicode-bidi:isolate}
@media (max-width:900px){.fcols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fcols{grid-template-columns:1fr}}

/* Reveal: visible at rest, enhanced when JS runs */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .rv{opacity:1;transform:none}*{animation:none!important;transition:none!important}}

.mbar{display:none}
@media (max-width:700px){
  .mbar{display:grid;grid-template-columns:1fr 1.4fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(8,9,11,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
  footer{padding-bottom:120px}
}

/* ---------- Home hero logo ---------- */
.hero-logo{width:min(560px,78vw);color:var(--white);display:block;margin-bottom:8px}
.hero-logo svg{display:block;width:100%;height:auto;overflow:visible}
.js .hero-logo svg{clip-path:inset(0 100% 0 0);animation:wipe 1.6s .2s var(--ease) forwards}
html[lang=ar].js .hero-logo svg{clip-path:inset(0 0 0 100%)}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
.js .hero .tag,.js .hero h2,.js .hero p,.js .hero .row{opacity:0;transform:translateY(16px);animation:up 1s var(--ease) forwards}
.js .hero .tag{animation-delay:1.1s}.js .hero h2{animation-delay:1.3s}.js .hero p{animation-delay:1.5s}.js .hero .row{animation-delay:1.7s}
@keyframes up{to{opacity:1;transform:none}}
.hero h1{font-size:clamp(30px,4.2vw,58px);max-width:20ch}
html[lang=ar] .hero h1{font-size:clamp(30px,3.8vw,52px)}
.hero-in{gap:20px}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}

/* scroll-lit statement */
.statement h2 .w{transition:color .4s}
.js .statement h2 .w{color:#3A3F47}
.js .statement h2 .w.on{color:var(--white)}
.js .statement h2 em .w.on{color:var(--steel)}

/* chapter parallax */
.chap .vis{will-change:transform}
.chap .vis svg{transform:scale(1.08)}

/* ---------- Inner pages ---------- */
.phero{padding-top:calc(130px + env(safe-area-inset-top,0px));padding-bottom:clamp(48px,6vw,80px);position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 80% 20%,#1C2026 0%,transparent 70%);z-index:-1}
.phero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--steel);margin-bottom:28px}
.crumbs a:hover{color:var(--white)}
.crumbs span[aria-hidden]{opacity:.5}
.phero h1{font-size:clamp(36px,5vw,72px);line-height:1.02;font-weight:300;margin-top:18px}
html[lang=ar] .phero h1{line-height:1.3;font-weight:400}
.phero .lead{color:var(--mist);font-size:clamp(16px,1.3vw,19px);max-width:52ch;margin-top:22px}
.phero .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.pvis{border-radius:28px;overflow:hidden;aspect-ratio:5/4;background:var(--slate);border:1px solid var(--line);max-width:100%}
.pvis svg{width:100%;height:100%;display:block}
@media (max-width:900px){.phero-grid{grid-template-columns:1fr}.pvis{aspect-ratio:16/11}}

.answer{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:clamp(40px,5vw,64px)}
.answer-grid{display:grid;grid-template-columns:.35fr .65fr;gap:32px}
.answer p{font-size:clamp(19px,1.8vw,26px);line-height:1.5;font-weight:300;max-width:46ch}
html[lang=ar] .answer p{line-height:1.8}
@media (max-width:800px){.answer-grid{grid-template-columns:1fr}}

.doc{display:grid;grid-template-columns:240px 1fr;gap:clamp(32px,6vw,96px);padding-block:clamp(64px,8vw,110px)}
.toc{position:sticky;top:110px;align-self:start;display:grid;gap:2px;font-size:13.5px}
.toc b{font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--steel);font-weight:500;margin-bottom:12px}
html[lang=ar] .toc b{letter-spacing:0;font-size:13px}
.toc a{color:var(--steel);padding:7px 0 7px 14px;border-inline-start:1px solid var(--line);transition:color .2s,border-color .2s}
html[lang=ar] .toc a{padding:7px 14px 7px 0}
.toc a:hover,.toc a.cur{color:var(--white);border-color:var(--white)}
.blocks{display:grid;gap:clamp(64px,8vw,104px);min-width:0}
.blk h2{font-size:clamp(26px,3vw,40px);line-height:1.12;font-weight:300;margin-bottom:24px;max-width:24ch}
html[lang=ar] .blk h2{line-height:1.45;font-weight:400}
.blk>p{color:var(--mist);max-width:64ch;font-size:16.5px}
@media (max-width:900px){.doc{grid-template-columns:1fr}.toc{display:none}}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cards>div{background:var(--slate);border:1px solid var(--line);border-radius:18px;padding:24px;display:grid;gap:10px;align-content:start}
.cards b{font-weight:500;font-size:16px}
.cards p{color:var(--steel);font-size:14.5px;line-height:1.55}
.cards.two{grid-template-columns:1fr 1fr}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cards,.cards.two{grid-template-columns:1fr}}

.checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.checks li{padding:16px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:15.5px;padding-inline-end:24px}
.checks li::before{content:"";width:12px;height:7px;border-left:1.5px solid var(--white);border-bottom:1.5px solid var(--white);transform:rotate(-45deg);margin-top:7px}
@media (max-width:640px){.checks{grid-template-columns:1fr}}

.ptable{overflow-x:auto;border:1px solid var(--line);border-radius:18px}
.ptable table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.ptable th,.ptable td{text-align:start;padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:top}
.ptable th{font-weight:500;color:var(--steel);font-size:12px;letter-spacing:.16em;text-transform:uppercase;background:var(--slate)}
html[lang=ar] .ptable th{letter-spacing:0;font-size:13px}
.ptable tr:last-child td{border-bottom:0}
.ptable td:first-child{font-weight:500;color:var(--white);width:30%}
.ptable td{color:var(--mist)}

.steps2{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);counter-reset:s;border-top:1px solid var(--line)}
.steps2 li{padding-top:22px;padding-inline-end:16px;display:grid;gap:8px;align-content:start;position:relative}
.steps2 li::before{counter-increment:s;content:"0" counter(s);font-size:12px;color:var(--steel);font-variant-numeric:tabular-nums}
.steps2 li::after{content:"";position:absolute;top:-4px;inset-inline-start:0;width:7px;height:7px;background:var(--white);border-radius:50%}
.steps2 b{font-weight:500}
.steps2 span{font-size:14px;color:var(--steel)}
@media (max-width:900px){.steps2{grid-template-columns:1fr 1fr;row-gap:26px}}

.faq2 details{border-bottom:1px solid var(--line)}
.faq2 details:first-child{border-top:1px solid var(--line)}
.faq2 summary{cursor:pointer;list-style:none;padding:20px 0;display:flex;justify-content:space-between;gap:20px;font-size:17px;font-weight:500}
.faq2 summary::-webkit-details-marker{display:none}
.faq2 summary::after{content:"+";color:var(--steel);font-weight:300;font-size:22px;line-height:1;transition:transform .3s}
.faq2 details[open] summary::after{transform:rotate(45deg)}
.faq2 details p{color:var(--steel);padding-bottom:22px;max-width:64ch}

.sublinks{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.sublinks a{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:22px 24px;background:var(--slate);border:1px solid var(--line);border-radius:18px;transition:border-color .25s,background .25s}
.sublinks a:hover{border-color:var(--line-2);background:var(--slate-2)}
.sublinks .ic{width:36px;height:36px}
.sublinks .ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.3}
.sublinks b{font-weight:500;display:block}
.sublinks small{color:var(--steel);font-size:13.5px}
@media (max-width:640px){.sublinks{grid-template-columns:1fr}}

.related{padding-block:clamp(64px,8vw,104px);border-top:1px solid var(--line)}
.related .svc a{min-height:220px}

.cta-band{margin:0 14px clamp(14px,2vw,14px);border-radius:28px;background:var(--white);color:var(--ink);padding-block:clamp(56px,7vw,96px)}
@media (max-width:520px){.cta-band{margin-inline:8px;border-radius:20px}}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(28px,3.8vw,52px);line-height:1.08;font-weight:300;max-width:20ch}
html[lang=ar] .cta-band h2{line-height:1.4;font-weight:400}
.cta-band p{color:var(--graphite);margin-top:14px;max-width:46ch}
.cta-band .row{display:flex;gap:10px;flex-wrap:wrap}
.cta-band .btn-o{border-color:#C9CDD3;color:var(--ink)}
.cta-band .btn-o:hover{border-color:var(--ink)}

.hub-list{display:grid;gap:12px}
.hub-row{display:grid;grid-template-columns:90px 1fr 1.2fr auto;gap:28px;align-items:center;padding:28px;border:1px solid var(--line);border-radius:22px;background:var(--slate);transition:background .25s,border-color .25s}
.hub-row:hover{background:var(--slate-2);border-color:var(--line-2)}
.hub-row .ic{width:56px;height:56px}
.hub-row .ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.2}
.hub-row h3{font-size:clamp(20px,2vw,26px);font-weight:400}
.hub-row p{color:var(--steel);font-size:15px}
.hub-row .arw{font-size:20px}
@media (max-width:860px){.hub-row{grid-template-columns:56px 1fr;gap:16px 20px}.hub-row p{grid-column:1/-1}.hub-row>.arw{display:none}}

.ind-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.ind-card{background:var(--slate);border:1px solid var(--line);border-radius:22px;padding:clamp(24px,3vw,36px);display:grid;gap:14px;align-content:start}
.ind-card h3{font-size:24px;font-weight:400}
.ind-card p{color:var(--mist)}
.ind-card .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.ind-card .tags a{font-size:13px;padding:7px 13px;border:1px solid var(--line-2);border-radius:999px;color:var(--mist)}
.ind-card .tags a:hover{border-color:var(--white);color:var(--white)}
@media (max-width:760px){.ind-grid{grid-template-columns:1fr}}

.page-in{animation:pin .6s var(--ease)}
@keyframes pin{from{opacity:0}to{opacity:1}}
.nav>a.cur,.nav>.dd>button.cur{color:var(--white)}
@media (prefers-reduced-motion:reduce){.js .hero-logo svg{clip-path:none}.js .hero .tag,.js .hero h2,.js .hero p,.js .hero .row{opacity:1;transform:none}.js .statement h2 .w{color:var(--white)}}

.hero h2 b{font-weight:600}
.hero h1.hero-logo{font-size:inherit;max-width:none;margin:0}
.svc.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:1060px){.svc.three{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.svc.three{grid-template-columns:1fr}}
@media (max-width:900px){.chap .vis{bottom:auto;height:min(44%,320px)}.chap .vis svg{transform:none}.chap{min-height:auto;padding-top:min(44vh,330px)}.chap::after{background:linear-gradient(0deg,#0E1013 52%,rgba(14,16,19,0) 72%)}}

/* ---------- Ambient motion behind dark sections ---------- */
#amb{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}
.svc{background:rgba(255,255,255,.07)}
.svc a{background:rgba(8,9,11,.62);position:relative;overflow:hidden}
.svc a:hover{background:rgba(22,25,30,.75)}
.quote{background:rgba(18,20,24,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cards>div,.hub-row,.ind-card,.sublinks a{background:rgba(18,20,24,.66);position:relative;overflow:hidden}
.logos div{background:rgba(8,9,11,.6)}
.phero::before{opacity:.6}
/* cursor spotlight on cards */
.spot::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(170,195,225,.13),transparent 60%)}
.spot:hover::after{opacity:1}
.light .spot::after{background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(40,60,90,.08),transparent 60%)}
/* slow sheen on dark bands */
.band-slate,.chap{position:relative}
.chap .vis::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(190,210,235,.07) 50%,transparent 70%);background-size:250% 100%;animation:sheen 9s ease-in-out infinite}
@keyframes sheen{0%{background-position:120% 0}100%{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.chap .vis::after{animation:none}}

.chap{background:#101215}
@media (min-width:901px){.chap .vis svg{transform:none}.duo .chap .vis svg{opacity:.9}}

/* ---------- 3D room pressure ---------- */
.r3{padding-block:clamp(64px,8vw,110px) 0}
.r3-head{display:flex;justify-content:space-between;align-items:end;gap:28px;flex-wrap:wrap;margin-bottom:28px}
.r3-head h2{font-size:clamp(28px,3.4vw,48px);line-height:1.08;font-weight:300;margin-top:16px;max-width:18ch}
html[lang=ar] .r3-head h2{line-height:1.4;font-weight:400}
.r3-desc{color:var(--mist);max-width:52ch;font-size:16px}
.r3-stage{position:relative;height:clamp(420px,62vh,640px);border-radius:28px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(ellipse 70% 60% at 50% 30%,rgba(60,80,110,.28),transparent 70%),rgba(10,12,15,.7)}
.r3-stage canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.r3-stage canvas:active{cursor:grabbing}
.r3-labels{position:absolute;inset:0;pointer-events:none}
.r3-lbl{position:absolute;left:0;top:0;display:grid;justify-items:center;gap:2px;transition:opacity .3s;white-space:nowrap}
.r3-lbl b{font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--mist);padding:5px 11px;border:1px solid var(--line-2);border-radius:999px;background:rgba(8,9,11,.6);backdrop-filter:blur(6px)}
html[lang=ar] .r3-lbl b{letter-spacing:0;font-size:13px}
.r3-lbl span{font-size:22px;font-weight:300;color:var(--white)}
.r3-lbl.sm b{font-size:10.5px;padding:3px 9px;color:var(--steel)}
html[lang=ar] .r3-lbl.sm b{font-size:12px}
.r3-switch{position:absolute;top:18px;inset-inline-start:18px;display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line-2);border-radius:999px;background:rgba(8,9,11,.65);backdrop-filter:blur(10px);z-index:2}
.r3-switch button{background:none;border:0;color:var(--mist);font:inherit;font-size:14px;font-weight:500;padding:10px 20px;border-radius:999px;cursor:pointer;display:flex;gap:8px;align-items:center;transition:background .25s,color .25s}
.r3-switch button i{font-style:normal;font-size:17px;line-height:1}
.r3-switch button[aria-pressed=true]{background:var(--white);color:var(--ink)}
.r3-hint{position:absolute;bottom:16px;inset-inline-end:18px;font-size:12px;color:var(--steel);pointer-events:none}
.r3-note{font-size:12.5px;color:var(--steel);margin-top:12px}
.r3-fallback{position:absolute;inset:0;display:grid;place-items:center;color:var(--steel);font-size:14px}
@media (max-width:560px){.r3-switch button{padding:9px 14px;font-size:13px}.r3-lbl b{font-size:10px;padding:4px 8px}.r3-lbl span{font-size:17px}}

/* simulation embed */
.blk{min-width:0}
.r3-stage{height:clamp(460px,72vh,720px)}
.r3-view{position:absolute;inset:0}
.r3-view canvas{display:block;width:100%!important;height:100%!important;outline:none}
#room3d .labels{position:absolute!important;inset:0;pointer-events:none}
#room3d .lbl{font:500 10.5px var(--f-en);color:#fff;background:rgba(8,9,11,.74);padding:3px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.18);white-space:nowrap;transform:translateY(-16px);letter-spacing:.02em;backdrop-filter:blur(4px)}
#room3d .lbl.dev{border-color:rgba(170,200,240,.5)}
#room3d .lbl.hvac{border-color:rgba(200,215,230,.35);color:var(--mist)}
#room3d .lbl.cab{font-size:9.5px;color:var(--steel);border-color:rgba(255,255,255,.12)}
#room3d .lbl.live{background:#fff;color:#08090b;border-color:#fff;font-weight:600}
#room3d .lbl.bad{background:#c5534c;color:#fff;border-color:#c5534c}
.r3-status{position:absolute;bottom:16px;inset-inline-start:18px;max-width:min(460px,calc(100% - 36px));background:rgba(8,9,11,.72);backdrop-filter:blur(10px);border:1px solid var(--line-2);border-radius:16px;padding:10px 14px;font-size:13px;color:var(--mist);display:flex;gap:10px;align-items:center;flex-wrap:wrap;z-index:2}
.r3-status:empty{display:none}
.r3-status .pill{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:999px;font-weight:600;font-size:11.5px;letter-spacing:.06em}
html[lang=ar] .r3-status .pill{letter-spacing:0}
.r3-status .pill.ok{background:rgba(95,185,138,.16);color:#7fd3a6}
.r3-status .pill.warn{background:rgba(224,164,58,.16);color:#f0c070}
.r3-status .pill.bad{background:rgba(229,83,75,.18);color:#ff8a82}
.r3-status .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.r3-hint{top:24px;bottom:auto}
@media (max-width:700px){.r3-stage{height:560px}.r3-hint{display:none}.r3-status{font-size:12px;bottom:12px;inset-inline-start:12px}}
/* hero sim: blended into the page, no frame */
.pvis-sim{position:relative;background:transparent;border:0;border-radius:0;overflow:visible;aspect-ratio:5/4}
.pvis-sim .r3-view{position:absolute;inset:0}
.pvis-sim .r3-switch{top:auto;bottom:4px;inset-inline-start:50%;transform:translateX(-50%)}
html[lang=ar] .pvis-sim .r3-switch{transform:translateX(50%)}
.pvis-sim canvas{touch-action:pan-y}
@media (max-width:900px){.pvis-sim{aspect-ratio:1/1;max-height:440px;margin-inline:auto;width:100%}}
.pvis-sim .r3-view{-webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 46%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 46%,#000 58%,transparent 100%)}
/* 3D illustrations */
[data-scene]{position:relative}
[data-scene] canvas.x3d{position:absolute;inset:0;width:100%;height:100%;display:block}
[data-scene].x3d-on>svg{opacity:0;transition:opacity .6s}
.pvis-3d{background:transparent;border:0;border-radius:0;overflow:visible}
.pvis-3d canvas.x3d{-webkit-mask-image:radial-gradient(ellipse 75% 72% at 50% 48%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 75% 72% at 50% 48%,#000 60%,transparent 100%)}
.chap .vis[data-scene] canvas.x3d{transform:none}

/* smaller logos */
.big-logo{display:block;width:min(240px,60vw)!important;max-width:none!important;margin-inline:0!important;margin-bottom:40px!important}
.hero-logo{width:min(320px,62vw)!important}

/* ---------- client & technology marquees ---------- */
.mq-row{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:20px;padding-block:6px;border-top:1px solid var(--line)}
.mq-row:last-of-type{border-bottom:1px solid var(--line)}
.mq-tag{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--steel)}
html[lang=ar] .mq-tag{letter-spacing:0;font-size:14px}
.marquee{overflow:hidden;direction:ltr;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq 38s linear infinite}
.marquee.rev .mq-track{animation-direction:reverse}
.marquee.slow .mq-track{animation-duration:30s}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-logo{width:170px;height:88px;display:grid;place-items:center;flex:none}
.mq-logo i{display:block;width:110px;height:26px;border-radius:5px;background:linear-gradient(90deg,#16191d,#22262c,#16191d)}
.tech2{margin-top:clamp(48px,6vw,80px)}
.tech2 .tech-l{display:block;margin-bottom:18px}
.mq-brand{flex:none;padding-inline:clamp(28px,4vw,56px);font-size:clamp(22px,2.4vw,32px);font-weight:600;color:#6e757f;letter-spacing:.02em;font-variation-settings:"wdth" 112;line-height:2.4;transition:color .3s}
.mq-brand:hover{color:var(--white)}
@media (max-width:640px){.mq-row{grid-template-columns:1fr;gap:4px}.mq-logo{width:130px;height:70px}.mq-logo i{width:84px}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}}

/* Arabic typeface: 29LT Bukra when licensed web files are added under /fonts/, Alexandria (free, closest match) until then */
:root{--f-ar:"F29LT Bukra","29LT Bukra","Alexandria","Segoe UI",Tahoma,sans-serif}
html[lang=ar] body{letter-spacing:0}
html[lang=ar] :is(h1,h2,h3){font-weight:600}
html[lang=ar] .hero h2,html[lang=ar] .statement h2{font-weight:500}


/* phones: options table becomes stacked rows */
@media (max-width:560px){
 .ptable{overflow:visible;border-radius:16px}
 .ptable table{min-width:0}
 .ptable thead{display:none}
 .ptable tr{display:block;padding:14px 16px;border-bottom:1px solid var(--line)}
 .ptable tr:last-child{border-bottom:0}
 .ptable td{display:block;padding:0;border:0;width:auto!important}
 .ptable td:first-child{margin-bottom:4px}
}

/* home hero headline is now the page H1 */
.js .hero .hero-h{opacity:0;transform:translateY(16px);animation:up 1s var(--ease) 1.3s forwards}
.hero .hero-h b{font-weight:600}
@media (prefers-reduced-motion:reduce){.js .hero .hero-h{opacity:1;transform:none;animation:none}}
a.lang{display:inline-grid;place-items:center;text-decoration:none}


/* hero → service link lines */
.lk-ov{position:absolute;left:0;top:0;pointer-events:none;z-index:3;overflow:visible}
.lk-measure .rv{transform:none!important;transition:none!important}
.lk-base{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1}
.lk-line{fill:none;stroke:rgba(255,255,255,.4);stroke-width:1.1;stroke-linecap:round}
.lk-head{fill:#fff;filter:drop-shadow(0 0 5px #fff);transition:opacity .3s}
.lk-end{fill:#0b0d10;stroke:rgba(255,255,255,.75);stroke-width:1.2;opacity:0;transition:opacity .5s}
.lk-end.on{opacity:1}
.lk-ring{fill:none;stroke:#fff;stroke-width:1;opacity:0;transform-box:fill-box;transform-origin:center}
.lk-ring.on{animation:lkRing 2.4s ease-out infinite}
@keyframes lkRing{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(4)}}
@media (prefers-reduced-motion:reduce){.lk-ring.on{animation:none}}

@media (min-width:1000px){body:has(.skyline) .chapters{padding-inline:76px}}
@media (min-width:1000px) and (max-width:1439px){body:has(.skyline) .statement .wrap{padding-left:104px;padding-right:104px}}

.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);opacity:0;pointer-events:none}
button[disabled]{opacity:.6;cursor:wait}

/* line arrival / exit / departure animations */
.chap{transition:box-shadow .9s ease}
.chap.lk-in{box-shadow:0 0 0 1px rgba(255,255,255,.16),0 30px 80px -40px rgba(255,255,255,.18);animation:lkCardIn 1.3s cubic-bezier(.2,.7,.2,1)}
@keyframes lkCardIn{0%{box-shadow:0 0 0 1px rgba(255,255,255,0)}25%{box-shadow:0 0 0 1px rgba(255,255,255,.75),0 0 90px -10px rgba(255,255,255,.28)}100%{box-shadow:0 0 0 1px rgba(255,255,255,.16),0 30px 80px -40px rgba(255,255,255,.18)}}
.chap.lk-out{animation:lkCardOut .8s ease-out}
@keyframes lkCardOut{0%{box-shadow:0 0 0 1px rgba(255,255,255,.45)}100%{box-shadow:0 0 0 1px rgba(255,255,255,0)}}
.lk-beam{position:absolute;top:var(--ly,50%);left:0;width:62%;height:2px;margin-top:-1px;z-index:1;pointer-events:none;opacity:0;
 background:linear-gradient(90deg,#fff,rgba(255,255,255,.35) 40%,transparent);transform-origin:left center;filter:drop-shadow(0 0 6px #fff)}
.lk-beam.from-r{left:auto;right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,.35) 40%,transparent);transform-origin:right center}
.lk-beam.run{animation:lkBeam 1.25s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes lkBeam{0%{opacity:1;transform:scaleX(0)}55%{opacity:.9;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
.lk-beam.out{animation:lkBeamOut .7s ease-in forwards}
@keyframes lkBeamOut{0%{opacity:.7;transform:scaleX(1)}100%{opacity:0;transform:scaleX(0)}}
.vis2 [data-lk]{transition:filter .7s ease}
.vis2 .lk-tgt{filter:drop-shadow(0 0 5px rgba(255,255,255,.35));animation:lkTgt 1.5s ease-out}
@keyframes lkTgt{0%{filter:drop-shadow(0 0 0 rgba(255,255,255,0))}35%{filter:drop-shadow(0 0 16px rgba(255,255,255,.95))}100%{filter:drop-shadow(0 0 5px rgba(255,255,255,.35))}}
.lk-burst{fill:none;stroke:#fff;stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center}
.lk-burst.go{animation:lkBurst 1.1s ease-out}.lk-burst.b2.go{animation-delay:.18s}
@keyframes lkBurst{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(5)}}
.lk-burst.back{animation:lkImplode .8s ease-in}
@keyframes lkImplode{0%{opacity:0;transform:scale(5)}70%{opacity:.8}100%{opacity:0;transform:scale(1)}}
.lk-start{fill:#fff;opacity:0;transition:opacity .5s;filter:drop-shadow(0 0 5px #fff)}
.lk-start.on{opacity:1}
@media (prefers-reduced-motion:reduce){.chap.lk-in,.chap.lk-out,.lk-beam,.vis2 .lk-tgt,.lk-burst{animation:none!important}}

/* cards light up when their line arrives */
html.lk-active .chap .vis2{opacity:.22;filter:grayscale(1);transition:opacity 1.2s ease,filter 1.2s ease}
html.lk-active .chap.lk-in .vis2{opacity:1;filter:none}
html.lk-active .chap:not(.lk-in) .vis2 *{animation-play-state:paused!important}
.chap::after{pointer-events:none}.chap-in{pointer-events:none}.chap-in a,.chap-in button,.chap-in .chips{pointer-events:auto}
.chips span span{border:0;padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;font-size:inherit;color:inherit}

@media (min-width:901px){.chap .vis2.vis-side{left:40%;right:2%;top:4%;bottom:4%}html[dir=rtl] .chap .vis2.vis-side{left:2%;right:53%}}
.home-ind{grid-template-columns:repeat(4,1fr)}
.home-ind .ind-card{transition:border-color .3s}.home-ind .ind-card:hover{border-color:var(--line-2)}
@media (max-width:900px){.home-ind{grid-template-columns:1fr 1fr}}@media (max-width:520px){.home-ind{grid-template-columns:1fr}}
@media (max-width:700px){.steps2{grid-template-columns:1fr;gap:18px}}
.tech-logos{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px}
.tech-logos figure{margin:0;flex:1 1 280px;display:grid;place-items:center;gap:18px;padding:40px 28px;border:1px solid var(--line);border-radius:22px;background:rgba(18,20,24,.6)}
.tech-logos img{height:64px;width:auto;max-width:80%;opacity:.92}
.tech-logos figure:last-child img{height:84px}
.tech-logos figcaption{font-size:13px;color:var(--mist);letter-spacing:.04em}
.tm-note{font-size:12px;color:#646B75;margin-top:14px}
.mq-img{display:inline-flex;align-items:center}.mq-img img{display:block;width:auto;opacity:.8;transition:opacity .3s}.mq-img:hover img{opacity:1}
.marquee{direction:ltr}

/* ---- first-visit intro: logo + tagline, then they fly into the hero ---- */
#intro{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;pointer-events:none;animation:inKill .01s 7s forwards}
html:not(.intro) #intro{display:none}
#intro .ib{position:absolute;inset:0;background:radial-gradient(ellipse 46% 38% at 50% 48%,#141920,#08090b 72%)}
#intro .ic{position:relative;display:grid;justify-items:center;gap:26px}
#intro .il{position:relative;color:#fff;width:320px;transform:scale(1.5)}
#intro .il svg{display:block;width:100%;height:100%;overflow:visible;clip-path:inset(0 100% 0 0);animation:inWipe 1.25s .25s cubic-bezier(.7,0,.2,1) forwards,inGlow 1.1s 1.4s ease-out}
#intro .il::after{content:"";position:absolute;top:-14%;left:0;width:2px;height:128%;background:#fff;border-radius:2px;box-shadow:0 0 16px 4px rgba(255,255,255,.65);opacity:0;animation:inBar 1.25s .25s cubic-bezier(.7,0,.2,1) forwards}
#intro .it{display:inline-block;white-space:nowrap;color:var(--white,#fff);transform:scale(1.5)}
#intro .itx{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(8px);animation:inTag .9s 1.25s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes inWipe{to{clip-path:inset(0 0 0 0)}}
@keyframes inBar{0%{left:0;opacity:0}8%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
@keyframes inGlow{0%{filter:drop-shadow(0 0 0 rgba(255,255,255,0))}35%{filter:drop-shadow(0 0 14px rgba(255,255,255,.55))}100%{filter:drop-shadow(0 0 0 rgba(255,255,255,0))}}
@keyframes inTag{to{opacity:1;filter:blur(0);transform:none}}
@keyframes inKill{to{opacity:0;visibility:hidden}}
@keyframes inShow{to{visibility:visible}}
html.intro .hero-logo,html.intro .hero .tag{visibility:hidden;animation:inShow 0s 7s forwards}
html.intro-run .hero-logo svg{clip-path:none!important;animation:none!important}
html.intro-run .hero .tag{opacity:1!important;transform:none!important}
html.intro-run.js .hero .hero-h{animation-delay:4.3s}html.intro-run.js .hero p{animation-delay:4.5s}html.intro-run.js .hero .row{animation-delay:4.7s}

.home-ind{grid-template-columns:repeat(5,1fr)}@media (max-width:1100px){.home-ind{grid-template-columns:repeat(3,1fr)}}@media (max-width:900px){.home-ind{grid-template-columns:1fr 1fr}}@media (max-width:520px){.home-ind{grid-template-columns:1fr}}
.ind-grid:not(.home-ind)>.ind-card:last-child:nth-child(odd){grid-column:1/-1}@media (max-width:760px){.ind-grid>.ind-card{grid-column:auto!important}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* TOC: a light slides along the line to the current section; arriving section heading draws a short underline */
.toc{position:sticky}.toc .toc-ind{position:absolute;inset-inline-start:0;top:0;width:2px;height:0;border-radius:2px;background:var(--white);box-shadow:0 0 10px rgba(255,255,255,.7);opacity:0;transition:transform .55s cubic-bezier(.65,0,.25,1),height .55s cubic-bezier(.65,0,.25,1),opacity .3s;pointer-events:none}
.toc .toc-ind.on{opacity:1}.toc .toc-ind::after{content:"";position:absolute;inset-inline-start:-2px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--white);box-shadow:0 0 8px #fff}
.toc a.cur{border-color:transparent}
.hl-go{position:relative}.hl-go::after{content:"";position:absolute;inset-inline-start:0;bottom:-8px;height:2px;width:72px;background:linear-gradient(90deg,#fff,transparent);transform-origin:0 50%;animation:hlGo 1.4s cubic-bezier(.2,.7,.2,1) .25s both}
html[dir=rtl] .hl-go::after{transform-origin:100% 50%;background:linear-gradient(270deg,#fff,transparent)}
@keyframes hlGo{0%{transform:scaleX(0);opacity:1}60%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.toc .toc-ind{transition:none}.hl-go::after{animation:none}}

.sect-strip{padding:0 0 clamp(56px,7vw,96px)}.sect-strip .ss-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:18px}
.ss-card{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:16px;padding:18px 18px;font-size:15px;color:var(--white);transition:border-color .3s,background .3s}
.ss-card:hover{border-color:var(--line-2,rgba(255,255,255,.3));background:rgba(255,255,255,.03)}.ss-card svg{flex:none;width:16px;height:16px;opacity:.6}
@media (max-width:1000px){.sect-strip .ss-row{grid-template-columns:1fr 1fr}}@media (max-width:520px){.sect-strip .ss-row{grid-template-columns:1fr}}

/* home: about block right after the hero, then a services heading */
.home-about{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.home-about .txt{display:grid;gap:14px;color:var(--steel);font-size:16px;line-height:1.7}
.home-about .offices{display:grid;grid-template-columns:1fr;gap:10px;margin:0}
.home-about .offices>div{border:1px solid var(--line);border-radius:16px;padding:14px 18px;display:grid;gap:2px;font-size:14px;color:var(--steel)}
.home-about .offices em{font-style:normal;font-size:12px;letter-spacing:.08em;color:var(--steel)}.home-about .offices b{color:var(--white);font-weight:500;font-size:16px}
.svc-head{padding-bottom:8px}.svc-head .sec-head{margin-bottom:0}
.svc-more{display:flex;justify-content:center;margin:clamp(24px,3vw,40px) auto clamp(40px,5vw,72px)}
@media (max-width:860px){.home-about{grid-template-columns:1fr}}
.statement#about{padding-bottom:clamp(24px,3vw,40px)}
.svc-head{padding-top:clamp(48px,6vw,80px)!important;padding-bottom:clamp(28px,3vw,44px)!important}
.svc-head .sec-head{align-items:flex-end}

.home-vm{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:clamp(32px,4vw,52px)}
.home-vm>div{border:1px solid var(--line);border-radius:18px;padding:24px;background:rgba(255,255,255,.015)}
.home-vm b{display:block;font-weight:500;font-size:18px;color:var(--white);margin-bottom:10px}.home-vm p{color:var(--steel);font-size:15px;line-height:1.7;margin:0}
@media (max-width:700px){.home-vm{grid-template-columns:1fr}}

/* smart-room phone on the lighting-control page (controls the 3D room) */
.pvis-3d{position:relative}
.sr-phone{position:absolute;right:1%;bottom:4%;width:min(170px,32%);padding:18px 12px 14px;border-radius:26px;background:#06080b;border:1.5px solid rgba(255,255,255,.7);display:grid;gap:8px;z-index:3;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.sr-phone .sr-notch{width:46px;height:8px;border-radius:4px;background:#12151a;justify-self:center;margin:-6px 0 4px}
.sr-phone>b{font-size:14px;font-weight:600;color:#fff;padding:0 4px}.sr-phone>small{font-size:11px;color:var(--steel);padding:0 4px;margin-top:-6px}
.sr-tg{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:10px 12px;border-radius:12px;background:#10141a;border:1px solid rgba(255,255,255,.12);color:#fff;cursor:pointer;text-align:start;font:inherit}
.sr-tg:hover,.sr-tg:focus-visible{border-color:rgba(255,255,255,.45);outline:none}
.sr-tg span{display:grid;gap:2px}.sr-tg em{font-style:normal;font-size:13px;font-weight:600}.sr-tg small{font-size:11px;color:var(--steel)}
.sr-sw{flex:none;position:relative;width:34px;height:20px;border-radius:10px;background:#39ff88;transition:background .3s}
.sr-sw i{position:absolute;top:3px;inset-inline-end:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:inset-inline-end .3s}
.sr-tg.off .sr-sw{background:#2a2f36}.sr-tg.off .sr-sw i{inset-inline-end:17px}
@media (max-width:700px){.sr-phone{width:150px;padding:14px 10px 10px}.sr-tg{padding:8px 10px}}

/* home service cards: deep blue-graphite instead of flat black */
.chapters .chap{background:linear-gradient(160deg,#151c27 0%,#10151d 55%,#0c1016 100%)!important;border-color:rgba(140,170,210,.12)!important}
/* clients & technologies: light strips under the moving logos */
#clients .marquee{background:linear-gradient(180deg,#f5f6f8,#e6e9ed);border-radius:18px;box-shadow:inset 0 1px 0 #fff,0 10px 30px rgba(0,0,0,.35);-webkit-mask-image:none;mask-image:none;position:relative}
#clients .marquee::before,#clients .marquee::after{content:"";position:absolute;top:0;bottom:0;width:60px;z-index:1;pointer-events:none}
#clients .marquee::before{left:0;background:linear-gradient(90deg,#eef0f3,rgba(238,240,243,0))}#clients .marquee::after{right:0;background:linear-gradient(270deg,#eef0f3,rgba(238,240,243,0))}
#clients .mq-row{border:0;padding-block:8px}
#clients .mq-logo i{background:linear-gradient(90deg,#d5d9df,#c8cdd4,#d5d9df)}
#clients .mq-img img{filter:none;opacity:1;transition:transform .3s}
#clients .mq-img:hover img{transform:scale(1.06)}
#clients .tech2 .marquee{padding-block:6px}
/* vision & mission: light cards on the dark page */
.home-vm>div{background:linear-gradient(180deg,#f5f6f8,#e6e9ed);border-color:transparent;box-shadow:inset 0 1px 0 #fff,0 10px 30px rgba(0,0,0,.35)}
.home-vm b{color:#0b0d10}.home-vm p{color:#4e555f}
@media (min-width:701px){#about .kpis{grid-template-columns:repeat(3,1fr)}}
/* About: light-grey panel, dark page edges left/right kept */
#about.statement{background:transparent}
#about>.wrap{background:linear-gradient(180deg,#f3f4f6,#e4e7eb);border-radius:clamp(22px,3vw,40px);padding:clamp(40px,5vw,72px) clamp(22px,4vw,64px);box-shadow:inset 0 1px 0 #fff,0 30px 80px rgba(0,0,0,.45);
 --white:#0B0D10;--steel:#565d67;--line:rgba(11,13,16,.12);color:#0B0D10}
#about .eyebrow{color:#565d67}
#about h2 .w{color:rgba(11,13,16,.2)}#about h2 .w.on,#about h2 em{color:#0B0D10}
#about .kpis strong{color:#0B0D10}#about .kpis{border-color:rgba(11,13,16,.12)}
#about p,#about .txt{color:#4e555f}
#about .lnk{color:#0B0D10;border-color:rgba(11,13,16,.3)}
#about .home-vm>div{background:#fff;box-shadow:0 2px 10px rgba(11,13,16,.06)}
#about .home-about .offices>div{border-color:rgba(11,13,16,.12);background:rgba(255,255,255,.55)}
#about .offices em{color:#6b727c}#about .offices b{color:#0B0D10}
@media (max-width:700px){#about>.wrap{margin-inline:12px;width:auto}}
#about>.wrap{width:min(1160px,calc(100% - clamp(40px,12vw,240px)))!important;max-width:none;margin-inline:auto}
@media (max-width:700px){#about>.wrap{width:calc(100% - 40px)!important;margin-inline:auto}}
/* home service cards: light glass over the dark animated background */
.chapters .chap{background:linear-gradient(160deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.035) 55%,rgba(255,255,255,.02) 100%)!important;
 -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
 border:1px solid rgba(255,255,255,.14)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.03),0 24px 60px rgba(0,0,0,.35)!important}
.chapters .chap:hover{border-color:rgba(255,255,255,.24)!important}
.chapters .chap::after{background:linear-gradient(0deg,rgba(10,12,15,.35) 0%,rgba(10,12,15,0) 60%)!important}
.chapters .chap{background:linear-gradient(160deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.055) 50%,rgba(255,255,255,.03) 100%)!important}
/* ===== site-wide colour break (matches home: light glass + light-grey panels) ===== */
:root{--glass:linear-gradient(160deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.05) 55%,rgba(255,255,255,.025) 100%);--glass-b:rgba(255,255,255,.14);--glass-sh:inset 0 1px 0 rgba(255,255,255,.2),0 18px 44px rgba(0,0,0,.3)}
.ind-card,.cards>div,.hub-row,.sublinks a,.setra-sol>div,.sp-card,.setra-sectors>div,.ss-card,.svc>a,.svc>article,.faq2 details,.ptable,.ztmp{
 background:var(--glass)!important;border:1px solid var(--glass-b)!important;box-shadow:var(--glass-sh);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%)}
.ind-card:hover,.hub-row:hover,.sublinks a:hover,.ss-card:hover,.svc>a:hover{border-color:rgba(255,255,255,.28)!important;background:linear-gradient(160deg,rgba(255,255,255,.15),rgba(255,255,255,.06))!important}
.faq2 details{border-radius:16px;padding-inline:18px;margin-bottom:10px}
/* process steps: numbered glass dots on a glowing line */
.steps2{border-top:1px solid rgba(255,255,255,.18)}
.steps2 li::after{width:12px;height:12px;top:-7px;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.12),0 0 14px rgba(255,255,255,.6)}
.steps2 li::before{font-size:13px;color:#fff;opacity:.8}
/* quote / contact form: dark glass panel */
form[data-quote]{background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.14);border-radius:clamp(20px,2.4vw,30px);padding:clamp(22px,3vw,38px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 30px 70px rgba(0,0,0,.4);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
form[data-quote] .f label{color:#c5cad1}
form[data-quote] .f :is(input,select,textarea){background:rgba(8,9,11,.55);color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:12px}
form[data-quote] .f :is(input,select,textarea):focus{border-color:rgba(255,255,255,.6);background:rgba(8,9,11,.75)}
form[data-quote] .f select{text-overflow:ellipsis}
form[data-quote] .f select option{color:#0B0D10}
form[data-quote] .drop{border:1px dashed rgba(255,255,255,.28)!important;border-radius:12px;background:rgba(255,255,255,.03);color:#c5cad1}
form[data-quote] .drop b{background:#fff;color:#0B0D10;border-radius:99px;padding:6px 14px;font-size:13px}
form[data-quote] .form-foot small{color:#9198a2}
form[data-quote] button[type=submit]{background:#fff!important;color:#0B0D10!important}
/* contact details beside the form */
.q-side .contacts{display:grid;gap:0;margin-top:8px;border-top:1px solid rgba(255,255,255,.12)}
.q-side .contacts>div{background:none!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.12)!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:0;padding:18px 0;display:grid;gap:6px}
.q-side .contacts small{font-size:12px;letter-spacing:.08em;color:#9198a2}
.q-side .contacts span{font-size:clamp(18px,1.8vw,22px);color:#fff}
/* header turns to glass when scrolled */
.top.solid{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)),rgba(10,12,15,.6)!important;border-color:rgba(255,255,255,.12)!important}
/* footer: lifted charcoal */
footer{background:linear-gradient(180deg,#0f1216,#14181d);border-top:1px solid rgba(255,255,255,.08)}
/* service-page hero chips / tags */
.tags a,.chips span{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.q-side .contacts small{font-size:13px!important;color:#9198a2!important;letter-spacing:.06em!important}

/* WhatsApp floating button */
.wa{position:fixed;z-index:45;bottom:22px;inset-inline-end:22px;display:flex;align-items:center;gap:8px;height:52px;padding:0 18px 0 14px;border-radius:99px;background:#25D366;color:#fff;font-weight:600;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .25s}
.wa:hover{transform:translateY(-2px)}.wa svg{width:26px;height:26px}
@media (max-width:900px){.wa{bottom:86px;inset-inline-end:14px;width:52px;padding:0;justify-content:center}.wa span{display:none}}
html.intro .wa{opacity:0}
/* Setra product pages */
.dev-img{margin:0;border-radius:24px;background:radial-gradient(70% 70% at 50% 45%,rgba(255,255,255,.08),transparent 70%)}.dev-img img{display:block;width:100%;height:auto}
.dev-hl{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}.dev-hl span{font-size:13px;padding:7px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05)}
.dev-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.dev-card{display:grid;gap:10px;justify-items:start;align-content:end;padding:20px;border-radius:20px;min-height:160px;background:var(--glass);border:1px solid var(--glass-b);box-shadow:var(--glass-sh);color:var(--white)}
.dev-card img{width:100%;max-height:140px;object-fit:contain}.dev-card b{font-weight:500;font-size:16px}
.sp-card .lnk{margin-top:14px;display:inline-flex}
@media (max-width:800px){.dev-row{grid-template-columns:1fr}}
/* scroll cue sits under the hero buttons (not over the city); hidden on phones */
.hero .hero-in .scroll{position:relative;left:auto;bottom:auto;transform:none;display:block;margin:26px auto 0;align-self:center;flex:none}
@media (max-width:700px),(max-height:820px){.hero .hero-in .scroll{display:none}}
/* phones: WhatsApp lives in the bottom bar instead of floating over content */
@media (max-width:900px){.mbar{grid-template-columns:52px 1fr 1.4fr!important}.mbar .mwa{padding:0;justify-content:center;background:#25D366;color:#fff;border-color:#25D366}.mbar .mwa svg{width:24px;height:24px}a.wa{display:none!important}}
@media (min-width:901px){.mbar .mwa{display:none}}
@media (max-width:700px) and (max-height:720px){.hero:has(.skyline) .hero-in>p{display:none}.hero:has(.skyline){padding-top:76px}}
@media (max-width:700px) and (max-height:780px){.hero:has(.skyline) .hero-in>p{display:none}.hero:has(.skyline){padding-top:76px}}
@media (max-width:700px){.hero:has(.skyline) .hero-logo{margin-bottom:-26px}}
/* floating WhatsApp waits until the visitor scrolls past the home city so it never sits on the drawing */
html.in-hero a.wa{opacity:0!important;pointer-events:none;transform:translateY(16px)}
.dev-ico{width:100%;height:140px;display:grid;place-items:center}.dev-ico svg{width:120px;height:auto}
.dev-trio{width:100%;height:140px;display:flex;align-items:center;justify-content:center}
.dev-trio img{width:34%;max-height:96px;object-fit:contain;margin-inline:-3%;filter:drop-shadow(0 8px 16px rgba(0,0,0,.45))}
.dev-trio img:nth-child(2){width:38%;max-height:118px;position:relative;z-index:1}
.ptable td[data-l]::before{display:none}
@media (max-width:560px){.ptable td[data-l]::before{content:attr(data-l);display:block;margin-top:8px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#7a818b}}
/* client logos (full colour on the light strip) */
.mq-cl img{display:block;max-width:160px;max-height:60px;width:auto;height:auto;object-fit:contain}
@media (max-width:700px){.mq-cl img{max-width:110px;max-height:48px}}
.mq-logo.mq-cl{width:190px}@media (max-width:700px){.mq-logo.mq-cl{width:140px}}
/* client rows: same size and layout as the technologies strip */
#clients .mq-row{grid-template-columns:1fr;gap:12px;padding-block:0;margin-top:22px}
#clients .mq-row .marquee{padding-block:6px}
.mq-logo.mq-cl{width:auto;height:46px;padding-inline:clamp(24px,3vw,44px)}
.mq-cl img{max-width:150px!important;max-height:40px!important}
@media (max-width:700px){.mq-logo.mq-cl{width:auto;height:42px;padding-inline:22px}.mq-cl img{max-width:120px!important;max-height:34px!important}}

.vis2{position:absolute;inset:0;z-index:-1}
.vis2 svg{width:100%;height:100%;display:block;direction:ltr}
.vis2 .flow{stroke-dasharray:5 11;animation:v2dash 1.4s linear infinite}
.vis2 .f2{animation-duration:2.6s}.vis2 .f3{animation-duration:3s;opacity:.5}
@keyframes v2dash{to{stroke-dashoffset:-32}}
.vis2 .spin{transform-box:fill-box;transform-origin:center;animation:v2spin 3s linear infinite}
.vis2 .s2{transform-box:view-box;animation-duration:2s}.vis2 .s3{transform-box:view-box;animation-duration:60s}
@keyframes v2spin{to{transform:rotate(360deg)}}
.vis2 .blink{animation:v2blink 2.2s ease-in-out infinite}.vis2 .b2{animation-delay:1.1s}
@keyframes v2blink{50%{opacity:.25}}
.vis2 .pulse{animation:v2blink 1.6s ease-in-out infinite}
.vis2 .neon{filter:drop-shadow(0 0 6px #39ff88);animation:v2blink 2.4s ease-in-out infinite}
.vis2 .fill{transform-box:fill-box;transform-origin:left center;animation:v2fill 7s ease-in-out infinite}
@keyframes v2fill{0%{transform:scaleX(.15)}85%,100%{transform:scaleX(1)}}
.vis2 .heat{animation:v2heat 5s ease-in-out infinite}
@keyframes v2heat{0%,100%{opacity:.12}50%{opacity:.45}}
.vis2 .draw{stroke-dasharray:240;stroke-dashoffset:240;animation:v2draw 6s ease-in-out infinite}
@keyframes v2draw{60%,100%{stroke-dashoffset:0}}

.vis2 .sweep{animation:v2sweep 8s ease-in-out infinite}
@keyframes v2sweep{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(6deg)}}
.vis2 .nc{animation:v2blink 1.4s ease-in-out infinite;filter:drop-shadow(0 0 8px #fff)}
.vis2 .wave{animation:v2wave 2.4s ease-out infinite;opacity:0}.vis2 .w2{animation-delay:.4s}.vis2 .w3{animation-delay:.8s}
@keyframes v2wave{0%{opacity:0}30%{opacity:.8}100%{opacity:0}}
.vis2 .tank{animation:v2heat 6s ease-in-out infinite}
.vis2 .gauge{animation:v2gauge 6s ease-in-out infinite}
@keyframes v2gauge{0%,100%{transform:rotate(-30deg)}50%{transform:rotate(25deg)}}
.vis2 .lh2{filter:drop-shadow(0 0 6px #fff)}
.vis2 .dim{animation:v2dim 8s ease-in-out infinite}.vis2 .d1{animation-delay:.6s}.vis2 .d2{animation-delay:1.2s}
@keyframes v2dim{0%,100%{opacity:.35}50%{opacity:1}}
.vis2 .kp{opacity:.2;animation:v2kp 8s steps(1,end) infinite}.vis2 .k1{animation-delay:2s}.vis2 .k2{animation-delay:4s}.vis2 .k3{animation-delay:6s}
@keyframes v2kp{0%{opacity:1}25%,100%{opacity:.2}}

.vis2 .fx-off{transition:opacity .35s}.vis2 svg.fx-booting .fx-off,.vis2 svg.fx-live .fx-off{opacity:0}
.vis2 .fx-boot{opacity:0;transition:opacity .35s}.vis2 svg.fx-booting .fx-boot{opacity:1}
.vis2 .fx-bar{transform-box:fill-box;transform-origin:left center;transform:scaleX(0)}.vis2 svg.fx-booting .fx-bar{animation:fxBar 1.1s ease-in-out forwards}
@keyframes fxBar{to{transform:scaleX(1)}}
.vis2 .fx-scr{opacity:0;transition:opacity .6s}.vis2 svg.fx-live .fx-scr{opacity:1}
.vis2 svg:not(.fx-live) [data-lk="cem"] .fx-scr *{animation-play-state:paused}
.vis2 .fx-main,.vis2 .fx-main2,.vis2 .fx-strip{transition:fill .4s}.vis2 svg.fx-alarm .fx-main{fill:#d32f2f}.vis2 svg.fx-alarm .fx-main2{fill:#b71c1c}.vis2 svg.fx-alarm .fx-strip{fill:#9a1313}
.vis2 svg.fx-alarm .fx-led{fill:#ff5252}.vis2 svg.fx-alarm .fx-tile{stroke:#ff5252}
.vis2 svg.fx-alarm .fx-s2{fill:#ff8a80}
.vis2 .cem-leaf{transform-box:view-box;transform-origin:162px 286px;transition:transform 1.1s cubic-bezier(.3,.7,.2,1)}
.vis2 svg.door-open .cem-leaf{transform:scaleX(.2) skewY(14deg)}
.vis2 .room-in,.vis2 .door-flow{opacity:0;transition:opacity .8s}.vis2 svg.door-open .room-in{opacity:1}.vis2 svg.door-open .door-flow{opacity:.75}
.vis2 .door-btn{cursor:pointer;pointer-events:auto;outline:none}
.vis2 .door-btn .db-cap{transition:fill .3s,filter .3s}.vis2 .door-btn:hover .db-cap,.vis2 .door-btn:focus-visible .db-cap{filter:drop-shadow(0 0 8px rgba(255,255,255,.8))}
.vis2 .door-btn:active .db-cap{fill:#1a1d22}
.vis2 .db-ring{transform-box:fill-box;transform-origin:center;animation:dbRing 2.4s ease-out infinite}
@keyframes dbRing{0%{opacity:.8;transform:scale(.8)}100%{opacity:0;transform:scale(1.6)}}
.vis2 svg.door-open .db-cap{fill:#fff}.vis2 svg.door-open .db-ring{animation:none;opacity:0}
@media (prefers-reduced-motion:reduce){.vis2 *{animation:none!important}.vis2 .fill{transform:none}.vis2 .draw{stroke-dashoffset:0}}
@media (min-width:901px){.duo .chap .vis2{bottom:42%;top:4%}}
@media (max-width:900px){.chap .vis2{bottom:40%}}

.vis2 .fanr{animation-duration:1.4s}
.vis2 .s4{transform-box:view-box;animation-duration:70s}
.vis2 .tubeheat{stroke-dasharray:14 220;animation:v2tube 3.4s linear infinite;opacity:.7}
@keyframes v2tube{to{stroke-dashoffset:-234}}
.vis2 .pend .lh2{animation:v2glow 5s ease-in-out infinite}
@keyframes v2glow{0%,100%{opacity:.85}50%{opacity:1}}
.vis2 .ev-fill{transition:width .8s linear}
/* smart room */
.vis2 .lc-sun{opacity:0;transition:opacity 1.2s ease}.vis2 svg.lc-open .lc-sun{opacity:1}
.vis2 .lc-sundisc{opacity:0;transition:opacity 1s}.vis2 svg.lc-open .lc-sundisc{opacity:1}
.vis2 .lc-curtain{transition:transform 1.4s cubic-bezier(.3,.7,.2,1)}
.vis2 .lc-curtain.l{transform-box:view-box;transform-origin:40px 112px}.vis2 .lc-curtain.r{transform-box:view-box;transform-origin:200px 112px}
.vis2 svg.lc-open .lc-curtain{transform:scaleX(.18)}
.vis2 .lc-light{transition:opacity .6s}.vis2 svg.lc-lights-off .lc-light path,.vis2 svg.lc-lights-off .lc-light .lh2{opacity:0}
.vis2 .lc-light path,.vis2 .lc-light .lh2{transition:opacity .6s}
.vis2 .lc-air{transition:opacity .6s}.vis2 svg.lc-ac-off .lc-air{opacity:0}
.vis2 svg.lc-ac-off .lc-acled,.vis2 svg.lc-ac-off .lc-actemp{opacity:.15}
.vis2 .lc-tg{cursor:pointer;pointer-events:auto;outline:none}
.vis2 .lc-tg:hover rect:first-child,.vis2 .lc-tg:focus-visible rect:first-child{stroke:rgba(255,255,255,.4)}
.vis2 .lc-sw{fill:#39ff88;fill-opacity:.85;transition:fill .3s,fill-opacity .3s}
.vis2 .lc-knob{transition:transform .3s cubic-bezier(.3,.7,.2,1)}
.vis2 .lc-tg.off .lc-sw{fill:#2a2f36;fill-opacity:1}.vis2 .lc-tg.off .lc-knob{transform:translateX(-12px)}

.hero .skyline{position:absolute;left:50%;bottom:0;width:max(100%,860px);transform:translateX(-50%);z-index:-2;pointer-events:none}
.hero .skyline svg{display:block;width:100%;height:auto;overflow:visible}
.skyline .near{}
.skyline .lights{}
.skyline .tw{fill:#fff;opacity:.08;animation:skTw 11s ease-in-out infinite}
@keyframes skTw{0%,100%{opacity:.05}45%,60%{opacity:.42}}
.skyline .pv{fill:#0d1014;stroke:rgba(255,255,255,.5);stroke-width:.9}
.skyline .avl{fill:#ff2a2a;animation:skBlink 1.8s steps(2,end) infinite;filter:drop-shadow(0 0 3px #ff2a2a)}
@keyframes skBlink{50%{opacity:.1}}
@keyframes skPulse{50%{opacity:.45}}
.skyline .neon{filter:drop-shadow(0 0 5px #39ff88);animation:skPulse 2.4s ease-in-out infinite}
.skyline .hsign{fill:#bfeaff;filter:drop-shadow(0 0 2px #7fd4ff) drop-shadow(0 0 7px #4cc3ff) drop-shadow(0 0 16px rgba(76,195,255,.8));animation:skNeon 5s ease-in-out infinite}
@keyframes skNeon{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.55}94%{opacity:1}96%{opacity:.7}97%{opacity:1}}
.skyline .glowbar,.skyline .lh{filter:drop-shadow(0 0 6px rgba(255,255,255,.8))}
.skyline .lamp{animation:skLamp 7s ease-in-out infinite}
@keyframes skLamp{0%,100%{opacity:.55}40%,60%{opacity:1}}
.skyline .bus{stroke-dasharray:4 56;animation:skBus 4s linear infinite}
@keyframes skBus{to{stroke-dashoffset:-240}}
.skyline .riser{stroke-dasharray:3 26;animation:skRise 2.6s linear infinite}.skyline .r2{animation-duration:3.4s;opacity:.7}
@keyframes skRise{to{stroke-dashoffset:58}}
.skyline .scan{animation:skScan 2.6s ease-in-out infinite;opacity:.2}
@keyframes skScan{0%,30%{opacity:1}31%,100%{opacity:.2}}
.skyline .fan{animation:skSpin 2.2s linear infinite}
@keyframes skSpin{to{transform:rotate(360deg)}}
.skyline .bulb{animation:skPulse 4s ease-in-out infinite;filter:drop-shadow(0 0 3px #fff)}
.skyline .hl{animation:skPulse 1.8s ease-in-out infinite;filter:drop-shadow(0 0 4px #fff)}
.skyline .spark{stroke-dasharray:240;stroke-dashoffset:240;animation:skDraw 6s ease-in-out infinite}
@keyframes skDraw{55%,100%{stroke-dashoffset:0}}
.skyline .co .pulse,.skyline .co .blink{animation:skPulse 2s ease-in-out infinite}
@media (max-width:1100px){.skyline .co{display:none}}
.skyline .cam{animation:skCam 9s ease-in-out infinite}
@keyframes skCam{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(10deg)}}
.skyline .tank{animation:skPulse 5s ease-in-out infinite}
.skyline .mb{filter:drop-shadow(0 0 1.2px rgba(255,255,255,.8))}
.skyline .mb-s{opacity:0;animation-name:mbSlide;animation-timing-function:ease;animation-iteration-count:infinite;animation-fill-mode:both}
@keyframes mbSlide{0%{opacity:0}4%{opacity:1}29%{opacity:1}33.3%{opacity:0}100%{opacity:0}}
.skyline .mb-wave{transform-box:view-box;animation:mbWave 2s ease-in-out infinite alternate}
@keyframes mbWave{from{transform:translateY(0)}to{transform:translateY(55px)}}
.skyline .tw-c{fill:currentColor}
html[dir=rtl] .hero .skyline .mb-c text{transform:none}
.skyline .hw-l{animation:hwL 1.65s cubic-bezier(.5,0,.6,1) infinite;opacity:0}.skyline .hw-r{animation:hwR 1.65s cubic-bezier(.5,0,.6,1) infinite;opacity:0}
@keyframes hwL{0%{transform:translateX(0);opacity:0}15%{opacity:1}85%{opacity:.9}100%{transform:translateX(100px);opacity:0}}
@keyframes hwR{0%{transform:translateX(0);opacity:0}15%{opacity:1}85%{opacity:.9}100%{transform:translateX(-100px);opacity:0}}
.skyline .feed{stroke-dasharray:3 15;animation:skFeed 1.4s linear infinite;opacity:.85}
@keyframes skFeed{to{stroke-dashoffset:-18}}
.skyline .sw{fill:#fff;opacity:.12;animation:skSw 6s steps(1,end) infinite}.skyline .sw2{animation-delay:-1.5s}.skyline .sw3{animation-delay:-3s}.skyline .sw4{animation-delay:-4.5s}
@keyframes skSw{0%{opacity:.85}50%{opacity:.12}}
.skyline .wf{opacity:.2;animation:skWf 2.4s ease-in-out infinite}.skyline .w2{animation-delay:.3s}
@keyframes skWf{30%,60%{opacity:.9}}
.skyline .pv{fill:#173f73;stroke:#8bb8f0;stroke-width:1}
.skyline .tw-w{fill:#ffd58a}
.skyline .evc{fill:#e9eef3;stroke:#fff}
.skyline .bfill{transform-box:fill-box;transform-origin:left;animation:skCharge 3.2s ease-in-out infinite;filter:drop-shadow(0 0 2px #39ff88)}
@keyframes skCharge{0%{transform:scaleX(.08)}85%,100%{transform:scaleX(1)}}
.skyline .palm{filter:drop-shadow(0 0 2px rgba(70,184,102,.35))}
.skyline .lh{fill:#fff4dc;filter:drop-shadow(0 0 6px rgba(255,214,150,.95))}
.skyline .car{fill:#5a1d20;stroke:#ff8a80}
.skyline .swc{stroke:#7fb6e6}
.skyline .tank{fill:#e8893a}
.skyline .smh .sw{fill:#ffd36b}
.skyline .smh>path:first-child{stroke:#d9825b}
.skyline .smh .wf{stroke:#4cc3ff}.skyline .smh circle{fill:#4cc3ff}
.skyline .cam rect{fill:#eef2f5;stroke:#fff}.skyline .cam rect+rect{fill:#1d232a}.skyline .cam circle{fill:#1d232a;opacity:1;animation:none}
.skyline .evring{filter:drop-shadow(0 0 3px #39ff88);animation:skPulse 2.4s ease-in-out infinite}
.skyline .evflow{stroke-dasharray:2 7;animation:skFeed 1s linear infinite}
.skyline .node{animation:skPulse 3s ease-in-out infinite}
.hero:has(.skyline)::after{background:radial-gradient(ellipse 40% 34% at 50% 50%,rgba(8,9,11,.78),rgba(8,9,11,.35) 60%,transparent 85%),linear-gradient(180deg,rgba(8,9,11,.55) 0%,transparent 22%,transparent 94%,rgba(8,9,11,.6) 100%)}
html[dir=rtl] .hero .skyline svg{transform:scaleX(-1)}html[dir=rtl] .hero .skyline text{transform:scaleX(-1);transform-box:fill-box;transform-origin:center}
@media (max-width:700px){
.hero:has(.skyline){height:auto;min-height:100svh;max-height:none;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;padding:84px 0 calc(74px + env(safe-area-inset-bottom,0px))}
.hero:has(.skyline) .hero-in{gap:12px;padding-top:0}
.hero:has(.skyline) .hero-logo{width:min(190px,52vw)!important;margin-bottom:2px}
.hero:has(.skyline) .tag{font-size:12px}
.hero:has(.skyline) h1{font-size:clamp(22px,6.4vw,27px)!important}
.hero:has(.skyline) p{font-size:14.5px;line-height:1.55;max-width:34ch}
.hero:has(.skyline) .row{flex-direction:row;flex-wrap:nowrap;width:100%;gap:8px;justify-content:center}
.hero:has(.skyline) .row .btn{justify-content:center;padding:12px 14px;font-size:13.5px;white-space:nowrap}
.hero:has(.skyline) .row .btn svg{display:none}
.hero .skyline{position:relative;order:2;left:auto;bottom:auto;transform:none;width:100%;height:auto;min-height:200px;margin-top:16px;flex:1 1 0;overflow:hidden;opacity:1;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.hero .skyline svg{position:absolute;left:0;bottom:0;width:900px;max-width:none;animation:skPan 26s ease-in-out infinite alternate}
@keyframes skPan{0%,6%{translate:0 0}94%,100%{translate:calc(100vw - 900px) 0}}
.hero:has(.skyline)::after{background:linear-gradient(180deg,rgba(8,9,11,.5) 0%,transparent 30%)}
}
@media (max-width:700px) and (max-height:780px){.hero .skyline{min-height:170px}.hero .skyline svg{width:760px}@keyframes skPan{0%,6%{translate:0 0}94%,100%{translate:calc(100vw - 760px) 0}}}
@media (min-width:701px){.hero:has(.skyline) .hero-in{transform:translateY(-17vh)}}
@media (min-width:701px) and (max-height:820px){.hero:has(.skyline) .hero-in{transform:translateY(-15vh);gap:12px}.hero:has(.skyline) .hero-logo{width:min(230px,40vw)!important}.hero:has(.skyline) p{max-width:540px}}
@media (prefers-reduced-motion:reduce){.skyline *{animation:none!important;transition:none!important}}

.setra-sol{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.setra-sol>div{border:1px solid var(--line);border-radius:18px;padding:22px;background:rgba(255,255,255,.015)}
.setra-sol h3{font-size:17px;font-weight:500;margin:0 0 8px}
.setra-sol p{font-size:14px;color:var(--steel);margin:0 0 14px;line-height:1.6}
.setra-sol .fit{display:flex;flex-wrap:wrap;gap:6px}.setra-sol .fit span{font-size:12px;border:1px solid var(--line-2,rgba(255,255,255,.18));border-radius:99px;padding:4px 10px;color:var(--white)}
.setra-sol .pv{font-size:12px;color:var(--steel);margin:-6px 0 12px;letter-spacing:.02em}
.setra-prod{display:grid;gap:14px}
.sp-card{display:grid;grid-template-columns:300px 1fr;gap:28px;border:1px solid var(--line);border-radius:22px;padding:22px;align-items:center;background:rgba(255,255,255,.015)}
.sp-card .sp-vis{margin:0}.sp-card .sp-vis img{display:block;width:100%;height:auto;border-radius:14px}
.sp-card h3{font-size:22px;font-weight:500;margin:0}
.sp-card .sp-tag{font-size:13px;color:var(--steel);margin:6px 0 14px}
.sp-card ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
.sp-card li{font-size:14px;color:var(--steel);line-height:1.5;padding-inline-start:14px;position:relative}
.sp-card li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--white)}
.sp-card li b{color:var(--white);font-weight:500}
.sp-card .sp-best{margin-top:14px;font-size:14px}.sp-card .sp-best b{font-weight:500}
.setra-cmp{margin-top:18px}.setra-cmp td:first-child{color:var(--white)}
.setra-note{font-size:13px;color:var(--steel);margin-top:16px;line-height:1.6}
.sd-led{animation:sdLed 2.4s ease-in-out infinite}@keyframes sdLed{50%{opacity:.35}}
.sd-ring{filter:drop-shadow(0 0 5px rgba(57,217,138,.7));animation:sdRing 3s ease-in-out infinite}@keyframes sdRing{50%{opacity:.6}}
@media (max-width:1000px){.setra-sol{grid-template-columns:1fr 1fr}.sp-card{grid-template-columns:1fr}.sp-card .sp-vis{max-width:340px}}
@media (max-width:600px){.setra-sol{grid-template-columns:1fr}.sp-card ul{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.sd-led,.sd-ring{animation:none}}

.setra-sectors{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.setra-sectors>div{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line);border-radius:18px;padding:22px;background:rgba(255,255,255,.015)}
.setra-sectors .sec-ic{flex:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-2,rgba(255,255,255,.18));display:grid;place-items:center;color:var(--white)}
.setra-sectors .sec-ic svg{width:22px;height:22px}
.setra-sectors h3{font-size:17px;font-weight:500;margin:0 0 6px}.setra-sectors p{font-size:14px;color:var(--steel);margin:0;line-height:1.6}
@media (max-width:700px){.setra-sectors{grid-template-columns:1fr}}