:root{
  /* Color & layout tokens */
  --bg:#f7f8fa; --surface:#fff; --text:#0f1115; --muted:#5b616b; --line:#e7e8ec;
  --brand:#111; --accent:#3678f6; --cta:#111; --ctaText:#fff;
  --max:1200px; --nav-h:64px; --radius:18px; --shadow:0 12px 32px rgba(15,17,21,.10);
}

/* Dark scheme overrides */
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0d0f12; --surface:#1b1d21; --text:#f5f6f7; --muted:#c4c8cc; --line:#2a2e34;
    --brand:#ffffff; --accent:#5b8dff;
  }
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: ui-sans-serif,-apple-system,Inter,Segoe UI,Roboto,Helvetica,Arial,"PingFang SC","Noto Sans",sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; flex-direction:column;
}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 clamp(16px,4vw,28px)}
/* 页面内容与导航拉开距离 */
main .container{ margin-top:32px; }   /* 或者 margin:32px auto 0; */

/* 防止 header/footer 被影响（可选加稳） */
header .container,
footer .container {
  margin: 0 auto; /* 去掉32px上下margin */
  padding: 0 clamp(16px, 4vw, 28px); /* 正常左右留白 */
}
/* ===== Nav ===== */
.nav{
  background: color-mix(in oklab, #fff 86%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--line) 80%, transparent);
  backdrop-filter: saturate(1.1) blur(8px);
  z-index:100;
}
.nav .row{height:var(--nav-h); display:flex; align-items:center; justify-content:space-between}
.brand{font-weight:900; font-size:clamp(18px,2.1vw,22px); color:var(--brand)}
.menu{display:flex; gap:22px; align-items:center}
.menu a{
  color:var(--muted); font-weight:620; font-size:clamp(14px,1.4vw,17px);
  padding:6px 8px; border-radius:10px; transition:.2s ease;
}
.menu a:hover{color:var(--accent); background:color-mix(in oklab, var(--line) 22%, transparent)}
.menu a:first-child{
  font-weight:800; padding:8px 12px; border:1px solid var(--line); border-radius:12px;
  background:color-mix(in oklab, var(--surface) 92%, transparent)
}
.menu a:first-child:hover{background:var(--accent); color:#fff; border-color:var(--accent)}

/* Hamburger */
.hamburger{
  display:none; position:relative; width:40px; height:40px; cursor:pointer;
  border:1px solid color-mix(in oklab, var(--line) 86%, transparent);
  background:color-mix(in oklab, var(--surface) 96%, transparent);
  border-radius:10px; color: var(--brand);
  z-index:110;
}
.hamburger .bar, .hamburger .bar::before, .hamburger .bar::after{
  content:""; position:absolute; left:50%; width:20px; height:2px;
  background: currentColor; transform:translateX(-50%);
}
.hamburger .bar{ top:50%; transform:translate(-50%,-50%) }
.hamburger .bar::before{ top:-6px } .hamburger .bar::after{ top:6px }

/* Mobile menu panel & backdrop */
.nav-backdrop{
  position:fixed; inset:var(--nav-h) 0 0 0; background:rgba(0,0,0,.28);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:30;
}
.nav-backdrop.show{opacity:1; pointer-events:auto}

@media (max-width:980px){
  .hamburger{display:block}
  .menu{
    position:fixed; left:0; right:0; top:var(--nav-h);
    flex-direction:column; gap:8px; background:var(--surface);
    padding:14px 16px 16px;
    border-bottom:1px solid color-mix(in oklab, var(--line) 92%, transparent);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease; z-index:105;
  }
  .menu.open{transform:none; opacity:1; pointer-events:auto}
  body.nav-open{overflow:hidden}
}

/* Dark nav/footer tweaks */
@media (prefers-color-scheme:dark){
  .nav{ background:color-mix(in oklab,#0b0d11 86%,transparent); border-bottom:1px solid #2a2e34; }
  .hamburger{ color:#fff; background:color-mix(in oklab, #1b1d21 96%, transparent); border-color:#2a2e34; }
}

/* ===== Main / Hero ===== */
main{flex:1}
.hero{padding: clamp(64px, 10vh, 120px) 0 clamp(28px,6vw,48px);}
.wrap{
  display:grid; gap:clamp(18px,4vw,44px);
  grid-template-columns:1.05fr .95fr; align-items:start;
  position: relative; /* for live-quote anchor */
}
@media (max-width:980px){ .hero{display:none} } /* hide desktop hero on mobile */

.hero-left{max-width:640px}
.hero-left h1{
  font-size: clamp(40px, 6vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0 0 50px;
  color: var(--brand);
}
.subline{
  font-size: clamp(16px, 2vw, 18px);
  color: var(--muted);
  margin: 0 0 18px;
  max-width: 50ch;
}

/* Callout */
.badge-callout{
  display:flex; align-items:flex-start; gap:16px;
  border:1px solid color-mix(in oklab, var(--line) 90%, transparent);
  border-radius:18px; padding:clamp(14px,1.8vw,18px);
  background: linear-gradient(180deg,
            color-mix(in oklab, var(--surface) 100%, transparent) 0%,
            color-mix(in oklab, var(--surface) 96%, transparent) 100%);
  box-shadow:var(--shadow); margin:10px 0 12px;
}
.badge-title{
  font-weight:900; font-size:clamp(18px,2.2vw,22px); margin-bottom:10px; position:relative; display:inline-block;
}
.badge-title::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px; border-radius:2px;
  background:color-mix(in oklab, var(--accent) 70%, transparent);
}
.callout-list{list-style:none; padding:0; margin:12px 0 0; display:grid; gap:10px; font-size:clamp(14px,1.6vw,16px)}
.callout-list li{line-height:1.5; color:#444}
.callout-footer{display:flex; align-items:center; gap:12px; margin-top:14px}
.callout-footer .store{height:48px}

/* Right screenshots (desktop carousel) */
.right-col{ align-self: start; }         /* align to top */
.phones{ position:relative; max-width:460px; height:clamp(420px,70vh,680px); margin-left:auto; }
.frame{ height:100%; border-radius:24px; overflow:hidden; filter:drop-shadow(0 10px 26px rgba(0,0,0,.18)); background:transparent; }
.frame picture,.frame img{width:100%; height:100%; object-fit:contain; background:transparent}

.arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%;
  border:1px solid color-mix(in oklab, var(--line) 86%, transparent);
  background:color-mix(in oklab, var(--surface) 96%, transparent);
  box-shadow:0 8px 22px rgba(0,0,0,.12); cursor:pointer; z-index:3;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  color: var(--text);
}
.arrow.prev{left:-18px} .arrow.next{right:-18px}
.arrow:hover{background:var(--accent); border-color:var(--accent); color:#fff}
.dots{margin-top:10px; display:flex; gap:8px; justify-content:center}
.dot{width:8px; height:8px; border-radius:50%; background:#cfd3da}
.dot.active{background:var(--accent)}
.mobile-extra{display:none}

/* ===== Mobile: visual (slides) ===== */
.m-visual{display:none}
@media (max-width:980px){
  .m-visual{display:block; padding:8px 0 0}
  .m-visual .m-phones{ position:relative; height:min(72vh, 640px); max-height:72vh; margin:0 auto; overflow:hidden; }
  .m-visual .slide{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    transition:opacity .32s ease; background:transparent; border-radius:0; box-shadow:none;
  }
  .m-visual picture,.m-visual img{width:100%; height:100%; object-fit:contain}
  .m-visual .m-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    z-index:2; width:42px; height:42px; border-radius:50%;
    border:1px solid color-mix(in oklab, var(--line) 86%, transparent);
    background:color-mix(in oklab, var(--surface) 96%, transparent);
    box-shadow:0 8px 22px rgba(0,0,0,.12); cursor:pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
    color: var(--text);
  }
  .m-visual .m-arrow:hover{ background:var(--accent); border-color:var(--accent); color:#fff }
  .m-visual .m-prev{ left:10px } .m-visual .m-next{ right:10px }
  .m-visual .m-dots{ position:absolute; left:0; right:0; bottom:8px; display:flex; gap:8px; justify-content:center; }
  .m-visual .m-dot{width:8px; height:8px; border-radius:50%; background:#cfd3da}
  .m-visual .m-dot.active{background:var(--accent)}
}

/* ===== Mobile: copy section ===== */
.m-copy{display:none}
@media (max-width:980px){
  .m-copy{display:block; padding: 18px 0 28px}
  .m-copy .inner{max-width:700px; margin:0 auto; padding:0 16px}
  .m-copy h1{font-size:clamp(28px,7.4vw,40px); line-height:1.12; margin:.2em 0 .25em; text-align:center}
  .m-copy .subline{text-align:center; margin-bottom:12px}
  .m-copy .badge-callout{flex-direction:column; align-items:center; text-align:left}
  .m-copy .callout-footer{justify-content:center}
  .m-copy .callout-list strong{color:var(--accent)}
}

/* ===== Live quote (minimal) ===== */
.slogan{ color:#374151; font-weight:700; }
.slogan .highlight{ color:#6366f1; font-weight:900; }
@media (prefers-color-scheme:dark){ .slogan .highlight{ color:#a78bfa; } }

.live-quote{
  position:absolute; left: clamp(16px, 4vw, 28px); bottom: 160px;
  max-width: 440px; padding-left: 14px; color:#374151; line-height:1.45;
}
.live-quote::before{
  content:""; position:absolute; left:0; bottom:0; width:3px; height:calc(100% - 8px);
  border-radius:3px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 90%, transparent),
                                      color-mix(in oklab, var(--accent) 60%, transparent));
}
.lq-head{ display:flex; align-items:center; gap:10px; margin-bottom:4px; font-weight:800; color:var(--brand); }
.lq-text{
  position:relative; font-size:15px; color: color-mix(in oklab, var(--text) 78%, var(--bg) 22%); font-weight:500;
  padding-left:22px;
}
.lq-text::before{
  content:"“"; position:absolute; left:0; top:-6px; font-size:32px; line-height:1;
  color: color-mix(in oklab, var(--accent) 70%, transparent); transform: translateY(2px);
}
@media (max-width:980px){ .live-quote{ display:none; } }

/* ===== Footer ===== */
footer{
  margin-top:clamp(12px,4vw,36px);
  background:color-mix(in oklab,#fff 92%,transparent);
  border-top:1px solid color-mix(in oklab, var(--line) 92%, transparent);
  color:var(--muted); padding: 26px 0 34px;
}
.foot{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:clamp(13px,1.3vw,15px)}
.foot a{transition:color .2s ease}
.foot a:hover{color:var(--accent)}
@media (prefers-color-scheme:dark){
  footer{ background:color-mix(in oklab,#101318 86%,transparent); border-top:1px solid #2a2e34; }
}

/* ===== Minor desktop polish ===== */
@media (min-width: 981px){
  .phones{ margin-top: -12px; }
}

/* ===== Readability tweaks in dark ===== */
@media (prefers-color-scheme:dark){
  .callout-list li{ color: color-mix(in oklab, var(--text) 78%, var(--bg) 22%); }
}

/* ===== Blog scoped styles ===== */
:root{
  /* blog用到的链接变量，沿用品牌色 */
  --link: var(--accent);
  --link-hover: color-mix(in oklab, var(--accent) 86%, #000 14%);
}

/* 仅作用于 .blog 作用域，避免影响全站 */
/* ===== Blog list (scoped) ===== */
.blog .lang{font-size:14px; color:var(--muted); margin-bottom:10px}
.blog .lang a{color:var(--accent); margin-left:.25rem}
.blog .lang a:hover{color:color-mix(in oklab,var(--accent) 86%, #000 14%)}

.blog .list{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}
@media (min-width:900px){
  .blog .list{ grid-template-columns: 1fr 1fr; } /* 桌面两列，手机一列 */
}

.blog .item{
  background:var(--surface);
  border:1px solid color-mix(in oklab, var(--line) 86%, transparent);
  border-radius:16px;
  padding:18px 18px 16px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.blog .item:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--line) 60%, transparent);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

.blog .item h2{
  margin:0 0 8px;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height:1.35;
  letter-spacing:-.01em;
}
.blog .item h2 a{ color:var(--brand); }
.blog .item h2 a:hover{ color:var(--accent); }

.blog .meta{
  font-size:13px; color:var(--muted);
  display:flex; gap:10px; align-items:center; margin-bottom:8px;
}

.blog .excerpt{
  margin:0; color: color-mix(in oklab, var(--text) 80%, var(--bg) 20%);
  font-size:15px; line-height:1.55;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; /* 最多三行 */
}

.blog .empty{padding:32px; text-align:center; color:var(--muted)}

/* 分页 */
.blog .pagination{
  display:flex; gap:8px; align-items:center; justify-content:center; margin:20px 0 10px;
}
.blog .page-link{
  padding:8px 12px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); color:var(--text);
}
.blog .page-link:hover{ border-color: color-mix(in oklab, var(--line) 60%, transparent); }
.blog .page-link.current{ background:var(--brand); color:#fff; border-color:var(--brand); }
.blog .page-link.disabled{ opacity:.45; pointer-events:none; }

/* ===== Compact header/footer on phones ===== */
@media (max-width: 768px) {
  /* 1) 缩小移动端导航高度 */
  :root { --nav-h: 52px; }               /* 64px → 52px 更紧凑 */

  /* 2) 保证 header/footer 的容器没有额外上下间距 */
  header .container,
  footer .container { padding: 0 16px; margin: 0 auto; }

  /* 3) 缩小汉堡按钮尺寸，跟随更矮的导航 */
  .hamburger { width: 34px; height: 34px; }

  /* 4) 移动端下拉菜单贴合新的导航高度与更紧凑的内边距 */
  .menu { top: var(--nav-h); padding: 12px 14px 14px; }

  /* 5) 页面正文与导航的间距：32px → 16px */
  main .container { margin-top: 16px; }

  /* 6) 页脚也稍微压紧 */
  footer { padding: 16px 0 20px; }
  .foot { gap: 12px; }
}

/* （可选）压一压博客标题与正文字号，避免手机上卡片显得“头重” */
@media (max-width: 768px) {
  .blog .item h2 { font-size: clamp(18px, 5.2vw, 20px); }
  .blog .excerpt { font-size: 14px; }
}

/* ===== Contact simple page ===== */
.contact {
   max-width: clamp(760px, 70%, 1000px); /* 手机仍然窄，PC 可以放宽到 1000px */
  margin: 40px auto;
  padding: 0 18px;
  line-height: 1.7;
  color: color-mix(in oklab, var(--text) 88%, var(--bg) 12%);
}

.contact h1 {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 900;
  margin-bottom: 20px;
  color: var(--brand);
  text-align: center;
}

.contact p {
  margin: 0 0 18px;
  font-size: 16px;
}

.contact a {
  color: var(--accent);
  text-decoration: none;
}
.contact a:hover {
  text-decoration: underline;
}

.contact .store {
  margin-top: 20px;
  height: 52px;
  display: block;
}
.contact .store:hover {
  transform: scale(1.03);
  transition: transform .2s ease;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.15));
}