:root { --ink:#16271e; --muted:#617067; --green:#1f7a4b; --lime:#ccfa7b; --cream:#f7f7ef; --line:rgba(22,39,30,.12); --serif:Georgia,"Noto Serif SC",serif; --sans:"Manrope","Noto Sans SC",sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--cream); font-family:var(--sans); overflow-x:hidden; } a { color:inherit; text-decoration:none; } button { font:inherit; } .page-glow { position:absolute; z-index:-1; border-radius:999px; filter:blur(1px); pointer-events:none; } .glow-one { width:40vw; height:40vw; top:230px; right:-12vw; background:rgba(214,255,162,.34); } .glow-two { width:35vw; height:35vw; top:950px; left:-20vw; background:rgba(229,244,185,.45); }
.site-header { width:min(1240px,calc(100% - 48px)); height:98px; margin:auto; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:10; } .brand { display:flex; gap:10px; align-items:center; font-size:17px; font-weight:800; letter-spacing:-.7px; } .brand img { width:34px; height:34px; border-radius:9px; box-shadow:0 4px 12px rgba(18,80,43,.15); } .main-nav { display:flex; align-items:center; gap:32px; font-size:13px; font-weight:700; } .main-nav > a:not(.nav-download) { opacity:.68; transition:opacity .2s; } .main-nav > a:hover { opacity:1; }.nav-download { padding:12px 17px; border:1px solid var(--ink); border-radius:99px; } .nav-download span { padding-left:8px; }.menu-button { display:none; }
.hero { width:min(1170px,calc(100% - 48px)); min-height:700px; margin:29px auto 40px; display:grid; grid-template-columns:1fr .92fr; align-items:center; gap:54px; } .eyebrow { margin:0 0 19px; color:#5d6e63; letter-spacing:1.5px; font:500 11px var(--sans); text-transform:uppercase; } .pulse-dot { width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:7px; background:#4db16f; box-shadow:0 0 0 5px rgba(77,177,111,.13); } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:24px; max-width:680px; font-size:clamp(43px,5vw,74px); line-height:1.15; letter-spacing:-4px; font-weight:800; } h1 em,h2 em,h3 em { font-family:var(--serif); font-weight:400; letter-spacing:-3px; } .hero-description { width:min(495px,100%); color:var(--muted); font-size:15px; line-height:1.9; }.hero-actions { display:flex; gap:27px; align-items:center; margin-top:32px; }.store-button { width:159px; height:52px; display:flex; align-items:center; justify-content:center; gap:8px; color:white; background:#13271c; border-radius:12px; box-shadow:0 12px 22px rgba(23,56,36,.15); transition:transform .2s,background .2s; }.store-button:hover { transform:translateY(-2px); background:#264937; }.store-button svg { width:22px; fill:currentColor; }.store-button span { line-height:1.05; font-size:16px; font-weight:600; }.store-button small { display:block; font-size:8px; letter-spacing:.25px; font-weight:400; }.text-link,.arrow-link { font-size:13px; font-weight:800; }.text-link span,.arrow-link span { padding-left:7px; font-size:16px; }.hero-proof { margin-top:48px; display:flex; align-items:center; gap:10px; font-size:11px; color:#758178; }.avatars { display:flex; align-items:center; }.avatars i { width:24px; height:24px; margin-right:-7px; border:2px solid var(--cream); border-radius:50%; background:linear-gradient(135deg,#e5b790,#7d5237); }.avatars i:nth-child(2){background:linear-gradient(135deg,#b6d694,#3b664e)}.avatars i:nth-child(3){background:linear-gradient(135deg,#606956,#d1c2ae)}.avatars b { width:24px; height:24px; border:2px solid var(--cream); border-radius:50%; color:#fff; background:#2b4938; display:grid; place-items:center; font-size:14px; z-index:2; }
.phone-stage { position:relative; height:635px; min-width:0; display:grid; place-items:center; }.phone { width:286px; height:589px; border:9px solid #17261f; border-radius:43px; position:relative; z-index:2; overflow:hidden; background:#fbfcf7; box-shadow:0 35px 65px rgba(29,65,42,.24),inset 0 0 0 2px #526359; }.phone-notch { width:105px; height:26px; background:#17261f; position:absolute; left:50%; transform:translateX(-50%); border-radius:0 0 16px 16px; z-index:5; }.app-screen { height:100%; padding:18px 17px 0; background:radial-gradient(circle at 78% 25%,rgba(216,255,151,.45),transparent 30%),#f9fcf7; }.screen-status { padding:0 7px; display:flex; justify-content:space-between; font-size:9px; font-weight:800; }.screen-head { margin-top:30px; display:flex; justify-content:space-between; align-items:center; color:#718077; font-size:9px; }.screen-head button { border:0; color:#2b7a4d; background:#e4f4df; border-radius:9px; width:24px; height:24px; font-weight:bold; }.app-screen h2 { margin:11px 0 4px; font-size:19px; letter-spacing:-1.1px; }.step-ring { width:165px; height:165px; margin:11px auto 2px; position:relative; display:grid; place-items:center; }.step-ring svg { position:absolute; width:100%; height:100%; transform:rotate(-90deg); }.step-ring circle { fill:none; stroke:#e1eddf; stroke-width:12; }.step-ring .progress { stroke:#3e9c61; stroke-linecap:round; stroke-dasharray:503; stroke-dashoffset:50; }.step-ring div { text-align:center; }.step-ring strong { display:block; font-size:27px; letter-spacing:-1.6px; }.step-ring span { font-size:10px; color:#5f6e64; }.step-ring small { color:#829087; display:block; margin-top:6px; font-size:8px; }.complete-message { text-align:center; color:#368958; font-size:9px; font-weight:700; margin:3px 0 17px; }.complete-message span { margin-right:3px; }.mini-metrics { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.mini-metrics div,.insight-card { background:#f0f5ec; border-radius:12px; }.mini-metrics div { padding:10px; }.mini-metrics span { display:block; color:#78887d; font-size:8px; margin-bottom:3px; }.mini-metrics b { font-size:15px; letter-spacing:-.7px; }.mini-metrics small { font-weight:500; font-size:8px; color:#78887d; }.insight-card { margin-top:9px; padding:8px; display:flex; align-items:center; gap:7px; }.apple { width:25px; height:25px; display:grid; place-items:center; color:#f34e3e; background:#fff; border-radius:50%; font-size:14px; }.insight-card span { display:block; font-size:7px; color:#728077; }.insight-card b { font-size:9px; }.insight-card em { margin-left:auto; font-style:normal; }.screen-tabs { display:flex; justify-content:space-around; margin-top:13px; padding:9px 0; color:#a7b1aa; font-size:13px; }.screen-tabs .active { color:#318655; }.orbit { position:absolute; border:1px solid rgba(51,126,74,.15); border-radius:50%; }.orbit-a { width:480px; height:480px; }.orbit-b { width:570px; height:570px; border-style:dashed; }.float-tag { position:absolute; z-index:4; width:151px; min-height:58px; padding:10px 10px 9px 42px; border:1px solid rgba(255,255,255,.8); background:rgba(255,255,255,.83); backdrop-filter:blur(10px); border-radius:13px; box-shadow:0 14px 30px rgba(28,65,41,.1); }.float-tag b,.float-tag small { display:block; }.float-tag b { font-size:10px; }.float-tag small { margin-top:3px; color:#79847d; font-size:8px; }.tag-icon { position:absolute; left:11px; top:14px; width:22px; height:22px; border-radius:7px; display:grid; place-items:center; color:#398f5b; background:#e5f6df; font-size:13px; }.tag-icon.fire { color:#db8b30; background:#fff0d7; }.tag-icon.check { color:#fff; background:#45a66a; }.tag-top { left:0; top:92px; }.tag-side { right:-4px; top:234px; }.tag-bottom { left:4px; bottom:57px; }
.intro-band { width:min(1170px,calc(100% - 48px)); margin:40px auto 135px; padding:39px 4.7%; background:#d9f8a4; border-radius:4px; display:flex; align-items:center; justify-content:space-between; }.intro-band > p { margin:0; font-size:clamp(23px,3vw,38px); line-height:1.35; letter-spacing:-1.5px; font-weight:700; }.intro-mark { display:flex; align-items:center; color:#3a523c; }.intro-mark span { font:500 70px/1 var(--serif); letter-spacing:-10px; }.intro-mark i { margin:10px 12px 0 15px; font-size:23px; font-style:normal; }.intro-mark small { padding-left:16px; border-left:1px solid rgba(58,82,60,.25); font-size:11px; line-height:1.55; }
.section { width:min(1170px,calc(100% - 48px)); margin-left:auto; margin-right:auto; }.section-heading { margin-bottom:43px; }.section-heading h2,.privacy h2,.pro-heading h2,.closing h2 { margin:0; font-size:clamp(35px,4.2vw,58px); letter-spacing:-3px; line-height:1.2; }.feature-grid { display:grid; grid-template-columns:1.3fr 1fr .86fr; gap:14px; }.feature-card { min-height:320px; padding:27px; overflow:hidden; border-radius:4px; position:relative; display:flex; flex-direction:column; justify-content:space-between; }.feature-large { background:#e5f6ce; grid-column:span 2; min-height:370px; }.feature-medium { background:#e9e9da; min-height:370px; }.feature-small { background:#cbf4d6; }.feature-wide { background:#f4e8d3; grid-column:span 2; flex-direction:row; align-items:center; gap:25px; }.feature-index { color:#728276; font:500 10px "DM Mono",monospace; letter-spacing:.5px; }.feature-card h3 { margin:9px 0 10px; font-size:26px; line-height:1.2; letter-spacing:-1.6px; }.feature-card > div > p:last-child,.feature-small > p:last-child { margin:0; max-width:255px; color:#607068; font-size:12px; line-height:1.8; }.ring-illustration { position:absolute; right:7%; bottom:-64px; width:240px; height:240px; border-radius:50%; display:grid; place-items:center; border:22px solid #c3e892; border-right-color:#499d65; transform:rotate(-28deg); }.small-ring { width:163px; height:163px; border-radius:50%; background:rgba(255,255,255,.68); display:grid; place-content:center; transform:rotate(28deg); text-align:center; }.small-ring span { font-size:29px; font-weight:800; letter-spacing:-1px; }.small-ring small { color:#64766b; font-size:10px; }.ring-caption { position:absolute; right:-15px; top:33px; padding:9px 12px; color:#277345; background:#fff; border-radius:10px; box-shadow:0 8px 20px rgba(43,91,52,.1); transform:rotate(28deg); font-size:9px; font-weight:700; }.ring-caption i { width:7px; height:7px; display:inline-block; border-radius:50%; background:#49a369; margin-right:4px; }.chart-illustration { height:130px; margin-top:18px; padding:0 2px 27px; border-bottom:1px solid rgba(59,73,59,.12); display:flex; gap:8px; align-items:end; position:relative; }.chart-illustration span { width:22px; border-radius:4px 4px 0 0; background:#619e71; opacity:.8; }.chart-illustration span:nth-child(4),.chart-illustration span:nth-child(6) { background:#2f7c4e; }.chart-illustration i { position:absolute; right:0; bottom:-43px; font-size:9px; font-style:normal; color:#66736b; }.chart-illustration b { color:#233d2c; }.flame-icon { width:58px; height:58px; display:grid; place-items:center; margin:14px 0 21px; border-radius:50% 50% 50% 8px; color:#ed8c3b; background:#fff6d1; transform:rotate(-20deg); font-size:31px; }.equivalent-art { width:122px; height:130px; flex:0 0 122px; position:relative; }.apple-shape { width:70px; height:74px; position:absolute; left:13px; top:32px; background:#e1614e; border-radius:47% 47% 50% 50%; }.apple-shape:before { content:""; width:26px; height:14px; position:absolute; top:-10px; right:4px; background:#69a762; border-radius:100% 0; transform:rotate(-25deg); }.apple-shape:after { content:""; width:7px; height:20px; position:absolute; top:-16px; left:32px; background:#765440; transform:rotate(-25deg); }.circle-note { width:60px; height:60px; padding-top:9px; border-radius:50%; position:absolute; right:0; bottom:2px; background:#fff8e8; text-align:center; font:7px/1.1 "DM Mono",monospace; }.circle-note b { font-size:18px; }
.privacy { min-height:590px; margin-top:155px; display:grid; grid-template-columns:1fr 1fr; gap:10%; align-items:center; }.privacy-visual { height:420px; position:relative; display:grid; place-items:center; }.privacy-circle { width:330px; height:330px; display:grid; place-items:center; align-content:center; border-radius:50%; color:#efffe5; background:#1f613d; text-align:center; box-shadow:0 22px 0 #d3eeab,0 50px 70px rgba(41,93,56,.2); }.lock { width:80px; height:80px; display:grid; place-items:center; margin-bottom:17px; color:#254e32; background:#d2fa88; border-radius:50%; font-size:42px; }.privacy-circle span { font:500 11px/1.6 "DM Mono",monospace; letter-spacing:2px; }.privacy-star { position:absolute; color:#8fcf72; font-style:normal; font-size:30px; }.star-one { top:36px; right:28px; }.star-two { left:6px; bottom:58px; font-size:19px; }.privacy-copy > p:not(.eyebrow) { margin:24px 0 25px; max-width:440px; color:#637269; font-size:14px; line-height:2; }.arrow-link { padding-bottom:8px; border-bottom:1px solid var(--ink); }
.pro-section { margin-top:139px; }.pro-heading { text-align:center; }.pro-heading > p:last-child { margin:16px 0 41px; color:#6f7e74; font-size:14px; }.pro-card { min-height:350px; padding:52px 7%; position:relative; overflow:hidden; display:grid; grid-template-columns:1.1fr 1fr; align-items:center; color:#eaffe4; background:#1e5939; border-radius:5px; }.pro-card-copy { position:relative; z-index:2; }.crown { color:#dcff7f; font-size:25px; }.pro-card h3 { margin:9px 0 15px; font-size:34px; letter-spacing:-2px; line-height:1.13; }.pro-card h3 em { color:#d9fa97; }.pro-card-copy p { max-width:325px; color:#bbd8c0; font-size:12px; line-height:1.8; }.light-button { margin-top:12px; padding:11px 15px; display:inline-block; color:#244a31; background:#dbfb98; border-radius:999px; font-size:12px; font-weight:800; }.light-button span { margin-left:11px; }.pro-card ul { z-index:2; margin:15px 0 0; padding:0; list-style:none; font-size:13px; line-height:2.45; }.pro-card li i { width:18px; height:18px; display:inline-grid; place-items:center; margin-right:10px; color:#205437; background:#cafa7e; border-radius:50%; font-size:10px; font-style:normal; }.pro-orb { position:absolute; width:400px; height:400px; right:-100px; top:-95px; border:1px solid rgba(220,255,167,.35); border-radius:50%; box-shadow:0 0 0 52px rgba(220,255,167,.06),0 0 0 104px rgba(220,255,167,.04); }
.closing { margin-top:156px; padding-bottom:137px; text-align:center; }.closing h2 { font-size:clamp(48px,6vw,77px); }.closing > p:not(.eyebrow) { margin:21px 0 29px; color:#6d7a71; font-size:14px; }.dark-store { margin:auto; }.site-footer { width:min(1170px,calc(100% - 48px)); margin:auto; padding:24px 0 36px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); }.site-footer p,.site-footer div { margin:0; color:#79857e; font-size:10px; }.site-footer div { display:flex; gap:20px; }.site-footer div a:hover { color:var(--ink); }
.reveal { opacity:0; transform:translateY(25px); transition:opacity .8s ease,transform .8s ease; }.reveal.in-view { opacity:1; transform:translateY(0); }.delay-1 { transition-delay:.14s; }.delay-2 { transition-delay:.28s; }
/* ---------- 多语言 ---------- */
html.i18n-boot body { visibility:hidden; } /* 非默认语言首帧防闪烁，翻译应用后由 i18n.js 移除该 class */
html[lang="zh-Hans"] { --sans:"Manrope","Noto Sans SC",sans-serif; }
html[lang="zh-Hant"] { --sans:"Manrope","Noto Sans TC",sans-serif; }
html[lang="ja"] { --sans:"Manrope","Noto Sans JP",sans-serif; }
html[lang="ar"] { --sans:"Manrope","Noto Sans Arabic",sans-serif; --serif:"Noto Sans Arabic","Noto Naskh Arabic",serif; }
/* 阿拉伯语排版修正：连写文字禁用负字距与斜体 */
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] .eyebrow,html[lang="ar"] .app-screen h2,html[lang="ar"] .intro-band > p { letter-spacing:0; }
html[lang="ar"] h1 em,html[lang="ar"] h2 em,html[lang="ar"] h3 em { font-style:normal; letter-spacing:0; }
.lang-select { appearance:none; -webkit-appearance:none; border:1px solid var(--line); background-color:transparent; color:inherit; font:700 13px var(--sans); padding:10px 32px 10px 15px; border-radius:99px; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%); background-position:calc(100% - 17px) 55%,calc(100% - 12px) 55%; background-size:5px 5px; background-repeat:no-repeat; transition:border-color .2s; }
.lang-select:hover { border-color:rgba(22,39,30,.34); }
@media (max-width:760px) { .site-header,.hero,.intro-band,.section,.site-footer { width:min(100% - 32px,600px); }.site-header { height:78px; }.main-nav { display:none; position:absolute; top:67px; right:0; width:190px; padding:18px; align-items:flex-start; flex-direction:column; gap:16px; background:#fffef8; box-shadow:0 16px 40px rgba(20,50,30,.13); border-radius:12px; }.main-nav.open { display:flex; }.menu-button { width:38px; height:35px; display:grid; align-content:center; gap:6px; padding:0 8px; border:1px solid var(--line); background:transparent; border-radius:9px; }.menu-button span { display:block; height:1px; background:var(--ink); }.hero { min-height:0; margin:45px auto 66px; grid-template-columns:1fr; gap:29px; }.hero-copy { text-align:center; }.hero-description { margin-left:auto; margin-right:auto; }.hero-actions { justify-content:center; }.hero-proof { justify-content:center; margin-top:33px; }.phone-stage { height:555px; transform:scale(.87); transform-origin:center top; margin-bottom:-78px; }.orbit-a { width:430px; height:430px; }.orbit-b { width:510px; height:510px; }.intro-band { margin-bottom:89px; padding:30px; }.intro-mark { display:none; }.feature-grid { grid-template-columns:1fr; }.feature-large,.feature-medium,.feature-wide { grid-column:span 1; }.feature-card { min-height:290px; }.feature-medium { min-height:320px; }.feature-wide { min-height:270px; }.privacy { min-height:0; margin-top:96px; grid-template-columns:1fr; gap:15px; }.privacy-visual { height:340px; }.privacy-circle { width:260px; height:260px; }.pro-section { margin-top:100px; }.pro-card { padding:40px 31px; grid-template-columns:1fr; }.pro-card ul { margin-top:28px; }.pro-orb { right:-240px; }.closing { margin-top:99px; padding-bottom:87px; }.site-footer { flex-wrap:wrap; gap:20px; }.site-footer p { order:3; width:100%; }.site-footer .brand img { width:29px; height:29px; } }
@media (max-width:380px) { h1 { font-size:40px; letter-spacing:-2.5px; }.hero-actions { gap:16px; }.text-link { font-size:11px; }.phone-stage { transform:scale(.78); margin-left:-22px; margin-right:-22px; }.feature-card { padding:22px; } }
/* ---------- RTL 镜像（ar 等从右到左语言；flex/文本流向由 dir 自动翻转，这里只处理物理定位与内边距） ---------- */
html[dir="rtl"] .glow-one { right:auto; left:-12vw; }
html[dir="rtl"] .glow-two { right:-20vw; left:auto; }
html[dir="rtl"] .nav-download span { padding-left:0; padding-right:8px; }
html[dir="rtl"] .text-link span,html[dir="rtl"] .arrow-link span { padding-left:0; padding-right:7px; }
html[dir="rtl"] .lang-select { padding:10px 15px 10px 32px; background-position:17px 55%,12px 55%; }
html[dir="rtl"] .tag-top { left:auto; right:0; }
html[dir="rtl"] .tag-side { right:auto; left:-4px; }
html[dir="rtl"] .tag-bottom { left:auto; right:4px; }
html[dir="rtl"] .float-tag { padding:10px 42px 9px 10px; }
html[dir="rtl"] .tag-icon { left:auto; right:11px; }
html[dir="rtl"] .complete-message span { margin-right:0; margin-left:3px; }
html[dir="rtl"] .insight-card em { margin-left:0; margin-right:auto; transform:scaleX(-1); }
html[dir="rtl"] .avatars i { margin-right:0; margin-left:-7px; }
html[dir="rtl"] .intro-mark i { margin:10px 15px 0 12px; }
html[dir="rtl"] .intro-mark small { padding-left:0; padding-right:16px; border-left:0; border-right:1px solid rgba(58,82,60,.25); }
html[dir="rtl"] .ring-illustration { right:auto; left:7%; }
html[dir="rtl"] .ring-caption { right:auto; left:-15px; }
html[dir="rtl"] .ring-caption i { margin-right:0; margin-left:4px; }
html[dir="rtl"] .chart-illustration i { right:auto; left:0; }
html[dir="rtl"] .privacy-star.star-one { right:auto; left:28px; }
html[dir="rtl"] .privacy-star.star-two { left:auto; right:6px; }
html[dir="rtl"] .pro-orb { right:auto; left:-100px; }
html[dir="rtl"] .light-button span { margin-left:0; margin-right:11px; }
@media (max-width:760px) {
  html[dir="rtl"] .main-nav { right:auto; left:0; }
  html[dir="rtl"] .pro-orb { right:auto; left:-240px; }
}