:root{--bg:#0a0e17;--panel:#111826;--line:#1e293b;--text:#e6e9ef;--muted:#8a96ab;--accent:#3d7cff;--accent2:#34e89e;--radius:14px}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
header.site{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(10,14,23,.85);backdrop-filter:blur(8px);z-index:10}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:800;font-size:20px;text-decoration:none;letter-spacing:.3px}
.logo span{color:var(--accent)}
nav a{margin-left:22px;text-decoration:none;color:var(--muted)}
nav a:hover{color:var(--text)}
.hero{padding:90px 0 60px;text-align:center;background:radial-gradient(600px 300px at 50% 0,rgba(61,124,255,.25),transparent)}
.hero h1{font-size:clamp(34px,6vw,56px);line-height:1.1;margin:0 0 16px}
.hero h1 .grad{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);font-size:19px;margin:0 auto 30px;max-width:620px}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:600;padding:9px 16px;border-radius:10px;font-size:14px;border:0;cursor:pointer;transition:filter .15s}
.btn:hover{filter:brightness(1.15)}
.btn-lg{padding:14px 22px;font-size:16px;width:100%;text-align:center}
.btn-ghost{background:transparent;border:1px solid var(--line)}
.btn-disabled{background:var(--line);color:var(--muted);cursor:default}
.btn-disabled:hover{filter:none}
section{padding:50px 0}
h2.section{font-size:28px;margin:0 0 24px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;transition:transform .15s,border-color .15s}
.card:hover{transform:translateY(-3px);border-color:var(--accent)}
.card-link{text-decoration:none;padding:22px;flex:1}
.card h3{margin:12px 0 6px;font-size:20px}
.card p{margin:0;color:var(--muted)}
.card-icon{width:56px;height:56px;border-radius:12px;background:#172033;display:grid;place-items:center;font-size:30px;overflow:hidden}
.card-icon img{width:100%;height:100%;object-fit:cover}
.card-icon.big{width:88px;height:88px;font-size:48px;flex:none}
.meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.meta span{font-size:12px;color:var(--muted);border:1px solid var(--line);padding:2px 8px;border-radius:99px}
.card-foot{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-top:1px solid var(--line)}
.features-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.feat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.feat h3{margin:0 0 6px;font-size:17px}
.feat p{margin:0;color:var(--muted);font-size:15px}
details{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 18px;margin-bottom:10px}
summary{cursor:pointer;font-weight:600}
details p{color:var(--muted);margin:10px 0 0}
footer.site{border-top:1px solid var(--line);padding:30px 0;color:var(--muted);font-size:14px}
footer.site .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.back{color:var(--muted);text-decoration:none;display:inline-block;margin:30px 0 20px}
.detail-head{display:flex;gap:20px;align-items:center}
.detail-head h1{margin:0;font-size:38px}
.lead{color:var(--muted);margin:4px 0 0;font-size:18px}
.detail-body{display:grid;grid-template-columns:1fr 300px;gap:40px;margin:36px 0 60px}
.detail-main p{color:#c9cedb}
.features{padding-left:20px}
.features li{margin:6px 0}
.buy-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;align-self:start;position:sticky;top:84px}
.buy-price{font-size:32px;font-weight:800;margin-bottom:14px}
.buy-box dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:20px 0;font-size:14px}
.buy-box dt{color:var(--muted)}
.buy-box dd{margin:0}
.docs{display:block;margin-bottom:12px;color:var(--accent2);text-decoration:none}
.fine{font-size:12px;color:var(--muted);margin:0}
@media(max-width:760px){.detail-body{grid-template-columns:1fr}.buy-box{position:static}nav a:not(:last-child){display:none}}

