:root {
  --bg:#F5F4F0;
  --bg-panel:#FFFFFF;
  --bg-panel-2:#ECEBE6;
  --panel-tint:#FAFAF8;
  --border:#E2E0DA;
  --border-strong:#D3D1CA;
  --accent:#2160F3;
  --accent-dark:#1747BF;
  --accent-soft:#E9EFFE;
  --text:#1E1D1B;
  --text-muted:#5F5D58;
  --text-faint:#8C8A84;
  --success:#1E9E62;
  --warn:#C7781A;
  --error:#D6453D;
  --coral:#E8775A;
  --coral-soft:rgba(232,119,90,.14);
  --stage:#1F1D1C;
  --stage-panel:#2B2927;
  --stage-ink:#121110;
  --stage-text:#F4F2EE;
  --stage-muted:#B3AEA6;
  --stage-line:rgba(244,242,238,.10);
  --on-dark:#FFFFFF;
  --glow:rgba(255,255,255,.95);
  --glow-fade:rgba(255,255,255,0);
  --veil:rgba(30,29,27,.3);
  --clear:transparent;
  --font-display:"Inter","Noto Sans SC",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"Inter","Noto Sans SC",-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --weight-normal:400;
  --weight-medium:500;
  --weight-strong:600;
  --r-xs:8px;
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;
  --r-phone:40px;
  --r-screen:32px;
  --r-pill:999px;
  --r-circle:50%;
  --shadow-soft:0 1px 2px rgba(30,29,27,.04),0 4px 12px -4px rgba(30,29,27,.06);
  --shadow-panel:0 1px 3px rgba(30,29,27,.05),0 24px 56px -18px rgba(30,29,27,.16);
  --shadow-phone:0 2px 8px rgba(30,29,27,.08),0 40px 80px -20px rgba(30,29,27,.30);
  --shadow-btn:0 1px 2px rgba(23,71,191,.20),0 8px 20px -8px rgba(33,96,243,.45);
  --ring-active:0 0 0 1px var(--accent);
  --nav-h:72px;
  --peek:40px;
  --wrap:1280px;
  --reading:820px;
  --gutter:48px;
  --section-space:112px;
  --ease:cubic-bezier(.2,.65,.3,1);
  --duration:.2s;
}
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:32px }
html.nav-open { overflow:hidden }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none }
button,input,select,textarea { font:inherit }
button { cursor:pointer }
button,a,input,summary,select,textarea { -webkit-tap-highlight-color:var(--accent-soft) }
button { color:var(--text) }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px }
[hidden] { display:none!important }
img,svg { display:block; max-width:100% }
img { height:auto }
svg { flex-shrink:0 }
figure { margin:0 }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:var(--weight-normal); text-wrap:balance }
h1 { font-size:clamp(34px,3.4vw,48px); line-height:1.18; letter-spacing:-.015em }
h2 { font-size:clamp(28px,3vw,36px); line-height:1.25; letter-spacing:-.01em }
h3 { font-size:24px; line-height:1.35 }
p { margin:0 0 1.25em }
strong,b { font-weight:var(--weight-medium) }
code,kbd,pre { font-family:var(--font-mono) }
code { overflow-wrap:anywhere; font-size:.9em }
pre {
  max-width:100%; min-width:0; overflow-x:auto; padding:24px;
  border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--panel-tint); color:var(--text); font-size:14px; line-height:1.8;
  tab-size:2;
}
pre code { overflow-wrap:normal; word-break:normal; white-space:pre; font-size:inherit }
hr { border:0; border-top:1px solid var(--border); margin:32px 0 }
.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter) }
.reading { max-width:var(--reading); margin-inline:auto }
.section { padding-top:var(--section-space); padding-bottom:var(--section-space) }
.section-white { background:var(--bg-panel); color:var(--text) }
.section-head { max-width:720px; margin-bottom:48px }
.section-head h2 { margin:0 0 16px }
.section-head p,.muted { color:var(--text-muted) }
.grid { display:grid; gap:24px }
.grid-two { grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid-three { grid-template-columns:repeat(3,minmax(0,1fr)) }
.grid > *,.hero-grid > *,.footer-grid > *,.feature-row > * { min-width:0 }
.stack > * + * { margin-top:24px }
.nowrap { white-space:nowrap }
.text-link { color:var(--accent); text-decoration:underline; text-underline-offset:4px }
.text-link:hover { color:var(--accent-dark) }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip-link {
  position:fixed; z-index:100; top:8px; left:16px; transform:translateY(-160%);
  padding:10px 18px; border-radius:var(--r-sm);
  background:var(--accent); color:var(--on-dark);
}
.skip-link:focus { transform:translateY(0) }
.panel,.card {
  padding:32px; border:1px solid var(--border); border-radius:var(--r-xl);
  background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-soft);
}
.card h3 { margin:0 0 16px }
.card p:last-child,.panel p:last-child { margin-bottom:0 }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:12px 24px; border:1px solid var(--clear);
  border-radius:var(--r-md); font-family:var(--font-body); font-size:16px;
  font-weight:var(--weight-medium); line-height:1.4; text-align:center;
  transition:background-color var(--duration),border-color var(--duration),transform var(--duration);
}
.btn svg { width:18px; height:18px }
.btn-primary { background:var(--accent); color:var(--on-dark); box-shadow:var(--shadow-btn) }
.btn-primary:hover,.btn-primary.is-hover { background:var(--accent-dark); color:var(--on-dark) }
.btn-primary:active,.btn-primary.is-pressed { background:var(--accent-dark); color:var(--on-dark); transform:translateY(1px); box-shadow:none }
.btn-ghost { background:var(--bg-panel); color:var(--text); border-color:var(--border); box-shadow:var(--shadow-soft) }
.btn-ghost:hover,.btn-ghost.is-hover { background:var(--panel-tint); color:var(--text); border-color:var(--border-strong) }
.btn-ghost:active { background:var(--bg-panel-2); color:var(--text) }
.btn:disabled,.btn[aria-disabled="true"] { background:var(--bg-panel-2); color:var(--text-muted); box-shadow:none; cursor:not-allowed; border-color:var(--border) }
.btn-small { min-height:44px; padding:10px 18px; font-size:14px }
.cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px }
.topbar,#site-header {
  position:relative; z-index:30; min-height:var(--nav-h);
  background:var(--bg-panel); color:var(--text); border-bottom:1px solid var(--border);
}
.topbar-in {
  position:relative; width:100%; height:var(--nav-h);
  max-width:min(100%,calc(1280px + var(--gutter) * 2));
  margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; gap:40px;
}
.brand { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; font-size:18px; font-weight:var(--weight-medium); letter-spacing:-.01em; color:var(--text) }
.brand-mark { width:32px; height:32px; flex-shrink:0 }
.mainnav { min-width:0 }
.mainnav ul { display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0 }
.mainnav a {
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 16px; border-radius:var(--r-pill); font-size:15px;
  color:var(--text-muted); white-space:nowrap;
  transition:color var(--duration),background-color var(--duration);
}
.mainnav a:hover { color:var(--text) }
.mainnav a.is-current { background:var(--accent-soft); color:var(--accent) }
.header-tools { display:flex; align-items:center; gap:8px; flex-shrink:0; margin-left:auto }
.language-picker { position:relative }
.lang {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:40px; padding:8px 14px; border:1px solid var(--border);
  border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text-muted); font-size:14px;
}
.lang svg { width:16px; height:16px }
.caret { font-size:11px }
.lang-short { display:none }
.language-menu {
  position:absolute; z-index:3; right:0; top:calc(100% + 12px); width:200px;
  padding:8px; border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-panel);
}
.language-menu a { display:flex; align-items:center; min-height:44px; padding:10px 14px; border-radius:var(--r-sm) }
.language-menu a:hover,.language-menu a[aria-current] { background:var(--accent-soft); color:var(--accent) }
.menu-toggle {
  display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px;
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--bg-panel); color:var(--text);
}
.menu-toggle svg { width:22px; height:22px }
.mobile-drawer { display:none }
.nav-veil {
  position:fixed; z-index:0; inset:var(--nav-h) 0 0;
  border:0; background:var(--veil); color:var(--text); cursor:default;
}
.hero {
  min-height:calc(100vh - var(--nav-h) - var(--peek));
  min-height:calc(100svh - var(--nav-h) - var(--peek));
  display:grid; align-content:center; padding-top:48px; padding-bottom:48px;
  overflow-x:clip;
}
.hero-grid { display:grid; grid-template-columns:minmax(0,44fr) minmax(0,56fr); gap:24px; align-items:center }
.copy { padding-right:24px }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 28px; padding:0; list-style:none }
.chips li {
  max-width:100%; overflow-wrap:anywhere; padding:5px 12px; border-radius:var(--r-pill);
  background:var(--bg-panel); color:var(--text-muted); border:1px solid var(--border);
  font-size:13px; line-height:1.5; box-shadow:var(--shadow-soft);
}
.chips li:first-child { color:var(--text) }
.hero h1 { margin:0; font-size:clamp(34px,3.4vw,48px); line-height:1.18 }
.hero h1 > span { display:block }
.hero h1 .h1-sub { color:var(--text-muted) }
.lede { margin:28px 0 0; max-width:30em; font-size:17px; line-height:1.75; color:var(--text-muted) }
.lede strong { color:var(--text) }
.plats { margin-top:36px; padding-top:24px; border-top:1px solid var(--border) }
.plats-label { margin:0 0 14px; font-size:13px; color:var(--text-muted); letter-spacing:.02em }
.plats ul { display:flex; flex-wrap:wrap; gap:8px 22px; margin:0; padding:0; list-style:none }
.plat { display:inline-flex; align-items:center; gap:9px; font-size:14px; color:var(--text-muted) }
.plat-tile { width:30px; height:30px; flex-shrink:0; border-radius:var(--r-xs); display:grid; place-items:center; background:var(--bg-panel); color:var(--text); border:1px solid var(--border) }
.plat-tile svg { width:15px; height:15px }
.plat:hover { color:var(--text) }
.plat:hover .plat-tile { border-color:var(--border-strong) }
.site-footer { border-top:1px solid var(--border); background:var(--bg-panel); color:var(--text); padding-top:72px; padding-bottom:28px }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1.4fr .8fr; gap:48px }
.footer-brand p { margin-top:20px; max-width:27em; font-size:14px; color:var(--text-muted) }
.footer-title { margin:0 0 18px; font-size:14px; font-weight:var(--weight-medium) }
.footer-links { display:grid; gap:10px; margin:0; padding:0; list-style:none; font-size:14px; color:var(--text-muted) }
.footer-links a { display:inline-block; padding-block:3px }
.footer-links a:hover { color:var(--accent) }
.footer-links a[aria-current] { color:var(--accent) }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; margin-top:48px; padding-top:24px; border-top:1px solid var(--border); font-size:13px; color:var(--text-muted) }
.footer-legal { display:flex; flex-wrap:wrap; gap:24px }
.prose { min-width:0; line-height:1.9 }
.prose h2 { margin-top:2.5em; margin-bottom:.8em; scroll-margin-top:32px }
.prose h3 { margin-top:1.8em; margin-bottom:.7em }
.prose a:not(.btn) { color:var(--accent); text-decoration:underline; text-underline-offset:3px }
.prose li { margin-block:.5em }
.prose img { max-width:100% }
.reveal { opacity:1; transform:none }
.reveal-ready .reveal:not(.shown) { opacity:0; transform:translateY(18px) }
.reveal-ready .reveal { transition:opacity .65s var(--ease),transform .65s var(--ease) }
.reveal-ready .reveal.shown { opacity:1; transform:none }
.decorated { position:relative; overflow-x:clip }
.feature-rows { display:grid; gap:128px }
.feature-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:80px }
.feature-row:nth-child(even) .feature-material { order:2 }
.feature-copy h2 { margin:0 0 24px }
.feature-copy p { color:var(--text-muted); line-height:1.9 }
.feature-material { padding:40px; border-radius:var(--r-xl); background:var(--bg-panel); color:var(--text); border:1px solid var(--border); box-shadow:var(--shadow-panel) }
@media (max-width:1280px) {
  .topbar-in { gap:24px }
  .mainnav a { padding-inline:12px }
}
@media (max-width:1100px) {
  .mainnav { display:none }
  .header-tools { margin-left:auto }
  .menu-toggle { display:inline-flex }
  .mobile-drawer:not([hidden]) {
    display:block; position:absolute; z-index:2; top:var(--nav-h); left:0; right:0;
    max-height:calc(100dvh - var(--nav-h)); overflow-y:auto; overscroll-behavior:contain;
    padding:20px var(--gutter) 28px; border-bottom:1px solid var(--border);
    background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-panel);
  }
  .mobile-drawer ul { list-style:none; padding:0; margin:0 }
  .mobile-drawer a { display:flex; align-items:center; width:100%; min-height:48px; padding:12px 16px; border-radius:var(--r-sm); color:var(--text-muted) }
  .mobile-drawer a.is-current,.mobile-drawer a[aria-current] { background:var(--accent-soft); color:var(--accent) }
  .drawer-languages { margin-top:20px!important; padding-top:16px!important; border-top:1px solid var(--border) }
}
@media (max-width:1080px) {
  .hero-grid { grid-template-columns:minmax(0,1fr); gap:56px }
  .copy { padding-right:0 }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .feature-row { gap:40px }
}
@media (max-width:768px) {
  :root { --gutter:24px; --section-space:72px }
  h1,.hero h1 { font-size:clamp(24px,7vw,30px) }
  h2 { font-size:28px }
  h3 { font-size:22px }
  .grid-three { grid-template-columns:minmax(0,1fr) }
  .feature-row { grid-template-columns:minmax(0,1fr) }
  .feature-row:nth-child(even) .feature-material { order:0 }
  .feature-rows { gap:72px }
  .lede { font-size:15px }
}
@media (max-width:640px) {
  :root { --gutter:20px }
  .topbar-in { gap:12px }
  .brand { font-size:16px; gap:8px }
  .header-tools { margin-left:auto; gap:6px }
  .lang { padding-inline:10px; min-height:44px }
  .lang-full { display:none }
  .lang-short { display:inline }
  .grid-two,.footer-grid { grid-template-columns:minmax(0,1fr) }
  .footer-grid { gap:32px }
  .panel,.card,.feature-material { padding:24px }
  .tilt,.phone { transform:none!important }
  .chips { gap:6px; flex-direction:row; flex-wrap:wrap }
  .chips li { padding:5px 9px; font-size:12px }
  .feature-material pre { padding:16px }
}
@media (max-width:360px) {
  :root { --gutter:16px }
  .brand { font-size:15px }
  .brand-mark { width:28px; height:28px }
  .lang svg { display:none }
  .btn { padding-inline:18px }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none!important; transition:none!important }
  .reveal-ready .reveal:not(.shown) { opacity:1; transform:none }
}