:root { --ink:#1d1d1f; --muted:#6e6e73; --paper:#fff; --mist:#f5f5f7; --line:#d2d2d7; --blue:#0071e3; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, "PingFang SC", "Microsoft YaHei", sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { height:64px; padding:0 clamp(24px, 7vw, 104px); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10; background:rgba(255,255,255,.82); backdrop-filter:blur(18px); border-bottom:1px solid rgba(210,210,215,.56); }
.brand img, footer img { display:block; width:96px; height:auto; }
nav { display:flex; gap:30px; align-items:center; font-size:14px; color:#424245; }
nav a:hover, .text-link { color:var(--blue); }
.contact-link { background:var(--blue); color:#fff; border-radius:999px; padding:10px 16px; }
.contact-link:hover { color:#fff; background:#0077ed; }
.menu-toggle { display:none; border:0; background:none; font:inherit; }
.hero { min-height:720px; padding:112px clamp(24px,7vw,104px) 74px; display:grid; grid-template-columns:1.12fr .88fr; gap:40px; overflow:hidden; background:var(--mist); position:relative; }
.hero-copy { position:relative; z-index:2; }
.eyebrow { color:var(--blue); font-size:13px; letter-spacing:.02em; font-weight:700; margin:0 0 21px; }
h1,h2,h3,p { margin:0; }
h1 { font-size:clamp(42px,4.8vw,64px); line-height:1.08; letter-spacing:-.055em; max-width:800px; white-space:nowrap; }
.hero-lead { margin-top:40px; color:var(--muted); font-size:20px; line-height:1.45; }
.text-link { display:inline-block; margin-top:42px; font-size:18px; font-weight:700; }
.text-link span { padding-left:5px; }
.hero-devices { min-height:530px; position:relative; display:flex; justify-content:center; align-items:flex-start; gap:110px; }
.device { position:relative; z-index:1; flex:0 0 auto; overflow:hidden; background:#fff; border:8px solid #fff; border-radius:34px; box-shadow:0 24px 52px rgba(0,0,0,.12); }
.device img { width:100%; height:100%; object-fit:contain; background:#fff; display:block; }
.device-main { width:225px; height:470px; margin-top:8px; transform:rotate(-4deg); }
.device-side { width:195px; height:405px; margin-top:98px; transform:rotate(6deg); }
.blue-orb { width:310px; height:310px; position:absolute; z-index:0; border-radius:50%; right:-95px; bottom:-76px; background:radial-gradient(circle at 30% 30%, #69b5ff, #0071e3 62%, #0054ad); }
.statement, .product, .security, .outcomes { padding:140px clamp(24px, 7vw, 104px); }
.statement { text-align:center; max-width:1130px; margin:0 auto; }
.statement h2, .section-intro h2, .security h2, .outcomes h2 { font-size:clamp(36px,4.4vw,60px); letter-spacing:-.05em; line-height:1.1; }
.statement h2 { margin-left:clamp(-104px, -7vw, -24px); margin-right:clamp(-104px, -7vw, -24px); font-size:clamp(36px, 4.4vw, 56px); white-space:nowrap; }
.statement > p:last-child { max-width:745px; margin:32px auto 0; color:var(--muted); line-height:1.65; font-size:19px; }
.product { background:var(--mist); }
.section-intro { max-width:720px; }
.section-intro > p:last-child { margin-top:24px; color:var(--muted); line-height:1.55; font-size:19px; }
.dashboard-showcase { margin-top:72px; min-height:450px; display:flex; align-items:flex-end; justify-content:space-between; gap:54px; }
.showcase-screens { display:flex; align-items:flex-end; gap:22px; }
.showcase-screens img { width:170px; height:auto; aspect-ratio:1206 / 2622; display:block; border:6px solid #fff; border-radius:27px; box-shadow:0 12px 25px rgba(0,0,0,.12); }
.showcase-screens img:nth-child(2) { transform:translateY(-24px); }
.product-quote { flex:0 0 285px; margin-bottom:28px; padding:28px; background:var(--ink); color:#fff; border-radius:24px; font-size:22px; font-weight:700; line-height:1.28; letter-spacing:-.03em; }
.capability-grid, .reconciliation-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:80px; }
.capability-grid article, .reconciliation-grid article { border-top:1px solid var(--line); padding-top:20px; }
.capability-grid span, .reconciliation-grid span, .security-flow span { color:var(--blue); font-weight:700; font-size:14px; }
.capability-grid h3, .reconciliation-grid h3 { font-size:22px; letter-spacing:-.03em; margin-top:26px; }
.capability-grid p, .reconciliation-grid p { color:var(--muted); font-size:16px; line-height:1.5; margin-top:13px; }
.visual-product { display:grid; grid-template-columns:1fr 1fr; min-height:690px; background:#111; color:#fff; }
.visual-copy { padding:130px clamp(24px,7vw,104px); align-self:center; }
.visual-copy h2 { font-size:clamp(42px,4.4vw,62px); letter-spacing:-.055em; line-height:1.08; }
.visual-copy > p:last-child { max-width:430px; margin-top:28px; color:#a1a1a6; font-size:18px; line-height:1.6; }
.visual-devices { position:relative; overflow:hidden; display:flex; justify-content:center; align-items:flex-start; gap:100px; }
.visual-devices img { position:relative; flex:0 0 auto; width:205px; height:427px; object-fit:contain; background:#fff; border-radius:34px; border:8px solid #fff; box-shadow:0 24px 50px rgba(0,0,0,.35); }
.phone-left { margin-top:94px; transform:rotate(-6deg); }
.phone-right { margin-top:154px; transform:rotate(6deg); }
.security { background:#fff; }
.security-lead { color:var(--muted); margin-top:24px; font-size:19px; }
.security-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:24px; align-items:center; margin-top:80px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:42px 0; }
.security-flow h3 { font-size:24px; letter-spacing:-.035em; margin-top:25px; }
.security-flow p { max-width:220px; color:var(--muted); line-height:1.55; margin-top:14px; }
.security-flow b { color:var(--blue); font-size:28px; font-weight:400; }
.security-note { display:inline-block; margin-top:34px; padding:17px 23px; border-radius:16px; background:var(--mist); font-size:18px; font-weight:700; }
.reconciliation { background:#f5f5f7; }
.dark-note { margin-top:74px; border-radius:20px; background:var(--ink); color:#fff; padding:23px; text-align:center; font-weight:700; }
.outcomes { text-align:center; background:#fff; }
.outcomes h2 { max-width:930px; margin:0 auto; }
.outcomes > div { max-width:1020px; margin:67px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:38px; text-align:left; }
.outcomes p { color:var(--muted); line-height:1.55; }
.outcomes b { display:block; color:var(--ink); font-size:23px; margin-bottom:12px; }
footer { padding:100px clamp(24px, 7vw, 104px); background:var(--mist); }
footer h2 { margin-top:78px; max-width:850px; font-size:clamp(43px,5vw,68px); line-height:1.08; letter-spacing:-.055em; }
footer p { margin-top:46px; color:var(--muted); font-size:17px; line-height:1.5; }
footer .footer-tagline { color:var(--blue); margin-top:40px; font-weight:700; }
footer .service-email { color:var(--blue); }
footer .service-email:hover { text-decoration:underline; }
footer .wechat-contact { margin-top:32px; }
footer .wechat-contact p { margin-top:0; color:var(--ink); font-size:15px; font-weight:700; }
footer .wechat-contact img { width:180px; margin-top:14px; height:auto; }
footer .icp-record { margin-top:18px; font-size:13px; }
footer .icp-record a { text-decoration:underline; text-underline-offset:3px; }
footer .icp-record a:hover, footer .icp-record a:focus-visible { color:var(--blue); }
@media (max-width: 760px) {
  .site-header { height:56px; padding:0 20px; } .menu-toggle { display:block; } nav { display:none; position:absolute; top:56px; left:0; right:0; padding:18px 20px 25px; background:#fff; border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; gap:20px; } nav.open { display:flex; }
  .hero { min-height:780px; padding:78px 24px 42px; display:block; } .hero h1 { font-size:clamp(30px, 10.8vw, 42px); line-height:1.12; letter-spacing:-.055em; white-space:nowrap; } .hero-devices { display:block; margin-top:50px; min-height:330px; } .device { position:absolute; } .device-main { width:148px; height:303px; left:15%; margin-top:0; } .device-side { width:128px; height:259px; right:7%; top:58px; margin-top:0; } .blue-orb { width:180px; height:180px; bottom:-50px; } .hero-lead { font-size:17px; margin-top:28px; }
  .statement h2, .section-intro h2, .visual-copy h2, .security h2, .outcomes h2, footer h2 { font-size:clamp(30px, 8.8vw, 36px); line-height:1.16; letter-spacing:-.045em; text-wrap:balance; }
  .statement h2 { margin-left:-24px; margin-right:-24px; font-size:clamp(16px, 5.2vw, 30px); white-space:nowrap; text-wrap:nowrap; }
  .statement, .product, .security, .outcomes { padding:88px 24px; } .dashboard-showcase { margin-top:48px; min-height:0; display:block; } .showcase-screens { width:100%; justify-content:center; gap:8px; } .showcase-screens img { width:31%; height:auto; border-width:4px; border-radius:19px; } .showcase-screens img:nth-child(2) { transform:translateY(-15px); } .product-quote { margin:24px 0 0 auto; width:220px; font-size:18px; }
  .capability-grid, .reconciliation-grid { grid-template-columns:1fr 1fr; margin-top:52px; gap:26px 18px; } .capability-grid h3, .reconciliation-grid h3 { font-size:19px; margin-top:18px; }
  .visual-product { grid-template-columns:1fr; min-height:800px; } .visual-copy { padding:90px 24px 40px; } .visual-devices { display:block; min-height:440px; } .visual-devices img { position:absolute; width:166px; height:342px; margin-top:0; } .phone-left { top:18px; left:16%; } .phone-right { top:65px; right:12%; }
  .security-flow { grid-template-columns:1fr; gap:18px; margin-top:48px; } .security-flow b { transform:rotate(90deg); } .security-note { font-size:16px; }
  .outcomes > div { grid-template-columns:1fr; gap:28px; margin-top:48px; } footer { padding:80px 24px; } footer h2 { margin-top:60px; }
  footer .wechat-contact img { width:160px; }
}