.quote-box{position:relative;background:rgba(var(--color-secondary),.05);border:2px solid rgb(var(--color-secondary));padding:2.5rem;text-align:center;max-width:800px;width:100%;margin:2rem auto;transition:all .4s ease;overflow:hidden}.quote-box:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 0%,rgb(var(--quote-color)) 100%);opacity:0;transition:opacity .4s ease;pointer-events:none}.quote-box:hover:before{opacity:.05}.quote-box:hover{transform:translateY(-10px);box-shadow:0 20px 40px rgba(var(--quote-color),.15);border-color:rgb(var(--quote-color))}.quote-box:focus-within{outline:3px solid rgb(var(--quote-color));outline-offset:4px}.quote-box__icon{width:50px;height:50px;margin:0 auto 1.5rem;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(var(--quote-color),.1);transition:all .4s ease;position:relative;z-index:1}.quote-box:hover .quote-box__icon{transform:scale(1.15) rotate(5deg);background:rgba(var(--quote-color),.15)}.quote-box__icon svg{width:1.75rem;height:1.75rem}.quote-box__content{position:relative;z-index:1;margin:0}.quote-box__text{font-size:clamp(1.1rem,2vw,1.3rem);line-height:1.7;margin:0;color:rgb(var(--color-text))}.quote-box__text strong{font-size:inherit;color:rgb(var(--quote-color));font-family:inherit;font-weight:var(--bold);letter-spacing:-.01rem;font-style:italic;text-shadow:0 2px 10px rgba(var(--quote-color),.15);transition:all .4s ease}.quote-box:hover .quote-box__text strong{text-shadow:0 4px 20px rgba(var(--quote-color),.25)}.quote-box--text:has(small){line-height:1}.quote-box__text small{font-size:clamp(.75rem,1vw,.8375rem)}.quote-box__author{margin-top:1.5rem;display:flex;flex-direction:column;align-items:center;gap:.25rem;position:relative;z-index:1}.quote-box__author-name{font-size:clamp(1rem,1.5vw,1.15rem);font-weight:700;font-style:normal;color:rgb(var(--quote-color))}.quote-box__author-role{font-size:clamp(.85rem,1.2vw,.95rem);opacity:.7}.quote-box__decoration{position:absolute;border-radius:50%;pointer-events:none;transition:all .4s ease}.quote-box__decoration--1{width:200px;height:200px;top:-50px;left:-50px;background:radial-gradient(circle,rgba(var(--quote-color),.15) 12%,transparent 60%);opacity:.5}.quote-box__decoration--2{width:180px;height:180px;bottom:-40px;right:-40px;background:radial-gradient(circle,rgba(var(--quote-color),.12) 12%,transparent 60%);opacity:.5}.quote-box:hover .quote-box__decoration--1{transform:scale(1.1);opacity:.7}.quote-box:hover .quote-box__decoration--2{transform:scale(1.15);opacity:.7}.quote-box--sm{padding:2rem;max-width:600px;margin:1.5rem auto}.quote-box--sm .quote-box__icon{width:40px;height:40px;margin-bottom:1rem}.quote-box--sm .quote-box__icon svg{width:1.5rem;height:1.5rem}.quote-box--sm .quote-box__text{font-size:clamp(1rem,1.8vw,1.15rem)}.quote-box--sm .quote-box__decoration--1,.quote-box--sm .quote-box__decoration--2{width:150px;height:150px}.quote-box--lg{padding:3rem;max-width:900px;margin:2.5rem auto}.quote-box--lg .quote-box__icon{width:60px;height:60px;margin-bottom:2rem}.quote-box--lg .quote-box__icon svg{width:2rem;height:2rem}.quote-box--lg .quote-box__text{font-size:clamp(1.2rem,2.5vw,1.5rem)}.quote-box--lg .quote-box__decoration--1,.quote-box--lg .quote-box__decoration--2{width:250px;height:250px}.quote-box--left{text-align:left}.quote-box--left .quote-box__icon{margin-left:0}.quote-box--left .quote-box__author{align-items:flex-start}.quote-box--right{text-align:right}.quote-box--right .quote-box__icon{margin-right:0}.quote-box--right .quote-box__author{align-items:flex-end}.quote-box--animated{opacity:0;animation:fadeInScale .8s ease .2s both}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: no-preference){.quote-box{will-change:transform}}@media (prefers-reduced-motion: reduce){.quote-box--animated{animation:fadeIn .6s ease .2s both}.quote-box:hover{transform:translateY(-5px)}.quote-box:hover .quote-box__icon{transform:scale(1.1)}.quote-box:hover .quote-box__decoration--1,.quote-box:hover .quote-box__decoration--2{transform:none}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media screen and (max-width: 768px){.quote-box{padding:2rem;margin:1.5rem auto}.quote-box__icon{width:45px;height:45px;margin-bottom:1.25rem}.quote-box__icon svg{width:1.6rem;height:1.6rem}.quote-box__text{font-size:clamp(1rem,2vw,1.2rem)}.quote-box__author{margin-top:1.25rem}.quote-box__decoration--1{width:150px;height:150px;top:-40px;left:-40px}.quote-box__decoration--2{width:130px;height:130px;bottom:-30px;right:-30px}.quote-box--lg{padding:2.5rem}}@media screen and (max-width: 575px){.quote-box{padding:1.75rem;margin:1rem auto}.quote-box__icon{width:40px;height:40px;margin-bottom:1rem}.quote-box__icon svg{width:1.5rem;height:1.5rem}.quote-box__text{font-size:clamp(.95rem,2.2vw,1.1rem)}.quote-box__text strong{font-size:clamp(1.05rem,2.5vw,1.25rem)}.quote-box__author{margin-top:1rem}.quote-box__decoration--1{width:120px;height:120px;top:-30px;left:-30px}.quote-box__decoration--2{width:110px;height:110px;bottom:-25px;right:-25px}.quote-box--sm{padding:1.5rem}.quote-box--lg{padding:2rem}}
