/* ============================================================
   zh-chrome-google-com.hl.cn — V2 Complete Redesign
   Theme: Warm neutral + accent blue, magazine-style blocks
   ============================================================ */

/* === Reset === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;color:#292524;background:#fafaf9;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit}
img{max-width:100%;display:block}
ul,ol{list-style:none}

@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes slideIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* === Layout === */
.container{max-width:1100px;margin:0 auto;padding:0 28px}

/* ============ NAVIGATION — horizontal top bar ============ */
.site-nav{
  position:sticky;top:0;z-index:200;
  background:#292524;
  color:#fafaf9;
}
.nav-bar{
  display:flex;align-items:center;justify-content:space-between;
  height:56px;
}
.nav-logo{
  display:flex;align-items:center;gap:10px;
  font-weight:800;font-size:15px;letter-spacing:.3px;
  color:#fafaf9;
}
.nav-logo svg{flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  display:inline-block;padding:7px 18px;border-radius:6px;
  font-size:13.5px;font-weight:600;color:#a8a29e;
  transition:all .2s;
}
.nav-links a:hover{color:#fafaf9;background:rgba(255,255,255,.08)}
.nav-links a.on{color:#fafaf9;background:#1a73e8}
.nav-burger{display:none;background:none;border:none;color:#fafaf9;padding:4px}
.mob-menu{display:none;flex-direction:column;gap:2px;padding:8px 28px 14px;background:#292524}
.mob-menu.show{display:flex}
.mob-menu a{padding:10px 14px;border-radius:6px;font-size:14px;font-weight:600;color:#a8a29e}
.mob-menu a.on{color:#fafaf9;background:#1a73e8}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 26px;border-radius:8px;font-size:14.5px;font-weight:700;
  border:none;transition:all .25s;line-height:1.4;
}
.btn-blue{background:#1a73e8;color:#fff;box-shadow:0 2px 10px rgba(26,115,232,.25)}
.btn-blue:hover{background:#1558b0;box-shadow:0 4px 18px rgba(26,115,232,.35)}
.btn-dark{background:#292524;color:#fff}
.btn-dark:hover{background:#1c1917}
.btn-border{background:#fff;color:#292524;border:1.5px solid #d6d3d1}
.btn-border:hover{border-color:#292524}
.btn-green{background:#16a34a;color:#fff;box-shadow:0 2px 10px rgba(22,163,74,.25)}
.btn-green:hover{background:#15803d}
.btn-white{background:#fff;color:#1a73e8;font-weight:700}
.btn-white:hover{background:#f5f5f4}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
button.btn:disabled{opacity:.65;cursor:wait}

/* ============ INDEX — HERO: full-width banner, left-aligned ============ */
.hero-banner{
  background:#292524;color:#fafaf9;
  padding:72px 0 64px;position:relative;overflow:hidden;
}
.hero-banner::after{
  content:'';position:absolute;right:-60px;bottom:-80px;
  width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(26,115,232,.18),transparent 70%);
  pointer-events:none;
}
.hero-inner{position:relative;z-index:1;max-width:620px}
.hero-banner h1{font-size:44px;font-weight:900;line-height:1.2;letter-spacing:-.5px}
.hero-banner h1 span{color:#93c5fd}
.hero-sub{margin-top:18px;font-size:17px;color:#a8a29e;max-width:520px}
.hero-btns{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero-tags{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.hero-tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;border-radius:6px;font-size:12px;font-weight:600;
  background:rgba(255,255,255,.07);color:#d6d3d1;
}

/* ============ INDEX — MARQUEE STATS ============ */
.marquee-band{
  background:#1a73e8;color:#fff;padding:16px 0;overflow:hidden;
}
.marquee-track{
  display:flex;gap:48px;justify-content:center;align-items:center;flex-wrap:wrap;
}
.marquee-item{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700}
.marquee-item svg{flex-shrink:0}

/* ============ INDEX — ZIGZAG FEATURE BLOCKS ============ */
.seg{padding:68px 0}
.seg-alt{background:#f5f5f4}
.seg-dark{background:#1c1917;color:#e7e5e4}

.zigzag{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.zigzag.flip .zz-visual{order:-1}
.zz-text h2{font-size:30px;font-weight:800;line-height:1.25;margin-bottom:14px}
.seg-dark .zz-text h2{color:#fafaf9}
.zz-text p{font-size:15px;color:#78716c;line-height:1.8;margin-bottom:10px}
.seg-dark .zz-text p{color:#a8a29e}
.zz-visual{
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid #e7e5e4;border-radius:16px;
  min-height:260px;padding:36px;
}
.seg-dark .zz-visual{background:#292524;border-color:#44403c}
.check-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.check-list li{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:#44403c}
.seg-dark .check-list li{color:#d6d3d1}
.check-list li svg{flex-shrink:0;margin-top:3px}

/* ============ INDEX — HORIZONTAL SCROLL CARDS ============ */
.hscroll-wrap{padding:64px 0}
.hscroll-head{margin-bottom:28px}
.hscroll-head h2{font-size:28px;font-weight:800}
.hscroll-head p{font-size:15px;color:#78716c;margin-top:8px}
.hscroll{
  display:flex;gap:20px;overflow-x:auto;padding-bottom:12px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}
.hscroll::-webkit-scrollbar{height:6px}
.hscroll::-webkit-scrollbar-track{background:#e7e5e4;border-radius:3px}
.hscroll::-webkit-scrollbar-thumb{background:#a8a29e;border-radius:3px}
.hcard{
  flex:0 0 280px;scroll-snap-align:start;
  background:#fff;border:1px solid #e7e5e4;border-radius:14px;
  padding:28px 24px;transition:box-shadow .25s;
}
.hcard:hover{box-shadow:0 6px 24px rgba(0,0,0,.06)}
.hcard-icon{
  width:44px;height:44px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.hcard h3{font-size:16px;font-weight:700;margin-bottom:8px}
.hcard p{font-size:13.5px;color:#78716c;line-height:1.7}

/* ============ INDEX — TESTIMONIALS (stacked, not grid) ============ */
.reviews{padding:64px 0}
.reviews h2{font-size:28px;font-weight:800;margin-bottom:32px;text-align:center}
.review-stack{
  display:flex;flex-direction:column;gap:16px;
  max-width:700px;margin:0 auto;
}
.review-card{
  background:#fff;border:1px solid #e7e5e4;border-radius:12px;
  padding:24px 28px;display:flex;gap:18px;align-items:flex-start;
}
.review-avatar{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:16px;color:#fff;
}
.review-body{flex:1}
.review-body strong{font-size:14px;display:block;margin-bottom:2px}
.review-body em{font-style:normal;font-size:12px;color:#a8a29e}
.review-body p{font-size:14px;color:#57534e;margin-top:8px;line-height:1.7}
.star-row{display:flex;gap:2px;margin-top:6px}
.star-row svg{color:#f59e0b}

/* ============ INDEX — FAQ ============ */
.faq-section{padding:64px 0}
.faq-section h2{font-size:28px;font-weight:800;text-align:center;margin-bottom:32px}
.faq-list{max-width:740px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.faq-item{background:#fff;border:1px solid #e7e5e4;border-radius:10px;overflow:hidden}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  background:none;border:none;padding:16px 20px;
  font-size:15px;font-weight:600;color:#292524;text-align:left;gap:12px;
}
.faq-q svg{flex-shrink:0;transition:transform .3s;color:#a8a29e}
.faq-item.open .faq-q svg{transform:rotate(180deg);color:#1a73e8}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-item.open .faq-a{max-height:500px}
.faq-a-inner{padding:0 20px 16px;font-size:14px;color:#57534e;line-height:1.8}

/* ============ DOWNLOAD — HERO ============ */
.dl-hero{
  background:linear-gradient(135deg,#0c4a6e 0%,#1a73e8 100%);
  color:#fff;padding:64px 0 52px;text-align:center;
}
.dl-hero h1{font-size:36px;font-weight:900}
.dl-hero p{margin-top:12px;font-size:16px;color:#bfdbfe;max-width:500px;margin-left:auto;margin-right:auto}

/* ============ DOWNLOAD — PRIMARY CARD ============ */
.dl-primary{
  max-width:600px;margin:-36px auto 0;position:relative;z-index:5;
  background:#fff;border-radius:14px;border:2px solid #1a73e8;
  padding:36px;text-align:center;
  box-shadow:0 8px 36px rgba(26,115,232,.12);
}
.dl-primary-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:#1a73e8;color:#fff;font-size:12px;font-weight:700;
  padding:4px 18px;border-radius:8px;white-space:nowrap;
}
.dl-primary h3{font-size:22px;font-weight:800;margin:8px 0 4px}
.dl-primary .dl-sub{font-size:13px;color:#78716c;margin-bottom:16px}
.dl-primary p{font-size:14.5px;color:#57534e;margin-bottom:22px;line-height:1.7}
.dl-primary .btn{font-size:16px;padding:14px 40px}
.dl-meta{display:flex;justify-content:center;gap:20px;margin-top:16px;font-size:12px;color:#a8a29e}
.dl-meta span{display:inline-flex;align-items:center;gap:4px}

/* ============ DOWNLOAD — OTHER PLATFORMS ============ */
.dl-others{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  max-width:860px;margin:0 auto;
}
.dl-tile{
  background:#fff;border:1px solid #e7e5e4;border-radius:12px;
  padding:28px 22px;display:flex;flex-direction:column;transition:all .25s;
}
.dl-tile:hover{box-shadow:0 4px 18px rgba(0,0,0,.06)}
.dl-tile-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.dl-tile-ico{
  width:44px;height:44px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.dl-tile-ico.mac{background:#1c1917}
.dl-tile-ico.ios{background:#007aff}
.dl-tile-ico.android{background:#16a34a}
.dl-tile-head h4{font-size:16px;font-weight:700}
.dl-tile-head small{display:block;font-size:12px;color:#a8a29e}
.dl-tile p{font-size:13.5px;color:#78716c;flex:1;margin-bottom:16px;line-height:1.6}
.dl-tile .btn{width:100%}

/* ============ DOWNLOAD — REQUIREMENTS ============ */
.req-table{
  width:100%;border-collapse:collapse;background:#fff;
  border:1px solid #e7e5e4;border-radius:12px;overflow:hidden;
}
.req-table th,.req-table td{padding:13px 18px;text-align:left;font-size:13.5px}
.req-table thead th{background:#f5f5f4;font-weight:700;color:#292524;border-bottom:1px solid #e7e5e4}
.req-table tbody td{border-bottom:1px solid #f5f5f4;color:#57534e}
.req-table tbody tr:last-child td{border-bottom:none}

/* ============ DOWNLOAD — STEPS ============ */
.steps-row{display:flex;gap:0;position:relative;max-width:880px;margin:0 auto}
.step-block{flex:1;text-align:center;padding:28px 16px;position:relative}
.step-block:not(:last-child)::after{
  content:'';position:absolute;top:42px;right:0;width:50%;height:2px;background:#e7e5e4;
}
.step-block:not(:first-child)::before{
  content:'';position:absolute;top:42px;left:0;width:50%;height:2px;background:#e7e5e4;
}
.step-num{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:18px;color:#fff;margin:0 auto 14px;
  position:relative;z-index:2;
}
.step-block h4{font-size:15px;font-weight:700;margin-bottom:6px}
.step-block p{font-size:13px;color:#78716c;line-height:1.6}

/* ============ DOWNLOAD — TIMELINE ============ */
.timeline{max-width:660px;margin:0 auto;padding-left:28px;position:relative}
.timeline::before{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:#e7e5e4}
.tl-item{position:relative;padding-bottom:24px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:'';position:absolute;left:-26px;top:6px;
  width:10px;height:10px;border-radius:50%;
  background:#1a73e8;border:3px solid #dbeafe;
}
.tl-item h4{font-size:15px;font-weight:700;margin-bottom:2px}
.tl-item time{font-size:12px;color:#a8a29e;display:block;margin-bottom:4px}
.tl-item p{font-size:13.5px;color:#57534e;line-height:1.7}

/* ============ ZH-CN — HERO ============ */
.seo-hero{
  padding:64px 0 48px;
  background:linear-gradient(160deg,#fffbeb,#fef3c7,#fde68a);
  text-align:center;
}
.seo-hero h1{font-size:36px;font-weight:900;color:#292524}
.seo-hero h1 em{font-style:normal;color:#d97706}
.seo-hero p{margin:14px auto 0;font-size:16px;color:#78716c;max-width:580px}

/* ============ ZH-CN — SPLIT ARTICLE ============ */
.split{display:grid;grid-template-columns:5fr 4fr;gap:48px;align-items:start}
.split.flip{grid-template-columns:4fr 5fr}
.split.flip .split-aside{order:-1}
.split-main h2{font-size:26px;font-weight:800;margin-bottom:14px}
.split-main p{font-size:14.5px;color:#57534e;line-height:1.85;margin-bottom:10px}
.split-aside{
  background:#fff;border:1px solid #e7e5e4;border-radius:14px;
  padding:28px;position:sticky;top:72px;
}
.split-aside h3{font-size:16px;font-weight:700;margin-bottom:12px;color:#292524}
.aside-list{display:flex;flex-direction:column;gap:10px}
.aside-list li{
  display:flex;align-items:flex-start;gap:9px;
  font-size:13.5px;color:#57534e;line-height:1.6;
}
.aside-list li svg{flex-shrink:0;margin-top:3px}

/* ============ ZH-CN — COMPARISON TABLE ============ */
.cmp-table{
  width:100%;border-collapse:collapse;background:#fff;
  border:1px solid #e7e5e4;border-radius:12px;overflow:hidden;
}
.cmp-table th,.cmp-table td{padding:12px 16px;text-align:center;font-size:13.5px}
.cmp-table thead th{background:#292524;color:#fafaf9;font-weight:700}
.cmp-table thead th:first-child{text-align:left}
.cmp-table tbody td{border-bottom:1px solid #f5f5f4;color:#57534e}
.cmp-table tbody td:first-child{text-align:left;font-weight:600;color:#292524}
.cmp-table tbody tr:last-child td{border-bottom:none}
.cmp-table .cmp-best{color:#16a34a;font-weight:700}
.cmp-table .cmp-good{color:#d97706;font-weight:600}
.cmp-table .cmp-ok{color:#a8a29e}

/* ============ ZH-CN — NUMBERED TIPS ============ */
.num-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.num-card{
  background:#fff;border:1px solid #e7e5e4;border-radius:12px;
  padding:24px;display:flex;gap:16px;align-items:flex-start;
  transition:box-shadow .25s;
}
.num-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.05)}
.num-badge{
  width:36px;height:36px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;color:#fff;background:#1a73e8;
}
.num-card h3{font-size:15px;font-weight:700;margin-bottom:4px}
.num-card p{font-size:13px;color:#78716c;line-height:1.65}

/* ============ CTA BAND ============ */
.cta-band{
  background:#292524;color:#fafaf9;padding:52px 0;text-align:center;
}
.cta-band h2{font-size:28px;font-weight:800}
.cta-band p{margin:10px auto 24px;font-size:15px;color:#a8a29e;max-width:460px}
.cta-band .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ============ SECTION HELPERS ============ */
.seg-head{text-align:center;max-width:640px;margin:0 auto 40px}
.seg-head .label{
  display:inline-block;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:2.5px;
  color:#1a73e8;margin-bottom:10px;
}
.seg-dark .seg-head .label{color:#93c5fd}
.seg-head h2{font-size:28px;font-weight:800;line-height:1.3}
.seg-dark .seg-head h2{color:#fafaf9}
.seg-head p{margin-top:10px;font-size:15px;color:#78716c}
.seg-dark .seg-head p{color:#a8a29e}

/* ============ FOOTER ============ */
.site-footer{background:#1c1917;color:#a8a29e;padding:28px 0;text-align:center}
.footer-safe{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;color:#4ade80;margin-bottom:10px;
}
.footer-copy{font-size:12px;color:#78716c}

/* ============ RESPONSIVE ============ */
@media(max-width:900px){
  .zigzag{grid-template-columns:1fr;gap:32px}
  .zigzag.flip .zz-visual{order:0}
  .split,.split.flip{grid-template-columns:1fr}
  .split.flip .split-aside{order:0}
  .split-aside{position:static}
  .dl-others{grid-template-columns:1fr}
  .num-grid{grid-template-columns:1fr}
  .steps-row{flex-direction:column;gap:0}
  .step-block::after,.step-block::before{display:none!important}
  .hero-banner h1{font-size:32px}
}
@media(max-width:640px){
  .nav-links{display:none}
  .nav-burger{display:block}
  .hero-banner h1{font-size:26px}
  .dl-hero h1{font-size:26px}
  .seo-hero h1{font-size:26px}
  .seg-head h2{font-size:22px}
  .hscroll{gap:14px}
  .hcard{flex:0 0 250px}
}