/* LEAGL / motion edition. All animation is optional and can be paused. */
:root { --lw-ink:#222035; --lw-purple:#5245AD; --lw-lilac:#D8D3EF; }
#header .dtx-header { padding:30px 0; gap:32px; }
#header .dtx-header-left { width:155px; flex-shrink:0; }
#header .dtx-header-right .dtx-btn-arrow { font-size:21px; }
.lw-site-nav { display:flex; align-items:center; justify-content:center; gap:32px; margin-left:auto; margin-right:42px; font-size:14px; line-height:1.5; }
.lw-site-nav a { color:var(--lw-ink); text-decoration:none; position:relative; padding:8px 0; }
.lw-site-nav a::after { content:""; position:absolute; bottom:2px; left:0; right:0; height:1px; background:var(--lw-purple); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.lw-site-nav a:hover::after,.lw-site-nav a:focus-visible::after { transform:scaleX(1); }
#lw-scroll-progress { position:fixed; z-index:10000; top:0; left:0; width:100%; height:3px; transform:scaleX(0); transform-origin:0 0; background:var(--lw-purple); pointer-events:none; }
.lw-hero-section { padding-bottom:100px; }
.lw-hero { display:grid; grid-template-columns:1.18fr 1fr; gap:clamp(36px,4.4vw,76px); align-items:center; padding-top:22px; }
.lw-hero-visual { position:relative; aspect-ratio:4/3; overflow:hidden; background:#D8D3EF; isolation:isolate; }
.lw-hero-frames { position:absolute; inset:0; }
.lw-hero-frame { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.4s ease; }
.lw-hero-frame.is-active { opacity:1; }
.lw-hero-frame { object-position:var(--photo-position,50% 50%); }
.lw-hero-visual::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 68%,#22203566 100%); }
.lw-hero-mark { position:absolute; z-index:2; left:24px; bottom:57px; width:56px; height:auto; opacity:.94; }
.lw-slide-controls { position:absolute; z-index:3; left:24px; right:24px; bottom:23px; display:flex; gap:8px; }
.lw-slide-controls button { height:24px; flex:1; border:0; background:transparent; padding:8px 0; cursor:pointer; }
.lw-slide-controls button span { height:2px; display:block; background:#ffffff55; position:relative; overflow:hidden; }
.lw-slide-controls button.is-active span { background:#fff; }
.lw-slide-controls button span::after { content:""; position:absolute; inset:0; background:#847ACD; transform:scaleX(0); transform-origin:left; }
.motion-ready:not(.motion-paused) .lw-slide-controls button.is-active span::after { animation:lw-timer 7s linear forwards; }
.lw-hero-copy { position:relative; padding:14px 0; }
.lw-hero h1 { font-family:Figtree,sans-serif; color:var(--lw-ink); font-weight:600; letter-spacing:-.047em; font-size:clamp(42px,4.8vw,82px); line-height:1.035; margin:0 0 30px; overflow-wrap:normal; }
.lw-hero h1 .lw-emphasis { color:var(--lw-purple); }
.lw-hero-description { font-size:15px; line-height:1.9; max-width:490px; color:#595568; margin:0 0 30px; }
.lw-hero-actions { display:flex; gap:20px; flex-wrap:wrap; align-items:center; }
.lw-solid-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; background:var(--lw-purple); border:1px solid var(--lw-purple); color:#F7F6F5; padding:15px 20px; font:600 13px/1.5 Metropolis,sans-serif; text-decoration:none; cursor:pointer; transition:background .2s,transform .2s; }
.lw-solid-button>img { width:17px; height:17px; transition:transform .3s; }
.lw-solid-button:hover { background:#40348D; color:#fff; transform:translateY(-2px); }
.lw-solid-button:hover>img { transform:translate(-2px,2px); }
.lw-text-link { font-size:12px; font-weight:500; color:var(--lw-purple); display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.lw-text-link:hover span { transform:translateY(4px); }
.lw-text-link span { display:inline-block; transition:transform .3s; }
.lw-hero-footnote { display:flex; flex-wrap:wrap; gap:9px 20px; border-top:1px solid #22203522; margin-top:38px; padding-top:17px; font-size:11px; color:#777181; }
.lw-hero-footnote span+span::before { content:"+"; color:#847ACD; margin-right:20px; }
.lw-flow { background:var(--lw-ink); color:#F7F6F5; margin:0 0 110px; padding:55px max(24px,6vw); overflow:hidden; }
.lw-flow-inner { max-width:1500px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:26px; }
.lw-flow-word { font:500 clamp(20px,2.3vw,35px)/1.1 Figtree,sans-serif; letter-spacing:-.035em; }
.lw-flow-result { color:#B6ABE9; font:500 16px/1.3 Figtree,sans-serif; white-space:nowrap; }
.lw-flow-connector { position:relative; height:30px; flex:1; min-width:80px; max-width:190px; display:flex; align-items:center; }
.lw-flow-connector::before { content:""; width:100%; height:1px; background:#847ACD77; }
.lw-flow-connector i { position:absolute; width:30px; height:1px; background:#D8D3EF; left:0; }
.lw-flow-connector img { width:23px; height:23px; margin-left:20px; }
.lw-motion-toggle { position:fixed; z-index:9000; right:20px; bottom:18px; border:1px solid #D8D3EF; color:var(--lw-ink); background:#F7F6F5F2; display:flex; align-items:center; gap:8px; padding:9px 12px; font:500 10px/1.5 Metropolis,sans-serif; cursor:pointer; box-shadow:0 4px 16px #2220350a; }
.lw-pause-icon { font:700 13px/1 Figtree,sans-serif; color:var(--lw-purple); min-width:12px; text-align:center; }
.motion-ready .lw-reveal { opacity:0; transform:translateY(24px); transition:opacity .8s ease,transform 1s cubic-bezier(.2,.7,.2,1); }
.motion-ready .lw-reveal.is-visible { opacity:1; transform:none; }
.motion-ready:not(.motion-paused) .lw-hero-mark { animation:lw-drift 9s ease-in-out infinite; }
.motion-ready:not(.motion-paused) .lw-flow-connector i { animation:lw-connect 4s ease-in-out infinite; }
.dtx-services-item,.dtx-services-platform,.dtx-tools-card { transition:transform .35s ease,box-shadow .35s ease; }
.dtx-services-item:hover,.dtx-services-platform:hover { transform:translateY(-6px); box-shadow:0 14px 50px #22203508; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state:paused !important; }
.motion-paused .lw-reveal { opacity:1; transform:none; transition:none; }
.motion-paused .lw-hero-frame { transition:none; }
.motion-paused .lw-solid-button:hover,.motion-paused .lw-solid-button:hover>img,.motion-paused .dtx-services-item:hover,.motion-paused .dtx-services-platform:hover { transform:none; }
html:has(body.motion-paused) { scroll-behavior:auto; }
@keyframes lw-drift { 0%,100% { transform:translate(0,0); } 50% {transform:translate(-5px,5px);} }
@keyframes lw-connect { 0%,100% { transform:translateX(0);opacity:.2; } 50% {transform:translateX(75px);opacity:1;} }
@keyframes lw-timer { from {transform:scaleX(0)} to {transform:scaleX(1)} }
@media(max-width:1100px) { .lw-site-nav { gap:20px; margin-right:10px; font-size:12px; } .lw-hero { grid-template-columns:1fr; gap:36px; } .lw-hero h1 { font-size:52px; } .lw-hero-actions { gap:18px; } .lw-hero-visual { aspect-ratio:3/2; } .lw-hero-copy { max-width:720px; } .lw-hero-description { max-width:640px; } .lw-flow-result { display:none; } }
@media(max-width:800px) { #header .dtx-header { flex-wrap:wrap; gap:16px; padding:25px 0; } #header .dtx-header-left { width:125px; } #header .dtx-header-right { margin-left:auto; } #header .dtx-header-right .dtx-btn-arrow { font-size:20px; } .lw-site-nav { order:3; width:100%; justify-content:flex-start; gap:26px; margin:0; border-top:1px solid #22203512; padding-top:10px; } .lw-hero { gap:32px; padding-top:0; } .lw-hero-copy { padding:0; } .lw-hero h1 { font-size:clamp(40px,8vw,66px); max-width:650px; } .lw-hero-description { max-width:600px; } .lw-hero-section { padding-bottom:64px; } .lw-flow { padding:35px 24px; margin-bottom:65px; } .lw-flow-inner { flex-wrap:wrap; gap:18px; } .lw-flow-word { flex-basis:calc(50% - 50px); font-size:24px; } .lw-flow-connector { min-width:30px; max-width:50px; } .lw-flow-connector img { display:none; } }
@media(max-width:450px) { .lw-hero-mark { left:17px; bottom:47px; width:34px; } .lw-slide-controls { left:17px; right:17px; bottom:16px; } .lw-hero h1 { font-size:43px; } .lw-hero-description { font-size:14px; } .lw-hero-footnote { font-size:10px; gap:10px; } .lw-hero-footnote span+span::before { margin-right:10px; } .lw-flow-word { font-size:22px; } .lw-motion-toggle { right:12px; bottom:12px; } .lw-motion-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); } .lw-motion-toggle { width:35px; height:35px; justify-content:center; padding:0; } }
@media(prefers-reduced-motion:reduce) { .lw-reveal { opacity:1 !important; transform:none !important; } *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }