/* ============================================================
   Zen Drink — Landing Page (Linktree)
   Font  : Asul (Google Fonts) — dibundel lokal agar tidak bergantung CDN
   Warna : Ivory #ECE3C5, Ancient Wood #594A42 (brand guideline Zen Zone)
   ============================================================ */

@font-face{
  font-family:'Asul'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/asul-400.woff2') format('woff2');
}
@font-face{
  font-family:'Asul'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/asul-700.woff2') format('woff2');
}
:root{
  --ivory:#ECE3C5; --ivory-lt:#F4EEDB; --ivory-xl:#FAF6EA;
  --wood:#594A42; --wood-2:#7A6A5F; --wood-3:#9C8D80;
  --line:#D6C9A6; --terra:#B4573C;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{background:#E4DABA;}
body{font-family:'Asul',serif; background:var(--ivory); color:var(--wood);
     max-width:430px; margin:0 auto; overflow-x:hidden; min-height:100vh;
     box-shadow:0 0 60px rgba(89,74,66,.14);}
.page{position:relative; padding:0 0 34px;}
.dots{position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle at 12px 12px, rgba(89,74,66,.08) 1.2px, transparent 1.3px);
  background-size:26px 26px;}

/* ---------- hero ---------- */
.hero{position:relative; padding:26px 52px 0; text-align:center;}
.hero .logo{height:86px; width:auto; display:block; margin:0 auto 16px;}
.arch{position:relative; height:290px; border-radius:140px 140px 24px 24px; overflow:hidden;
   box-shadow:0 26px 44px -26px rgba(89,74,66,.6);}
.arch img{width:100%; height:100%; object-fit:cover; object-position:50% 60%; display:block;}
.arch .veil{position:absolute; inset:0;
   background:linear-gradient(200deg, rgba(236,227,197,.14) 0%, rgba(236,227,197,0) 36%, rgba(89,74,66,.16) 100%);}
.badge{position:absolute; left:50%; bottom:-19px; transform:translateX(-50%);
   background:var(--wood); color:var(--ivory); font-size:13px; letter-spacing:.02em;
   padding:11px 20px; border-radius:999px; white-space:nowrap;
   box-shadow:0 12px 24px -12px rgba(89,74,66,.8);}

/* ---------- about ---------- */
.about{position:relative; padding:42px 22px 0; text-align:center;}
.kicker{font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--wood-3);}
h1{font-size:50px; font-weight:700; line-height:1.05; letter-spacing:-.015em;}
h1 em{font-style:normal; color:var(--terra);}
.about p{font-size:15.5px; line-height:1.62; color:var(--wood-2); margin-top:13px;}
.benwrap{position:relative; padding:32px 0 0;}
.bcard{flex:0 0 230px; background:var(--ivory-xl); border:1px solid var(--line);
   border-radius:22px; padding:20px 19px 22px; scroll-snap-align:center;}
.bcard .bi{width:38px; height:38px; border-radius:13px; background:var(--ivory);
   border:1px solid var(--line); color:var(--terra);
   display:flex; align-items:center; justify-content:center;}
.bcard .bi svg{width:20px; height:20px;}
.bcard h3{font-size:17px; font-weight:700; line-height:1.28; margin:13px 0 8px;}
.bcard p{font-size:13.5px; line-height:1.6; color:var(--wood-2);}

/* ---------- cta ---------- */
.cta{position:relative; padding:34px 24px 0;}
.cta .lead{text-align:center; font-size:22px; font-weight:700; line-height:1.3; margin-bottom:18px;}
.shop{display:flex; align-items:center; gap:14px; text-decoration:none;
   background:var(--ivory-xl); border:1px solid var(--line); border-radius:20px;
   padding:15px 17px; margin-bottom:12px; color:var(--wood);
   box-shadow:0 10px 22px -18px rgba(89,74,66,.7);}
