
:root{--fh:"Instrument Serif",Georgia,serif;--fb:Manrope,system-ui,sans-serif;--w:1240px;--bg:#100D0A;--panel:#19140F;--ink:#F4EBDB;--mute:#A89A86;--line:#2C241B;--gold:#C9A24D}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.65 var(--fb);overflow-x:clip}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
button:focus-visible,summary:focus-visible,.track:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
a{color:inherit}
h1,h2,h3,.serif{font-family:var(--fh);font-weight:400}
em{font-style:italic;color:var(--gold)}
@supports(-webkit-background-clip:text){em{background:linear-gradient(120deg,#F3DC91,#C9A24D 55%,#9C7430);-webkit-background-clip:text;background-clip:text;color:transparent}}
.prog{position:fixed;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,#F3DC91,var(--gold));transform-origin:0 50%;transform:scaleX(0);z-index:70}
.ann{background:linear-gradient(90deg,#17110a,#2a2013,#17110a);color:#EBCF85;text-align:center;font-size:13px;letter-spacing:.05em;padding:9px 5vw;border-bottom:1px solid var(--line)}
.top{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:12px 28px;flex-wrap:wrap;padding:14px 5vw;background:rgba(16,13,10,.72);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06)}
.top img{display:block;width:200px;max-width:55vw;height:auto}
.top .r{display:flex;align-items:center;gap:8px 28px;flex-wrap:wrap;font-size:15px}
.top nav{display:flex;gap:8px 24px;flex-wrap:wrap}.top a{text-decoration:none;color:#d9cdb9}.top nav a:hover{color:#fff}
.cartl{font-weight:500;color:var(--gold)!important;border-bottom:1px solid var(--gold);padding-bottom:1px}
.btn{display:inline-block;background:linear-gradient(120deg,#F3DC91,#C9A24D 60%,#B58A38);color:#17110A;padding:17px 34px;font-weight:600;letter-spacing:.02em;position:relative;overflow:hidden;transition:transform .25s,box-shadow .3s;box-shadow:0 10px 30px rgba(201,162,77,.18)}
.btn:hover{box-shadow:0 14px 40px rgba(201,162,77,.34)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
.btn:hover::after{transition:transform .8s;transform:translateX(120%)}
.btn.full{display:block;width:100%}
.lnk{font-weight:500;border-bottom:1px solid var(--gold);padding-bottom:2px;text-decoration:none;color:var(--gold)}
/* hero */
.hero{position:relative;height:calc(100svh - 110px);min-height:620px;overflow:hidden;display:flex;align-items:flex-end}
.hpar{position:absolute;inset:-6%}
.hbg{position:absolute;inset:0;background-size:cover;background-position:50% 62%;animation:kb 26s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(16,13,10,.9) 0%,rgba(16,13,10,.55) 42%,rgba(16,13,10,.08) 100%),linear-gradient(0deg,rgba(16,13,10,.9),transparent 45%)}
.hc{position:relative;z-index:2;padding:0 5vw 10vh;max-width:980px}
.hero h1{font-size:clamp(64px,10.5vw,156px);line-height:.9;margin:0 0 24px;letter-spacing:-.01em}
.sub{max-width:40ch;color:#d3c7b3;font-size:18px;margin:0 0 30px}
.cta{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.chips{position:absolute;right:5vw;bottom:10vh;z-index:2;display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.chip{background:rgba(25,20,15,.55);backdrop-filter:blur(14px);border:1px solid rgba(201,162,77,.35);padding:10px 18px;font-size:14px;color:#EBCF85;animation:bob 6s ease-in-out infinite}
.chip:nth-child(2){animation-delay:-2s}.chip:nth-child(3){animation-delay:-4s}
.scroll{position:absolute;left:50%;bottom:22px;width:1px;height:46px;background:linear-gradient(var(--gold),transparent);z-index:2;animation:drop 2.4s ease-in-out infinite}
.mask{display:block;overflow:hidden;padding-bottom:.12em}
.mask>span{display:block;transform:translateY(108%);transition:transform 1.2s cubic-bezier(.2,.7,.1,1);transition-delay:var(--dl,0s)}
.mask.in>span{transform:none}
/* product */
.prod{max-width:var(--w);margin:0 auto;padding:14vh 5vw 10vh;display:grid;grid-template-columns:1.1fr 1fr;gap:5vw;align-items:start}
.stage{position:relative;border:1px solid var(--line)}
.track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;aspect-ratio:1;background:var(--panel)}
.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;overflow:hidden;margin:0}
.slide img{width:100%;height:100%;object-fit:var(--fit,cover);display:block;transition:transform 1.4s cubic-bezier(.2,.7,.1,1)}
.slide:hover img{transform:scale(1.04)}
.arr{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(16,13,10,.7);backdrop-filter:blur(10px);border:1px solid rgba(201,162,77,.5);color:var(--gold);font-size:20px;line-height:44px;text-align:center;transition:transform .2s,background .2s}
.arr:hover{background:var(--gold);color:#17110A;transform:translateY(-50%) scale(1.08)}
#prev{left:12px}#next{right:12px}
.count{position:absolute;right:12px;bottom:12px;background:rgba(16,13,10,.75);backdrop-filter:blur(8px);padding:3px 11px;font-size:13px;color:var(--gold)}
.thumbs{display:flex;gap:10px;margin-top:12px}
.th{width:72px;height:72px;border:1px solid var(--line);background:var(--panel);overflow:hidden;opacity:.55;transition:opacity .25s,border-color .25s}
.th span{display:block;width:100%;height:100%;background-size:cover;background-position:center}
.th[aria-current=true]{border-color:var(--gold);opacity:1}
.info h2{font-size:clamp(40px,4.6vw,64px);line-height:1;margin:0 0 10px}
.price{font-size:30px;margin:0;color:var(--gold)}.price span{display:inline-block}
.ship{font-size:14px;color:var(--mute);margin:2px 0 18px}
.lead{color:#cfc3af;margin:0 0 22px;max-width:44ch}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 18px}
.opt{border:1px solid var(--line);padding:12px 8px;text-align:left;background:var(--panel);transition:border-color .25s,background .25s}
.opt b{display:block;font-weight:500;font-size:15px}.opt span{font-size:14px;color:var(--mute)}
.opt[aria-pressed=true]{border-color:var(--gold);background:#241c13}
.micro{font-size:14px;color:var(--mute);margin:12px 0 24px}
.ticks{list-style:none;padding:0;margin:0 0 22px}.ticks li{padding:9px 0;border-top:1px solid var(--line);color:#cfc3af;font-size:15px}
details{border-top:1px solid var(--line);padding:16px 0}details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:500;list-style:none;display:flex;justify-content:space-between}summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--gold);font-size:20px;line-height:1}details[open] summary::after{content:"–"}
details p,details ul{margin:12px 0 0;color:#b9ad99}details ul{padding-left:20px}
.flip{animation:flip .5s cubic-bezier(.2,.7,.1,1)}
/* marquee */
.mq{overflow:hidden;white-space:nowrap;padding:28px 0;border-block:1px solid var(--line)}
.mq div{display:inline-block;animation:mq 45s linear infinite;font:400 clamp(40px,6vw,76px) var(--fh)}
.mq span{margin:0 28px;color:#e9dcc6}.mq span.o{color:transparent;-webkit-text-stroke:1px var(--gold)}.mq b{color:var(--gold);font-weight:400}
/* reveal frame */
.reveal{padding:12vh 0}
.rframe{position:relative;height:86svh;min-height:480px;overflow:hidden;clip-path:inset(var(--cv,8vh) var(--ch,10vw) round var(--cr,28px))}
.rimg{position:absolute;inset:-6%;background-size:130% auto;background-position:48% 63%;background-repeat:no-repeat;transform:scale(var(--cs,1.15));will-change:transform}
.rcard{position:absolute;left:5vw;bottom:8vh;max-width:400px;background:rgba(16,13,10,.62);backdrop-filter:blur(16px);border:1px solid rgba(201,162,77,.3);padding:30px;opacity:var(--co,0);transform:translateY(calc((1 - var(--co,0))*24px))}
.rcard h2{font-size:42px;line-height:1.05;margin:0 0 10px}.rcard p{margin:0 0 20px;color:#cfc3af}
.lcd{display:inline-flex;align-items:baseline;gap:8px;background:#B7C1A9;color:#25301F;border:6px solid var(--gold);border-radius:14px;padding:8px 20px;font:500 46px/1.1 ui-monospace,"SF Mono",Menlo,monospace}.lcd small{font-size:20px}
/* steps + cards */
.how3{max-width:var(--w);margin:0 auto;padding:6vh 5vw 4vh}
.how3>h2,.cta2 h2{font-size:clamp(44px,5.6vw,84px);line-height:1;margin:0 0 36px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.steps li{border-top:1px solid var(--line);padding-top:18px}
.steps span{font:400 84px/1 var(--fh);color:transparent;-webkit-text-stroke:1px var(--gold)}
.steps h3{font-size:30px;margin:8px 0 6px}.steps p{margin:0;color:var(--mute)}
.feats{max-width:var(--w);margin:0 auto;padding:8vh 5vw;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.fc{background:var(--panel);border:1px solid var(--line);transition:transform .25s ease-out,border-color .3s;will-change:transform}
.fc:hover{border-color:rgba(201,162,77,.5)}
.fimg{position:relative;aspect-ratio:4/5;overflow:hidden}
.fph{position:absolute;inset:0;background-size:var(--sz,cover);background-position:var(--bp,center);background-repeat:no-repeat;transition:transform 1.4s cubic-bezier(.2,.7,.1,1)}
.fc:hover .fph{transform:scale(1.08)}
.fc .t{padding:20px 22px 24px}.fc h3{font-size:30px;line-height:1.1;margin:0 0 6px}.fc p{margin:0;color:var(--mute)}
.cta2{position:relative;text-align:center;padding:14vh 5vw 16vh;background:radial-gradient(ellipse 60% 70% at 50% 100%,rgba(201,162,77,.2),transparent 70%)}
.cta2 .btn{padding:19px 44px}
.sbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 5vw calc(12px + env(safe-area-inset-bottom,0px));background:rgba(16,13,10,.85);backdrop-filter:blur(16px);border-top:1px solid rgba(201,162,77,.3);transform:translateY(110%);transition:transform .6s cubic-bezier(.2,.7,.1,1)}
.sbar.on{transform:none}.sbar b{display:block;font-weight:500;line-height:1.2}.sbar span{font-size:14px;color:var(--gold)}.sbar .btn{padding:13px 28px}
.foot{border-top:1px solid var(--line);padding:30px 5vw 100px;font-size:14px;color:var(--mute);display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}
.foot nav{display:flex;flex-direction:column;gap:6px}.foot a{text-decoration:none}.foot a:hover{color:var(--gold)}
.toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,40px);background:var(--gold);color:#17110A;padding:12px 22px;opacity:0;transition:.35s;z-index:80;font-size:15px;font-weight:500}.toast.on{opacity:1;transform:translate(-50%,0)}
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s,transform 1.1s cubic-bezier(.2,.7,.1,1)}.js .rv.in{opacity:1;transform:none}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
@keyframes bob{50%{transform:translateY(-8px)}}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes flip{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:820px){.prod,.feats,.steps{grid-template-columns:1fr}.prod{padding-top:8vh}.chips{display:none}.hc{padding-bottom:9vh}.th{width:60px;height:60px}.rframe{height:70svh}.rcard{left:5vw;right:5vw;max-width:none;bottom:5vh}.rimg{background-size:auto 120%;background-position:67% 98%}}
@media(prefers-reduced-motion:reduce){*,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.mask>span{transform:none!important}.rframe{clip-path:none}.rcard{opacity:1;transform:none}}

.feats{grid-template-columns:1fr}
.fc{display:grid;grid-template-columns:1.1fr 1fr;align-items:center}
.fimg{aspect-ratio:4/3}
.fc .t{padding:40px 5vw 40px 40px}.fc h3{font-size:clamp(34px,3.6vw,52px)}.fc p{font-size:17px;max-width:36ch}
@media(max-width:820px){.fc{grid-template-columns:1fr}.fc .t{padding:22px}}

.revs{max-width:var(--w);margin:0 auto;padding:10vh 5vw}
.revs h2{font-size:clamp(40px,5vw,72px);line-height:1;margin:0 0 10px}
.revs .sum{color:var(--mute);margin:0 0 32px}.revs .sum b{color:var(--gold);font-weight:500;font-size:20px}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rev{background:var(--panel);border:1px solid var(--line);padding:24px}
.stars{letter-spacing:2px;color:var(--line);font-size:18px}.stars .on{color:var(--gold)}
.rev p{margin:12px 0 16px;color:#d6cab6}
.rev .by{font-size:14px;color:var(--mute);display:flex;gap:6px 12px;flex-wrap:wrap;align-items:center}.rev .by b{color:var(--ink);font-weight:500}.rev .vf{color:var(--gold)}
@media(max-width:820px){.rgrid{grid-template-columns:1fr}}

.apps{max-width:var(--w);margin:0 auto;padding:4vh 5vw}
.pform{margin:0}

.wrap{max-width:var(--w);margin:0 auto;padding:0 5vw}
.t-center{text-align:center}.t-center .btn{margin-inline:auto}
.eyebrow{font-size:14px;color:var(--gold);margin:0 0 12px;letter-spacing:.04em}
.blk h2,.pgwrap h1,.pad h1{font-size:clamp(40px,5vw,72px);line-height:1;margin:0 0 18px}
.rte{color:var(--mute)}.rte p{margin:0 0 12px}.rte a{color:var(--gold)}.rte img{max-width:100%;height:auto}
.itx{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center}.itx.rev .itx-img{order:2}
.itx-img{aspect-ratio:4/3;overflow:hidden;background:var(--panel)}.itx-img img{width:100%;height:100%;object-fit:cover;display:block}
.banner{position:relative;display:flex;align-items:flex-end;background:var(--panel) center/cover no-repeat;overflow:hidden}
.banner.h-s{min-height:40svh}.banner.h-m{min-height:62svh}.banner.h-l{min-height:86svh}
.bov{position:absolute;inset:0;background:#100D0A}
.bin{position:relative;z-index:1;width:100%;padding-top:8vh;padding-bottom:8vh}
.mcols{display:grid;gap:24px}.mcols.c2{grid-template-columns:repeat(2,1fr)}.mcols.c3{grid-template-columns:repeat(3,1fr)}.mcols.c4{grid-template-columns:repeat(4,1fr)}
.mcol img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;margin-bottom:14px}
.mcol h3,.pc h3{font-size:26px;line-height:1.1;margin:0 0 6px}.mcol p{margin:0 0 8px;color:var(--mute)}.mcol a{color:var(--gold)}
.pgrid{display:grid;gap:28px 20px}.pgrid.c2{grid-template-columns:repeat(2,1fr)}.pgrid.c3{grid-template-columns:repeat(3,1fr)}.pgrid.c4{grid-template-columns:repeat(4,1fr)}
.pc{display:block;text-decoration:none}.pimg{position:relative;aspect-ratio:1;overflow:hidden;background:var(--panel);margin-bottom:12px}
.pimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.1,1)}.pc:hover .pimg img{transform:scale(1.06)}
.pc p{margin:0;color:var(--gold)}.pc s{color:var(--mute);margin-right:6px}.sold{position:absolute;left:10px;top:10px;background:var(--bg);color:var(--ink);padding:3px 10px;font-size:13px}
.vid{position:relative;aspect-ratio:16/9;background:var(--panel)}.vid iframe,.vid video{position:absolute;inset:0;width:100%;height:100%;border:0}
.nl{display:flex;gap:10px;flex-wrap:wrap;max-width:520px}.t-center .nl{margin:0 auto;justify-content:center}
.nl input{flex:1;min-width:200px;padding:14px;background:var(--panel);border:1px solid var(--line);color:var(--ink);font:inherit}
.pgwrap{max-width:var(--w);margin:0 auto;padding:8vh 5vw}
.pgn{margin-top:32px}.pgn a,.pgn span{display:inline-block;padding:6px 12px;margin:0 2px;border:1px solid var(--line);text-decoration:none}.pgn .current{border-color:var(--gold);color:var(--gold)}
.sortf{margin:0 0 24px}.sortf select{background:var(--panel);color:var(--ink);border:1px solid var(--line);padding:10px;font:inherit}
.cline{display:grid;grid-template-columns:80px 1fr auto auto;gap:16px;align-items:center}.cline img{width:80px;height:80px;object-fit:cover;display:block}.rm{font-size:13px;color:var(--mute)}
.art img{width:100%;height:auto;margin:0 0 24px}
footer.foot{display:block;padding:40px 5vw 100px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;max-width:var(--w);margin:0 auto;padding-bottom:28px}.foot h4{font:500 15px var(--fb);margin:0 0 10px;color:var(--ink)}
.fbot{max-width:var(--w);margin:0 auto;border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.soc{display:flex;gap:16px}
.top .dd{position:relative}.top .dd ul{display:none;position:absolute;left:0;top:100%;list-style:none;margin:0;padding:10px 0;min-width:180px;background:var(--panel);border:1px solid var(--line);z-index:5}
.top .dd:hover ul,.top .dd:focus-within ul{display:block}.top .dd li a{display:block;padding:6px 16px;white-space:nowrap}
.no-motion *,.no-motion *::after{animation:none!important;transition:none!important}.no-motion .rv{opacity:1;transform:none}.no-motion .mask>span{transform:none}.no-motion .clip{clip-path:none}
body.nograin::before{display:none}
.btn,.b{border-radius:var(--r,0px)}
@media(max-width:820px){.itx,.mcols.c2,.mcols.c3,.mcols.c4{grid-template-columns:1fr}.itx.rev .itx-img{order:0}.pgrid.c3,.pgrid.c4{grid-template-columns:repeat(2,1fr)}.cline{grid-template-columns:64px 1fr}.top .dd ul{position:static;display:block;border:0;padding:0 0 0 12px}}
