/* ME PHONE — 版式与配色令牌 */

:root{
  --ink:      #0E2E29;
  --teal:     #1F5E54;
  --marigold: #E8A33D;
  --mist:     #EFF3F1;
  --paper:    #FFFFFF;
  --grey:     #5A6C67;
  --line:     #DCE5E2;

  --w: 1200px;
  --r: 16px;
}

/* ---------- 语言切换（纯 CSS） ---------- */
html[data-lang="th"] .L:not(.th),
html[data-lang="zh"] .L:not(.zh),
html[data-lang="en"] .L:not(.en){ display:none !important; }

html[data-lang="th"]{ --stack:"Noto Sans Thai Looped","IBM Plex Sans",sans-serif; --lh:1.9; --hlh:1.45; --htrk:0; }
html[data-lang="zh"]{ --stack:"IBM Plex Sans","Noto Sans SC",sans-serif;   --lh:1.8; --hlh:1.3;  --htrk:-.01em; }
html[data-lang="en"]{ --stack:"IBM Plex Sans",sans-serif;                  --lh:1.65; --hlh:1.06; --htrk:-.03em; }
html[data-lang="zh"] h1,html[data-lang="zh"] h2,html[data-lang="zh"] h3{ font-weight:700; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--stack); font-size:17.5px; line-height:var(--lh);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{ max-width:var(--w); margin:0 auto; padding:0 28px; }
a{ color:var(--teal); text-decoration:none; }
a:hover{ text-decoration:underline; }
:focus-visible{ outline:3px solid var(--marigold); outline-offset:3px; }

h1,h2,h3{ margin:0 0 .45em; line-height:var(--hlh); letter-spacing:var(--htrk); font-weight:600; }
h1{ font-size:clamp(38px,6.2vw,66px); }
h2{ font-size:clamp(28px,3.9vw,42px); }
h3{ font-size:21px; letter-spacing:0; line-height:1.35; }
p{ margin:0 0 1.05em; max-width:60ch; }
.lede{ font-size:clamp(18px,2.1vw,21px); color:var(--grey); max-width:52ch; }
.muted{ color:var(--grey); font-size:15px; }
ul{ padding-inline-start:20px; }
li{ margin-bottom:.55em; }

