:root{--ink:#20143A;--mist:#EEEAF5;--paper:#FBFAFD;--gold:#E0A030;--coral:#FF5A5F;--mute:#645A7A;--r:18px}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:Figtree,system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;font-size:17px}
h1,h2,h3,.logo{font-family:'Bricolage Grotesque',sans-serif;line-height:1.05;letter-spacing:-.02em}
h1{font-size:clamp(2.6rem,7vw,5.2rem);font-weight:800}
h2{font-size:clamp(1.9rem,4vw,3rem);font-weight:800;margin-bottom:.5rem}
h3{font-size:1.3rem;font-weight:800}
a{color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:5rem 1.25rem 2rem}
.sub{color:var(--mute);margin-bottom:1.5rem;max-width:60ch}
.small{font-size:.9rem;color:var(--mute)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1.5rem;padding:.8rem 1.25rem;background:rgba(251,250,253,.9);backdrop-filter:blur(10px);border-bottom:1px solid #e3dcef}
.logo{font-weight:800;font-size:1.25rem;text-decoration:none}
.logo span{font-weight:500;color:var(--gold);margin-left:.3rem}
.nav nav{margin-left:auto;display:flex;gap:1.3rem}
.nav nav a{text-decoration:none;font-weight:500;font-size:.95rem}
.nav nav a:hover{color:var(--coral)}

.btn{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-weight:700;padding:.9rem 1.6rem;border-radius:999px;border:2px solid var(--ink);cursor:pointer;font:inherit;font-weight:700;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-2px);background:#3a2568}
.btn-sm{padding:.5rem 1.1rem;font-size:.9rem}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--mist)}
.btn-block{display:block;text-align:center;width:100%}

