/* ClipWisdom mountain glass homepage. One responsive visual system.
   Auth pages retain their existing CSS; app.js still owns translation/auth URLs. */
:root {
  --cw-ink: #050b42;
  --cw-text: #143c76;
  --cw-muted: #416898;
  --cw-blue: #0067ff;
  --cw-line: rgba(103, 166, 243, .3);
  --cw-glass: linear-gradient(145deg, rgba(255,255,255,.94), rgba(229,243,255,.78));
  --cw-shadow: 0 20px 52px -22px rgba(0,67,158,.32), inset 0 1px 0 #fff;
  --cw-radius: 26px;
  font-family: "Plus Jakarta Sans", "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
  color: var(--cw-text);
  background: #d4eaff;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url("brand/hero/mountain-lake-v20.7.webp") 50% 50% / cover no-repeat;
  filter: saturate(1.04) brightness(1.06);
  pointer-events: none;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(232,244,255,.28), rgba(232,244,255,.05) 45%, rgba(34,135,255,.06));
  pointer-events: none;
}
a { color: inherit; }
button { font: inherit; }
img { max-width: 100%; }
a:focus-visible, button:focus-visible { outline: 3px solid #005aff; outline-offset: 4px; }
.page-shell { min-height: 100svh; padding-top: 24px; }
.wrap { width: min(1560px, calc(100% - 9.4%)); margin-inline: auto; }
.site-header {
  display: grid;
  grid-template-columns: minmax(180px, .85fr) 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 10px 24px 10px 30px;
  min-height: 76px;
  border: 1px solid rgba(255,255,255,.91);
  border-radius: 30px;
  background: linear-gradient(110deg, rgba(255,255,255,.94), rgba(234,245,255,.76) 55%, rgba(222,239,255,.85));
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  box-shadow: 0 10px 30px rgba(0,82,180,.15), inset 0 1px 0 #fff;
  position: relative;
  z-index: 5;
}
.brand { display: inline-flex; align-items: center; width: fit-content; min-width: 0; }
.brand img { display: block; width: 226px; height: auto; }
.nav-links { display: flex; justify-content: center; gap: clamp(20px, 3vw, 48px); }
.nav-links a { text-decoration: none; font-size: 14px; font-weight: 800; color: var(--cw-ink); white-space: nowrap; }
.nav-links a:hover { color: var(--cw-blue); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.site-language-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 48px;
  padding: 2px 6px;
  border: 1px solid #afd4ff;
  border-radius: 14px;
  background: linear-gradient(180deg,#fff,rgba(235,246,255,.85));
  color: #849abb;
  box-shadow: 0 4px 9px rgba(19,99,201,.12), inset 0 1px 0 #fff;
  white-space: nowrap;
}
.site-language-switch button { border: 0; border-radius: 9px; background: transparent; color: #456695; min-width: 32px; min-height: 42px; padding: 0 6px; font-size: 13px; font-weight: 800; cursor: pointer; }
.site-language-switch button.active { color: var(--cw-blue); background: #e6f2ff; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; border: 1px solid #096cff; background: linear-gradient(180deg,#2394ff 0%,#0876ff 38%,#005cff 100%); box-shadow: 0 7px 16px rgba(0,94,255,.22), inset 0 2px 2px rgba(255,255,255,.44); }
.button-secondary { color: var(--cw-ink); border: 1px solid #bfdcff; background: linear-gradient(180deg,#fff,rgba(248,252,255,.93)); box-shadow: 0 5px 13px rgba(28,100,196,.13), inset 0 2px 1px #fff; }
.hero {
  display: grid;
  grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr);
  gap: 30px;
  align-items: center;
  min-height: clamp(700px, calc(100svh - 100px), 830px);
  padding: 46px 0 82px;
  position: relative;
}
.hero-copy { position: relative; z-index: 3; padding: 12px 0 0 6px; }
.hero-copy::before { content: ""; position: absolute; inset: -32px -10px -28px -32px; z-index: -1; background: radial-gradient(ellipse at center,rgba(255,255,255,.6),rgba(244,250,255,.32) 58%,transparent 74%); filter: blur(15px); pointer-events: none; }
.eyebrow { margin: 0 0 22px; color: #2c5d9a; font-size: 13px; font-weight: 800; letter-spacing: .25em; }
.hero h1 { margin: 0; font-size: clamp(54px, 4.8vw, 83px); line-height: 1.025; letter-spacing: -.065em; font-weight: 800; color: var(--cw-ink); text-shadow: 0 2px 0 rgba(255,255,255,.44); }
.hero h1 span { display: inline; color: #0065ff; }
.hero-lead { margin: 26px 0 0; font-size: clamp(16px,1.15vw,19px); line-height: 1.55; letter-spacing: -.025em; font-weight: 600; max-width: 590px; color: #2d578d; }
.hero-actions { display: flex; gap: 18px; margin-top: 29px; }
.button-large { min-height: 64px; min-width: 172px; padding-inline: 30px; font-size: 18px; border-radius: 17px; }
.private-note { display: flex; align-items: flex-start; gap: 9px; margin: 23px 0 0; padding: 10px 12px; border: 1px solid rgba(255,255,255,.65); border-radius: 12px; background: linear-gradient(110deg,rgba(255,255,255,.87),rgba(236,247,255,.62)); backdrop-filter: blur(9px); font-size: 11.5px; font-weight: 600; line-height: 1.65; color: #234d89; }
.private-note > img { width: 24px; height: 24px; flex: 0 0 24px; }
.private-note a { color: #005bea; text-decoration-thickness: 1px; text-underline-offset: 3px; font-weight: 800; }
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; height: clamp(610px, 39vw, 680px); min-width: 0; isolation: isolate; perspective: 1800px; container-type: inline-size; }
.hero-stage { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-stage-glass { position: absolute; border: 2px solid rgba(255,255,255,.82); border-radius: 32px; background: linear-gradient(130deg,rgba(255,255,255,.2),rgba(11,132,255,.13)); box-shadow: inset -6px 0 1px rgba(41,152,255,.3), inset 5px 1px 2px rgba(255,255,255,.79), 3px 1px 0 rgba(137,219,255,.7), 8px 2px 0 rgba(0,99,248,.42), 0 0 13px rgba(220,248,255,.9); backdrop-filter: blur(3px); }
.hero-stage-glass-a { inset: 3% -3% 8% 13%; transform: rotate(-7deg); }
.hero-stage-glass-b { inset: 9% -1% 5% 5%; transform: rotate(-3.6deg); }
.hero-stage-platform { position: absolute; left: -15%; right: -4%; bottom: -8%; height: 104px; border-radius: 50% / 33%; border: 2px solid rgba(255,255,255,.88); background: linear-gradient(90deg,rgba(19,114,255,.48),rgba(255,255,255,.38) 10%,rgba(43,151,255,.35) 22%,rgba(0,109,255,.32) 50%,rgba(255,255,255,.58) 74%,rgba(49,152,255,.54)); box-shadow: inset 0 -8px 11px rgba(0,85,241,.42), inset 0 2px 0 #fff, 0 5px 4px rgba(149,231,255,.8), 0 12px 32px rgba(0,71,196,.36); }
.hero-stage-platform::before { content: ""; position: absolute; inset: -2px -2px 40%; border-radius: 50%; border: 2px solid rgba(255,255,255,.93); background: radial-gradient(ellipse,rgba(255,255,255,.41),rgba(43,156,255,.18) 65%,rgba(226,249,255,.83)); box-shadow: 0 0 13px rgba(222,251,255,.98), inset 0 0 20px rgba(193,237,255,.72); }
.hero-demo-window { width: 100%; height: clamp(580px,36vw,620px); border: 3px solid rgba(255,255,255,.95); border-radius: 28px; position: relative; background: linear-gradient(140deg,rgba(255,255,255,.95),rgba(230,243,255,.96)); box-shadow: 0 0 0 2px rgba(122,215,255,.74), 5px 3px 0 rgba(0,105,255,.45), 0 0 0 9px rgba(235,254,255,.4), 0 0 30px rgba(103,210,255,.8), 0 26px 60px rgba(0,65,173,.3); overflow: hidden; transform: rotate(-3deg) rotateY(-7deg); transform-origin: center; }
.hero-demo-topbar { height: 56px; display: grid; grid-template-columns: minmax(118px,.8fr) minmax(130px,1.1fr) auto; gap: 8px; align-items: center; padding: 9px 11px; border-bottom: 1px solid #dbe9fc; background: rgba(255,255,255,.86); }
.hero-demo-brand { display: flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; }
.hero-demo-brand img { width: 27px; height: 29px; object-fit: contain; }
.hero-demo-brand strong { font-size: clamp(10px,1.55cqi,15px); letter-spacing: -.04em; color: var(--cw-ink); }
.hero-demo-brand strong span { color: var(--cw-blue); }
.hero-demo-window-dots { display: flex; gap: 4px; margin-right: 7px; }
.hero-demo-window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #ff535f; }
.hero-demo-window-dots i:nth-child(2) { background: #ffd128; }
.hero-demo-window-dots i:nth-child(3) { background: #12c757; }
.hero-demo-search, .hero-demo-list-search { display: flex; align-items: center; border: 1px solid #d2e5ff; border-radius: 11px; background: rgba(255,255,255,.88); color: #5773a5; font-size: 9px; padding: 0 9px; min-height: 31px; }
.hero-demo-search::before, .hero-demo-list-search::before { content: ""; width: 8px; height: 8px; border: 1.7px solid #3980dd; border-radius: 50%; margin-right: 7px; flex-shrink: 0; }
.hero-demo-mini-actions { display: flex; gap: 5px; }
.hero-demo-mini-actions span { display: flex; align-items: center; justify-content: center; padding: 0 6px; min-height: 30px; border: 1px solid #d7e8ff; border-radius: 8px; background: #fff; color: #113977; font-size: clamp(6px,.94cqi,8px); font-weight: 800; white-space: nowrap; }
.hero-demo-body { display: grid; grid-template-columns: 18% 39% 43%; height: calc(100% - 56px); min-width: 0; }
.hero-demo-spaces { padding: 12px 9px; border-right: 1px solid #dceaff; background: linear-gradient(180deg,rgba(255,255,255,.5),rgba(218,236,255,.35)); }
.hero-demo-section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 11px; font-weight: 800; }
.hero-demo-section-title b { display: grid; place-items: center; width: 25px; height: 25px; color: var(--cw-blue); border: 1px solid #cee4ff; border-radius: 8px; background: #fff; font-size: 16px; }
.hero-demo-space { display: flex; align-items: center; gap: 8px; min-height: 39px; margin-bottom: 6px; padding: 4px 5px; border-radius: 9px; font-size: 10px; }
.hero-demo-space > span { display: grid; place-items: center; width: 28px; height: 29px; flex-shrink: 0; border: 1px solid #d4e7ff; border-radius: 7px; color: #0067ff; background: #fff; font-size: 19px; box-shadow: 0 2px 4px rgba(0,99,218,.06); }
.hero-demo-space > span img { width: 20px; height: 20px; }
.hero-demo-space strong { font-size: clamp(8px,1.15cqi,11px); }
.hero-demo-space.active { background: #e2f0ff; box-shadow: inset 3px 0 0 #0070ff; border: 1px solid #c4e0ff; color: #0065ef; }
.hero-demo-divider { height: 1px; background: #d9e8fc; margin: 28px 2px 16px; }
.hero-demo-spaces > small { font-size: 10px; font-weight: 800; }
.hero-demo-tool { display: flex; align-items: center; gap: 7px; min-height: 37px; font-size: clamp(7px,1.06cqi,10px); font-weight: 700; white-space: nowrap; }
.hero-demo-tool img { width: 23px; height: 23px; }
.hero-demo-accounts { min-width: 0; padding: 11px 9px; border-right: 1px solid #dceaff; background: rgba(248,252,255,.65); }
.hero-demo-summary-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-bottom: 12px; }
.hero-demo-summary-grid article { display: grid; grid-template-columns: 35px minmax(0,1fr); grid-template-rows: 1fr 1fr; align-items: center; column-gap: 7px; padding: 8px 7px; min-height: 60px; border: 1px solid #d8e9ff; border-radius: 11px; background: linear-gradient(140deg,#fff,#ecf5ff); box-shadow: 0 3px 6px rgba(14,92,190,.045); }
.hero-demo-summary-grid article:first-child { background: linear-gradient(140deg,#edf7ff,#dceeff); }
.summary-dot { display: grid; place-items: center; grid-row: 1 / -1; width: 33px; height: 37px; border-radius: 8px; border: 1px solid #b8deff; background: linear-gradient(#fff,#c4e6ff); box-shadow: 0 2px 5px #b6d6f5; }
.summary-dot img { width: 25px; height: 25px; }
.summary-dot.green { background: #e4faee; border-color: #c1e6d1; }
.hero-demo-summary-grid strong { font-size: clamp(8px,1.28cqi,12px); line-height: 1.2; color: var(--cw-ink); }
.hero-demo-summary-grid small { font-size: clamp(7px,1cqi,9px); color: #3e6397; }
.green-text { color: #009c53; }
.hero-demo-list-head { display: flex; justify-content: space-between; align-items: center; gap: 5px; margin: 0 0 7px; }
.hero-demo-list-head strong { font-size: 11px; color: var(--cw-ink); }
.hero-demo-list-head span { font-size: 8px; color: #365d94; border: 1px solid #d7e6fb; padding: 5px; border-radius: 7px; background: #fff; white-space: nowrap; }
.hero-demo-list-search { margin-bottom: 7px; }
.hero-demo-account { display: grid; grid-template-columns: 36px minmax(0,1fr) auto 21px; gap: 6px; align-items: center; min-height: 52px; margin-bottom: 5px; padding: 5px 6px; border: 1px solid #d9e8fb; border-radius: 10px; background: rgba(255,255,255,.84); }
.hero-demo-account.active { background: linear-gradient(120deg,#e5f3ff,#eaf4ff); border-color: #8ac0ff; box-shadow: inset 3px 0 0 #0080ff; }
.hero-demo-account img, .demo-logo { display: grid; place-items: center; width: 34px; height: 36px; border-radius: 7px; background: #fff; border: 1px solid #d0e4ff; padding: 3px; object-fit: contain; box-shadow: 0 3px 6px rgba(0,95,220,.1); }
.demo-logo { color: #fff; font-size: 22px; background: linear-gradient(180deg,#128dff,#0061ff); border: 0; }
.demo-logo.health { background: #ff2945; }
.demo-logo.travel { background: #00a2ff; }
.demo-logo svg { width: 25px; height: 25px; }
.hero-demo-space > span img, .summary-dot img { transform: scale(1.5); }
.hero-demo-tool img, .trust-icon img, .private-note > img { transform: scale(1.4); }
.hero-demo-account div { min-width: 0; }
.hero-demo-account div strong, .hero-demo-account div small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-demo-account div strong { font-size: clamp(9px,1.35cqi,13px); color: var(--cw-ink); letter-spacing: -.025em; }
.hero-demo-account div small { margin-top: 3px; color: #436aa1; font-size: clamp(6px,.96cqi,9px); }
.hero-demo-account time { font-size: 8px; color: #5277ae; }
.hero-demo-account > b { display: grid; place-items: center; width: 21px; height: 25px; font-size: 9px; color: #0070ff; border: 1px solid #d5e7ff; border-radius: 6px; background: #fff; }
.hero-demo-details { min-width: 0; padding: 10px 11px; background: linear-gradient(180deg,rgba(255,255,255,.87),rgba(240,247,255,.81)); }
.hero-demo-detail-head { display: grid; grid-template-columns: 41px minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 49px; margin-bottom: 6px; }
.hero-demo-detail-head img { width: 40px; height: 41px; object-fit: contain; padding: 5px; background: #fff; border: 1px solid #d6e7ff; border-radius: 9px; box-shadow: 0 3px 6px rgba(0,77,170,.08); }
.hero-demo-detail-head strong, .hero-demo-detail-head small { display: block; }
.hero-demo-detail-head strong { font-size: clamp(10px,1.7cqi,16px); letter-spacing: -.04em; color: var(--cw-ink); }
.hero-demo-detail-head small { margin-top: 3px; color: #006dff; font-size: 9px; }
.hero-demo-edit { padding: 7px 10px; border: 1px solid #cfe3ff; border-radius: 8px; background: #fff; color: var(--cw-blue); font-size: 9px; font-weight: 700; }
.hero-demo-tab { height: 28px; border-bottom: 1px solid #d3e4fa; color: #006fff; font-size: 11px; font-weight: 800; margin-bottom: 7px; }
.hero-demo-details label { display: block; margin-bottom: 8px; }
.hero-demo-details label > span, .hero-demo-note > span { display: block; font-size: 10px; font-weight: 700; color: #285487; margin-bottom: 5px; }
.hero-demo-details label > div { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-height: 34px; padding: 5px 7px; background: rgba(255,255,255,.85); border: 1px solid #cfe4ff; border-radius: 8px; }
.hero-demo-details label strong { font-size: clamp(8px,1.16cqi,11px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #133a76; min-width: 0; }
.hero-demo-details label b { padding: 5px 7px; color: #0068ff; background: #f4f9ff; border: 1px solid #dbeaff; border-radius: 6px; font-size: 9px; }
.hero-demo-strength { display: flex; align-items: center; gap: 8px; height: 14px; margin: -3px 0 9px; }
.hero-demo-strength i { width: 55%; height: 5px; border-radius: 9px; background: linear-gradient(90deg,#00b870 0 84%,#c5efdd 84%); }
.hero-demo-strength span { color: #00a553; font-size: 9px; font-weight: 800; }
.hero-demo-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.hero-demo-buttons b, .hero-demo-buttons span { display: flex; align-items: center; justify-content: center; min-height: 37px; padding: 5px 3px; font-size: clamp(7px,1.14cqi,11px); border-radius: 8px; text-align: center; white-space: nowrap; }
.hero-demo-buttons b { background: linear-gradient(180deg,#198fff,#0064ff); color: #fff; box-shadow: 0 4px 7px rgba(0,92,221,.18), inset 0 1px 0 #8ad0ff; }
.hero-demo-buttons span { background: #fff; border: 1px solid #d6e6ff; color: #11377a; font-weight: 800; }
.hero-demo-attachment { margin-top: 10px; }
.hero-demo-attachment > div { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 10px; margin-bottom: 6px; }
.hero-demo-attachment > div b { padding: 6px 9px; background: #fff; border: 1px solid #d3e5ff; border-radius: 7px; font-size: 9px; color: #006aff; }
.hero-demo-attachment p { display: grid; grid-template-columns: 31px minmax(0,1fr) auto; align-items: center; gap: 7px; margin: 0; padding: 7px; border: 1px solid #dce8ff; border-radius: 8px; background: rgba(255,255,255,.76); }
.hero-demo-attachment p span { display: grid; place-items: center; width: 29px; height: 32px; color: #fff; background: #ff293b; border-radius: 4px; font-size: 8px; }
.hero-demo-attachment p strong { font-size: clamp(7px,1.16cqi,11px); color: var(--cw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-demo-attachment p small { font-size: 8px; color: #5475a9; }
.hero-demo-note { margin-top: 8px; }
.hero-demo-note p { margin: 0; padding: 9px; font-size: 9px; line-height: 1.5; border: 1px solid #d5e5fa; border-radius: 8px; background: rgba(255,255,255,.72); color: #436797; }
.trust { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid rgba(255,255,255,.87); border-radius: 24px; padding: 22px 4px; background: var(--cw-glass); box-shadow: var(--cw-shadow); backdrop-filter: blur(18px); }
.trust article { display: flex; align-items: center; gap: 17px; padding-inline: 24px; min-width: 0; }
.trust article + article { border-left: 1px solid #cfe2fa; }
.trust-icon { display: grid; place-items: center; width: 54px; height: 54px; flex-shrink: 0; border-radius: 15px; border: 1px solid #c5e0ff; background: linear-gradient(#fff,#e4f2ff); box-shadow: 0 7px 15px rgba(0,91,195,.1); }
.trust-icon img { width: 34px; height: 34px; }
.trust-icon.bolt { color: #0074ff; font-size: 34px; }
.trust strong { font-size: 14px; color: #0d2d66; }
.trust p { font-size: 12px; line-height: 1.55; margin: 5px 0 0; color: #436691; }
.features { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin-top: 20px; }
.feature-card { display: flex; align-items: center; gap: 20px; padding: 26px 22px; border: 1px solid rgba(255,255,255,.86); border-radius: var(--cw-radius); background: var(--cw-glass); box-shadow: var(--cw-shadow); backdrop-filter: blur(18px); }
.feature-art { display: grid; place-items: center; width: 100px; height: 116px; flex: 0 0 100px; }
.feature-art img { width: 112px; max-width: 116%; height: 116px; object-fit: contain; }
.feature-copy { min-width: 0; }
.feature-copy h2 { font-size: 21px; letter-spacing: -.04em; margin: 0 0 10px; color: var(--cw-ink); }
.feature-copy p { font-size: 12px; line-height: 1.7; margin: 0 0 12px; color: #3f608f; }
.feature-copy a, .text-link { font-size: 12px; color: #0068eb; font-weight: 800; text-decoration: none; }
.workspace { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); align-items: center; gap: 42px; padding: 70px 0; }
.workspace-copy h2 { font-size: clamp(30px,2.6vw,45px); letter-spacing: -.045em; color: var(--cw-ink); line-height: 1.15; margin: 0; }
.workspace-copy h2 span { color: #0070ff; }
.workspace-copy > p:not(.eyebrow) { font-size: 15px; line-height: 1.8; color: #2c578b; margin-bottom: 18px; }
.workspace-copy { padding: 20px; border-radius: 24px; background: radial-gradient(ellipse,rgba(250,253,255,.8),rgba(239,249,255,.55) 60%,transparent); }
.workspace-card { border: 1px solid #fff; border-radius: 24px; background: var(--cw-glass); box-shadow: var(--cw-shadow); overflow: hidden; }
.workspace-topbar { display: flex; align-items: center; gap: 7px; height: 57px; padding: 10px 17px; background: rgba(255,255,255,.8); border-bottom: 1px solid #d2e4ff; }
.workspace-topbar img { width: 27px; height: 30px; object-fit: contain; }
.workspace-topbar strong { font-size: 15px; color: var(--cw-ink); }
.workspace-topbar strong span { color: #0070ff; }
.workspace-search { display: flex; align-items: center; min-height: 32px; margin-left: auto; padding: 6px 12px; border: 1px solid #d3e3f8; border-radius: 10px; background: #fff; color: #6a87ac; font-size: 10px; width: 45%; }
.workspace-body { display: grid; grid-template-columns: 140px minmax(0,1fr); }
.workspace-body aside { padding: 15px 9px; border-right: 1px solid #d2e5ff; background: rgba(238,246,255,.7); }
.workspace-body aside a { display: block; padding: 11px 9px; font-size: 11px; font-weight: 700; border-radius: 9px; }
.workspace-body aside a.active { color: #0064f5; border: 1px solid #badbff; background: #e1f0ff; }
.workspace-body > section { padding: 18px 20px; }
.workspace-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.workspace-title h3 { font-size: 14px; margin: 0; color: var(--cw-ink); }
.workspace-title > span { font-size: 8px; color: #5779a3; }
.workspace-title button { margin-left: auto; border: 1px solid #0069f5; border-radius: 7px; color: #fff; background: #087bff; padding: 7px 8px; font-size: 9px; font-weight: 700; }
.workspace-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 7px; border-bottom: 1px solid #dce9ff; font-size: 11px; }
.workspace-row span { text-align: right; color: #52719b; font-size: 10px; }
.security { display: grid; grid-template-columns: .5fr 1fr; align-items: center; gap: 56px; padding: 34px 60px; border: 1px solid rgba(255,255,255,.9); border-radius: var(--cw-radius); background: var(--cw-glass); box-shadow: var(--cw-shadow); backdrop-filter: blur(18px); }
.security-art { height: 190px; text-align: center; }
.security-art img { height: 100%; object-fit: contain; }
.security-copy h2, .pricing h2 { font-size: 35px; letter-spacing: -.045em; color: var(--cw-ink); margin: 0; }
.security-copy > p:last-child, .pricing > div > p:last-child { font-size: 14px; color: #3b608e; line-height: 1.8; margin-bottom: 0; }
.pricing { display: grid; grid-template-columns: 1fr .85fr; align-items: center; gap: 40px; margin-top: 28px; padding: 42px; background: var(--cw-glass); border: 1px solid #fff; border-radius: var(--cw-radius); box-shadow: var(--cw-shadow); position: relative; backdrop-filter: blur(18px); }
.pricing h2 { font-size: 28px; }
.pricing .eyebrow { margin-bottom: 14px; }
.price-card { display: flex; align-items: center; gap: 18px; padding: 23px; border: 1px solid #cee2ff; background: rgba(255,255,255,.83); border-radius: 19px; }
.price-card > div { min-width: 0; }
.price-card small, .price-card strong, .price-card span { display: block; }
.price-card small { font-size: 10px; color: #5378a7; margin-bottom: 5px; }
.price-card strong { font-size: 20px; color: #0b306c; }
.price-card span { font-size: 10px; line-height: 1.6; color: #4e6f9b; margin-top: 7px; }
.price-card .button { font-size: 12px; padding-inline: 16px; flex-shrink: 0; }
.legacy-anchor { position: absolute; top: 0; }
.footer { display: flex; align-items: center; gap: 22px; padding: 32px 0 27px; font-size: 11px; color: #234c82; }
.footer > img { width: 165px; height: auto; }
.footer > span { margin-left: auto; }
.footer nav { display: flex; gap: 24px; }
.footer nav a { text-decoration: none; font-weight: 700; }
html[lang="zh-CN"] .hero h1 { font-size: clamp(48px,4.2vw,72px); line-height: 1.15; letter-spacing: -.035em; }
html[lang="zh-CN"] .hero h1 span { display: block; max-width: 8em; text-wrap: balance; }
html[lang="zh-CN"] .hero-lead { line-height: 1.8; }
html[lang="zh-CN"] .hero-demo-window { font-family: "Microsoft YaHei UI","PingFang SC",system-ui,sans-serif; }
@media (min-width: 1800px) { .hero { gap: 45px; } .hero-demo-topbar { height: 62px; } .hero-demo-body { height: calc(100% - 62px); } .hero-demo-account { min-height: 56px; } .hero-demo-details label { margin-bottom: 10px; } .hero-demo-details label > div { min-height: 37px; } .hero-demo-detail-head { margin-bottom: 8px; } .hero-demo-buttons { margin-bottom: 12px; } }
@media (max-width: 1240px) {
  .wrap { width: calc(100% - 64px); }
  .site-header { grid-template-columns: auto 1fr auto; gap: 18px; padding-inline: 20px; }
  .brand img { width: 182px; }
  .nav-links { gap: 21px; }
  .nav-links a { font-size: 12px; }
  .header-actions { gap: 8px; }
  .header-actions .button { font-size: 12px; padding-inline: 16px; }
  .hero { gap: 25px; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); min-height: 710px; }
  .hero h1 { font-size: clamp(45px,4.8vw,59px); }
  .hero-lead { font-size: 15px; }
  .button-large { min-width: 135px; min-height: 57px; font-size: 15px; padding-inline: 20px; }
  .hero-demo-mini-actions span:nth-child(2), .hero-demo-window-dots { display: none; }
  .hero-demo-topbar { grid-template-columns: 120px minmax(100px,1fr) auto; }
  .hero-demo-summary-grid article { grid-template-columns: 29px minmax(0,1fr); gap: 5px; padding-inline: 5px; }
  .summary-dot { width: 28px; height: 33px; }
  .hero-demo-account { grid-template-columns: 31px minmax(0,1fr) 18px; gap: 5px; }
  .hero-demo-account time { display: none; }
  .hero-demo-account img,.demo-logo { width: 30px; height: 33px; }
  .feature-card { flex-direction: column; align-items: flex-start; gap: 12px; padding: 23px; }
  .feature-art { height: 92px; flex-basis: auto; }
  .feature-art img { height: 106px; }
  .feature-copy p { font-size: 13px; }
  .trust article { padding-inline: 18px; gap: 12px; }
  .trust strong { font-size: 12px; }
  .trust p { font-size: 11px; }
  .workspace { gap: 20px; }
  .workspace-body { grid-template-columns: 115px minmax(0,1fr); }
  .workspace-body > section { padding-inline: 13px; }
  .workspace-title > span { display: none; }
  .workspace-row { font-size: 10px; }
  .workspace-row span { font-size: 8px; }
  .pricing { gap: 24px; padding: 32px; }
  .price-card { flex-direction: column; align-items: stretch; }
  html[lang="zh-CN"] .hero h1 { font-size: clamp(43px,4.4vw,55px); }
}
@media (min-width: 1021px) and (max-width: 1240px) {
  .hero-stage-glass-a { right: 3%; left: 16%; transform: rotate(-5deg); }
}
@media (max-width: 1020px) {
  .nav-links { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .hero { grid-template-columns: 1fr; padding-top: 43px; padding-bottom: 60px; gap: 30px; min-height: 0; }
  .hero-copy { max-width: 650px; padding-left: 0; }
  .hero h1 { font-size: 67px; max-width: 580px; }
  .hero-lead { font-size: 17px; max-width: 610px; }
  .hero-visual { width: min(780px,100%); margin-inline: auto; height: 610px; }
  .hero-demo-window { height: 580px; }
  .hero-demo-topbar { grid-template-columns: 135px minmax(130px,1fr) auto; }
  .hero-demo-mini-actions span:nth-child(2) { display: flex; }
  .hero-stage-platform { left: -3%; right: -2%; bottom: -3%; }
  .hero-stage-glass-a { right: 2%; }
  .hero-stage-glass-b { right: 1%; }
  .hero-demo-summary-grid article { grid-template-columns: 34px minmax(0,1fr); }
  .summary-dot { width: 32px; height: 36px; }
  .hero-demo-account { grid-template-columns: 36px minmax(0,1fr) auto 21px; }
  .hero-demo-account time { display: block; }
  .hero-demo-account img,.demo-logo { width: 34px; height: 36px; }
  .features { gap: 14px; }
  .trust { padding: 20px 0; }
  .trust article { flex-direction: column; align-items: flex-start; }
  .workspace { grid-template-columns: 1fr; padding-block: 46px; gap: 18px; }
  .workspace-copy { padding: 20px 0; }
  .workspace-card { max-width: 780px; width: 100%; }
  .workspace-body { grid-template-columns: 150px minmax(0,1fr); }
  .workspace-title > span { display: block; }
  .workspace-row { font-size: 12px; }
  .workspace-row span { font-size: 11px; }
  .security { grid-template-columns: .45fr 1fr; gap: 24px; padding: 28px; }
  .security-copy h2 { font-size: 29px; }
  .security-art { height: 155px; }
  .pricing { grid-template-columns: 1fr; }
  .price-card { flex-direction: row; align-items: center; justify-content: space-between; }
  html[lang="zh-CN"] .hero h1 { font-size: 58px; max-width: 630px; }
}
@media (max-width: 620px) {
  body::before { background-position: 48% 0; background-size: auto 1150px; background-color: #d8ecff; }
  body::after { background: linear-gradient(180deg,rgba(246,251,255,.27),transparent 540px,rgba(220,239,255,.26)); }
  .page-shell { padding-top: 12px; }
  .wrap { width: calc(100% - 28px); }
  .site-header { min-height: 70px; padding: 9px 10px; border-radius: 22px; gap: 8px; }
  .brand img { width: clamp(122px,36vw,166px); }
  .header-actions { gap: 5px; }
  .header-create-account { display: none; }
  .site-language-switch { min-height: 44px; border-radius: 11px; padding: 0 3px; }
  .site-language-switch button { min-height: 44px; min-width: 25px; font-size: 10px; padding: 0 3px; }
  .site-language-switch > span { font-size: 10px; }
  .header-actions .button { min-height: 44px; font-size: 11px; padding: 0 12px; border-radius: 11px; }
  .hero { padding: 37px 3px 32px; gap: 31px; }
  .hero-copy { padding: 0; }
  .hero-copy::before { inset: -17px -4px -24px -10px; background: radial-gradient(ellipse,rgba(255,255,255,.79),rgba(239,249,255,.45) 68%,transparent); }
  .eyebrow { font-size: 10px; letter-spacing: .22em; margin-bottom: 15px; }
  .hero h1 { font-size: clamp(39px,10.55vw,61px); line-height: 1.065; letter-spacing: -.06em; }
  .hero-lead { font-size: 14px; line-height: 1.7; margin-top: 18px; }
  .hero-actions { gap: 10px; margin-top: 22px; }
  .button-large { min-width: 0; flex: 1; min-height: 51px; border-radius: 13px; padding: 0 12px; font-size: 13px; }
  .private-note { font-size: 10px; line-height: 1.75; margin-top: 16px; gap: 7px; }
  .private-note > img { width: 20px; height: 20px; flex-basis: 20px; }
  .hero-visual { width: 100%; height: auto; perspective: none; }
  .hero-stage { inset: 0 0 -10px; }
  .hero-stage-glass-a { inset: -8px 3px 22px 10px; transform: rotate(-2deg); border-radius: 22px; }
  .hero-stage-glass-b { inset: -3px 0 14px 3px; transform: none; border-radius: 22px; }
  .hero-stage-platform { left: 0; right: 0; bottom: -7px; height: 46px; border-width: 1px; opacity: .8; }
  .hero-demo-window { height: auto; width: 100%; transform: none; border-radius: 20px; border-width: 2px; box-shadow: 0 0 0 2px rgba(173,235,255,.9), 0 14px 25px rgba(0,80,184,.2); margin-bottom: 15px; }
  .hero-demo-topbar { height: 45px; display: flex; gap: 8px; padding: 7px 10px; }
  .hero-demo-brand { gap: 4px; flex-shrink: 0; }
  .hero-demo-brand img { width: 23px; height: 26px; }
  .hero-demo-brand strong { font-size: 12px; }
  .hero-demo-search { flex: 1; min-width: 0; font-size: 7px; padding-inline: 7px; min-height: 29px; }
  .hero-demo-mini-actions { display: none; }
  .hero-demo-body { height: auto; display: grid; grid-template-columns: 1fr; }
  .hero-demo-spaces { display: flex; align-items: center; padding: 7px 8px; gap: 4px; border-right: 0; border-bottom: 1px solid #d9eaff; background: rgba(238,248,255,.86); }
  .hero-demo-section-title, .hero-demo-divider, .hero-demo-spaces > small, .hero-demo-tool, .hero-demo-space:nth-of-type(n+5) { display: none; }
  .hero-demo-space { flex: 1; min-height: 32px; padding: 4px; margin: 0; justify-content: center; gap: 4px; font-size: 9px; }
  .hero-demo-space > span { width: 21px; height: 22px; font-size: 15px; border-radius: 5px; }
  .hero-demo-space > span img { width: 16px; height: 16px; }
  .hero-demo-space strong { font-size: 9px; }
  .hero-demo-accounts { padding: 10px; border-right: 0; background: linear-gradient(145deg,#f7fcff,#edf6ff); }
  .hero-demo-summary-grid { gap: 7px; margin-bottom: 12px; }
  .hero-demo-summary-grid article { min-height: 57px; padding: 8px; grid-template-columns: 33px minmax(0,1fr); gap: 7px; }
  .summary-dot { width: 31px; height: 34px; }
  .summary-dot img { width: 23px; height: 23px; }
  .hero-demo-summary-grid strong { font-size: 11px; }
  .hero-demo-summary-grid small { font-size: 9px; }
  .hero-demo-list-head strong { font-size: 12px; }
  .hero-demo-list-head span { font-size: 9px; }
  .hero-demo-list-search { font-size: 10px; min-height: 32px; }
  .hero-demo-account { min-height: 57px; grid-template-columns: 39px minmax(0,1fr) auto 24px; gap: 8px; padding-inline: 8px; margin-bottom: 6px; }
  .hero-demo-account:last-child { margin-bottom: 0; }
  .hero-demo-account img,.demo-logo { width: 37px; height: 38px; }
  .hero-demo-account div strong { font-size: 12px; }
  .hero-demo-account div small { font-size: 9px; }
  .hero-demo-account time { font-size: 9px; }
  .hero-demo-account > b { width: 23px; height: 27px; }
  .hero-demo-details { display: none; }
  .trust { grid-template-columns: 1fr; padding: 7px 17px; border-radius: 20px; }
  .trust article { flex-direction: row; align-items: center; padding: 13px 0; gap: 13px; }
  .trust article + article { border-left: 0; border-top: 1px solid #d2e4f7; }
  .trust-icon { width: 45px; height: 45px; border-radius: 12px; }
  .trust-icon img { width: 29px; height: 29px; }
  .trust strong { font-size: 12px; }
  .trust p { font-size: 11px; }
  .features { grid-template-columns: 1fr; gap: 13px; margin-top: 16px; }
  .feature-card { flex-direction: row; align-items: center; gap: 14px; padding: 21px 18px; border-radius: 20px; }
  .feature-art { width: 82px; height: 90px; flex: 0 0 82px; }
  .feature-art img { width: 94px; height: 96px; }
  .feature-copy h2 { font-size: 18px; margin-bottom: 7px; }
  .feature-copy p { font-size: 11px; line-height: 1.75; margin-bottom: 10px; }
  .feature-copy a { font-size: 11px; }
  .workspace { padding-block: 28px; }
  .workspace-copy { padding: 10px 3px; }
  .workspace-copy h2 { font-size: 30px; }
  .workspace-copy > p:not(.eyebrow) { font-size: 13px; }
  .workspace-card { border-radius: 18px; }
  .workspace-topbar { padding: 9px 10px; height: 47px; }
  .workspace-topbar strong { font-size: 12px; }
  .workspace-topbar img { width: 23px; height: 26px; }
  .workspace-search { min-height: 29px; font-size: 8px; padding-inline: 7px; }
  .workspace-body { grid-template-columns: 1fr; }
  .workspace-body aside { display: none; }
  .workspace-body > section { padding: 15px 12px; }
  .workspace-title h3 { font-size: 12px; }
  .workspace-title > span { display: none; }
  .workspace-title button { min-height: 33px; font-size: 8px; }
  .workspace-row { font-size: 10px; padding: 14px 4px; gap: 8px; }
  .workspace-row span { font-size: 9px; }
  .security { grid-template-columns: 1fr; gap: 9px; padding: 22px; border-radius: 20px; }
  .security-art { height: 125px; }
  .security-copy h2 { font-size: 26px; }
  .security-copy .eyebrow { margin-bottom: 12px; }
  .security-copy > p:last-child { font-size: 12px; }
  .pricing { gap: 20px; padding: 24px 19px; margin-top: 17px; border-radius: 20px; }
  .pricing h2 { font-size: 25px; line-height: 1.3; }
  .pricing > div > p:last-child { font-size: 12px; }
  .price-card { flex-direction: column; align-items: stretch; padding: 19px; }
  .price-card strong { font-size: 19px; }
  .price-card .button { min-height: 47px; }
  .footer { flex-wrap: wrap; gap: 15px; padding-top: 26px; font-size: 9px; }
  .footer > img { width: 142px; }
  .footer > span { margin-left: 0; flex-basis: 100%; order: 3; }
  .footer nav { gap: 17px; margin-left: auto; }
  html[lang="zh-CN"] .hero h1 { font-size: clamp(35px,9.6vw,53px); line-height: 1.22; letter-spacing: -.035em; }
  html[lang="zh-CN"] .hero-lead { font-size: 14px; line-height: 1.9; }
}
@media (max-width: 350px) {
  .wrap { width: calc(100% - 24px); }
  .site-header { padding-inline: 8px; gap: 5px; }
  .brand img { width: 117px; }
  .header-actions .button { padding-inline: 10px; font-size: 10px; }
  .site-language-switch { padding-inline: 2px; }
  .site-language-switch button { min-width: 23px; padding-inline: 2px; }
  .hero h1 { font-size: 38px; }
  .hero-demo-account { gap: 6px; grid-template-columns: 36px minmax(0,1fr) 22px; }
  .hero-demo-account time { display: none; }
  .hero-demo-account div strong { font-size: 11px; }
  .hero-demo-account div small { font-size: 8px; }
  .hero-demo-search { font-size: 6.5px; }
  .hero-demo-space { gap: 3px; }
  .hero-demo-space strong { font-size: 8px; }
  .hero-demo-summary-grid article { padding-inline: 6px; gap: 5px; }
  .hero-demo-summary-grid strong { font-size: 10px; }
  .feature-card { gap: 10px; padding-inline: 15px; }
  .feature-art { width: 71px; flex-basis: 71px; }
  html[lang="zh-CN"] .hero h1 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button { transition: none; } .button:hover { transform: none; } }