:root {
  --blue: #176ff5;
  --blue-dark: #1256d9;
  --text: #111820;
  --muted: #596574;
  --line: #dce8f5;
  --pale: #f4f9ff;
}

* { box-sizing: border-box; }
section[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }
body {
  margin: 0;
  color: var(--text);
  background: #fff;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.logo-mark { display: block; width: 28px; height: 28px; flex: 0 0 auto; }
.image-load-failed { visibility: hidden; }

.site-header {
  position: relative;
  z-index: 20;
  height: 82px;
  padding: 0 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f2f8fe;
}
.brand { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.brand img { width: 38px; height: 38px; }
.nav-links { margin-left: auto; margin-right: 28px; display: flex; align-items: center; gap: 39px; font-size: 12px; color: #2c3541; }
.nav-links a { position: relative; padding: 31px 0 29px; }
.nav-links a::after { content: ""; position: absolute; left: 50%; bottom: 20px; width: 0; height: 2px; background: var(--blue); transform: translateX(-50%); transition: width .2s ease; }
.nav-links a:hover::after, .nav-links .active::after { width: 16px; }
.nav-links .active { color: var(--blue); font-weight: 700; }
.nav-download { min-width: 72px; height: 30px; padding: 0 14px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #1681ff, #2461eb); font-size: 12px; box-shadow: 0 8px 20px rgba(25, 107, 244, .16); }

.hero {
  position: relative;
  height: 350px;
  overflow: visible;
  background-color: #f2f8fe;
  background-image: radial-gradient(
    ellipse 250px 195px at calc(50% + 184px) 55%,
    rgba(151, 193, 248, .86) 0%,
    rgba(183, 212, 250, .78) 44%,
    rgba(219, 233, 252, .45) 68%,
    rgba(242, 248, 254, 0) 100%
  );
}
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 150px; background: linear-gradient(to bottom, rgba(242, 248, 254, 0) 0%, rgba(248, 251, 255, .58) 55%, #fff 100%); pointer-events: none; }
.hero-inner { position: relative; z-index: 2; width: 650px; height: 100%; margin: 0 auto; display: grid; grid-template-columns: 390px 260px; }
.hero-copy { padding-top: 52px; }
.hero h1 { margin: 0; font-size: 30px; line-height: 1.45; font-weight: 800; }
.hero h1 strong { font-weight: 800; }
.hero-copy > p { margin: 21px 0 0; color: #394553; font-size: 11px; line-height: 1.9; }
.hero-actions { display: flex; gap: 12px; margin-top: 26px; }
.button { height: 38px; min-width: 94px; padding: 0 20px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-1px); }
.button.primary { color: #fff; background: linear-gradient(135deg, #1187ff, #2858ef); box-shadow: 0 9px 22px rgba(26, 112, 244, .2); }
.button.secondary { color: #303b49; border: 1px solid #b8d5f8; background: rgba(255, 255, 255, .48); }
.button.small { min-width: 90px; height: 34px; margin-top: 18px; }
.version-picker { position: relative; display: inline-flex; }
.version-picker-toggle { display: inline-block; padding: 0 2px; border: 0; color: #4f6f9f; background: transparent; font: inherit; font-size: 12px; font-weight: 600; line-height: 38px; cursor: pointer; }
.version-picker-toggle:hover, .version-picker-toggle:focus-visible { color: var(--blue); outline: 0; }
.version-menu { position: absolute; z-index: 9999999; left: 0; top: calc(100% + 9px); width: 218px; padding: 10px; display: none; border: 1px solid #d8e7f8; border-radius: 9px; background: rgba(255, 255, 255, .98); box-shadow: 0 12px 30px rgba(36, 91, 148, .16); text-align: left; }
.version-picker.is-open .version-menu { display: block; }
.version-menu.is-open { display: block; }
.version-menu > button { width: 100%; min-height: 28px; padding: 4px 7px; border: 0; border-radius: 5px; display: flex; align-items: center; gap: 8px; color: #2d3e51; background: transparent; font: inherit; font-size: 10px; text-align: left; cursor: pointer; }
.version-icon { width: 17px; height: 17px; flex: 0 0 17px; object-fit: contain; }
.version-menu > button:hover, .version-menu > button:focus-visible { color: var(--blue); background: #eef6ff; outline: 0; }
.version-menu > button.is-selected { color: var(--blue); font-weight: 700; background: #eaf4ff; }
.download-version-picker { z-index: 5; margin-left: 10px; vertical-align: middle; }
.download-other-toggle { font-size: 10px; line-height: 1.4; }
.download-other-toggle:hover { color: var(--blue); }
.download-version-picker .version-menu { left: 50%; transform: translateX(-50%); }

/* ----- Language picker (top-right, self-hosted i18n) ----- */
.translate-picker { position: relative; display: inline-flex; margin-right: 18px; }
.translate-picker-toggle { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid #d8e7f8; background: rgba(255, 255, 255, .65); color: #2c3541; font: inherit; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.translate-picker-toggle:hover, .translate-picker-toggle:focus-visible { color: var(--blue); border-color: #b9d8fb; background: #fff; outline: 0; }
.translate-picker.is-open .translate-picker-toggle { color: var(--blue); border-color: var(--blue); background: #fff; }
.translate-globe { flex: 0 0 auto; }
.translate-current { white-space: nowrap; }
.translate-caret { flex: 0 0 auto; transition: transform .2s ease; }
.translate-picker.is-open .translate-caret { transform: rotate(180deg); }
.translate-menu { position: absolute; z-index: 9999999; left: 0; top: calc(100% + 9px); width: 150px; padding: 8px; display: none; border: 1px solid #d8e7f8; border-radius: 9px; background: rgba(255, 255, 255, .98); box-shadow: 0 12px 30px rgba(36, 91, 148, .16); text-align: left; }
.translate-picker.is-open .translate-menu, .translate-menu.is-open { display: block; }
.translate-menu > button { width: 100%; min-height: 30px; padding: 5px 10px; border: 0; border-radius: 5px; display: flex; align-items: center; gap: 8px; color: #2d3e51; background: transparent; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.translate-menu > button:hover, .translate-menu > button:focus-visible { color: var(--blue); background: #eef6ff; outline: 0; }
.translate-menu > button.is-selected { color: var(--blue); font-weight: 700; background: #eaf4ff; }
.meta { margin-top: 21px; display: flex; align-items: center; gap: 12px; color: #65707d; font-size: 9px; }
.meta i { width: 1px; height: 10px; background: #b9c2cd; }
.phone { position: relative; overflow: hidden; background: #06080b; border: 5px solid #0a0b0d; border-radius: 27px; box-shadow: 0 16px 30px rgba(22, 41, 62, .2), 0 0 0 2px #89929b; }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 21px; }
.phone .speaker { position: absolute; z-index: 2; top: 7px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: #050607; transform: translateX(-50%); }
.phone-hero { align-self: start; width: 176px; height: 373px; margin: 7px 0 0 30px; }
.phone-hero.desktop-version { width: 340px; height: 196px; margin: 78px 0 0 -30px; border-width: 4px; border-radius: 15px; box-shadow: 0 16px 30px rgba(22, 41, 62, .2), 0 0 0 2px #89929b; }
.phone-hero.desktop-version img { border-radius: 9px; }
.phone-hero.desktop-version .speaker { display: none; }
.hero-shape { position: absolute; z-index: 1; display: block; background: #cee6ff; opacity: .7; }
.shape-one { width: 41px; height: 23px; left: 55px; top: 12px; border-radius: 50%; filter: blur(2px); }
.shape-two { width: 24px; height: 24px; right: 95px; top: 80px; border-radius: 50%; }
.shape-three { width: 22px; height: 27px; left: 54%; top: 190px; border-radius: 9px 15px 7px 5px; background: #fff; transform: rotate(14deg); }

.feature-strip {
  position: relative;
  z-index: 10;
  width: calc(100% - 24px);
  height: 92px;
  margin: -32px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 8px 22px rgba(55, 97, 138, .09);
  border-radius: 6px;
}
.feature-strip article { min-width: 0; padding: 0 10px; display: grid; grid-template-columns: 29px minmax(0, auto); grid-template-rows: auto auto; justify-content: center; align-items: center; column-gap: 11px; row-gap: 3px; text-align: left; }
.feature-strip img { grid-row: 1 / 3; width: 29px; height: 29px; margin: 0; }
.feature-strip h3 { align-self: end; margin: 0; font-size: 11px; line-height: 1.35; }
.feature-strip p { align-self: start; margin: 0; color: #6b7581; font-size: 8px; line-height: 1.4; white-space: nowrap; }

.content-section { position: relative; overflow: hidden; }
.engine-showcase { --engine-accent: #1677ff; --engine-soft: #eef6ff; min-height: 430px; background: #fff; }
.engine-showcase[data-active-engine="chromium"] { --engine-accent: #3b67e9; --engine-soft: #eef1ff; }
.engine-showcase[data-active-engine="webview"] { --engine-accent: #16b85b; --engine-soft: #edfff4; }
.engine-inner { width: 686px; margin: 0 auto; padding: 27px 0 32px; }
.engine-heading { text-align: center; }
.engine-heading .eyebrow { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 6px 14px; border-radius: 22px; color: var(--engine-accent); background: var(--engine-soft); font-size: 10px; }
.engine-heading-mark { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: #fff; background: var(--engine-accent); font-size: 10px; line-height: 1; }
.engine-heading h2 { margin: 0; font-size: 27px; line-height: 1.3; font-weight: 800; }
.engine-heading > p:last-child { margin: 9px 0 18px; color: #65758c; font-size: 11px; }
.engine-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; min-height: 64px; padding: 4px; overflow: hidden; border: 0; border-radius: 10px; background: #f6f8fb; }
.engine-tab { min-width: 0; padding: 9px 15px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 7px; color: #34445a; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.engine-tab:hover { background: var(--engine-soft); }
.engine-tab.is-active { position: relative; color: var(--engine-accent); background: #fff; box-shadow: 0 7px 20px rgba(61, 111, 175, .12); }
.engine-tab > img { width: 34px; height: 34px; flex: 0 0 34px; }
.engine-tab span { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.engine-tab b { font-size: 12px; white-space: nowrap; }
.engine-tab small { color: #68778d; font-size: 9px; white-space: nowrap; }
.engine-panels { margin-top: 12px; }
.engine-panel { min-height: 215px; display: grid; grid-template-columns: 270px 1fr; align-items: center; overflow: hidden; border: 0; border-radius: 12px; background: linear-gradient(105deg, #fff 0%, #fff 43%, var(--engine-soft) 100%); box-shadow: 0 10px 26px rgba(55, 97, 138, .09); }
.engine-panel[hidden] { display: none !important; }
.engine-panel-copy { padding: 23px 0 20px 28px; }
.engine-panel-title { display: flex; align-items: center; gap: 12px; }
.engine-panel-title > img { width: 46px; height: 46px; flex: 0 0 46px; padding: 7px; border-radius: 22%; background: linear-gradient(145deg, #fff, #e9f4ff); box-shadow: 0 7px 16px rgba(31, 113, 238, .2), inset 0 0 0 1px rgba(255, 255, 255, .8); }
[data-engine-panel="chromium"] .engine-panel-title > img { background: linear-gradient(145deg, #fff, #edf0ff); box-shadow: 0 7px 16px rgba(66, 91, 220, .2), inset 0 0 0 1px rgba(255, 255, 255, .8); }
[data-engine-panel="webview"] .engine-panel-title > img { background: linear-gradient(145deg, #fff, #e9fff2); box-shadow: 0 7px 16px rgba(18, 172, 83, .2), inset 0 0 0 1px rgba(255, 255, 255, .8); }
.engine-panel-title h3 { margin: 0; font-size: 20px; line-height: 1.25; }
.engine-panel-title p { margin: 4px 0 0; color: #60718b; font-size: 11px; }
.engine-benefits { margin-top: 23px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.engine-benefits div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; color: #53657d; font-size: 10px; white-space: nowrap; }
.engine-benefits img { width: 24px; height: 24px; padding: 4px; border-radius: 6px; background: var(--engine-soft); }
.engine-showcase[data-active-engine="webview"] .engine-benefits img { filter: hue-rotate(285deg) saturate(.9); }
.engine-panel-art { min-width: 0; padding-right: 8px; }
.engine-panel-art img { width: 100%; max-height: 238px; object-fit: contain; }
.section-inner { position: relative; z-index: 2; width: 686px; height: 100%; margin: 0 auto; }
.split { display: grid; grid-template-columns: 302px 384px; align-items: center; }
.split.reverse { grid-template-columns: 384px 302px; }
.kernel { height: 278px; background: #fff; }
.extensions { height: 230px; background: linear-gradient(105deg, #f2f8ff, #fff 54%, #eef7ff); }
.privacy { height: 262px; background: #fff; }
.section-copy { padding-top: 2px; }
.eyebrow { margin: 0 0 10px; color: #4f6f9f; font-size: 10px; font-weight: 700; }
.section-copy h2 { margin: 0; font-size: 23px; line-height: 1.45; font-weight: 800; }
.description { margin: 17px 0 0; color: #4a5664; font-size: 10px; line-height: 1.9; }
.hero-copy > p, .description { width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.mini-features { width: 245px; margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); }
.mini-features div { display: flex; flex-direction: column; align-items: flex-start; }
.mini-features img { width: 25px; height: 25px; margin: 0 0 7px 3px; }
.mini-features b { font-size: 9px; }
.mini-features span { margin-top: 4px; color: #77828d; font-size: 8px; }
.video-device { position: relative; width: 350px; height: 162px; margin-left: 25px; padding: 7px;border-radius: 24px; background: #090b0d; box-shadow: 0 15px 25px rgba(24, 37, 49, .22), 0 0 0 1px #9299a0; transform: translateY(8px); }
.video-device img { width: 100%; height: 100%; border-radius: 16px; object-fit: cover; }
.camera-dot { position: absolute; z-index: 2; top: 50%; left: 10px; width: 9px; height: 9px; background: #050607; border-radius: 50%; transform: translateY(-50%); }
.video-tag { position: absolute; top: -20px; right: -23px; height: 29px; padding: 0 15px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #1681ff, #2a5de9); font-size: 10px; box-shadow: 0 7px 16px rgba(30, 103, 226, .2); }
.dot-grid { position: absolute; width: 90px; height: 72px; background-image: radial-gradient(circle, #91c2ff 1.5px, transparent 1.8px); background-size: 12px 12px; opacity: .7; }
.dots-right { right: 30px; top: 26px; }
.extension-art { width: 360px; transform: translate(-25px, 5px); }
.extensions .dots-right { top: 22px; }
.phone-private { align-self: start; width: 245px; height: 512px; margin: 43px 0 0 83px; border-radius: 33px; }
.phone-private img { border-radius: 27px; }
.privacy-features { margin-top: 25px; }

/* Desktop-only capability group; kept separate so UA routing can hide it later. */
.platform-sections { width: 100%; }
.desktop-ai { height: 314px; background: #fff; }
.desktop-sync { height: 249px; background: linear-gradient(105deg, #f2f8ff, #fff 56%, #eef7ff); }
.desktop-file { height: 270px; background: #fff; }
.desktop-custom { height: 170px; background: #fff; }
.desktop-split { align-items: center; }
.desktop-ai-art { width: 350px; margin-left: 24px; }
.desktop-ai-art img { width: 100%; }
.desktop-sync-art { width: 280px; margin-left: -18px; }
.desktop-sync-art img { width: 100%; }
.desktop-file-art { width: 370px; margin-left: 24px; }
.desktop-file-art img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(43, 88, 160, 0.12);
}
.desktop-features { width: 310px; margin-top: 21px; grid-template-columns: repeat(5, 1fr); }
.desktop-features img { width: 22px; height: 22px; margin: 0 0 7px 2px; }
.desktop-features b { font-size: 8px; white-space: nowrap; }
.sync-features { width: 290px; grid-template-columns: repeat(4, 1fr); }
.file-features { width: 315px; }
.custom-modes { width: 365px; display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 56px; align-content: center; gap: 5px 10px; }
.custom-modes div { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; color: #343942; font-size: 8px; font-weight: 600; white-space: nowrap; }
.custom-modes img { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: #d6f2f7; }
.custom-modes div:nth-child(2) img { background: #d7e4fe; }
.custom-modes div:nth-child(3) img { background: #d8e7fe; }
.custom-modes div:nth-child(4) img { background: #d6f2e1; }
.custom-modes div:nth-child(5) img { background: #fdecd6; }
.custom-modes div:nth-child(6) img { background: #dee9fe; }
.custom-modes div:nth-child(7) img { background: #d9dbfd; }
.custom-modes div:nth-child(8) img { background: #eeece6; }
.custom-modes div:nth-child(9) img { background: #d9f1e3; }
.custom-modes div:nth-child(10) img { background: #f7dff2; }

.download { position: relative; height: 208px; overflow: visible; text-align: center; background: linear-gradient(to bottom, #fff, #f5faff); }
.download-inner { position: relative; z-index: 2; padding-top: 43px; }
.download h2 { margin: 0; font-size: 23px; line-height: 1.4; }
.download p { margin: 11px 0 20px; color: #65717e; font-size: 10px; }
.download .button { height: 36px; min-width: 106px; }
.download .meta { justify-content: center; margin-top: 13px; }
.download-wave { position: absolute; z-index: 1; left: -5%; right: -5%; bottom: -47px; height: 105px; border-radius: 50% 50% 0 0; background: rgba(198, 224, 255, .46); transform: rotate(-1deg); }
.download-wave::after { content: ""; position: absolute; inset: 25px -2% -10px; border-radius: 50% 50% 0 0; background: rgba(226, 239, 255, .82); transform: rotate(2deg); }
.download-modal-trigger { border: 0; font-family: inherit; cursor: pointer; }
.download-modal { width: min(680px, calc(100% - 32px)); max-height: calc(100vh - 40px); margin: auto; padding: 24px; overflow: auto; border: 1px solid #dce8f5; border-radius: 8px; color: var(--text); background: #fff; box-shadow: 0 24px 70px rgba(20, 50, 88, .24); }
.download-modal::backdrop { background: rgba(17, 31, 48, .48); }
.download-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.download-modal-header h2 { margin: 0; font-size: 22px; line-height: 1.4; }
.download-modal-header p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.download-modal-close { width: 32px; height: 32px; flex: 0 0 32px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 5px; color: #526171; background: #f0f5fa; font: 24px/1 Arial, sans-serif; cursor: pointer; }
.download-modal-close:hover, .download-modal-close:focus-visible { color: var(--blue); background: #e7f1fc; outline: 2px solid rgba(23, 111, 245, .24); }
.download-options { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.download-option { min-width: 0; min-height: 72px; padding: 12px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; border: 1px solid #e1eaf4; border-radius: 7px; background: #fbfdff; }
.download-option > img { width: 42px; height: 42px; padding: 4px; object-fit: contain; }
.download-option > div { min-width: 0; }
.download-option h3 { margin: 0; font-size: 13px; line-height: 1.35; }
.download-option p { margin: 4px 0 0; overflow-wrap: anywhere; color: #6b7887; font-size: 9px; line-height: 1.4; }
.download-option > a, .download-option > button { min-width: 50px; height: 30px; padding: 0 10px; display: inline-grid; place-items: center; border: 0; border-radius: 5px; color: #fff; background: var(--blue); font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1; cursor: pointer; }
.download-option > a:hover, .download-option > button:hover { background: var(--blue-dark); }

.site-footer { position: relative; z-index: 2; height: 193px; background: linear-gradient(180deg, #f4f9ff, #edf6ff); color: #384553; }
.footer-main { width: 718px; height: 135px; margin: 0 auto; padding-top: 32px; display: grid; grid-template-columns: 192px 84px 102px 84px 1fr; column-gap: 20px; }
.footer-brand .brand { font-size: 11px; }
.footer-brand .brand img, .footer-brand .logo-mark { width: 25px; height: 25px; }
.footer-brand p { margin: 13px 0 0; font-size: 8px; line-height: 1.75; color: #627080; }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; font-size: 8px; }
.footer-column h3 { margin: 2px 0 12px; color: #1f2935; font-size: 9px; }
.footer-column a { margin-bottom: 7px; }
.footer-qr { display: flex; align-items: center; gap: 10px; }
.footer-qr > img { width: 66px; height: 66px; padding: 3px; background: #fff; }
.footer-qr div { display: flex; flex-direction: column; font-size: 8px; }
.footer-qr b { margin-bottom: 6px; font-size: 9px; }
.copyright { height: 58px; border-top: 1px solid rgba(176, 199, 223, .32); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; color: #657383; font-size: 8px; }
.icp-links { display: flex; align-items: center; gap: 8px; }
.icp-links a { color: inherit; text-decoration: none; }
.icp-links a:hover { text-decoration: underline; }

@media (min-width: 1280px) {
  .site-header {
    height: 94px;
    padding: 0 max(64px, calc((100% - 1856px) / 2));
  }
  .brand { gap: 10px; font-size: 16px; }
  .logo-mark, .brand img { width: 34px; height: 34px; }
  .nav-links { margin-right: 40px; gap: 58px; font-size: 14px; }
  .nav-links a { padding: 37px 0 35px; }
  .nav-links a::after { bottom: 25px; }
  .nav-download { min-width: 92px; height: 38px; border-radius: 9px; font-size: 14px; }
  .site-header .nav-download { min-width: 142px; padding-left: 12px; padding-right: 12px; }

  .hero {
    height: 520px;
    background-image: radial-gradient(
      ellipse 390px 290px at calc(50% + 280px) 56%,
      rgba(151, 193, 248, .86) 0%,
      rgba(183, 212, 250, .78) 44%,
      rgba(219, 233, 252, .45) 68%,
      rgba(242, 248, 254, 0) 100%
    );
  }
  .hero::after { height: 215px; }
  .hero-inner { width: 1200px; grid-template-columns: 650px 550px; }
  .hero-copy { padding-top: 87px; }
  .hero h1 { font-size: 44px; line-height: 1.42; }
  .hero-copy > p { margin-top: 25px; font-size: 15px; line-height: 1.9; }
  .hero-actions { gap: 16px; margin-top: 31px; }
  .button { height: 48px; min-width: 132px; padding: 0 26px; border-radius: 8px; font-size: 15px; }
  .meta { margin-top: 24px; gap: 15px; font-size: 11px; }
  .meta i { height: 12px; }
  .phone-hero { width: 270px; height: 570px; margin: 8px 0 0 96px; border-width: 7px; border-radius: 39px; }
  .phone-hero img { border-radius: 30px; }
  .phone-hero.desktop-version { width: 560px; height: 322px; margin: 94px 0 0 -5px; border-width: 5px; border-radius: 19px; }
  .phone-hero.desktop-version img { border-radius: 12px; }
  .phone .speaker { top: 10px; width: 10px; height: 10px; }
  .shape-one { left: 7%; top: 25px; width: 54px; height: 30px; }
  .shape-two { right: 7%; top: 96px; width: 30px; height: 30px; }
  .shape-three { left: 53%; top: 255px; width: 28px; height: 34px; }

  .feature-strip { width: calc(100% - 48px); height: 112px; margin-top: -46px; }
  .feature-strip article { grid-template-columns: 35px minmax(0, auto); column-gap: 14px; row-gap: 4px; }
  .feature-strip img { width: 35px; height: 35px; }
  .feature-strip h3 { font-size: 13px; }
  .feature-strip p { font-size: 9px; }

  .engine-showcase { min-height: 570px; }
  .engine-inner { width: 1200px; padding: 37px 0 42px; }
  .engine-heading .eyebrow { margin-bottom: 13px; padding: 8px 19px; font-size: 13px; }
  .engine-heading-mark { width: 19px; height: 19px; font-size: 11px; }
  .engine-heading h2 { font-size: 36px; }
  .engine-heading > p:last-child { margin: 12px 0 24px; font-size: 14px; }
  .engine-tabs { min-height: 80px; border-radius: 12px; }
  .engine-tab { gap: 14px; padding: 12px 28px; }
  .engine-tab > img { width: 44px; height: 44px; flex-basis: 44px; }
  .engine-tab b { font-size: 16px; }
  .engine-tab small { font-size: 12px; }
  .engine-panels { margin-top: 15px; }
  .engine-panel { min-height: 286px; grid-template-columns: 430px 1fr; border-radius: 14px; }
  .engine-panel-copy { padding: 33px 0 29px 46px; }
  .engine-panel-title { gap: 17px; }
  .engine-panel-title > img { width: 62px; height: 62px; flex-basis: 62px; padding: 9px; }
  .engine-panel-title h3 { font-size: 26px; }
  .engine-panel-title p { font-size: 15px; }
  .engine-benefits { margin-top: 34px; gap: 17px; }
  .engine-benefits div { gap: 9px; font-size: 12px; }
  .engine-benefits img { width: 32px; height: 32px; }
  .engine-panel-art img { max-height: 320px; }

  .section-inner { width: 1200px; }
  .split { grid-template-columns: 500px 700px; }
  .split.reverse { grid-template-columns: 700px 500px; }
  .kernel { height: 410px; }
  .extensions { height: 350px; }
  .privacy { height: 390px; }
  .eyebrow { margin-bottom: 13px; font-size: 13px; }
  .section-copy h2 { font-size: 34px; line-height: 1.42; }
  .description { margin-top: 21px; font-size: 13px; line-height: 1.9; }
  .mini-features { width: 390px; margin-top: 34px; }
  .mini-features img { width: 33px; height: 33px; margin-bottom: 10px; }
  .mini-features b { font-size: 12px; }
  .mini-features span { font-size: 10px; }
  .video-device { width: 610px; height: 282px; margin-left: 55px; padding: 9px; border-width: 3px; border-radius: 34px; }
  .video-device img { border-radius: 24px; }
  .video-tag { top: -24px; right: -25px; height: 38px; padding: 0 20px; font-size: 13px; }
  .camera-dot { left: 14px; width: 12px; height: 12px; }
  .dot-grid { width: 126px; height: 96px; background-size: 15px 15px; }
  .dots-right { right: 4%; top: 40px; }
  .extension-art { width: 590px; transform: translate(-35px, 7px); }
  .button.small { min-width: 118px; height: 42px; margin-top: 23px; }
  .phone-private { width: 350px; height: 730px; margin: 67px 0 0 150px; border-radius: 44px; }
  .phone-private img { border-radius: 35px; }

  .desktop-ai { height: 500px; }
  .desktop-sync { height: 390px; }
  .desktop-file { height: 420px; }
  .desktop-custom { height: 270px; }
  .desktop-ai-art { width: 560px; margin-left: 54px; }
  .desktop-sync-art { width: 460px; margin-left: -20px; }
  .desktop-file-art { width: 590px; margin-left: 46px; }
  .desktop-features { width: 490px; margin-top: 31px; }
  .desktop-features img { width: 34px; height: 34px; margin-bottom: 10px; }
  .desktop-features b { font-size: 11px; }
  .sync-features { width: 450px; }
  .file-features { width: 490px; }
  .custom-modes { width: 600px; grid-auto-rows: 82px; gap: 7px 14px; }
  .custom-modes div { gap: 8px; font-size: 11px; }
  .custom-modes img { width: 43px; height: 43px; padding: 9px; }

  .download { height: 290px; }
  .download-inner { padding-top: 60px; }
  .download h2 { font-size: 34px; }
  .download p { margin: 14px 0 24px; font-size: 13px; }
  .download .button { height: 46px; min-width: 140px; }
  .version-picker-toggle { line-height: 48px; }
  .download .meta { margin-top: 17px; }
  .download-wave { bottom: -55px; height: 140px; }
  .download-modal { width: min(820px, calc(100% - 48px)); padding: 30px; }
  .download-modal-header h2 { font-size: 27px; }
  .download-modal-header p { font-size: 14px; }
  .download-options { margin-top: 25px; gap: 13px; }
  .download-option { min-height: 88px; padding: 15px; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 14px; }
  .download-option > img { width: 50px; height: 50px; }
  .download-option h3 { font-size: 16px; }
  .download-option p { font-size: 11px; }
  .download-option > a, .download-option > button { min-width: 62px; height: 36px; font-size: 13px; }

  .site-footer { height: 268px; }
  .footer-main { width: 1200px; height: 190px; padding-top: 46px; grid-template-columns: 310px 120px 150px 120px 1fr; column-gap: 34px; }
  .footer-brand .brand { font-size: 14px; }
  .footer-brand .logo-mark { width: 31px; height: 31px; }
  .footer-brand p { margin-top: 16px; font-size: 11px; }
  .footer-column { font-size: 11px; }
  .footer-column h3 { margin-bottom: 15px; font-size: 12px; }
  .footer-column a { margin-bottom: 9px; }
  .footer-qr > img { width: 88px; height: 88px; }
  .footer-qr div { font-size: 10px; }
  .footer-qr b { font-size: 12px; }
  .copyright { height: 78px; font-size: 10px; }
  .icp-links { gap: 12px; }
}

@media (max-width: 720px) {
  .site-header { width: 100%; min-width: 0; height: 66px; padding: 0 18px; }
  .site-header .brand { min-width: 0; }
  .nav-download { display: none; }
  .nav-links { display: none; }
  .translate-picker { margin-left: auto; margin-right: 8px; }
  .translate-current { font-size: 11px; }
  .translate-picker-toggle { padding: 0 8px; }
  .hero {
    height: 650px;
    background-image: radial-gradient(
      ellipse 225px 275px at 50% 77%,
      rgba(151, 193, 248, .82) 0%,
      rgba(187, 215, 250, .72) 48%,
      rgba(242, 248, 254, 0) 100%
    );
  }
  .hero::after { height: 185px; }
  .hero-inner { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); text-align: center; }
  .hero-copy { width: 100%; min-width: 0; padding: 44px 20px 0; }
  .hero-copy > p { max-width: 100%; }
  .hero h1 { font-size: 28px; }
  .hero-copy > p br, .description br { display: none; }
  .hero-actions, .hero-copy .meta { justify-content: center; }
  .hero-actions { flex-wrap: wrap; }
  .hero-actions .download-trigger { padding-left: 12px; padding-right: 12px; white-space: nowrap; }
  .phone-hero { position: absolute; top: 315px; left: 50%; width: 166px; height: 350px; margin: 0; transform: translateX(-50%); }
  .phone-hero.desktop-version { top: 390px; width: calc(100% - 24px); max-width: 390px; height: auto; aspect-ratio: 1805 / 1036; margin: 0; border-width: 4px; border-radius: 15px; }
  .phone-hero.desktop-version img { border-radius: 9px; }
  .feature-strip { height: auto; min-height: 164px; margin-top: -22px; padding: 12px 8px; grid-template-columns: repeat(2, 1fr); gap: 8px 4px; }
  .feature-strip article { padding: 0 5px; grid-template-columns: 26px minmax(0, auto); column-gap: 8px; row-gap: 2px; }
  .feature-strip img { width: 26px; height: 26px; }
  .feature-strip h3 { font-size: 10px; }
  .feature-strip p { font-size: 7px; white-space: normal; }
  .engine-showcase {  }
  .engine-inner { width: 100%; padding: 32px 14px 36px; }
  .engine-heading h2 { font-size: 24px; }
  .engine-heading > p:last-child { max-width: 350px; margin: 10px auto 18px; font-size: 10px; line-height: 1.7; }
  .engine-tabs { min-height: 76px; }
  .engine-tab { padding: 8px 5px; flex-direction: column; gap: 5px; text-align: center; }
  .engine-tab > img { width: 28px; height: 28px; flex-basis: 28px; }
  .engine-tab span { gap: 2px; }
  .engine-tab b { font-size: 10px; }
  .engine-tab small { font-size: 8px; }
  .engine-panel { min-height: 0; grid-template-columns: 1fr; }
  .engine-panel-copy { padding: 23px 20px; }
  .engine-panel-title { justify-content: center; text-align: left; }
  .engine-panel-title > img { width: 45px; height: 45px; flex-basis: 45px; padding: 7px; }
  .engine-panel-title h3 { font-size: 19px; }
  .engine-panel-title p { font-size: 10px; }
  .engine-benefits { max-width: 300px; margin: 21px auto 0; }
  .engine-benefits div { align-items: center; font-size: 9px; }
  .engine-benefits img { width: 26px; height: 26px; }
  .engine-panel-art { display: none; }
  .kernel, .extensions, .privacy { height: auto; min-height: 520px; }
  .section-inner, .split, .split.reverse { width: 100%; display: flex; flex-direction: column; grid-template-columns: none; }
  .section-copy { width: 100%; padding: 43px 28px 0; text-align: center; }
  .mini-features { margin-left: auto; margin-right: auto; }
  .mini-features div { align-items: center; }
  .video-device { width: calc(100% - 58px); max-width: 390px; height: auto; aspect-ratio: 2.15; margin: 40px auto 48px; transform: none; }
  .desktop-ai, .desktop-sync, .desktop-file, .desktop-custom { height: auto; min-height: 560px; }
  .desktop-split { flex-direction: column; }
  .desktop-ai .section-inner, .desktop-sync .section-inner, .desktop-file .section-inner, .desktop-custom .section-inner { min-height: inherit; }
  .desktop-ai-art, .desktop-sync-art, .desktop-file-art { width: calc(100% - 42px); max-width: 430px; margin: 42px auto 55px; }
  .desktop-sync .section-inner { flex-direction: column; }
  .desktop-sync-art { order: 2; }
  .desktop-features { width: min(100%, 330px); }
  .desktop-features b { font-size: 8px; }
  .custom-modes { width: calc(100% - 42px); max-width: 360px; margin: 25px auto 50px; grid-auto-rows: 58px; }
  .custom-modes img { width: 30px; height: 30px; padding: 6px; }
  .custom-modes div { font-size: 8px; }
  .extensions .section-inner { flex-direction: column-reverse; }
  .extension-art { width: min(100%, 390px); margin: 14px auto 25px; transform: none; }
  .phone-private { width: 195px; height: 408px; margin: 32px auto 0; }
  .privacy { max-height: 610px; }
  .download { height: 230px; }
  .download-modal { width: calc(100% - 24px); max-height: calc(100vh - 24px); padding: 18px; }
  .download-modal-header { gap: 12px; }
  .download-modal-header h2 { font-size: 20px; }
  .download-options { grid-template-columns: minmax(0, 1fr); }
  .site-footer { height: auto; }
  .footer-main { width: 100%; height: auto; padding: 34px 24px; grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-qr { grid-column: 1 / -1; }
  .copyright { height: 64px; }
}

@media (max-width: 380px) {
  .brand span { font-size: 12px; }
  .hero h1 { font-size: 25px; }
  .section-copy h2, .download h2 { font-size: 21px; }
  .footer-main { grid-template-columns: repeat(2, 1fr); }
}