:root {
  --bg:#F6F6F8;
  --panel:#FFFFFF;
  --panel-2:#EDEEF3;
  --border:#E1E3EA;
  --accent:#2F63E0;
  --accent-dark:#1E44B0;
  --text:#16181D;
  --muted:#5B606B;
  --success:#1F9D6B;
  --warn:#C98512;
  --error:#D6453D;
  --band:#A9C1F5;
  --band-tint:#C9D8F9;
  --band-deep:#98B3EF;
  --on-band:#232833;
  --teal:#A8D0DA;
  --lilac:#D3BDEB;
  --teal-soft:#DCECF0;
  --lilac-soft:#EEE5F6;
  --teal-ink:#145665;
  --accent-wash:#E8EEFC;
  --success-wash:#E7F4EE;
  --warn-wash:#FAF0DC;
  --error-wash:#FBECEB;
  --graphite:#2A2E36;
  --on-graphite:#E6E8EE;
  --ctl-dot:#6E7380;
  --chassis:#C9CDD7;
  --chassis-edge:#B2B7C3;
  --metal:#25282F;
  --metal-hi:#5C626E;
  --metal-lo:#111317;
  --switch-off:#D5D8E0;
  --ink-rgb:18 22 36;
  --white-rgb:255 255 255;
  --clear:transparent;
  --font-display:"Inter","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"Inter","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-mono:"JetBrains Mono","SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --weight-normal:400;
  --weight-medium:500;
  --weight-bold:700;
  --weight-heavy:800;
  --weight-display:900;
  --r-tiny:4px;
  --r-field:8px;
  --r-nav:10px;
  --r-btn:12px;
  --r-cell:20px;
  --r-card:24px;
  --r-block:30px;
  --r-feature:32px;
  --r-pill:999px;
  --r-round:50%;
  --r-window:16px;
  --r-chassis:18px;
  --r-phone:48px;
  --r-screen:39px;
  --gutter:32px;
  --content-width:1296px;
  --reading-width:800px;
  --head-width:1280px;
  --head-height:72px;
  --ease:180ms ease;
  --shadow-card:0 1px 2px rgb(var(--ink-rgb) / .06),0 8px 22px -12px rgb(var(--ink-rgb) / .22);
  --shadow-lift:0 2px 4px rgb(var(--ink-rgb) / .08),0 18px 32px -14px rgb(var(--ink-rgb) / .30);
  --shadow-near:0 2px 3px rgb(var(--ink-rgb) / .20),0 10px 18px -6px rgb(var(--ink-rgb) / .24);
  --shadow-far:0 50px 80px -26px rgb(var(--ink-rgb) / .40);
  --shadow-button:0 1px 2px rgb(var(--ink-rgb) / .08),0 10px 22px -12px rgb(var(--ink-rgb) / .35);
  --shadow-veil:rgb(var(--ink-rgb) / .32);
}
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:24px }
html.nav-open { overflow:hidden }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
[hidden] { display:none !important }
a { color:inherit; text-decoration:none }
button,input,select,textarea { font:inherit }
button { cursor:pointer }
button:disabled { cursor:not-allowed }
img,svg { display:block; max-width:100% }
img { height:auto }
svg,.icon,.status-dot { flex-shrink:0 }
button svg,a svg { flex-shrink:0 }
:focus-visible { outline:3px solid var(--accent-dark); outline-offset:3px; border-radius:var(--r-nav) }
h1,h2,h3,h4 { font-family:var(--font-display); color:var(--text); text-wrap:balance; overflow-wrap:break-word }
h1 { margin:22px 0 0; font-size:clamp(34px,3.4vw,48px); font-weight:var(--weight-display); line-height:1.14; letter-spacing:-.02em }
h2 { margin:0 0 20px; font-size:clamp(26px,2.5vw,36px); font-weight:var(--weight-display); line-height:1.25; letter-spacing:-.02em }
h3 { margin:0 0 12px; font-size:24px; font-weight:var(--weight-heavy); line-height:1.35 }
p { margin:0 0 20px }
strong { font-weight:var(--weight-heavy) }
small { font-size:14px }
code,kbd,pre { font-family:var(--font-mono) }
code { overflow-wrap:anywhere; font-size:.88em }
pre { max-width:100%; min-width:0; overflow-x:auto; padding:24px; border-radius:var(--r-card); background:var(--graphite); color:var(--on-graphite); font-size:14px; line-height:1.7 }
pre code { overflow-wrap: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(--content-width); padding-inline:var(--gutter); margin-inline:auto }
.reading { width:100%; max-width:calc(var(--reading-width) + var(--gutter) * 2); padding-inline:var(--gutter); margin-inline:auto }
.section { padding-top:88px; padding-bottom:88px }
.section--white { background:var(--panel); color:var(--text) }
.section--bed { background:var(--panel-2); color:var(--text) }
.section--decorated { position:relative; overflow-x:clip }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px }
.grid > *, .bento > *, .feature-tabs > *, .footer-grid > *, .prose > * { min-width:0 }
.stack > * + * { margin-top:24px }
.card,.panel { padding:32px; border-radius:var(--r-card); background:var(--panel); color:var(--text); box-shadow:var(--shadow-card); min-width:0 }
.panel--quiet { background:var(--panel-2); color:var(--text); box-shadow:none }
.muted { color:var(--muted) }
.eyebrow { margin:0 0 8px; font-size:14px; line-height:1.4; font-weight:var(--weight-bold); color:var(--accent-dark) }
.keep { white-space:nowrap }
.prose { min-width:0 }
.prose p,.prose li { overflow-wrap:break-word }
.prose a { color:var(--accent-dark); text-decoration:underline; text-underline-offset:4px }
.prose h2 { margin-top:56px }
.prose h3 { margin-top:32px }
.prose :first-child { margin-top:0 }
.prose img { border-radius:var(--r-card) }
.skip-link { position:fixed; left:16px; top:12px; transform:translateY(-180%); padding:10px 18px; background:var(--panel); color:var(--accent-dark); z-index:100; border-radius:var(--r-btn) }
.skip-link:focus { transform:none }
.cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:14px 24px; border:0; border-radius:var(--r-btn);
  font-size:16px; font-weight:var(--weight-heavy); line-height:1.4; letter-spacing:-.005em;
  text-align:center; transition:transform var(--ease),box-shadow var(--ease),background-color var(--ease),color var(--ease);
}
.btn svg { width:18px; height:18px }
.btn-primary { background:var(--panel); color:var(--accent); box-shadow:var(--shadow-button) }
.btn-primary:hover,.btn-primary.is-hover { transform:translateY(-2px); color:var(--accent-dark); box-shadow:var(--shadow-lift) }
.btn-solid { background:var(--accent); color:var(--panel); box-shadow:var(--shadow-card) }
.btn-solid:hover,.btn-solid.is-hover { background:var(--accent-dark); color:var(--panel) }
.btn-ghost { background:var(--clear); color:var(--text); box-shadow:inset 0 0 0 2px var(--text) }
.btn-ghost:hover,.btn-ghost.is-hover { background:var(--band-tint); color:var(--text) }
.btn:active,.btn.is-active { transform:translateY(1px); box-shadow:none }
.btn:disabled,.btn[aria-disabled="true"] { background:var(--panel-2); color:var(--muted); box-shadow:none; transform:none }
.btn.is-focus { outline:3px solid var(--accent-dark); outline-offset:3px }
.site-head { position:relative; z-index:30; background:var(--panel); color:var(--text); border-bottom:1px solid var(--border) }
.head-inner { position:relative; width:100%; max-width:min(100%,calc(var(--head-width) + var(--gutter) * 2)); margin-inline:auto; padding-inline:var(--gutter); min-height:var(--head-height); display:flex; align-items:center; gap:24px }
.brand { display:flex; align-items:center; gap:12px; flex-shrink:0; font-family:var(--font-display); font-weight:var(--weight-heavy); font-size:19px; letter-spacing:-.01em; line-height:1.2; color:var(--text) }
.brand img { width:38px; height:38px; flex-shrink:0 }
.nav { display:flex; align-items:center; min-width:0; margin-left:auto }
.nav ul { display:flex; align-items:center; list-style:none; margin:0; padding:0; gap:2px }
.nav a { display:flex; align-items:center; gap:8px; min-height:40px; padding:8px 13px; border-radius:var(--r-nav); font-size:15px; font-weight:var(--weight-medium); line-height:1.4; white-space:nowrap; color:var(--text); transition:background-color var(--ease),color var(--ease) }
.nav a svg { width:18px; height:18px; color:var(--muted) }
.nav a:hover { background:var(--bg); color:var(--text) }
.nav a[aria-current="page"] { background:var(--accent-wash); color:var(--accent); font-weight:var(--weight-bold) }
.nav a[aria-current="page"] svg { color:var(--accent) }
.head-tools { display:flex; align-items:center; flex-shrink:0; gap:8px; position:relative }
.lang { padding:0 4px 0 18px; border:0; border-left:1px solid var(--border); background:var(--clear); color:var(--text); min-height:44px; display:flex; align-items:center; gap:8px; font-size:15px; font-weight:var(--weight-medium); white-space:nowrap }
.lang svg { width:18px; height:18px; color:var(--muted) }
.lang-short { display:none }
.caret { font-size:11px; color:var(--muted) }
.lang-menu { position:absolute; right:0; top:calc(100% + 12px); width:200px; padding:8px; border-radius:var(--r-card); background:var(--panel); color:var(--text); box-shadow:var(--shadow-lift) }
.lang-menu a { display:flex; align-items:center; min-height:44px; padding:10px 16px; border-radius:var(--r-btn); font-size:15px }
.lang-menu a:hover,.lang-menu a[aria-current] { background:var(--accent-wash); color:var(--accent-dark) }
.menu-toggle { display:none; min-width:44px; min-height:44px; border:0; border-radius:var(--r-btn); background:var(--bg); color:var(--text); align-items:center; justify-content:center }
.menu-toggle svg { width:22px; height:22px }
.nav-drawer { position:absolute; top:100%; left:0; right:0; z-index:2; padding:16px var(--gutter) 24px; background:var(--panel); color:var(--text); box-shadow:var(--shadow-lift); max-height:calc(100dvh - var(--head-height)); overflow-y:auto; overscroll-behavior:contain }
.nav-drawer ul { list-style:none; margin:0; padding:0 }
.nav-drawer a { display:flex; width:100%; min-height:48px; align-items:center; gap:12px; padding:12px 16px; border-radius:var(--r-btn); font-size:16px }
.nav-drawer a svg { width:20px; height:20px }
.nav-drawer a:hover,.nav-drawer a[aria-current] { background:var(--accent-wash); color:var(--accent-dark) }
.drawer-languages { border-top:1px solid var(--border); margin-top:16px; padding-top:16px }
.nav-veil { position:fixed; inset:var(--head-height) 0 0; z-index:20; border:0; background:var(--shadow-veil); color:var(--panel); cursor:pointer }
.site-foot { padding-top:64px; padding-bottom:28px; background:var(--panel-2); color:var(--text) }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1.3fr 1fr; gap:40px }
.footer-brand p { max-width:300px; margin-top:20px; font-size:15px; color:var(--muted) }
.site-foot h2 { font-size:16px; font-weight:var(--weight-heavy); margin-bottom:16px }
.site-foot ul { padding:0; margin:0; list-style:none }
.site-foot li { margin-bottom:8px }
.site-foot li a { display:inline-block; padding:3px 0; font-size:14px; color:var(--muted) }
.site-foot a:hover { color:var(--accent-dark) }
.footer-bottom { margin-top:40px; padding-top:24px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; font-size:14px; color:var(--muted) }
.footer-legal { display:flex; flex-wrap:wrap; gap:20px }
.reveal { opacity:1; transform:none }
.reveal.reveal-ready { opacity:0; transform:translateY(16px); transition:opacity 500ms ease,transform 500ms ease }
.reveal.shown { opacity:1; transform:none }
@media (min-width:1360px) {
  .hero > .wrap { max-width:1360px }
}
@media (max-width:1279px) {
  .head-inner { gap:16px }
  .head-tools { margin-left:auto }
  .nav--desktop { display:none }
  .menu-toggle { display:flex }
}
@media (max-width:768px) {
  h1 { font-size:clamp(24px,4vw,30px) }
  h2 { font-size:28px }
  h3 { font-size:21px }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .section { padding-top:56px; padding-bottom:56px }
}
@media (max-width:640px) {
  :root { --gutter:16px }
  .grid { grid-template-columns:minmax(0,1fr) }
  .brand { font-size:15px; gap:8px }
  .brand img { width:32px; height:32px }
  .head-inner { gap:8px }
  .head-tools { margin-left:auto; gap:4px }
  .lang { padding-left:8px; border-left:0; gap:5px }
  .lang-full { display:none }
  .lang-short { display:inline }
  .card,.panel { padding:24px }
  .tilt,.tilt-left,.tilt-right,[data-tilt] { transform:none !important }
  .footer-grid { grid-template-columns:minmax(0,1fr); gap:28px }
  .footer-bottom { display:block }
  .footer-legal { margin-top:12px }
  pre { padding:18px }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { transition:none !important; animation:none !important }
  .reveal.reveal-ready { opacity:1; transform:none }
}