:root {
  --bg: #FFFFFF;
  --bg-cream: #FDF3E6;
  --bg-panel2: #F5F7F6;
  --border: #E3E7E4;
  --accent: #13805F;
  --accent-dark: #0B3D30;
  --text: #16302A;
  --text-muted: #5A6964;
  --link: #3A6BD6;
  --apricot: #F7DDB8;
  --apricot-line: #EAC48F;
  --frame-sage: #E2ECE6;
  --frame-mist: #EAF0ED;
  --frame-sand: #F9E8D0;
  --success: #1F9D6B;
  --warn: #C08419;
  --error: #C4473D;
  --accent-soft: rgba(19,128,95,.16);
  --line-cream: rgba(11,61,48,.09);
  --band-tint: rgba(255,255,255,.46);
  --ghost-hover: rgba(255,255,255,.6);
  --veil: rgba(11,61,48,.22);
  --clear: transparent;
  --shadow-soft: 0 1px 2px rgba(11,61,48,.05),0 10px 24px -14px rgba(11,61,48,.20);
  --shadow-card: 0 1px 2px rgba(11,61,48,.06),0 14px 30px -12px rgba(11,61,48,.16),0 38px 72px -34px rgba(11,61,48,.24);
  --shadow-frame: 0 2px 6px rgba(11,61,48,.04),0 30px 58px -26px rgba(11,61,48,.28);
  --shadow-tag: 0 10px 20px -12px rgba(192,132,25,.42);
  --shadow-cta: 0 14px 26px -14px rgba(19,128,95,.65);
  --font-display: "Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Songti SC","Noto Serif SC","Source Han Serif SC","STSong","SimSun",serif;
  --font-body: "Inter","Noto Sans SC","PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,sans-serif;
  --font-mono: "JetBrains Mono","SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --r-frame: 28px;
  --r-card: 14px;
  --r-inner: 10px;
  --r-pill: 999px;
  --r-hero: 44px;
  --r-mobile: 24px;
  --nav-h: 76px;
  --gutter: 40px;
  --width-page: 1200px;
  --width-reading: 840px;
  --space-section: 96px;
  --size-h1: clamp(34px,3.34vw,48px);
  --size-h2: clamp(26px,2.6vw,36px);
  --size-h3: 24px;
  --size-body: 16px;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 600;
  --ease: .2s ease;
}
*, *::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: var(--size-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
img, svg, video { max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: var(--clear); }
button { cursor: pointer; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-inner);
}
h1, h2, h3 { text-wrap: balance; color: var(--accent-dark); }
h1 { font: var(--weight-normal) var(--size-h1)/1.18 var(--font-display); letter-spacing: .012em; }
h2 { font: var(--weight-normal) var(--size-h2)/1.25 var(--font-display); }
h3 { font: var(--weight-normal) var(--size-h3)/1.35 var(--font-display); }
p { margin-block: 0 1.2em; }
strong { font-weight: var(--weight-bold); }
code, pre, kbd { font-family: var(--font-mono); }
code { overflow-wrap: anywhere; }
pre {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--bg-panel2);
  color: var(--text);
  font-size: 13px;
  line-height: 1.8;
  overscroll-behavior-inline: contain;
}
pre code { white-space: pre; overflow-wrap: normal; word-break: normal; }
hr { border: 0; border-top: 1px solid var(--border); margin-block: 36px; }
.wrap {
  width: 100%;
  max-width: var(--width-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.reading { max-width: var(--width-reading); }
main.wrap.reading:has(> nav:first-child) { padding-top: 32px; }
.section { padding-top: var(--space-section); padding-bottom: var(--space-section); }
.grid { display: grid; gap: 24px; }
.grid--three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.grid--two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.grid > *, .wrap > *, .prose, .prose > *, .topbar__in > *, .footer-grid > * { min-width: 0; }
.nowrap { white-space: nowrap; }
.muted, .eyebrow { color: var(--text-muted); }
.eyebrow { margin: 0 0 10px; font-size: 13px; letter-spacing: .06em; }
.inline-link, .prose a:not(.btn) {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose { line-height: 1.85; }
.prose h2 { margin-block: 2.1em .7em; }
.prose h3 { margin-block: 1.6em .6em; }
.prose li + li { margin-top: .5em; }
.prose :is(h2,h3,[id]) { scroll-margin-top: 28px; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 28px;
  border: 1px solid var(--clear);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--weight-medium);
  letter-spacing: .01em;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--ease),box-shadow var(--ease),transform var(--ease);
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn--primary { background: var(--accent); color: var(--bg); box-shadow: var(--shadow-cta); }
.btn--primary:hover, .btn--primary.is-hover { background: var(--accent-dark); color: var(--bg); }
.btn--primary:active { transform: translateY(1px); box-shadow: none; }
.btn--ghost { border: 1.5px solid var(--accent-dark); color: var(--accent-dark); background: var(--clear); }
.btn--ghost:hover, .btn--ghost.is-hover { background: var(--bg-panel2); color: var(--accent-dark); }
.hero .btn--ghost:hover { background: var(--ghost-hover); color: var(--accent-dark); }
.btn--sm { min-height: 40px; padding: 8px 20px; font-size: 14px; box-shadow: none; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--bg-panel2); color: var(--text-muted); border-color: var(--border); box-shadow: none; cursor: not-allowed; }
.btn.is-focus { outline: 2px solid var(--accent); outline-offset: 3px; }
.card, .panel {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-frame);
  padding: 28px;
}
.card { box-shadow: var(--shadow-card); }
.panel { background: var(--bg-panel2); color: var(--text); }
.card h3, .panel h3 { margin-top: 0; }
.reveal { opacity: 1; transform: none; }
.reveal-pending { opacity: 0; transform: translateY(14px); }
.reveal.shown { opacity: 1; transform: none; transition: opacity .6s ease,transform .6s ease; }

