/* Motion enhances feedback while the content and reading order stay intact. */
.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;background:#99bd53;transform:scaleX(0);transform-origin:left;z-index:100;pointer-events:none}
.hero-actions .lime{position:relative;overflow:hidden;isolation:isolate}
.hero-actions .lime::before{content:'';position:absolute;inset:-100% -40%;background:linear-gradient(115deg,transparent 40%,#fff7 50%,transparent 60%);transform:translateX(-100%) rotate(-10deg);transition:transform .8s cubic-bezier(.16,1,.3,1);z-index:-1;pointer-events:none}
.hero-actions .lime:hover::before,.hero-actions .lime:focus-visible::before{transform:translateX(100%) rotate(-10deg)}
.button svg{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.button:hover svg,.button:focus-visible svg{transform:translateX(4px)}
.orbit>span:first-child{border-style:dashed;animation:orbit-turn 70s linear infinite}
.orbit>span:nth-child(2)::after{content:'';position:absolute;top:12%;left:12%;width:6px;height:6px;background:#d5f58b;border-radius:50%;box-shadow:0 0 15px #d5f58b80}
.scroll-hint span{animation:scroll-nudge 2.7s ease-in-out infinite}
.product{transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .4s;transform-style:preserve-3d}
.product.is-tilting{transform:perspective(900px) translateY(-7px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
.product .icon-tile,.product .car-shape,.product .health-art,.product .home-art{transition:transform .65s cubic-bezier(.16,1,.3,1)}
.product:hover .icon-tile{transform:translateY(-3px) rotate(-5deg)}
.product:hover .car-shape{transform:translate(20px,-6px) rotate(-17deg)}
.product:hover .health-art{transform:rotate(0deg) scale(1.08)}
.product:hover .home-art{transform:translateY(-6px) rotate(-3deg)}
.product .circle-arrow{transition:background .25s,color .25s,transform .4s cubic-bezier(.16,1,.3,1)}
.product:hover .circle-arrow{transform:rotate(45deg)}
.quick-select button svg{transition:transform .4s cubic-bezier(.16,1,.3,1)}
.quick-select button:hover svg{transform:translateY(-4px)}
.principles article>svg{transition:transform .35s}
.principles article:hover>svg{transform:translate(3px,-3px) rotate(-40deg)}
.steps .step-number{display:inline-block;transition:color .3s,transform .4s}
.steps article:hover .step-number{color:#416e4f;transform:translateY(-4px)}
dialog[open]{animation:dialog-enter .35s cubic-bezier(.16,1,.3,1) both}
dialog[open]::backdrop{animation:backdrop-enter .25s ease-out both}
.quote-options button{transition:background .25s,border-color .25s,transform .25s}
.quote-options button:hover{transform:translateY(-2px);border-color:#8aa47a}
.quote-options button svg{flex-shrink:0;transition:transform .3s}
.quote-options button[aria-pressed=true] svg{transform:scale(1.12)}
details[open] p{animation:answer-enter .3s ease-out both}
@keyframes orbit-turn{to{transform:rotate(360deg)}}
@keyframes scroll-nudge{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(5px)}}
@keyframes dialog-enter{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}
@keyframes answer-enter{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:950px){.orbit>span:first-child{animation:none}}
@media(max-width:640px){.header nav.open{animation:answer-enter .25s ease-out}.hero-content>h1{animation-duration:.65s}.product.is-tilting{transform:none}}
@media(hover:none){.product:hover .car-shape{transform:rotate(-17deg)}.product:hover .health-art{transform:rotate(-14deg)}.product:hover .home-art{transform:rotate(-8deg)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.product.is-tilting{transform:none}.reading-progress{display:none}}