/* AI智慧團購管理平台官網頁面：POP 柔和風，不用黑框 */
:root {
  --gh-cream: #fff8ec; --gh-paper: #fffdf8; --gh-ink: #1b1d3a; --gh-sub: #55587a; --gh-muted: #8a8ca6;
  --gh-violet: #6c4cff; --gh-violet-soft: #efeaff; --gh-yellow: #ffd23f; --gh-yellow-soft: #fff3c4;
  --gh-pink: #ff4f8b; --gh-mint: #19b38a; --gh-line: #ece6f8;
  --gh-pop: 0 2px 0 rgba(108,76,255,.06), 0 14px 34px -14px rgba(60,40,140,.22);
  --gh-r: 22px;
}
.gh-site, .gh-site * { box-sizing: border-box; }
.gh-site { margin: 0; background: var(--gh-cream); color: var(--gh-ink); font: 400 17px/1.75 "Noto Sans TC", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.gh-site a { color: var(--gh-violet); }
.gh-site img { max-width: 100%; height: auto; display: block; }
.gh-wrap { width: min(1120px, 100% - 32px); margin: 0 auto; }

/* 頁首 */
.gh-head { position: sticky; top: 0; z-index: 50; background: rgba(255,248,236,.86); backdrop-filter: blur(12px); }
.admin-bar .gh-head { top: 32px; }
.gh-head .gh-wrap { display: flex; align-items: center; gap: 18px; height: 68px; }
.gh-logo { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 20px; color: var(--gh-ink) !important; text-decoration: none; white-space: nowrap; }
.gh-logo i { width: 34px; height: 34px; border-radius: 10px; background: var(--gh-yellow); display: grid; place-items: center; font-style: normal; }
.gh-logo i::before { content: ""; width: 16px; height: 12px; border: 3px solid var(--gh-violet); border-top-width: 5px; border-radius: 4px; }
.gh-logo span { font-family: Outfit, sans-serif; color: var(--gh-violet); }
.gh-nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.gh-nav a { color: var(--gh-ink); text-decoration: none; font-weight: 700; font-size: 15px; padding: 8px 12px; border-radius: 999px; }
.gh-nav a:hover, .gh-nav a.on { background: var(--gh-violet-soft); color: var(--gh-violet); }
.gh-menu-btn { display: none; margin-left: auto; border: 0; background: #fff; border-radius: 12px; padding: 9px 12px; font-weight: 800; box-shadow: var(--gh-pop); }

/* 按鈕 */
.gh-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 13px 26px; font: 800 16px/1.2 "Noto Sans TC", sans-serif; text-decoration: none !important; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.gh-btn:hover { transform: translateY(-2px); }
.gh-btn.primary { background: var(--gh-violet); color: #fff !important; box-shadow: 0 10px 24px -10px rgba(108,76,255,.7); }
.gh-btn.pop { background: var(--gh-yellow); color: var(--gh-ink) !important; box-shadow: 0 10px 22px -12px rgba(200,150,0,.8); }
.gh-btn.ghost { background: #fff; color: var(--gh-violet) !important; box-shadow: var(--gh-pop); }
.gh-btn.sm { padding: 9px 16px; font-size: 14.5px; }

/* 區塊 */
.gh-hero { padding: 64px 0 40px; position: relative; overflow: hidden; }
.gh-hero::before { content: ""; position: absolute; width: 520px; height: 520px; right: -140px; top: -180px; background: radial-gradient(closest-side, #e4dcff, transparent); z-index: 0; }
.gh-hero .gh-wrap { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.gh-eyebrow { display: inline-block; background: #fff; color: var(--gh-violet); font-weight: 800; font-size: 14px; padding: 6px 14px; border-radius: 999px; box-shadow: var(--gh-pop); margin-bottom: 18px; }
.gh-site h1 { font-size: clamp(32px, 5vw, 54px); line-height: 1.18; font-weight: 900; margin: 0 0 18px; letter-spacing: -.01em; }
.gh-site h1 em, .gh-site h2 em { font-style: normal; color: var(--gh-violet); background: linear-gradient(transparent 62%, var(--gh-yellow-soft) 62%); }
.gh-lead { font-size: 19px; color: var(--gh-sub); margin: 0 0 26px; }
.gh-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.gh-phone { background: #fff; border-radius: 32px; padding: 10px; box-shadow: var(--gh-pop); max-width: 340px; margin: 0 auto; transform: rotate(2deg); }
.gh-phone img { border-radius: 24px; }
.gh-sec { padding: 56px 0; }
.gh-sec.alt { background: var(--gh-paper); }
.gh-site h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.3; font-weight: 900; margin: 0 0 12px; }
.gh-site h3 { font-size: 21px; line-height: 1.4; font-weight: 800; margin: 0 0 8px; }
.gh-sec-head { max-width: 720px; margin-bottom: 30px; }
.gh-sec-head p { color: var(--gh-sub); margin: 0; }

/* 卡片格 */
.gh-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.gh-grid.two { grid-template-columns: repeat(2, 1fr); }
.gh-card { background: #fff; border-radius: var(--gh-r); padding: 24px; box-shadow: var(--gh-pop); }
.gh-card p { margin: 0; color: var(--gh-sub); font-size: 16px; }
.gh-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; margin-bottom: 14px; background: var(--gh-violet-soft); }
.gh-ico.y { background: var(--gh-yellow-soft); } .gh-ico.p { background: #ffe3ee; } .gh-ico.m { background: #dcf6ee; }
a.gh-card { text-decoration: none; color: inherit; transition: transform .15s; display: block; }
a.gh-card:hover { transform: translateY(-3px); }
.gh-more { display: inline-block; margin-top: 12px; font-weight: 800; color: var(--gh-violet); }

/* 痛點 → 解法 */
.gh-pains { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.gh-pain { background: #fff; border-radius: var(--gh-r); padding: 20px 22px; box-shadow: var(--gh-pop); }
.gh-pain b { display: block; font-size: 18px; margin-bottom: 6px; }
.gh-pain .bad { color: #c2410c; font-weight: 700; font-size: 15px; }
.gh-pain .good { color: var(--gh-mint); font-weight: 800; font-size: 15px; display: block; margin-top: 8px; }

/* 功能左右排 */
.gh-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; padding: 30px 0; }
.gh-feature.rev .gh-shot { order: -1; }
.gh-shot { background: #fff; border-radius: 26px; padding: 10px; box-shadow: var(--gh-pop); max-width: 420px; justify-self: center; }
.gh-shot img { border-radius: 18px; }
.gh-shot.tall img { max-height: 620px; object-fit: cover; object-position: top; width: 100%; }
.gh-list { list-style: none; padding: 0; margin: 14px 0 0; }
.gh-list li { position: relative; padding-left: 30px; margin: 8px 0; color: var(--gh-sub); }
.gh-list li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--gh-violet-soft); color: var(--gh-violet); font-size: 12px; font-weight: 900; display: grid; place-items: center; }
.gh-tag { display: inline-block; font-size: 13px; font-weight: 800; padding: 4px 11px; border-radius: 999px; background: var(--gh-yellow-soft); color: #8a5a00; margin-bottom: 10px; }

/* 數字 */
.gh-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gh-stat { background: #fff; border-radius: var(--gh-r); padding: 20px; text-align: center; box-shadow: var(--gh-pop); }
.gh-stat b { display: block; font: 900 36px/1.1 Outfit, sans-serif; color: var(--gh-violet); }
.gh-stat span { color: var(--gh-sub); font-size: 14.5px; }

/* 方案 */
.gh-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.gh-plan { background: #fff; border-radius: 26px; padding: 28px 24px; box-shadow: var(--gh-pop); display: flex; flex-direction: column; position: relative; }
.gh-plan.hot { box-shadow: 0 0 0 3px var(--gh-violet), var(--gh-pop); }
.gh-plan .badge { position: absolute; top: -13px; left: 24px; background: var(--gh-violet); color: #fff; font-size: 13px; font-weight: 800; padding: 4px 12px; border-radius: 999px; }
.gh-price { font: 900 42px/1 Outfit, sans-serif; margin: 10px 0 4px; }
.gh-price small { font: 700 15px "Noto Sans TC", sans-serif; color: var(--gh-muted); }
.gh-plan .gh-list { flex: 1; }
.gh-plan .gh-btn { justify-content: center; margin-top: 18px; }
.gh-note { color: var(--gh-muted); font-size: 14px; margin-top: 18px; }

/* FAQ */
.gh-faq details { background: #fff; border-radius: 18px; padding: 4px 22px; margin: 0 0 12px; box-shadow: var(--gh-pop); }
.gh-faq summary { cursor: pointer; font-weight: 800; font-size: 17.5px; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.gh-faq summary::-webkit-details-marker { display: none; }
.gh-faq summary::after { content: "+"; color: var(--gh-violet); font-size: 22px; line-height: 1; }
.gh-faq details[open] summary::after { content: "−"; }
.gh-faq details p { margin: 0 0 16px; color: var(--gh-sub); }

/* 文章 */
.gh-article { max-width: 760px; margin: 0 auto; }
.gh-article h2 { font-size: 26px; margin: 40px 0 10px; }
.gh-article p, .gh-article li { color: #3b3e5c; }
.gh-article .gh-box { background: #fff; border-radius: var(--gh-r); padding: 20px 24px; box-shadow: var(--gh-pop); margin: 22px 0; }
.gh-crumb { font-size: 14px; color: var(--gh-muted); margin-bottom: 14px; }
.gh-crumb a { color: var(--gh-muted); }

/* 表單 */
.gh-form { background: #fff; border-radius: 26px; padding: 28px; box-shadow: var(--gh-pop); display: grid; gap: 14px; }
.gh-form label { font-weight: 800; font-size: 15px; display: block; margin-bottom: 6px; }
.gh-form input, .gh-form select, .gh-form textarea { width: 100%; border: 0; background: #f6f3fc; border-radius: 14px; padding: 13px 16px; font: 500 16px "Noto Sans TC", sans-serif; color: var(--gh-ink); }
.gh-form input:focus, .gh-form select:focus, .gh-form textarea:focus { outline: 3px solid #d9cfff; background: #fff; }
.gh-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gh-form .hp { position: absolute; left: -9999px; }
.gh-alert { border-radius: 16px; padding: 14px 18px; font-weight: 700; margin-bottom: 16px; }
.gh-alert.ok { background: #dcf6ee; color: #0b7a5c; } .gh-alert.err { background: #ffe3ee; color: #b4174e; }

/* 底部 CTA 與頁尾 */
.gh-band { background: linear-gradient(120deg, var(--gh-violet), #8b6dff); color: #fff; border-radius: 30px; padding: 44px; display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.gh-band h2 { color: #fff; margin: 0 0 6px; }
.gh-band p { margin: 0; opacity: .9; }
.gh-foot { padding: 40px 0 54px; color: var(--gh-sub); font-size: 15px; }
.gh-foot .gh-wrap { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 24px; }
.gh-foot b { color: var(--gh-ink); display: block; margin-bottom: 8px; }
.gh-foot a { color: var(--gh-sub); text-decoration: none; display: block; margin: 4px 0; }
.gh-foot a:hover { color: var(--gh-violet); }
.gh-copy { text-align: center; color: var(--gh-muted); font-size: 13px; padding-bottom: 28px; }

@media (max-width: 860px) {
  .gh-site { font-size: 16px; }
  .gh-hero { padding: 36px 0 24px; }
  .gh-hero .gh-wrap, .gh-feature, .gh-grid.two { grid-template-columns: 1fr; }
  .gh-feature.rev .gh-shot { order: 0; }
  .gh-grid, .gh-pains, .gh-plans { grid-template-columns: 1fr; }
  .gh-stats { grid-template-columns: repeat(2, 1fr); }
  .gh-nav { display: none; position: absolute; top: 68px; left: 0; right: 0; background: var(--gh-cream); flex-direction: column; align-items: stretch; padding: 8px 16px 16px; box-shadow: 0 20px 30px -20px rgba(60,40,140,.3); }
  .gh-nav.open { display: flex; }
  .gh-menu-btn { display: block; }
  .gh-band { padding: 28px; }
  .gh-foot .gh-wrap { grid-template-columns: 1fr; }
  .gh-form .row { grid-template-columns: 1fr; }
  .admin-bar .gh-head { top: 46px; }
}