/* 页头独立宽版心，不复用正文阅读宽度。 */
#site-header { position: relative; z-index: 50; }
.topbar {
  position: relative;
  z-index: 50;
  height: var(--nav-h);
  background: var(--bg);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.topbar__in {
  max-width: min(100%,calc(1280px + var(--gutter) * 2));
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; color: var(--accent-dark); }
.brand__mark { width: 34px; height: 34px; flex-shrink: 0; }
.brand__name { font-size: 17px; font-weight: var(--weight-bold); letter-spacing: .01em; }
.dotnav { margin-left: auto; min-width: 0; }
.dotnav ul { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.dotnav li { display: flex; align-items: center; flex-shrink: 0; }
.dotnav li + li::before { content: "·"; color: var(--text-muted); margin-inline: 12px; font-weight: var(--weight-bold); }
.dotnav a { font-size: 15px; color: var(--text); text-decoration: none; padding-block: 4px; border-bottom: 1.5px solid var(--clear); transition: color var(--ease),border-color var(--ease); }
.dotnav a:hover { border-bottom-color: var(--border); }
.dotnav a[aria-current="page"] { color: var(--accent); font-weight: var(--weight-medium); border-bottom-color: var(--accent); }
.topbar__tools { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.language { position: relative; }
.lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 0 6px 18px;
  background: var(--clear);
  color: var(--text-muted);
  border: 0;
  border-left: 1px solid var(--border);
  font-size: 14px;
}
.lang svg { width: 15px; height: 15px; flex-shrink: 0; }
.lang__short { display: none; }
.language__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 180px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow-card);
}
.language__menu a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; text-decoration: none; border-radius: var(--r-inner); }
.language__menu a:hover { background: var(--bg-panel2); color: var(--text); }
.language__menu a[aria-current] { color: var(--accent); }
.menu-toggle { display: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--bg); color: var(--accent-dark); }
.menu-toggle svg { width: 20px; height: 20px; }
.mobile-drawer { display: none; }
.nav-veil { position: fixed; inset: var(--nav-h) 0 0; z-index: 40; border: 0; background: var(--veil); color: var(--text); }
.site-footer { border-top: 1px solid var(--border); background: var(--bg); color: var(--text); padding-top: 64px; padding-bottom: 28px; }
.footer-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand p { max-width: 290px; margin-top: 20px; font-size: 14px; color: var(--text-muted); line-height: 1.8; }
.site-footer h2 { font-family: var(--font-body); font-size: 14px; font-weight: var(--weight-bold); margin: 0 0 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: 9px; }
.site-footer li a { font-size: 14px; text-decoration: none; color: var(--text-muted); }
.site-footer li a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer a[aria-current] { color: var(--accent); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 48px; border-top: 1px solid var(--border); padding-top: 24px; color: var(--text-muted); font-size: 13px; }
.footer-bottom p { margin: 0; }
.footer-bottom a { text-underline-offset: 3px; }

