:root{
--ink:#1d2939;
--muted:#637083;
--line:#dce6ee;
--paper:#f7fafc;
--white:#fff;
--primary:#287fd0;
--secondary:#7f6db4;
--soft:#e9f4ff;
--shadow:0 18px 42px rgba(34,67,99,.12)}

*{
box-sizing:border-box}
html{
scroll-behavior:smooth}
body{
margin:0;
color:var(--ink);
background:var(--paper);
font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,Helvetica,sans-serif;
line-height:1.7}
a{
color:inherit;
text-decoration:none}
img{
display:block;
max-width:100%;
height:auto}
.site-header{
background:rgba(255,255,255,.94);
border-bottom:1px solid var(--line);
position:sticky;
top:0;
z-index:10;
backdrop-filter:blur(12px)}
.header-inner{
width:min(1180px,calc(100% - 40px));
margin:0 auto;
min-height:76px;
display:flex;
align-items:center;
gap:28px}
.brand{
display:flex;
align-items:center;
gap:10px;
font-weight:760;
letter-spacing:.02em;
white-space:nowrap}
.brand img{
border-radius:12px}
.main-nav{
display:flex;
gap:24px;
margin-left:22px;
font-size:14px;
color:var(--muted)}
.main-nav a{
padding:25px 0;
border-bottom:2px solid transparent}
.main-nav a.active,.main-nav a:hover{
color:var(--primary);
border-color:var(--primary)}
.header-actions{
margin-left:auto;
display:flex;
gap:9px}
.download,.primary-action,.secondary-action{
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:9px;
padding:9px 16px;
font-size:13px;
font-weight:700}
.download.android,.primary-action{
background:var(--primary);
color:#fff;
box-shadow:0 8px 18px rgba(40,127,208,.2)}
.download.ios,.secondary-action{
border:1px solid #aac6dd;
color:#285b83;
background:#f5faff}
.menu-toggle{
display:none;
border:1px solid var(--line);
background:#fff;
border-radius:8px;
padding:8px 10px;
color:var(--muted)}
.hero{
padding:58px 0 46px;
background:linear-gradient(135deg,#f7fbff 0%,#eef7ff 56%,#fbf9ff 100%);
border-bottom:1px solid var(--line)}
.hero-inner{
width:min(1180px,calc(100% - 40px));
margin:0 auto;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(440px,520px);
gap:76px;
align-items:center}
.hero-copy{
max-width:560px}
.eyebrow,.section-kicker{
display:block;
color:var(--primary);
font-size:11px;
letter-spacing:.14em;
font-weight:800}
.hero h1{
font-size:clamp(36px,5vw,64px);
line-height:1.15;
margin:13px 0 20px;
letter-spacing:0}
.hero-copy p{
color:var(--muted);
font-size:16px;
margin:0;
max-width:540px}
.hero-actions,.prep-actions{
display:flex;
gap:12px;
margin-top:28px;
flex-wrap:wrap}
.hero-facts{
display:flex;
flex-wrap:wrap;
gap:19px;
margin-top:29px;
color:var(--muted);
font-size:12px}
.hero-facts strong{
color:var(--ink);
margin-right:5px}
.hero-media{
min-height:470px;
position:relative;
padding:29px 0 26px}
.media-tag{
position:absolute;
top:0;
right:24px;
color:var(--secondary);
font-size:11px;
letter-spacing:.12em}
.phone-grid{
height:436px;
position:relative}
.phone{
position:absolute;
margin:0;
border-radius:24px;
background:#fff;
padding:9px;
box-shadow:var(--shadow);
border:1px solid rgba(94,139,175,.18)}
.phone img{
border-radius:17px}
.phone-back{
width:224px;
left:0;
top:64px;
transform:rotate(-7deg)}
.phone-front{
width:206px;
right:108px;
top:18px;
z-index:2}
.phone-mini{
width:168px;
right:0;
bottom:6px;
transform:rotate(6deg);
z-index:3}
.media-caption{
display:flex;
justify-content:space-between;
color:var(--muted);
font-size:11px;
padding:8px 35px 0}
.section{
width:min(1180px,calc(100% - 40px));
margin:0 auto;
padding:82px 0}
.section-heading{
display:flex;
align-items:end;
gap:18px;
margin-bottom:28px}
.section-heading h2,.display-copy h2,.prep-card h2,.faq-teaser h2,.guide-note h2,.faq-end h2{
font-size:30px;
line-height:1.2;
margin:0}
.heading-line{
height:1px;
background:var(--line);
flex:1;
margin-bottom:8px}
.feature-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px}
.feature-grid article{
background:var(--white);
border:1px solid var(--line);
padding:25px;
border-radius:13px;
box-shadow:0 10px 25px rgba(43,80,112,.05)}
.feature-no{
color:var(--primary);
font-size:12px;
font-weight:800;
letter-spacing:.1em}
.feature-grid h3{
margin:16px 0 9px;
font-size:19px}
.feature-grid p{
color:var(--muted);
margin:0;
font-size:14px}
.display-section{
display:grid;
grid-template-columns:1fr 360px;
gap:90px;
align-items:center;
background:var(--white);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
width:100%;
padding-left:max(20px,calc((100% - 1180px)/2));
padding-right:max(20px,calc((100% - 1180px)/2))}
.display-copy{
max-width:560px}
.display-note{
color:var(--muted);
font-size:16px;
margin:20px 0}
.display-copy ul{
list-style:none;
padding:0;
margin:25px 0 0}
.display-copy li{
border-top:1px solid var(--line);
padding:13px 0;
font-size:14px}
.display-copy li span{
color:var(--primary);
font-weight:800;
margin-right:18px}
.display-image{
justify-self:end}
.display-image img{
width:300px;
border-radius:23px;
box-shadow:var(--shadow)}
.scenario-section{
padding-bottom:70px}
.scenario-list{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px}
.scenario-list div{
border-left:3px solid var(--secondary);
padding:5px 20px 10px;
background:#fff}
.scenario-list strong{
display:block;
font-size:16px;
margin-bottom:8px}
.scenario-list span{
display:block;
color:var(--muted);
font-size:14px}
.prep-section{
padding-top:0}
.prep-card{
background:#172b41;
color:#fff;
border-radius:16px;
padding:36px 40px;
display:grid;
grid-template-columns:1fr 1fr;
gap:16px 50px;
align-items:start}
.prep-card .section-kicker{
color:#a8d6ff}
.prep-card h2{
grid-column:1}
.prep-card ol{
grid-column:1;
margin:0;
padding-left:20px;
color:#d8e7f5;
font-size:14px}
.prep-card .prep-actions{
grid-column:2;
grid-row:1 / span 2;
align-self:center}
.prep-card .secondary-action{
background:transparent;
color:#d8e7f5;
border-color:#7595ad}
.faq-teaser{
display:grid;
grid-template-columns:1fr auto;
gap:15px 30px;
padding-top:10px}
.text-link{
color:var(--primary);
font-size:14px;
align-self:end}
.faq-columns{
grid-column:1 / -1;
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
margin-top:17px}
.faq-columns div{
border-top:1px solid var(--line);
padding-top:15px}
.faq-columns strong{
font-size:15px}
.faq-columns p{
color:var(--muted);
font-size:14px;
margin:7px 0 0}
.site-footer{
background:#172b41;
color:#bfcede}
.footer-inner{
width:min(1180px,calc(100% - 40px));
margin:0 auto;
padding:25px 0;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
justify-content:space-between;
gap:25px;
font-size:12px}
.inner-page{
width:min(960px,calc(100% - 40px));
margin:0 auto}
.page-intro{
padding:78px 0 55px;
border-bottom:1px solid var(--line)}
.page-intro h1{
font-size:42px;
line-height:1.2;
margin:14px 0 17px}
.page-intro p{
color:var(--muted);
font-size:16px;
max-width:710px;
margin:0}
.page-intro.compact{
padding-bottom:42px}
.guide-flow{
padding:12px 0 36px}
.guide-flow article{
display:grid;
grid-template-columns:80px 1fr;
gap:25px;
padding:32px 0;
border-bottom:1px solid var(--line)}
.guide-flow h2{
font-size:23px;
margin:0 0 10px}
.guide-flow p{
color:var(--muted);
margin:0;
font-size:15px}
.step-no{
font-size:23px;
color:var(--primary);
font-weight:800;
letter-spacing:.05em}
.guide-note{
padding:26px 0 80px}
.note-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
margin-top:25px}
.note-grid div{
background:#fff;
border:1px solid var(--line);
padding:21px;
border-radius:11px}
.note-grid strong{
display:block;
margin-bottom:8px}
.note-grid span{
display:block;
color:var(--muted);
font-size:14px}
.faq-list{
padding:14px 0 38px}
.faq-list details{
border-bottom:1px solid var(--line);
padding:22px 0}
.faq-list summary{
cursor:pointer;
font-size:18px;
font-weight:700;
list-style:none;
display:flex;
justify-content:space-between}
.faq-list summary::-webkit-details-marker{
display:none}
.faq-list summary:after{
content:"+";
color:var(--primary);
font-size:24px;
font-weight:400;
line-height:1}
.faq-list details[open] summary:after{
content:"−"}
.faq-list details div{
color:var(--muted);
padding:14px 38px 0 0;
font-size:15px}
.faq-end{
padding:30px 0 85px}
.faq-end p{
color:var(--muted);
margin:12px 0 0}
.faq-end .prep-actions{
margin-top:20px}
@media (max-width:900px){
.hero-inner{
grid-template-columns:1fr;
gap:30px}
.hero-copy{
max-width:none}
.hero-media{
max-width:520px;
width:100%;
margin:0 auto}
.feature-grid,.scenario-list{
grid-template-columns:1fr}
.display-section{
grid-template-columns:1fr;
gap:35px;
padding-left:20px;
padding-right:20px}
.display-image{
justify-self:center}
.prep-card{
grid-template-columns:1fr}
.prep-card h2,.prep-card ol,.prep-card .prep-actions{
grid-column:auto;
grid-row:auto}
.prep-card .prep-actions{
align-self:auto}
.main-nav{
margin-left:auto}
.header-actions{
display:none}
.menu-toggle{
display:block}
}
@media (max-width:620px){
.header-inner,.hero-inner,.section,.footer-inner,.inner-page{
width:min(100% - 30px,1180px)}
.main-nav{
display:none}
.main-nav.open{
display:flex;
position:absolute;
top:76px;
left:15px;
right:15px;
margin:0;
padding:10px 18px;
background:#fff;
border:1px solid var(--line);
border-radius:10px;
box-shadow:var(--shadow);
flex-direction:column;
gap:3px}
.main-nav.open a{
padding:8px 0;
border:0}
.hero{
padding:28px 0 22px}
.hero h1{
font-size:36px;
margin:9px 0 13px}
.hero h1 span{
display:block}
.hero-copy p{
font-size:14px;
line-height:1.6}
.hero-actions{
margin-top:18px}
.hero-facts{
display:none}
.hero-media{
min-height:258px;
padding:20px 0 8px}
.phone-grid{
height:232px}
.phone-back{
width:112px;
top:38px;
left:28px}
.phone-front{
width:110px;
right:calc(50% - 55px);
top:8px}
.phone-mini{
width:88px;
right:24px;
bottom:7px}
.media-caption{
padding-left:10px;
padding-right:10px}
.section{
padding:58px 0}
.section-heading{
align-items:start;
flex-direction:column;
gap:8px}
.heading-line{
width:100%}
.footer-inner{
flex-direction:column;
gap:8px}
.page-intro{
padding:53px 0 37px}
.page-intro h1{
font-size:34px}
.guide-flow article{
grid-template-columns:45px 1fr;
gap:14px;
padding:24px 0}
.guide-flow h2{
font-size:20px}
.note-grid,.faq-columns{
grid-template-columns:1fr}
.faq-list summary{
font-size:16px}
}