@font-face{font-family:Jost;src:url('./assets/fonts/jost-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Jost;src:url('./assets/fonts/jost-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Jost;src:url('./assets/fonts/jost-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
:root{--blue:#075ac9;--navy:#102f6d;--ink:#173653;--muted:#627991;--line:#dce8f5;--orange:#ff7b26;--paper:#f6faff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,#fff 0%,#f3f8ff 45%,#f8fbff 100%);color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:#fff;padding:12px 16px}.skip:focus{top:10px}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:30px;min-height:88px;padding:14px clamp(24px,5vw,80px);border-bottom:1px solid #dbe8f5;background:rgba(255,255,255,.9)}
.brand{display:flex;align-items:center;gap:12px;color:var(--blue);font-weight:800;font-size:13px;line-height:1.02;min-width:180px}
.brand img{width:48px;height:48px;object-fit:contain}
.nav{display:flex;align-items:center;justify-content:center;gap:clamp(18px,2.8vw,42px);flex-wrap:wrap}
.nav a{font-size:11px;font-weight:800;letter-spacing:.1em;color:#445875;padding:12px 0;white-space:nowrap;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current=page]{color:var(--blue);border-color:var(--blue)}
.header-actions{display:flex;align-items:center;gap:14px;white-space:nowrap}
.lang{font-size:12px;font-weight:750;color:var(--blue);padding:9px}
.lang:hover{text-decoration:underline}
.header-cta{display:inline-flex;align-items:center;gap:18px;background:var(--blue);color:#fff;padding:13px 18px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.08em}
.header-cta:hover,.button-primary:hover{background:#124aa4}
.page{width:min(100% - 2 * clamp(24px,5vw,80px),1400px);margin:0 auto}
.breadcrumb{display:flex;gap:8px;align-items:center;padding:28px 0 18px;font-size:11px;font-weight:700;color:#6d85a2}
.breadcrumb a:hover{color:var(--blue)}
.hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(270px,.75fr);gap:clamp(25px,5vw,80px);align-items:center;min-height:475px;padding:clamp(42px,5vw,70px);border:1px solid #e7eef8;border-radius:32px;background:radial-gradient(ellipse 43% 57% at 100% 0%,rgba(74,196,231,.18),transparent 85%),linear-gradient(145deg,#fff,#f1f8ff);box-shadow:0 22px 60px rgba(34,81,137,.07)}
.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--blue);font-size:10px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.eyebrow:before{content:"";width:24px;height:2px;background:var(--orange)}
.section-kicker{display:inline-flex;align-items:center;gap:10px;padding:10px 17px;border:1px solid #cddff0;border-radius:999px;background:rgba(255,255,255,.87);color:var(--navy);font-size:12px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 8px 22px rgba(38,97,160,.055)}
.section-kicker:before{content:"✦";display:inline-block;color:var(--orange);font-size:20px;font-weight:400;line-height:1}
.hero h1{max-width:850px;margin:25px 0 22px;color:#123575;font-size:clamp(42px,5vw,75px);font-weight:720;letter-spacing:-.055em;line-height:1.14;text-wrap:balance}
.hero .lead{max-width:800px;margin:0;color:#526a82;font-size:clamp(16px,1.3vw,19px);line-height:1.82}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:17px;margin-top:30px}
.button-primary,.button-outline{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:46px;padding:12px 19px;border-radius:999px;font-size:12px;font-weight:780;transition:transform .2s,background .2s}
.button-primary{color:#fff;background:var(--blue)}
.button-outline{color:var(--blue);border:1px solid #b9d1e8;background:#fff}
.button-primary:hover,.button-outline:hover{transform:translateY(-2px)}
.hero-aside{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;min-height:280px;padding:30px;border-radius:25px;color:#fff;background:radial-gradient(ellipse at 90% 10%,rgba(67,196,234,.37),transparent 65%),linear-gradient(145deg,#123778,#0b285e);box-shadow:0 20px 45px rgba(17,62,124,.16)}
.hero-aside .aside-label{color:#abd6ff;font-size:10px;font-weight:800;letter-spacing:.16em}
.hero-aside h2{margin:28px 0 17px;font-size:clamp(27px,2.6vw,39px);line-height:1.25;letter-spacing:-.045em}
.hero-aside p{margin:0;color:#c1d6ee;font-size:13px;line-height:1.75}
.hero-aside ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:25px 0 0}
.hero-aside li{padding:8px 10px;border:1px solid rgba(216,234,255,.3);border-radius:999px;color:#e4f2ff;font-size:10px}
.section{padding:clamp(70px,7vw,110px) 0 0}
.section-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.65fr);gap:32px;align-items:end;margin-bottom:35px}
.section h2{margin:18px 0 0;color:#173653;font-size:clamp(34px,3.6vw,56px);line-height:1.2;letter-spacing:-.05em;font-weight:700}
.section-heading p{margin:0 0 4px;color:var(--muted);font-size:15px;line-height:1.8}
.prose{max-width:890px;color:#526a82;font-size:17px;line-height:1.95}
.prose p{margin:0 0 17px}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{padding:31px;border:1px solid #e3edf6;border-radius:24px;background:rgba(255,255,255,.92);box-shadow:0 14px 30px rgba(29,79,129,.055)}
.card .index{color:var(--blue);font-size:11px;font-weight:850;letter-spacing:.12em}
.card h3{margin:29px 0 12px;color:#153b67;font-size:24px;letter-spacing:-.025em}
.card p{margin:0;color:#637991;font-size:14px;line-height:1.75}
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.flow .card{padding:24px;min-height:215px}
.flow .card h3{margin-top:35px;font-size:20px}
.service-list{display:grid;gap:19px}
.service{scroll-margin-top:20px;display:grid;grid-template-columns:minmax(260px,.65fr) minmax(0,1.35fr);gap:clamp(26px,5vw,70px);padding:39px;border:1px solid #e3edf6;border-radius:26px;background:#fff;box-shadow:0 15px 35px rgba(29,79,129,.05)}
.service:nth-child(even){background:#f6faff}
.service .number{font-size:11px;color:var(--blue);font-weight:850;letter-spacing:.15em}
.service h2{margin:20px 0 10px;font-size:clamp(31px,3vw,43px)}
.service .en-label{font-size:11px;letter-spacing:.12em;color:#8296ae;font-weight:750}
.service p{margin:0 0 18px;color:#526a82;font-size:15px;line-height:1.85}
.service ul,.bullet-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.service li,.bullet-list li{position:relative;padding-left:23px;color:#526a82;font-size:14px;line-height:1.7}
.service li:before,.bullet-list li:before{content:"";position:absolute;left:0;top:.7em;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.service .more{display:inline-flex;gap:12px;margin-top:21px;color:var(--blue);font-size:12px;font-weight:800}
.service .more:hover{text-decoration:underline}
.platforms{display:flex;flex-wrap:wrap;gap:10px}
.platforms span{padding:12px 16px;border:1px solid #d9e9f5;border-radius:999px;background:#fff;color:#2e5f91;font-size:13px;font-weight:740}
.note{max-width:910px;margin-top:24px;color:#627991;font-size:14px;line-height:1.8}
.faq{display:grid;gap:10px}
.faq details{padding:20px 24px;border:1px solid #dfeaf6;border-radius:18px;background:#fff}
.faq summary{cursor:pointer;display:flex;justify-content:space-between;gap:20px;color:#153b67;font-size:17px;font-weight:730;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-size:24px;line-height:1;color:var(--blue)}
.faq details[open] summary:after{content:"−"}
.faq details p{max-width:900px;margin:17px 0 0;color:#526a82;font-size:14px;line-height:1.8}
.related{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.related a{border:1px solid #c5dbee;border-radius:999px;background:#fff;color:var(--blue);font-size:12px;font-weight:750;padding:10px 15px}
.related a:hover{background:#eaf5ff}
.footer{width:min(100% - 2 * clamp(24px,5vw,80px),1400px);margin:90px auto 40px;padding:clamp(38px,5vw,64px);border-radius:29px;background:radial-gradient(ellipse at 100% 100%,rgba(30,98,172,.28),transparent 70%),#0b1e3b;color:#fff}
.footer-main{display:grid;grid-template-columns:1fr auto;align-items:center;gap:35px}
.footer .eyebrow{gap:9px;padding:9px 16px;border:1px solid rgba(201,221,234,.65);border-radius:999px;background:rgba(255,255,255,.95);color:var(--navy);font-size:11px;letter-spacing:.08em}
.footer .eyebrow:before{content:"✦";width:auto;height:auto;background:none;color:var(--orange);font-size:18px;line-height:1}
.footer h2{max-width:750px;margin:20px 0 11px;font-size:clamp(34px,3.5vw,50px);line-height:1.2;letter-spacing:-.05em}
.footer p{margin:0;color:#b7c9e3;font-size:14px;line-height:1.7}
.footer-links{display:grid;gap:10px;min-width:280px}
.footer-links a{display:flex;justify-content:space-between;gap:16px;padding:15px 18px;border:1px solid rgba(197,220,251,.3);border-radius:14px;background:rgba(255,255,255,.05);font-size:13px;font-weight:750}
.footer-links a:first-child{border-color:var(--blue);background:var(--blue)}
.footer-links a:hover{background:#1552a6}
.footer-meta{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:53px;padding-top:22px;border-top:1px solid rgba(197,220,251,.24);color:#a8bdd7;font-size:10px}
@media(max-width:1050px){.site-header{flex-wrap:wrap;justify-content:space-between}.nav{order:3;width:100%;justify-content:flex-start}.hero{grid-template-columns:1fr}.hero-aside{min-height:235px}.flow{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.site-header{padding:13px 20px}.brand{min-width:0}.brand img{width:42px;height:42px}.brand span{font-size:11px}.header-cta{padding:11px 13px}.nav{gap:17px;overflow-x:auto;flex-wrap:nowrap}.nav a{font-size:10px}.page,.footer{width:calc(100% - 32px)}.hero{padding:28px;border-radius:24px}.hero h1{font-size:clamp(38px,8.4vw,56px)}.hero-aside{min-height:0;padding:25px}.section-heading{grid-template-columns:1fr;gap:13px}.card-grid,.flow{grid-template-columns:1fr 1fr}.service{grid-template-columns:1fr;padding:27px}.footer-main{grid-template-columns:1fr}.footer-links{min-width:0}.footer{margin-top:70px;padding:34px 26px}}
@media(max-width:520px){.brand span{display:none}.header-actions{gap:4px}.header-cta{font-size:9px}.nav{gap:14px}.hero{padding:26px 22px}.hero .lead{font-size:15px}.card-grid,.flow{grid-template-columns:1fr}.card,.flow .card{min-height:0;padding:25px}.flow .card h3{margin-top:20px}.section{padding-top:65px}.section h2{font-size:35px}.footer-meta{display:grid}.footer h2{font-size:35px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition-duration:.01ms!important}}

/* Services follows the same headline-then-description rhythm as About. */
.services-page .section-heading { display: block; max-width: 1100px; }
.services-page .section-heading p { max-width: 900px; margin: 18px 0 0; }
.services-page .service { grid-template-columns: 1fr; gap: 18px; }
.services-page .service > div:nth-child(2) { max-width: 900px; }

/* English typography follows the homepage: airy geometric headings, quiet
   descriptions, and compact typewriter labels. The Chinese pages keep their
   established type scale. */
html[lang="en"] body{
  font-family:Jost,"URW Gothic",Arial,sans-serif;
  font-weight:400;
  letter-spacing:-.012em;
}
html[lang="en"] .hero h1,
html[lang="en"] .hero-aside h2,
html[lang="en"] .section h2,
html[lang="en"] .service h2,
html[lang="en"] .footer h2{
  font-family:Jost,"URW Gothic",Arial,sans-serif;
  font-weight:400;
  letter-spacing:-.055em;
  line-height:1.12;
}
html[lang="en"] .card h3,
html[lang="en"] .faq summary{
  font-weight:500;
  letter-spacing:-.035em;
}
html[lang="en"] .hero .lead,
html[lang="en"] .hero-aside p,
html[lang="en"] .section-heading p,
html[lang="en"] .prose,
html[lang="en"] .card p,
html[lang="en"] .service p,
html[lang="en"] .service li,
html[lang="en"] .bullet-list li,
html[lang="en"] .note,
html[lang="en"] .faq details p,
html[lang="en"] .footer p{
  font-weight:400;
  letter-spacing:-.012em;
}
html[lang="en"] .eyebrow,
html[lang="en"] .section-kicker,
html[lang="en"] .aside-label,
html[lang="en"] .card .index,
html[lang="en"] .service .number,
html[lang="en"] .service .en-label,
html[lang="en"] .nav a,
html[lang="en"] .header-cta,
html[lang="en"] .button-primary,
html[lang="en"] .button-outline,
html[lang="en"] .service .more,
html[lang="en"] .related a,
html[lang="en"] .footer-links a,
html[lang="en"] .footer-meta{
  font-family:"Nimbus Mono PS","Courier New",Courier,monospace;
  font-weight:700;
  letter-spacing:.055em;
}
html[lang="en"] .hero h1{font-size:clamp(42px,5vw,74px)}
html[lang="en"] .hero-aside h2{line-height:1.18}
html[lang="en"] .section h2{line-height:1.18}
html[lang="en"] .service h2{line-height:1.18}
@media(max-width:720px){html[lang="en"] .hero h1{font-size:clamp(38px,8.4vw,56px)}}