:root {
  color-scheme: light;
  --ink: #201044;
  --deep: #321260;
  --muted: #685c83;
  --line: #e7dcf5;
  --blue: #1768f5;
  --violet: #7035ed;
  --pink: #e843ae;
  --pale: #faf8ff;
  --paper: #fff;
  --max: 1180px;
  --grad: linear-gradient(112deg, #165cf0 0%, #6832e8 48%, #d93bce 100%);
  --shadow: 0 22px 70px rgba(66, 31, 129, .105);
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 100px }
body { margin: 0; background: var(--pale); color: var(--ink); font-family: Inter, -apple-system, BlinkMacSystemFont, "Noto Sans TC", "Noto Sans CJK TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; -webkit-font-smoothing: antialiased; font-size: 16px; }
button, input { font: inherit }
a { color: inherit; text-decoration: none }
a:hover { color: var(--violet) }
button { cursor: pointer }
img { display: block; width: 100%; height: auto }
[hidden] { display: none!important }
::selection { background: #e5d6ff; color: var(--deep) }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px }
.container { max-width: var(--max); margin: 0 auto; width: calc(100% - 64px) }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { height: 22px; width: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; flex-shrink: 0 }
h1, h2, h3, p { margin-top: 0 }
h1, h2, h3 { letter-spacing: -.035em; line-height: 1.18 }
p { color: var(--muted); line-height: 1.82 }
.skip { position: fixed; top: -100px; left: 12px; z-index: 100; background: #fff; color: var(--deep); padding: 10px 16px; border-radius: 10px }
.skip:focus { top: 12px }

/* navigation */
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(100,54,169,.095); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); background: rgba(255,255,255,.91) }
.header-grid { min-height: 88px; display: flex; justify-content: space-between; gap: 18px; align-items: center }
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0 }
.brand img { width: 52px; height: 52px; border-radius: 14px; object-fit: contain; box-shadow: 0 4px 13px rgba(74,36,143,.045); }
.brand-wordmark { font-weight: 900; white-space: nowrap; letter-spacing: -.055em; color: #26127b; font-size: 22px; line-height: 1 }
.brand-wordmark b { font-weight: 900; background: var(--grad); background-clip: text; -webkit-background-clip: text; color: transparent }
.site-nav { display: flex; align-items: center; gap: clamp(14px,2.2vw,27px) }
.site-nav a { color: #51436a; font-size: 14px; font-weight: 700; white-space: nowrap; transition: color .18s }
.site-nav a:hover { color: var(--violet) }
.header-actions { display: flex; align-items: center; gap: 12px }
.language-switch { color: var(--violet); font-weight: 850; font-size: 13px; padding: 10px 11px; border: 1px solid #dfd1f9; background: white; border-radius: 999px }
.nav-cta { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 11px 17px; background: var(--grad); color: white; font-weight: 800; font-size: 13px; white-space: nowrap; box-shadow: 0 9px 22px rgba(109, 46, 228, .24) }
.nav-cta:hover { color: white }
.nav-cta .ico { width: 17px; height: 17px }
.menu-toggle { display: none; border: none; border-radius: 12px; background: #f2edfd; height: 43px; width: 45px; padding: 12px 11px; flex-direction: column; justify-content: space-between }
.menu-toggle span { height: 2px; width: 100%; background: var(--violet); border-radius: 3px }

/* hero */
.hero { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(118deg, #f7f6ff 0%, #fbf7ff 45%, #fff8fe 100%); padding: 78px 0 102px }
.hero-orb { border-radius: 100%; position: absolute; z-index: -1; pointer-events: none; filter: blur(5px) }
.hero-orb.a { width: 580px; height: 580px; left: -345px; top: -150px; background: radial-gradient(circle, #7dd6fb54 0%, #85b3ff24 50%, transparent 72%) }
.hero-orb.b { width: 690px; height: 700px; right: -390px; top: -180px; background: radial-gradient(circle, #fba9d666 0%, #e7b3ff18 55%, transparent 76%) }
.hero-layout { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); align-items: center; gap: 54px }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; border-radius: 50px; background: #fff; box-shadow: 0 2px 12px #6636bd0b; color: #6634bd; border: 1px solid #e6d8ff; padding: 9px 15px; font-size: 11px; font-weight: 900; letter-spacing: .095em; margin-bottom: 26px }
.eyebrow-dot { width: 8px; height: 8px; background: linear-gradient(145deg, var(--blue), var(--pink)); border-radius: 50% }
.hero h1 { margin: 0 0 25px; font-size: clamp(42px, 4.55vw, 68px); font-weight: 900; letter-spacing: -.055em; line-height: 1.13; color: #251158 }
.hero h1 span { display: block }
.gradient-text { color: #7935ef; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent }
.hero-lead { max-width: 560px; font-size: 17px; line-height: 1.94; margin-bottom: 29px }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center }
.button { display: inline-flex; gap: 10px; align-items: center; justify-content: center; min-height: 50px; padding: 14px 24px; border-radius: 999px; font-weight: 850; font-size: 14px; line-height: 1.1; transition: transform .2s, box-shadow .2s }
.button:hover { transform: translateY(-2px) }
.button-primary { color: #fff; background: var(--grad); box-shadow: 0 11px 30px rgba(102,43,216,.25) }
.button-primary:hover { color: white; box-shadow: 0 16px 35px rgba(102,43,216,.28) }
.button-outline { color: #5634aa; background: white; border: 1px solid #e3d5fa }
.button-light { color: #6437c7; background: white }
.button .ico { height: 18px; width: 18px }
.hero-disclaimer { font-size: 12px; margin-top: 25px; max-width: 540px; display: flex; align-items: flex-start; gap: 9px; color: #817593; line-height: 1.7 }
.hero-disclaimer .ico { height: 17px; width: 17px; margin-top: 2px }
.hero-photo-card { position: relative; padding: 14px; border: 1px solid #fff; background: #ffffffba; box-shadow: 0 35px 78px rgba(74, 45, 122, .14); border-radius: 38px; transform: rotate(1deg) }
.hero-photo-card::before { content: ''; position: absolute; inset: -18px; z-index: -1; border-radius: 55px; background: linear-gradient(125deg, #bfe8ff65, #edb8ff57 55%, #ffc9d462) }
.hero-photo-card > img { width: 100%; aspect-ratio: 5/5.3; object-fit: cover; object-position: center; border-radius: 27px }
.photo-overlay { position: absolute; z-index: 2; display: flex; align-items: center; gap: 9px; background: #fffffff0; border: 1px solid #fff; color: #35216f; box-shadow: 0 10px 28px #4923941a; border-radius: 18px; font-weight: 850; font-size: 13px; padding: 13px 15px; backdrop-filter: blur(10px) }
.photo-overlay .ico { color: #7a36ed; width: 21px; height: 21px }
.overlay-a { top: 11%; left: -7%; transform: rotate(-2deg) }
.overlay-b { bottom: 8%; right: -7%; transform: rotate(-2deg) }
.benefit-strip { background: #fff; border-bottom: 1px solid #f1eafb; border-top: 1px solid #f1eafb }
.benefit-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0 }
.benefit-row > div { display: flex; justify-content: center; align-items: center; padding: 23px 10px; gap: 11px; color: #57437a; font-size: 14px; font-weight: 850; text-align: center }
.benefit-row > div+div { border-left: 1px solid #f2eaf9 }
.benefit-row .ico { width: 23px; height: 23px; color: #7b3cde }

/* common sections */
.section { padding: 112px 0 }
.section-kicker { display: inline-block; color: #7439de; letter-spacing: .1em; text-transform: uppercase; font-weight: 900; font-size: 12px; margin-bottom: 19px }
.section h2, .last-cta h2 { font-size: clamp(32px, 3.15vw, 46px); font-weight: 900; line-height: 1.25; margin: 0 0 20px; color: #291352; }
.section-intro { max-width: 770px; margin: 0 auto 43px; text-align: center }
.section-intro p { max-width: 685px; margin: 0 auto }
.section-intro h2 { margin-bottom: 18px }
.difference { background: #fff }
.difference-layout { display: grid; grid-template-columns: 1fr .95fr; gap: clamp(40px,7vw,104px); align-items: center }
.difference-text > p { font-size: 16px }
.difference-text blockquote { margin: 26px 0 0; background: linear-gradient(115deg,#ede9ff,#fff1fc); padding: 24px 26px; border-left: 5px solid #873af4; border-radius: 0 18px 18px 0; color: #4e208c; font-weight: 850; font-size: 18px; line-height: 1.7 }
.difference-list { display: grid; gap: 16px }
.difference-point { display: flex; align-items: flex-start; gap: 20px; background: #fcfaff; border: 1px solid #ebdef7; border-radius: 24px; padding: 24px; box-shadow: 0 9px 24px #45268608 }
.difference-point > span { display: grid; place-items: center; flex: 0 0 56px; height: 56px; border-radius: 18px; color: #7640e0; background: #f0e8ff }
.difference-point:nth-child(2)>span { color: #ea4caf; background: #fff0f8 }
.difference-point:nth-child(3)>span { color: #1469ed; background: #e9f3ff }
.difference-point h3 { font-size: 18px; margin: 2px 0 8px }
.difference-point p { font-size: 14px; margin: 0 }
.features { background: linear-gradient(180deg,#f9f8ff 0%,#f8f5ff 100%) }
.feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 21px }
.feature-card { min-height: 380px; display: flex; flex-direction: column; padding: 30px; background: #fff; border: 1px solid #ede2fa; box-shadow: 0 12px 35px rgba(71,35,131,.056); border-radius: 27px; overflow: hidden; position: relative }
.feature-card::after { content:''; position:absolute; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle,#bdc8ff39,transparent 66%); right:-75px; top:-88px }
.feature-02::after { background:radial-gradient(circle,#ffbded44,transparent 66%) }
.feature-03::after { background:radial-gradient(circle,#89dcff44,transparent 66%) }
.feature-top { display: flex; align-items: start; justify-content: space-between; margin-bottom: 24px }
.feature-num { font-size: 12px; letter-spacing: .11em; font-weight: 900; color: #9f8abf }
.icon-orb { height: 70px; width: 70px; border-radius: 23px; display: grid; place-items: center; background: linear-gradient(135deg,#407bff,#7734ec); color: white; box-shadow: 0 16px 25px #6236d53d }
.feature-02 .icon-orb { background: linear-gradient(130deg,#fa56bf,#a548ef) }
.feature-03 .icon-orb { background: linear-gradient(130deg,#3aafff,#6e3dec) }
.icon-orb .ico { width: 31px; height: 31px }
.feature-card h3 { font-size: 23px; line-height: 1.3; margin-bottom: 14px }
.feature-card p { font-size: 14.5px; margin-bottom: 23px }
.card-bottom { margin-top: auto; border-top: 1px solid #f1eafa; padding-top: 19px }
.status-label { font-size: 11.5px; color: #7a59ad; font-weight: 800 }
.stories { background: white }
.scene-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px }
.scene-card { border: 1px solid #f0e5f7; background: #fff; border-radius: 28px; overflow: hidden; box-shadow: 0 12px 34px #4d258510; transition: transform .25s }
.scene-card:hover { transform: translateY(-4px) }
.scene-photo { overflow: hidden }
.scene-photo img { aspect-ratio: 1.2; object-fit: cover; transition: transform .5s }
.scene-card:hover .scene-photo img { transform: scale(1.04) }
.scene-content { padding: 24px 25px 31px }
.scene-num { color: #a06fda; font-size: 11px; letter-spacing: .12em; font-weight: 900; display: inline-block; margin-bottom: 13px }
.scene-content h3 { font-size: 21px; line-height: 1.36; margin-bottom: 13px }
.scene-content p { font-size: 14px; margin: 0 }
.devices { background: linear-gradient(130deg,#f4f6ff,#fcf4ff) }
.devices-layout { display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); align-items: center; gap: 70px }
.devices-photo { border: 13px solid #fff; position: relative; border-radius: 33px; box-shadow: var(--shadow); transform: rotate(-1deg); overflow: hidden }
.devices-photo img { aspect-ratio: 1.13; object-fit: cover }
.devices-photo-label { position: absolute; bottom: 20px; left: 20px; display: flex; align-items: center; gap: 7px; color: #fff; border-radius: 16px; padding: 12px 16px; background: #6534dbe8; backdrop-filter: blur(6px); font-weight: 850 }
.device-points { display: grid; gap: 14px; margin-top: 26px }
.device-points > div { display: flex; gap: 13px; align-items: center; font-size: 15px; font-weight: 850; color: #3d2c68 }
.device-points .ico { color: #8643df; width: 24px; height: 24px }
.little-note { font-size: 12px; margin-top: 28px; border-left: 2px solid #bfa6e9; padding-left: 14px }
.possibilities { background: #fff }
.ideas-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 19px }
.idea { display: flex; align-items: start; gap: 18px; background: #fbf9ff; border: 1px solid #ece2f7; padding: 24px; border-radius: 22px }
.idea-icon { flex-shrink: 0; width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center; background: linear-gradient(140deg,#ede8ff,#fce6f8); color: #8241da }
.idea h3 { font-size: 18px; margin: 3px 0 7px }
.idea p { margin: 0; font-size: 14px }
.upcoming { background: linear-gradient(140deg,#e9e8ff 0%,#fbf0ff 56%,#f5f9ff 100%) }
.upcoming-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center }
.store-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px }
.store-row > span { display: flex; flex-direction: column; gap: 5px; padding: 14px 18px; border: 1px solid #e1d5f5; border-radius: 16px; background: #fff; color: #382368; font-weight: 900; font-size: 14px }
.store-row small { color: #9075ba; font-weight: 600; font-size: 11px }
.milestones { background: #ffffffc7; border: 1px solid #fff; box-shadow: 0 12px 38px #6940b317; padding: 14px 27px; border-radius: 26px }
.milestones > div { display: grid; grid-template-columns: 36px minmax(0,.7fr) minmax(0,1fr); align-items: center; gap: 12px; padding: 21px 0 }
.milestones > div+div { border-top: 1px solid #ede5f6 }
.milestones span { color: #9267d7; font-size: 12px; font-weight: 900 }
.milestones strong { color: #37216b; font-size: 14px }
.milestones p { margin: 0; font-size: 13px; line-height: 1.5 }
.upcoming-note { grid-column: 1/-1; font-size: 12px; color: #816c99; display: flex; gap: 8px; border-top: 1px solid #ded3f0; padding-top: 18px; margin: 0 }
.upcoming-note .ico { width: 18px; height: 18px }
.faq-section { background: #fff }
.faq-toolbar { max-width: 835px; margin: 0 auto 21px; display: flex; align-items: center; gap: 13px; background: #f9f7ff; border: 1px solid #e4d9f5; border-radius: 18px; padding: 0 18px; color: #956bcf }
.faq-toolbar input { min-height: 59px; width: 100%; border: none; outline: none; background: transparent; color: var(--ink); font-size: 15px }
.faq-toolbar input:focus { box-shadow: none }
.faq-list { max-width: 835px; margin: auto; display: grid; gap: 10px }
.faq-item { border: 1px solid #e9e1f2; border-radius: 18px; background: #fff; overflow: hidden; transition: background .2s }
.faq-item[open] { background: #fcfaff; border-color: #d7c4f1 }
.faq-item summary { list-style: none; min-height: 73px; cursor: pointer; display: grid; grid-template-columns: 37px minmax(0,1fr) 26px; gap: 13px; align-items: center; padding: 17px 22px; font-size: 15px; color: #34205f; font-weight: 850; line-height: 1.55 }
.faq-item summary::-webkit-details-marker { display: none }
.faq-index { color: #b79ad9; font-size: 11px; letter-spacing: .08em }
.faq-plus { border: 1px solid #e3d6f3; width: 26px; height: 26px; border-radius: 50%; text-align: center; line-height: 23px; color: #7d3acb; font-size: 20px; font-weight: 400 }
.faq-item[open] .faq-plus { transform: rotate(45deg); background: #8246df; border-color: #8246df; color: white }
.faq-answer { padding: 0 61px 24px 72px; }
.faq-answer p { font-size: 14px; line-height: 1.85; margin: 0 }
.faq-empty { text-align: center; margin-top: 20px }
.last-cta { overflow: hidden; color: #fff; background: var(--grad) }
.last-cta-inner { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 50px; align-items: center; padding: 72px 0 }
.last-cta h2 { color: #fff; max-width: 710px }
.last-cta .section-kicker { color: #ffffffb7 }
.last-cta p { color: #ffffffde; max-width: 690px }
.last-cta-inner img { width: 250px; height: 250px; background: white; border-radius: 55px; padding: 4px; transform: rotate(-8deg); box-shadow: 0 25px 80px #29105f6e }
.last-cta .button-light { margin-top: 15px }
.footer { background: #23103f; color: #fff }
.footer-body { display: grid; grid-template-columns: 1.15fr .75fr 1fr; gap: 80px; padding: 72px 0 60px }
.footer .brand-wordmark { color: white; font-size: 23px }
.footer-brand p { max-width: 280px; margin-top: 19px }
.footer p { color: #c5bad7; font-size: 13px }
.footer-body h3 { font-size: 15px; margin: 0 0 22px; letter-spacing: 0 }
.footer-body a:not(.brand) { display: block; color: #ccbfdf; font-size: 13px; margin-bottom: 13px }
.footer-body a:not(.brand):hover { color: #fff }
.footer-bottom { border-top: 1px solid #ffffff20; padding: 19px 0; display: flex; justify-content: space-between; color: #aa9bbe; font-size: 12px }
.footer-bottom a { color: #dcd0e9 }
.privacy-main { background: linear-gradient(130deg,#f1f0ff,#fff9fd); padding: 80px 0 110px; min-height: 70vh }
.back-link { display: inline-block; color: #7543bd; margin-bottom: 24px; font-weight: 800; font-size: 14px }
.privacy-paper { max-width: 850px; background: white; padding: clamp(26px,6vw,72px); border: 1px solid #ece3f7; border-radius: 30px; box-shadow: var(--shadow) }
.privacy-paper h1 { font-size: clamp(30px,4vw,46px); color: #2c1655 }
.privacy-paper h2 { margin-top: 32px; font-size: 22px; color: #3c236d }
.privacy-paper p { line-height: 1.85 }
.privacy-paper .lead { font-size: 17px }

@media (max-width: 1120px) {
 .site-nav { gap: 13px } .site-nav a { font-size: 12px } .brand-wordmark { font-size: 19px }
 .hero-layout { gap: 35px } .hero h1 { font-size: clamp(39px,4.8vw,59px) }
 .photo-overlay { font-size: 11px; padding: 10px 12px }
}
@media (max-width: 950px) {
 .container { width: calc(100% - 42px) }
 .menu-toggle { display:flex }
 .site-nav { display: none; position: absolute; top: 77px; left: 21px; right: 21px; background: #fff; border-radius: 22px; border: 1px solid #e6d9f9; box-shadow: 0 18px 35px #4a23912a; padding: 20px; flex-direction: column; align-items: stretch; gap: 0 }
 .site-nav.is-open { display: flex }
 .site-nav a { padding: 14px 12px; font-size: 15px; border-radius: 12px }
 .site-nav a:hover { background: #f4efff }
 .hero-layout { grid-template-columns: 1fr 1fr; gap: 32px } .hero-photo-card>img { aspect-ratio: 4/5.4 }
 .hero h1 { font-size: clamp(36px,5.1vw,50px) } .hero-lead { font-size: 15px }
 .difference-layout, .devices-layout { gap: 36px }
 .feature-card { padding: 23px }
 .feature-card h3 { font-size: 20px }
 .scene-content { padding: 21px }
 .scene-content h3 { font-size: 18px }
}
@media (max-width: 760px) {
 .container { width: calc(100% - 36px) }
 .header-grid { min-height: 78px }
 .brand img { width: 46px; height: 46px } .brand-wordmark { font-size: 21px }
 .nav-cta { display: none }
 .hero { padding: 45px 0 62px }
 .hero-layout, .difference-layout, .devices-layout, .upcoming-layout { grid-template-columns: 1fr }
 .hero-photo-card { width: min(540px,100%); margin: 24px auto 0 }
 .hero-photo-card > img { aspect-ratio: 1.18 }
 .hero h1 { font-size: clamp(37px,9vw,58px) }
 .photo-overlay { font-size: 12px } .overlay-a { left: -2% } .overlay-b { right: -2% }
 .benefit-row { grid-template-columns: 1fr 1fr } .benefit-row > div { min-height: 77px }
 .benefit-row > div:nth-child(3) { border-left: none; border-top: 1px solid #f2eaf9 }
 .benefit-row > div:nth-child(4) { border-top: 1px solid #f2eaf9 }
 .section { padding: 78px 0 }
 .feature-grid, .scene-grid, .ideas-grid { grid-template-columns: 1fr }
 .feature-card { min-height: 290px }
 .scene-grid { gap: 17px } .scene-photo img { aspect-ratio: 1.7 }
 .devices-photo img { aspect-ratio: 1.5 }
 .upcoming-layout { gap: 32px }
 .upcoming-note { grid-column: 1 }
 .milestones > div { grid-template-columns: 24px 110px 1fr; gap: 10px }
 .last-cta-inner { grid-template-columns: 1fr 145px; gap: 18px; padding: 50px 0 }
 .last-cta-inner img { width: 145px; height: 145px; border-radius: 30px }
 .footer-body { grid-template-columns: 1fr 1fr; gap: 40px; padding: 56px 0 45px }
 .footer-brand { grid-column: 1/-1 }
}
@media (max-width: 520px) {
 .container { width: calc(100% - 30px) }
 .hero h1 { font-size: 42px }
 .hero-lead { font-size: 15px }
 .hero-photo-card { padding: 9px; border-radius: 27px } .hero-photo-card>img { border-radius: 20px }
 .photo-overlay { font-size: 10px; padding: 10px 11px }
 .photo-overlay .ico { width: 17px; height: 17px }
 .section h2, .last-cta h2 { font-size: 32px }
 .feature-card { min-height: unset }
 .scene-photo img { aspect-ratio: 1.25 }
 .milestones { padding: 7px 15px }
 .milestones > div { grid-template-columns: 26px 1fr; gap: 2px 10px }
 .milestones p { grid-column: 2; margin-top: 6px }
 .faq-item summary { padding: 17px 14px; grid-template-columns: 25px 1fr 25px; gap: 9px; font-size: 14px }
 .faq-answer { padding: 0 20px 21px 48px }
 .faq-toolbar { padding: 0 14px }
 .last-cta-inner { grid-template-columns: 1fr } .last-cta-inner img { display: none }
 .footer-body { grid-template-columns: 1fr; gap: 25px } .footer-brand { grid-column: auto }
 .footer-bottom { gap: 16px }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto!important; transition-duration: .01ms!important; animation-duration: .01ms!important } }