/* ============================================================
   MQloud 全站共用設計系統
   English: Raleway ／ 中文: Noto Sans TC ／ 品牌色: #2B78E4 / #1AC8DE
   ============================================================ */
:root {
  --bg:       #FFFFFF;
  --bg-alt:   #EEF2FA;
  --bg-hero:  #EAF1FC;
  --surface:  #FFFFFF;
  --surface2: #F1F5FB;

  --text:     #0F172A;
  --text-2:   #334155;
  --muted:    #64748B;
  --white:    #FFFFFF;

  --blue:     #2B78E4;
  --blue-2:   #1E5FBE;
  --teal:     #1AC8DE;
  --teal-2:   #0FAABC;
  --gold:     #F5A623;
  --admin:    #D45E3B;

  --navy:     #0B1220;
  --navy2:    #0F1A33;
  --navy3:    #172845;
  --navy4:    #1E3358;

  --border:    rgba(15,23,42,0.08);
  --border-2:  rgba(15,23,42,0.12);
  --border-t:  rgba(43,120,228,0.22);
  --card:      #FFFFFF;
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md: 0 4px 12px rgba(15,23,42,0.06), 0 2px 4px rgba(15,23,42,0.04);
  --shadow-lg: 0 12px 32px rgba(15,23,42,0.08), 0 4px 12px rgba(15,23,42,0.04);
  --shadow-brand: 0 8px 28px rgba(43,120,228,0.18);

  --font-zh: 'Noto Sans TC', 'Raleway', -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Segoe UI', sans-serif;
  --font-en: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --r:  12px;
  --rl: 20px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-zh); background: var(--bg); color: var(--text); line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body.lang-en { font-family: var(--font-en); }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 2rem; }
h1, h2, h3, h4 { color: var(--text); font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.15rem; }
p { color: var(--text-2); }
.lead { font-size: 1.05rem; color: var(--text-2); line-height: 1.8; }
section.section { padding: 6rem 0; }
.section-alt { background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-alt) 12%, var(--bg-alt) 88%, #FFFFFF 100%); position:relative; overflow:hidden; }
.section-alt::before { content:''; position:absolute; top:-120px; left:-100px; width:420px; height:420px; border-radius:50%; background: radial-gradient(circle, rgba(43,120,228,0.10) 0%, transparent 70%); pointer-events:none; }
.section-alt::after { content:''; position:absolute; bottom:-140px; right:-100px; width:460px; height:460px; border-radius:50%; background: radial-gradient(circle, rgba(26,200,222,0.09) 0%, transparent 70%); pointer-events:none; }
.section-alt > .container { position:relative; z-index:1; }
.eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; font-weight:700; letter-spacing:.06em; color: var(--blue); text-transform: uppercase; margin-bottom:.8rem; }
.eyebrow::before { content:''; width:16px; height:2px; background: var(--blue); border-radius:2px; }
.mt4{margin-top:1rem;} .mt6{margin-top:1.5rem;} .mt8{margin-top:2rem;} .mt12{margin-top:3rem;}
.mb8{margin-bottom:2rem;}
.mb12{margin-bottom:3rem;}
.tc{text-align:center;} .mx{margin-left:auto;margin-right:auto;}

