* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif; color: #1a1a1a; background: #fff; }
a { color: inherit; text-decoration: none; }
.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }

.site-header { position: sticky; top: 0; backdrop-filter: blur(6px); background: rgba(255,255,255,0.7); border-bottom: 1px solid #eee; z-index: 20; }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; }
.logo { width: 28px; height: 28px; }
.brand-name { font-weight: 700; letter-spacing: .5px; }
.nav { display: flex; gap: 18px; }
.nav a { color: #333; font-weight: 500; opacity: .9; }
.nav a:hover { opacity: 1; }

.hero { padding: 72px 0; background: linear-gradient(180deg,#fafafa, #fff); }
.hero-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; }
.hero-text h1 { font-size: 36px; line-height: 1.2; margin: 0 0 12px; }
.hero-text p { font-size: 16px; color: #555; margin: 0 0 20px; }
.cta { display: flex; gap: 12px; }
.btn { display: inline-block; padding: 10px 18px; border-radius: 10px; border: 1px solid #e5e5e5; transition: .2s ease; }
.btn.primary { background: #dc143c; color: #fff; border-color: #dc143c; }
.btn.primary:hover { filter: brightness(.95); }
.btn.ghost { background: #fff; color: #333; }
.btn.ghost:hover { background: #f8f8f8; }
.hero-media img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.08); }

.features { padding: 56px 0; background: #fff; }
.grid-3 { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.card { padding: 18px; border: 1px solid #eee; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.04); }
.card h3 { margin: 0 0 8px; }
.card p { margin: 0; color: #555; }

.screenshots { padding: 56px 0; background: #fafafa; }
.screenshots h2 { margin: 0 0 18px; }
/* carousel */
.carousel { position: relative; overflow: hidden; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.06); background: #fff; height: auto; }
.hero .carousel { max-width: 300px; width: 100%; aspect-ratio: 40 / 89; max-height: 70vh; }
.hero .hero-media { display: flex; justify-content: flex-end; width: 100%; }
/* removed bg kaleidoscope */
.carousel-track { display: flex; transition: transform .35s ease; touch-action: pan-y; }
.carousel-slide { min-width: 100%; user-select: none; display: grid; place-items: center; background: #fff; }
.carousel-slide img { width: 100%; height: 100%; object-fit: contain; display: block; border: 0; }
.kaleidoscope-view { position: relative; overflow: hidden; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.06); background: #fff; }
.hero .kaleidoscope-view { max-width: 300px; width: 100%; aspect-ratio: 40 / 89; max-height: 70vh; }
.kaleidoscope-view .slice { position: absolute; inset: 0; clip-path: polygon(50% 5%, 100% 95%, 0 95%); transform-origin: 50% 85%; background-repeat: no-repeat; background-size: contain; background-position: center; }
.kaleidoscope-view .slice:nth-child(1)  { transform: rotate(0deg); }
.kaleidoscope-view .slice:nth-child(2)  { transform: rotate(30deg) scaleX(-1); }
.kaleidoscope-view .slice:nth-child(3)  { transform: rotate(60deg); }
.kaleidoscope-view .slice:nth-child(4)  { transform: rotate(90deg) scaleX(-1); }
.kaleidoscope-view .slice:nth-child(5)  { transform: rotate(120deg); }
.kaleidoscope-view .slice:nth-child(6)  { transform: rotate(150deg) scaleX(-1); }
.kaleidoscope-view .slice:nth-child(7)  { transform: rotate(180deg); }
.kaleidoscope-view .slice:nth-child(8)  { transform: rotate(210deg) scaleX(-1); }
.kaleidoscope-view .slice:nth-child(9)  { transform: rotate(240deg); }
.kaleidoscope-view .slice:nth-child(10) { transform: rotate(270deg) scaleX(-1); }
.kaleidoscope-view .slice:nth-child(11) { transform: rotate(300deg); }
.kaleidoscope-view .slice:nth-child(12) { transform: rotate(330deg) scaleX(-1); }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.8); backdrop-filter: blur(6px); cursor: pointer; z-index: 2; display: grid; place-items: center; font-size: 18px; line-height: 1; }
.carousel-btn:hover { background: #fff; }
.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }
.carousel { position: relative; }
.carousel-dots { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; gap: 8px; justify-content: center; margin: 0; padding: 4px 8px; background: rgba(255,255,255,.6); border-radius: 12px; backdrop-filter: blur(4px); }
.carousel-dots button { width: 6px; height: 6px; border-radius: 50%; border: 0; background: #ddd; cursor: pointer; padding: 0; }
.carousel-dots button[aria-selected="true"] { background: #dc143c; }

.download { padding: 56px 0; }
.download h2 { margin: 0 0 16px; }
.download-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.hint { color: #777; margin-top: 8px; }

.contact { padding: 56px 0; background: #fff; }
.contact h2 { margin: 0 0 10px; }
.contact ul { margin: 0; padding-left: 16px; color: #444; }

.site-footer { border-top: 1px solid #eee; background: #fff; }
.site-footer .container { padding: 18px 20px; }
.site-footer p { margin: 0; color: #777; }
.beian { margin-top: 6px; font-size: 12px; color: #888; }
.beian a { color: #888; text-decoration: none; }
.beian a:hover { text-decoration: underline; }
.beian .sep { margin: 0 8px; color: #bbb; }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .download-grid { grid-template-columns: 1fr; }
  .hero .carousel { max-width: 260px; }
  .hero .hero-media { justify-content: center; }
}