:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  color: #182040;
  background: #f7f8ff;
  line-height: 1.6;
  --ink: #182040;
  --muted: #4e5875;
  --primary: #4638ce;
  --edge: #dfe3f3;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid #6d63ef; outline-offset: 4px; }
h1, h2, h3, p { margin: 0; }
.wrap { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }

.site-header { background: #ffffffde; border-bottom: 1px solid var(--edge); }
.header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 800; white-space: nowrap; }
.brand img { border-radius: 12px; }
.header-inner nav { display: flex; align-items: center; gap: 26px; }
.nav-link { color: var(--muted); font-size: 14px; white-space: nowrap; }
.nav-link:hover, .site-footer a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 17px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.button span { font-size: 17px; line-height: 1; }
.button-outline { color: var(--primary); border-color: #d7d3ff; background: #f6f5ff; }
.button-outline:hover { background: #eeecff; }
.button-primary { min-height: 52px; padding-inline: 22px; color: white; background: var(--primary); box-shadow: 0 8px 20px #4533cc33; }
.button-primary:hover { background: #3929b7; }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.98fr); gap: clamp(28px, 6vw, 88px); align-items: center; padding-block: clamp(52px, 8vw, 106px) 74px; }
.hero h1 { font-size: clamp(34px, 4.65vw, 66px); line-height: 1.17; letter-spacing: -0.055em; font-weight: 850; }
.hero h1 span { color: var(--primary); }
.hero p { max-width: 470px; margin: 22px 0 27px; color: var(--muted); font-size: clamp(15px, 1.65vw, 18px); line-height: 1.85; }
.hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 330px;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #6663e5;
  border-radius: 26px;
  background: radial-gradient(ellipse at 68% 12%, #8a82fe 0%, transparent 56%), linear-gradient(145deg, #3935bb, #6556ec 68%, #5345d2);
  box-shadow: 0 18px 38px #3d379b25;
}
.visual-orbit { position: absolute; z-index: -1; width: 88%; aspect-ratio: 1; border: 1px solid #ffffff37; border-radius: 50%; }
.orbit-outer { transform: translate(25%, -24%); }
.orbit-inner { width: 68%; transform: translate(-47%, 34%); }
.visual-editor {
  width: min(74%, 365px);
  padding: 12px;
  border: 1px solid #ffffff60;
  border-radius: 19px;
  background: #25216d;
  box-shadow: 0 17px 37px #1b144f66;
  transform: rotate(-5deg);
}
.editor-window { display: flex; gap: 5px; margin: 0 0 9px 2px; }
.editor-window i { width: 6px; height: 6px; border-radius: 50%; background: #b2aafa; }
.editor-window i:first-child { background: #d5ccff; }
.editor-canvas { display: grid; place-items: center; min-height: 130px; border-radius: 10px; background: radial-gradient(ellipse at center, #e8e5ff, #a69df8); }
.editor-canvas img { width: 88px; height: 88px; border-radius: 22px; box-shadow: 0 9px 20px #3b2cac58; }
.editor-timeline { position: relative; display: grid; gap: 7px; padding-top: 10px; }
.timeline-row { display: grid; grid-template-columns: 5fr 4fr 2fr; gap: 4px; }
.timeline-row i { height: 11px; border-radius: 3px; background: #b0a5ff; }
.timeline-row i:nth-child(2) { background: #8d80fa; }
.timeline-row i:nth-child(3) { background: #7163dd; }
.timeline-secondary { grid-template-columns: 7fr 4fr; }
.timeline-secondary i { background: #8cdad3; }
.timeline-secondary i:nth-child(2) { background: #5ba3c9; }
.timeline-cursor { position: absolute; top: 5px; bottom: 0; left: 40%; width: 2px; background: #fff; box-shadow: 0 0 5px #fff8; }

.features, .contact { scroll-margin-top: 20px; }
section h2 { font-size: clamp(25px, 3.2vw, 36px); line-height: 1.3; letter-spacing: -0.025em; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; margin-top: 20px; }
.feature-card { padding: 24px 25px 25px; border: 1px solid var(--edge); border-radius: 18px; background: #fff; box-shadow: 0 5px 18px #382c9010; }
.feature-card h3 { margin-top: 15px; font-size: 19px; }
.feature-card p { margin-top: 7px; color: var(--muted); font-size: 15px; line-height: 1.75; }
.feature-icon { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #eeebff; color: var(--primary); }
.feature-icon i { display: block; width: 20px; height: 15px; border: 2px solid currentColor; border-radius: 3px; }
.library-icon i { box-shadow: 3px -3px 0 #eeebff, 5px -5px 0 -1px currentColor; }
.editing-icon i::after { content: ""; display: block; width: 0; margin: 2px 0 0 6px; border-block: 3px solid transparent; border-left: 5px solid currentColor; }
.sharing-icon i { width: 16px; height: 16px; border-top-color: transparent; border-right-color: transparent; }
.sharing-icon i::after { content: "↗"; position: absolute; top: 8px; left: 19px; font-size: 17px; line-height: 1; font-style: normal; font-weight: 800; }

.contact { padding-block: 52px 58px; }
.contact-panel { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 22px clamp(22px, 5vw, 52px); border: 1px solid #dcd7fb; border-radius: 22px; background: #efedff; }
.contact-panel p { margin-top: 9px; color: var(--muted); font-size: 15px; }
.qr-link { display: block; flex: 0 0 min(235px, 50%); border: 1px solid #e2def6; border-radius: 13px; overflow: hidden; background: white; }
.qr-link img { width: 100%; height: auto; }
.site-footer { padding-block: 26px 28px; border-top: 1px solid var(--edge); background: #fff; color: var(--muted); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 24px; text-align: center; font-size: 13px; }
.footer-inner nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.filing { flex-basis: 100%; text-align: center; }

@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; padding-block: 48px 50px; }
  .hero-visual { min-height: 280px; }
  .feature-card { padding: 19px; }
}
@media (max-width: 560px) {
  .wrap { width: calc(100% - 32px); }
  .header-inner { min-height: 64px; }
  .brand { font-size: 18px; }
  .brand img { width: 36px; height: 36px; border-radius: 10px; }
  .header-inner nav { gap: 0; }
  .header-inner .nav-link { display: none; }
  .button-outline { padding-inline: 11px; }
  .hero { padding-block: 38px 44px; }
  .hero h1 { font-size: clamp(29px, 9vw, 43px); }
  .hero p { margin-block: 16px 21px; }
  .hero-visual { min-height: 242px; border-radius: 19px; }
  .visual-editor { padding: 9px; }
  .editor-canvas { min-height: 112px; }
  .editor-canvas img { width: 73px; height: 73px; border-radius: 18px; }
  .feature-grid { grid-template-columns: 1fr; gap: 11px; margin-top: 15px; }
  .contact { padding-block: 31px 37px; }
  .contact-panel { align-items: flex-start; flex-direction: column; gap: 14px; }
  .qr-link { flex: auto; width: min(235px, 100%); }
}