:root{
  --paper:#F8F7F2;
  --white:#fff;
  --mint:#EAF0E2;
  --mint-light:#F1F5EC;
  --green:#2F6338;
  --green-soft:#69A65B;
  --ink:#1F241F;
  --muted:#728071;
  --line:#E2E8DD;
  --serif:"Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC",serif;
  --sans:"Avenir Next","Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif
}


*{
  box-sizing:border-box
}

html{
  scroll-behavior:smooth
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased
}

button,a{
  font:inherit
}

button{
  cursor:pointer
}

a{
  color:inherit;
  text-decoration:none
}

img{
  max-width:100%
}

em{
  font-style:normal;
  color:var(--green)
}

::selection{
  background:#BEE1AB;
  color:var(--ink)
}

:focus-visible{
  outline:3px solid #83BA71;
  outline-offset:4px
}

.shell{
  width:min(1280px,calc(100% - 72px));
  margin-inline:auto
}

.skip-link{
  position:absolute;
  z-index:100;
  top:-80px;
  left:12px;
  padding:12px 20px;
  background:#fff;
  border-radius:10px
}

.skip-link:focus{
  top:12px
}

.section-space{
  padding:120px 0
}

.reveal{
  opacity:1;
  transform:none
}

.js-motion .reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .75s ease,transform .75s cubic-bezier(.2,.75,.25,1)
}

.js-motion .reveal.is-visible{
  opacity:1;
  transform:none
}



.site-header{
  position:relative;
  z-index:20;
  border-bottom:1px solid rgba(70,94,70,.09);
  background:rgba(248,247,242,.88);
  backdrop-filter:blur(18px)
}

.header-inner{
  display:flex;
  align-items:center;
  gap:44px;
  height:82px
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  white-space:nowrap
}

.brand-logo{
  display:block;
  width:44px;
  height:44px;
  flex:none;
  border:1px solid #E4EADF;
  border-radius:10px;
  background:#fff;
  object-fit:cover
}

.brand-cn{
  font-family:var(--serif);
  font-size:22px;
  font-weight:700;
  letter-spacing:.1em
}

.brand-en{
  font-size:17px;
  font-weight:760;
  letter-spacing:-.05em
}

.header-nav{
  display:flex;
  align-items:center;
  gap:30px;
  margin-left:auto;
  font-size:13px;
  color:#687567
}

.header-nav a{
  transition:color .2s
}

.header-nav a:hover{
  color:var(--green)
}

.header-cta{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:0 18px;
  border-radius:999px;
  background:var(--green);
  color:#fff;
  font-size:13px;
  font-weight:650;
  transition:background .2s,transform .2s,box-shadow .2s
}

.header-cta:hover{
  background:#224F2C;
  transform:translateY(-2px);
  box-shadow:0 12px 25px rgba(47,99,56,.18)
}

.header-cta-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#B8E596;
  box-shadow:0 0 0 4px rgba(184,229,150,.18)
}



.hero{
  position:relative;
  min-height:700px;
  overflow:hidden;
  background:linear-gradient(112deg,#FAFAF6 0%,#F2F6ED 67%,#E7F0E0 100%)
}

.hero:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(#668864 1px,transparent 1px);
  background-size:34px 34px;
  opacity:.065;
  mask-image:linear-gradient(90deg,transparent 45%,#000 100%);
  pointer-events:none
}

.hero-glow{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(12px)
}

.glow-one{
  width:560px;
  height:560px;
  right:9%;
  top:-220px;
  background:radial-gradient(circle,rgba(219,237,204,.85),transparent 68%)
}

.glow-two{
  width:410px;
  height:410px;
  left:-150px;
  bottom:-190px;
  background:radial-gradient(circle,rgba(232,243,224,.7),transparent 70%)
}

.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.22fr) minmax(0,.94fr) 236px;
  align-items:center;
  gap:15px;
  min-height:640px
}

.hero-content{
  position:relative;
  z-index:3;
  padding:50px 0 40px
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:13px;
  color:var(--green);
  font-size:12px;
  font-weight:700;
  letter-spacing:.13em
}

.eyebrow-line{
  width:29px;
  height:1px;
  background:var(--green-soft)
}

h1,h2,h3,p{
  margin-top:0
}