/* 已确认首屏：只把样稿样式拆出，不改变构图。 */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow-x: clip;
  background: var(--bg-cream);
  color: var(--text);
  border-radius: 0 0 var(--r-hero) var(--r-hero);
  min-height: max(760px,calc(100vh - var(--nav-h) - 40px));
  min-height: max(760px,calc(100svh - var(--nav-h) - 40px));
  display: grid;
  grid-template-rows: 1fr auto;
}
.hero::before, .hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side,var(--apricot),var(--clear));
}
.hero::before { width: 860px; height: 860px; right: -280px; top: -360px; opacity: .6; }
.hero::after { width: 780px; height: 780px; left: -300px; bottom: -380px; opacity: .5; }
.stage { position: relative; align-self: center; height: 728px; display: grid; place-items: center; }
.hero-visual { position: absolute; inset: 0; pointer-events: none; }
.deco { position: absolute; top: 0; width: 460px; height: 728px; pointer-events: none; }
.deco--l { left: 0; }
.deco--r { right: 0; }
.deco > * { position: absolute; }
.arcs { left: 0; top: 0; width: 460px; height: 728px; z-index: 0; overflow: visible; }
.arcs path { fill: none; stroke: var(--apricot-line); stroke-width: 1.6; stroke-linecap: round; }
.frame { z-index: 1; overflow: hidden; border-radius: var(--r-frame); box-shadow: var(--shadow-frame); }
.frame--sage { background: var(--frame-sage); color: var(--accent-dark); }
.frame--mist { background: var(--frame-mist); color: var(--accent-dark); }
.frame--sand { background: var(--frame-sand); color: var(--accent-dark); }
.art { display: block; width: 100%; height: 100%; color: var(--accent-dark); stroke-width: 1.5; }
.art .faint { stroke-opacity: .5; }
.art .led { fill: currentColor; stroke: none; opacity: .45; }
.art .led-on { fill: var(--accent); stroke: none; }
.art .ink { fill: currentColor; stroke: none; }
.art .paper-txt { font-family: var(--font-mono); font-size: 6px; fill: currentColor; stroke: none; }
.art .zz { font-family: var(--font-display); fill: currentColor; stroke: none; opacity: .7; }
.f-yaml { left: 104px; top: 48px; width: 148px; height: 148px; }
.f-laptop { left: -44px; top: 300px; width: 276px; height: 300px; }
.f-phone { left: 228px; top: 36px; width: 210px; height: 220px; }
.f-router { left: 214px; top: 478px; width: 286px; height: 230px; }
.tag {
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 9px 16px 9px 13px;
  border-radius: var(--r-pill);
  background: var(--apricot);
  color: var(--accent-dark);
  font-size: 14px;
  font-weight: var(--weight-medium);
  line-height: 20px;
  overflow-wrap: anywhere;
  box-shadow: var(--shadow-tag);
}
.tag svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.t-rule { left: 168px; top: 470px; }
.t-sub { left: 150px; top: 198px; }
.t-tun { left: 148px; top: 452px; }
.ui-card { z-index: 3; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.c-config { left: 196px; top: 150px; width: 214px; }
.c-mode { left: 64px; top: 568px; width: 232px; }
.c-rule { left: 64px; top: 296px; width: 300px; }
.ui-bar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border); }
.ui-dots { display: inline-flex; gap: 5px; flex-shrink: 0; }
.ui-dots i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--border); color: var(--text); }
.ui-file { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }
.code { margin: 0; padding: 11px 16px 13px; border: 0; border-radius: 0; background: var(--clear); color: var(--text-muted); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.8; white-space: pre; }
.code .k { color: var(--accent-dark); }
.ui-pad { padding: 14px 16px 16px; }
.ui-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ui-label { font-size: 12.5px; color: var(--text-muted); letter-spacing: .02em; }
.ui-mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }
.hit { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 9px; border-radius: var(--r-pill); background: var(--bg-panel2); color: var(--accent-dark); border: 1px solid var(--border); font-size: 12px; font-weight: var(--weight-medium); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); color: var(--accent-dark); box-shadow: 0 0 0 3px var(--accent-soft); flex-shrink: 0; }
.rule { display: block; margin-top: 11px; padding: 10px 12px; background: var(--bg-panel2); color: var(--text); border-radius: var(--r-inner); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; white-space: nowrap; overflow-x: auto; }
.rule .r-type, .rule .r-pol { color: var(--accent-dark); font-weight: var(--weight-bold); }
.rule .r-sep { color: var(--text-muted); }
.seg { display: flex; margin-top: 11px; padding: 3px; background: var(--bg-panel2); color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--r-pill); }
.seg span { flex: 1; text-align: center; font-size: 13px; line-height: 1; padding: 8px 0; border-radius: var(--r-pill); }
.seg .is-on { background: var(--accent); color: var(--bg); font-weight: var(--weight-medium); }
.hero__copy { position: relative; z-index: 4; max-width: 640px; padding-inline: 20px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.badge { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin: 0; padding: 7px 16px 7px 13px; border-radius: var(--r-pill); background: var(--bg); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-soft); font-size: 13px; line-height: 20px; letter-spacing: .02em; overflow-wrap: anywhere; }
.badge .dot { width: 8px; height: 8px; box-shadow: 0 0 0 4px var(--accent-soft); }
.hero h1 { margin: 24px 0 0; font-weight: var(--weight-normal); font-size: clamp(32px,3.34vw,48px); line-height: 1.18; }
.hero h1 span { display: block; }
.hero__desc { max-width: 560px; margin: 22px 0 0; font-size: 17px; line-height: 1.75; color: var(--text-muted); }
.hero__desc strong { color: var(--accent-dark); }
.cta { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.plats { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px; }
.plats__lead { font-size: 13px; color: var(--text-muted); padding-right: 20px; border-right: 1px solid var(--line-cream); line-height: 30px; }
.plat { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-size: 14px; text-decoration: none; }
.plat__ico { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--bg); color: var(--accent-dark); border: 1px solid var(--border); }
.plat__ico svg { width: 14px; height: 14px; }
.plat:hover .plat__name { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--border); }
.mdeco, .mrule { display: none; }
.factband { position: relative; z-index: 4; border-top: 1px solid var(--line-cream); background: var(--band-tint); color: var(--text); }
.factband ul { list-style: none; margin: 0 auto; padding: 0 32px; max-width: 1240px; height: 56px; display: flex; align-items: center; justify-content: center; }
.factband li { display: flex; align-items: baseline; gap: 10px; padding: 0 24px; white-space: nowrap; }
.factband li + li { border-left: 1px solid var(--line-cream); }
.factband .fk { font-size: 12px; color: var(--text-muted); letter-spacing: .04em; }
.factband .fv { font-family: var(--font-mono); font-size: 13px; font-weight: var(--weight-medium); color: var(--accent-dark); }
.dl { padding-top: 64px; padding-bottom: 104px; }
.dl__head { display: grid; grid-template-columns: 1fr minmax(0,420px); align-items: end; gap: 40px; }
.dl h2 { margin: 0; font-size: 34px; }
.dl__note { margin: 0; font-size: 15px; line-height: 1.75; color: var(--text-muted); }
.dl__grid { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.dl__grid > * { min-width: 0; }
.dlcard { height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 22px; border-radius: var(--r-frame); background: var(--bg); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-soft); }
.dlcard__ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-panel2); color: var(--accent-dark); flex-shrink: 0; }
.dlcard__ico svg { width: 20px; height: 20px; }
.dlcard h3 { margin: 6px 0 0; font-family: var(--font-body); font-size: 17px; font-weight: var(--weight-bold); }
.dlcard p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--text-muted); flex: 1; }
.dlcard a { font-size: 14px; color: var(--link); text-decoration: none; }
.dlcard a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width:1360px) and (min-width:1024px) {
  .deco--l { transform: scale(.86); transform-origin: 0 50%; }
  .deco--r { transform: scale(.86); transform-origin: 100% 50%; }
}
@media (max-width:1199px) {
  .dotnav { display: none; }
  .topbar__tools { margin-left: auto; }
  .menu-toggle { display: inline-flex; }
  .mobile-drawer:not([hidden]) {
    display: block;
    position: absolute;
    inset: var(--nav-h) 0 auto;
    z-index: 55;
    max-height: calc(100vh - var(--nav-h));
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px var(--gutter) 28px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    box-shadow: var(--shadow-card);
  }
  .mobile-drawer ul { list-style: none; padding: 0; margin: 0; }
  .mobile-drawer a { display: flex; align-items: center; width: 100%; min-height: 46px; padding: 10px 12px; text-decoration: none; }
  .mobile-drawer a[aria-current] { color: var(--accent); }
  .mobile-drawer a:hover { background: var(--bg-panel2); color: var(--text); }
  .mobile-drawer__languages { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
}
@media (max-width:1180px) and (min-width:1024px) {
  .deco--l, .deco--r { transform: scale(.72); }
  .hero__copy { max-width: 520px; }
  .hero__desc { max-width: 480px; font-size: 16px; }
  .plats__lead { display: none; }
  .dl__grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width:1023px) {
  :root { --nav-h: 64px; --gutter: 20px; --space-section: 64px; }
  .topbar__in { gap: 16px; }
  .brand__name { font-size: 16px; }
  .hero { min-height: 0; border-radius: 0 0 var(--r-frame) var(--r-frame); }
  .stage { height: auto; padding-top: 26px; padding-bottom: 34px; }
  .deco { display: none; }
  .mdeco { display: flex; justify-content: center; gap: 12px; margin-bottom: 22px; }
  .mframe { width: 148px; height: 132px; border-radius: var(--r-mobile); overflow: hidden; box-shadow: var(--shadow-frame); }
  .mframe .art { stroke-width: 2.6; }
  .hero h1 { font-size: clamp(24px,7.4vw,30px); margin-top: 18px; }
  .hero__desc { font-size: 15px; line-height: 1.7; margin-top: 16px; }
  .cta { margin-top: 22px; gap: 10px; }
  .cta .btn { min-height: 48px; padding-inline: 24px; font-size: 15px; }
  .mrule { display: block; position: relative; width: 100%; max-width: 330px; margin-top: 24px; text-align: left; }
  .plats { margin-top: 22px; gap: 10px 16px; }
  .plats__lead { display: none; }
  .factband ul { height: auto; flex-wrap: wrap; padding: 14px 16px; gap: 8px 0; }
  .factband li { padding: 2px 12px; }
  .factband li + li { border-left: 0; }
  .dl { padding-top: 48px; padding-bottom: 72px; }
  .dl__head { grid-template-columns: 1fr; gap: 14px; }
  .dl h2 { font-size: 26px; }
  .dl__grid { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
  .dlcard { display: grid; grid-template-columns: 44px minmax(0,1fr); column-gap: 16px; row-gap: 4px; padding: 18px 20px; border-radius: var(--r-mobile); }
  .dlcard__ico { grid-row: span 3; }
  .dlcard h3 { margin: 0; }
  .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; }
}
@media (max-width:768px) {
  h1 { font-size: clamp(24px,6vw,30px); }
  .grid--three, .grid--two { grid-template-columns: 1fr; }
}
@media (max-width:640px) {
  :root { --gutter: 20px; }
  .tilt, [data-tilt] { transform: none !important; }
  .lang__full { display: none; }
  .lang__short { display: inline; }
  .lang { padding-left: 10px; }
  .topbar__tools { gap: 8px; margin-left: auto; }
  .topbar__download { display: none; }
  .topbar__in { gap: 8px; }
  .brand { gap: 6px; }
  .brand__mark { width: 30px; height: 30px; }
  .brand__name { font-size: 15px; }
  .hero__copy { width: 100%; }
  .mframe { width: 128px; height: 114px; }
  .rule { font-size: 11px; }
  .card, .panel { padding: 22px; }
}
@media (max-width:360px) {
  :root { --gutter: 16px; }
  .brand__name { font-size: 14px; }
  .topbar__tools { gap: 4px; }
  .lang { border-left: 0; padding-left: 0; }
  .badge { font-size: 11px; gap: 8px; }
  .mframe { width: 116px; height: 104px; }
  .cta .btn { padding-inline: 20px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .reveal-pending { opacity: 1; transform: none; }
}