.shop .ic{width:46px; height:46px; border-radius:14px; background:#fff;
   border:1px solid var(--line); color:var(--terra); overflow:hidden;
   display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.shop .ic svg{width:23px; height:23px;}
.shop .ic img{width:100%; height:100%; object-fit:contain; padding:7px;}
.shop .txt{display:flex; flex-direction:column; flex:1; line-height:1.25;}
.shop .txt b{font-size:16.5px; font-weight:700;}
.shop .txt i{font-style:normal; font-size:12.5px; color:var(--wood-3); margin-top:3px;}
.shop .go{width:26px; height:26px; color:var(--wood-3); flex-shrink:0;}
.shop .go svg{width:100%; height:100%;}

/* ---------- faq slider ---------- */
.faqwrap{position:relative; padding:40px 0 0;}
.faqhead{display:flex; align-items:flex-end; justify-content:space-between; padding:0 24px 14px;}
.faqhead h2{font-size:25px; font-weight:700;}
.slider-controls{display:flex; gap:8px;}
.slider-controls button{width:40px; height:40px; border:1px solid var(--line); border-radius:50%; background:var(--ivory-xl); color:var(--wood); font:20px 'Asul',serif; cursor:pointer;}
.slider-controls button:disabled{opacity:.35; cursor:default;}
.rail{cursor:grab;}
.rail.dragging{cursor:grabbing; user-select:none; scroll-snap-type:none;}
.rail{display:flex; gap:13px; padding:4px 24px 6px; overflow-x:auto;
   scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.rail::-webkit-scrollbar{display:none;}
.faq{scroll-snap-align:center;}
.faq{flex:0 0 252px; background:var(--ivory-xl); border:1px solid var(--line);
   border-radius:22px; padding:22px 20px 24px; position:relative;}
.faq .n{font-size:12px; letter-spacing:.14em; color:var(--terra);}
.faq h3{font-size:18px; font-weight:700; line-height:1.3; margin:9px 0 9px;}
.faq p{font-size:14px; line-height:1.6; color:var(--wood-2);}
.dotsnav{display:flex; justify-content:center; margin-top:8px;}
.dotsnav button{width:32px; height:40px; display:grid; place-items:center; border:0; background:transparent; cursor:pointer;}
.dotsnav button::before{content:""; width:6px; height:6px; border-radius:999px; background:var(--line); transition:width .18s, background .18s;}
.dotsnav button.on::before{width:20px; background:var(--wood);}

/* ---------- footer ---------- */
.foot{position:relative; margin:44px 18px 0; background:var(--wood); color:var(--ivory);
   border-radius:30px; padding:36px 26px 30px; text-align:center; overflow:hidden;}
.foot img{height:74px; width:auto; margin-bottom:14px;}
.foot .tag{font-size:33px; font-weight:700; letter-spacing:-.01em; color:#F0D6B4; line-height:1.1;}
.foot .sub{font-size:14px; color:rgba(236,227,197,.76); margin-top:10px;}
.socials{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:20px;}
.socials a{display:flex; align-items:center; gap:8px; text-decoration:none;
   background:rgba(236,227,197,.13); border:1px solid rgba(236,227,197,.24);
   border-radius:999px; padding:9px 16px; color:var(--ivory); font-size:13px;}
.socials svg{width:15px; height:15px;}
.legal{text-align:center; font-size:11.5px; color:var(--wood-3); margin-top:20px; line-height:1.6;}

/* ---------- state ---------- */
.shop:focus-visible,.socials a:focus-visible,.dotsnav button:focus-visible,.slider-controls button:focus-visible,.rail:focus-visible{
  outline:2px solid var(--terra); outline-offset:3px;
}
@media (hover:hover){
  .shop{transition:transform .18s ease, box-shadow .18s ease;}
  .shop:hover{transform:translateY(-2px); box-shadow:0 14px 26px -16px rgba(89,74,66,.8);}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important; transition:none !important;}
}