.hero h1{
  margin:25px 0 25px;
  font-family:var(--serif);
  font-size:clamp(60px,6.3vw,97px);
  font-weight:700;
  letter-spacing:-.055em;
  line-height:1.25
}

.hero h1 em{
  display:inline-block
}

.hero-intro{
  max-width:435px;
  color:#657264;
  font-size:16px;
  line-height:1.9
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:37px
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:34px;
  min-height:54px;
  font-size:14px;
  font-weight:700;
  transition:background .25s,transform .25s,box-shadow .25s,color .25s
}

.button-primary{
  padding:0 21px 0 26px;
  background:var(--green);
  border-radius:12px;
  color:#fff;
  box-shadow:0 10px 22px rgba(47,99,56,.18)
}

.button-primary:hover{
  background:#24522D;
  transform:translateY(-3px);
  box-shadow:0 15px 27px rgba(47,99,56,.23)
}

.button-primary span,.button-text span{
  font-size:18px;
  font-weight:400
}

.button-text{
  gap:8px;
  color:var(--green)
}

.button-text:hover{
  transform:translateY(-2px)
}

.hero-notes{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:51px;
  color:#778373;
  font-size:11px
}

.hero-notes span{
  display:inline-flex;
  align-items:center;
  gap:7px
}

.hero-notes i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#82B374
}

.hero-art{
  position:relative;
  align-self:stretch;
  min-height:580px
}

.hero-art-ring{
  position:absolute;
  width:395px;
  height:395px;
  top:51%;
  left:47%;
  border:1px solid rgba(89,139,89,.18);
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 52px rgba(235,243,226,.35),0 0 0 104px rgba(237,244,231,.2)
}

.hero-art-orbit{
  position:absolute;
  z-index:2;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#6EA96A
}

.orbit-a{
  top:22%;
  left:12%
}

.orbit-b{
  right:6%;
  bottom:21%;
  width:6px;
  height:6px;
  background:#B6D49A
}

.hero-drink{
  position:absolute;
  z-index:2;
  width:min(110%,515px);
  max-width:none;
  top:47%;
  left:47%;
  transform:translate(-50%,-50%) rotate(-4deg);
  filter:drop-shadow(0 24px 30px rgba(56,100,60,.12));
  animation:float 6s ease-in-out infinite
}

.hero-art-label{
  position:absolute;
  z-index:4;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:11px 15px;
  border:1px solid rgba(224,235,217,.75);
  border-radius:10px;
  background:rgba(255,255,255,.83);
  box-shadow:0 15px 35px rgba(61,92,56,.08);
  color:#50674E;
  font-size:11px;
  font-weight:650;
  white-space:nowrap
}

.hero-art-label span{
  color:#81AC72
}

.label-a{
  top:20%;
  left:-9%;
  transform:rotate(-7deg)
}

.label-b{
  right:-9%;
  bottom:29%;
  transform:rotate(6deg)
}

.hero-art-caption{
  position:absolute;
  z-index:2;
  left:2%;
  bottom:12%;
  color:#729C70;
  font-size:9px;
  font-weight:800;
  line-height:1.45;
  letter-spacing:.35em
}

.scan-card{
  position:relative;
  z-index:5;
  justify-self:end;
  width:100%;
  padding:19px 19px 18px;
  border:1px solid rgba(255,255,255,.95);
  border-radius:22px;
  background:rgba(255,255,255,.78);
  box-shadow:0 24px 64px rgba(42,79,45,.1);
  backdrop-filter:blur(20px);
  transform:rotate(2deg);
  transition:transform .35s,box-shadow .35s
}

.scan-card:hover{
  transform:rotate(0) translateY(-5px);
  box-shadow:0 29px 75px rgba(42,79,45,.15)
}

.scan-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#79A36F
}

.scan-card-kicker{
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em
}

.scan-card-arrow{
  font-size:20px
}

.scan-card h2{
  margin:14px 0 13px;
  font-family:var(--serif);
  font-size:23px;
  line-height:1.4;
  letter-spacing:-.04em
}

.qr-frame{
  display:grid;
  place-items:center;
  aspect-ratio:1;
  width:100%;
  padding:12px;
  border:1px solid #DCE8D7;
  border-radius:15px;
  background:#fff
}

.qr-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:100%;
  height:100%;
  border:1px dashed #BAD0B2;
  border-radius:9px;
  background:linear-gradient(145deg,#F9FBF7,#EEF5EA);
  color:#567A50;
  text-align:center
}

