:root{--bg:#0e1017;--sf:#161a25;--ln:#ffffff14;--tx:#eef1f8;--mu:#97a0b8}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font:16px/1.6 'DM Sans',sans-serif;overflow-x:hidden}
h1,h2,h3,.logo{font-family:'Bricolage Grotesque',sans-serif;line-height:1.15}a{color:inherit;text-decoration:none}
nav{display:flex;justify-content:space-between;align-items:center;padding:16px 5vw;position:sticky;top:0;background:#0e1017dd;backdrop-filter:blur(12px);z-index:9;border-bottom:1px solid var(--ln)}
nav div{display:flex;gap:26px;color:var(--mu)}nav div a:hover{color:var(--tx)}
.logo{font-weight:800;font-size:1.4rem}.logo i{font-style:normal;color:var(--b)}
.btn{display:inline-block;background:linear-gradient(135deg,var(--a),var(--b));color:#fff;padding:12px 24px;border-radius:12px;font:500 1rem 'DM Sans';border:0;cursor:pointer;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -10px var(--a)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.hero{position:relative;padding:90px 5vw 50px;text-align:center;overflow:hidden}
.hero h1{font-size:clamp(2.2rem,5vw,4rem);font-weight:800;letter-spacing:-.03em;max-width:15em;margin:0 auto}
.hero p{color:var(--mu);margin:18px auto 28px;max-width:36em}
.blob{position:absolute;border-radius:50%;filter:blur(100px);opacity:.3;z-index:-1;animation:drift 14s ease-in-out infinite alternate}
.b1{width:380px;height:380px;background:var(--a);top:-120px;left:8%}.b2{width:320px;height:320px;background:var(--b);top:-40px;right:8%;animation-delay:-6s}
@keyframes drift{to{transform:translate(50px,40px) scale(1.15)}}
.srch{max-width:520px;margin:0 auto 26px;display:block;width:100%;padding:15px 22px;border-radius:99px;border:1px solid var(--ln);background:var(--sf);color:var(--tx);font:inherit}
.stats{display:flex;justify-content:center;gap:34px;color:var(--mu);flex-wrap:wrap}.stats b{color:var(--tx)}
section{padding:50px 5vw}h2{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:22px}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.chip{background:var(--sf);border:1px solid var(--ln);color:var(--tx);padding:8px 18px;border-radius:99px;cursor:pointer;font:inherit}.chip.on{background:var(--a);border-color:var(--a)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.card{background:var(--sf);border:1px solid var(--ln);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:translateY(24px)}
.card.in{opacity:1;transform:none;transition:opacity .6s,transform .6s,border-color .25s}.card:hover{border-color:var(--b);transform:translateY(-5px)}
.th{aspect-ratio:16/10;display:grid;place-items:center;font-size:4rem;position:relative;background:radial-gradient(circle at 30% 20%,var(--a),transparent 75%),#ffffff06;overflow:hidden}
.th img{width:100%;height:100%;object-fit:cover;position:absolute}
.bd{position:absolute;top:12px;left:12px;background:var(--b);color:#05221c;padding:2px 12px;border-radius:99px;font-size:.78rem;font-weight:700;z-index:1}
.ct{padding:18px;display:flex;flex-direction:column;gap:6px;flex:1}.ct small{color:var(--b)}.ct p{color:var(--mu);font-size:.9rem;flex:1}
.pr{display:flex;justify-content:space-between;align-items:center;margin-top:8px}.pr b{font:700 1.15rem 'Bricolage Grotesque'}
.pill{font-size:.78rem;padding:3px 11px;border-radius:99px;background:#22d3b71f;color:var(--b)}.pill.out{background:#ff5c5c22;color:#ff8c7a}
.pg{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;padding:50px 5vw;align-items:start}
.pg .th{border-radius:22px;font-size:7rem;aspect-ratio:4/3}.pg h1{font-size:2.3rem;margin:6px 0 10px}.price{font:800 2rem 'Bricolage Grotesque'}
.meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--mu);margin:10px 0 18px;font-size:.92rem}.desc{color:var(--mu);margin-bottom:22px;white-space:pre-line}
.box{background:var(--sf);border:1px solid var(--ln);border-radius:20px;padding:24px}
.in-t,.box input,.box textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid #ffffff22;background:var(--bg);color:var(--tx);font:inherit;margin:6px 0 14px}
.box label{font-size:.85rem;color:var(--mu)}.qty{display:flex;align-items:center;gap:14px;margin:6px 0 16px}.qty button{width:40px;height:40px;border-radius:10px;border:1px solid var(--ln);background:var(--bg);color:var(--tx);font-size:1.2rem;cursor:pointer}.qty b{min-width:30px;text-align:center}
.tot{display:flex;justify-content:space-between;margin-bottom:14px;font-size:1.1rem}#er{color:#ff8c7a;min-height:1.4em;font-size:.9rem}
.rv{padding:16px 0;border-top:1px solid var(--ln)}.rv span{color:#ffc857}.rv small{color:var(--mu)}
details{background:var(--sf);border:1px solid var(--ln);border-radius:14px;margin-bottom:10px;padding:16px 20px;max-width:760px}
summary{cursor:pointer;font-weight:500}details[open] p{animation:fd .3s}details p{color:var(--mu);margin-top:10px}@keyframes fd{from{opacity:0;transform:translateY(-6px)}}
.cn{max-width:520px;margin:60px auto;padding:0 20px}.items{white-space:pre-wrap;word-break:break-all;background:var(--bg);padding:14px;border-radius:10px;border:1px dashed var(--b);margin:12px 0;font-family:ui-monospace,monospace;font-size:.9rem}
footer{padding:36px 5vw;color:var(--mu);border-top:1px solid var(--ln);text-align:center;margin-top:40px}
@media(max-width:800px){.pg{grid-template-columns:1fr}nav div{gap:14px;font-size:.9rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.card{opacity:1;transform:none}}
:focus-visible{outline:2px solid var(--b);outline-offset:3px}