:root {
  color-scheme: dark;
  --ink: #e9f5ff;
  --muted: #8ba5ba;
  --cyan: #59e6ff;
  --blue: #4c7dff;
  --violet: #9b7bff;
  --panel: rgba(8, 20, 36, 0.72);
  --line: rgba(132, 211, 255, 0.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 14% 8%, rgba(37, 112, 190, .18), transparent 32rem),
    radial-gradient(circle at 88% 28%, rgba(89, 230, 255, .08), transparent 26rem),
    #030914;
  font-family: "Inter", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .35;
  background-image:
    radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 20%, #bfefff 0 1px, transparent 1.5px),
    radial-gradient(circle at 80% 70%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 35% 80%, #89cfff 0 1px, transparent 1.5px);
  background-size: 170px 170px, 230px 230px, 290px 290px, 350px 350px;
}
a { color: inherit; }
::selection { color: #00151d; background: var(--cyan); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid transparent;
  background: rgba(3, 9, 20, .72);
  backdrop-filter: blur(18px);
  transition: border-color .25s ease, background .25s ease;
}
.site-header.scrolled { border-color: var(--line); background: rgba(3, 9, 20, .92); }
.nav-link { position: relative; color: #91a9bd; transition: color .2s ease; }
.nav-link:hover, .nav-link.active { color: #f1fbff; }
.nav-link.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -10px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  box-shadow: 0 0 12px var(--cyan);
}
.logo-mark {
  display: grid;
  width: 38px; height: 38px;
  place-items: center;
  border: 1px solid rgba(89,230,255,.45);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #8cf2ff 0 5%, #237ccc 18%, #092c58 48%, #020b18 72%);
  box-shadow: inset -8px -5px 12px rgba(0,0,0,.55), 0 0 24px rgba(89,230,255,.24);
}
.logo-mark::after { content: ""; width: 44px; height: 12px; border: 1px solid rgba(89,230,255,.28); border-radius: 50%; transform: rotate(-14deg); }

.eyebrow { color: var(--cyan); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; }
.text-gradient { color: transparent; background: linear-gradient(105deg, #fff 10%, #8eeeff 54%, #7295ff); background-clip: text; -webkit-background-clip: text; }
.grid-overlay {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .38;
  background-image: linear-gradient(rgba(89,230,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(89,230,255,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
}
.glass {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(13,31,52,.83), rgba(5,14,27,.68));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 24px 70px rgba(0,0,0,.24);
  backdrop-filter: blur(15px);
}
.tech-card { position: relative; overflow: hidden; transition: transform .28s ease, border-color .28s ease, background .28s ease; }
.tech-card::before { content: ""; position: absolute; left: -30%; top: 0; width: 34%; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan)); transition: left .5s ease; }
.tech-card:hover { transform: translateY(-4px); border-color: rgba(89,230,255,.35); }
.tech-card:hover::before { left: 100%; }
.tech-number { color: rgba(89,230,255,.18); font-size: 3rem; font-weight: 800; line-height: 1; }

.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 48px; padding: .75rem 1.25rem; border-radius: .25rem;
  font-size: .84rem; font-weight: 700; letter-spacing: .06em; transition: all .22s ease;
}
.btn-primary { color: #00131b; border: 1px solid #8cf1ff; background: linear-gradient(100deg, #80edff, #4f8dff); box-shadow: 0 0 28px rgba(89,230,255,.18); }
.btn-primary:hover { filter: brightness(1.1); box-shadow: 0 0 38px rgba(89,230,255,.32); transform: translateY(-2px); }
.btn-secondary { color: #dff9ff; border: 1px solid rgba(155,214,255,.28); background: rgba(9,25,43,.66); }
.btn-secondary:hover { border-color: rgba(89,230,255,.62); background: rgba(18,49,77,.75); }

.earth-frame { position: relative; isolation: isolate; aspect-ratio: 1; }
.earth-frame img { object-fit: cover; }
.earth-frame::before { content: ""; position: absolute; inset: 8%; z-index: -1; border-radius: 50%; background: #27cfff; filter: blur(70px); opacity: .22; }
.earth-frame::after { content: "LIVE SURFACE / 2026"; position: absolute; right: 2%; bottom: 8%; z-index: 3; color: #78eaff; font-size: .62rem; letter-spacing: .2em; }
.earth-image { width: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(.9) contrast(1.08); animation: earth-float 8s ease-in-out infinite; }
/* 轨道环压在照片上方，保留太空科幻的取景感。 */
.orbit { position: absolute; inset: 9%; z-index: 3; border: 1px solid rgba(89,230,255,.28); border-radius: 50%; transform: rotate(64deg); }
.orbit::after { content: ""; position: absolute; top: 48%; left: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
@keyframes earth-float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } }

.metric { border-left: 1px solid rgba(89,230,255,.28); }
.metric strong { display: block; font-size: clamp(1.55rem, 3vw, 2.5rem); color: #f3fcff; letter-spacing: -.04em; }
.metric span { color: var(--muted); font-size: .75rem; letter-spacing: .08em; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #65f5b1; box-shadow: 0 0 12px #65f5b1; animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .4; } }

.page-hero { position: relative; overflow: hidden; padding: 7rem 0 4rem; border-bottom: 1px solid var(--line); }
.page-hero::after { content: ""; position: absolute; width: 520px; height: 520px; right: -180px; top: -210px; border: 1px solid rgba(89,230,255,.12); border-radius: 50%; box-shadow: 0 0 0 70px rgba(89,230,255,.025), 0 0 0 140px rgba(89,230,255,.018); }
.section-line { display: flex; align-items: center; gap: 1rem; }
.section-line::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, var(--line), transparent); }
.tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 .65rem; color: #a9eaff; border: 1px solid rgba(89,230,255,.2); border-radius: 999px; background: rgba(89,230,255,.05); font-size: .69rem; }
.timeline-item { position: relative; padding-left: 2rem; }
.timeline-item::before { content: ""; position: absolute; left: 0; top: .38rem; width: 9px; height: 9px; border: 1px solid var(--cyan); background: #071626; transform: rotate(45deg); box-shadow: 0 0 14px rgba(89,230,255,.45); }
.timeline-item::after { content: ""; position: absolute; left: 4px; top: 1.25rem; bottom: -2rem; width: 1px; background: linear-gradient(var(--line), transparent); }
.timeline-item:last-child::after { display: none; }

.download-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.download-card { order: var(--device-order, 2); }
.download-card.recommended { border-color: rgba(89,230,255,.7); background: linear-gradient(145deg, rgba(22,61,88,.92), rgba(7,19,35,.83)); box-shadow: 0 0 40px rgba(89,230,255,.11); }
.download-card.recommended .recommend-badge { display: inline-flex; }
.recommend-badge { display: none; color: #00151c; background: var(--cyan); }
.platform-icon { display: grid; width: 44px; height: 44px; place-items: center; color: var(--cyan); border: 1px solid rgba(89,230,255,.24); background: rgba(89,230,255,.05); font-size: 1.15rem; font-weight: 800; }

.modal-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; background: rgba(0,5,12,.82); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: .2s ease; }
.modal-backdrop.open { opacity: 1; visibility: visible; }
.modal-panel { width: min(100%, 430px); transform: translateY(12px) scale(.98); transition: transform .2s ease; }
.modal-backdrop.open .modal-panel { transform: none; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* 生成影像未就绪时，由网格与辉光承接画面。 */
.visual-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.visual-frame {
  position: relative;
  isolation: isolate;
  min-height: 280px;
  margin-inline: 0;
  overflow: hidden;
  border: 1px solid rgba(89,230,255,.22);
  background:
    linear-gradient(rgba(89,230,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(89,230,255,.06) 1px, transparent 1px),
    radial-gradient(circle at 68% 32%, rgba(76,125,255,.3), transparent 35%),
    linear-gradient(135deg, #07182a, #020812 70%);
  background-size: 34px 34px, 34px 34px, auto, auto;
  box-shadow: inset 0 0 60px rgba(25,119,171,.12), 0 24px 70px rgba(0,0,0,.3);
}
.visual-frame::before { content: ""; position: absolute; inset: 12%; z-index: -1; border: 1px solid rgba(89,230,255,.14); border-radius: 50%; box-shadow: 0 0 50px rgba(89,230,255,.08); }
.visual-frame--wide { aspect-ratio: 4 / 3; }
.visual-frame--panorama { aspect-ratio: 16 / 7; min-height: 260px; }
/* 图片默认就可见，加载失败才让位给占位层，不依赖脚本。 */
.visual-frame img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity .4s ease; }
.visual-frame.failed img { opacity: 0; }
.visual-status { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .65rem; color: #9bc8db; background: rgba(2,10,20,.2); font-size: .72rem; letter-spacing: .14em; }
.visual-frame.loaded .visual-status { display: none; }
.visual-loader { width: 10px; height: 10px; border: 1px solid var(--cyan); border-radius: 50%; box-shadow: 0 0 12px var(--cyan); animation: pulse 1.6s infinite; }
.visual-retry { display: none; position: absolute; right: .75rem; bottom: .75rem; z-index: 4; min-height: 32px; padding: .35rem .65rem; color: #bdefff; border: 1px solid rgba(89,230,255,.3); background: rgba(3,12,24,.78); backdrop-filter: blur(8px); font-size: .66rem; letter-spacing: .08em; transition: border-color .2s ease, background .2s ease; }
.visual-retry:hover, .visual-retry:focus-visible { border-color: var(--cyan); background: rgba(10,38,59,.9); outline: none; }
.visual-frame.failed .visual-status { color: #b9d4df; }
.visual-frame.failed .visual-retry { display: inline-flex; }

@media (max-width: 767px) {
  .site-header nav { min-height: 60px; }
  .site-header nav > a:first-child { min-width: 0; }
  .site-header nav > a:first-child b { font-size: .72rem; }
  .site-header nav > a:first-child small { font-size: .46rem; }
  .logo-mark { width: 32px; height: 32px; flex: 0 0 32px; }
  .nav-link.active::after { bottom: -4px; }
  .download-grid { grid-template-columns: 1fr; }
  .page-hero { padding: 4rem 0 2.5rem; }
  .page-hero h1 { font-size: clamp(2.5rem, 13vw, 4rem); line-height: 1.05; }
  .page-hero p { font-size: .95rem; line-height: 1.8; }
  .earth-frame { width: min(100%, 430px); }
  .earth-frame::after { right: 0; bottom: 3%; font-size: .5rem; }
  .visual-grid { grid-template-columns: 1fr; }
  .visual-frame, .visual-frame--panorama { min-height: 220px; aspect-ratio: 4 / 3; }
  .visual-status { padding: 1rem; text-align: center; font-size: .62rem; letter-spacing: .08em; }
  .visual-retry { right: .5rem; bottom: .5rem; min-height: 36px; padding: .45rem .6rem; font-size: .62rem; }
  .metric strong { font-size: clamp(1.1rem, 6vw, 1.6rem); }
  .metric span { font-size: .62rem; letter-spacing: 0; }
  .btn-primary, .btn-secondary { min-height: 46px; padding: .7rem 1rem; font-size: .76rem; }
  .download-card { min-width: 0; }
}
@media (max-width: 380px) {
  .site-header nav { padding-inline: .75rem; }
  .site-header nav > a:first-child { gap: .5rem; }
  .site-header nav > a:first-child b { letter-spacing: .1em; }
  main h2 { font-size: 1.75rem; }
  main h1 { font-size: 2.7rem; }
  .metric { padding-left: .55rem; }
  .metric strong { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}