:root{--font:"IBM Plex Sans","Thmanyah Sans","IBM Plex Sans Arabic",system-ui,"Segoe UI",sans-serif}
[dir=ltr] h1,[dir=ltr] h2{letter-spacing:-.012em}
[dir=ltr] .j{hyphens:auto;-webkit-hyphens:auto}
[dir=ltr] svg:has(path[d^="M19 12H5"]){transform:scaleX(-1)}
[dir=ltr] .btn:hover svg:has(path[d^="M19 12H5"]){transform:scaleX(-1) translateX(-4px)}
[dir=ltr] .pane:hover .prod-go svg,[dir=ltr] .prod:hover .prod-go svg,[dir=ltr] .other:hover .prod-go svg{transform:scaleX(-1) translateX(-5px)}
[dir=ltr] .nav a::after{transform-origin:left}
[dir=ltr] .sprog{transform-origin:left;background:linear-gradient(90deg,var(--accent),var(--accent-soft))}
[dir=ltr] .progress i,[dir=ltr] .ch b,[dir=ltr] .steps .rail,[dir=ltr] .tab i b{transform-origin:left}
[dir=ltr] .belt{animation-name:beltL}
@keyframes beltL{to{transform:translateX(-50%)}}
[dir=ltr] .fact{padding:1.6rem 1rem 1.6rem 0}
[dir=ltr] .fact b,[dir=ltr] .num b,[dir=ltr] .imp b,[dir=ltr] .tool em,[dir=ltr] .mod h3 em,[dir=ltr] .phero h1 small{text-align:left}
[dir=ltr] .pub-book{transform:perspective(900px) rotateY(14deg);border-radius:16px 6px 6px 16px;box-shadow:30px 40px 60px -30px rgba(0,0,0,.7)}
[dir=ltr] .pub:hover .pub-book{transform:perspective(900px) rotateY(0)}
[dir=ltr] .pub-spine{right:auto;left:0;background:linear-gradient(270deg,rgba(0,0,0,.35),transparent)}
@media (max-width:760px){[dir=ltr] .pub-book{transform:perspective(900px) rotateY(8deg)}}
[dir=ltr] .fs-ov{background:linear-gradient(0deg,rgba(3,12,22,.92) 0%,rgba(3,12,22,.45) 45%,rgba(3,12,22,.1) 75%),linear-gradient(90deg,rgba(3,89,123,.35),transparent 60%)}
[dir=ltr] .reel .tint{background:linear-gradient(160deg,rgba(3,89,123,.55),rgba(6,20,35,.1) 55%)}
[dir=ltr] .visual .ix::after{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 40%,transparent),rgba(6,20,35,.25) 60%)}
[dir=ltr] .hero-copy h1 .h1-sub{letter-spacing:.01em}
[dir=ltr] .statement h2{max-width:18em}
[dir=ltr] .hero-copy{width:min(600px,46%)}
[dir=ltr] .hero-copy h1{font-size:clamp(2.2rem,4.3vw,4.1rem);line-height:1.15}
[dir=ltr] .hero-copy h1 .h1-sub{font-size:.4em;margin-bottom:.7rem}
@media (max-width:899px){[dir=ltr] .hero-copy{width:auto}}
[dir=ltr] .phero h1{line-height:1.12}
[dir=ltr] .head h2,[dir=ltr] .about-grid h2{line-height:1.2}
[dir=ltr] .nums4 b{text-align:left}