.qr-placeholder-symbol{
  font-family:var(--serif);
  font-size:45px;
  line-height:1;
  opacity:.6
}

.qr-placeholder strong{
  font-size:12px
}

.qr-placeholder small{
  font-size:10px;
  color:#596C58
}

.qr-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain
}

.scan-card p{
  margin:12px 1px 0;
  color:#657264;
  font-size:11px;
  line-height:1.55
}

.hero-bottom{
  position:relative;
  z-index:4;
  display:flex;
  align-items:center;
  gap:20px;
  padding-bottom:30px;
  color:#82927F;
  font-size:10px;
  letter-spacing:.16em
}

.hero-bottom-line{
  width:70px;
  height:1px;
  background:#B3CBB0
}

.hero-bottom span:last-child{
  margin-left:auto;
  letter-spacing:.1em
}



.section-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:42px;
  margin-bottom:42px
}

.section-index{
  display:inline-block;
  margin-bottom:17px;
  color:#85A57C;
  font-size:11px;
  font-weight:750;
  letter-spacing:.19em
}

.section-heading h2,.closing h2{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(40px,4.6vw,64px);
  line-height:1.36;
  letter-spacing:-.055em
}

.section-heading p{
  max-width:390px;
  margin:0 0 6px;
  color:var(--muted);
  font-size:14px;
  line-height:1.9
}

.experience{
  background:#fff
}

.experience-board{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:570px;
  border:1px solid #E4ECE0;
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 26px 80px rgba(67,94,61,.07)
}

.demo-controls{
  padding:52px min(5vw,70px);
  background:#FBFCF8
}

.demo-step span{
  color:#79AA6D;
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em
}

.demo-step h3{
  margin:10px 0 5px;
  font-family:var(--serif);
  font-size:27px;
  letter-spacing:-.04em
}

.demo-step p{
  margin:0;
  color:#91A08B;
  font-size:12px
}

.option-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:23px
}

.demo-option{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  min-height:74px;
  padding:11px;
  border:1px solid #E6EDE2;
  border-radius:13px;
  background:#fff;
  text-align:left;
  color:#354335;
  transition:transform .2s,border-color .2s,background .2s,box-shadow .2s
}

.demo-option:hover{
  transform:translateY(-3px);
  border-color:#BAD6B2;
  box-shadow:0 10px 24px rgba(68,101,62,.08)
}

.demo-option.is-active{
  border-color:#87B97B;
  background:#F1F8ED;
  box-shadow:inset 0 0 0 1px rgba(134,185,123,.22)
}

.option-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex:none;
  overflow:hidden;
  border-radius:10px;
  background:#E5EFE0
}

.option-icon img{
  display:block;
  width:38px;
  height:38px;
  object-fit:contain
}

.icon-vodka{
  background:#E9F1EF
}

.icon-rum{
  background:#F5EEE0
}

.icon-orange{
  background:#F8EDDE
}

.icon-cola{
  background:#EEE7DF
}

.demo-option>span:nth-child(2){
  display:block;
  min-width:0;
  font-size:13px;
  font-weight:700;
  white-space:nowrap
}

.demo-option small{
  display:block;
  margin-top:4px;
  color:#A1AE9D;
  font-size:8px;
  font-weight:700;
  letter-spacing:.08em
}

.option-check{
  position:absolute;
  right:6px;
  top:5px;
  display:none;
  color:#63A35B;
  font-size:10px
}

.demo-option.is-active .option-check{
  display:block
}

.demo-divider{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:25px 0
}

.demo-divider:before,.demo-divider:after{
  content:"";
  flex:1;
  height:1px;
  background:#DCE8D7
}

.demo-divider span{
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  margin:0 10px;
  border-radius:50%;
  background:#E8F4E1;
  color:#6EA565;
  font-size:20px
}

