/* EasyTaskr-inspired material and motion, within the existing design system. */
.hero{position:relative}
.hero-touch{position:absolute;inset:0 0 auto;height:520px;pointer-events:none;z-index:0;overflow:hidden}
.hero-copy{position:relative;z-index:1}
.clay-token{position:absolute;display:grid;place-items:center;width:104px;height:104px;border-radius:30px;border:1px solid #ffffffb0;color:#315a90;background:linear-gradient(145deg,#d6e7ff,#a7c9f5 55%,#91b9ed);box-shadow:inset 4px 5px 8px #ffffffc0,inset -5px -7px 10px #527fb72e,0 18px 28px -12px #527aa944,0 3px 2px #fff;transform:rotate(-13deg);animation:clay-drift 9s ease-in-out infinite}
.clay-token .ui-icon{width:57px;height:57px;stroke-width:1.35;filter:drop-shadow(0 2px 0 #f7fbffbd)}
.clay-browser{left:8.5%;top:167px}
.clay-spark{right:9%;top:286px;width:87px;height:87px;border-radius:28px;color:#6c8541;background:linear-gradient(140deg,#f4f6d9,#d9e6b3 60%,#c0d49a);box-shadow:inset 4px 5px 8px #ffffffd0,inset -5px -7px 9px #708d3a25,0 18px 28px -13px #708d3a40,0 3px 2px #fff;transform:rotate(14deg);animation-delay:-4s}
.clay-spark .ui-icon{width:48px;height:48px}
.clay-pebble{position:absolute;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff,#e2d6f4 40%,#bfa6dd);box-shadow:2px 8px 12px #89739b1c;left:17%;top:350px;animation:clay-drift 7s -2s ease-in-out infinite}
.clay-pebble.peach{left:auto;right:18%;top:153px;width:15px;height:15px;background:radial-gradient(circle at 30% 25%,#fff,#ffdcc2 40%,#dfac87)}
.service-tabs button[aria-selected=true]{box-shadow:inset 0 3px 5px #ffffffb0,inset 0 -3px 5px #071a3112,0 5px 9px #071a3114,0 0 0 5px #ffffff18}
.button{position:relative;overflow:hidden;isolation:isolate;transition:background .25s,box-shadow .3s,transform .3s}
.button:after{content:"";position:absolute;inset:-50% auto -50% -65%;width:35%;background:linear-gradient(90deg,transparent,#ffffff22,transparent);transform:skewX(-22deg);pointer-events:none;transition:left .65s cubic-bezier(.2,.8,.2,1)}
.button:hover:after,.button:focus-visible:after{left:135%}
.button:hover{box-shadow:0 7px 18px -10px #071a3180}
.feature-art{--light-x:65%;--light-y:20%}
.feature-art:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;background:radial-gradient(360px circle at var(--light-x) var(--light-y),#ffffff24,transparent 72%);opacity:0;transition:opacity .45s;box-shadow:inset 0 1px 0 #ffffff90}
.feature-art:hover:after{opacity:1}
.clay-character{position:absolute;z-index:4;width:83px;height:auto;object-fit:contain;filter:drop-shadow(0 12px 10px #253e5e16);pointer-events:none;animation:clay-drift 8s ease-in-out infinite}
.art-ai .clay-character{right:22px;top:26px;rotate:8deg}
.art-software .clay-character{left:22px;top:30px;rotate:-8deg;animation-delay:-3s}
.product-card{--light-x:60%;--light-y:15%;transform-style:preserve-3d;transition:transform .55s var(--ease),box-shadow .55s;will-change:auto}
.product-card:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(450px circle at var(--light-x) var(--light-y),#ffffff7a,transparent 70%);opacity:0;transition:opacity .4s;box-shadow:inset 0 1px 0 #ffffffc0;z-index:1}
.product-card:hover:before,.product-card:focus-visible:before{opacity:1}
.product-card:hover{transform:perspective(1100px) translateY(-5px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg));box-shadow:0 22px 42px -24px #20395630}
.product-icon.easytaskr-symbol{background:transparent;border-radius:0;box-shadow:none}
.easytaskr-symbol img{width:38px;height:38px;object-fit:contain}
.easy-scene{position:absolute;width:220px;height:172px;right:-14px;bottom:58px;border:7px solid #fffdf8;border-radius:22px;overflow:hidden;background:#f0ece4;box-shadow:5px 14px 28px #5f7eaa26;transform:rotate(10deg);transition:transform .7s var(--ease);pointer-events:none}
.easy-scene>img{width:100%;height:100%;object-fit:cover;object-position:76% 75%;transform:scale(1.2);transition:transform 1.2s var(--ease),object-position 1.2s var(--ease)}
.easy-scene:after{content:"";position:absolute;inset:0;border-radius:14px;box-shadow:inset 0 1px 0 white;background:linear-gradient(130deg,#ffffff36,transparent 60%)}
.easytaskr-product .ledger{display:none}
.easytaskr-product:hover .easy-scene{transform:rotate(3deg) translate(-6px,-5px)}
.easytaskr-product:hover .easy-scene>img{transform:scale(1.38);object-position:85% 75%}
@keyframes clay-drift{0%,100%{translate:0 0}50%{translate:0 -12px}}
@media(max-width:1400px){.clay-browser{left:5%;width:88px;height:88px}.clay-spark{right:5%;width:77px;height:77px}.clay-token .ui-icon{width:47px;height:47px}.easy-scene{width:185px;height:153px;right:-25px;bottom:40px}.product-card>p{max-width:250px}}
@media(max-width:1150px){.hero-touch{display:none}.easy-scene{display:none}.easytaskr-product .ledger{display:block}}
@media(max-width:760px){.clay-character{width:64px}.art-ai .clay-character{top:15px;right:16px}.art-software .clay-character{top:20px;left:16px}.product-card:hover{transform:none;box-shadow:none}.feature-art:after{display:none}.product-card>p{max-width:220px}}
@media(hover:none){.button:after,.product-card:before,.feature-art:after{display:none}.product-card:hover{transform:none}}
.paused .clay-token,.paused .clay-pebble,.paused .clay-character{animation-play-state:paused!important}
.paused .product-card:hover{transform:none}.paused .easy-scene,.paused .easy-scene>img{transition:none}.paused .easytaskr-product:hover .easy-scene{transform:rotate(10deg)}.paused .easytaskr-product:hover .easy-scene>img{transform:scale(1.2)}
@media(prefers-reduced-motion:reduce){.clay-token,.clay-pebble,.clay-character{animation:none!important}.product-card,.easy-scene,.easy-scene>img{transition:none!important}.product-card:hover{transform:none}.button:after{display:none}.easytaskr-product:hover .easy-scene{transform:rotate(10deg)}.easytaskr-product:hover .easy-scene>img{transform:scale(1.2)}}