:root {
  color-scheme: light;
  --ink: #10182b;
  --muted: #667085;
  --line: #e7eaf0;
  --blue: #315df6;
  --blue-dark: #183fbf;
  --orange: #ff9d2e;
  --paper: #f6f8fc;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

.site-header {
  height: 76px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 34px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  position: relative;
  z-index: 5;
}
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; justify-self: start; }
.brand img { width: 38px; height: 38px; border-radius: 11px; }
nav { display: flex; gap: 38px; color: #475467; font-size: 14px; }
nav a:hover { color: var(--blue); }
.header-action {
  justify-self: end;
  padding: 10px 19px;
  border: 1px solid #d8deea;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
}

.hero {
  min-height: 720px;
  padding: 94px max(34px, calc((100vw - 1252px) / 2)) 110px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 70px;
  background:
    radial-gradient(circle at 82% 18%, rgba(49,93,246,.14), transparent 32%),
    radial-gradient(circle at 15% 80%, rgba(255,157,46,.10), transparent 24%),
    linear-gradient(180deg, #fbfcff 0%, #f5f7fb 100%);
  overflow: hidden;
}
.eyebrow { margin: 0 0 20px; color: var(--blue); font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.eyebrow span { width: 8px; height: 8px; display: inline-block; margin-right: 8px; border-radius: 50%; background: var(--orange); }
h1 { margin: 0; font-size: clamp(48px, 5.1vw, 76px); line-height: 1.13; letter-spacing: -.055em; }
h1 em { color: var(--blue); font-style: normal; }
.hero-lead { max-width: 590px; margin: 30px 0 0; color: #536078; font-size: 18px; line-height: 1.9; }
.hero-actions { display: flex; gap: 14px; margin-top: 38px; }
.button { padding: 14px 23px; border-radius: 13px; font-weight: 800; font-size: 15px; }
.button.primary { color: #fff; background: var(--blue); box-shadow: 0 14px 30px rgba(49,93,246,.23); }
.button.primary:hover { background: var(--blue-dark); transform: translateY(-1px); }
.button.secondary { background: #fff; border: 1px solid #dce1eb; }
.trust-list { display: flex; flex-wrap: wrap; gap: 22px; margin: 28px 0 0; padding: 0; color: #667085; font-size: 13px; list-style: none; }
.trust-list li::before { content: "✓"; margin-right: 7px; color: #16a36a; font-weight: 900; }

.product-stage { min-height: 530px; display: grid; place-items: center; position: relative; perspective: 1200px; }
.stage-glow { position: absolute; width: 490px; height: 490px; border-radius: 50%; background: linear-gradient(135deg, rgba(49,93,246,.2), rgba(255,157,46,.12)); filter: blur(2px); }
.app-window { width: min(720px, 100%); position: relative; z-index: 1; border: 1px solid rgba(255,255,255,.7); border-radius: 23px; overflow: hidden; background: #f6f8fc; box-shadow: 0 38px 90px rgba(26,39,79,.22); transform: rotateY(-4deg) rotateX(2deg); transform-style: preserve-3d; transition: transform .28s ease, box-shadow .28s ease; will-change: transform; }
.product-stage:hover .app-window { box-shadow: 0 46px 100px rgba(26,39,79,.26); }
.window-bar { height: 58px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; background: #fff; border-bottom: 1px solid var(--line); font-size: 11px; }
.window-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.window-brand img { width: 28px; height: 28px; border-radius: 8px; }
.window-state { color: #667085; }
.window-state i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #27bd82; }
.window-body { min-height: 370px; display: grid; grid-template-columns: 145px 1fr; }
.window-body aside { padding: 24px 15px; display: flex; flex-direction: column; gap: 8px; color: #a7b0c2; background: #101827; font-size: 11px; }
.window-body aside strong { margin: 0 9px 13px; color: #fff; font-size: 13px; }
.window-body aside span { padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: color .2s ease, background .2s ease, transform .2s ease; }
.window-body aside span:hover { color: #fff; transform: translateX(2px); }
.window-body aside span.active { color: #fff; background: rgba(91,118,255,.25); }
.window-body aside small { margin: 14px 10px 0; color: #697387; }
.task-view { padding: 28px; }
.task-heading { display: flex; justify-content: space-between; align-items: end; }
.task-heading div { display: flex; flex-direction: column; gap: 5px; }
.task-heading small { color: #7c879b; }
.task-heading strong { font-size: 20px; }
.task-heading b { color: var(--blue); font-size: 13px; }
.progress { height: 6px; margin: 17px 0 24px; overflow: hidden; border-radius: 10px; background: #e3e7ef; }
.progress span { display: block; width: 72%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), #7691ff); transition: width .65s cubic-bezier(.2,.75,.2,1); }
.task-card { margin-top: 12px; padding: 17px; display: grid; grid-template-columns: 43px 1fr auto; align-items: center; gap: 13px; border: 1px solid #e3e7ef; border-radius: 13px; background: #fff; cursor: pointer; outline: none; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, opacity .25s ease; }
.task-card:hover, .task-card:focus-visible { transform: translateY(-2px); border-color: #b9c6ff; box-shadow: 0 12px 28px rgba(49,93,246,.11); }
.task-card.selected { transform: translateY(-2px); border-color: #9cb0ff; box-shadow: 0 14px 32px rgba(49,93,246,.15); }
.task-card.muted { opacity: .7; }
.task-icon { width: 40px; height: 40px; display: grid; place-items: center; color: var(--blue); border-radius: 10px; background: #eef1ff; font-size: 11px; font-weight: 900; }
.task-card div:nth-child(2) { display: flex; flex-direction: column; gap: 4px; }
.task-card strong { font-size: 13px; }
.task-card small { color: #8b94a7; font-size: 10px; }
.task-card b { color: #667085; font-size: 10px; }
.float-card { position: absolute; z-index: 2; padding: 14px 17px; display: flex; flex-direction: column; gap: 4px; border: 1px solid rgba(255,255,255,.8); border-radius: 14px; background: rgba(255,255,255,.92); box-shadow: 0 18px 45px rgba(23,38,81,.16); backdrop-filter: blur(10px); }
.float-card span { color: var(--blue); font-size: 10px; font-weight: 900; }
.float-card strong { font-size: 12px; }
.float-card.review { right: -26px; top: 76px; }
.float-card.local { left: -10px; bottom: 42px; }
.demo-cursor { width: 40px; height: 40px; position: absolute; left: 0; top: 0; z-index: 4; display: grid; place-items: center; color: #fff; border: 3px solid #fff; border-radius: 50%; background: var(--blue); box-shadow: 0 10px 28px rgba(49,93,246,.38); pointer-events: none; opacity: 0; transform: translate3d(var(--cursor-x, 0), var(--cursor-y, 0), 0) scale(.86); transition: transform .72s cubic-bezier(.2,.8,.2,1), opacity .25s ease; }
.demo-cursor i { font-size: 17px; line-height: 1; }
.demo-cursor span { position: absolute; left: 33px; top: 22px; padding: 5px 8px; color: #fff; border-radius: 7px; background: #101827; font-size: 9px; font-weight: 800; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; }
.demo-cursor.is-visible { opacity: 1; }
.demo-cursor.is-clicking { transform: translate3d(var(--cursor-x), var(--cursor-y), 0) scale(.7); }
.demo-cursor.is-clicking span { opacity: 1; transform: translateY(0); }
.stage-hint { position: absolute; right: 8px; bottom: 2px; z-index: 3; margin: 0; color: #748097; font-size: 11px; font-weight: 700; }
.product-stage.is-user-active .demo-cursor { opacity: 0; }

.section { max-width: 1180px; margin: 0 auto; padding: 120px 30px; }
.intro { display: grid; grid-template-columns: 1fr .7fr; gap: 90px; align-items: end; }
.section-heading h2 { margin: 0; font-size: clamp(38px, 4vw, 57px); line-height: 1.2; letter-spacing: -.045em; }
.section-copy { margin: 0; color: #667085; font-size: 18px; line-height: 1.9; }
.feature-grid { max-width: 1180px; margin: -45px auto 0; padding: 0 30px 100px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.feature-card { min-height: 370px; padding: 38px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--paper); }
.feature-main { grid-column: 1 / -1; min-height: 410px; background: linear-gradient(135deg, #f5f7ff, #eef2ff); }
.feature-number { color: var(--blue); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.feature-card h3 { max-width: 600px; margin: 24px 0 14px; font-size: 30px; line-height: 1.3; letter-spacing: -.035em; }
.feature-card p { max-width: 660px; margin: 0; color: #68758b; line-height: 1.8; }
.selection-playground { max-width: 760px; margin-top: 42px; padding: 18px; border: 1px solid rgba(49,93,246,.13); border-radius: 16px; background: rgba(255,255,255,.58); }
.selection-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.selection-status { color: #53627a; font-size: 13px; font-weight: 800; }
.selection-actions { display: flex; gap: 8px; }
.selection-actions button { display: inline-flex; align-items: center; gap: 5px; padding: 8px 11px; color: #315df6; border: 1px solid #cfd8fa; border-radius: 9px; background: #fff; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.selection-actions button:hover { border-color: #9eaff8; background: #f6f8ff; }
.selection-actions button:disabled { color: #8a96aa; cursor: wait; }
.selection-demo { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.selection-demo button { min-width: 48px; padding: 12px 14px; color: #667085; border: 1px solid #dce2ef; border-radius: 9px; background: #fff; font: inherit; font-weight: 800; cursor: pointer; transition: transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.selection-demo button:hover { transform: translateY(-2px); border-color: #aebcf0; box-shadow: 0 6px 14px rgba(52,72,125,.09); }
.selection-demo button:focus-visible, .selection-actions button:focus-visible { outline: 3px solid rgba(49,93,246,.22); outline-offset: 2px; }
.selection-demo button.keep { color: #7f5700; border-color: #efc35e; background: #fff0bf; }
.selection-demo button.is-demo-target { transform: translateY(-3px) scale(1.06); box-shadow: 0 8px 18px rgba(239,178,42,.22); }
.selection-hint { margin: 12px 0 0 !important; color: #7b879a !important; font-size: 12px; line-height: 1.5 !important; }
.selection-hint i { margin-right: 4px; color: #315df6; }
.caption-demo { margin-top: 56px; display: flex; flex-direction: column; gap: 12px; align-items: start; }
.caption-demo span { padding: 12px 20px; color: #fff; border-radius: 8px; background: #1a2335; font-weight: 900; box-shadow: 4px 4px 0 var(--orange); }
.dark-card { color: #fff; background: #101827; }
.dark-card .feature-number { color: #88a0ff; }
.dark-card p { color: #aeb8ca; }
.local-path { margin-top: 60px; padding: 16px; display: flex; align-items: center; gap: 10px; border: 1px solid #2c374b; border-radius: 13px; background: #182235; color: #d9dfeb; font-size: 12px; }
.local-path i { width: 9px; height: 9px; border-radius: 50%; background: #3ed39a; box-shadow: 0 0 0 5px rgba(62,211,154,.12); }
.local-path b { color: #67748a; }

.workflow { padding-top: 80px; }
.section-heading.compact { max-width: 700px; }
.workflow-list { margin: 65px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.workflow-list li { padding: 28px 8px; display: grid; grid-template-columns: 95px 1fr; align-items: start; border-bottom: 1px solid var(--line); }
.workflow-list > li > span { color: var(--blue); font-size: 13px; font-weight: 900; }
.workflow-list h3 { margin: 0 0 8px; font-size: 22px; }
.workflow-list p { margin: 0; color: #667085; line-height: 1.7; }

.download { max-width: 1180px; margin: 0 auto 90px; padding: 62px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; color: #102650; overflow: hidden; border: 1px solid #eef3fb; border-radius: 30px; background: #fff url("assets/download-surface-v2.png") center / cover no-repeat; box-shadow: 0 26px 70px rgba(47,82,145,.12); }
.download-copy { min-width: 0; padding-right: 42px; }
.eyebrow.light { color: #1472e6; }
.download h2 { margin: 0; font-size: clamp(34px, 2.5vw, 38px); line-height: 1.3; letter-spacing: -.045em; }
.download p:last-child { max-width: 430px; margin: 26px 0 0; color: #66738e; line-height: 1.85; }
.download-platforms { min-width: 0; padding-left: 44px; display: flex; flex-direction: column; border-left: 1px solid #dce7f8; }
.platform-download-card { min-width: 0; padding: 28px 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 260px); grid-template-rows: auto auto; align-items: center; column-gap: 26px; color: #112650; }
.platform-download-card + .platform-download-card { border-top: 1px solid #dce7f8; }
.platform-card-heading { min-width: 0; grid-row: 1 / 3; display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 18px; align-items: center; }
.platform-card-heading > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.platform-card-heading strong { font-size: 22px; }
.platform-card-heading small { color: #697691; font-size: 13px; white-space: nowrap; }
.platform-mark { width: 66px; height: 66px; display: grid; place-items: center; }
.platform-mark img { width: 54px; height: 54px; display: block; object-fit: contain; }
.mac-download-card .platform-mark img { width: 48px; }
.platform-status { grid-column: 2; width: max-content; margin-top: 8px; padding: 6px 10px; color: #1472e6; border-radius: 9px; background: #edf4ff; font-size: 11px; }
.mac-download-card .platform-status { color: #6f788b; background: #eef0f4; }
.download-button { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 18px; color: #fff; border-radius: 12px; background: #2567e8; box-shadow: 0 10px 24px rgba(37,103,232,.2); font-size: 14px; font-weight: 900; text-align: center; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
#windows-download::before { width: 17px; height: 17px; flex: 0 0 17px; background: url("assets/microsoft.svg") center / contain no-repeat; content: ""; filter: grayscale(1) brightness(0) invert(1); }
#windows-download.is-disabled::before { filter: grayscale(1); opacity: .55; }
.download-button:not(.is-disabled):hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(37,103,232,.28); }
.download-button.is-disabled { color: #737b8d; border: 1px solid #d9dde6; background: rgba(248,249,251,.88); box-shadow: none; cursor: not-allowed; }
.download-release-info { grid-column: 2; grid-row: 2; min-height: 22px; margin-top: 10px; display: block; color: #6e7a94; font-size: 11px; line-height: 1.55; text-align: center; }
.mac-download-card .download-release-info { color: #8b94a7; }

.contact { padding-top: 30px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: center; }
.contact-intro h2 { margin: 0; font-size: clamp(38px, 4vw, 54px); line-height: 1.2; letter-spacing: -.045em; }
.contact-intro > p:last-child { max-width: 520px; margin: 24px 0 0; color: #667085; line-height: 1.8; }
.contact-card { padding: 12px 36px; border: 1px solid var(--line); border-radius: 24px; background: var(--paper); font-style: normal; }
.contact-row { min-height: 88px; display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 20px; border-bottom: 1px solid #e1e5ed; }
.contact-row:last-child { border-bottom: 0; }
.contact-row > span { color: #8a94a6; font-size: 13px; }
.contact-row strong, .contact-row a { color: #26324a; font-size: 17px; line-height: 1.65; font-weight: 800; }
.contact-row a:hover { color: var(--blue); }

footer { max-width: 1180px; margin: 0 auto; padding: 0 30px 50px; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { width: 40px; height: 40px; border-radius: 11px; }
.footer-brand div { display: flex; flex-direction: column; gap: 3px; }
.footer-brand strong { font-size: 14px; }
.footer-brand span, .footer-meta { color: #8a94a6; font-size: 12px; }
.footer-meta { display: flex; align-items: center; gap: 22px; }
.footer-meta a:hover { color: var(--blue); }
.public-security-record { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.public-security-record img { width: 20px; height: 20px; object-fit: contain; }

@media (max-width: 1040px) {
  .site-header { grid-template-columns: 1fr auto; }
  nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 70px; }
  .hero-copy { max-width: 760px; }
  .product-stage { width: min(760px, 100%); margin: 0 auto; }
  .intro { grid-template-columns: 1fr; gap: 35px; }
  .download { margin-right: 20px; margin-left: 20px; grid-template-columns: 1fr; }
  .download-copy { padding-right: 0; padding-bottom: 40px; }
  .download-platforms { padding: 24px 0 0; border-top: 1px solid #dce7f8; border-left: 0; }
}

@media (max-width: 720px) {
  .site-header { height: 66px; padding: 0 18px; }
  .brand span { display: none; }
  .header-action { padding: 9px 14px; }
  .hero { min-height: auto; padding: 65px 20px 80px; gap: 52px; }
  h1 { font-size: 44px; }
  .hero-lead { font-size: 16px; }
  .hero-actions { flex-direction: column; align-items: stretch; text-align: center; }
  .trust-list { gap: 12px 18px; }
  .product-stage { min-height: 390px; }
  .app-window { transform: none; border-radius: 16px; }
  .window-body { grid-template-columns: 1fr; min-height: 305px; }
  .window-body aside { display: none; }
  .task-view { padding: 20px; }
  .float-card { display: none; }
  .demo-cursor, .stage-hint { display: none; }
  .section { padding: 85px 20px; }
  .feature-grid { grid-template-columns: 1fr; padding: 0 20px 70px; }
  .feature-main { grid-column: auto; }
  .feature-card { min-height: 340px; padding: 28px; }
  .feature-card h3 { font-size: 25px; }
  .selection-playground { margin-top: 30px; padding: 14px; }
  .selection-toolbar { align-items: flex-start; flex-direction: column; gap: 10px; }
  .selection-demo button { min-width: 42px; padding: 9px 11px; }
  .local-path { flex-wrap: wrap; }
  .workflow-list li { grid-template-columns: 52px 1fr; }
  .download { margin-bottom: 70px; padding: 42px 28px; }
  .download h2 { font-size: clamp(34px, 9vw, 44px); }
  .platform-download-card { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 15px; }
  .platform-card-heading { grid-row: auto; }
  .download-button, .download-release-info { grid-column: 1; grid-row: auto; }
  .contact { padding-top: 10px; grid-template-columns: 1fr; gap: 42px; }
  .contact-card { padding: 8px 22px; }
  .contact-row { grid-template-columns: 90px 1fr; }
  footer { padding: 0 20px 35px; align-items: flex-start; flex-direction: column; }
  .footer-meta { flex-direction: column; gap: 8px; }
}

@media (max-width: 560px) {
  .platform-card-heading { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; }
  .platform-mark { width: 52px; height: 52px; }
  .platform-mark img { width: 42px; height: 42px; }
  .mac-download-card .platform-mark img { width: 38px; }
}

@media (prefers-reduced-motion: no-preference) {
  .button, .header-action { transition: transform .2s ease, background .2s ease, color .2s ease; }
  .app-window { animation: arrive .7s cubic-bezier(.2,.75,.2,1) both; }
  .float-card.review { animation: float-review 4.6s ease-in-out infinite; }
  .float-card.local { animation: float-local 5.2s ease-in-out infinite; }
  @keyframes arrive { from { opacity: 0; transform: perspective(1100px) rotateY(-4deg) rotateX(2deg) translateY(20px); } }
  @keyframes float-review { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-9px,0); } }
  @keyframes float-local { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(7px,-6px,0); } }
}

@media (prefers-reduced-motion: reduce) {
  .demo-cursor { display: none; }
}