.demo-preview{
  --liquid-1:#DCEBA2;
  --liquid-2:#8EBD70;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:570px;
  padding:30px 38px 25px;
  overflow:hidden;
  background:radial-gradient(circle at 50% 38%,#F2F7E8 0,#E5F0DF 42%,#D9E9D5 100%);
  transition:background .45s
}

.demo-preview[data-tone="citrus"]{
  --liquid-1:#F6DB8A;
  --liquid-2:#E9A657
}

.demo-preview[data-tone="gold"]{
  --liquid-1:#F2DDA0;
  --liquid-2:#C7A668
}

.demo-preview[data-tone="amber"]{
  --liquid-1:#D5B26C;
  --liquid-2:#8D6648
}

.demo-preview[data-tone="rose"]{
  --liquid-1:#F0CAA1;
  --liquid-2:#C98779
}

.demo-preview[data-tone="clear"]{
  --liquid-1:#E7EFE2;
  --liquid-2:#AECFBE
}

.preview-top,.preview-foot{
  position:relative;
  z-index:5;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#769970;
  font-size:10px;
  font-weight:800;
  letter-spacing:.2em
}

.preview-top span:last-child{
  font-size:22px;
  font-weight:400
}

.preview-visual{
  position:absolute;
  inset:0;
  pointer-events:none
}

.preview-halo{
  position:absolute;
  left:50%;
  top:37%;
  width:335px;
  height:335px;
  border:1px solid rgba(109,160,99,.24);
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 39px rgba(255,255,255,.12),0 0 0 78px rgba(255,255,255,.09)
}

.preview-glass{
  position:absolute;
  z-index:3;
  left:50%;
  top:42%;
  width:176px;
  height:255px;
  border:5px solid rgba(255,255,255,.8);
  border-top:9px solid rgba(255,255,255,.94);
  border-radius:10px 10px 34px 34px;
  background:linear-gradient(115deg,rgba(255,255,255,.65),rgba(255,255,255,.18));
  box-shadow:inset 6px 0 13px rgba(255,255,255,.4),12px 23px 27px rgba(58,111,69,.15);
  transform:translate(-50%,-50%) rotate(-5deg);
  overflow:hidden;
  transition:transform .45s
}

.demo-preview.is-changing .preview-glass{
  transform:translate(-50%,-50%) rotate(1deg) scale(.97)
}

.preview-liquid{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:67%;
  border-top:8px solid rgba(255,255,255,.3);
  background:linear-gradient(130deg,var(--liquid-1),var(--liquid-2));
  transition:background .5s
}

.preview-ice{
  position:absolute;
  z-index:4;
  width:58px;
  height:58px;
  border:2px solid rgba(255,255,255,.75);
  border-radius:11px;
  background:linear-gradient(120deg,rgba(255,255,255,.79),rgba(227,244,223,.36));
  box-shadow:inset 5px 5px 10px rgba(255,255,255,.5)
}

.ice-one{
  left:29px;
  top:65px;
  transform:rotate(-17deg)
}

.ice-two{
  right:21px;
  top:99px;
  transform:rotate(13deg)
}

.preview-shine{
  position:absolute;
  z-index:5;
  left:15px;
  top:22px;
  width:9px;
  height:188px;
  border-radius:99px;
  background:rgba(255,255,255,.53);
  transform:rotate(3deg)
}

.preview-lime{
  position:absolute;
  z-index:4;
  top:17%;
  left:58%;
  width:120px;
  height:120px;
  border:12px solid #7BA75F;
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg,#EAF6B9 0deg 41deg,#fff4d1 42deg 45deg);
  box-shadow:0 6px 13px rgba(75,115,70,.16);
  transform:rotate(20deg)
}

.preview-lime:after{
  content:"";
  position:absolute;
  inset:34%;
  border-radius:50%;
  background:#F5F8D9
}

.preview-straw{
  position:absolute;
  z-index:2;
  left:57%;
  top:7%;
  width:9px;
  height:195px;
  border-radius:99px;
  background:linear-gradient(90deg,#A3CE8A,#5B9E66);
  transform:rotate(17deg)
}

.preview-shadow{
  position:absolute;
  left:50%;
  top:65%;
  width:230px;
  height:34px;
  border-radius:50%;
  background:rgba(78,123,78,.16);
  filter:blur(13px);
  transform:translateX(-50%)
}

.preview-copy{
  position:relative;
  z-index:5;
  align-self:start;
  width:min(370px,100%);
  margin-top:auto;
  margin-bottom:24px;
  padding:20px 23px;
  border:1px solid rgba(255,255,255,.68);
  border-radius:16px;
  background:rgba(255,255,255,.88);
  box-shadow:0 15px 35px rgba(71,105,66,.11);
  backdrop-filter:blur(14px)
}

.preview-kicker{
  color:#7CA370;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em
}

.preview-copy h3{
  margin:7px 0 5px;
  font-family:var(--serif);
  font-size:27px
}

.preview-copy p{
  margin:0;
  color:#5B6E5B;
  font-size:12px;
  line-height:1.7
}

.preview-foot-stars{
  color:#80AC6D;
  font-size:15px;
  letter-spacing:.16em
}

.demo-disclaimer{
  margin:15px 4px 0;
  color:#596C58;
  font-size:12px;
  line-height:1.6
}



.features{
  background:var(--paper)
}

.feature-grid{
  display:grid;
  grid-template-columns:.9fr 1.3fr 1.3fr;
  gap:18px
}

.feature-card{
  display:flex;
  flex-direction:column;
  min-height:580px;
  min-width:0;
  padding:26px 27px;
  border:1px solid #E4EADF;
  border-radius:22px;
  background:#fff;
  box-shadow:0 13px 40px rgba(58,82,53,.035);
  transition:transform .3s,box-shadow .3s
}

.feature-card:hover{
  transform:translateY(-8px);
  box-shadow:0 26px 50px rgba(58,82,53,.1)
}

.feature-card-large{
  background:#E9F1E4
}

.feature-card-top{
  display:flex;
  justify-content:space-between;
  color:#7CA371;
  font-size:12px;
  font-weight:750
}

.feature-card-top span:last-child{
  font-size:21px;
  font-weight:400
}

.feature-graphic{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:190px;
  flex:1
}

.graphic-pill{
  display:grid;
  place-items:center;
  width:118px;
  height:75px;
  border:1px solid #CDE1C7;
  border-radius:19px;
  background:#fff;
  box-shadow:0 13px 28px rgba(67,113,67,.12);
  color:#568251;
  font-family:var(--serif);
  font-size:23px;
  font-weight:700
}

.pill-left{
  transform:rotate(-11deg)
}

.pill-right{
  transform:rotate(10deg)
}

.graphic-plus{
  display:grid;
  place-items:center;
  z-index:2;
  width:36px;
  height:36px;
  margin:0 -4px;
  border-radius:50%;
  background:#70A863;
  color:#fff;
  font-size:24px
}

.graphic-spark{
  position:absolute;
  color:#91BA86
}

.spark-one{
  top:25%;
  left:19%;
  font-size:24px
}

.spark-two{
  bottom:20%;
  right:14%;
  font-size:17px
}

.explore-preview{
  margin:25px -8px 24px;
  padding:17px 14px;
  border:1px solid #E5EDE2;
  border-radius:17px;
  background:#FCFDF9
}

.explore-preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:12px
}

.explore-preview-head strong,.explore-flavor-title{
  color:#273328;
  font-size:14px;
  font-weight:800
}

.explore-preview-head a{
  color:#52754F;
  font-size:10px;
  white-space:nowrap
}

.explore-preview-head a:hover{
  color:var(--green);
  text-decoration:underline
}

.scene-preview-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px
}

