.wd-stage h3,.wd-stage p{margin:0}
.wd-ic{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:14px;background:color-mix(in srgb,var(--neu) 10%,#fff);color:var(--neu);transition:background-color .3s var(--ease),color .3s var(--ease)}
.wd-ic svg{width:26px;height:26px}
.wd-ic-xl{width:88px;height:88px;border-radius:24px;background:linear-gradient(145deg,#FF9459,var(--neu) 55%,#D84500);color:#fff;box-shadow:0 18px 44px color-mix(in srgb,var(--neu) 40%,transparent)}
.wd-ic-xl svg{width:56px;height:56px}
.wd-ic-xl path{transform-box:fill-box;transform-origin:center}
.wd-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.wd-tags li{padding:6px 12px;border-radius:var(--r-pill);background:#f5f5f7;font:var(--text-callout);color:var(--ink)}

.wd-bento{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"ai ai aud auto" "ai ai bot app" "web sys sup sup";gap:var(--gap-card)}
.wd-tile{display:flex;flex-direction:column;gap:var(--s-12);padding:var(--s-32);border-radius:var(--r-card);background:#fff}
.wd-tile .wd-ic{margin-bottom:var(--s-4)}
.wd-tile h3{font:var(--text-title3);letter-spacing:var(--track-title3)}
.wd-tile p{font:var(--text-callout);letter-spacing:var(--track-callout);color:var(--ink2);text-wrap:pretty}
.wd-tile .wd-tags{margin-top:auto;padding-top:var(--s-8)}
.wd-tile .wd-tags li{padding:4px 10px;font-size:13px;line-height:18px}
.wd-bento .wd-ai{position:relative;overflow:hidden;justify-content:flex-end;padding:var(--s-48);background:#000;color:#f5f5f7}
.wd-bento .wd-ai::before{content:"";position:absolute;left:75%;top:11%;width:90%;aspect-ratio:1;border-radius:50%;translate:calc(-50% + var(--dx,0px)) calc(-50% + var(--dy,0px));will-change:translate;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--neu) 55%,transparent),transparent);pointer-events:none}
.wd-bento .wd-ai > *{position:relative}
.wd-bento .wd-ai .wd-ic-xl{margin-bottom:auto}
.wd-bento .wd-ai h3{margin-top:var(--s-48);font:var(--text-headline);letter-spacing:var(--track-headline);color:#f5f5f7}
.wd-bento .wd-ai p{font:var(--text-lead);letter-spacing:var(--track-lead);color:#a1a1a6}
.wd-bento .wd-ai .wd-tags{margin-top:var(--s-16)}
.wd-bento .wd-ai .wd-tags li{padding:6px 12px;background:#1d1d1f;color:#f5f5f7;font-size:14px;line-height:20px}

@media (max-width:1068px){
  .wd-bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"ai ai" "aud auto" "bot app" "web sys" "sup sup"}
}
@media (max-width:734px){
  .wd-bento{grid-template-columns:minmax(0,1fr);grid-template-areas:"ai" "aud" "auto" "bot" "app" "web" "sys" "sup"}
  .wd-tile{padding:var(--s-24)}
  .wd-bento .wd-ai{padding:var(--s-32) var(--s-24)}
  .wd-bento .wd-ai h3{margin-top:var(--s-32)}
}

.wd-pre .wd-tile:not(.on){opacity:0;transform:translate(var(--fx,0px),var(--fy,32px)) scale(.92);filter:blur(14px)}
.wd-pre .wd-tile.on{filter:blur(0px);transition:opacity .7s cubic-bezier(0,0,.2,1) var(--wd,0ms),transform 1s cubic-bezier(.2,.8,.2,1) var(--wd,0ms),filter .8s var(--ease) var(--wd,0ms)}
.wd-pre .wd-tile:not(.wd-ai):not(.on) .wd-ic{opacity:0;scale:.4}
.wd-pre .wd-tile:not(.on) :is(h3,p,.wd-tags){opacity:0;translate:0 14px}
.wd-pre .wd-tile.on:not(.wd-ai) .wd-ic{transition:opacity .3s var(--ease) calc(var(--wd,0ms) + 120ms),scale .8s cubic-bezier(.3,1.6,.5,1) calc(var(--wd,0ms) + 120ms);
  animation:wd-flash 1s var(--ease) calc(var(--wd,0ms) + 380ms) both}
.wd-pre .wd-tile.on:not(.wd-ai) h3{transition:opacity .5s var(--ease) calc(var(--wd,0ms) + 200ms),translate .7s cubic-bezier(.2,.8,.2,1) calc(var(--wd,0ms) + 200ms)}
.wd-pre .wd-tile.on:not(.wd-ai) p{transition:opacity .5s var(--ease) calc(var(--wd,0ms) + 270ms),translate .7s cubic-bezier(.2,.8,.2,1) calc(var(--wd,0ms) + 270ms)}
.wd-pre .wd-tile.on:not(.wd-ai) .wd-tags{transition:opacity .5s var(--ease) calc(var(--wd,0ms) + 340ms),translate .7s cubic-bezier(.2,.8,.2,1) calc(var(--wd,0ms) + 340ms)}
.wd-pre .wd-ai:not(.on){opacity:0;transform:none;filter:none;clip-path:circle(0px at var(--cx,92px) var(--cy,92px))}
.wd-pre .wd-ai.on{opacity:1;transform:none;filter:none;clip-path:circle(150% at var(--cx,92px) var(--cy,92px));transition:opacity .2s var(--ease),clip-path 1.2s cubic-bezier(.7,0,.2,1) .15s}
.wd-pre .wd-ai:not(.on)::before{opacity:0;scale:.2}
.wd-pre .wd-ai.on::before{transition:opacity 1.2s var(--ease) .45s,scale 1.6s cubic-bezier(.2,.8,.2,1) .45s}
.wd-pre .wd-ai:not(.on) .wd-ic-xl{scale:.4;rotate:-20deg}
.wd-pre .wd-ai.on .wd-ic-xl{transition:scale 1s cubic-bezier(.3,1.5,.5,1),rotate 1s cubic-bezier(.3,1.5,.5,1)}
.wd-pre .wd-ai:not(.on) .wd-ic-xl path{scale:0}
.wd-pre .wd-ai.on .wd-s1{transition:scale .7s cubic-bezier(.3,1.7,.5,1) .25s}
.wd-pre .wd-ai.on .wd-s2{transition:scale .7s cubic-bezier(.3,1.7,.5,1) .4s}
.wd-pre .wd-ai.on .wd-s3{transition:scale .7s cubic-bezier(.3,1.7,.5,1) .52s}
.wd-pre .wd-ai.on h3{transition:opacity .6s var(--ease) .75s,translate .8s cubic-bezier(.2,.8,.2,1) .75s}
.wd-pre .wd-ai.on p{transition:opacity .6s var(--ease) .85s,translate .8s cubic-bezier(.2,.8,.2,1) .85s}
.wd-pre .wd-ai.on .wd-tags{transition:opacity .6s var(--ease) .95s,translate .8s cubic-bezier(.2,.8,.2,1) .95s}
.wd-wbox{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:var(--r-card);pointer-events:none}
.wd-wave{position:absolute;width:var(--ws);height:var(--ws);margin:calc(var(--ws) / -2) 0 0 calc(var(--ws) / -2);border-radius:50%;pointer-events:none;opacity:0;scale:0;
  background:radial-gradient(closest-side,transparent 78%,color-mix(in srgb,var(--neu) 10%,transparent) 90%,color-mix(in srgb,var(--neu) 34%,transparent) 98%,transparent)}
.wd-wave.go{animation:wd-wave var(--wt) linear var(--w0) both}
@keyframes wd-wave{0%{scale:0;opacity:1}80%{opacity:.85}100%{scale:1;opacity:0}}
@keyframes wd-flash{0%,100%{background:color-mix(in srgb,var(--neu) 10%,#fff);color:var(--neu);box-shadow:0 0 0 0 transparent}
  30%{background:var(--neu);color:#fff;box-shadow:0 0 0 8px color-mix(in srgb,var(--neu) 14%,transparent),0 10px 24px color-mix(in srgb,var(--neu) 35%,transparent)}}

@media (hover:hover){
  .wd-tile:not(.wd-ai):hover .wd-ic{background:var(--neu);color:#fff}
  .wd-tile:hover .wd-ic svg{animation:wd-nudge .6s cubic-bezier(.3,1.6,.5,1)}
  .wd-ai:hover .wd-ic-xl svg{animation:none}
  .wd-ai:hover .wd-s1{animation:wd-twinkle .9s var(--ease)}
  .wd-ai:hover .wd-s2{animation:wd-twinkle .9s var(--ease) .12s}
  .wd-ai:hover .wd-s3{animation:wd-twinkle .9s var(--ease) .24s}
}
@keyframes wd-nudge{0%{scale:1;rotate:0deg}35%{scale:1.14;rotate:-8deg}70%{rotate:5deg}100%{scale:1;rotate:0deg}}
@keyframes wd-twinkle{0%,100%{scale:1;rotate:0deg}40%{scale:.6;rotate:-25deg}70%{scale:1.15;rotate:8deg}}
@media (prefers-reduced-motion:reduce){
  .wd-ic{transition:none}
  .wd-tile:hover .wd-ic svg,.wd-ai:hover .wd-ic-xl path{animation:none}
}