/* ---------- 头部 ---------- */
header{ position:sticky; top:0; z-index:40; background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.bar{ display:flex; align-items:center; gap:30px; height:74px; }
.brand{ display:flex; align-items:center; gap:11px; color:var(--ink); font-weight:600;
  font-size:19px; letter-spacing:.06em; white-space:nowrap;
  font-family:"IBM Plex Sans",sans-serif; }
.brand:hover{ text-decoration:none; }
nav.main{ display:flex; gap:30px; margin-inline-start:auto; font-size:15.5px; }
nav.main a{ color:var(--ink); opacity:.72; padding:4px 0; }
nav.main a:hover{ opacity:1; text-decoration:none; }
nav.main a[aria-current]{ opacity:1; box-shadow:inset 0 -2px 0 var(--marigold); }
.langs{ display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.langs button{ font-family:"IBM Plex Sans",sans-serif; font-size:13px; padding:6px 12px;
  border:0; background:none; color:var(--grey); cursor:pointer; white-space:nowrap; }
.langs button[aria-pressed="true"]{ background:var(--ink); color:#fff; }
/* 中文默认隐藏：网址加 ?lang=zh，或连点三下左上角标志解锁 */
.langs button.zh-only{ display:none; }
html[data-zh="on"] .langs button.zh-only{ display:block; }
.burger{ display:none; border:1px solid var(--line); background:none; border-radius:10px;
  padding:9px 12px; cursor:pointer; font-size:15px; }

/* ---------- 按钮 ---------- */
.btn{ display:inline-block; padding:15px 30px; border-radius:999px; font-weight:600;
  font-size:17px; border:1.5px solid transparent; cursor:pointer; font-family:inherit;
  line-height:1.3; }
.btn:hover{ text-decoration:none; }
.btn-p{ background:var(--marigold); color:var(--ink); }
.btn-p:hover{ background:#d5941e; }
.btn-s{ border-color:var(--ink); color:var(--ink); }
.btn-s:hover{ background:var(--ink); color:#fff; }
.btn-g{ border-color:var(--marigold); color:var(--marigold); background:none; }
.btn-g:hover{ background:var(--marigold); color:var(--ink); }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }

/* ---------- 区块 ---------- */
section{ padding:104px 0; }
section.tint{ background:var(--mist); }
section.dark{ background:var(--ink); color:#fff; }
section.dark h2,section.dark h3{ color:#fff; }
section.dark p,section.dark li{ color:#C2D3CF; }
section.dark a:not(.btn){ color:var(--marigold); }
section.dark .btn-p{ color:var(--ink); }
section.dark .btn-g{ color:var(--marigold); }
section.dark .muted{ color:#8FA9A4; }
.head{ margin-bottom:56px; }
.head h1,.head h2{ max-width:18ch; }
html[data-lang="zh"] .head h1,html[data-lang="zh"] .head h2{ max-width:24ch; }
html[data-lang="th"] .head h1,html[data-lang="th"] .head h2{ max-width:26ch; }

/* ---------- 首屏 ---------- */
.hero{ padding:64px 0 96px; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:72px; align-items:center; }
.hero h1{ max-width:13ch; margin-bottom:.35em; }
html[data-lang="th"] .hero h1{ max-width:19ch; }

/* ---------- 实时动态（原计算器位置） ---------- */
.livecard{ background:var(--ink); border-radius:var(--r); padding:36px 30px; color:#fff; }
.livehead{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.livehead h3{ font-size:15px; font-weight:500; color:#93AFA9;
  letter-spacing:.04em; margin:0; }
.pulse{ width:8px; height:8px; border-radius:50%; background:#4BD07F;
  box-shadow:0 0 0 0 rgba(75,208,127,.55); animation:pulse 2.2s ease-out infinite; }
@keyframes pulse{
  0%  { box-shadow:0 0 0 0   rgba(75,208,127,.55); }
  70% { box-shadow:0 0 0 9px rgba(75,208,127,0); }
  100%{ box-shadow:0 0 0 0   rgba(75,208,127,0); }
}

/* 上下渐隐：用遮罩，不用叠色块，这样换背景也不用改 */
.feed{ position:relative; height:340px; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%); }
/* 滚动交给 JS 用实测像素推进，不用 CSS 百分比动画：
   1) translateY(-50%) 的 50% 是按整条轨道算的，字体加载完、
      行高变化后和「一份内容的高度」对不上，就接不回开头，露出空白；
   2) 以前写了 .feed:hover 暂停，iOS 上点一下卡片 :hover 会一直粘着，
      导致永久停住。所以这里不再用 hover。 */
.feedtrack{ will-change:transform; }

.fr{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 2px; border-bottom:1px solid #1D4842; }
.fn{ font-size:16px; font-weight:600; letter-spacing:.3px; white-space:nowrap; }
.fs{ display:flex; align-items:center; gap:8px; flex:0 0 auto;
  font-size:13px; color:#93AFA9; white-space:nowrap; }
.fs::before{ content:""; flex:0 0 7px; width:7px; height:7px; border-radius:50%;
  background:#93AFA9; }
.fs.s-line::before{ background:#4BD07F; box-shadow:0 0 0 3px rgba(75,208,127,.16); }
.fs.s-call::before{ background:var(--marigold); box-shadow:0 0 0 3px rgba(232,163,61,.16); }
.fs.s-pick::before{ background:#FFFFFF; box-shadow:0 0 0 3px rgba(255,255,255,.14); }
.livecard .note{ font-size:13.5px; color:#7E9B95; margin:20px 0 0; line-height:1.6; }

@media (prefers-reduced-motion:reduce){
  .pulse{ animation:none; }
}

/* ---------- LINE 二维码 ---------- */
.qrbox{ margin-top:26px; padding:20px; background:var(--mist); border-radius:var(--r);
  display:flex; gap:20px; align-items:flex-start; }
.qrbox img{ flex:0 0 132px; width:132px; height:132px; border-radius:8px;
  background:#fff; padding:6px; }
.qrtxt{ font-size:15px; font-weight:600; color:var(--ink); line-height:1.5; }
.qrtxt .muted{ font-size:13.5px; font-weight:400; color:var(--grey);
  margin:8px 0 0; line-height:1.65; }
@media (max-width:820px){
  .qrbox{ flex-direction:column; align-items:center; text-align:center; gap:14px; }
  .qrbox img{ flex:0 0 150px; width:150px; height:150px; }
}

/* ---------- 图片 ---------- */
img{ max-width:100%; height:auto; display:block; }

/* ---------- 首屏轮播 ---------- */
.band{ margin:0; position:relative; }
.slides{ position:relative; height:clamp(250px,40vw,540px); }
.band .sl{ position:absolute; inset:0; margin:0; opacity:0; transition:opacity .8s ease;
  pointer-events:none; }
.band .sl.on{ opacity:1; pointer-events:auto; }
.band img{ width:100%; height:100%; object-fit:cover; object-position:center 58%; display:block; }
.band .sl:nth-child(2) img{ object-position:center 30%; }
.band .sl:nth-child(3) img{ object-position:center 45%; }
.slide-cta{ position:absolute; left:50%; transform:translateX(-50%); bottom:34px;
  box-shadow:0 6px 24px rgba(0,0,0,.3); white-space:nowrap; }
/* 底部压一层渐变，圆点和按钮在浅色照片上才看得清 */
.band::after{ content:""; position:absolute; inset:auto 0 0 0; height:130px; pointer-events:none;
  background:linear-gradient(to top, rgba(8,30,26,.45), rgba(8,30,26,0)); }
.slide-cta{ z-index:2; }
.dots{ position:absolute; left:0; right:0; bottom:14px; z-index:2;
  display:flex; justify-content:center; gap:9px; }
.dots button{ width:9px; height:9px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.65); box-shadow:0 1px 3px rgba(0,0,0,.45);
  transition:background .3s, width .3s; }
.dots button[aria-selected="true"]{ background:var(--marigold); width:26px; border-radius:99px; }
@media (prefers-reduced-motion:reduce){ .band .sl{ transition:none } }

.shot{ width:100%; aspect-ratio:16/9; object-fit:contain; background:#F3F6F2;
  border-radius:12px; margin-bottom:22px; }

.maprow{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; }
.mapimg{ width:100%; border-radius:var(--r); }
.maprow .stat{ margin-bottom:28px; }
.maprow .stat p{ max-width:none; }

/* ---------- 网格 ---------- */
.grid{ display:grid; gap:56px 48px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }

/* 要点：不再用卡片框，用字号和留白拉开层级 */
.point h3{ margin-bottom:.5em; }
.point h3::before{ content:""; display:block; width:26px; height:3px;
  background:var(--marigold); margin-bottom:18px; }
.point .ico{ width:100%; max-width:520px; height:auto; margin-bottom:26px; display:block; }
.point .ico + h3::before{ display:none; }
.point p{ margin:0; font-size:16px; color:var(--grey); }
section.dark .point p{ color:#A9C0BB; }

/* 步骤 */
.step .n{ font-family:"IBM Plex Sans",sans-serif; font-size:13px; font-weight:600;
  color:var(--marigold); letter-spacing:.14em; display:block; margin-bottom:14px; }
.step h3{ margin-bottom:.45em; }
.step p{ font-size:16px; color:var(--grey); margin:0; }

/* 大数字 */
.statgrid{ gap:52px 64px; }
.statgrid ~ p{ margin-top:40px; }
.stat .ico{ height:78px; width:auto; margin-bottom:20px; display:block; }
section.dark .statgrid .num{ font-size:clamp(38px,4.6vw,54px); }
@media (max-width:960px){ .stat .ico{ height:62px; margin-bottom:16px; } }
.statrow{ display:grid; grid-template-columns:minmax(260px,.8fr) 1.2fr; gap:48px; align-items:start; }
.statnote,p.statnote{ font-size:17px; color:var(--grey); max-width:46ch; margin:0; }
@media (max-width:960px){ .statrow{ grid-template-columns:1fr; gap:28px; } }
.stat .num{ font-family:"IBM Plex Sans",sans-serif; font-size:clamp(46px,6vw,68px);
  font-weight:600; letter-spacing:-.03em; line-height:1; display:block; margin-bottom:16px; }
section.dark .stat .num{ color:var(--marigold); }
.stat p{ margin:0; font-size:16px; color:var(--grey); max-width:26ch; }
section.dark .stat p{ color:#A9C0BB; }

/* ---------- 滚动渐现 ---------- */
.reveal{ opacity:0; transform:translateY(20px); }
.reveal.in{ opacity:1; transform:none;
  transition:opacity .65s ease, transform .65s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion:reduce){ .reveal,.reveal.in{ opacity:1; transform:none; transition:none; } }

/* ---------- 翻页计数器 ---------- */
.counter-sec{ padding:48px 0 52px; }
.cmeta{ display:flex; align-items:center; gap:16px; font-size:15px; color:#9FBAB4;
  letter-spacing:.05em; margin-bottom:16px; }
.cmeta .dot{ width:9px; height:9px; border-radius:50%; background:var(--marigold);
  animation:ping 2.2s ease-out infinite; flex:0 0 auto; }
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(232,163,61,.65) }
  70%{ box-shadow:0 0 0 13px rgba(232,163,61,0) }
  100%{ box-shadow:0 0 0 0 rgba(232,163,61,0) } }

.odo{ display:flex; gap:7px; }
.odo .d{
  display:flex; align-items:center; justify-content:center;
  width:clamp(46px,8.6vw,78px); height:clamp(62px,11.4vw,102px);
  background:var(--marigold); color:#10312C; border-radius:10px;
  font-family:"IBM Plex Sans",sans-serif; font-weight:600;
  font-size:clamp(38px,7vw,64px); line-height:1; letter-spacing:-.02em;
  position:relative; transform-style:preserve-3d;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
/* 翻页卡中缝 */
.odo .d::after{
  content:""; position:absolute; inset-inline:0; top:50%;
  border-top:1px solid rgba(16,49,44,.28); }
.odo .d.sep{
  width:auto; min-width:16px; background:none; color:var(--marigold);
  box-shadow:none; align-items:flex-end; padding-bottom:.12em; }
.odo .d.sep::after{ display:none; }
.odo .d.flip{ animation:flip .18s ease-in-out; }
@keyframes flip{
  0%  { transform:perspective(340px) rotateX(0deg) }
  49% { transform:perspective(340px) rotateX(-88deg) }
  50% { transform:perspective(340px) rotateX(88deg) }
  100%{ transform:perspective(340px) rotateX(0deg) } }

.clabel{ margin-top:20px; font-size:18px; color:#D6E4E0; max-width:40ch; }
@media (max-width:960px){
  .counter-sec{ padding:36px 0 40px; }
  .odo{ gap:6px; }
  .clabel{ font-size:16px; margin-top:15px; }
}

/* ---------- 表格 ---------- */
table{ width:100%; border-collapse:collapse; font-size:16px; }
th,td{ text-align:start; padding:17px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
th{ font-weight:500; font-size:14px; color:var(--grey); letter-spacing:.02em; }
tbody td:first-child{ font-weight:600; }
td.num{ font-family:"IBM Plex Sans",sans-serif; font-size:17px; }

/* ---------- FAQ ---------- */
details{ border-bottom:1px solid var(--line); padding:22px 0; }
summary{ cursor:pointer; font-weight:600; font-size:18px; list-style:none;
  display:flex; gap:16px; line-height:1.45; }
summary::-webkit-details-marker{ display:none; }
summary::before{ content:"+"; color:var(--marigold); font-weight:600; flex:0 0 auto; }
details[open] summary::before{ content:"–"; }
details p{ margin:14px 0 0 30px; color:var(--grey); font-size:16.5px; }

/* ---------- 表单 ---------- */
form.inquiry{ background:var(--mist); border-radius:var(--r); padding:36px; }
section.tint form.inquiry{ background:#fff; }
label{ display:block; font-size:14.5px; font-weight:600; margin:22px 0 8px; }
form.inquiry > label:first-of-type{ margin-top:0; }
input[type=text],input[type=tel],select,textarea{
  width:100%; padding:14px 15px; border:1px solid var(--line); border-radius:10px;
  font:inherit; font-size:16px; background:#fff; color:var(--ink); font-family:inherit; }
textarea{ min-height:96px; resize:vertical; }
.consent{ display:flex; gap:12px; align-items:flex-start; margin:26px 0 0;
  font-size:14.5px; color:var(--grey); line-height:1.6; }
.consent input{ margin-top:5px; flex:0 0 auto; }
.formnote{ margin-top:20px; padding:15px; border-radius:10px; background:#fff;
  border:1px solid var(--line); font-size:15.5px; display:none; }
.formnote.on{ display:block; }

/* ---------- 联系信息 ---------- */
.ctl{ list-style:none; padding:0; margin:0; }
.ctl li{ padding:18px 0; border-bottom:1px solid var(--line); margin:0; }
.ctl li:first-child{ padding-top:0; }
.ctl .k{ font-size:13.5px; color:var(--grey); margin-bottom:3px; }
.ctl .v{ font-size:20px; font-weight:600; font-family:"IBM Plex Sans",sans-serif; }

.callout{ margin-top:36px; padding:28px; border:1px solid var(--line); border-radius:var(--r); }
.callout h3{ margin-bottom:.45em; }
.callout p{ font-size:16px; color:var(--grey); }

/* ---------- 页脚 ---------- */
footer{ background:var(--ink); color:#9DB7B2; padding:72px 0 40px; font-size:15.5px; }
footer a{ color:#D3E2DE; }
.fgrid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:48px; }
footer h4{ color:#fff; font-size:15px; margin:0 0 16px; font-weight:600; }
footer ul{ list-style:none; padding:0; margin:0; }
footer li{ margin-bottom:11px; }
.legal{ margin-top:52px; padding-top:24px; border-top:1px solid #214E47;
  font-size:13px; color:#76938D; }

/* ---------- 正文页 ---------- */
.narrow{ max-width:840px; }
.prose h2{ font-size:25px; margin-top:52px; }
.prose li{ color:var(--grey); }

/* ---------- 响应式 ---------- */
@media (max-width:960px){
  .hero-grid,.g4,.g3,.g2,.fgrid{ grid-template-columns:1fr; }
  .grid{ gap:42px; }
  nav.main{ display:none; position:absolute; top:74px; inset-inline:0; background:#fff;
    flex-direction:column; gap:0; padding:8px 28px 20px; border-bottom:1px solid var(--line); }
  nav.main.open{ display:flex; }
  nav.main a{ padding:15px 0; border-bottom:1px solid var(--line); }
  .burger{ display:block; margin-inline-start:auto; order:2; }
  .langs{ order:3; }
  section{ padding:68px 0; }
  .head{ margin-bottom:40px; }
  .maprow,.statrow{ grid-template-columns:1fr; gap:30px; }
  .maprow .stat{ margin-bottom:20px; }
  .stat .num{ margin-bottom:10px; }
  .hero{ padding:40px 0 56px; }
  .bar{ gap:12px; height:64px; }
  .brand{ font-size:17px; }
  .langs button{ font-size:12px; padding:6px 9px; }
  .livecard{ padding:26px 22px; }
  .feed{ height:300px; }
  .fr{ flex-direction:column; align-items:flex-start; gap:6px; padding:12px 2px; }
  .fn{ font-size:15.5px; }
  form.inquiry{ padding:26px 22px; }
  .wrap{ padding:0 22px; }
  .band figcaption{ padding:16px 22px 0; }
  .shot{ margin-bottom:18px; }
  .slide-cta{ bottom:42px; font-size:15px; padding:12px 22px; }
  .dots{ bottom:16px; }
  .point .ico{ margin-bottom:20px; }
}