/* An animated process diagram. Text and structure remain visible throughout the cycle. */
.hero-infographic{--wf-blue:var(--info);--wf-green:var(--primary);--wf-line:oklch(53% .04 216);position:relative;min-width:0;width:100%;margin:0;align-self:center;padding:25px 22px 18px;border:1px solid oklch(42% 0.036 216);border-radius:17px;background:radial-gradient(ellipse at 76% 35%,oklch(36% 0.05 216 / .22),transparent 68%),linear-gradient(140deg,oklch(28% 0.026 216),oklch(25% 0.022 216));box-shadow:0 18px 50px oklch(7% 0.022 216 / .16)}
.wf-heading{display:flex;flex-direction:column;gap:7px;padding:0 3px;margin:0 0 16px}.wf-eyebrow{font-size:11px;color:var(--muted-foreground)}.wf-heading strong{font-size:18px;font-weight:550;line-height:1.35;letter-spacing:-.035em;color:var(--foreground)}
.wf-diagram{display:block;width:100%;height:auto;overflow:visible;font-family:Geist,Arial,sans-serif}.wf-compact{display:none}.wf-node{fill:oklch(24% 0.024 216);stroke:oklch(43% 0.038 216);stroke-width:1}.wf-accent{stroke-width:2;stroke-linecap:round;stroke:var(--wf-blue)}.wf-green .wf-accent{stroke:var(--wf-green)}.wf-source-title{fill:var(--foreground);font-size:18px;font-weight:550;letter-spacing:-.3px}.wf-small{fill:var(--muted-foreground);font-size:13px}.wf-route{stroke:var(--wf-line);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.wf-packet{stroke:var(--wf-blue);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:13 87;stroke-dashoffset:100;opacity:0;animation:wf-travel 10s linear infinite}.wf-packet-experience{stroke:var(--wf-green);animation-delay:.6s}.wf-packet-build{stroke:var(--wf-green);animation-delay:3.2s}.wf-packet-review{stroke:var(--wf-blue);animation-delay:6.5s;stroke-width:1.6}
.wf-engine-outline{fill:none;stroke:oklch(41% 0.035 86);stroke-width:1}.wf-engine-core{fill:oklch(33% 0.055 216);stroke:oklch(52% 0.09 86);stroke-width:1.4}.wf-ai{font-size:23px;font-weight:550;fill:var(--wf-green);letter-spacing:-1px}.wf-engine-outline{animation:wf-engine 10s var(--ease) infinite}.wf-engine-label{fill:var(--foreground);font-size:16px;font-weight:500;letter-spacing:-.3px}.wf-output-label{fill:var(--muted-foreground);font-size:14px}.wf-review-label{fill:var(--muted-foreground);font-size:14px;animation:wf-review-label 10s linear infinite}
.wf-app-frame{fill:oklch(27% 0.029 216);stroke:oklch(46% 0.055 216);stroke-width:1.2}.wf-window-dot{fill:oklch(50% 0.034 216)}.wf-app-title{fill:var(--foreground);font-size:14px;font-weight:500}.wf-app-sidebar{fill:oklch(33% 0.035 216)}.wf-sidebar-lines{stroke:oklch(56% 0.042 216);stroke-width:1.5;stroke-linecap:round}.wf-module-fill{fill:oklch(37% 0.05 86);stroke:oklch(43% 0.06 86);stroke-width:.7}.wf-module-fill-blue{fill:oklch(28% 0.035 198);stroke:oklch(42% 0.045 198)}.wf-module-lines{stroke:oklch(72% 0.05 86);stroke-width:1.2;stroke-linecap:round}.wf-module{transform-box:fill-box;transform-origin:left center;animation:wf-build 10s var(--ease) infinite}.wf-module-two{animation-delay:.35s}.wf-chart-frame{fill:oklch(29% 0.03 216);stroke:oklch(42% 0.037 216);stroke-width:.7}.wf-chart-line{fill:none;stroke:var(--wf-blue);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0;animation:wf-draw 10s var(--ease) infinite}
.wf-stages{display:flex;justify-content:space-between;gap:10px;margin:6px 3px 0;padding:15px 0;border-top:1px solid var(--border)}.wf-stage{display:flex;align-items:center;gap:7px;color:var(--muted-foreground);font-size:10px;animation:wf-stage 10s linear infinite}.wf-stage i{display:block;width:4px;height:4px;border-radius:50%;background:currentColor}.wf-stage-two{animation-delay:2.5s}.wf-stage-three{animation-delay:5s}.wf-stage-four{animation-delay:7.5s}.wf-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 3px 0;border-top:1px solid var(--border)}.wf-footer>span{font-size:10px;color:var(--muted-foreground);line-height:1.5;max-width:24ch}.wf-footer .motion-toggle{position:static;display:flex;align-items:center;justify-content:center;gap:6px;flex:none;min-height:32px;padding:6px 8px;background:var(--background);border:1px solid var(--border);border-radius:6px;color:var(--muted-foreground);font-size:9px}.wf-footer .motion-toggle:hover{color:var(--foreground);border-color:var(--muted-foreground)}
@keyframes wf-travel{0%,4%{stroke-dashoffset:100;opacity:0}6%{opacity:1}24%{stroke-dashoffset:-100;opacity:1}26%,100%{stroke-dashoffset:-100;opacity:0}}
@keyframes wf-engine{0%,22%,69%,100%{stroke:oklch(41% 0.035 86);stroke-width:1}31%,59%{stroke:oklch(69% 0.12 86);stroke-width:1.7}}
@keyframes wf-build{0%,36%{opacity:.35;transform:scaleX(.65)}53%,91%{opacity:1;transform:scaleX(1)}100%{opacity:.35;transform:scaleX(.65)}}
@keyframes wf-draw{0%,43%{stroke-dashoffset:100;opacity:.15}67%,91%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:100;opacity:.15}}
@keyframes wf-stage{0%,23%{color:var(--wf-green)}25%,100%{color:var(--muted-foreground)}}
@keyframes wf-review-label{0%,67%,99%,100%{fill:var(--muted-foreground)}73%,94%{fill:var(--wf-blue)}}
.paused .wf-diagram *,.paused .wf-stages *{animation-play-state:paused!important}
@media(min-width:651px) and (max-width:1000px){.hero{grid-template-columns:1fr 1fr;gap:30px}h1{font-size:clamp(46px,6.7vw,67px)}.hero-infographic{padding:21px 15px 15px}.wf-heading strong{font-size:16px}.wf-heading{margin-bottom:25px}.wf-wide{display:none}.wf-compact{display:block;max-height:380px}.wf-stage{font-size:9px;gap:5px}.wf-stages{gap:7px;padding:13px 0}.wf-footer{gap:8px}.wf-footer>span{font-size:9px;max-width:18ch}.wf-footer .motion-toggle{font-size:8px;padding:6px;min-height:32px}}
@media(max-width:650px){.hero{gap:35px}.hero-infographic{padding:22px 16px 16px;max-width:460px;margin:0 auto}.wf-heading{margin:0 0 17px;padding:0 5px;gap:6px}.wf-heading strong{font-size:18px}.wf-wide{display:none}.wf-compact{display:block}.wf-source-title{font-size:16px}.wf-small{font-size:11px}.wf-engine-label{font-size:16px}.wf-app-title{font-size:13px}.wf-review-label{font-size:12px}.wf-stage{font-size:10px;gap:6px}.wf-stages{padding:13px 0;margin-top:5px;gap:8px}.wf-footer{padding-top:12px;gap:10px}.wf-footer>span{font-size:9px;max-width:21ch}.wf-footer .motion-toggle{min-height:34px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.wf-diagram *,.wf-stages *{animation:none!important}.wf-packet{display:none}.wf-module{transform:none;opacity:1}.wf-chart-line{stroke-dashoffset:0;opacity:1}.wf-footer .motion-toggle{display:none}}

@media(min-width:1001px){.hero{grid-template-columns:1.04fr .96fr;gap:42px}h1{font-size:clamp(54px,6.6vw,94px)}}