:root { --paper:#f8f8f2; --ink:#17253e; --muted:#657282; --line:#dce3e2; --mist:#dfeef4; --coral:#dc7958; --mint:#8fbeae; --plum:#75608e; --white:#fffefa; --serif: "Iowan Old Style", "Noto Serif SC", "Songti SC", Georgia, serif; --sans: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); } a { color:inherit; text-decoration:none; } button { font:inherit; border:0; cursor:pointer; } .skip-link { position:fixed; top:-60px; left:18px; z-index:20; padding:10px 14px; border-radius:8px; background:var(--ink); color:white; }.skip-link:focus { top:18px; }
.site-header { width:min(1320px, calc(100% - 52px)); height:90px; margin:auto; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:3; }.brand { display:inline-flex; align-items:center; gap:9px; font-size:20px; font-weight:800; letter-spacing:-.7px; }.brand-mark { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:var(--coral); color:white; font-family:Georgia,serif; font-size:19px; font-weight:bold; }.site-header nav { display:flex; gap:31px; margin-left:90px; }.site-header nav a, footer p, footer>a:last-child { color:var(--muted); font-size:12px; }.site-header nav a:hover, footer>a:last-child:hover { color:var(--ink); }.header-cta { padding:11px 16px; border-radius:9px; background:var(--ink); color:white; font-size:12px; font-weight:700; }.header-cta span { color:#bad8e6; margin-left:5px; }
.section { width:min(1180px, calc(100% - 52px)); margin:0 auto; }.hero { min-height:690px; padding:90px 0 110px; display:grid; grid-template-columns:.82fr 1.18fr; align-items:center; gap:50px; }.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 19px; color:#657f92; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }.eyebrow i { width:7px; height:7px; background:var(--coral); border-radius:50%; box-shadow:13px 0 0 #9ecbbc; }.hero h1, h2 { margin:0; font-family:var(--serif); font-weight:500; letter-spacing:-.055em; }.hero h1 { font-size:clamp(48px,5.4vw,78px); line-height:.98; }.hero h1 em { font-style:normal; color:#385c74; }.hero-lede { max-width:420px; margin:28px 0; color:#536776; font-size:15px; line-height:1.85; }.hero-actions { display:flex; align-items:center; gap:23px; }.button { display:inline-flex; align-items:center; justify-content:center; gap:13px; min-height:46px; padding:0 18px; border-radius:9px; font-size:12px; font-weight:800; transition:transform .2s, box-shadow .2s; }.button:hover { transform:translateY(-2px); }.button.dark { background:var(--ink); color:white; box-shadow:0 9px 19px #17253e20; }.button.dark span { color:#d2e3ed; }.text-link { color:#486a82; font-size:12px; font-weight:800; }.text-link span { margin-left:5px; }.hero-note { display:flex; align-items:center; gap:8px; margin-top:46px; color:#84909a; font-size:10px; }.dot { width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px #8fbeae2e; }
.hero-stage { height:505px; position:relative; padding:42px 0 0 38px; }.hero-stage:before { content:""; position:absolute; inset:0 0 0 16%; border-radius:34px; background:var(--mist); }.stage-label { position:absolute; top:25px; right:26px; z-index:1; color:#547084; font-size:9px; font-weight:800; letter-spacing:.1em; }.stage-label span { display:block; margin-top:5px; color:#7c9899; font-size:8px; text-align:right; }.desktop-shot-wrap { position:relative; z-index:1; width:106%; height:447px; overflow:hidden; border:1px solid #ffffffcc; border-radius:16px; background:#eef4f6; box-shadow:0 25px 45px #23425325; }.desktop-shot-wrap img { width:100%; height:100%; object-fit:cover; object-position:top left; }.memory-line { position:absolute; z-index:2; height:1px; background:#7194a8; }.hero-line { width:155px; right:-36px; top:172px; transform:rotate(-34deg); }.memory-line b, .memory-line i { position:absolute; width:9px; height:9px; border-radius:50%; top:-4px; border:2px solid var(--paper); }.memory-line b { left:-2px; background:var(--coral); }.memory-line i:nth-of-type(1) { left:48px; background:var(--mint); }.memory-line i:nth-of-type(2) { left:95px; background:#88b9d7; }.memory-line i:nth-of-type(3) { right:-2px; background:var(--plum); }.proof-chip { position:absolute; z-index:3; display:flex; align-items:center; gap:9px; padding:10px 13px; border:1px solid #e4e9e7; border-radius:9px; background:#fffefa; box-shadow:0 10px 21px #28485816; }.chip-one { left:-9px; bottom:25px; }.chip-two { right:-25px; top:273px; }.chip-icon { width:24px; height:24px; display:grid; place-items:center; border-radius:7px; font-size:12px; font-weight:bold; }.chip-icon.coral { background:#fae2d8; color:#b65032; }.chip-icon.mint { background:#dcefe7; color:#3d826d; }.proof-chip p { margin:0; }.proof-chip b,.proof-chip small { display:block; }.proof-chip b { font-size:10px; }.proof-chip small { margin-top:2px; color:#7c8b95; font-size:8px; }
.principle-band { min-height:86px; display:flex; align-items:center; justify-content:center; gap:23px; padding:18px 26px; background:#e9f1f3; color:#31556c; font-family:var(--serif); font-size:20px; letter-spacing:-.03em; }.principle-band p { margin:0; }.principle-band span { width:32px; height:1px; background:#89aabd; }
.work { padding:140px 0; display:grid; grid-template-columns:.92fr 1.08fr; gap:105px; }.section-intro h2,.section-head h2,.privacy h2,.closing h2 { font-size:clamp(38px,4vw,57px); line-height:1.05; }.section-intro>p:last-child { max-width:390px; margin:26px 0 0; color:var(--muted); font-size:14px; line-height:1.9; }.work-steps { border-top:1px solid var(--line); }.step { min-height:152px; padding:25px 0 22px; display:grid; grid-template-columns:60px 1fr; gap:17px; border-bottom:1px solid var(--line); }.step-no { padding-top:4px; color:#7c8f9c; font:12px/1 ui-monospace,monospace; }.step-kind { display:inline-block; padding:5px 8px; border-radius:20px; font-size:9px; font-weight:800; }.step-kind.blue { background:#e0eff5; color:#39718d; }.step-kind.coral { background:#fae6de; color:#b95e43; }.step-kind.plum { background:#eee8f7; color:#6e5985; }.step h3 { margin:12px 0 7px; font-size:18px; letter-spacing:-.04em; }.step p { max-width:390px; margin:0; color:#6d7c87; font-size:12px; line-height:1.7; }
.moments { padding:112px 0 145px; border-top:1px solid var(--line); }.section-head { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:48px; }.section-head>p { max-width:292px; margin:0 0 6px; color:#637582; font-size:13px; line-height:1.75; }.product-grid { display:grid; grid-template-columns:1fr .93fr 1fr; gap:15px; align-items:stretch; }.product-card { min-height:510px; overflow:hidden; border-radius:16px; padding:24px; position:relative; }.card-kicker { display:flex; gap:9px; color:#78909d; font-size:10px; font-weight:800; letter-spacing:.08em; }.card-kicker span { color:var(--coral); }.product-card h3 { margin:23px 0 14px; font-family:var(--serif); font-size:29px; font-weight:500; letter-spacing:-.05em; line-height:1.08; }.product-card>p { max-width:290px; margin:0; color:#657681; font-size:12px; line-height:1.75; }.story-card { background:#dfeef4; }.mini-timeline { position:absolute; right:24px; bottom:22px; left:24px; padding-top:15px; border-top:1px solid #bfcfd5; }.mini-timeline span { display:block; padding:9px 0; border-bottom:1px solid #c8d8dd; color:#5b7380; font:10px ui-monospace,monospace; }.mini-timeline i { display:inline-block; width:6px; height:6px; margin:0 8px; border-radius:50%; }.blue-dot { background:#77aeca; }.coral-dot { background:var(--coral); }.plum-dot { background:var(--plum); }.mobile-card { background:#f2eee8; }.mobile-card img { position:absolute; width:240px; max-width:none; right:21px; bottom:-210px; border:6px solid var(--ink); border-radius:29px; box-shadow:0 20px 30px #17253e28; }.action-card { background:#f0eafa; }.action-symbol { width:42px; height:42px; display:grid; place-items:center; margin-top:21px; border-radius:50%; background:var(--plum); color:white; font-size:20px; }.approval { position:absolute; right:22px; bottom:22px; left:22px; padding:14px; border:1px solid #ded2ec; border-radius:10px; background:#fffefa; }.approval span { color:#887b98; font-size:8px; }.approval strong { display:block; margin:7px 0 11px; font-size:12px; line-height:1.4; }.approval div { display:flex; gap:6px; }.approval button { padding:7px 8px; border-radius:6px; background:#f0edf2; color:#776d81; font-size:9px; }.approval button:last-child { background:var(--ink); color:white; }
.privacy { padding-bottom:132px; }.privacy-panel { min-height:490px; display:grid; grid-template-columns:1fr .82fr; overflow:hidden; border-radius:20px; background:var(--ink); color:white; }.privacy-copy { padding:62px 68px; position:relative; z-index:2; }.eyebrow.light { color:#b7d3df; }.privacy h2 { color:#fffefa; }.privacy-copy>p:not(.eyebrow) { max-width:430px; margin:26px 0 27px; color:#c6d6de; font-size:13px; line-height:1.8; }.light-button { color:var(--ink); background:#fffefa; }.privacy-orbit { position:relative; min-height:430px; margin:auto; width:420px; height:430px; }.orbit-haze { position:absolute; inset:16px; border-radius:50%; background:radial-gradient(circle at center,#4a698430 0 17%,transparent 48%),radial-gradient(circle at 63% 36%,#b5d6e215 0 2%,transparent 24%); filter:blur(1px); }.orbit-track { position:absolute; z-index:1; top:50%; left:50%; border:1px solid #b6d5e52e; border-radius:50%; }.orbit-track.outer { width:352px; height:270px; transform:translate(-50%,-50%) rotate(-21deg); }.orbit-track.inner { width:218px; height:306px; transform:translate(-50%,-50%) rotate(42deg); border-color:#f2d6cb2b; }.orbit-center { position:absolute; z-index:4; top:50%; left:50%; width:132px; height:132px; display:grid; align-content:center; justify-items:center; transform:translate(-50%,-50%); border:1px solid #fffefa; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fffefa,#e7edf0); box-shadow:0 0 0 10px #ffffff08,0 18px 45px #00000032; color:var(--ink); text-align:center; }.orbit-center span { color:#6d8291; font-size:8px; font-weight:800; letter-spacing:.08em; }.orbit-center b { margin-top:4px; font-family:var(--serif); font-size:25px; font-weight:500; line-height:.96; letter-spacing:-.06em; }.orbit-center i { position:absolute; right:15px; bottom:15px; color:var(--coral); font-style:normal; font-size:12px; }.memory-satellite { position:absolute; z-index:3; display:flex; align-items:center; gap:8px; min-width:126px; padding:9px 10px; border:1px solid #ffffff24; border-radius:10px; background:#ffffff0d; backdrop-filter:blur(8px); box-shadow:0 11px 23px #00000013; }.memory-satellite small,.memory-satellite strong { display:block; white-space:nowrap; }.memory-satellite small { color:#b9cad4; font-size:8px; }.memory-satellite strong { margin-top:2px; color:#f8fbf9; font-size:10px; }.satellite-dot { width:7px; height:7px; flex:0 0 7px; border-radius:50%; }.memory-satellite.device { top:59px; right:25px; }.memory-satellite.meeting { bottom:67px; left:0; }.memory-satellite.image { top:247px; right:-7px; }.memory-satellite.device .satellite-dot { background:#9bc9df; box-shadow:0 0 0 4px #9bc9df16; }.memory-satellite.meeting .satellite-dot { background:var(--coral); box-shadow:0 0 0 4px #dc79581e; }.memory-satellite.image .satellite-dot { background:var(--mint); box-shadow:0 0 0 4px #8fbeae1f; }.orbit-spark { position:absolute; z-index:2; width:6px; height:6px; border-radius:50%; box-shadow:0 0 0 4px #ffffff08; }.spark-one { top:91px; left:60px; background:var(--coral); }.spark-two { top:188px; right:27px; background:#aed2e4; }.spark-three { bottom:93px; right:84px; background:var(--mint); }
.closing { padding:8px 0 135px; text-align:center; }.closing .eyebrow { justify-content:center; }.closing h2 { font-size:clamp(44px,5vw,70px); }.closing>p:not(.eyebrow) { margin:23px auto 30px; color:#60737f; font-size:14px; }.coral-button { background:var(--coral); color:white; } footer { width:min(1180px, calc(100% - 52px)); min-height:98px; margin:auto; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); } footer .brand { font-size:17px; } footer .brand-mark { width:24px; height:24px; font-size:16px; border-radius:7px; } footer p { margin:0; }.toast { position:fixed; z-index:20; right:22px; bottom:22px; padding:11px 14px; border-radius:9px; background:var(--ink); color:white; font-size:11px; transform:translateY(20px); opacity:0; transition:.25s; }.toast.visible { opacity:1; transform:translateY(0); }
.reveal { opacity:0; transform:translateY(15px); transition:opacity .65s ease, transform .65s ease; }.reveal.in { opacity:1; transform:none; } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.reveal { opacity:1; transform:none; transition:none; } * { transition:none!important; } }
@media (max-width:900px) { .site-header { width:min(100% - 36px, 680px); height:73px; }.site-header nav { display:none; }.hero { width:min(100% - 36px, 680px); min-height:0; padding:55px 0 80px; grid-template-columns:1fr; gap:45px; }.hero-stage { height:450px; padding:35px 0 0 20px; }.hero-stage:before { left:5%; }.desktop-shot-wrap { width:105%; height:390px; }.chip-two { display:none; }.work { width:min(100% - 36px, 680px); padding:90px 0; grid-template-columns:1fr; gap:46px; }.moments { width:min(100% - 36px, 680px); padding:80px 0; }.section-head { display:block; }.section-head>p { margin-top:20px; }.product-grid { grid-template-columns:1fr 1fr; }.action-card { grid-column:span 2; min-height:425px; }.privacy { width:min(100% - 36px, 680px); padding-bottom:85px; }.privacy-panel { grid-template-columns:1fr; }.privacy-copy { padding:50px 42px; }.privacy-orbit { min-height:330px; transform:scale(.85); margin-top:-20px; }.closing { width:min(100% - 36px, 680px); padding-bottom:90px; } footer { width:min(100% - 36px, 680px); } }
@media (max-width:580px) { .section,.hero,.work,.moments,.privacy,.closing { width:calc(100% - 32px); }.header-cta { padding:9px 12px; font-size:11px; }.hero { padding-top:40px; }.hero h1 { font-size:51px; }.hero-lede { font-size:13px; }.hero-actions { align-items:flex-start; flex-direction:column; gap:15px; }.hero-stage { height:305px; padding:29px 0 0 12px; }.hero-stage:before { border-radius:23px; }.desktop-shot-wrap { width:100%; height:266px; border-radius:10px; }.stage-label,.proof-chip,.hero-line { display:none; }.principle-band { display:block; padding:22px 30px; text-align:center; font-size:17px; line-height:1.35; }.principle-band span { display:block; margin:10px auto; }.section-intro h2,.section-head h2,.privacy h2 { font-size:40px; }.product-grid { grid-template-columns:1fr; }.product-card { min-height:425px; }.action-card { grid-column:auto; }.mobile-card img { width:220px; right:17px; bottom:-205px; }.privacy-copy { padding:43px 28px 30px; }.privacy-orbit { width:320px; transform:scale(.78); transform-origin:top center; margin-top:-22px; margin-bottom:-48px; }.closing h2 { font-size:49px; } footer { min-height:135px; flex-wrap:wrap; gap:8px 20px; padding:20px 0; } footer p { width:100%; order:3; } }

/* Memory constellation: each point names a real, user-authorized moment. */
.memory-satellite { min-width:0; padding:8px 9px; gap:7px; }
.satellite-icon { width:22px; height:22px; flex:0 0 22px; display:grid; place-items:center; border-radius:7px; font-size:11px; font-weight:800; }
.memory-satellite.device { top:33px; left:16px; right:auto; }.memory-satellite.device .satellite-icon { background:#dcecf4; color:#39728e; }
.memory-satellite.meeting { top:70px; right:8px; bottom:auto; left:auto; }.memory-satellite.meeting .satellite-icon { background:#fae3da; color:#ba5d42; }
.memory-satellite.image { top:218px; right:auto; left:-4px; }.memory-satellite.image .satellite-icon { background:#deefe7; color:#3a806e; }
.memory-satellite.audio { right:0; bottom:38px; }.memory-satellite.audio .satellite-icon { background:#eee7f8; color:#70598a; }
.memory-satellite.video { right:-4px; bottom:129px; }.memory-satellite.video .satellite-icon { background:#f3e6d9; color:#ac6b3d; }
.memory-satellite strong { font-size:9px; }.memory-satellite small { font-size:7px; }