.cinema-art{background-image:none!important;background:radial-gradient(ellipse at 72% 50%,#29302755,transparent 60%),#090d0b!important}.cinema-art:after{display:none}.engine-assembly{position:absolute;inset:-4% -5% -4% 20%;pointer-events:none;z-index:1;perspective:1000px}.assembly-svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 25px 20px #0008)}.engine-part{transform-box:fill-box;transform-origin:center;animation:assemble-part 12s cubic-bezier(.45,0,.2,1) infinite;--x:0px;--y:0px;--turn:0deg}.part-core{--turn:7deg}.part-left{--x:-140px;--y:-30px;--turn:-12deg}.part-right{--x:140px;--y:-30px;--turn:12deg}.engine-connectors,.engine-signal{animation:engine-connect 12s ease-in-out infinite}.engine-signal{stroke-dashoffset:0;animation:engine-connect 12s ease-in-out infinite,engine-flow 2s linear infinite}.hero-light-trails{display:none}.motion-paused .engine-part,.motion-paused .engine-connectors,.motion-paused .engine-signal,.motion-offscreen .engine-part,.motion-offscreen .engine-connectors,.motion-offscreen .engine-signal{animation-play-state:paused}html[dir=rtl] .engine-assembly{inset:-4% 20% -4% -5%;transform:scaleX(-1)}@keyframes assemble-part{0%,10%,100%{transform:translate(var(--x),var(--y)) rotate(var(--turn));opacity:.65}35%,75%{transform:translate(0,0) rotate(0);opacity:1}}@keyframes engine-connect{0%,24%,90%,100%{opacity:0}40%,75%{opacity:1}}@keyframes engine-flow{to{stroke-dashoffset:-248}}@media(max-width:720px){.engine-assembly{inset:10% -45% -15% -20%;opacity:.65}html[dir=rtl] .engine-assembly{inset:10% -20% -15% -45%}.cinema-shade{background:linear-gradient(90deg,#090d0bf0,#090d0b80),linear-gradient(0deg,#090d0b,transparent 35%)} }@media(prefers-reduced-motion:reduce){.engine-part{transform:none!important;opacity:1}.engine-connectors{opacity:1}.engine-signal{display:none}}
/* Dedicated visual column keeps the engine clear of the headline. */
.cinema{height:740px}.cinema h1{font-size:clamp(54px,5.1vw,78px);max-width:52%;letter-spacing:-3px}.cinema h1 em{letter-spacing:-2px}.cinema p{max-width:39%;color:#e0e4dc}.engine-assembly{inset:45px 0 75px 47%;overflow:hidden}.assembly-svg{overflow:visible;transform:scale(1.08);filter:brightness(1.48) contrast(1.08) drop-shadow(0 18px 20px #0007)}.cinema-shade{background:linear-gradient(90deg,#090d0b 0%,#090d0bf0 35%,#090d0b00 55%);pointer-events:none}.cinema-art{background:radial-gradient(ellipse at 75% 45%,#45594a50,transparent 53%),#090d0b!important}.engine-part{opacity:1}@keyframes assemble-part{0%,10%,100%{transform:translate(var(--x),var(--y)) rotate(var(--turn));opacity:1}35%,75%{transform:translate(0,0) rotate(0);opacity:1}}html[dir=rtl] .engine-assembly{inset:45px 47% 75px 0}html[dir=rtl] .cinema-shade{background:linear-gradient(270deg,#090d0b 0%,#090d0bf0 35%,#090d0b00 55%)}html[dir=rtl] .cinema h1{font-size:64px;max-width:50%}@media(max-width:1050px) and (min-width:721px){.cinema h1{font-size:59px}.cinema p{max-width:43%;font-size:15px}.engine-assembly{left:44%}.cinema .actions{gap:20px}.cinema-link{font-size:10px}}@media(max-width:720px){.cinema{height:940px}.cinema-inner{padding-top:48px}.cinema h1{font-size:54px;max-width:100%;letter-spacing:-2px}.cinema p{max-width:100%;font-size:14px}.cinema .actions{flex-direction:row;flex-wrap:wrap;gap:18px;margin-top:22px}.engine-assembly{inset:460px -8% 80px -8%;opacity:1}.assembly-svg{transform:scale(1.04)}.cinema-shade{background:linear-gradient(0deg,#090d0b 0%,transparent 15%,transparent 50%,#090d0b 60%)}.cinema-bottom{font-size:8px}.cinema-art{background:radial-gradient(ellipse at 50% 73%,#45594a55,transparent 45%),#090d0b!important}html[dir=rtl] .engine-assembly{inset:460px -8% 80px -8%}html[dir=rtl] .cinema h1{font-size:47px;max-width:100%}html[dir=rtl] .cinema-shade{background:linear-gradient(0deg,#090d0b 0%,transparent 15%,transparent 50%,#090d0b 60%)}}
/* Fit the complete assembly inside the hero rather than enlarging it. */
.engine-assembly{inset:45px 2% 105px 46%;display:flex;align-items:center;justify-content:center;overflow:visible}.assembly-svg{width:100%;height:100%;max-height:570px;transform:none;overflow:visible}.cinema-art{animation:none!important;translate:0 0!important}.cinema{height:720px}.cinema-inner{padding-top:66px}.cinema h1{font-size:clamp(50px,4.7vw,72px);line-height:1.08;max-width:50%;margin-bottom:25px}.cinema .actions{margin-top:26px}.cinema-bottom{padding-bottom:42px}html[dir=rtl] .engine-assembly{inset:45px 46% 105px 2%}@media(min-width:1600px){.cinema{height:760px}.cinema-inner{padding-top:75px}.assembly-svg{max-height:610px}}@media(max-width:1050px) and (min-width:721px){.cinema h1{font-size:54px;max-width:50%}.engine-assembly{left:47%;right:0}.cinema{height:690px}}@media(max-width:720px){.cinema{height:920px}.cinema-inner{padding-top:47px}.cinema h1{font-size:52px;max-width:100%;line-height:1.07}.engine-assembly{inset:455px 1% 80px 1%;overflow:hidden}.assembly-svg{transform:none;max-height:370px}.cinema-bottom{padding-bottom:27px}html[dir=rtl] .engine-assembly{inset:455px 1% 80px 1%}html[dir=rtl] .cinema h1{max-width:100%;font-size:45px}}@media(max-width:380px){.cinema h1{font-size:45px}.cinema{height:940px}.engine-assembly{top:490px}html[dir=rtl] .engine-assembly{top:490px}}
.engine-assembly{inset:45px 2% 100px 46%}.assembly-svg{filter:drop-shadow(0 15px 25px #0005);max-height:560px}.module-tile{--x:0px;--y:0px}.module-tile.part-left{--x:-35px;--turn:-3deg}.module-tile.part-right{--x:35px;--turn:3deg}.part-core{--turn:0deg}.engine-connectors{stroke-dasharray:6 5}.cinema-art{background:radial-gradient(ellipse at 75% 50%,#294f4140,transparent 52%),#090d0b!important}html[dir=rtl] .engine-assembly{transform:none}@media(max-width:720px){.engine-assembly{inset:460px 0 80px 0}.assembly-svg{max-height:360px}html[dir=rtl] .engine-assembly{inset:460px 0 80px 0}}
.booster-stream{animation:booster-flow 10s linear infinite}.ai-booster-shell{filter:drop-shadow(0 0 5px #65bf9b40)}@keyframes booster-flow{to{stroke-dashoffset:-396}}.motion-paused .booster-stream{animation-play-state:paused}@media(prefers-reduced-motion:reduce){.booster-stream{animation:none}}

.motion-offscreen .booster-stream{animation-play-state:paused}
.eco-status{animation:eco-status 3s ease-in-out infinite}.ecosystem-heart{filter:drop-shadow(0 0 7px #b6e6bd30)}@keyframes eco-status{50%{opacity:.35}}.motion-paused .eco-status,.motion-offscreen .eco-status{animation-play-state:paused}@media(prefers-reduced-motion:reduce){.eco-status{animation:none}}
@media(prefers-reduced-motion:no-preference){.engine-part{animation-duration:7s;animation-timing-function:cubic-bezier(.37,0,.63,1)}.engine-connectors{animation:none;opacity:.75}.engine-signal{animation:engine-flow 1.4s linear infinite;opacity:1}.booster-stream{animation-duration:6s}.eco-status{animation-duration:2s}@keyframes assemble-part{0%,100%{transform:translate(var(--x),var(--y)) rotate(var(--turn));opacity:1}50%{transform:translate(0,0) rotate(0);opacity:1}}}
/* Match the outer modules to the ecosystem's material and icon palette. */
.module-tile{filter:drop-shadow(0 5px 8px #0003)}.module-tile.part-left{--x:-18px;--turn:0deg}.module-tile.part-right{--x:18px;--turn:0deg}.module-tile .eco-status{opacity:.7}.engine-connectors{stroke:#7eaf98;stroke-width:1.2}.engine-signal{stroke:#d9c58d;stroke-width:2}

/* Arabic letters must stay joined: no tracking on the hub labels. */
html[dir=rtl] .assembly-svg text{letter-spacing:0}

/* Hub nodes stay still; only the ring around each node orbits. */
.engine-part.module-tile{animation:none;transform:none}.node-orbit{transform-box:fill-box;transform-origin:center;animation:node-orbit 12s linear infinite}.part-right .node-orbit{animation-direction:reverse}@keyframes node-orbit{to{transform:rotate(360deg)}}.motion-paused .node-orbit,.motion-offscreen .node-orbit{animation-play-state:paused}@media(prefers-reduced-motion:reduce){.node-orbit{animation:none}}

/* Hub signals: gold pulses leave the core along all six connectors and keep running. */
.engine-signal{stroke-dashoffset:0}@keyframes engine-flow{to{stroke-dashoffset:-60}}@media(prefers-reduced-motion:no-preference){.engine-signal{animation:engine-flow 1.3s linear infinite}}
/* Core emblem is a small hardware stack; its top-plate wires carry the same moving light. */
.hub-chip-wires{stroke-dasharray:45 155;animation:hub-wires 1.1s linear infinite;filter:drop-shadow(0 0 2px #f0c27a)}@keyframes hub-wires{to{stroke-dashoffset:-200}}.motion-paused .hub-chip-wires,.motion-offscreen .hub-chip-wires{animation-play-state:paused}@media(prefers-reduced-motion:reduce){.hub-chip-wires{animation:none}}
/* Phones: larger hub icons and labels, with room around the diagram. */
@media(max-width:720px){.cinema{height:930px}.engine-assembly,html[dir=rtl] .engine-assembly{inset:420px -9% 100px -9%;overflow:visible}.assembly-svg{width:100%;max-width:none;max-height:none;height:auto;flex:none}.assembly-svg .engine-part.module-tile{transform-box:fill-box;transform-origin:50% 40%;transform:scale(1.3)}.assembly-svg .module-tile text{font-size:14px;letter-spacing:1px}}
/* Hub labels with a shorter phone version (e.g. CUSTOMER SERVICE → SUPPORT) so they stay clear of the screen edge. */
.assembly-svg .label-short{display:none}
@media(max-width:720px){.assembly-svg .label-long{display:none}.assembly-svg .label-short{display:inline}}
/* Phones: the ecosystem caption under the hub is larger, brighter and a little lower. */
@media(max-width:720px){.assembly-svg .eco-caption{font-size:15px;letter-spacing:2px;fill:#c9ddd0;transform:translateY(48px)}}
/* Desktop/tablet: hero diagram sits a little higher. */
@media(min-width:721px){.engine-assembly,html[dir=rtl] .engine-assembly{top:15px;bottom:130px}}
/* Secured layer round the hero diagram (home and /secured-infrastructure/): locks pop in, hub and core rings draw
   themselves, and the outer ring is one gold line travelling round (.secure-flow, below). The hero pause button and
   reduced motion stop it. */
@keyframes secure-draw{to{stroke-dashoffset:0}}
.secure-lock{opacity:0;transform-box:fill-box;transform-origin:center;animation:secure-pop .5s cubic-bezier(.3,1.4,.6,1) forwards}
@keyframes secure-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.secure-layer{filter:drop-shadow(0 0 6px #d8ba7840)}
.motion-paused .secure-lock{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.secure-lock{opacity:1;animation:none}}
/* Each hub has its own secured ring and lock (inside the hub's group, so it moves with it). */
.secure-hub-ring{stroke-dasharray:1000;stroke-dashoffset:1000;stroke-opacity:.75;animation:secure-draw 1.4s cubic-bezier(.6,0,.3,1) forwards}
.motion-paused .secure-hub-ring{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.secure-hub-ring{stroke-dashoffset:0;animation:none}}
/* Phones: the diagram is 102% of the screen (was 118%) so the secured ring, which leaves room round the hubs and labels,
   and its side locks keep a 16px gutter. */
@media(max-width:720px){.engine-assembly,html[dir=rtl] .engine-assembly{left:-1%;right:-1%}}
/* Locks that travel out from the core with the connector signals (SMIL; hero-motion.js pauses them with the hero). */
@media(prefers-reduced-motion:reduce){.secure-travel{display:none}}
/* The outer secured ring is a single gold line travelling round through its locks (no static line). */
.secure-flow{stroke-dasharray:150 850;animation:secure-flow 9s linear infinite}
@keyframes secure-flow{to{stroke-dashoffset:-1000}}
.motion-paused .secure-flow,.motion-offscreen .secure-flow{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.secure-flow{animation:none}}
/* One-time drawing of the hero diagram (engine-build.js traces every outline with the Web Animations API): the diagram
   stays hidden until it is on screen, so the finished picture never flashes first. */
html.xb-pending .assembly-svg>:not(defs){opacity:0}
/* Arabic phone hero: the shorter Arabic copy ends its buttons ~115 px higher than English, so the diagram and the hero
   both move up 80 px (same box size, same picture). Keeps e2e/regressions.spec.js's 0–120 px gap at every width 300–720. */
@media(max-width:720px){html[dir=rtl] .cinema{height:850px}html[dir=rtl] .engine-assembly{top:340px}}
/* Desktop/tablet hero: the heights above become minimums, so text enlarged by the visitor (WCAG 1.4.12 text spacing,
   browser text zoom) grows the hero instead of being clipped by its overflow:hidden. Same size when the text fits. */
@media(min-width:721px){.cinema{display:flex;flex-direction:column;height:auto;min-height:720px}.cinema-inner{flex:1 0 auto;width:100%;height:auto}}
@media(min-width:1600px){.cinema{min-height:760px}}
@media(min-width:721px) and (max-width:1050px){.cinema{min-height:690px}}