/* ===== v2 additions ===== */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
::selection{background:var(--accent);color:#fff}
header.site{transition:box-shadow .2s}
header.site.scrolled{box-shadow:0 8px 30px rgba(0,0,0,.4)}
.announce{background:linear-gradient(90deg,var(--accent),#22c7ff,var(--accent2));background-size:200% 100%;animation:shift 8s linear infinite;color:#fff;text-align:center;font-size:14px;font-weight:500;padding:8px 44px;position:relative}
.announce a{color:#fff;font-weight:700;margin-left:6px}
.announce button{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;font-size:20px;cursor:pointer;opacity:.8}
@keyframes shift{to{background-position:200% 0}}

.hero{position:relative;overflow:hidden;padding:110px 0 80px}
.hero .wrap{position:relative;z-index:1}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mask-image:linear-gradient(#000 60%,transparent)}
.pill{display:inline-block;border:1px solid var(--line);background:rgba(21,25,34,.7);padding:5px 14px;border-radius:99px;font-size:13px;color:var(--muted);margin-bottom:20px}
.pill:empty{display:none}
.hero h1 .grad{background-size:200% auto;animation:shift 6s linear infinite}
.hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-ctas .btn-lg{width:auto}
.trust{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:28px;color:var(--muted);font-size:14px}
.btn{box-shadow:0 4px 20px rgba(61,124,255,.25)}
.btn-ghost,.btn-disabled{box-shadow:none}
.btn:active{transform:translateY(1px)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px;text-align:center}
.stat b{display:block;font-size:40px;font-weight:800;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--muted)}
#stats{padding:10px 0 20px}

.shop-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.shop-head h2{margin:0}
.controls{display:flex;gap:10px;flex-wrap:wrap}
.search{position:relative}
.search input,#sort{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:10px 14px;font:inherit;font-size:14px;outline:none}
.search input{width:240px;padding-right:36px}
.search input:focus,#sort:focus{border-color:var(--accent)}
.search kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.chip{background:transparent;border:1px solid var(--line);color:var(--muted);padding:6px 14px;border-radius:99px;cursor:pointer;font:inherit;font-size:14px;transition:.15s}
.chip:hover{color:var(--text);border-color:var(--muted)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.empty{color:var(--muted);grid-column:1/-1;text-align:center;padding:40px}

.card,.bundle{position:relative;overflow:hidden}
.card::before,.bundle::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(61,124,255,.18),transparent 60%)}
.card:hover::before,.bundle:hover::before{opacity:1}
.card:hover{box-shadow:0 12px 40px rgba(0,0,0,.35)}
.card-top{display:flex;justify-content:space-between;align-items:flex-start}
.card:hover .card-icon{transform:scale(1.08) rotate(-4deg)}
.card-icon{transition:transform .25s}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 9px;border-radius:6px;background:var(--line);color:var(--text)}
.badge.sale{background:#ef4444;color:#fff}
.badge.new{background:var(--accent2);color:#052a1b}
.badge.popular{background:#f59e0b;color:#2a1a00}
.badge.free{background:#12332a;color:var(--accent2)}
.price{font-weight:700;font-size:18px}
.price s{color:var(--muted);font-weight:400;font-size:14px;margin-right:8px}

.bundle{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;padding:36px;border-radius:20px;border:1px solid rgba(61,124,255,.5);background:linear-gradient(135deg,rgba(61,124,255,.18),rgba(52,232,158,.08)),var(--panel)}
.bundle h2{margin:10px 0 6px;font-size:30px}
.bundle p{color:var(--muted);margin:0 0 16px}
.bundle-items{display:flex;gap:8px;flex-wrap:wrap}
.bundle-items span{background:rgba(0,0,0,.25);border:1px solid var(--line);padding:6px 12px;border-radius:10px;font-size:14px}
.bundle-buy{text-align:center;min-width:220px}
.bundle-buy s{color:var(--muted)}
.save{color:var(--accent2);font-weight:700;font-size:14px}
.big-price{font-size:42px;font-weight:800;margin-bottom:12px}

.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.quote{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.quote blockquote{margin:0 0 14px;font-size:17px}
.quote figcaption{color:var(--muted);font-size:14px}

.cta{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:36px;border-radius:20px;background:linear-gradient(135deg,#5865f2,#3b44c4)}
.cta h2{margin:0 0 4px}.cta p{margin:0;opacity:.85}
.btn.discord{background:#fff;color:#3b44c4;width:auto}
#discord{padding-top:0}

.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.js .reveal.in{opacity:1;transform:none}

/* plugin page */
.detail-head .badges{margin-bottom:6px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:24px}
.gallery button{padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:zoom-in;background:none;aspect-ratio:16/10}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.gallery button:hover img{transform:scale(1.05)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px}
.tabs button{background:none;border:0;color:var(--muted);font:inherit;font-weight:600;padding:10px 16px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--text);border-color:var(--accent)}
.tabs small{font-size:11px;background:var(--line);padding:1px 6px;border-radius:5px;margin-left:4px}
.cmds{width:100%;border-collapse:collapse;font-size:14px}
.cmds th{text-align:left;color:var(--muted);font-weight:500;padding:8px;border-bottom:1px solid var(--line)}
.cmds td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
code{background:#172033;padding:2px 7px;border-radius:6px;font-size:13px}
code.copy{cursor:pointer;color:var(--accent2)}
code.copy:hover{background:#1f2b42}
.log{border-left:2px solid var(--accent);padding:2px 0 2px 16px;margin-bottom:20px}
.log-head{display:flex;gap:10px;align-items:baseline}
.log-head span{color:var(--muted);font-size:13px}
.log ul{margin:6px 0 0;padding-left:18px;color:#c9cedb}
.perks{list-style:none;padding:0;margin:16px 0 0;font-size:14px}
.perks li{padding:3px 0}.perks li::before{content:"✔ ";color:var(--accent2)}
.share{width:100%;background:none;border:1px solid var(--line);color:var(--muted);padding:8px;border-radius:10px;cursor:pointer;font:inherit;font-size:14px}
.share:hover{color:var(--text)}
.buy-price .price{font-size:32px;font-weight:800}
.related{padding:0 0 60px}
.card.mini{flex-direction:row;align-items:center;gap:14px;padding:16px;text-decoration:none}
.card.mini b{display:block}.card.mini .price{font-size:14px;color:var(--muted)}
.notfound{text-align:center;padding:100px 0}

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:100;display:grid;place-items:center;animation:fade .2s}
.lightbox img{max-width:90vw;max-height:85vh;border-radius:10px}
.lightbox button{position:absolute;background:rgba(255,255,255,.1);border:0;color:#fff;font-size:30px;width:50px;height:50px;border-radius:50%;cursor:pointer}
.lb-x{top:20px;right:20px}.lb-prev{left:20px}.lb-next{right:20px}
@keyframes fade{from{opacity:0}}
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:var(--accent);color:#fff;padding:10px 18px;border-radius:10px;font-weight:600;opacity:0;transition:.25s;z-index:200}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:760px){.bundle{grid-template-columns:1fr}.search input{width:100%}.controls,.search{width:100%}.cmds th:nth-child(3),.cmds td:nth-child(3){display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== v3: smoothness + site-wide background ===== */
html{background:var(--bg);scroll-padding-top:90px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}
body{background:transparent;min-height:100vh}
#bg{position:fixed;inset:0;width:100vw;height:100vh;z-index:-2;pointer-events:none}
.spot{position:fixed;left:0;top:0;width:600px;height:600px;border-radius:50%;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(circle,rgba(61,124,255,.10),transparent 65%);will-change:transform}
.hero{background:radial-gradient(600px 300px at 50% 0,rgba(61,124,255,.25),transparent)}
footer.site{background:rgba(10,14,23,.7);backdrop-filter:blur(6px)}

/* page-to-page transitions (Chrome/Edge/Safari) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .2s ease both}
::view-transition-new(root){animation:vt-in .3s ease both}
::view-transition-group(*){animation-duration:.35s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}
/* first paint fade-in */
@keyframes page-in{from{opacity:0;transform:translateY(6px)}}
main{animation:page-in .45s cubic-bezier(.2,.8,.2,1) both}

/* header hides on scroll down, returns on scroll up */
header.site{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
header.site.hide{transform:translateY(-100%)}
nav a{position:relative;transition:color .2s}
nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--accent);border-radius:2px;transform:scaleX(0);transition:transform .25s}
nav a:not(.btn):hover::after,nav a.active::after{transform:scaleX(1)}
nav a.active{color:var(--text)}

.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--accent),var(--accent2));pointer-events:none}
.to-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(21,25,34,.9);color:var(--text);font-size:20px;cursor:pointer;z-index:50;opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:.3s cubic-bezier(.2,.8,.2,1);backdrop-filter:blur(6px)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{border-color:var(--accent);transform:translateY(-3px)}

/* smoother everything */
.btn,.chip,.card,.feat,.quote,details,.share,code.copy{transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s,border-color .2s,color .2s,box-shadow .25s,filter .2s}
.btn{position:relative;overflow:hidden}
.btn:hover:not(.btn-disabled){transform:translateY(-2px);box-shadow:0 8px 28px rgba(61,124,255,.4)}
.btn:active:not(.btn-disabled){transform:translateY(0) scale(.97)}
.chip{position:relative;overflow:hidden}
.chip:active{transform:scale(.95)}
.ripple{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:rgba(255,255,255,.45);pointer-events:none;animation:ripple .6s ease-out forwards}
@keyframes ripple{to{transform:scale(30);opacity:0}}
.feat:hover,.quote:hover{transform:translateY(-3px);border-color:#2d3a52}
.card.tilt{transition:transform .08s linear,border-color .2s,box-shadow .25s}
.card{will-change:transform}
::view-transition-group(*){z-index:5}
#result-count{font-size:14px;color:var(--muted);font-weight:400;margin-left:8px}
.empty{display:flex;flex-direction:column;align-items:center;gap:12px}
.empty-ico{font-size:34px}
img.loading{opacity:0}
img{transition:opacity .4s}

details{overflow:hidden;transition:height .28s cubic-bezier(.2,.8,.2,1),border-color .2s}
details:hover{border-color:#2d3a52}
details[open]{border-color:rgba(61,124,255,.5)}
summary{list-style:none;display:flex;justify-content:space-between;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:20px;color:var(--muted);transition:transform .28s}
details[open] summary::after{transform:rotate(45deg);color:var(--accent)}

/* tabs: sliding underline + fade */
.tabs{position:relative}
.tabs button{border-bottom-color:transparent!important;transition:color .2s}
.tabs button:hover{color:var(--text)}
.tabs .ink{position:absolute;left:0;bottom:-1px;height:2px;background:var(--accent);border-radius:2px;transition:transform .3s cubic-bezier(.2,.8,.2,1),width .3s cubic-bezier(.2,.8,.2,1)}
.tab.fade{animation:page-in .3s ease both}

/* sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(21,25,34,.92);backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.buybar.show{transform:none}
.buybar-in{max-width:1100px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:14px}
.buybar .card-icon{width:40px;height:40px;font-size:22px}
.buybar-name{flex:1;display:flex;flex-direction:column;line-height:1.3}
.buybar-name .price{font-size:14px}
body:has(.buybar.show) .to-top{bottom:84px}

/* mobile menu */
.burger{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;padding:8px}
.burger span{display:block;height:2px;background:var(--text);border-radius:2px;transition:transform .3s,opacity .2s}
@media(max-width:760px){
  .burger{display:flex}
  nav{position:fixed;top:64px;left:0;right:0;background:rgba(10,14,23,.97);backdrop-filter:blur(10px);display:flex;flex-direction:column;padding:10px 20px 20px;border-bottom:1px solid var(--line);transform:translateY(-10px);opacity:0;pointer-events:none;transition:.25s cubic-bezier(.2,.8,.2,1)}
  nav a,nav a:not(:last-child){display:block;margin:0;padding:12px 0;font-size:17px}
  nav a.btn{text-align:center;margin-top:8px}
  nav a:not(.btn)::after{display:none}
  body.menu-open nav{transform:none;opacity:1;pointer-events:auto}
  body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.menu-open .burger span:nth-child(2){opacity:0}
  body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .to-top{right:14px;bottom:14px}
}

/* polish */
:focus-visible{outline:2px solid var(--accent2);outline-offset:3px;border-radius:6px}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#26324a;border-radius:10px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
html{scrollbar-color:#26324a var(--bg)}

/* ===== v4: Plugin Hub palette ===== */
.logo{display:flex;align-items:center;gap:10px}
.logo span{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-mark{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 18px rgba(61,124,255,.5);transform:rotate(45deg) scale(.8);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.logo:hover .logo-mark{transform:rotate(225deg) scale(.9)}
.hero{background:radial-gradient(700px 320px at 50% 0,rgba(61,124,255,.22),transparent),radial-gradient(400px 200px at 80% 20%,rgba(52,232,158,.08),transparent)}
.btn:not(.btn-ghost):not(.btn-disabled):not(.discord){background:linear-gradient(135deg,#3d7cff,#2a64e8)}
.spot{background:radial-gradient(circle,rgba(61,124,255,.10),rgba(52,232,158,.03) 40%,transparent 65%)}
.logo{gap:0}.logo-mark{margin-right:10px}.logo span{margin-left:.25em}
@media(min-width:761px){nav{display:flex;align-items:center}}

/* ===== v5: built-in checkout + success page ===== */
body.no-scroll{overflow:hidden}
button.btn{font:inherit;font-weight:600}
.co-load,.co-err{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:260px;color:#4b5565;text-align:center;padding:30px}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid rgba(61,124,255,.25);border-top-color:var(--accent);animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

#success{padding:70px 20px 90px}
.ok-card{max-width:560px;margin:0 auto;text-align:center;background:rgba(17,24,38,.85);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:20px;padding:40px 30px}
.ok-card h1{margin:10px 0 8px}
.ok-card p{color:var(--muted)}
.ok-ico{font-size:52px}
.ok-ico.pop{animation:pop .6s cubic-bezier(.2,1.6,.4,1) both}
@keyframes pop{from{transform:scale(0)}}
.dl-list{display:flex;flex-direction:column;gap:10px;margin:22px 0}
.dl{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--bg);text-decoration:none;text-align:left;transition:border-color .2s,transform .2s}
.dl:hover{border-color:var(--accent);transform:translateY(-2px)}
.dl .card-icon{width:44px;height:44px;font-size:24px;flex:none}
.dl>span:nth-child(2){flex:1;display:flex;flex-direction:column}
.dl small{color:var(--muted)}
.tip{background:rgba(52,232,158,.08);border:1px solid rgba(52,232,158,.3);border-radius:12px;padding:12px 14px;font-size:14px;margin-bottom:14px;text-align:left}
.confetti{position:fixed;top:-12px;width:9px;height:14px;border-radius:2px;z-index:300;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translate(var(--dx),105vh) rotate(var(--r))}}

/* ===== v6: Tebex-style checkout page ===== */
.basket-link{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);color:var(--text)!important;margin-left:18px}
.basket-link:hover{border-color:var(--accent)}
.basket-link::after{display:none}
.basket-count{position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:var(--accent2);color:#052a1b;font-size:11px;font-weight:800;display:grid;place-items:center}
.basket-count.bump{animation:pop .4s cubic-bezier(.2,1.6,.4,1)}
@media(max-width:760px){.basket-link{margin:8px 0 0;width:100%;height:46px}.basket-link::before{content:"Basket";margin-right:8px}}

#checkout{padding:36px 20px 80px}
.steps{list-style:none;display:flex;justify-content:center;gap:0;padding:0;margin:0 auto 34px;max-width:560px;counter-reset:s}
.steps li{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);font-size:14px;font-weight:600;position:relative}
.steps li:not(:first-child)::before{content:"";position:absolute;top:16px;right:50%;width:100%;height:2px;background:var(--line);z-index:-1}
.steps li.done:not(:first-child)::before,.steps li.now:not(:first-child)::before{background:var(--accent)}
.steps span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--panel);border:2px solid var(--line);color:var(--muted);transition:.3s}
.steps li.done span{background:var(--accent);border-color:var(--accent);color:#fff}
.steps li.now{color:var(--text)}
.steps li.now span{border-color:var(--accent);color:var(--text);box-shadow:0 0 0 5px rgba(61,124,255,.18)}

.co-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:24px;align-items:start;max-width:1040px;margin:0 auto}
.co-panel{background:rgba(17,24,38,.9);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:16px;overflow:hidden;animation:page-in .4s cubic-bezier(.2,.8,.2,1) both}
.co-pay{animation-delay:.06s;position:sticky;top:84px}
.co-panel-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}
.co-panel-head h2{margin:0;font-size:19px}
.co-panel-head span{color:var(--muted);font-size:14px}
.secure{color:var(--accent2)!important}
.bk{list-style:none;margin:0;padding:6px 0}
.bk li{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--line);transition:opacity .2s,transform .2s}
.bk li.removing{opacity:0;transform:translateX(30px)}
.bk .card-icon{width:46px;height:46px;font-size:24px;flex:none}
.bk-info{flex:1;display:flex;flex-direction:column;min-width:0}
.bk-info small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-price .price{font-size:16px}
.bk-x{background:none;border:1px solid transparent;color:var(--muted);width:32px;height:32px;border-radius:8px;cursor:pointer;transition:.2s}
.bk-x:hover:not(:disabled){color:#ff6b6b;border-color:rgba(255,107,107,.35);background:rgba(255,107,107,.08)}
.bk-x:disabled{opacity:.3;cursor:not-allowed}
.co-more{display:block;padding:12px 22px;color:var(--accent2);text-decoration:none;font-size:14px;font-weight:600}
.co-more.locked{pointer-events:none;opacity:.4}
.sum{padding:16px 22px 20px;border-top:1px solid var(--line);background:rgba(0,0,0,.18)}
.sum div{display:flex;justify-content:space-between;padding:4px 0;color:var(--muted);font-size:15px}
.sum-save span:last-child{color:var(--accent2)}
.sum-total{margin-top:8px;padding-top:12px!important;border-top:1px dashed var(--line);color:var(--text)!important;font-size:20px!important;font-weight:800}
.sum-total small{font-size:12px;color:var(--muted);font-weight:500}
.pay-intro{padding:22px}
.pay-intro .perks{margin:0 0 18px}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted);margin-bottom:16px;cursor:pointer}
.agree input{width:18px;height:18px;accent-color:var(--accent);margin-top:2px;flex:none}
.agree a{color:var(--accent2)}
#continue:disabled{background:var(--line)!important;color:var(--muted);box-shadow:none;cursor:not-allowed;transform:none}
.pay-intro .fine{text-align:center;margin-top:10px}
.stripe-mount{background:#fff;min-height:300px}
.co-back{display:block;width:100%;background:none;border:0;border-top:1px solid var(--line);color:var(--muted);padding:12px;cursor:pointer;font:inherit;font-size:14px}
.co-back:hover{color:var(--text)}
#pay-area .co-load,#pay-area .co-err{color:var(--muted)}
.co-empty{text-align:center;padding:60px 20px;max-width:460px;margin:0 auto;background:rgba(17,24,38,.85);border:1px solid var(--line);border-radius:18px}
.co-empty p{color:var(--muted)}
.co-empty .btn-lg{width:auto}
#success .steps{margin-bottom:28px}
@media(max-width:860px){.co-grid{grid-template-columns:1fr}.co-pay{position:static}}
.co-panel{padding:0}

/* ===== v7: payment method chooser ===== */
.pm-title{margin:0 0 12px;font-size:16px}
.pm-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.pm{position:relative;display:flex;align-items:center;gap:12px;text-align:left;padding:11px 12px;border-radius:12px;border:1.5px solid var(--line);background:rgba(0,0,0,.2);color:var(--text);font:inherit;cursor:pointer;transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}
.pm:hover:not(.pm-off){border-color:#3a4a66;transform:translateY(-1px)}
.pm.on{border-color:var(--accent);background:rgba(61,124,255,.1);box-shadow:0 0 0 3px rgba(61,124,255,.15)}
.pm-logo{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;font-weight:900;font-size:17px;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.pm-text{flex:1;display:flex;flex-direction:column;line-height:1.25;min-width:0}
.pm-text b{font-size:14px}
.pm-text small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:none;transition:.2s}
.pm.on .pm-radio{border-color:var(--accent);background:radial-gradient(circle,var(--accent) 45%,transparent 50%)}
.pm-off{cursor:not-allowed;opacity:.5;filter:grayscale(1)}
.pm-off .pm-text b{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.4)}
.pm-x{width:22px;height:22px;border-radius:50%;background:#ef4444;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:900;flex:none;filter:none}
.pm-off .pm-x{filter:grayscale(0)}
.pm.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.pm-chosen{display:flex;align-items:center;gap:12px;padding:12px 22px;border-bottom:1px solid var(--line);font-size:14px}
.pm-chosen .pm-logo{width:30px;height:30px;font-size:14px}
.pm-chosen span:nth-child(2){flex:1}
.pm-chosen button{background:none;border:1px solid var(--line);color:var(--accent2);border-radius:8px;padding:5px 12px;cursor:pointer;font:inherit;font-size:13px}
.pm-chosen button:hover{border-color:var(--accent2)}
@media(max-width:420px){.pm-grid{grid-template-columns:1fr}}
.co-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.pm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:860px){.co-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:420px){.pm-grid{grid-template-columns:minmax(0,1fr)}}
.pm-off{opacity:1;filter:none;background:rgba(0,0,0,.12)}
.pm-off .pm-logo{filter:grayscale(1);opacity:.4}
.pm-off .pm-text{opacity:.45}
.pm-off .pm-x{box-shadow:0 0 0 3px rgba(239,68,68,.2)}

/* ===== v8: performance — no live blur, no endless repaints ===== */
header.site,footer.site,.buybar,.ok-card,.co-panel,.to-top,.pill,nav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
header.site{background:rgba(10,14,23,.96)}
footer.site{background:#0a0e17}
.buybar{background:#111826}
.ok-card,.co-panel,.co-empty{background:#111826}
.to-top{background:#111826}
.announce,.hero h1 .grad{animation:none}
.card{will-change:auto}
#bg{will-change:transform;transform:translateZ(0)}
.spot{will-change:transform;contain:strict}
.card.tilt{will-change:transform}
@media(max-width:760px){nav{background:#0a0e17}}