:root {
  --ink: #282133;
  --muted: #746b7d;
  --purple: #7858ee;
  --purple-dark: #5c3dd3;
  --pink: #ff9daf;
  --cream: #fbf9f6;
  --line: #e9e3ec;
  font-family: Inter, "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.site-header {
  position: fixed; z-index: 20; top: 18px; left: 50%; transform: translateX(-50%);
  width: min(1160px, calc(100% - 32px)); height: 62px; padding: 8px 10px 8px 18px;
  display: flex; align-items: center; gap: 28px; border: 1px solid rgba(255,255,255,.8);
  border-radius: 22px; background: rgba(255,255,255,.76); backdrop-filter: blur(18px);
  box-shadow: 0 12px 40px rgba(52,34,80,.1);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 850; letter-spacing: -.4px; }
.brand-icon { display: grid; place-items: center; width: 35px; height: 35px; color: white; border-radius: 12px; background: linear-gradient(145deg,var(--purple),var(--pink)); }
.site-header nav { flex: 1; display: flex; justify-content: center; gap: 32px; font-size: 14px; color: var(--muted); }
.site-header nav a:hover { color: var(--purple); }
.header-cta { padding: 12px 18px; color: white; border-radius: 14px; background: var(--ink); font-size: 13px; font-weight: 750; }
.hero { position: relative; min-height: 790px; padding: 150px max(32px,calc((100vw - 1160px)/2)) 90px; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 45px; background: linear-gradient(180deg,#f5f0ff 0%,var(--cream) 88%); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(20px); opacity: .7; }
.hero-glow.one { width: 340px; height: 340px; right: 14%; top: 14%; background: #d9cbff; }
.hero-glow.two { width: 240px; height: 240px; left: 3%; bottom: 0; background: #ffdce2; }
.hero-copy,.hero-visual { position: relative; z-index: 2; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 20px; background: rgba(255,255,255,.8); color: var(--purple-dark); font-size: 12px; font-weight: 750; }
.status-pill i { width: 8px; height: 8px; border-radius: 50%; background: #45c77a; box-shadow: 0 0 0 5px rgba(69,199,122,.12); }
.hero h1 { margin: 23px 0; font-size: clamp(50px,6vw,78px); line-height: 1.04; letter-spacing: -5px; }
.hero h1 em { color: var(--purple); font-style: normal; }
.hero-copy > p { max-width: 610px; color: var(--muted); font-size: 18px; line-height: 1.8; }
.hero-actions { display: flex; gap: 12px; margin: 32px 0 25px; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: 15px 22px; border-radius: 16px; font-weight: 780; transition: .2s; }
.button:hover { transform: translateY(-2px); }
.button.primary { color: white; background: linear-gradient(145deg,var(--purple),#985fe6); box-shadow: 0 12px 28px rgba(120,88,238,.25); }
.button.secondary { border: 1px solid var(--line); background: rgba(255,255,255,.7); }
.proof-row { display: flex; flex-wrap: wrap; gap: 18px; color: var(--muted); font-size: 12px; }
.hero-visual { min-height: 540px; display: grid; place-items: center; }
.product-window { position: relative; z-index: 3; width: min(405px,90%); overflow: hidden; border: 8px solid rgba(255,255,255,.78); border-radius: 32px; background: white; box-shadow: 0 30px 80px rgba(69,45,111,.24); transform: rotate(2deg); }
.product-window img { display: block; width: 100%; }
.window-top { height: 30px; padding: 0 10px; display: flex; align-items: center; gap: 5px; background: #eee9f8; }
.window-top span { width: 7px; height: 7px; border-radius: 50%; background: #b8accb; }
.window-top b { margin-left: auto; color: #817590; font-size: 8px; font-weight: 650; }
.floating-note { position: absolute; z-index: 5; padding: 13px 16px; border-radius: 17px; background: white; box-shadow: 0 14px 35px rgba(64,42,95,.14); font-size: 12px; font-weight: 700; }
.note-one { left: -5%; top: 24%; transform: rotate(-4deg); }
.note-two { right: -3%; bottom: 17%; transform: rotate(3deg); }
.orbit { position: absolute; border: 1px solid rgba(120,88,238,.19); border-radius: 50%; }
.orbit-one { width: 520px; height: 520px; }
.orbit-two { width: 630px; height: 340px; transform: rotate(-18deg); }
.manifesto { padding: 130px 32px; text-align: center; }
.manifesto p { color: var(--purple); font-weight: 750; }
.manifesto h2 { margin: 18px 0; font-size: clamp(35px,4vw,55px); line-height: 1.25; letter-spacing: -2px; }
.section { width: min(1160px,calc(100% - 42px)); margin: auto; padding: 110px 0; }
.section-heading { max-width: 680px; margin: 0 auto 60px; text-align: center; }
.section-heading > span,.roadmap-copy > span { color: var(--purple); font-size: 12px; font-weight: 850; letter-spacing: 1px; text-transform: uppercase; }
.section-heading h2,.roadmap h2 { margin: 12px 0; font-size: clamp(34px,4vw,52px); letter-spacing: -2px; }
.section-heading p,.roadmap-copy p { color: var(--muted); line-height: 1.8; }
.journey-line { display: grid; grid-template-columns: 1fr 45px 1fr 45px 1fr 45px 1fr; align-items: center; }
.journey-line article { position: relative; min-height: 240px; padding: 26px; border: 1px solid var(--line); border-radius: 25px; background: white; }
.journey-line article > b { position: absolute; right: 22px; top: 20px; color: #d8d0df; font-size: 12px; }
.step-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 36px; border-radius: 18px; color: white; background: var(--purple); font-size: 24px; }
.journey-line h3 { margin: 0 0 8px; }
.journey-line p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.journey-line > i { height: 1px; background: var(--line); }
.features { width: 100%; padding-left: max(32px,calc((100vw - 1160px)/2)); padding-right: max(32px,calc((100vw - 1160px)/2)); background: #282132; }
.features .section-heading h2 { color: white; }
.features .section-heading p { color: #b8afc1; }
.feature-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.feature-card { position: relative; min-height: 310px; overflow: hidden; padding: 35px; border-radius: 28px; background: #fff; }
.feature-card > span { color: var(--purple); font-size: 11px; font-weight: 850; letter-spacing: 1px; }
.feature-card h3 { max-width: 440px; margin: 13px 0 10px; font-size: 28px; letter-spacing: -1px; }
.feature-card p { max-width: 490px; color: var(--muted); line-height: 1.7; }
.feature-card.purple { color: white; background: linear-gradient(145deg,#7151e6,#9b68e9); }
.feature-card.purple > span,.feature-card.purple p { color: #e8e0ff; }
.feature-card.wide { grid-column: span 2; min-height: 230px; display: flex; align-items: center; justify-content: space-between; }
.css-pet { position: absolute; width: 170px; height: 170px; right: 40px; bottom: -20px; }
.css-pet .ear { position: absolute; top: 0; width: 65px; height: 85px; border-radius: 80% 20%; background: #d5c7ff; }
.css-pet .ear.left { left: 15px; transform: rotate(-22deg); }.css-pet .ear.right { right: 15px; transform: rotate(22deg) scaleX(-1); }
.pet-face { position: absolute; inset: 40px 10px 0; border-radius: 48%; background: white; }
.pet-face b { position: absolute; top: 45px; width: 10px; height: 15px; border-radius: 50%; background: var(--ink); }
.pet-face b:first-child { left: 38px; }.pet-face b:nth-child(2) { right: 38px; }
.pet-face em { position: absolute; left: 66px; top: 68px; width: 17px; height: 9px; border: 3px solid var(--ink); border-top: 0; border-radius: 0 0 10px 10px; }
.fake-code { position: absolute; bottom: 35px; left: 35px; padding: 15px 20px; border-radius: 15px; background: #f0ecff; color: var(--purple); font-size: 26px; font-weight: 850; letter-spacing: 5px; }
.mini-timeline { position: absolute; left: 35px; right: 35px; bottom: 50px; display: flex; justify-content: space-between; }
.mini-timeline::before { content:""; position: absolute; left: 5px; right: 5px; top: 6px; height: 2px; background: #e5dff0; }
.mini-timeline i { position: relative; width: 14px; height: 14px; border: 3px solid #d5c9ee; border-radius: 50%; background: white; }
.mini-timeline i:first-child,.mini-timeline i:last-child { border-color: var(--purple); }
.transport { display: flex; gap: 10px; }
.transport b { padding: 13px 16px; border-radius: 14px; background: #f2eff7; font-size: 12px; white-space: nowrap; }
.roadmap { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.roadmap-copy a { color: var(--purple); font-weight: 750; }
.roadmap ol { margin: 0; padding: 0; list-style: none; }
.roadmap li { position: relative; display: grid; grid-template-columns: 75px 1fr; padding: 23px 0 23px 30px; border-left: 2px solid var(--line); }
.roadmap li::before { content:""; position: absolute; left: -7px; top: 29px; width: 11px; height: 11px; border-radius: 50%; background: #d0c8d8; }
.roadmap li.done::before { background: var(--purple); box-shadow: 0 0 0 6px #ede8ff; }
.roadmap li b { color: var(--muted); font-size: 11px; }
.roadmap li strong { font-size: 17px; }
.roadmap li span { grid-column: 2; color: var(--muted); font-size: 12px; margin-top: 5px; }
.download { width: min(1160px,calc(100% - 42px)); margin: 30px auto 100px; padding: 50px; display: flex; align-items: center; gap: 28px; border-radius: 32px; color: white; background: linear-gradient(145deg,#6d4cdf,#9863ea); box-shadow: 0 25px 60px rgba(104,71,207,.22); }
.download-pet { display: grid; place-items: center; width: 75px; height: 75px; border-radius: 24px; color: var(--purple); background: white; font-size: 34px; font-weight: 900; }
.download > div:nth-child(2) { flex: 1; }
.download span { font-size: 11px; font-weight: 800; letter-spacing: 1px; }
.download h2 { margin: 7px 0; font-size: 32px; }
.download p { margin: 0; color: #e4dcff; font-size: 12px; }
.button.light { background: white; color: var(--purple); }
footer { width: min(1160px,calc(100% - 42px)); margin: auto; padding: 35px 0 50px; display: flex; align-items: center; gap: 30px; border-top: 1px solid var(--line); }
footer p { flex: 1; color: var(--muted); }
footer > div { display: flex; gap: 20px; color: var(--muted); font-size: 12px; }

@media (max-width: 880px) {
  .site-header nav { display: none; }
  .site-header { gap: 10px; }.site-header .brand { flex: 1; }
  .hero { grid-template-columns: 1fr; padding-top: 130px; text-align: center; }
  .hero-copy > p { margin-left: auto; margin-right: auto; }
  .hero-actions,.proof-row { justify-content: center; }
  .hero-visual { min-height: 500px; }
  .journey-line { grid-template-columns: 1fr 1fr; gap: 12px; }
  .journey-line > i { display: none; }
  .feature-grid,.roadmap { grid-template-columns: 1fr; }
  .feature-card.wide { grid-column: auto; display: block; }
  .transport { margin-top: 30px; }
  .roadmap { gap: 45px; }
}

@media (max-width: 560px) {
  .site-header { top: 8px; }
  .header-cta { font-size: 0; padding: 11px; }
  .header-cta::after { content:"下载"; font-size: 12px; }
  .hero { padding-left: 20px; padding-right: 20px; }
  .hero h1 { letter-spacing: -3px; }
  .hero-actions { flex-direction: column; }
  .journey-line { grid-template-columns: 1fr; }
  .section { width: calc(100% - 30px); }
  .features { padding-left: 15px; padding-right: 15px; }
  .feature-card { padding: 26px; }
  .feature-card.wide { min-height: 340px; }
  .transport { flex-wrap: wrap; }
  .download { padding: 30px; display: grid; text-align: center; }
  .download-pet { margin: auto; }
  footer { align-items: flex-start; flex-direction: column; }
  footer p { margin: 0; }
}