:root { --ink:#101828; --muted:#667085; --line:#d9e1e8; --surface:#f5f8fa; --blue:#126ee8; --teal:#007d78; --lime:#d7f065; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--white); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; line-height:1.5; }
a { color:inherit; text-decoration:none; }
.site-header { min-height:72px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(255,255,255,.96); z-index:10; backdrop-filter:blur(12px); }
.brand { display:inline-flex; align-items:center; gap:9px; font-size:17px; font-weight:750; letter-spacing:0; }
.brand-mark { width:29px; height:29px; display:grid; place-items:center; border-radius:7px; color:white; background:var(--teal); font-size:15px; }
nav { display:flex; gap:28px; color:#475467; font-size:14px; }
nav a:hover,.text-link:hover { color:var(--blue); }
.nav-status { font-size:13px; font-weight:650; color:var(--teal); }
.hero { min-height:680px; padding:80px 8vw 56px; display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.85fr); align-items:center; gap:72px; overflow:hidden; background:var(--surface); }
.hero-copy { max-width:650px; }
.eyebrow { margin:0 0 15px; color:var(--teal); font-size:13px; font-weight:750; letter-spacing:0; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:23px; font-size:clamp(42px,5vw,74px); line-height:1.08; font-weight:800; letter-spacing:0; }
.hero-summary { max-width:590px; margin-bottom:30px; color:#475467; font-size:18px; line-height:1.7; }
.hero-actions { display:flex; gap:12px; margin-bottom:46px; }
.button { min-height:46px; padding:0 19px; display:inline-flex; align-items:center; justify-content:center; border-radius:7px; border:1px solid transparent; font-weight:700; font-size:15px; }
.primary { color:#fff; background:var(--blue); }
.secondary { border-color:#aebac6; background:#fff; }
.disabled { cursor:not-allowed; color:#667085; background:#e4e9ee; }
.hero-facts { margin:0; display:flex; gap:30px; }
.hero-facts div { min-width:118px; }
.hero-facts dt { font-size:14px; font-weight:750; }
.hero-facts dd { margin:3px 0 0; color:var(--muted); font-size:12px; }
.hero-device { justify-self:center; position:relative; width:min(100%,360px); }
.device-shell { padding:9px; border:7px solid #101828; border-radius:40px; background:#101828; box-shadow:18px 22px 0 #cce4e3; }
.device-shell img { display:block; width:100%; border-radius:26px; aspect-ratio:1170 / 2532; object-fit:cover; object-position:top; }
.signal-card { position:absolute; left:-60px; bottom:70px; padding:11px 14px; display:flex; align-items:center; gap:8px; color:#075c58; background:#e3f8e9; border:1px solid #90c9a0; border-radius:6px; box-shadow:0 7px 20px rgba(16,24,40,.12); font-size:13px; font-weight:700; }
.signal-dot { width:8px; height:8px; border-radius:50%; background:#27a56f; }
.statement { padding:110px 8vw; background:#11373b; color:white; }
.statement .eyebrow { color:var(--lime); }
.statement h2 { margin:0; font-size:clamp(34px,4.3vw,60px); line-height:1.18; letter-spacing:0; }
.section { padding:112px 8vw; }
.section-heading { max-width:610px; }
.section h2 { margin-bottom:18px; font-size:clamp(32px,4vw,52px); line-height:1.12; letter-spacing:0; }
.section-heading > p:not(.eyebrow) { color:#475467; font-size:17px; line-height:1.75; }
.automation { display:grid; grid-template-columns:.8fr 1.2fr; gap:10vw; background:#fff; }
.flow-list { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.flow-list li { display:grid; grid-template-columns:65px 1fr; gap:13px; padding:22px 0; border-bottom:1px solid var(--line); }
.flow-list span,.number { color:var(--teal); font-size:13px; font-weight:800; }
.flow-list strong { display:block; margin-bottom:5px; font-size:17px; }
.flow-list p { margin:0; color:var(--muted); font-size:14px; }
.screenshot { display:grid; grid-template-columns:minmax(300px,.7fr) 1fr; align-items:center; gap:10vw; background:#eff5ff; }
.screenshot-image { width:min(100%,338px); margin:auto; border:8px solid #172033; border-radius:38px; overflow:hidden; box-shadow:15px 18px 0 #b8cae7; }
.screenshot-image img { display:block; width:100%; aspect-ratio:1170 / 2532; object-fit:cover; object-position:top; }
.check-list { margin:28px 0 0; padding:0; list-style:none; }
.check-list li { padding:10px 0 10px 28px; position:relative; border-bottom:1px solid #cbd9ea; font-size:15px; }
.check-list li::before { content:""; position:absolute; left:2px; top:16px; width:12px; height:12px; border-radius:50%; background:var(--blue); box-shadow:inset 0 0 0 3px #eff5ff; }
.privacy { background:#fffaf0; }
.privacy-grid { margin:46px 0 28px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.privacy-grid article { min-height:220px; padding:24px; border-top:3px solid #eb9b31; background:#fff; }
.privacy-grid h3 { margin:18px 0 8px; font-size:19px; }
.privacy-grid p { margin:0; color:#5c4a35; font-size:14px; line-height:1.65; }
.text-link { color:var(--blue); font-weight:750; }
.download { text-align:center; color:white; background:#173b76; }
.download .eyebrow { color:#a9e6e0; }
.download h2 { margin-bottom:18px; }
.download > p:not(.eyebrow) { max-width:570px; margin:0 auto 30px; color:#dce9ff; font-size:17px; }
.download .disabled { color:#173b76; background:#e3f5f3; }
footer { padding:35px 8vw; display:flex; align-items:center; gap:24px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
footer .brand { color:var(--ink); } footer p { margin:0; } footer a:not(.brand) { color:var(--teal); } footer small { margin-left:auto; }
@media (max-width:780px) { .site-header { padding:0 20px; } nav { display:none; } .nav-status { font-size:12px; } .hero { min-height:auto; padding:58px 24px 70px; grid-template-columns:1fr; gap:50px; } h1 { font-size:47px; } .hero-summary { font-size:16px; } .hero-facts { gap:14px; flex-wrap:wrap; } .hero-device { width:270px; } .signal-card { left:-38px; bottom:48px; font-size:11px; } .statement,.section { padding:72px 24px; } .statement h2 { font-size:38px; } .automation,.screenshot { grid-template-columns:1fr; gap:42px; } .screenshot-image { order:2; width:270px; } .privacy-grid { grid-template-columns:1fr; gap:12px; margin-top:32px; } .privacy-grid article { min-height:0; } footer { padding:30px 24px; flex-wrap:wrap; } footer small { width:100%; margin-left:0; } }