/* ===== Microsense Vision – HandiMote page shared styles (no CSS variables) ===== */
.hm-wrap{max-width:1100px;margin:0 auto;padding:0 20px;font-family:"Helvetica Neue",Arial,"微軟正黑體",sans-serif;color:#222;line-height:1.75}
.hm-section{margin:48px 0}
.hm-title{margin:0 0 14px;font-size:28px;line-height:1.3}
.hm-sub{color:#555;margin:8px 0 18px}

/* Grid helpers */
.hm-grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.hm-grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}

/* Card */
.hm-card{background:#fff;border:1px solid #e0e6ef;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.05);padding:16px}
.hm-card h3{margin:4px 0 8px;font-size:18px}
.hm-card p{margin:0}

/* Media */
.hm-img{width:100%;display:block;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.hm-icon{width:56px;height:56px;object-fit:contain;display:block}

/* Hero */
.hm-hero{background:linear-gradient(180deg,#f7fbff 0%,#ffffff 100%);border:1px solid #e0e6ef;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.06);padding:26px}
.hm-hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.hm-hero__lead{font-size:18px;margin-top:8px;color:#333}
@media(max-width:800px){.hm-hero__grid{grid-template-columns:1fr}}

/* Buttons */
.hm-btn{display:inline-block;text-decoration:none;font-weight:700;border-radius:12px;padding:12px 18px;margin-right:8px;border:1px solid transparent}
.hm-btn--primary{background:#0a4a8a;color:#fff}
.hm-btn--primary:hover{filter:brightness(.95)}
.hm-btn--ghost{background:#fff;border-color:#0a4a8a;color:#0a4a8a}
.hm-btn--ghost:hover{background:#eef6ff}

/* List bullets */
.hm-bullets{margin:10px 0 0 18px}
.hm-bullets li{margin:8px 0}

/* Figure */
.hm-figure{margin:12px 0}
.hm-figure figcaption{color:#666;font-size:14px;margin-top:6px}

/* Grid */
.hm-gestures-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px;
  max-width:1100px;
  margin:0 auto;
}

/* Card */
.hm-gesture-card{
  background:#fff;
  border:1px solid #e5e9f1;
  border-radius:14px;
  padding:22px 20px;
  text-align:center;
  box-shadow:0 3px 10px rgba(0,0,0,.05);
}
.hm-gesture-card h3{
  margin:10px 0 8px;
  font-size:19px;
}
.hm-gesture-card p{
  margin:0;
  color:#555;
  line-height:1.7;
}

/* Big emoji as the visual */
.hm-emoji-big{
  font-size:58px;       /* 可改 52–68 依喜好 */
  line-height:1;
  margin-bottom:10px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.08));
}

/* 小螢幕微調 */
@media(max-width:640px){
  .hm-emoji-big{font-size:54px}
}

.hm-app-kicker{font-weight:600;color:#1f2a44;margin:6px 0 6px}
.hm-app-gestures{color:#666;margin-top:6px;font-size:14.5px}

.hm-app-kicker {
  font-weight: 600;
  color: #1f2a44;
  margin: 6px 0 6px;
  font-size: 15.5px;
}

.hm-app-gestures {
  color: #666;
  margin-top: 8px;
  font-size: 14.5px;
  font-style: italic;
}

/* CTA layout */
#hm-cta .cta-card{
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 28px;
  border-radius: 16px;
  background: linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  text-align: center;
}

#hm-cta .cta-title{
  font-size: 30px;
  line-height: 1.25;
  margin: 0 0 6px;
}

#hm-cta .cta-sub{
  color: #5b6b86;
  font-size: 16px;
  margin: 0 0 18px;
}

#hm-cta .cta-body{
  max-width: 700px;
  margin: 0 auto 10px;
  font-size: 16.5px;
  line-height: 1.8;
  color: #2a3343;
}

#hm-cta .cta-tagline{
  margin: 6px auto 20px;
  font-weight: 600;
  letter-spacing: .2px;
  color: #1f2a44;
}

#hm-cta .cta-actions{
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

/* Optional: make buttons equal height & spacing consistent */
.hm-btn{ padding: 12px 18px; border-radius: 10px; }

/* Mobile tweaks */
@media (max-width:640px){
  #hm-cta .cta-card{ padding: 28px 18px; }
  #hm-cta .cta-title{ font-size: 26px; }
  #hm-cta .cta-actions{ width: 100%; gap: 10px; }
  #hm-cta .cta-actions .hm-btn{ flex: 1 1 100%; text-align: center; }
}