.syn-btn-holder{display:flex;justify-content:flex-start;padding:0;box-sizing:border-box}
.syn-animated-btn{--syn-width:290px;--syn-height:70px;--syn-radius:18px;--syn-gap:14px;--syn-lift:6px;--syn-font_size:17px;--syn-arrow_size:24px;--syn-text_color:#fff8e9;--syn-top_color:#d9b66b;--syn-bottom_color:#b88a3d;--syn-base_color:#173c2f;--syn-shadow_color:rgba(13,55,41,.45);--syn-outline_color:#fff6d9;--syn-splash_color:#d8b56a;--syn-arrow_color:#fff8e9;--syn-speed:1;display:block;position:relative;isolation:isolate;width:var(--syn-width);height:var(--syn-height);border:0;outline-offset:5px;border-radius:var(--syn-radius);text-decoration:none!important;cursor:pointer;font-size:var(--syn-font_size);font-family:inherit;font-weight:650;letter-spacing:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.syn-animated-btn *{box-sizing:border-box}
.syn-btn-base{position:absolute;inset:0;border-radius:inherit;background:var(--syn-base_color);box-shadow:-7px 6px 0 color-mix(in srgb,var(--syn-shadow_color) var(--syn-shadow-opacity,55%),transparent),-14px 12px 7px -2px color-mix(in srgb,var(--syn-shadow_color) var(--syn-shadow-opacity,55%),transparent),-22px 19px 14px -5px color-mix(in srgb,var(--syn-shadow_color) var(--syn-shadow-opacity,55%),transparent),-31px 27px 22px -12px color-mix(in srgb,var(--syn-shadow_color) var(--syn-shadow-opacity,55%),transparent);transition:box-shadow .3s,transform .3s}
.syn-btn-face{position:absolute;inset:0;transform:translate(var(--syn-lift),calc(-1 * var(--syn-lift)));border-radius:inherit;overflow:hidden;padding:3px;background:linear-gradient(180deg,var(--syn-top_color),var(--syn-bottom_color));transition:transform .3s ease;box-shadow:0 2px 8px #0002}
.syn-btn-inner{height:100%;width:100%;border-radius:calc(var(--syn-radius) - 3px);display:flex;align-items:center;justify-content:center;gap:var(--syn-gap);position:relative;z-index:1;padding:8px 16px;background:linear-gradient(175deg,var(--syn-top_color),var(--syn-bottom_color));box-shadow:inset -2px 12px 11px -5px #ffffff55,inset 1px -4px 11px #0004;color:var(--syn-text_color);text-shadow:0 1px 1px #0003}
.syn-btn-inner:before{content:"";position:absolute;inset:48% 10% 22%;border-radius:50%;background:#ffffff18;filter:blur(12px);pointer-events:none}
.syn-btn-words{position:relative;min-width:0;display:grid;place-items:center;white-space:nowrap;overflow:hidden;line-height:1.2}
.syn-btn-label{grid-area:1/1;display:block;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .4s,filter .4s}
.syn-btn-label-two{transform:translateY(160%);opacity:0;filter:blur(7px)}
.syn-btn-arrow{flex:0 0 var(--syn-arrow_size);width:var(--syn-arrow_size);height:var(--syn-arrow_size);display:grid;place-items:center;position:relative}
.syn-btn-arrow>span{display:block;width:75%;height:3px;border-radius:2px;background:var(--syn-arrow_color);position:relative;transform:scale(.9);transition:transform .3s}
.syn-btn-arrow>span:before,.syn-btn-arrow>span:after{content:"";position:absolute;right:0;width:45%;height:3px;border-radius:2px;background:var(--syn-arrow_color);transform-origin:right center}
.syn-btn-arrow>span:before{transform:rotate(45deg)}.syn-btn-arrow>span:after{transform:rotate(-45deg)}
.syn-btn-outline{position:absolute;inset:0;opacity:0;border-radius:inherit;overflow:hidden;transition:opacity .3s}
.syn-btn-outline:before{content:"";position:absolute;width:70px;height:260%;left:calc(50% - 35px);top:-80%;background:linear-gradient(90deg,transparent,var(--syn-outline_color),transparent);animation:syn-spin calc(3s * var(--syn-speed)) linear infinite;animation-play-state:paused}
.syn-btn-splash{position:absolute;width:155%;height:auto;left:-28%;top:-88%;overflow:visible;stroke:var(--syn-splash_color);stroke-dasharray:60 60;stroke-dashoffset:60;pointer-events:none;z-index:5}
.syn-animated-btn:hover .syn-btn-face,.syn-animated-btn:focus-visible .syn-btn-face{transform:translate(calc(var(--syn-lift) + 2px),calc(-1 * (var(--syn-lift) + 2px)))}
.syn-animated-btn:hover .syn-btn-outline,.syn-animated-btn:focus-visible .syn-btn-outline{opacity:1}
.syn-animated-btn:hover .syn-btn-outline:before,.syn-animated-btn:focus-visible .syn-btn-outline:before{animation-play-state:running}
.syn-animated-btn:hover .syn-btn-arrow>span{animation:syn-arrow-swing calc(1s * var(--syn-speed)) ease-in-out infinite}
.syn-animated-btn:active .syn-btn-face{transform:translate(2px,-2px)}
.syn-animated-btn:active .syn-btn-base{box-shadow:-4px 4px 0 var(--syn-shadow_color),-9px 8px 7px var(--syn-shadow_color)}
.syn-animated-btn.syn-clicked .syn-btn-splash{animation:syn-splash calc(.8s * var(--syn-speed)) ease forwards}
.syn-animated-btn.syn-clicked .syn-btn-label-one{transform:translateY(-150%);opacity:0;filter:blur(7px)}
.syn-animated-btn.syn-clicked .syn-btn-label-two{transform:translateY(0);opacity:1;filter:blur(0)}
.syn-animated-btn.syn-clicked .syn-btn-arrow{animation:syn-arrow-fly calc(.6s * var(--syn-speed)) ease}
@keyframes syn-spin{to{transform:rotate(360deg)}}
@keyframes syn-arrow-swing{50%{transform:translateX(5px)}}
@keyframes syn-arrow-fly{50%{transform:translateX(25px);opacity:0}51%{transform:translateX(-25px);opacity:0}100%{transform:translateX(0);opacity:1}}
@keyframes syn-splash{to{stroke-dasharray:2 60;stroke-dashoffset:-60}}
@media(max-width:767px){.syn-btn-holder{max-width:100%;padding:0}.syn-animated-btn{max-width:calc(100% - 12px)}.syn-btn-inner{padding:8px 12px}.syn-btn-words{white-space:normal;text-align:center}}
@media(prefers-reduced-motion:reduce){.syn-animated-btn *, .syn-animated-btn *:before,.syn-animated-btn *:after{animation:none!important;transition:none!important}}

.syn-animated-btn.syn-clicked .syn-btn-face{transform:translate(2px,-2px)}
.syn-animated-btn.syn-clicked .syn-btn-base{box-shadow:-4px 4px 0 var(--syn-shadow_color),-9px 8px 7px var(--syn-shadow_color)}