/* Metal shader adapted from Joly UI. CSS supplies the no-WebGL treatment. */
@property --metal-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.metal-button{--metal-angle:0deg;--magnet-x:0px;--magnet-y:0px;position:relative;isolation:isolate;overflow:hidden;border:1.5px solid transparent!important;border-radius:999px!important;color:#fff!important;background:linear-gradient(165deg,#30343d 0%,#15181e 45%,#08090c 75%,#252a34 100%) padding-box,conic-gradient(from var(--metal-angle),#525865,#fafbff 12%,#71798a 23%,#252c3a 36%,#d9e3ff 51%,#646e82 63%,#f6f8ff 78%,#404858 90%,#525865) border-box!important;box-shadow:inset 0 1px 2px #ffffff35,inset 0 -2px 3px #0009,0 5px 14px #0003;transform:translate(var(--magnet-x),var(--magnet-y));transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s;animation:metal-orbit 9s linear infinite}
.metal-label{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.metal-label svg{width:19px;height:19px;flex-shrink:0}
.metal-button:before{content:'';position:absolute;z-index:1;inset:-80% -60%;pointer-events:none;background:linear-gradient(115deg,transparent 35%,#ffffff04 43%,#ffffff25 48%,#ffffff08 53%,transparent 60%);transform:translateX(-55%);animation:metal-sweep 7s ease-in-out infinite;mix-blend-mode:screen}
.metal-button:after{content:'';position:absolute;z-index:1;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse at var(--shine-x,50%) var(--shine-y,0%),#b9d0ff30,transparent 65%);opacity:.5;transition:opacity .3s}
.metal-button:hover,.metal-button:focus-visible{transform:translate(var(--magnet-x),calc(var(--magnet-y) - 2px));box-shadow:inset 0 1px 3px #ffffff59,inset 0 -2px 4px #0009,0 9px 26px #344d853d}
.metal-button:hover:after,.metal-button:focus-visible:after{opacity:1}
.metal-button:active{transform:translate(var(--magnet-x),var(--magnet-y)) scale(.98)}
.metal-button.metal-light{color:#101216!important;background:linear-gradient(150deg,#fff 0%,#dfe4ed 38%,#fff 63%,#c6ceda 100%) padding-box,conic-gradient(from var(--metal-angle),#687385,#fff 15%,#8793a5 33%,#fff 55%,#6a788c 75%,#fff 88%,#687385) border-box!important;box-shadow:inset 0 1px 2px #fff,0 3px 10px #0002}
.hero-orbit{animation:hero-color-drift 12s ease-in-out infinite alternate;animation-play-state:paused;transition:translate .65s cubic-bezier(.2,.8,.2,1);translate:calc(var(--hero-x,0px) * -.45) calc(var(--hero-y,0px) * -.45)}
.hero-motion-active .hero-orbit{animation-play-state:running}
.hero-visual>img{translate:var(--hero-x,0px) var(--hero-y,0px);transition:translate .65s cubic-bezier(.2,.8,.2,1)}
.hero-sticker{transition:translate .65s cubic-bezier(.2,.8,.2,1);translate:calc(var(--hero-x,0px) * -.65) calc(var(--hero-y,0px) * -.65)}
.hero h1>span{background:linear-gradient(100deg,#7797ff 15%,#b1c3ff 42%,#7797ff 65%);background-size:220% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:hero-text-sheen 9s ease-in-out infinite;animation-play-state:paused}
.hero-motion-active h1>span{animation-play-state:running}
@media(hover:hover) and (pointer:fine){
 .product-card{position:relative;isolation:isolate;transform-style:preserve-3d;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
 .product-card.motion-hover{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-5px);border-color:#9baed4;box-shadow:0 18px 35px #1832591c}
 .product-card:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;background:radial-gradient(250px circle at var(--card-x,50%) var(--card-y,0%),#dbe5ff35,transparent 75%);opacity:0;transition:opacity .3s}
 .product-card.motion-hover:after{opacity:1}
 .product-card:focus-within{border-color:#91aaff;box-shadow:0 12px 30px #18325917}
}
@keyframes metal-orbit{to{--metal-angle:360deg}}
@keyframes metal-sweep{0%,35%{transform:translateX(-55%)}65%,100%{transform:translateX(55%)}}
@keyframes hero-color-drift{from{filter:brightness(.95);background-position:0% 50%}to{filter:brightness(1.16);background-position:100% 50%}}
@keyframes hero-text-sheen{0%,25%{background-position:100% 50%}70%,100%{background-position:0% 50%}}
.motion-paused .metal-button,.motion-paused .metal-button:before,.motion-paused .hero h1>span,.motion-paused .hero-orbit{animation-play-state:paused!important}
.liquid-edge{position:absolute;inset:-1.5px;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.liquid-edge canvas{position:absolute!important;inset:0;width:100%!important;height:100%!important;display:block;border-radius:inherit}
.liquid-core{position:absolute;inset:2px;z-index:1;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,#282c34,#090a0d);box-shadow:inset 0 1px 1px #ffffff25}
.shader-ready{background:transparent!important;animation:none}
.shader-ready:before{display:none}
.shader-ready:after{inset:2px;z-index:1}
.metal-light .liquid-core{background:linear-gradient(160deg,#fff,#e8edf6 65%,#fff)}
.site-header nav{position:relative;isolation:isolate;gap:4px;padding:5px;border:1px solid #ffffff12;border-radius:999px;background:#ffffff04}
.site-header nav a{position:relative;z-index:1;overflow:hidden;border-radius:999px;padding:10px 16px;transition:color .2s,transform .25s;font-size:14px;white-space:nowrap}
.site-header nav a:hover,.site-header nav a:focus-visible,.site-header nav a[aria-current]{color:#fff}
.motion-marker{position:absolute;pointer-events:none;z-index:0;left:0;top:0;border-radius:999px;background:linear-gradient(165deg,#375bd8,#243d9d);box-shadow:inset 0 1px 0 #ffffff32,0 3px 9px #1a2f6825;transition:none}
.marker-ready>.motion-marker{transition:transform .42s cubic-bezier(.22,1.2,.36,1),width .42s cubic-bezier(.22,1.2,.36,1),height .3s,opacity .2s}
.motion-marker[hidden]{display:none}
.site-header nav .motion-marker{background:linear-gradient(160deg,#ffffff19,#7595ff17);box-shadow:inset 0 1px 0 #ffffff25,inset 0 -1px 0 #ffffff0b}
.filter-tabs,.carrier-tabs{position:relative;isolation:isolate}
.filter-tabs .filter-tab,.carrier-tabs .filter-tab{border-radius:999px}
.filter-tab{position:relative;z-index:1;overflow:hidden;border-radius:999px;transition:color .2s,border-color .2s,box-shadow .2s,transform .25s;background:linear-gradient(180deg,#fff,#edf0f6);box-shadow:inset 0 1px 0 #fff,0 2px 4px #17284b08}
.filter-tab:hover,.filter-tab:focus-visible{border-color:#8ca4ee;box-shadow:inset 0 1px 0 #fff,0 3px 12px #315aff18}
.filter-tab:active{transform:scale(.96)}
.marker-ready .filter-tab.active{background:transparent!important;border-color:transparent;box-shadow:none;color:#fff}
.carrier-tabs>.motion-marker{background:linear-gradient(165deg,#30394f,#111a2f)}
.filter-tab:hover:not(.active){color:#2346be;background:linear-gradient(180deg,#fff,#e8eeff)}
.filter-tab:focus-visible{outline:2px solid #315aff;outline-offset:3px}
.card-bottom>a{position:relative;isolation:isolate;overflow:hidden;border-radius:999px;transition:color .25s,background .25s,box-shadow .25s,transform .3s!important}
.card-bottom>a:hover,.card-bottom>a:focus-visible{color:white;background:#315aff;box-shadow:0 4px 12px #315aff35;transform:translateY(-2px)}
.card-bottom>a:after{content:'';pointer-events:none;position:absolute;inset:-100%;background:linear-gradient(120deg,transparent 40%,#ffffff38 50%,transparent 60%);transform:translateX(-65%);transition:transform .65s}
.card-bottom>a:hover:after,.card-bottom>a:focus-visible:after{transform:translateX(65%)}
.review-controls button{position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.22,1.2,.36,1),background .2s,box-shadow .2s}
.review-controls button:hover:not(:disabled),.review-controls button:focus-visible{transform:translateY(-3px);box-shadow:0 5px 14px #16653420}
.review-controls button:active:not(:disabled){transform:scale(.93)}
.catalog-inputs select,.search-field{transition:border-color .25s,box-shadow .25s}
.catalog-inputs select:hover,.search-field:hover{border-color:#a6b7e1}
.catalog-inputs select:focus-visible,.search-field:focus-within{border-color:#315aff;box-shadow:0 0 0 3px #315aff12}
.tap-ripple{position:absolute;z-index:4;pointer-events:none;border-radius:50%;background:radial-gradient(circle,#a9c4ff50,transparent 70%);transform:translate(-50%,-50%) scale(0);animation:control-ripple .6s ease-out forwards}
@keyframes control-ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
@media(max-width:900px){.site-header nav a{padding:9px 11px;font-size:13px}}
@media(prefers-reduced-motion:reduce){
 .metal-button,.metal-button:before,.hero h1>span,.hero-orbit{animation:none!important}
 .metal-button,.metal-button:hover,.metal-button:focus-visible,.product-card.motion-hover{transform:none!important}
 .hero-visual>img,.hero-orbit,.hero-sticker{translate:none!important;transition:none!important}
 .hero h1>span{background:none;color:#7797ff}
 .motion-marker,.card-bottom>a,.review-controls button,.filter-tab{transition:none!important}
 .card-bottom>a,.review-controls button,.filter-tab{transform:none!important}
 .tap-ripple{display:none}
}

/* The same liquid-metal renderer, with a warm gold palette. */
.proof-strip>a.metal-gold{color:#513b11!important;background:linear-gradient(#e6ba63,#e6ba63) padding-box,conic-gradient(from var(--metal-angle),#171717,#686868 13%,#252525 28%,#858585 44%,#101010 63%,#595959 82%,#171717) border-box!important;box-shadow:inset 0 1px 2px #fff6dd70,inset 0 -2px 3px #80591b26,0 4px 14px #9b711f16;animation:metal-orbit 9s linear infinite}
.review-gold-label{width:100%;flex-wrap:wrap;gap:8px 12px}
.proof-strip .metal-gold strong{color:#38280c}
.proof-strip .metal-gold .proof-stars{color:#795210;text-shadow:0 1px 0 #fff1ba70}
.proof-strip>a.metal-gold:before,.proof-strip>a.metal-gold:after{display:none}
.metal-gold .liquid-edge{filter:grayscale(1) brightness(.45)}
.metal-gold .liquid-core{background:#e6ba63;box-shadow:inset 0 1px 2px #fff7d870,inset 0 -1px 2px #a0722526}
.proof-strip>a.metal-gold.shader-ready{background:transparent!important;animation:none}
.proof-strip>a.metal-gold:hover,.proof-strip>a.metal-gold:focus-visible{box-shadow:inset 0 1px 3px #fff9dcaa,inset 0 -2px 4px #80591b38,0 7px 22px #a7782930}
.metal-gold .tap-ripple{display:none}
@media(max-width:800px){.review-gold-label{gap:5px 8px}.review-gold-label>span:last-child{font-size:12px}}
@media(max-width:600px){.review-gold-label{gap:4px 8px}.review-gold-label>span:last-child{width:100%;font-size:11px}}
@media(prefers-reduced-motion:reduce){.proof-strip>a.metal-gold{animation:none!important}}