/* ── Icon system (SVG, replaces emoji) ── */
.icon { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-lg { width: 30px; height: 30px; }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.7rem; border-radius: 999px; font-size:.92rem; font-weight:700; cursor:pointer; border:1px solid transparent; transition: all .2s ease; white-space: nowrap; }
.btn-primary { background: linear-gradient(135deg, var(--blue), var(--teal)); color:#fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(43,120,228,0.28); }
.btn-outline { background: transparent; color: var(--text); border-color: var(--border-2); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }
.btn-ghost { color: var(--teal-2); font-weight:700; font-size:.88rem; display:inline-flex; align-items:center; gap:.4rem; }
.btn-ghost:hover { gap:.6rem; }

/* ── Nav ── */
nav { position: sticky; top:0; z-index:100; background: rgba(255,255,255,0.85); backdrop-filter: blur(14px); border-bottom:2px solid transparent; border-image: linear-gradient(90deg, var(--blue), var(--teal)) 1; transition: all .25s; }
nav.scrolled { background: rgba(255,255,255,0.95); box-shadow: var(--shadow-sm); }
.nav-inner { max-width:1180px; margin:0 auto; padding: 0 2rem; height:74px; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:flex; align-items:center; gap:.5rem; }
.nav-logo img { height:42px; }
.nav-links { display:flex; align-items:center; gap:2rem; list-style:none; }
.nav-links a:not(.btn):not(.nav-lang) { color: var(--text-2); font-size:.92rem; font-weight:600; }
.nav-links a:not(.btn):not(.nav-lang):hover, .nav-links a.active { color: var(--blue); }
.nav-lang { display:flex; align-items:center; gap:.3rem; font-size:.78rem; font-weight:700; color: var(--muted); border:1px solid var(--border); border-radius:999px; padding:.35rem .8rem; }
.nav-lang .active-lang { color: var(--blue); }

.nav-dropdown { position:relative; }
.nav-dropdown-menu { display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg); padding:.5rem; min-width:200px; margin-top:0; padding-top:.6rem; }
.nav-dropdown:hover .nav-dropdown-menu { display:block; }
.nav-dropdown-menu a { display:block; padding:.7rem .9rem; border-radius:9px; font-size:.86rem; font-weight:600; color:var(--text-2); }
.nav-dropdown-menu a:hover { background:var(--surface2); color:var(--blue); }

