* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; }
:root { --v1: #7c3aed; --v2: #a855f7; --v3: #6366f1; --text: #1e1b4b; --gray: #6b7280; }
body { color: var(--text); line-height: 1.6; }
a { text-decoration: none; color: inherit; }
.center { max-width: 900px; margin: 0 auto; padding: 0 20px; text-align: center; }

.top { display: flex; justify-content: space-between; align-items: center; padding: 20px 40px; }
.logo { font-weight: 800; font-size: 20px; background: linear-gradient(90deg, var(--v1), var(--v2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.pill { background: linear-gradient(90deg, var(--v1), var(--v3)); color: #fff; padding: 9px 24px; border-radius: 25px; font-weight: 600; }
.pill:hover { opacity: .9; }

.main { background: linear-gradient(135deg, #ede9fe 0%, #e0e7ff 50%, #f5f3ff 100%); padding: 90px 0 70px; }
.hero-icon { display: block; width: 128px; height: 128px; margin: 0 auto 30px; }
h1 { font-size: 38px; margin-bottom: 14px; }
.sub { color: var(--gray); font-size: 18px; margin-bottom: 30px; letter-spacing: 2px; }
.cta { display: inline-block; background: linear-gradient(90deg, var(--v1), var(--v3)); color: #fff; padding: 16px 44px; border-radius: 30px; font-size: 18px; font-weight: 700; box-shadow: 0 12px 28px rgba(124,58,237,.35); transition: .3s; }
.cta:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(124,58,237,.45); }
.hint { color: var(--gray); font-size: 14px; margin-top: 18px; }

.strip { background: #fff; padding: 60px 0; }
.strip h2 { font-size: 26px; margin-bottom: 30px; }
.strip-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.sbtn { border: 2px solid #c4b5fd; color: var(--v1); padding: 12px 28px; border-radius: 25px; font-weight: 600; transition: .3s; }
.sbtn:hover { background: var(--v1); color: #fff; border-color: var(--v1); }

.points { background: #faf9ff; padding: 60px 0; }
.points h2 { font-size: 26px; margin-bottom: 34px; }
.pt-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.pt { background: #fff; padding: 30px 22px; border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.05); }
.pt h3 { font-size: 20px; margin-bottom: 10px; color: var(--v1); }
.pt p { color: var(--gray); font-size: 15px; }

.seo-text { background: #fff; padding: 60px 0; }
.seo-text h2 { font-size: 26px; margin-bottom: 28px; color: var(--text); }
.seo-text p { color: var(--gray); font-size: 16px; line-height: 1.9; text-align: justify; text-indent: 2em; max-width: 780px; margin: 0 auto 18px; }

.foot { background: #1e1b4b; color: #c7c4e8; padding: 40px 0; text-align: center; }
.foot p { font-size: 14px; max-width: 680px; margin: 0 auto 10px; }
.foot .c { color: #8b88b8; font-size: 13px; }

@media (max-width: 600px) { h1 { font-size: 28px; } }


.software-info { padding: 70px 0; background: #fff; }
.software-info .container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.software-info .sec-title { text-align: center; font-size: 28px; margin-bottom: 44px; }
.table-responsive { overflow-x: auto; border-radius: 12px; border: 1px solid #e5e0f5; }
.info-table { width: 100%; border-collapse: collapse; background: #fff; }
.info-table th, .info-table td { border: 1px solid #e5e0f5; padding: 14px 18px; text-align: left; font-size: 15px; }
.info-table th { background: #f5f3ff; color: #7c3aed; font-weight: 600; width: 16%; white-space: nowrap; }
.info-table td { color: #1e1b4b; }