:root { --ink:#172033; --muted:#627086; --paper:#f7f5ef; --card:#fff; --line:#ded9cf; --red:#e62117; --blue:#2563eb; --green:#167a58; --shadow:0 22px 65px rgba(23,32,51,.12); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:linear-gradient(135deg,#faf9f4 0%,#f1f5f9 100%); font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif; line-height:1.7; }
a { color:inherit; }
.wrap { width:min(1120px,calc(100% - 36px)); margin:auto; }
.site-nav { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:70px; }
.brand { color:var(--ink); font-size:15px; font-weight:900; letter-spacing:.08em; text-decoration:none; }
.brand small { display:block; color:var(--red); font-size:10px; letter-spacing:.18em; }
.back { color:var(--muted); font-size:14px; text-decoration:none; }
.hero { position:relative; display:grid; grid-template-columns:1.08fr .92fr; gap:36px; align-items:center; padding:64px 0 54px; }
.eyebrow { margin:0 0 12px; color:var(--accent); font-size:12px; font-weight:900; letter-spacing:.13em; }
h1,h2,h3,p { overflow-wrap:anywhere; }
h1 { max-width:760px; margin:0; font-size:clamp(40px,6vw,74px); line-height:1.06; letter-spacing:-.05em; }
.lead { max-width:670px; margin:22px 0 0; color:var(--muted); font-size:19px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 20px; border:1px solid var(--accent); border-radius:999px; background:var(--accent); color:#fff; font-weight:800; text-decoration:none; box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 25%,transparent); }
.button.secondary { border-color:var(--line); background:#fff; color:var(--ink); box-shadow:none; }
.note { margin:15px 0 0; color:var(--muted); font-size:13px; }
.product-window { position:relative; padding:13px; border:1px solid rgba(23,32,51,.12); border-radius:28px; background:#fff; box-shadow:var(--shadow); transform:rotate(1.7deg); }
.product-window::before { content:""; display:block; width:40px; height:7px; margin:0 0 10px 2px; border-radius:20px; background:linear-gradient(90deg,var(--accent) 0 33%,#f2bd36 33% 66%,#35a879 66%); }
.screen { padding:20px; border-radius:18px; background:var(--screen); }
.screen-head { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.product-mark { display:grid; width:38px; height:38px; place-items:center; border-radius:12px; background:var(--accent); color:#fff; font-size:13px; font-weight:900; letter-spacing:-.06em; }
.screen-head strong { display:block; font-size:13px; }.screen-head span { display:block; color:var(--muted); font-size:11px; }
.metric-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }.metric { min-height:74px; padding:12px; border:1px solid rgba(23,32,51,.08); border-radius:12px; background:rgba(255,255,255,.82); }.metric small { color:var(--muted); font-size:10px; }.metric b { display:block; margin-top:4px; font-size:20px; line-height:1.05; }
.chart { display:flex; align-items:end; gap:6px; height:72px; margin-top:12px; padding:10px; border-radius:12px; background:#fff; }.chart i { width:12%; border-radius:5px 5px 2px 2px; background:var(--accent); opacity:.82; }.chart i:nth-child(1){height:30%}.chart i:nth-child(2){height:58%}.chart i:nth-child(3){height:43%}.chart i:nth-child(4){height:76%}.chart i:nth-child(5){height:51%}.chart i:nth-child(6){height:92%}
.facts { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }.fact { padding:22px; background:var(--card); }.fact b { display:block; color:var(--accent); font-size:21px; }.fact span { display:block; margin-top:3px; color:var(--muted); font-size:13px; }
.content { display:grid; grid-template-columns:.78fr 1.22fr; gap:48px; padding:76px 0; }.section-label { color:var(--accent); font-size:12px; font-weight:900; letter-spacing:.13em; }.content h2 { margin:8px 0 0; font-size:clamp(28px,3.2vw,43px); line-height:1.18; letter-spacing:-.035em; }.content p { color:var(--muted); }.feature-list { display:grid; gap:1px; margin:0; padding:0; list-style:none; border:1px solid var(--line); background:var(--line); }.feature-list li { display:grid; grid-template-columns:42px 1fr; gap:14px; padding:20px; background:var(--card); }.feature-list strong { display:block; font-size:16px; }.feature-list span { display:block; margin-top:4px; color:var(--muted); font-size:14px; }.feature-no { display:grid; width:30px; height:30px; place-items:center; border-radius:50%; color:var(--accent); background:var(--screen); font-weight:900; font-size:12px; }
.flow { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 0 76px; }.flow article { padding:22px; border-top:3px solid var(--accent); background:rgba(255,255,255,.72); }.flow b { display:block; margin-bottom:8px; font-size:14px; }.flow p { margin:0; color:var(--muted); font-size:14px; }
.faq { padding:54px 0 78px; border-top:1px solid var(--line); }.faq h2 { margin:0 0 20px; font-size:30px; }.faq details { padding:16px 0; border-bottom:1px solid var(--line); }.faq summary { cursor:pointer; font-weight:800; }.faq p { max-width:760px; margin:10px 0 0; color:var(--muted); }
.cta { margin-bottom:68px; padding:38px; border-radius:22px; background:var(--ink); color:#fff; }.cta h2 { margin:0; font-size:clamp(27px,3vw,40px); line-height:1.2; }.cta p { margin:10px 0 22px; color:#c6d0df; }.cta .button { background:#fff; border-color:#fff; color:var(--ink); box-shadow:none; }
footer { padding:24px 0 42px; color:var(--muted); border-top:1px solid var(--line); font-size:13px; } footer a { color:var(--ink); }
@media (max-width:760px) { .wrap{width:min(100% - 28px,1120px)} .hero,.content{grid-template-columns:1fr;gap:26px}.hero{padding:38px 0}.product-window{max-width:500px;margin:auto;transform:none}.facts,.flow{grid-template-columns:1fr}.fact{padding:17px}.content{padding:54px 0}.cta{padding:26px}.lead{font-size:17px}h1{font-size:42px}.site-nav{min-height:62px} }

/* Passive Analytics product pages */
.passive-page { --night:#14243d; --blue-ink:#315b9d; --mist:#edf3f9; background:linear-gradient(140deg,#faf9f4 0%,#edf3fa 52%,#f9fbfc 100%); }
.passive-page::before { content:""; position:fixed; inset:0; z-index:-1; opacity:.38; pointer-events:none; background-image:linear-gradient(rgba(49,91,157,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(49,91,157,.07) 1px,transparent 1px); background-size:32px 32px; mask-image:linear-gradient(to bottom,#000,transparent 58%); }
.passive-nav-links { display:flex; align-items:center; gap:18px; margin-left:auto; }.passive-nav-links a { color:var(--muted); font-size:13px; font-weight:700; text-decoration:none; }.passive-nav-links a:hover,.passive-nav-links a[aria-current="page"] { color:var(--blue-ink); }.locale-switcher { display:flex; gap:4px; padding:4px; border:1px solid rgba(49,91,157,.18); border-radius:10px; background:rgba(255,255,255,.6); }.locale-switcher a { min-width:27px; padding:4px 5px; border-radius:6px; color:var(--muted); font-size:10px; font-weight:900; line-height:1; text-align:center; text-decoration:none; }.locale-switcher a:hover,.locale-switcher .is-active { color:#fff; background:var(--night); }
.passive-hero { display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; min-height:650px; padding:74px 0 62px; }.passive-copy h1 { max-width:800px; font-size:clamp(47px,6vw,78px); }.passive-copy .lead { max-width:650px; }.product-lockup { display:flex; align-items:center; gap:8px; margin-bottom:22px; color:var(--night); font-size:15px; font-weight:900; letter-spacing:.035em; }.product-lockup em { color:var(--muted); font-style:normal; font-weight:700; }.brand-glyph { display:inline-grid; width:32px; height:32px; place-items:center; border-radius:10px 10px 4px 10px; background:var(--night); color:#fff; font-family:Georgia,serif; font-size:18px; font-weight:900; box-shadow:5px 5px 0 rgba(49,91,157,.2); }.platform-icon { display:block; width:25px; height:25px; flex:none; }.button.pending { background:var(--night); border-color:var(--night); box-shadow:0 9px 24px rgba(20,36,61,.2); cursor:default; }.signal-console { overflow:hidden; position:relative; padding:18px; border:1px solid rgba(49,91,157,.23); border-radius:28px; background:linear-gradient(145deg,#fff,rgba(237,243,249,.92)); box-shadow:0 30px 80px rgba(20,36,61,.16); transform:rotate(1.2deg); }.signal-console::after { content:""; position:absolute; right:-55px; bottom:-65px; width:180px; height:180px; border:1px solid rgba(49,91,157,.2); border-radius:50%; box-shadow:0 0 0 24px rgba(49,91,157,.05),0 0 0 48px rgba(49,91,157,.035); }.console-top,.console-profile,.console-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; }.console-brand { display:flex; align-items:center; gap:10px; font-size:13px; }.live-dot { padding:4px 7px; border-radius:999px; color:#167a58; background:#e5f5ed; font-size:9px; font-weight:900; letter-spacing:.11em; }.console-profile { position:relative; z-index:1; justify-content:flex-start; margin-top:22px; padding:12px; border:1px solid rgba(49,91,157,.14); border-radius:14px; background:#f7faff; }.console-profile .platform-icon { margin-left:auto; }.avatar { display:grid; width:38px; height:38px; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(135deg,#5578b0,#1d3354); font-weight:900; }.console-profile b,.console-profile small { display:block; }.console-profile b { font-size:12px; }.console-profile small { color:var(--muted); font-size:10px; }.console-metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:12px; }.console-metrics div { padding:12px; border:1px solid rgba(49,91,157,.12); border-radius:13px; background:rgba(255,255,255,.8); }.console-metrics small,.console-metrics i { display:block; color:var(--muted); font-size:10px; font-style:normal; }.console-metrics b { display:block; margin:3px 0; color:var(--night); font-size:21px; line-height:1.1; }.console-metrics i { color:#23775b; }.signal-chart { display:flex; position:relative; z-index:1; align-items:flex-end; gap:7px; height:126px; margin-top:12px; padding:14px; border-radius:14px; background:linear-gradient(180deg,#eaf2fc,#f8fbff); }.signal-chart::before { content:""; position:absolute; inset:18px 14px; background:repeating-linear-gradient(to bottom,transparent 0 28px,rgba(49,91,157,.12) 29px 30px); }.signal-chart span { z-index:1; width:11%; height:var(--h); border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,#76a8ec,#315b9d); }.console-footer { position:relative; z-index:1; margin-top:13px; color:var(--muted); font-size:10px; }.console-footer b { color:var(--blue-ink); letter-spacing:.07em; }.passive-proof { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid rgba(49,91,157,.2); background:rgba(255,255,255,.65); }.passive-proof div { padding:20px; border-right:1px solid rgba(49,91,157,.16); }.passive-proof div:last-child { border:0; }.passive-proof b,.passive-proof span { display:block; }.passive-proof b { color:var(--blue-ink); font-size:16px; }.passive-proof span { color:var(--muted); font-size:12px; }.passive-section { padding:96px 0; }.intro-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:72px; }.section-label { margin:0 0 9px; color:var(--blue-ink); font-size:11px; font-weight:900; letter-spacing:.15em; }.intro-grid h2,.section-headline h2,.data-copy h2,.boundary h2 { margin:0; color:var(--night); font-size:clamp(31px,4vw,54px); line-height:1.12; letter-spacing:-.045em; }.intro-grid p:not(.section-label),.data-copy p { color:var(--muted); }.steps { display:grid; gap:1px; margin:0; padding:0; list-style:none; border:1px solid rgba(49,91,157,.2); background:rgba(49,91,157,.18); }.steps li { display:grid; grid-template-columns:62px 1fr; gap:12px; padding:20px; background:rgba(255,255,255,.78); }.steps li>span { width:36px; height:36px; padding-top:8px; border-radius:50%; color:var(--blue-ink); background:var(--mist); text-align:center; font-size:12px; font-weight:900; }.steps b { color:var(--night); }.steps p { margin:4px 0 0; color:var(--muted); font-size:14px; }.section-headline { display:flex; justify-content:space-between; gap:38px; align-items:end; }.section-headline>p { max-width:405px; margin:0; color:var(--muted); }.feature-matrix { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:34px; }.feature-matrix article { min-height:330px; padding:23px; border:1px solid rgba(49,91,157,.18); border-radius:17px; background:rgba(255,255,255,.78); transition:transform .2s ease,box-shadow .2s ease; }.feature-matrix article:hover { box-shadow:0 20px 40px rgba(20,36,61,.1); transform:translateY(-4px); }.feature-icon { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; color:var(--blue-ink); background:var(--mist); font-size:18px; }.feature-matrix h3 { margin:20px 0 8px; color:var(--night); font-size:17px; }.feature-matrix p { min-height:96px; margin:0; color:var(--muted); font-size:13px; }.feature-matrix ul { margin:14px 0 0; padding:0; list-style:none; }.feature-matrix li { margin-top:7px; color:var(--night); font-size:12px; }.feature-matrix li::before { content:"/"; margin-right:7px; color:var(--blue-ink); font-weight:900; }.data-section { display:grid; grid-template-columns:.72fr 1.28fr; gap:74px; align-items:center; }.text-link,.platform-split a { color:var(--blue-ink); font-size:14px; font-weight:900; text-decoration:none; }.data-table { overflow:hidden; border:1px solid rgba(49,91,157,.18); border-radius:17px; background:rgba(255,255,255,.77); }.data-table [role="row"] { display:grid; grid-template-columns:.56fr 1fr 1fr; gap:18px; padding:15px 18px; border-bottom:1px solid rgba(49,91,157,.14); color:var(--muted); font-size:12px; }.data-table [role="row"]:last-child { border:0; }.data-table .table-head { color:#fff; background:var(--night); font-weight:900; }.data-table b { color:var(--night); }.platform-split { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding-top:0; }.platform-split article { min-height:245px; padding:31px; border-radius:20px; }.ig-panel { color:#fff; background:linear-gradient(135deg,#4e278c,#db397b 58%,#f29b49); }.tt-panel { color:#fff; background:linear-gradient(135deg,#111b2d,#243d58); }.platform-title { display:flex; align-items:center; gap:10px; }.platform-title h2 { margin:0; font-size:28px; }.platform-split p { max-width:490px; color:rgba(255,255,255,.84); }.platform-split a { color:#fff; }.boundary { display:grid; grid-template-columns:.9fr 1.1fr; gap:75px; border-top:1px solid rgba(49,91,157,.18); }.boundary-list { display:grid; gap:1px; border:1px solid rgba(49,91,157,.18); background:rgba(49,91,157,.17); }.boundary-list p { margin:0; padding:20px; color:var(--muted); background:rgba(255,255,255,.78); font-size:14px; }.boundary-list b { display:block; margin-bottom:4px; color:var(--night); }.release { display:flex; justify-content:space-between; align-items:center; gap:35px; margin-bottom:76px; padding:36px; border-radius:22px; color:#fff; background:var(--night); }.release h2 { max-width:650px; margin:0; font-size:clamp(26px,3.3vw,42px); line-height:1.15; }.release p { max-width:690px; margin:12px 0 0; color:#c8d7ec; }.release .section-label { color:#91b8ef; }.release .button { flex:none; }.updates-main { padding:52px 0 78px; }.updates-hero { max-width:780px; padding:24px 0 60px; }.updates-hero h1 { margin:8px 0 12px; color:var(--night); font-size:clamp(52px,8vw,92px); }.updates-hero p:last-child { max-width:620px; color:var(--muted); }.release-banner { display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:16px; padding:16px 19px; border:1px solid rgba(49,91,157,.22); border-radius:15px; background:#f5f9ff; }.release-banner span { color:var(--blue-ink); font-size:11px; font-weight:900; letter-spacing:.1em; }.release-banner b { color:var(--night); font-size:22px; }.release-banner p { margin:0; color:var(--muted); font-size:13px; }.release-banner a { color:var(--blue-ink); font-size:13px; font-weight:900; text-decoration:none; }.timeline { margin-top:45px; }.release-entry { display:grid; grid-template-columns:190px 1fr; gap:42px; padding:34px 0; border-top:1px solid rgba(49,91,157,.19); }.release-entry.current { border-top:3px solid var(--blue-ink); }.release-meta { display:grid; align-content:start; gap:4px; }.release-meta span { color:var(--blue-ink); font-size:11px; font-weight:900; letter-spacing:.1em; }.release-meta b { color:var(--night); font-size:27px; }.release-meta time { color:var(--muted); font-size:12px; }.release-entry h2 { margin:0; color:var(--night); font-size:27px; line-height:1.25; }.release-entry p { max-width:730px; margin:10px 0 0; color:var(--muted); }.release-entry code { padding:1px 4px; border-radius:4px; color:var(--blue-ink); background:var(--mist); }.release-entry ul { margin:14px 0 0; padding-left:19px; color:var(--muted); font-size:14px; }.release-entry li+li { margin-top:5px; }.updates-note { margin-top:34px; padding:27px; border-radius:16px; background:rgba(255,255,255,.7); }.updates-note h2 { margin:0; color:var(--night); font-size:21px; }.updates-note p { margin-bottom:0; color:var(--muted); }
.data-table [role="row"] { grid-template-columns:minmax(92px,.56fr) repeat(3,minmax(150px,1fr)); }
.platform-split { grid-template-columns:repeat(3,minmax(0,1fr)); }
.threads-panel { color:#fff; background:linear-gradient(135deg,#171717,#3a3a3a 68%,#a76033); }
@media (max-width:860px) { .passive-nav-links{display:none}.passive-hero,.intro-grid,.data-section,.boundary{grid-template-columns:1fr;gap:35px}.passive-hero{min-height:0;padding:50px 0}.signal-console{max-width:520px;margin:auto;transform:none}.passive-proof{grid-template-columns:1fr 1fr}.passive-proof div:nth-child(2){border-right:0}.passive-proof div:nth-child(-n+2){border-bottom:1px solid rgba(49,91,157,.16)}.feature-matrix{grid-template-columns:1fr 1fr}.feature-matrix p{min-height:0}.section-headline,.release{align-items:start;flex-direction:column}.platform-split{grid-template-columns:1fr}.release-entry{grid-template-columns:1fr;gap:15px}.release-meta{grid-template-columns:auto auto 1fr;align-items:baseline;gap:12px}.release-meta b{font-size:22px}.release-banner{grid-template-columns:1fr 1fr}.release-banner p{grid-column:1/-1}.release-banner a{grid-column:1/-1} }
@media (max-width:560px) { .passive-copy h1{font-size:47px}.product-lockup{font-size:12px}.product-lockup em{display:none}.passive-proof,.feature-matrix{grid-template-columns:1fr}.passive-proof div,.passive-proof div:nth-child(2){border-right:0;border-bottom:1px solid rgba(49,91,157,.16)}.passive-proof div:last-child{border-bottom:0}.data-table{overflow:auto}.data-table [role="row"]{min-width:760px}.passive-section{padding:66px 0}.release{margin-bottom:52px;padding:25px}.updates-main{padding-top:25px}.updates-hero{padding-bottom:38px}.site-nav .back{font-size:12px} }

.product-shot { margin:0; overflow:hidden; border:1px solid rgba(49,91,157,.24); border-radius:24px; background:var(--night); box-shadow:0 28px 70px rgba(20,36,61,.16); }.product-shot img { display:block; width:100%; height:auto; }.product-shot figcaption { padding:10px 14px; color:#b9cbe2; background:var(--night); font-size:11px; }.hero-shot { max-width:430px; justify-self:end; transform:rotate(1.2deg); }.interface-proof { display:grid; grid-template-columns:.72fr 1.28fr; gap:68px; align-items:center; padding:0 0 96px; }.interface-proof h2 { margin:0; color:var(--night); font-size:clamp(31px,4vw,52px); line-height:1.12; letter-spacing:-.045em; }.interface-proof p:not(.section-label) { max-width:440px; color:var(--muted); }.settings-shot { max-height:430px; }.settings-shot img { transform:translateY(-1px); }
.product-gallery { padding:0 0 96px; }.gallery-head { display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:end; margin-bottom:28px; }.gallery-head h2 { margin:0; color:var(--night); font-size:clamp(31px,4vw,52px); line-height:1.12; letter-spacing:-.045em; }.gallery-head p:last-child { max-width:470px; margin:0; color:var(--muted); }.gallery-head .section-label { grid-column:1/-1; margin-bottom:-18px; }.gallery-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.gallery-grid .product-shot { border-radius:18px; }
@media (max-width:860px) { .hero-shot { justify-self:center; transform:none; }.interface-proof { grid-template-columns:1fr; gap:28px; padding-bottom:66px; } }
@media (max-width:860px) { .product-gallery { padding-bottom:66px; }.gallery-head,.gallery-grid { grid-template-columns:1fr; }.gallery-head .section-label { margin-bottom:0; }.gallery-head { gap:14px; } }