.scene-preview-card{
  min-width:0;
  overflow:hidden;
  border:1px solid #DFE7DC;
  border-radius:13px;
  background:#F2F8EF
}

.scene-preview-card>div{
  min-height:49px;
  padding:9px 8px 5px
}

.scene-preview-card strong,.scene-preview-card small{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis
}

.scene-preview-card strong{
  color:#273528;
  font-size:11px
}

.scene-preview-card small{
  margin-top:3px;
  color:#546454;
  font-size:10px
}

.scene-preview-card img{
  display:block;
  width:100%;
  aspect-ratio:2/1;
  object-fit:cover
}

.explore-flavor-title{
  margin:20px 0 12px
}

.flavor-preview-row{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:5px
}

.flavor-preview-row>div{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  min-width:0
}

.flavor-bubble{
  display:grid;
  place-items:center;
  width:49px;
  height:49px;
  border-radius:50%;
  font-size:23px;
  transition:transform .25s
}

.flavor-preview-row>div:hover .flavor-bubble{
  transform:translateY(-3px) scale(1.06)
}

.flavor-fresh{background:#DAF9C9}
.flavor-fruity{background:#FFE1E2}
.flavor-sour{background:#FFE3BB}
.flavor-rich{background:#EED9C6}
.flavor-sweet{background:#FFE3EA}

.flavor-preview-row small{
  color:#425043;
  font-size:10px
}

.community-preview{
  margin:21px -8px 24px;
  padding:14px;
  border:1px solid #E5ECE3;
  border-radius:18px;
  background:#FBFCF9
}

.community-author{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:13px
}

.community-avatar{
  display:block;
  width:38px;
  height:38px;
  flex:none;
  border-radius:50%;
  background:#DDEBCF;
  object-fit:cover
}

.community-author>span:nth-child(2){
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0
}

.community-author strong{
  color:#253328;
  font-size:12px
}

.community-author small{
  color:#677768;
  font-size:9px
}

.community-example{
  margin-left:auto;
  padding:5px 7px;
  border-radius:99px;
  background:#E8F3E5;
  color:#4F704C;
  font-size:9px;
  white-space:nowrap
}

.community-recipe{
  display:grid;
  grid-template-columns:128px minmax(0,1fr);
  gap:13px;
  align-items:center;
  min-width:0
}

.community-recipe-image{
  display:grid;
  place-items:center;
  height:151px;
  overflow:hidden;
  border-radius:13px;
  background:radial-gradient(circle,#F8F7E9,#E6F0E3)
}

.community-recipe-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain
}

.community-recipe-main{
  min-width:0
}

.community-recipe-kicker{
  display:block;
  margin-bottom:7px;
  color:#456847;
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em
}

.community-recipe-main strong{
  display:block;
  color:#273328;
  font-family:var(--serif);
  font-size:18px;
  line-height:1.35
}

.community-recipe-main p,.community-detail p{
  margin:7px 0 0;
  color:#5E705F;
  font-size:11px;
  line-height:1.65
}

.community-detail{
  margin-top:11px;
  padding-top:10px;
  border-top:1px solid #E1EBDE
}

.community-detail strong{
  color:#38523B;
  font-size:10px
}

.feature-card-copy{
  margin-top:auto
}

.feature-label{
  color:#456847;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em
}

.feature-card-copy h3{
  margin:9px 0 8px;
  font-family:var(--serif);
  font-size:23px;
  line-height:1.45
}

.feature-card-copy p{
  margin:0;
  color:#657264;
  font-size:12px;
  line-height:1.8
}



.closing{
  padding-top:45px;
  background:var(--paper)
}

.closing-panel{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  min-height:410px;
  padding:65px min(7vw,95px);
  overflow:hidden;
  border-radius:32px;
  background:radial-gradient(circle at 72% 30%,#4C8556 0,#2F6338 44%,#254F30 100%);
  color:#fff
}

.closing-panel:before{
  content:"";
  position:absolute;
  width:590px;
  height:590px;
  right:-160px;
  top:-215px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  box-shadow:0 0 0 48px rgba(255,255,255,.045),0 0 0 96px rgba(255,255,255,.025)
}

.closing-content{
  position:relative;
  z-index:2
}

.closing .section-index{
  color:#B5D49E
}

.closing h2{
  font-size:clamp(43px,4.5vw,65px)
}

.closing h2 em{
  color:#D7EABD
}

.closing-content p{
  max-width:370px;
  margin:20px 0 25px;
  color:#D3E3D1;
  font-size:14px;
  line-height:1.8
}

.closing-stamp{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 15px;
  border:1px solid rgba(214,239,200,.35);
  border-radius:99px;
  color:#E6F1E0;
  font-size:12px
}

.closing-stamp span{
  color:#D3E69A
}

.closing-qr{
  position:relative;
  z-index:3;
  width:230px;
  flex:none;
  padding:13px;
  border-radius:20px;
  background:#fff;
  box-shadow:0 20px 50px rgba(13,39,20,.2);
  transform:rotate(4deg);
  transition:transform .35s
}

.closing-qr:hover{
  transform:rotate(0) translateY(-5px)
}

.closing-qr .qr-frame{
  border:0;
  padding:0
}

.closing-qr>span{
  display:block;
  padding:12px 0 2px;
  color:#63785F;
  font-size:11px;
  font-weight:700;
  text-align:center
}

.closing-decoration{
  position:absolute;
  right:12%;
  bottom:-42px;
  color:rgba(218,238,209,.1);
  font-family:var(--sans);
  font-size:135px;
  font-weight:900;
  line-height:.8;
  letter-spacing:-.08em
}

.site-footer{
  padding:33px 0;
  background:var(--paper)
}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  color:#8A9787;
  font-size:11px
}

.footer-brand{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--green);
  font-family:var(--serif);
  font-size:16px;
  font-weight:700
}

.footer-brand img{
  display:block;
  width:32px;
  height:32px;
  margin-right:2px;
  border:1px solid #E4EADF;
  border-radius:7px;
  object-fit:cover
}

.footer-brand b{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:-.05em
}

.footer-inner a{
  color:var(--green);
  font-weight:700
}



@keyframes float{
  50%{
  transform:translate(-50%,-53%) rotate(-2deg)
}


}


@media(max-width:1180px){
  .hero-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,.65fr) 220px
}

.hero h1{
  font-size:clamp(56px,6vw,78px)
}

.hero-art-ring{
  width:300px;
  height:300px
}

.hero-drink{
  width:415px
}

.label-a{
  left:-17%
}

.label-b{
  right:-12%
}

.demo-controls{
  padding:40px
}

.demo-option{
  min-height:69px;
  padding:8px
}

.option-icon{
  width:34px;
  height:34px
}

.demo-option>span:nth-child(2){
  font-size:11px
}


}


@media(max-width:980px){
  .shell{
  width:min(100% - 48px,800px)
}

.header-inner{
  gap:18px
}

.header-nav{
  display:none
}

.header-cta{
  margin-left:auto
}

.hero-grid{
  grid-template-columns:minmax(0,1fr) 226px;
  gap:25px;
  min-height:610px
}

.hero-art{
  display:none
}

.hero h1{
  font-size:clamp(55px,7.4vw,78px)
}

.hero-scan{
  align-self:center
}

.hero-notes{
  gap:10px
}

.hero-bottom{
  padding-bottom:25px
}

.experience-board{
  grid-template-columns:1fr
}

.demo-controls{
  padding:42px
}

.demo-preview{
  min-height:530px
}

.feature-grid{
  grid-template-columns:repeat(2,1fr)
}

.feature-card-large{
  grid-column:1/-1;
  min-height:340px
}

.feature-card-large .feature-graphic{
  min-height:165px
}

.closing-panel{
  padding:55px
}


}


@media(max-width:640px){
  .shell{
  width:calc(100% - 36px)
}

.section-space{
  padding:82px 0
}

.site-header{
  background:rgba(248,247,242,.96)
}

.header-inner{
  height:67px;
  gap:8px
}

.brand-logo{
  width:36px;
  height:36px;
  border-radius:8px
}

.brand-cn{
  font-size:18px
}

.brand-en{
  font-size:13px
}

.header-cta{
  min-height:37px;
  padding:0 11px;
  font-size:10px;
  gap:5px
}

.header-cta-dot{
  width:5px;
  height:5px
}

.hero{
  min-height:0
}

.hero-grid{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  min-height:0;
  padding-top:38px
}

.hero-content{
  padding:0
}

.eyebrow{
  font-size:10px
}

.hero h1{
  margin:17px 0 14px;
  font-size:clamp(50px,13vw,72px);
  line-height:1.22
}

.hero-intro{
  max-width:420px;
  font-size:13px;
  line-height:1.8
}

.hero-actions{
  gap:16px;
  margin-top:24px
}

.button{
  min-height:48px;
  font-size:12px
}

.button-primary{
  padding:0 15px 0 19px;
  gap:23px
}

.hero-notes{
  margin-top:25px;
  gap:12px;
  font-size:10px
}

.hero-scan{
  align-self:stretch;
  display:grid;
  grid-template-columns:1fr 150px;
  column-gap:12px;
  width:100%;
  margin:31px 0 25px;
  padding:15px;
  transform:none;
  border-radius:17px
}

.scan-card-top{
  grid-column:1/-1
}

.scan-card h2{
  margin:12px 0 4px;
  font-size:21px
}

.hero-scan .qr-frame{
  grid-column:2;
  grid-row:2/4;
  align-self:center;
  padding:6px;
  border-radius:10px
}

.qr-placeholder{
  gap:2px
}

.qr-placeholder-symbol{
  font-size:29px
}

.qr-placeholder strong{
  font-size:10px
}

.qr-placeholder small{
  font-size:10px
}

.scan-card p{
  grid-column:1;
  grid-row:3;
  margin:0;
  align-self:end;
  font-size:10px
}

.hero-bottom{
  padding-bottom:18px;
  font-size:8px
}

.hero-bottom-line{
  width:30px
}

.hero-bottom span:last-child{
  display:none
}

.section-heading{
  display:block;
  margin-bottom:27px
}

.section-index{
  margin-bottom:12px;
  font-size:9px
}

.section-heading h2,.closing h2{
  font-size:clamp(36px,9.6vw,53px)
}

.section-heading p{
  margin-top:14px;
  font-size:12px
}

.experience-board{
  min-height:0;
  border-radius:20px
}

.demo-controls{
  padding:29px 18px
}

.demo-step h3{
  font-size:23px
}

.option-grid{
  gap:6px;
  margin-top:15px
}

.demo-option{
  min-height:60px;
  gap:4px;
  padding:7px;
  border-radius:10px
}

.option-icon{
  width:32px;
  height:32px
}

.demo-option>span:nth-child(2){
  font-size:10px
}

.demo-option small{
  font-size:7px
}

.demo-divider{
  margin:15px 0
}

.demo-preview{
  min-height:485px;
  padding:21px
}

.preview-halo{
  width:280px;
  height:280px
}

.preview-glass{
  top:40%;
  width:148px;
  height:215px
}

.preview-lime{
  left:60%;
  width:100px;
  height:100px
}

.preview-straw{
  height:160px
}

.preview-shadow{
  top:61%
}

.preview-copy{
  margin-bottom:19px;
  padding:15px
}

.preview-copy h3{
  font-size:23px
}

.demo-disclaimer{
  font-size:12px
}

.feature-grid{
  grid-template-columns:1fr;
  gap:12px
}

.feature-card,.feature-card-large{
  grid-column:auto;
  min-height:300px;
  padding:22px
}

.explore-preview{
  margin:20px -5px 24px;
  padding:13px 11px
}

.scene-preview-grid{
  gap:5px
}

.scene-preview-card>div{
  padding:8px 6px 5px
}

.scene-preview-card strong{
  font-size:10px
}

.flavor-bubble{
  width:43px;
  height:43px;
  font-size:20px
}

.community-preview{
  margin:18px -5px 24px;
  padding:12px
}

.community-recipe{
  grid-template-columns:112px minmax(0,1fr);
  gap:10px
}

.community-recipe-image{
  height:139px
}

.feature-graphic,.feature-card-large .feature-graphic{
  min-height:150px
}

.feature-card-copy h3{
  font-size:21px
}

.closing{
  padding-top:12px
}

.closing-panel{
  flex-direction:column;
  align-items:stretch;
  gap:22px;
  min-height:0;
  padding:36px 27px;
  border-radius:24px
}

.closing-content p{
  margin:13px 0 18px;
  font-size:12px
}

.closing-qr{
  align-self:center;
  width:185px;
  transform:rotate(2deg)
}

.closing-decoration{
  right:-20px;
  bottom:-10px;
  font-size:94px
}

.footer-inner{
  flex-wrap:wrap;
  justify-content:center;
  text-align:center
}

.footer-inner span:nth-child(2){
  order:3;
  width:100%
}


}


@media(max-width:370px){
  .brand-en{
  display:none
}

.hero h1{
  font-size:48px
}

.hero-scan{
  grid-template-columns:1fr 128px
}

.scan-card h2{
  font-size:19px
}

.demo-option{
  flex-direction:column;
  align-items:flex-start;
  min-height:76px
}

.demo-option small{
  margin-top:2px
}

.header-cta{
  font-size:9px
}

.feature-grid{
  grid-template-columns:minmax(0,1fr)
}

.feature-card{
  min-width:0
}

.graphic-pill{
  width:100px;
  height:66px
}

.graphic-plus{
  width:31px;
  height:31px
}

.flavor-bubble{
  width:35px;
  height:35px;
  font-size:17px
}

.community-recipe{
  grid-template-columns:92px minmax(0,1fr)
}

.community-recipe-image{
  height:122px
}

.community-recipe-main strong{
  font-size:16px
}


}


@media(prefers-reduced-motion:reduce){
  html{
  scroll-behavior:auto
}

*,*:before,*:after{
  animation-duration:.01ms!important;
  transition-duration:.01ms!important
}

.js-motion .reveal{
  opacity:1;
  transform:none
}


}