.site-content{--bg: #f8f8f7; --bg-soft: #eeeeec; --surface: #ffffff; --page: #f8f8f7; --panel: #f1f1ef; --panel-alt: #f5f5f3; --panel-line: #e8e8e4; --panel-radius: 14px; --panel-gap: 14px; --panel-maxw: 1240px; --panel-shadow: 0 1px 2px rgba(24,28,26,.04), 0 22px 48px -30px rgba(24,28,26,.22); --ink: #1b2a25; --ink-soft: #46544e; --muted: #78857f; --line: #e4e6e4; --brand: #8B2FE0; --brand-strong: #6423A6; --brand-ink: #16121F; --brand-tint: #f4f0fb; --brand-tint-2: #f7f5fc; --ai: #16121F; --shadow-sm: 0 1px 2px rgba(16,40,32,.05); --shadow: 0 2px 6px rgba(16,40,32,.06), 0 18px 40px -18px rgba(16,40,32,.18); --radius: 18px; --maxw: 1120px; --sans: "PingFang TC","Plus Jakarta Sans","Noto Sans TC","Microsoft JhengHei",system-ui,-apple-system,"Segoe UI","Helvetica Neue",sans-serif;}
.site-content *{box-sizing: border-box;}
.site-content{text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px;}
@media (prefers-reduced-motion: reduce) {
.site-content{scroll-behavior: auto;}
}
.site-content{margin: 0px; background: var(--page); color: var(--ink); font-family: var(--sans); line-height: 1.7; font-size: 16px; -webkit-font-smoothing: antialiased;}
.site-content .wrap{max-width: var(--maxw); margin: 0px auto; padding: 0px 24px;}
.site-content h1,.site-content h2,.site-content h3{line-height: 1.34; margin: 0px; letter-spacing: -0.008em;}
.site-content p{margin: 0px;}
.site-content a{color: inherit;}
.site-content :focus-visible{outline: 2.5px solid var(--brand); outline-offset: 2px; border-radius: 6px;}
.site-content .panel,.site-content .qs,.site-content .fsec,.site-content .pv,.site-content .dl-sec{position: relative; width: calc(100% - var(--panel-gap) * 2); max-width: var(--panel-maxw); margin: 0 auto var(--panel-gap); border-radius: var(--panel-radius); background: var(--panel); border: 1px solid var(--panel-line); box-shadow: var(--panel-shadow); overflow: hidden;}
.site-content .qs{margin-top: var(--panel-gap);}
.site-content .panel::before,.site-content .qs::before,.site-content .fsec::before,.site-content .pv::before,.site-content .dl-sec::before{content: ""; position: absolute; top: 0px; left: 0px; width: min(58%, 680px); aspect-ratio: 1 / 1; z-index: 0; pointer-events: none; background: radial-gradient(circle at 0% 0%, rgba(53, 196, 240, 0.3) 0%, rgba(64, 168, 235, 0.24) 22%, rgba(99, 120, 232, 0.16) 42%, rgba(120, 86, 224, 0.07) 60%, rgba(120, 86, 224, 0) 74%);}
.site-content .panel > .wrap,.site-content .qs > .wrap,.site-content .fsec > .wrap,.site-content .dl-sec > .wrap,.site-content .pv > .wrap{position: relative; z-index: 1;}
@media (max-width: 900px) {
.site-content{--panel-radius: 12px; --panel-gap: 10px;}
}
.site-content .label{display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--brand-ink); background: var(--brand-tint); padding: 6px 13px; border-radius: 999px;}
.site-content .btn{display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; text-decoration: none; border-radius: 12px; padding: 13px 21px; border: 1.5px solid transparent; cursor: pointer; transition: transform 0.06s, background 0.15s, box-shadow 0.15s, border-color 0.15s;}
.site-content .btn:active{transform: translateY(1px);}
.site-content .btn-brand{background: linear-gradient(135deg, rgb(139, 47, 224), rgb(53, 196, 240)); color: rgb(255, 255, 255); box-shadow: var(--shadow-sm);}
.site-content .btn-brand:hover{background: linear-gradient(135deg, rgb(122, 41, 199), rgb(43, 176, 221)); box-shadow: rgba(139, 47, 224, 0.32) 0px 3px 14px;}
.site-content .btn-ghost{background: rgb(255, 255, 255); color: var(--ink); border-color: var(--line);}
.site-content .btn-ghost:hover{border-color: rgb(185, 202, 193); background: rgb(251, 253, 252);}
.site-content .btn-lg{padding: 16px 27px; font-size: 16px; border-radius: 13px;}
.site-content nav{position: sticky; top: 0px; z-index: 50; background: rgba(248, 248, 247, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(24, 28, 26, 0.06);}
.site-content .nav-in{display: flex; align-items: center; gap: 22px; height: 66px;}
.site-content .brand{display: flex; align-items: center; font-weight: 700; letter-spacing: -0.01em; font-family: 'Baloo 2',var(--sans); font-size: 24px; text-transform: lowercase;}
.site-content .nav-links{margin-left: auto; display: flex; gap: 26px; align-items: center;}
.site-content .nav-links a{text-decoration: none; color: var(--ink-soft); font-size: 15px; font-weight: 600; padding: 6px 2px; transition: color 0.15s;}
.site-content .nav-links a:hover{color: var(--brand-ink);}
.site-content .nav-links a.btn{color: rgb(255, 255, 255); padding: 11px 18px;}
.site-content .nav-drop{position: relative;}
.site-content .nav-drop-t{display: flex; align-items: center; gap: 6px; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 15px; font-weight: 600; color: var(--ink-soft); background: none; border: 0px; padding: 6px 2px; cursor: pointer; transition: color 0.15s;}
.site-content .nav-drop-t svg{width: 11px; height: 8px; transition: transform 0.2s;}
.site-content .nav-drop:hover .nav-drop-t,.site-content .nav-drop:focus-within .nav-drop-t{color: var(--brand-ink);}
.site-content .nav-drop:hover .nav-drop-t svg,.site-content .nav-drop:focus-within .nav-drop-t svg{transform: rotate(180deg);}
.site-content .nav-drop-m{position: absolute; top: calc(100% + 12px); right: 0px; min-width: 184px; display: flex; flex-direction: column; padding: 8px; gap: 2px; background: rgb(255, 255, 255); border: 1px solid var(--panel-line); border-radius: 14px; box-shadow: rgba(24, 28, 26, 0.05) 0px 2px 6px, rgba(24, 28, 26, 0.28) 0px 22px 44px -22px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s, transform 0.18s, visibility 0.18s;}
.site-content .nav-drop:hover .nav-drop-m,.site-content .nav-drop:focus-within .nav-drop-m{opacity: 1; visibility: visible; transform: translateY(0px);}
.site-content .nav-drop-m a{padding: 9px 12px; border-radius: 9px; font-size: 14.5px; font-weight: 600; color: var(--ink-soft); text-decoration: none; white-space: nowrap; transition: background 0.15s, color 0.15s;}
.site-content .nav-drop-m a:hover{background: var(--panel); color: var(--brand-ink);}
.site-content #acct{position: relative; display: flex; align-items: center;}
.site-content .acct-login{font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 15px; font-weight: 700; color: var(--brand-ink); background: none; cursor: pointer; border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 18px; transition: border-color 0.15s, background 0.15s;}
.site-content .acct-login:hover{border-color: var(--brand-ink); background: rgba(3, 105, 161, 0.05);}
.site-content .acct-av{width: 38px; height: 38px; border-radius: 999px; border: 0px; cursor: pointer; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 16px; font-weight: 800; color: rgb(255, 255, 255); background: linear-gradient(135deg, rgb(3, 105, 161), rgb(79, 70, 229)); display: grid; place-items: center;}
.site-content .acct-menu{display: none; position: absolute; top: calc(100% + 10px); right: 0px; min-width: 190px; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 14px; padding: 8px; box-shadow: rgba(15, 23, 42, 0.13) 0px 12px 32px; z-index: 60;}
.site-content #acct.open .acct-menu{display: block;}
.site-content .acct-who{padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; line-height: 1.45;}
.site-content .acct-who b{display: block; font-size: 14px; color: var(--brand-ink);}
.site-content .acct-who span{display: block; font-size: 12.5px; color: var(--ink-soft);}
.site-content .acct-menu a,.site-content .acct-out{display: block; width: 100%; text-align: left; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 14px; font-weight: 600; color: var(--ink-soft); background: none; border: 0px; cursor: pointer; padding: 9px 10px; border-radius: 9px; text-decoration: none;}
.site-content .acct-menu a:hover,.site-content .acct-out:hover{background: rgba(15, 23, 42, 0.05); color: var(--brand-ink);}
@media (max-width: 820px) {
.site-content .nav-links a:not(.btn){display: none;}
.site-content .nav-drop{display: none;}
}
.site-content .hero{position: relative; overflow: hidden; height: calc(100dvh - 67px); padding: 0px; display: flex; align-items: center; background-image: radial-gradient(rgba(139, 47, 224, 0.13) 1px, transparent 1.5px); background-size: 26px 26px;}
.site-content .hero-bg{position: absolute; inset: 0px; z-index: 0; overflow: hidden;}
.site-content .hero-bg-tex{position: absolute; inset: 0px; background-size: cover; background-position: center 40%; opacity: 0; transition: opacity 0.6s;}
.site-content .hero-bg-tex.front{background-image: linear-gradient(rgba(10, 8, 24, 0.28) 0%, rgba(10, 8, 24, 0.62) 100%), url("assets/hero-bed-bg.jpg"); background-position: center 48%; filter: brightness(0.66) saturate(1.05);}
.site-content .hero-bg-tex.show{opacity: 1;}
.site-content .hbg-blob{position: absolute; border-radius: 50%; filter: blur(70px); mix-blend-mode: multiply;}
.site-content .hbg-blob.b1{width: 520px; height: 520px; top: -180px; left: -140px; background: radial-gradient(circle, var(--brand) 0%, transparent 42%); opacity: 0.22; animation: 22s ease-in-out 0s infinite normal none running driftA;}
.site-content .hbg-blob.b2{width: 460px; height: 460px; bottom: -200px; right: -120px; background: radial-gradient(circle, var(--brand-ink) 0%, transparent 42%); opacity: 0.18; animation: 26s ease-in-out 0s infinite normal none running driftB;}
.site-content .hbg-blob.b3{width: 320px; height: 320px; top: 22%; right: 14%; background: radial-gradient(circle, rgb(255, 209, 102) 0%, transparent 40%); opacity: 0.12; mix-blend-mode: soft-light;}
@keyframes driftA {
0%, 100% { transform: translate(0px, 0px); }
50% { transform: translate(30px, 20px); }
}
@keyframes driftB {
0%, 100% { transform: translate(0px, 0px); }
50% { transform: translate(-24px, -18px); }
}
@media (prefers-reduced-motion: reduce) {
.site-content .hbg-blob{animation: auto ease 0s 1 normal none running none;}
}
.site-content .hero-bg-fade{position: absolute; inset: 0px; background: linear-gradient(180deg, rgba(255,255,255,0) 80%, var(--bg) 100%);}
.site-content .hero-scene-tag{position: relative; display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 800; white-space: normal; text-align: left; max-width: 80%; margin: 0px auto 20px 24px; width: fit-content; color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.45) 0px 2px 18px; line-height: 1.3; opacity: 0; transition: opacity 0.6s;}
.site-content .hd-ph.f .hero-scene-tag{color: rgb(255, 217, 160);}
.site-content .hd-ph.b .hero-scene-tag{color: rgb(255, 255, 255);}
.site-content .hd-ph.active .hero-scene-tag{opacity: 1;}
@media (min-width: 901px) and (max-width: 1299px) {
.site-content .hero-duo{padding-top: 40px;}
.site-content .hero-duo .hd-ph .phone{height: min(38vh, 470px);}
.site-content .hero-duo .hd-ph .hero-scene-tag{margin-bottom: calc(14px + (0.21 * min(38vh, 470px)));}
.site-content .hero-scene-tag{font-size: 19px; line-height: 1.3; max-width: none; white-space: nowrap; margin: 0px auto 30px 0px; padding: 9px 15px; border-radius: 12px; z-index: 4; text-shadow: none; background: rgba(8, 20, 28, 0.78); backdrop-filter: saturate(1.1) blur(2px);}
.site-content .hd-ph.f .hero-scene-tag,.site-content .hd-ph.b .hero-scene-tag{color: rgb(255, 255, 255);}
}
@media (min-width: 1300px) {
.site-content .hero-scene-tag{position: absolute; top: 50%; display: block; margin: 0px; transform: translateY(-50%); width: 320px; max-width: 320px; white-space: normal; text-align: left; line-height: 1.35; font-size: 34px;}
.site-content .hd-ph.f .hero-scene-tag{right: calc(100% + 14px);}
.site-content .hd-ph.b .hero-scene-tag{left: calc(100% + 14px);}
}
.site-content .hd-ph .real-shot{overflow: hidden; position: relative;}
.site-content .hd-ph .real-shot img{position: absolute; inset: 0px; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; background: rgb(242, 246, 244); transition: opacity 0.6s;}
.site-content .hd-ph .real-shot img.hide{opacity: 0;}
.site-content .hd-ph .tap-dot{position: absolute; width: 20px; height: 20px; border-radius: 50%; z-index: 3; pointer-events: none; opacity: 0; transition: top 0.65s cubic-bezier(0.34, 1.1, 0.4, 1), left 0.65s cubic-bezier(0.34, 1.1, 0.4, 1), opacity 0.3s;}
.site-content .hd-ph .tap-dot.show{opacity: 1;}
.site-content .hd-ph .tap-dot::before,.site-content .hd-ph .tap-dot::after{content: ""; position: absolute; inset: 0px; border-radius: 50%; border: 2px solid rgba(139, 47, 224, 0.85); animation: 1.6s ease-out 0s infinite normal none running tapPulse;}
.site-content .hd-ph .tap-dot::after{animation-delay: 0.5s;}
.site-content .hd-ph .tap-dot i{position: absolute; inset: 5px; border-radius: 50%; background: var(--brand-ink); box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 6px;}
@keyframes tapPulse {
0% { transform: scale(0.5); opacity: 1; }
100% { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.site-content .hd-ph .tap-dot::before,.site-content .hd-ph .tap-dot::after{animation: auto ease 0s 1 normal none running none; display: none;}
}
.site-content .hero-caption #heroStageText{display: inline-block; transition: opacity 0.25s, transform 0.25s;}
.site-content .hero-caption #heroStageText.swap{opacity: 0; transform: translateY(4px);}
.site-content .hero-duo{display: flex; justify-content: center; align-items: center; gap: clamp(20px, 4vw, 60px); margin: 0px auto; position: relative; z-index: 1; perspective: 1400px; perspective-origin: 65% 50%;}
.site-content .hd-ph{position: relative; flex: 0 0 auto; transition: opacity 0.6s, filter 0.6s;}
.site-content .hd-ph .phone{width: auto; height: min(54vh, 670px); aspect-ratio: 100 / 207.83; container-type: inline-size; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s; transform-style: preserve-3d; position: relative; transform-origin: center center;}
.site-content .hd-ph{padding-top: 6px;}
.site-content .hd-ph.active{z-index: 3;}
.site-content .hd-ph.f .phone{transform: rotateY(-26deg) rotate(-1deg) translateZ(0px) scale(0.9);}
.site-content .hd-ph.b .phone{transform: rotateY(-18deg) rotate(1deg) scale(0.9);}
.site-content .hd-ph.f.active .phone{transform: rotateY(-6deg) rotate(0deg) translateX(38%) translateY(-2%) scale(1.42);}
.site-content .hd-ph.b.active .phone{transform: rotateY(-4deg) translateX(-38%) translateY(-2%) scale(1.42);}
.site-content .hd-ph.dim{opacity: 0.45;}
.site-content .hd-ph.dim .phone{filter: grayscale(0.3) brightness(0.72);}
.site-content .hd-ph .dev-scr .screen{position: absolute; inset: 13.5cqw 0px 0px; height: auto; overflow: hidden;}
.site-content .hero-toast{position: absolute; top: 14px; left: 50%; transform: translateX(-50%) translateY(-10px); background: var(--ai); color: rgb(255, 209, 102); font-weight: 800; font-size: 11.5px; padding: 8px 14px; border-radius: 999px; box-shadow: rgba(0, 0, 0, 0.28) 0px 8px 20px; opacity: 0; transition: opacity 0.35s, transform 0.35s; white-space: nowrap; z-index: 2; pointer-events: none;}
.site-content .hero-toast.show{opacity: 1; transform: translateX(-50%) translateY(0px);}
.site-content .hero-caption{display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; padding: 7px 15px; border-radius: 999px; background: rgb(255, 255, 255); border: 1px solid var(--line); color: var(--ink-soft); box-shadow: var(--shadow-sm); margin: 14px auto 0px; position: relative; z-index: 2; transition: 0.2s;}
.site-content .hero-caption .hsl-dot{width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: 0 0 auto;}
.site-content .hero h1{text-wrap: balance;}
.site-content .sr-only{position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;}
.site-content .hero-stage{position: relative; margin: 44px auto 0px; display: flex; flex-direction: column; align-items: center; gap: 16px; z-index: 1;}
.site-content .hero-stage-label{display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; padding: 7px 15px; border-radius: 999px; background: rgb(255, 255, 255); border: 1px solid var(--line); color: var(--ink-soft); box-shadow: var(--shadow-sm); transition: 0.2s;}
.site-content .hero-stage-label .hsl-dot{width: 8px; height: 8px; border-radius: 50%; background: var(--brand);}
.site-content .hero-phone-wrap{position: relative;}
.site-content .hero-phone-wrap .halo{position: absolute; inset: -30px; background: var(--brand-tint-2); border-radius: 46px; z-index: 0;}
.site-content .hero-phone{position: relative; z-index: 1; width: min(74vw, 410px); box-shadow: rgba(16, 40, 32, 0.32) 0px 34px 74px -28px;}
.site-content .hero-phone .screen{height: 460px; overflow: hidden; transition: opacity 0.3s;}
@media (max-width: 760px) {
.site-content .hero-phone .screen{height: 56vh;}
}
.site-content .hero-annot{position: absolute; top: 0px; right: -10px; transform: translateY(-100%); background: var(--ai); color: rgb(255, 209, 102); font-weight: 800; font-size: 12.5px; padding: 8px 14px; border-radius: 999px; box-shadow: rgba(0, 0, 0, 0.28) 0px 8px 20px; opacity: 0; transition: opacity 0.35s, transform 0.35s; white-space: nowrap; z-index: 2; pointer-events: none;}
.site-content .hero-annot.show{opacity: 1; transform: translateY(-130%);}
.site-content .hero-duo{position: relative;}
.site-content .hc{font-size: 13px; font-weight: 700; color: var(--muted); background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; transition: 0.25s;}
.site-content .hc.on{color: var(--brand-ink); background: var(--brand-tint); border-color: transparent; box-shadow: var(--shadow-sm);}
.site-content .hd-ph .bg-tag{display: block; width: fit-content; margin: 0px auto 12px; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 800; color: var(--ink); box-shadow: var(--shadow-sm); white-space: nowrap;}
.site-content .hd-mid{display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 0 0 auto;}
.site-content .hd-mid .ln{position: relative; width: 56px; height: 56px; border-radius: 16px; background: var(--brand); color: rgb(255, 255, 255); display: grid; place-items: center; font-family: 'Plus Jakarta Sans',var(--sans); font-weight: 800; font-size: 13.5px; letter-spacing: 0.02em; box-shadow: rgba(139, 47, 224, 0.6) 0px 12px 28px -12px;}
.site-content .hd-mid .ln::after{content: ""; position: absolute; inset: -8px; border-radius: 20px; border: 2px solid rgba(10, 186, 181, 0.35); animation: 2.4s ease-out 0s infinite normal none running lnPulse;}
@keyframes lnPulse {
0% { transform: scale(0.82); opacity: 0; }
30% { opacity: 1; }
100% { transform: scale(1.18); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.site-content .hd-mid .ln::after{animation: auto ease 0s 1 normal none running none; display: none;}
}
.site-content .hd-mid .mid-tx{text-align: center; font-size: 13.5px; font-weight: 800; color: var(--ink); line-height: 1.45;}
.site-content .hd-mid .mid-tx b{color: var(--brand-ink);}
.site-content .hd-mid .mid-link{width: clamp(80px, 10vw, 120px); height: 12px; overflow: visible;}
.site-content .hero-h1{position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;}
.site-content .hero-m-lede,.site-content .hero-m-cta{display: none;}
@media (max-width: 760px) {
.site-content .hero{height: auto; min-height: 0px; padding: 30px 0px 38px; display: block;}
.site-content .hero-bg::after{content: ""; position: absolute; inset: 0px; z-index: 9999; pointer-events: none; background: linear-gradient(rgba(8, 10, 26, 0.74) 0%, rgba(8, 10, 26, 0.52) 46%, rgba(8, 10, 26, 0.7) 100%);}
.site-content .hero .wrap{position: relative; z-index: 2;}
.site-content .hero-h1.sr-only{position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0px, 0px, 0px, 0px); overflow: hidden;}
.site-content .hero-duo{flex-direction: column; gap: 0px; margin-top: 0px;}
.site-content .hd-ph{display: none; width: 100%; padding-top: 0px;}
.site-content .hd-ph.f,.site-content .hd-ph.active{display: block;}
.site-content .hd-ph.f.dim{display: none;}
.site-content .hd-ph.dim{opacity: 1;}
.site-content .hd-ph .phone{width: auto; height: min(52vh, 430px); margin: 0px auto; transform: none !important; filter: none !important;}
.site-content .hero-scene-tag{display: block; width: auto; max-width: 100%; margin: 0px auto 16px; padding: 0px; font-size: 17px; line-height: 1.4; font-weight: 800; text-align: center; text-shadow: rgba(0, 0, 0, 0.55) 0px 2px 14px; background: none; border: 0px;}
.site-content .hd-ph.f .hero-scene-tag,.site-content .hd-ph.b .hero-scene-tag{color: rgb(255, 255, 255);}
.site-content .hd-mid{display: none;}
}
.site-content .hero .eyebrow,.site-content .hero h1,.site-content .hero .lede,.site-content .hero .hero-cta,.site-content .hero-duo,.site-content .hero .scroll-cue{animation: 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) 0s 1 normal both running rise;}
.site-content .hero h1{animation-delay: 0.05s;}
.site-content .hero .lede,.site-content .hero-m-lede{animation: 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) 0.15s 1 normal both running rise;}
.site-content .hero-m-cta{animation: 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) 0.25s 1 normal both running rise;}
.site-content .hero .hero-cta{animation-delay: 0.25s;}
.site-content .hero-duo{animation-delay: 0.35s;}
.site-content .hero .scroll-cue{animation-delay: 0.5s;}
@keyframes rise {
0% { opacity: 0; transform: translateY(18px); }
100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.site-content .hero .eyebrow,.site-content .hero h1,.site-content .hero .lede,.site-content .hero .hero-cta,.site-content .hero-duo,.site-content .hero .scroll-cue{animation: auto ease 0s 1 normal none running none;}
}
.site-content .eyebrow{font-family: 'Plus Jakarta Sans',var(--sans); font-weight: 800; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.03em; color: var(--ink);}
.site-content .eyebrow .ai{color: var(--brand);}
.site-content .pillars-sec{padding: 78px 0px 84px; background: rgb(241, 247, 244); border-top: 1px solid rgb(227, 237, 232); border-bottom: 1px solid rgb(227, 237, 232);}
.site-content .pillar{position: relative;}
.site-content .pillar .num{position: absolute; top: 20px; right: 21px; font-family: 'Plus Jakarta Sans',var(--sans); font-weight: 800; font-size: 12px; color: rgb(188, 212, 201); letter-spacing: 0.06em; z-index: 1;}
.site-content .pillar h3{padding-right: 30px;}
.site-content .pillar .shot{margin-top: 14px; height: 300px; border-radius: 12px; overflow: hidden; background: rgb(242, 246, 244);}
.site-content .pillar .shot image-slot{width: 100%; height: 100%; display: block;}
.site-content .pv{min-height: calc(100dvh - 67px); display: flex; align-items: center; padding: clamp(18px, 3.4vh, 44px) 0px;}
.site-content .pv .wrap{position: relative; z-index: 1; width: 100%;}
.site-content .pv h2{text-align: center; color: var(--ink); font-size: clamp(21px, 2.9vw, 38px); font-weight: 700; letter-spacing: -0.012em; text-wrap: balance;}
.site-content .pv .pv-sub{text-align: center; color: var(--muted); font-size: 14px; font-weight: 700; margin: clamp(6px, 1.2vh, 11px) 0px 0px;}
.site-content .pv-stage{position: relative; margin: clamp(12px, 2.4vh, 26px) auto 0px; max-width: 960px; height: clamp(310px, 54vh, 540px); display: flex; align-items: flex-start; justify-content: center;}
.site-content .pv-phone{position: relative; z-index: 2; width: clamp(140px, 24vh, 246px); flex: 0 0 auto; background: rgb(12, 43, 62); border-radius: 34px; padding: 8px; box-shadow: rgba(12, 43, 62, 0.5) 0px 34px 64px -30px, rgba(12, 43, 62, 0.08) 0px 0px 0px 1px;}
.site-content .pv-card{position: absolute; z-index: 3; background: rgb(255, 255, 255); border: 1px solid rgb(228, 237, 242); border-radius: 16px; padding: 10px 10px 11px; box-shadow: rgba(12, 43, 62, 0.28) 0px 20px 44px -20px;}
.site-content .pv-card .lb{display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: rgb(3, 105, 161); margin: 0px 2px 8px;}
.site-content .pv-card .lb::before{content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgb(53, 196, 240); flex: 0 0 auto;}
.site-content .pv-crop{display: block; border-radius: 9px; width: 100%; height: auto; background: rgb(255, 255, 255);}
.site-content .pv-sum{display: flex; flex-direction: column; gap: 9px; padding: 2px 2px 0px;}
.site-content .pv-sum .d{font-size: 14px; font-weight: 600; color: rgb(139, 147, 161);}
.site-content .pv-sum .r{font-size: 17px; font-weight: 700; color: rgb(32, 38, 46);}
.site-content .pv-sum .r em{font-style: normal; color: rgb(12, 131, 195);}
.site-content .pv-stat{display: flex; flex-direction: column; gap: 3px; padding: 2px 2px 0px;}
.site-content .pv-stat b{font-size: 34px; font-weight: 700; color: rgb(12, 131, 195); line-height: 1.15; font-family: 'Plus Jakarta Sans',var(--sans);}
.site-content .pv-stat span{font-size: 15px; font-weight: 700; color: rgb(32, 38, 46);}
.site-content .pv-stat a{font-size: 14px; font-weight: 600; color: rgb(12, 131, 195); text-decoration: none; margin-top: 1px;}
.site-content .pv-stat a:hover{text-decoration: underline;}
.site-content .pv-c1{left: 0px; top: 6%; width: 300px; animation: 7s ease-in-out 0s infinite normal none running pvFloat;}
.site-content .pv-c2{left: 20px; top: 44%; width: 330px; animation: 8.4s ease-in-out 0.6s infinite normal none running pvFloat;}
.site-content .pv-c3{right: 0px; top: 12%; width: 212px; animation: 7.8s ease-in-out 0.3s infinite normal none running pvFloat;}
.site-content .pv-c4{right: 32px; top: 56%; width: 212px; animation: 9s ease-in-out 0.9s infinite normal none running pvFloat;}
@keyframes pvFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
.site-content .pv-card{animation: auto ease 0s 1 normal none running none !important;}
}
@media (max-width: 1000px) {
.site-content .pv-c1{left: 4px; width: 268px;}
.site-content .pv-c2{left: 4px; width: 290px;}
.site-content .pv-c3{right: 4px; width: 194px;}
.site-content .pv-c4{right: 12px; width: 194px;}
}
@media (max-height: 720px) and (min-width: 901px) {
.site-content .pv-card{padding: 8px 8px 9px; border-radius: 13px;}
.site-content .pv-card .lb{font-size: 10.5px; margin-bottom: 6px;}
.site-content .pv-c1{top: 2%; width: 250px;}
.site-content .pv-c2{top: 42%; width: 272px;}
.site-content .pv-c3{top: 9%; width: 176px;}
.site-content .pv-c4{top: 52%; width: 176px;}
}
@media (max-width: 900px) {
.site-content .pv{padding: 48px 0px 54px; min-height: 0px; display: block;}
.site-content .pv-stage{height: auto; flex-direction: column; align-items: center; gap: 22px; margin-top: 30px;}
.site-content .pv-phone{width: min(72vw, 260px);}
.site-content .pv-cards-m{display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%;}
.site-content .pv-card{position: static; padding: 10px; animation: auto ease 0s 1 normal none running none !important;}
.site-content .pv-card{width: auto !important;}
.site-content .pv-c1,.site-content .pv-c2{grid-column: 1 / -1;}
}
@media (min-width: 901px) {
.site-content .pv-cards-m{display: contents;}
}
.site-content .qs{padding: clamp(48px, 7vh, 92px) 0px;}
.site-content .qs > .wrap{width: 100%;}
.site-content .qs .label{background: rgb(230, 244, 253); color: rgb(3, 105, 161);}
.site-content .qs-head{display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(20px, 3vw, 30px); text-align: center; max-width: none; margin: 0px auto clamp(24px, 4vh, 52px);}
.site-content .qs-head h2{flex: 0 0 auto; font-size: clamp(22px, 2.8vw, 36px); font-weight: 700; letter-spacing: -0.012em; text-wrap: balance;}
.site-content .qs-head h2 .qs-h2-free,.site-content .qs-head h2 .qs-h2-act{display: inline-block;}
.site-content .qs-head h2 .qs-h2-free{color: rgb(3, 105, 161); margin-right: 0.38em;}
.site-content .qs-grid{display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: clamp(22px, 3.4vw, 52px); align-items: start;}
.site-content .qs-step{display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(14px, 2.2vh, 24px);}
.site-content .qs-copy{max-width: 30ch;}
.site-content .qs-copy h3{margin: clamp(8px, 1.4vh, 14px) 0px 0px; font-size: clamp(19px, 1.7vw, 25px); font-weight: 700; letter-spacing: -0.012em; line-height: 1.28; text-wrap: balance;}
.site-content .qs-copy p{margin: 10px 0px 0px; font-size: clamp(14px, 1vw, 16px); line-height: 1.65; color: var(--ink-soft); text-wrap: pretty;}
.site-content .qs-dl{display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; margin: 0px;}
.site-content .qs-dl-wrap{display: flex; align-items: center; justify-content: center; width: 100%; min-height: min(42vh, 392px);}
@media (max-width: 900px) {
.site-content .qs-dl-wrap{min-height: 0px; padding: 4px 0px 8px;}
}
.site-content .qs-dl .dl-btn{padding: 13px 20px 13px 16px; border-radius: 14px; min-width: 0px;}
.site-content .qs-dl .dl-btn svg{width: 26px; height: 26px;}
.site-content .qs-dl .dl-btn .tx b{font-size: 17px;}
@media (max-height: 760px) and (min-width: 901px) {
.site-content .qs-head{margin-bottom: clamp(14px, 2.4vh, 28px);}
.site-content .qs-dl .dl-btn{padding: 12px 18px 12px 16px;}
.site-content .qs-dl .dl-btn .tx b{font-size: 16px;}
}
@media (max-width: 900px) {
.site-content .qs{padding: 52px 0px 58px; min-height: 0px; display: block;}
.site-content .qs-head{justify-content: center;}
.site-content .qs-grid{grid-template-columns: minmax(0px, 1fr); gap: 44px;}
.site-content .qs-copy{max-width: 34ch;}
}
.site-content .fsec{padding: clamp(40px, 6.5vh, 72px) 0px;}
.site-content .fsec.alt{background: var(--panel-alt);}
.site-content .fsec-grid{display: grid; grid-template-columns: minmax(0px, 46fr) minmax(0px, 54fr); gap: clamp(32px, 5vw, 68px); align-items: center;}
.site-content .fsec.flip .fsec-media{order: 2;}
.site-content .fsec.flip .fsec-grid{grid-template-columns: minmax(0px, 54fr) minmax(0px, 46fr);}
.site-content .fsec h2{font-size: clamp(26px, 3.2vw, 40px); font-weight: 700; letter-spacing: -0.012em; text-wrap: balance;}
.site-content .fsec-head{text-align: center; max-width: 660px; margin: 0px auto clamp(24px, 3.4vh, 44px);}
.site-content .fsec-list{margin: 0px; padding: 0px; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 26px;}
.site-content .fsec-list li{display: block;}
.site-content .fsec-list strong{display: block; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.5;}
.site-content .fsec-list span{display: block; font-size: 13.5px; line-height: 1.62; color: var(--muted); text-wrap: pretty;}
.site-content .fsec-minor{max-width: var(--maxw); margin: clamp(34px, 4.4vw, 52px) auto 0px; padding: 20px 24px 0px; border-top: 1px dashed rgb(220, 220, 215); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;}
.site-content .fsec-minor .t{font-size: 12.5px; font-weight: 800; color: var(--muted); margin-right: 2px;}
.site-content .fsec-minor em{font-style: normal; font-size: 12.5px; font-weight: 700; color: rgb(3, 105, 161); background: rgb(240, 249, 255); border: 1px solid rgb(213, 235, 249); border-radius: 999px; padding: 5px 12px;}
.site-content .fsec.alt .fsec-minor em{background: rgb(240, 249, 255);}
.site-content .fsec-media{display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 26px);}
.site-content .fph{position: relative; flex: 0 0 auto; width: min(100%, 238px); background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 30px; overflow: hidden; box-shadow: rgba(16, 40, 32, 0.28) 0px 28px 64px -26px;}
.site-content .fph .sc{border-radius: inherit; overflow: hidden; background: rgb(242, 246, 244); aspect-ratio: 1 / 2;}
.site-content .fph .sc img,.site-content .fph .sc image-slot{width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top;}
.site-content .fcap{margin-top: 11px; text-align: center; font-size: 12px; font-weight: 700; color: rgb(3, 105, 161); max-width: 210px; text-wrap: pretty;}
.site-content .fstack{display: flex; flex-direction: column; align-items: center; min-width: 0px;}
.site-content .fsec.two .fsec-grid{grid-template-columns: minmax(0px, 55fr) minmax(0px, 45fr);}
.site-content .fsec.two.flip .fsec-grid{grid-template-columns: minmax(0px, 45fr) minmax(0px, 55fr);}
.site-content .fsec-media.duo{align-items: flex-start; gap: clamp(12px, 1.8vw, 22px);}
.site-content .fsec-media.duo .fstack{flex: 1 1 0px;}
.site-content .fsec-media.duo .fph{width: 100%; max-width: 196px; border-radius: 24px;}
.site-content .fsec-media.duo .fstack:nth-child(2){margin-top: 34px;}
@media (max-width: 900px) {
.site-content .fsec{padding: 56px 0px;}
.site-content .fsec-grid{grid-template-columns: 1fr; gap: 34px;}
.site-content .fsec.flip .fsec-grid,.site-content .fsec.two .fsec-grid,.site-content .fsec.two.flip .fsec-grid{grid-template-columns: 1fr;}
.site-content .fsec.flip .fsec-media{order: 0;}
.site-content .fsec-list{grid-template-columns: 1fr; gap: 16px;}
.site-content .fsec-media{flex-direction: column;}
.site-content .fsec.two .fsec-grid{grid-template-columns: 1fr;}
.site-content .fsec-media.duo{flex-direction: row; align-items: flex-start; justify-content: center;}
.site-content .fsec-media.duo .fstack{flex: 1 1 0px; max-width: 196px;}
.site-content .fsec-media.duo .fstack:nth-child(2){margin-top: 24px;}
}
.site-content .hero::before{content: ""; position: absolute; top: -200px; right: -180px; width: 640px; height: 640px; background: radial-gradient(circle,var(--brand-tint) 0%,rgba(233,245,239,0) 66%);}
.site-content .hero .wrap{position: relative; z-index: 1; width: 100%; text-align: center; padding-top: 6px; padding-bottom: 28px;}
.site-content .hero h1{font-size: clamp(36px, 5.6vw, 62px); font-weight: 800; margin-top: 14px; letter-spacing: -0.01em;}
.site-content .hero h1 .hl{color: var(--brand-strong);}
.site-content .hero .lede{color: var(--ink-soft); font-size: clamp(16px, 1.7vw, 19px); margin: 20px auto 0px; max-width: 44ch; text-wrap: pretty;}
.site-content .pillars{display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 12px; max-width: 820px; margin: 36px auto 0px; text-align: left;}
@media (max-width: 720px) {
.site-content .pillars{grid-template-columns: 1fr; max-width: 400px;}
}
.site-content .pillar{background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 16px; padding: 20px 21px; box-shadow: var(--shadow-sm); min-width: 0px;}
.site-content .pillar h3{font-size: 22px; font-weight: 800;}
.site-content .pillar ul{list-style: none; margin: 12px 0px 0px; padding: 0px; display: grid; gap: 7px;}
.site-content .pillar li{display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-soft); line-height: 1.5;}
.site-content .pillar li::before{content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex: 0 0 auto;}
.site-content .expand-note{display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; font-size: 13.5px; font-weight: 600; color: var(--brand-ink); background: var(--brand-tint-2); border: 1px dashed rgb(185, 217, 203); border-radius: 999px; padding: 8px 16px;}
.site-content .oneline{padding: 74px 0px 84px; text-align: center;}
.site-content .oneline h2{font-size: clamp(24px, 3vw, 36px); font-weight: 800;}
.site-content .oneline .sub{color: var(--ink-soft); margin: 14px auto 0px; max-width: 40ch; font-size: clamp(15px, 1.6vw, 17.5px); text-wrap: pretty;}
.site-content .ol-grid{display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; max-width: 860px; margin: 36px auto 0px; text-align: left;}
@media (max-width: 720px) {
.site-content .ol-grid{grid-template-columns: 1fr;}
.site-content .ol-eq{transform: rotate(90deg); margin: -6px auto;}
}
.site-content .ol-card{background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 18px; padding: 24px 26px; box-shadow: var(--shadow-sm);}
.site-content .ol-card .tag{display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; border-radius: 999px; padding: 5px 12px;}
.site-content .ol-card.front .tag{background: var(--brand-tint); color: var(--brand-ink);}
.site-content .ol-card.back .tag{background: var(--ai); color: rgb(255, 209, 102);}
.site-content .ol-card h3{font-size: 18px; font-weight: 800; margin-top: 12px;}
.site-content .ol-card p{color: var(--ink-soft); font-size: 14.5px; margin-top: 8px; line-height: 1.7;}
.site-content .ol-eq{align-self: center; font-family: 'Plus Jakarta Sans',var(--sans); font-weight: 800; font-size: 22px; color: var(--brand); flex: 0 0 auto;}
.site-content .hero-cta{display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; justify-content: center;}
.site-content .scroll-cue{margin: 54px auto 0px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 600;}
.site-content .scroll-cue .chev{width: 26px; height: 26px; color: var(--brand); animation: 1.6s ease-in-out 0s infinite normal none running bob;}
@keyframes bob {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(7px); }
}
@media (prefers-reduced-motion: reduce) {
.site-content .scroll-cue .chev{animation: auto ease 0s 1 normal none running none;}
}
.site-content .story{background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);}
.site-content .story-grid{display: grid; grid-template-columns: 1fr 420px; gap: 56px;}
.site-content .steps{padding: 8vh 0px max(12vh, 747px - 96vh);}
.site-content .step{min-height: 92vh; display: flex; align-items: center;}
.site-content .step-card{max-width: 44ch; opacity: 0.32; transform: translateY(8px); transition: opacity 0.4s, transform 0.4s;}
.site-content .step.active .step-card{opacity: 1; transform: none;}
.site-content .step .num{font-family: 'Plus Jakarta Sans',var(--sans); font-weight: 800; font-size: 14px; color: var(--brand-ink); letter-spacing: 0.08em;}
.site-content .step h2{font-size: clamp(24px, 2.8vw, 34px); font-weight: 800; margin-top: 10px;}
.site-content .step p{color: var(--ink-soft); margin-top: 14px; font-size: 16.5px; text-wrap: pretty;}
.site-content .step .mini{margin-top: 16px; font-size: 13.5px; color: var(--muted); display: flex; align-items: center; gap: 8px;}
.site-content .step .mini .dotp{width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: 0 0 auto; animation: 1.4s ease-in-out 0s infinite normal none running pulse;}
@keyframes pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
.site-content .stage{align-self: stretch;}
.site-content .stage-sticky{position: sticky; top: max(10px, -390px + 50vh);}
.site-content .stage-in{display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 2vh;}
@media (max-height: 860px) {
.site-content .stage-in{padding-top: 0px;}
.site-content .screen{height: 290px;}
.site-content .dual .screen{height: 262px;}
}
.site-content .viewtag{display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px; background: rgb(255, 255, 255); border: 1px solid var(--line); color: var(--ink-soft); box-shadow: var(--shadow-sm); transition: background 0.25s, color 0.25s;}
.site-content .viewtag .vd{width: 8px; height: 8px; border-radius: 50%; background: var(--brand);}
.site-content .viewtag.owner{background: var(--ai); color: rgb(236, 231, 245); border-color: var(--ai);}
.site-content .viewtag.owner .vd{background: rgb(53, 196, 240);}
.site-content .rail{position: fixed; left: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 40; opacity: 0; pointer-events: none; transition: opacity 0.3s;}
.site-content .rail.show{opacity: 1; pointer-events: auto;}
.site-content .rail a{width: 10px; height: 10px; border-radius: 50%; background: rgb(205, 216, 210); display: block; transition: background 0.2s, transform 0.2s;}
.site-content .rail a.on{background: var(--brand); transform: scale(1.35);}
.site-content .duo{display: flex; gap: 14px; align-items: flex-start; justify-content: center;}
.site-content .device{position: relative; width: 340px; max-width: 100%; transition: opacity 0.35s;}
.site-content .device.dim{opacity: 0.38;}
.site-content .ph-cap{display: none; text-align: center; font-weight: 800; font-size: 13px; color: var(--ink); background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 999px; padding: 5px 0px; margin-bottom: 10px; box-shadow: var(--shadow-sm); position: relative; z-index: 1;}
.site-content .dual .ph-cap{display: block;}
.site-content .dual .who small{display: none;}
.site-content .dual .phone-top{min-height: 50px;}
.site-content .dual .device{width: 198px;}
.site-content .dual .halo{inset: -12px; border-radius: 26px;}
.site-content .dual .screen{height: 322px; padding: 10px; gap: 7px;}
.site-content .dual .msg .b{font-size: 11.5px; padding: 8px 10px;}
.site-content .dual .sys{font-size: 10px;}
.site-content .dual .card .hd{font-size: 11px; padding: 7px 10px;}
.site-content .dual .card .bd{font-size: 11.5px; padding: 9px 10px;}
.site-content .dual .rich button{font-size: 9.5px; padding: 10px 2px 8px;}
.site-content .dual .rich .ri{font-size: 14px;}
.site-content .dual .rich .star{font-size: 7.5px;}
.site-content .dual .phone-top{padding: 10px 12px;}
.site-content .dual .avatar{width: 30px; height: 30px; font-size: 14px;}
.site-content .dual .who{font-size: 12.5px;}
.site-content .dual .who small{font-size: 9.5px;}
.site-content .device .halo{position: absolute; inset: -24px; background: var(--brand-tint-2); border-radius: 38px; z-index: 0;}
.site-content .phone{position: relative; z-index: 1; width: 340px; max-width: 100%; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 30px; box-shadow: var(--shadow); overflow: hidden;}
.site-content .phone-top{background: var(--brand); color: rgb(255, 255, 255); padding: 14px 18px; display: flex; align-items: center; gap: 12px; transition: background 0.25s;}
.site-content .phone-top.owner{background: var(--ai);}
.site-content .avatar{width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.24); display: grid; place-items: center; font-size: 18px; flex: 0 0 auto;}
.site-content .who{font-weight: 700; font-size: 15px; line-height: 1.3;}
.site-content .who small{display: block; font-weight: 500; font-size: 11.5px; opacity: 0.85;}
.site-content .screen{height: 380px; overflow-y: auto; background: rgb(242, 246, 244); padding: 14px; display: flex; flex-direction: column; gap: 9px; scroll-behavior: smooth;}
.site-content .msg{max-width: 86%; flex-shrink: 0;}
.site-content .msg .b{padding: 10px 13px; border-radius: 15px; font-size: 13.5px; line-height: 1.55;}
.site-content .in{align-self: flex-start;}
.site-content .in .b{background: rgb(255, 255, 255); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 5px;}
.site-content .out{align-self: flex-end;}
.site-content .out .b{background: var(--brand); color: rgb(255, 255, 255); border-bottom-right-radius: 5px;}
.site-content .sys{align-self: center; font-size: 11px; color: var(--muted); background: rgb(233, 239, 236); padding: 4px 11px; border-radius: 999px; text-align: center; flex-shrink: 0;}
.site-content .opts{display: flex; flex-wrap: wrap; gap: 7px; align-self: flex-start; max-width: 94%; flex-shrink: 0;}
.site-content .opt{background: rgb(255, 255, 255); border: 1px solid var(--brand-ink); color: var(--brand-ink); font-weight: 700; font-size: 12.5px; padding: 9px 13px; border-radius: 11px; font-family: var(--sans); transition: 0.15s;}
.site-content .opt.pressed{background: var(--brand-ink); color: rgb(255, 255, 255);}
.site-content .card{background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; box-shadow: var(--shadow-sm); align-self: stretch; flex-shrink: 0;}
.site-content .card .hd{padding: 9px 13px; font-weight: 700; font-size: 12.5px; display: flex; align-items: center; gap: 7px;}
.site-content .card .hd.g{background: var(--brand-tint); color: var(--brand-ink);}
.site-content .card .hd.a{background: rgb(255, 243, 214); color: var(--ai);}
.site-content .card .bd{padding: 11px 13px; font-size: 13px; color: var(--ink-soft);}
.site-content .card .bd b{color: var(--ink);}
.site-content .acts{display: flex; gap: 8px; padding: 0px 13px 13px;}
.site-content .chip{flex: 1 1 0%; text-align: center; font-size: 12.5px; font-weight: 700; padding: 9px; border-radius: 9px; border: 0px; font-family: var(--sans); transition: background 0.15s;}
.site-content .chip.y{background: linear-gradient(135deg, rgb(139, 47, 224), rgb(53, 196, 240)); color: rgb(255, 255, 255);}
.site-content .chip.n{background: rgb(255, 255, 255); border: 1px solid var(--line); color: var(--ink-soft);}
.site-content .chip.flash{box-shadow: rgba(155, 79, 224, 0.35) 0px 0px 0px 3px;}
.site-content .rich{display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); background: rgb(255, 255, 255);}
.site-content .rich button{position: relative; border-top: 0px; border-left: 0px; border-image: none; background: rgb(255, 255, 255); font-family: var(--sans); padding: 13px 4px 11px; font-size: 11.5px; color: var(--ink-soft); font-weight: 600; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 3px;}
.site-content .rich button:nth-child(3n){border-right: 0px;}
.site-content .rich .ri{font-size: 17px;}
.site-content .rich .added{background: var(--brand-tint-2);}
.site-content .rich .added.hl{box-shadow: inset 0 0 0 2.5px var(--brand); background: var(--brand-tint); animation: 1.3s ease-in-out 0s infinite normal none running menuGlow; z-index: 1;}
@keyframes menuGlow {
0%, 100% { box-shadow: inset 0 0 0 2.5px var(--brand); }
50% { box-shadow: inset 0 0 0 2.5px var(--brand), 0 0 14px rgba(139,47,224,.55); }
}
@media (prefers-reduced-motion: reduce) {
.site-content .rich .added.hl{animation: auto ease 0s 1 normal none running none;}
}
.site-content .rich .star{position: absolute; top: 3px; right: 5px; font-size: 9px; color: var(--brand-ink); font-weight: 800;}
.site-content .typing{align-self: flex-start; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 15px 15px 15px 5px; padding: 11px 14px; display: flex; gap: 4px;}
.site-content .typing i{width: 6px; height: 6px; border-radius: 50%; background: rgb(185, 198, 192); animation: 1s ease 0s infinite normal none running tp;}
.site-content .typing i:nth-child(2){animation-delay: 0.15s;}
.site-content .typing i:nth-child(3){animation-delay: 0.3s;}
@keyframes tp {
0%, 100% { opacity: 0.3; transform: translateY(0px); }
50% { opacity: 1; transform: translateY(-3px); }
}
.site-content .narrate{display: flex; gap: 11px; align-items: flex-start; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 14px; padding: 13px 16px; width: 340px; max-width: 100%; box-shadow: var(--shadow-sm); position: relative; z-index: 2;}
.site-content .n-step{flex: 0 0 auto; font-family: 'Plus Jakarta Sans',var(--sans); font-weight: 800; font-size: 11px; letter-spacing: 0.03em; color: var(--brand-ink); background: var(--brand-tint); border-radius: 999px; padding: 4px 10px; margin-top: 1px; white-space: nowrap;}
.site-content .n-txt{font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); min-height: 42px;}
.site-content .n-txt b{color: var(--ink);}
.site-content .narrate.tick .n-txt{animation: 0.35s ease 0s 1 normal both running narrin;}
@keyframes narrin {
0% { opacity: 0; transform: translateY(5px); }
100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.site-content .narrate.tick .n-txt{animation: auto ease 0s 1 normal none running none;}
}
.site-content .screen > *{animation: 0.3s ease 0s 1 normal both running msgin;}
@keyframes msgin {
0% { opacity: 0; transform: translateY(8px); }
100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.site-content .screen > *{animation: auto ease 0s 1 normal none running none;}
}
@media (max-width: 920px) {
.site-content .narrate{width: 290px; padding: 10px 13px;}
.site-content .n-txt{font-size: 12.5px; min-height: 38px;}
.site-content .story-grid{grid-template-columns: 1fr; gap: 0px;}
.site-content .stage{align-self: auto; order: -1;}
.site-content .stage-sticky{position: sticky; top: 76px; z-index: 5; padding: 10px 0px 16px; background: linear-gradient(var(--bg-soft) 82%, rgba(244,248,246,0));}
.site-content .stage-in{padding-top: 0px;}
.site-content .device,.site-content .phone{width: 290px;}
.site-content .dual .device,.site-content .dual .phone{width: 46vw; max-width: 190px;}
.site-content .dual .screen{height: 250px;}
.site-content .screen{height: 300px;}
.site-content .steps{padding-top: 2vh;}
.site-content .step{min-height: 78vh; align-items: flex-end; padding-bottom: 8vh;}
.site-content .rail{display: none;}
}
.site-content .devrow{display: flex; align-items: flex-start; justify-content: center; gap: clamp(14px, 2.2vw, 24px); padding: 10px 0px 6px;}
.site-content .dev{position: relative; flex: 0 0 auto; width: auto; height: min(54vh, 520px); aspect-ratio: 100 / 207.83; container-type: inline-size;}
.site-content .dev-body{position: absolute; inset: 0px; border-radius: 14.6cqw; padding: 2.5cqw; background: rgb(10, 10, 11); box-shadow: rgba(255, 255, 255, 0.06) 0px 0px 0px 0.28cqw inset, rgba(0, 0, 0, 0.5) 0px 0px 0px 0.12cqw, rgba(18, 21, 26, 0.38) 0px 3.4cqw 5cqw -1.2cqw, rgba(18, 21, 26, 0.28) 0px 0.8cqw 1.6cqw -0.4cqw;}
.site-content .dev-body::before{content: ""; position: absolute; inset: 1.55cqw; border-radius: 13.1cqw; background: rgb(4, 5, 6);}
.site-content .dev-scr{container-type: inline-size; position: absolute; inset: 2.5cqw; border-radius: 12.1cqw; overflow: hidden; background: var(--sb-bg,#fff); z-index: 2;}
.site-content .dev-scr img{position: absolute; left: 0px; top: 13.5cqw; width: 100%; height: auto; display: block;}
.site-content .dev-sb{position: absolute; top: 0px; left: 0px; right: 0px; height: 13.5cqw; background: var(--sb-bg,#fff); color: var(--sb-ink,#000); z-index: 2; pointer-events: none;}
.site-content .dev-sb b{position: absolute; top: 0px; left: 0px; width: 29cqw; height: 14.6cqw; display: flex; align-items: center; justify-content: center; font-family: -apple-system,"SF Pro Text","Helvetica Neue",Arial,var(--sans); font-size: 4.35cqw; font-weight: 600; letter-spacing: 0px; line-height: 1;}
.site-content .dev-sb .ic{position: absolute; top: 0px; right: 5.1cqw; height: 14.6cqw; display: flex; align-items: center; gap: 1.3cqw;}
.site-content .dev-sb svg{display: block; width: auto;}
.site-content .dev-sb .s-sig{height: 2.8cqw;}
.site-content .dev-sb .s-wifi{height: 2.95cqw;}
.site-content .dev-sb .s-bat{height: 3.35cqw;}
.site-content .dev-di{position: absolute; top: 2.8cqw; left: 50%; transform: translateX(-50%); width: 31.8cqw; height: 9.2cqw; border-radius: 999px; background: rgb(5, 6, 7); box-shadow: rgba(255, 255, 255, 0.06) 0px 0.3cqw 0.6cqw inset; z-index: 4;}
.site-content .dev-di i{position: absolute; right: 10.5%; top: 50%; transform: translateY(-50%); width: 2.5cqw; height: 2.5cqw; border-radius: 50%; background: radial-gradient(circle at 36% 30%, rgb(29, 42, 56) 0px, rgb(29, 42, 56) 34%, rgb(11, 16, 21) 68%, rgb(5, 7, 8) 100%);}
.site-content .dev-hi{position: absolute; left: 50%; bottom: 1.7cqw; transform: translateX(-50%); width: 33cqw; height: 1.05cqw; border-radius: 999px; background: rgba(10, 14, 18, 0.3); z-index: 4;}
.site-content .dev-glare{position: absolute; inset: 2.5cqw; border-radius: 12.1cqw; z-index: 5; pointer-events: none; mix-blend-mode: screen; opacity: 0.3; background: linear-gradient(124deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.08) 9%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, 0.12) 100%);}
.site-content .dev .ant{display: none;}
.site-content .dev-btn{position: absolute; z-index: 1; background: rgb(20, 20, 22); box-shadow: rgba(0, 0, 0, 0.35) 0px 0.2cqw 0.5cqw;}
.site-content .dev-btn.ms{left: -0.72cqw; top: 14.6%; height: 3.4%; width: 0.9cqw; border-radius: 0.45cqw 0px 0px 0.45cqw;}
.site-content .dev-btn.vu{left: -0.72cqw; top: 22.2%; height: 6.9%; width: 0.9cqw; border-radius: 0.45cqw 0px 0px 0.45cqw;}
.site-content .dev-btn.vd{left: -0.72cqw; top: 30.6%; height: 6.9%; width: 0.9cqw; border-radius: 0.45cqw 0px 0px 0.45cqw;}
.site-content .dev-btn.pw{right: -0.72cqw; top: 25.6%; height: 9.8%; width: 0.9cqw; border-radius: 0px 0.45cqw 0.45cqw 0px;}
.site-content .devrow .dev:first-child{z-index: 1;}
.site-content .devrow .dev:last-child{z-index: 1;}
.site-content .devcap{display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin: clamp(14px, 2vh, 22px) 0px 0px;}
.site-content .devcap span{font-size: 12.5px; font-weight: 700; color: rgb(3, 105, 161); background: rgb(240, 249, 255); border: 1px solid rgb(213, 235, 249); border-radius: 999px; padding: 5px 12px;}
.site-content .pv-stage .pv-phone{width: clamp(140px, 24vh, 246px); height: auto;}
@media (max-width: 900px) {
.site-content .pv-stage .pv-phone{width: min(72vw, 260px);}
}
.site-content .qs-dev{display: flex; justify-content: center; width: 100%;}
.site-content .qs-dev .dev{height: min(42vh, 392px); width: auto; max-width: 100%;}
@media (max-width: 900px) {
.site-content .dev{height: auto; width: clamp(150px, 44vw, 210px);}
.site-content .qs-dev .dev{height: auto; width: 216px; max-width: 100%;}
}
.site-content .dl-sec{padding: 84px 0px 92px; background: var(--panel-alt);}
.site-content .dl{text-align: center;}
.site-content .dl h2{font-size: clamp(24px, 3vw, 36px); font-weight: 700; letter-spacing: -0.012em;}
.site-content .dl p{margin: 14px auto 0px; max-width: 46ch; color: var(--ink-soft); text-wrap: pretty;}
.site-content .dl-btns{display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 30px 0px 0px;}
.site-content .dl-btn{display: flex; align-items: center; gap: 12px; text-decoration: none; background: rgb(12, 43, 62); color: rgb(255, 255, 255); border-radius: 14px; padding: 13px 22px 13px 18px; min-width: 214px; transition: 0.18s;}
.site-content .dl-btn:hover{background: rgb(18, 58, 82); transform: translateY(-1px);}
.site-content .dl-btn svg{width: 24px; height: 24px; flex: 0 0 auto;}
.site-content .dl-btn .tx{text-align: left; line-height: 1.25;}
.site-content .dl-btn .tx small{display: block; font-size: 11.5px; font-weight: 700; color: rgb(159, 195, 214); letter-spacing: 0.04em;}
.site-content .dl-btn .tx b{font-size: 16px; font-weight: 800;}
.site-content .dl-note{margin-top: 18px; font-size: 13px; color: var(--muted);}
.site-content .final-sec{padding: 90px 0px;}
.site-content .final{background: var(--ai); color: rgb(234, 245, 240); border-radius: 24px; padding: 56px 48px; text-align: center;}
.site-content .final h2{font-size: clamp(24px, 3vw, 34px); font-weight: 800; color: rgb(255, 255, 255);}
.site-content .final p{margin: 14px auto 0px; max-width: 52ch; color: rgb(191, 216, 205); text-wrap: pretty;}
.site-content .final .hero-cta{justify-content: center;}
.site-content .final .btn-ghost{background: transparent; color: rgb(234, 245, 240); border-color: rgba(255, 255, 255, 0.35);}
.site-content .final .btn-ghost:hover{background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.6);}
.site-content footer{padding: 34px 0px 44px; color: var(--muted); font-size: 14px;}
.site-content .foot-in{display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;}
.site-content footer a{text-decoration: none; color: var(--ink-soft); font-weight: 600;}
.site-content footer a:hover{color: var(--brand-ink);}