.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center;max-width:1160px;margin:0 auto;padding:4rem 1.25rem 3rem}
.chip{display:inline-block;background:var(--mist);padding:.35rem .9rem;border-radius:999px;font-weight:700;font-size:.85rem;margin-bottom:1.2rem}
.lead{font-size:1.15rem;max-width:52ch;margin:1.3rem 0 1.8rem;color:#3d3358}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem}
.proof{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;margin-top:2rem;color:var(--mute);font-size:.95rem}
.proof b{color:var(--ink);font-size:1.15rem;margin-right:.2rem}

/* botol decant */
.vial{--c1:#888;--c2:#333;display:flex;flex-direction:column;align-items:center}
.vial .cap{width:26px;height:34px;background:#111;border-radius:5px 5px 2px 2px;display:block}
.vial .body{position:relative;width:52px;height:170px;border:3px solid rgba(32,20,58,.75);border-radius:6px 6px 14px 14px;overflow:hidden;background:rgba(255,255,255,.6);display:block}
.vial .liq{position:absolute;inset:auto 0 0 0;height:72%;background:linear-gradient(180deg,var(--c1),var(--c2))}
.vial em{font-style:normal;font-weight:700;margin-top:.6rem;font-size:.95rem}
.vial.sm .cap{width:16px;height:22px}.vial.sm .body{width:34px;height:104px}
.hero-vials{display:flex;justify-content:center;align-items:flex-end;gap:.4rem;min-height:340px;background:radial-gradient(circle at 50% 70%,var(--mist),transparent 70%)}
.hv{display:flex;flex-direction:column;align-items:center;transform-origin:bottom center;flex:1 1 0;min-width:0}
.hv img{width:100%;height:auto;display:block;border-radius:14px;mix-blend-mode:multiply;box-shadow:0 10px 24px rgba(32,20,58,.14)}
.hv em{font-style:normal;font-weight:700;margin-top:.6rem;font-size:.95rem}
.hero-vials .v0{transform:rotate(-6deg)}.hero-vials .v1{transform:scale(1.2);z-index:2;margin:0 .6rem}.hero-vials .v2{transform:rotate(6deg)}
@keyframes fill{from{height:0}}

.strip{background:var(--ink);color:#fff;text-align:center;padding:1.6rem 1.25rem}
.strip p{max-width:60ch;margin:auto;font-size:1.1rem}
.strip em{color:var(--gold);font-style:normal;font-weight:700}

.filters{display:flex;gap:.5rem;margin-bottom:1.5rem}
.filters button{font:inherit;font-weight:500;padding:.5rem 1.1rem;border-radius:999px;border:2px solid var(--ink);background:none;cursor:pointer}
.filters button.on{background:var(--ink);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.4rem}
.card{background:#fff;border:2px solid var(--ink);border-radius:var(--r);padding:1.2rem;display:flex;flex-direction:column;gap:.7rem;transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:8px 8px 0 var(--c1);transform:translate(-3px,-3px)}
.card[hidden]{display:none}
.card-top{position:relative;display:flex;justify-content:center;align-items:flex-end;height:210px;padding:.6rem 1rem 0;border-radius:12px;overflow:hidden;background:#fff;border:1px solid #e3dcef}
.card-top img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.brand{position:absolute;top:.6rem;left:.6rem;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.15);font-size:.85rem;background:#fff;padding:.2rem .7rem;border-radius:999px;align-self:flex-start}
.teaser{color:var(--mute);font-size:.97rem;min-height:3.2em}
.sizes{display:flex;gap:.4rem;flex-wrap:wrap}
.sizes input,.vip input{accent-color:var(--ink)}
.sizes input{position:absolute;opacity:0}
.sizes span{display:inline-block;padding:.35rem .9rem;border:2px solid var(--ink);border-radius:999px;font-weight:700;font-size:.9rem;cursor:pointer}
.sizes input:checked+span{background:var(--ink);color:#fff}
.sizes input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}
.vip{font-size:.85rem;color:var(--mute);display:flex;gap:.5rem;align-items:flex-start}
.vip.off{opacity:.4}
.price-row{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.price{font-family:'Bricolage Grotesque';font-weight:800;font-size:1.9rem}
.bonus{color:var(--coral);font-weight:700}
.ask{text-align:center;font-size:.9rem;color:var(--mute)}

.mystery{background:linear-gradient(135deg,#2A1650,#5B2A86);color:#fff;margin-top:4rem}
.mystery-in{display:grid;grid-template-columns:1.3fr .7fr;gap:2rem;align-items:center;padding-bottom:5rem}
.mystery p{margin-top:1rem;max-width:56ch}
.mystery b{color:var(--gold)}
.mystery .small{color:#cdbfe8}
.gift{font:inherit;color:#fff;background:rgba(255,255,255,.08);border:2px dashed var(--gold);border-radius:var(--r);padding:2rem 1rem;cursor:pointer;display:grid;gap:.6rem;justify-items:center;text-align:center}
.gift .q{font-family:'Bricolage Grotesque';font-weight:800;font-size:5rem;line-height:1;color:var(--gold)}
.gift.shake .q{animation:shake .5s}
@keyframes shake{25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}

.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;margin-top:1.5rem}
.why-grid p{color:var(--mute);margin-top:.4rem}

.quiz{max-width:820px}
.q-block{margin:1.4rem 0}
.q-block h3{margin-bottom:.7rem}
.q-block button{font:inherit;font-weight:700;margin:0 .5rem .5rem 0;padding:.7rem 1.3rem;border:2px solid var(--ink);border-radius:999px;background:#fff;cursor:pointer}
.q-block button.on{background:var(--ink);color:#fff}
#result{margin:1.5rem 0;padding:1.5rem;border-radius:var(--r);color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2))}
#result h3{font-size:2rem}#result p{margin:.5rem 0 1rem}
#result .btn{background:#fff;color:var(--ink);border-color:#fff}

.faq{max-width:820px}
details{border-bottom:1px solid #d9d0ea;padding:1rem 0}
summary{font-weight:700;cursor:pointer}
details p{color:var(--mute);margin-top:.5rem}

.contact{background:var(--mist);margin-top:3rem}
.contact-in{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;padding-bottom:4rem}
.contact p{margin:.8rem 0 1.4rem}
.info{list-style:none;padding:0;display:grid;gap:1rem}
.info b{display:block;font-size:.85rem;color:var(--mute)}
footer{text-align:center;padding:1.5rem;font-size:.85rem;color:var(--mute)}
.float-wa{position:fixed;right:1rem;bottom:1rem;z-index:30;background:#1FAF5A;color:#fff;font-weight:700;text-decoration:none;padding:.8rem 1.2rem;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.25)}

@media(max-width:820px){
  .nav nav{display:none}.nav .btn{margin-left:auto}
  .hero,.mystery-in,.contact-in{grid-template-columns:1fr}
  .hero-vials{min-height:260px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}