.nav-burger { display:none; flex-direction:column; gap:5px; width:26px; cursor:pointer; background:none; border:none; padding:.4rem; }
.nav-burger span { display:block; width:100%; height:2px; background: var(--text); border-radius:2px; transition: all .25s; }
.nav-burger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-drawer { position:fixed; top:74px; left:0; right:0; bottom:0; background:#fff; z-index:99; padding:2rem; overflow-y:auto; transform: translateY(-8px); opacity:0; pointer-events:none; transition: all .25s ease; }
.mobile-drawer.open { transform: translateY(0); opacity:1; pointer-events:auto; }
.mobile-drawer a { display:block; font-size:1.05rem; font-weight:700; color: var(--text); padding:1rem 0; border-bottom:1px solid var(--border); }
.mobile-drawer .btn { margin-top:1.5rem; width:100%; justify-content:center; }

/* ── Breadcrumb (內頁用) ── */
.breadcrumb { font-size:.82rem; color: var(--muted); padding: 1.3rem 0; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb .sep { margin: 0 .5rem; opacity:.5; }
.breadcrumb .current { color: var(--text-2); font-weight:600; }

/* ── Page banner (內頁頂部，非首頁Hero的簡化版) ── */
.page-banner { background: linear-gradient(180deg,#FFFFFF 0%, var(--bg-hero) 60%, #FFFFFF 100%); padding: 2.5rem 0 3.5rem; }
.page-banner h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.page-banner .lead { max-width: 620px; margin-top: 1rem; }

/* ── Hero (首頁用) ── */
#hero { position:relative; background: linear-gradient(180deg,#FFFFFF 0%, var(--bg-hero) 55%, #FFFFFF 100%); padding: 5.5rem 0 4rem; overflow:hidden; }
.hero-grid { position:absolute; inset:0; background-image: linear-gradient(rgba(43,120,228,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(43,120,228,0.06) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, black 20%, transparent 80%); }
.hero-inner { position:relative; max-width:1180px; margin:0 auto; padding:0 2rem; display:grid; grid-template-columns: 1.05fr .95fr; gap:3.5rem; align-items:center; }
.hero-badge { display:inline-flex; align-items:center; gap:.5rem; background: rgba(43,120,228,0.08); border:1px solid rgba(43,120,228,0.2); color:var(--blue); font-size:.78rem; font-weight:700; padding:.4rem .9rem; border-radius:999px; margin-bottom:1.3rem; }
.hero-bdot { width:6px; height:6px; border-radius:50%; background: var(--blue); }
.hero-title { font-size: clamp(2.2rem, 4.2vw, 3.2rem); }
.hero-title .accent { background: linear-gradient(90deg, var(--blue), var(--teal)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-ctas { display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap; }
.hero-trust { margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid var(--border); }
.trust-label { font-size:.76rem; color:var(--muted); font-weight:700; letter-spacing:.03em; margin-bottom:.8rem; }
.trust-badges { display:flex; gap:.6rem; flex-wrap:wrap; }
.trust-badge { display:flex; align-items:center; gap:.4rem; background: var(--surface); border:1px solid var(--border); box-shadow: var(--shadow-sm); font-size:.78rem; font-weight:600; color:var(--text-2); padding:.45rem .85rem; border-radius:999px; }
.trust-badge .icon { width:15px; height:15px; color: var(--blue); }

.hero-dashboard { background: var(--navy2); border:1px solid rgba(43,120,228,0.2); border-radius: 16px; overflow:hidden; box-shadow: var(--shadow-lg), 0 20px 60px rgba(43,120,228,0.15); }
.dash-hdr { background: var(--navy3); padding:.7rem 1rem; display:flex; align-items:center; gap:.4rem; border-bottom:1px solid rgba(255,255,255,0.06); }
.dd { width:9px; height:9px; border-radius:50%; }
.dd.r{background:#F76B6B;} .dd.y{background:#F5C451;} .dd.g{background:#4ECB71;}
.dash-title { margin-left:.6rem; font-size:.72rem; color: rgba(255,255,255,0.5); display:flex; align-items:center; gap:.3rem; }
.dash-body { padding:1.4rem; }
.dsl { font-size:.72rem; color: var(--teal); font-weight:700; margin-bottom:.7rem; text-transform:uppercase; letter-spacing:.04em; }
.dash-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-bottom:1.3rem; }
.dash-stat { background: var(--navy3); border:1px solid rgba(255,255,255,0.06); border-radius:10px; padding:.8rem; text-align:center; }
.dsn { font-size:1.3rem; font-weight:800; color:#fff; }
.dsn.t{color:var(--teal);} .dsn.g{color:var(--gold);}
.dsl2 { font-size:.68rem; color: rgba(255,255,255,0.5); margin-top:.2rem; }
.env-list { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.3rem; }
.env-item { display:flex; align-items:center; justify-content:space-between; background: var(--navy3); border:1px solid rgba(255,255,255,0.06); border-radius:10px; padding:.65rem .85rem; }
.env-l { display:flex; align-items:center; gap:.6rem; }
.edot{width:8px;height:8px;border-radius:50%;}
.edot.grn{background:#4ECB71;} .edot.t{background:var(--teal);} .edot.b{background:var(--blue);} .edot.a{background:var(--gold);}
.en{ font-size:.78rem; color:#fff; font-weight:600; } .et{font-size:.68rem; color:rgba(255,255,255,0.45); margin-top:.1rem;}
.eu{font-size:.78rem; color:var(--teal); font-weight:700;}
.bar-r{display:flex; align-items:center; gap:.6rem; margin-bottom:.55rem;}
.bar-l{font-size:.68rem; color:rgba(255,255,255,0.5); width:36px;}
.bar-t{flex:1; height:6px; background:rgba(255,255,255,0.08); border-radius:4px; overflow:hidden;}
.bar-f{height:100%; border-radius:4px;} .bar-f.t{background:var(--teal);} .bar-f.b{background:var(--blue);} .bar-f.az{background:#7B8FF0;}
.bar-v{font-size:.68rem; color:#fff; width:32px; text-align:right;}

/* ── Logos strip ── */
.logos-strip { background: var(--surface2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding: 1.6rem 0; }
.logos-row { display:flex; align-items:center; justify-content:center; gap:2.6rem; flex-wrap:wrap; margin-top:1rem; }
.cloud-badge { display:flex; align-items:center; gap:.55rem; font-size:.85rem; font-weight:700; color: var(--text-2); }
.cloud-badge svg { width:24px; height:24px; }
.disclaimer { text-align:center; font-size:.68rem; color: var(--muted); margin-top:1rem; opacity:.75; }

/* ── Pain points ── */
.pain-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:1.2rem; margin-top:3rem; }
.pain-card { background: var(--surface); border:1px solid var(--border); border-radius: var(--r); padding:1.6rem; box-shadow: var(--shadow-sm); transition: all .2s; flex:1 1 260px; max-width:340px; }
.pain-card:hover { border-color: var(--border-t); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.pain-icon { width:46px; height:46px; border-radius:12px; background: rgba(43,120,228,0.08); border:1px solid rgba(43,120,228,0.2); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; color: var(--blue); }
.pain-card h3 { font-size:1rem; margin-bottom:.5rem; }
.pain-card p { font-size:.93rem; line-height:1.7; }

/* ── Value props ── */
.vp-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; margin-top:3rem; }
.vp-card { background: linear-gradient(160deg, #FFFFFF 0%, #F5F9FF 100%); border:1px solid var(--border); border-radius: var(--rl); padding:2rem; box-shadow: var(--shadow-sm); position:relative; transition: all .2s; flex:1 1 260px; max-width:340px; }
@media (min-width: 901px) {
  .vp-grid-wide .vp-card { flex-basis:320px; max-width:360px; }
}
.vp-card:hover { border-color: var(--border-t); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.vp-ico { width:52px; height:52px; border-radius:14px; background: linear-gradient(135deg, rgba(43,120,228,0.12), rgba(26,200,222,0.08)); border:1px solid rgba(43,120,228,0.2); display:flex; align-items:center; justify-content:center; margin-bottom:1.3rem; color:var(--blue); }
.vp-card:nth-child(even) .vp-ico { background: linear-gradient(135deg, rgba(26,200,222,0.12), rgba(43,120,228,0.08)); border-color: rgba(26,200,222,0.25); color: var(--teal-2); }
.vp-card h3 { margin-bottom:.7rem; }
.vp-card p { font-size:.9rem; line-height:1.75; margin-bottom:1.1rem; }
.vp-tag { display:inline-block; background: rgba(43,120,228,0.08); color:var(--blue); font-size:.72rem; font-weight:700; padding:.3rem .7rem; border-radius:999px; }

/* ── Platform overview ── */
.platform-section { position:relative; }
.platform-frame { background: var(--surface); border:1px solid rgba(43,120,228,0.15); border-radius: var(--rl); overflow:hidden; box-shadow: var(--shadow-lg), 0 20px 60px rgba(43,120,228,0.08); margin-top:3rem; }
.platform-frame-bar { background: var(--surface2); border-bottom:1px solid var(--border); padding:.65rem 1rem; display:flex; align-items:center; gap:.4rem; }
.platform-img-wrap img { width:100%; display:block; }
.platform-callouts { display:flex; flex-wrap:wrap; justify-content:center; gap:1.3rem; margin-top:2.6rem; }
.platform-callout { display:flex; gap:.9rem; background:var(--surface); border:1px solid var(--border); border-radius: var(--r); padding:1.2rem; box-shadow: var(--shadow-sm); flex:1 1 300px; max-width:370px; }
.pc-num { flex-shrink:0; width:28px; height:28px; border-radius:50%; background: linear-gradient(135deg,var(--blue),var(--teal)); color:#fff; font-size:.78rem; font-weight:800; display:flex; align-items:center; justify-content:center; }
.pc-text h4{font-size:.9rem; margin-bottom:.3rem;} .pc-text p{font-size:.8rem; line-height:1.6;}
.platform-link-card { margin-top:2.6rem; background: linear-gradient(135deg, rgba(43,120,228,0.06), rgba(26,200,222,0.03)); border:1px solid rgba(43,120,228,0.2); border-radius: var(--rl); padding:2rem 2.4rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.platform-link-card h4 { font-size:1.05rem; margin-bottom:.4rem; }
.platform-link-card p { font-size:.95rem; }

/* ── Audience / role tabs ── */
.tabs-nav { display:inline-flex; background: var(--surface2); border:1px solid var(--border); border-radius:999px; padding:.3rem; gap:.2rem; }
.tab-btn { padding:.6rem 1.4rem; border-radius:999px; font-size:.85rem; font-weight:700; color: var(--muted); background:transparent; border:none; cursor:pointer; transition: all .2s; }
.tab-btn.active { background: linear-gradient(135deg, var(--blue), var(--teal)); color:#fff; }
.tab-panel { display:none; margin-top:3rem; grid-template-columns: 0.85fr 1.15fr; gap:3rem; align-items:center; }
.tab-panel.active { display:grid; }
.aud-h { font-size:1.5rem; margin-bottom:1rem; }
.aud-h .text-t { color: var(--blue); }
.aud-b { font-size:.92rem; line-height:1.8; margin-bottom:1.3rem; }
.flist { list-style:none; display:flex; flex-direction:column; gap:.7rem; margin-bottom:1.6rem; }
.flist li { display:flex; align-items:flex-start; gap:.6rem; font-size:.95rem; color: var(--text); }
.fchk { flex-shrink:0; width:19px; height:19px; border-radius:50%; background: rgba(43,120,228,0.1); color:var(--blue); display:flex; align-items:center; justify-content:center; margin-top:.1rem; }
.fchk svg{width:11px;height:11px;}
.screen-frame { background: var(--surface); border:1px solid var(--border); border-radius: var(--r); overflow:hidden; box-shadow: var(--shadow-lg); }
.screen-bar { background: var(--surface2); border-bottom:1px solid var(--border); padding:.6rem .9rem; display:flex; align-items:center; gap:.4rem; font-size:.72rem; color:var(--muted); }
.screen-img { width:100%; display:block; }
.msp-note { grid-column: 1 / -1; margin-top:1rem; padding:1rem 1.3rem; background: var(--surface2); border-radius: var(--r); font-size:.9rem; color: var(--text-2); display:flex; align-items:center; gap:.7rem; }

/* ── Role cards（三個視角，Platform頁專用） ── */
.role-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; margin-top:3rem; }
.role-card { background: var(--surface); border:1px solid var(--border); border-radius: var(--rl); padding:1.8rem; box-shadow: var(--shadow-sm); flex:1 1 300px; max-width:370px; }
.role-card.admin { border-top:3px solid var(--admin); }
.role-card.agent { border-top:3px solid var(--teal); }
.role-card.customer { border-top:3px solid var(--blue); }
.role-badge { display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:.3rem .7rem; border-radius:999px; margin-bottom:1rem; }
.role-badge.admin { background: rgba(212,94,59,0.12); color:#A5462B; }
.role-badge.agent { background: rgba(26,200,222,0.12); color: var(--teal-2); }
.role-badge.customer { background: rgba(43,120,228,0.12); color: var(--blue); }
.role-card h3 { font-size:1.15rem; margin-bottom:.6rem; }
.role-card p { font-size:.95rem; line-height:1.7; margin-bottom:1rem; }
.role-shot { border-radius: var(--r); overflow:hidden; border:1px solid var(--border); margin-top:1rem; }
.role-shot img { width:100%; display:block; }
.hierarchy-table { width:100%; max-width:640px; margin:2rem auto 0; border-collapse:collapse; font-size:.93rem; }
.hierarchy-table th, .hierarchy-table td { padding:.9rem 1.2rem; text-align:left; border-bottom:1px solid var(--border); }
.hierarchy-table th { color:var(--muted); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; }
.hierarchy-table td:first-child { font-weight:700; }

/* ── Comparison table（vs 原生雲，Platform頁專用） ── */
.compare-wrap { overflow-x:auto; margin-top:3rem; border-radius: var(--rl); border:1px solid var(--border); }
.compare-table { width:100%; border-collapse:collapse; min-width:640px; }
.compare-table th, .compare-table td { padding:1.1rem 1.4rem; text-align:left; font-size:.93rem; border-bottom:1px solid var(--border); }
.compare-table thead th { background: var(--surface2); font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); }
.compare-table thead th.hl { color: var(--blue); }
.compare-table tbody th { font-weight:700; color:var(--text); background: var(--bg-alt); width:20%; }
.compare-table td.hl { background: rgba(43,120,228,0.04); color: var(--text); }
.compare-table tr:last-child td, .compare-table tr:last-child th { border-bottom:none; }
.cmp-ico { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; margin-right:.5rem; flex-shrink:0; font-size:.7rem; font-weight:900; vertical-align:middle; }
.cmp-ico.yes { background:#DCFCE7; color:#16A34A; }
.cmp-ico.no { background:#FEE2E2; color:#DC2626; }
.cmp-cell { display:flex; align-items:flex-start; gap:.5rem; }
.cmp-cell .cmp-ico { margin-top:.15rem; }
.cmp-cell ul { list-style:none; }
.cmp-cell li { line-height:1.6; }
.cmp-cell li + li { margin-top:.2rem; }

/* ── Features preview / grid ── */
.feat-tabs { display:flex; gap:.6rem; justify-content:center; margin: 0 0 2.6rem; flex-wrap:wrap; }
.feat-pill { font-size:.78rem; font-weight:700; padding:.5rem 1.1rem; border-radius:999px; border:1px solid var(--border); color:var(--muted); background:none; cursor:pointer; transition: all .2s; }
.feat-pill.active.customer, .feat-pill.customer:hover { background: rgba(43,120,228,0.08); color:var(--blue); border-color: rgba(43,120,228,0.25);}
.feat-pill.active.agent, .feat-pill.agent:hover { background: rgba(26,200,222,0.08); color:var(--teal-2); border-color: rgba(26,200,222,0.25);}
.feat-pill.active.all, .feat-pill.all:hover { background: var(--surface2); color:var(--text); border-color: var(--border-2); }
.feat-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:1.3rem; }
.feat-card { background: var(--surface); border:1px solid var(--border); border-radius: var(--r); padding:1.5rem; box-shadow: var(--shadow-sm); transition: all .2s; flex:1 1 300px; max-width:370px; }
.feat-ico { width:44px; height:44px; margin-bottom:1rem; }
.feat-ico img { width:100%; height:100%; display:block; }
.feat-ico-lg { width:60px; height:60px; margin-bottom:1.2rem; }
.feat-ico-lg img { width:100%; height:100%; display:block; }
.feat-card:hover { border-color: var(--border-t); box-shadow: var(--shadow-md); }
.feat-card[data-cat="customer"]:hover { background: rgba(43,120,228,0.06); border-color: rgba(43,120,228,0.3); }
.feat-card[data-cat="agent"]:hover { background: rgba(26,200,222,0.06); border-color: rgba(26,200,222,0.3); }
.feat-tag { display:inline-block; font-size:.68rem; font-weight:700; padding:.2rem .55rem; border-radius:6px; margin-bottom:.8rem; }
.feat-tag.c { background: rgba(43,120,228,0.1); color:var(--blue); }
.feat-tag.a { background: rgba(26,200,222,0.1); color:var(--teal-2); }
.feat-card h4 { font-size:.95rem; margin-bottom:.5rem; }
.feat-card p { font-size:.92rem; line-height:1.65; }
.feat-more { text-align:center; margin-top:2.6rem; }

/* ── Feature detail page (Challenge/Solution) ── */
.cs-block { background: var(--surface); border:1px solid var(--border); border-radius: var(--rl); padding:2.2rem; box-shadow: var(--shadow-sm); margin-top:1.5rem; }
.cs-block.cs-challenge { background: linear-gradient(160deg, #FFF8F8 0%, #FFFFFF 100%); border-color: rgba(239,68,68,0.15); }
.cs-block.cs-solution { background: linear-gradient(160deg, #F5F9FF 0%, #FFFFFF 100%); border-color: rgba(43,120,228,0.15); }
.blog-hero { border-radius: var(--rl); overflow:hidden; margin-bottom:2rem; box-shadow: var(--shadow-md); }
.blog-hero img { width:100%; display:block; }
.cs-layout { display:grid; grid-template-columns: 280px 1fr; gap:3rem; align-items:start; }
.cs-sidebar { display:flex; flex-direction:column; gap:1.5rem; position:sticky; top:100px; }
.cs-info-block { background: var(--surface); border:1px solid var(--border); border-radius: var(--r); padding:1.3rem; }
.cs-info-block h4 { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:.5rem; font-weight:700; }
.cs-info-block p { font-size:.92rem; font-weight:600; color:var(--text); }
.cs-info-block ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.cs-info-block li { font-size:.92rem; color:var(--text-2); line-height:1.5; padding-left:1rem; position:relative; }
.cs-info-block li::before { content:'✓'; position:absolute; left:0; color:var(--blue); font-weight:900; font-size:.75rem; }
.cs-logo-wrap { max-width:180px; margin-bottom:2rem; }
.cs-logo-wrap img { width:100%; display:block; }
@media (max-width: 900px) {
  .cs-layout { grid-template-columns: 1fr; }
  .cs-sidebar { position:static; flex-direction:row; flex-wrap:wrap; }
  .cs-info-block { flex:1 1 260px; }
}
.blog-list { margin-left:1.3rem; display:flex; flex-direction:column; gap:.6rem; }
.blog-list li { color:var(--text-2); font-size:.95rem; line-height:1.75; padding-left:.3rem; }
.blog-list li strong { color:var(--text); }
.blog-pullquote { border-left:3px solid; border-image: linear-gradient(180deg, var(--blue), var(--teal)) 1; padding:.3rem 0 .3rem 1.6rem; margin:2.2rem 0; }
.blog-pullquote p { font-size:1.25rem; font-weight:700; line-height:1.55; color:var(--text); font-style:italic; }
.res-thumb { width:100%; height:160px; overflow:hidden; }
.res-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.cs-label { display:inline-block; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:.35rem .8rem; border-radius:999px; margin-bottom:1rem; }
.cs-label.challenge { background: rgba(239,68,68,0.08); color:#C13E3E; }
.cs-label.solution { background: rgba(43,120,228,0.08); color: var(--blue); }
.cs-block h3 { font-size:1.05rem; margin-bottom:.7rem; }
.cs-block p { font-size:.94rem; line-height:1.85; }
.feature-shot { border-radius: var(--rl); overflow:hidden; border:1px solid var(--border); box-shadow: var(--shadow-lg); margin-top:2rem; }
.feature-shot img { width:100%; display:block; }

/* ── Partner band ── */
.partner-band { background: linear-gradient(135deg, var(--navy2), var(--navy3)); border-radius: 24px; padding:3.2rem 3rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; position:relative; overflow:hidden; }
.partner-band::before { content:''; position:absolute; top:-40%; right:-10%; width:400px; height:400px; background: radial-gradient(circle, rgba(43,120,228,0.35), transparent 70%); }
.partner-band h3 { color:#fff; font-size:1.5rem; margin-bottom:.7rem; position:relative; }
.partner-band p { color: rgba(255,255,255,0.65); font-size:.92rem; max-width:480px; position:relative; }
.partner-band-cta { position:relative; }

/* ── Testimonial strip ── */
.testimonial-strip { text-align:center; max-width: 720px; margin: 0 auto; }
.testimonial-strip blockquote { font-size:1.3rem; font-weight:700; color: var(--text); line-height:1.6; }
.testimonial-strip cite { display:block; margin-top:1.2rem; font-style:normal; font-size:.85rem; color: var(--muted); font-weight:600; }
.testimonial-strip a { color: var(--blue); font-weight:700; }

/* ── Compact pain/solution list ── */
.pain-compact { display:grid; grid-template-columns: 0.85fr 1.15fr; gap:3rem; align-items:center; margin-top:2.6rem; }
.pcl-list { display:flex; flex-direction:column; gap:.2rem; }
.pcl-item { display:flex; align-items:baseline; gap:.7rem; padding:.85rem 0; border-bottom:1px solid var(--border); }
.pcl-item:last-child { border-bottom:none; }
.pcl-pain { font-size:.95rem; font-weight:600; color: var(--text-2); flex:0 0 190px; }
.pcl-arrow { color: var(--teal-2); font-size:.9rem; flex-shrink:0; }
.pcl-sol { font-size:.95rem; font-weight:700; color: var(--blue); flex:1; }
/* English: stack question/answer instead of forcing a narrow aligned column — long English phrases don't fit the compact layout that works for Chinese. */
body.lang-en .pcl-item { flex-direction:column; align-items:flex-start; gap:.35rem; }
body.lang-en .pcl-pain { flex-basis:auto; }
body.lang-en .pcl-arrow { display:none; }
body.lang-en .pcl-sol::before { content:'→ '; color:var(--muted); }
.pcl-more { display:flex; align-items:center; gap:2.4rem; margin-top:1.8rem; }
.pain-visual { background: var(--navy2); border:1px solid rgba(43,120,228,0.2); border-radius: 16px; overflow:hidden; box-shadow: var(--shadow-lg); }
.pain-visual-bar { background: var(--navy3); padding:.7rem 1rem; display:flex; align-items:center; gap:.4rem; border-bottom:1px solid rgba(255,255,255,0.06); }
.pain-visual-bar span:last-child { margin-left:.6rem; font-size:.72rem; color: rgba(255,255,255,0.5); }
.pain-visual img { width:100%; display:block; }

/* ── Footer ── */
footer { background: var(--navy); padding: 4rem 0 2rem; }
.footer-grid { display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom: 2.6rem; border-bottom:1px solid rgba(255,255,255,0.08); }
.footer-brand img { height:28px; margin-bottom:1rem; }
.footer-brand p { color: rgba(255,255,255,0.45); font-size:.8rem; line-height:1.8; max-width:280px; }
.footer-col h5 { color:#fff; font-size:.8rem; font-weight:700; margin-bottom:1rem; letter-spacing:.02em; }
.footer-col a, .footer-col span { display:block; color: rgba(255,255,255,0.5); font-size:.82rem; margin-bottom:.65rem; }
.footer-col a:hover { color: var(--teal); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:1.8rem; flex-wrap:wrap; gap:1rem; }
.footer-bottom p { color: rgba(255,255,255,0.35); font-size:.76rem; }
.footer-bottom a { color: rgba(255,255,255,0.35); font-size:.76rem; }
.footer-bottom a:hover { color: rgba(255,255,255,0.6); }

.fade-up{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;}
.fade-up.visible{opacity:1;transform:translateY(0);}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .nav-links { display:none; }
  .nav-burger { display:flex; }
  .pain-card, .vp-card, .platform-callout, .feat-card, .role-card { flex-basis: 45%; max-width: none; }
  .tab-panel.active { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .tabs-nav { flex-wrap:wrap; justify-content:center; }
  .pain-compact { grid-template-columns: 1fr; gap: 1.8rem; }
}
@media (max-width: 700px) {
  section.section { padding: 3.5rem 0; }
  #hero { padding: 3rem 0 2.5rem; }
  .page-banner { padding: 1.8rem 0 2.4rem; }
  .hero-ctas { flex-direction:column; align-items:stretch; }
  .hero-ctas .btn { width:100%; justify-content:center; }
  .partner-band { flex-direction:column; text-align:center; padding:2.2rem 1.6rem; }
  .platform-link-card { flex-direction:column; text-align:center; padding:1.6rem; }
  .tabs-nav { width:100%; }
  .tab-btn { flex:1; padding:.6rem .5rem; font-size:.78rem; }
  .pcl-more { flex-direction:column; align-items:flex-start; gap:1rem; }
  .pcl-item { flex-wrap:wrap; }
  .pcl-pain { flex-basis:100%; }
  body.lang-en .pcl-pain { flex-basis:100%; }
}
@media (max-width: 560px) {
  .pain-card, .vp-card, .platform-callout, .feat-card, .role-card { flex-basis: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .logos-row { gap:1.4rem; }
  .container { padding: 0 1.3rem; }
  .nav-inner { padding: 0 1.3rem; }
  .dash-stats { grid-template-columns: 1fr 1fr 1fr; }
  .dsn { font-size:1.05rem; }
}