/* 首页与已采用样张共用布局；旧子页继续使用 styles.css。 */
.preview-note { background:#edf2f8; color:var(--ds-muted); font-size:12px}
.preview-note .ds-container { display:flex; justify-content:space-between; align-items:center; min-height:34px; gap:16px}
.preview-note a { text-decoration:none}

.skip-link { position:absolute; top:8px; left:8px; z-index:10; transform:translateY(-150%)}
.skip-link:focus { transform:none}

.site-header { display:flex; justify-content:space-between; align-items:center; min-height:88px; gap:24px}
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:750; font-size:22px; letter-spacing:-.8px}
.brand-dot { color:var(--ds-accent); margin-left:-8px}
.brand-symbol { position:relative; display:inline-flex; width:27px; height:30px; margin-right:2px; align-items:center}
.brand-symbol i { position:absolute; width:15px; height:20px; border:2.5px solid var(--ds-accent); border-radius:9px; transform:rotate(35deg)}
.brand-symbol i:last-child { left:10px; transform:rotate(-35deg)}

.site-header nav { display:flex; align-items:center; gap:32px; font-size:14px}
.site-header nav a { text-decoration:none; color:var(--ds-muted)}
.site-header nav a:hover { color:var(--ds-accent)}
.site-header nav .nav-lab { color:var(--ds-ink)}

.hero { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:48px; padding-block:76px 96px}
.eyebrow { font-size:13px; font-weight:600; color:var(--ds-muted); margin:0 0 20px; letter-spacing:.03em}
.status-dot { display:inline-block; width:7px; height:7px; background:var(--ds-accent); border-radius:50%; margin-right:8px; vertical-align:1px}
h1 { font-size:var(--ds-type-display); line-height:1.18; letter-spacing:-.055em; margin:0; font-weight:780}
h1 span { color:var(--ds-accent)}
.hero-description { color:var(--ds-muted); font-size:16px; line-height:1.9; margin:28px 0 32px}
.hero-actions { display:flex; flex-wrap:wrap; gap:12px}
.hero-footnote { font-size:12px; color:var(--ds-muted); margin:24px 0 0}

.idea-scene { min-height:390px; position:relative; border-radius:40px; background:linear-gradient(135deg,#e4efff,#edf5ff 65%,#f1f1ff)}
.scene-grid { position:absolute; inset:0; border-radius:inherit; opacity:.34; background-image:linear-gradient(#b5cae9 1px,transparent 1px),linear-gradient(90deg,#b5cae9 1px,transparent 1px); background-size:36px 36px; mask-image:linear-gradient(transparent,black 60%,transparent)}
.scene-caption { position:absolute; top:24px; left:28px; color:#607fa5; font-size:12px}
.idea-note { position:absolute; top:64px; left:-12px; width:238px; padding:25px 24px 18px; background:#fff9e8; border:1px solid #eee5cd; border-radius:16px; box-shadow:0 10px 22px #52677e0d; transform:rotate(-7deg)}
.note-pin { position:absolute; width:9px; height:9px; top:9px; left:50%; border-radius:50%; background:#d4b676}
.tiny-label { font-size:10px; color:var(--ds-muted); font-weight:600}
.idea-note p { font-size:17px; font-weight:600; line-height:1.6; margin:12px 0 16px}
.note-signature { font-size:10px; color:#998e71}

.scene-window { position:absolute; top:127px; right:-6px; width:305px; background:#ffffffed; border:1px solid white; border-radius:18px; box-shadow:0 20px 40px #43689519; transform:rotate(3deg)}
.scene-bar { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--ds-border); font-size:10px; color:var(--ds-muted)}
.window-dots { display:flex; gap:4px}
.window-dots i { width:5px; height:5px; border-radius:50%; background:#ced6e0}
.scene-content { padding:20px 24px}
.agent-avatar { display:inline-flex; align-items:center; justify-content:center; gap:7px; width:42px; height:42px; border-radius:15px; background:var(--ds-accent-soft)}
.agent-avatar i { width:5px; height:9px; border-radius:3px; background:var(--ds-accent)}
.scene-title { font-weight:650; margin:10px 0 2px; font-size:16px}
.scene-subtitle { margin:0; color:var(--ds-muted); font-size:10px}
.scene-message { margin-top:16px; background:#f1f5fb; border-radius:8px; padding:10px 12px; font-size:11px}
.scene-lines { display:flex; flex-direction:column; gap:6px; margin-top:14px}
.scene-lines i { height:4px; width:74%; border-radius:8px; background:#e7edf5}
.scene-lines i:last-child { width:48%}
.scene-tag { position:absolute; bottom:20px; left:28px; display:flex; align-items:center; gap:8px; font-size:11px; color:#496988}
.scene-tag>span { width:22px; height:22px; display:grid; place-items:center; background:white; border-radius:7px; color:var(--ds-accent)}

.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:28px}
.section-heading .eyebrow { margin-bottom:8px}
h2 { font-size:var(--ds-type-title); line-height:1.35; letter-spacing:-.03em; margin:0}
.text-link { display:inline-flex; align-items:center; gap:12px; color:var(--ds-accent); text-decoration:none; font-size:14px; font-weight:600}
.text-link:hover { text-decoration:underline}
.specimen-card { display:grid; grid-template-columns:1fr 1.6fr; gap:48px; padding:48px; align-items:center}
.pill { display:inline-flex; color:var(--ds-accent); background:var(--ds-accent-soft); border-radius:100px; padding:4px 12px; font-size:11px; font-weight:600}
.specimen-copy h3 { margin:18px 0; font-size:34px; line-height:1.3; letter-spacing:-.03em}
.specimen-copy p { color:var(--ds-muted); font-size:14px; line-height:1.9; margin:0 0 24px}
.quiet-note { display:block; font-size:10px; color:var(--ds-muted); margin-top:16px}
.sample-gallery { display:grid; grid-template-columns:1fr 1fr; gap:16px}
.sample { min-width:0; display:block; border:1px solid var(--ds-border); border-radius:14px; background:white; overflow:hidden; text-decoration:none}
.sample:first-child { grid-column:1/-1}
.sample-image { aspect-ratio:1.85; background:#edf1f6; overflow:hidden}
.sample:first-child .sample-image { aspect-ratio:2.7}
.sample img { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform var(--ds-motion)}
.sample:hover img { transform:scale(1.025)}
.sample>span { display:flex; justify-content:space-between; padding:10px 14px; font-size:11px; font-weight:550}
.sample i { color:var(--ds-muted); font-style:normal}
.source-note { margin:12px 8px 0; color:var(--ds-muted); font-size:10px}

.projects-section { padding-top:80px; scroll-margin-top:24px}
.section-aside { font-size:12px; color:var(--ds-muted)}
.product-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px}
.product-card { overflow:hidden; display:flex; flex-direction:column}
.product-copy { padding:36px 36px 28px}
.product-topline { display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:11px; color:var(--ds-muted)}
.development-status { padding:3px 8px; border:1px solid var(--ds-border); border-radius:100px; font-size:10px}
.product-copy h3 { margin:18px 0 8px; font-size:34px; line-height:1.2; letter-spacing:-.04em}
.product-summary { margin:0 0 12px; font-weight:600; font-size:16px}
.product-description { color:var(--ds-muted); font-size:13px; line-height:1.9; margin:0 0 20px}

.companion-demo { background:var(--ds-warm); padding:24px 24px 14px; margin-top:auto}
.demo-toolbar { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:16px; font-size:10px; color:#897361}
.demo-tabs { display:flex; gap:4px}
.demo-tabs button { border:1px solid transparent; padding:5px 10px; color:#846e5c; border-radius:7px; background:transparent; font-size:10px; cursor:pointer; min-height:32px}
.demo-tabs button[aria-pressed="true"] { background:white; border-color:#e9ded4; color:var(--ds-ink)}
.companion-window { background:white; border:1px solid #ebdfd5; border-radius:14px; overflow:hidden; box-shadow:0 12px 32px #81654c0a}
.demo-window-bar { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--ds-border); font-size:10px}
.demo-window-label { margin-left:auto; color:var(--ds-muted); font-size:9px}
.demo-conversation { padding:20px; height:252px}
.demo-person { display:flex; align-items:center; gap:8px; font-size:10px; color:var(--ds-muted); margin-bottom:20px}
.small-avatar { display:grid; place-items:center; width:23px; height:23px; border-radius:8px; color:#94643b; background:#fff0de; font-size:12px; font-weight:600}
.demo-user { margin:0 0 14px 40px; padding:9px 12px; background:var(--ds-accent-soft); border-radius:10px 10px 2px 10px; font-size:11px; line-height:1.65}
.demo-agent { font-size:11px; line-height:1.9; min-height:64px; margin:0 14px 14px 0}
.demo-context { display:flex; gap:6px; align-items:center; color:var(--ds-muted); font-size:9px}
.context-dot { width:4px; height:4px; border-radius:50%; background:#c0a07a; flex-shrink:0}
.demo-note { color:#897361; font-size:9px; text-align:center; margin:12px 0 0}

.bridge-demo { position:relative; min-height:364px; background:var(--ds-cool); display:flex; align-items:center; justify-content:center; gap:28px; padding:28px; margin-top:auto}
.desktop-node { display:flex; flex-direction:column; align-items:center; gap:8px; font-size:11px; color:#547498; z-index:1}
.desktop-node small { font-size:9px; color:#738ba7}
.desktop-glyph { width:72px; height:50px; border:2px solid #8eacd3; border-radius:8px; position:relative; background:#ffffff5c; margin-bottom:10px}
.desktop-glyph::after { content:""; position:absolute; height:10px; width:24px; border-bottom:2px solid #8eacd3; bottom:-12px; left:22px}
.connection-line { position:absolute; top:46%; left:25%; width:38%; border-top:2px dashed #bed0e7}
.phone-demo { border:1px solid #c7d5e8; border-radius:26px; width:175px; height:278px; padding:10px; background:white; box-shadow:0 12px 32px #43689512; position:relative; flex-shrink:0}
.phone-island { margin:0 auto; width:45px; height:8px; border-radius:20px; background:#e2e9f3}
.phone-demo-content { padding:20px 5px}
.phone-demo-content h4 { margin:18px 0 14px; font-size:16px; line-height:1.45}
.phone-message { font-size:10px; color:var(--ds-muted); line-height:1.8; margin:0 0 22px}
.approval-choices { display:flex; justify-content:space-between; gap:8px}
.approval-choices span { font-size:9px; display:block; padding:6px 10px; border:1px solid var(--ds-border); border-radius:6px}
.approval-choices span:last-child { background:var(--ds-accent); color:white; border-color:var(--ds-accent)}
.phone-demo-label { font-size:8px; color:var(--ds-muted); text-align:center; margin-top:20px}
.bridge-caption { position:absolute; bottom:14px; left:0; right:0; text-align:center; color:#738ba7; font-size:10px}

.about-section { display:flex; align-items:center; gap:28px; padding-block:80px; scroll-margin-top:24px}
.about-initial { display:grid; place-items:center; width:72px; height:80px; flex-shrink:0; border-radius:24px; color:var(--ds-accent); background:var(--ds-accent-soft); font-size:38px; font-weight:700; position:relative}
.about-initial span { font-size:15px; position:absolute; bottom:8px; right:10px}
.about-copy { flex:1}
.about-copy .eyebrow { margin-bottom:8px}
.about-copy h2 { font-size:26px}
.about-copy p:last-child { font-size:13px; color:var(--ds-muted); max-width:560px; margin:12px 0 0}
.site-footer { border-top:1px solid var(--ds-border); padding-block:32px}
.footer-top { display:flex; align-items:center; gap:28px}
.footer-top .brand { font-size:19px}
.footer-top p { font-size:12px; color:var(--ds-muted)}
.footer-top nav { margin-left:auto; display:flex; gap:24px; font-size:12px; color:var(--ds-muted)}
.footer-top nav a { text-decoration:none}
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; margin-top:24px; font-size:10px; color:var(--ds-muted)}
.footer-bottom>div { display:flex; flex-wrap:wrap; gap:16px}
.footer-bottom a { display:inline-flex; align-items:center; gap:4px; text-decoration:none}

@media(max-width:1000px) { .site-header nav { gap:20px}
.hero { gap:28px; padding-block:56px 72px}
h1 { font-size:var(--ds-type-display)}
.idea-scene { min-height:360px}
.idea-note { width:210px; left:0}
.scene-window { width:260px; right:0; top:138px}
.specimen-card { gap:32px; padding:32px; grid-template-columns:1fr 1.4fr}
.product-copy { padding:28px}
.bridge-demo { gap:18px; padding:20px}
.desktop-node small { max-width:70px; text-align:center}
}

@media(max-width:760px) { .site-header { min-height:78px}
.site-header nav { gap:16px; font-size:12px}
.nav-lab { display:none}
.brand { font-size:20px}
.hero { grid-template-columns:1fr; padding-block:32px 56px; gap:40px}
h1 { font-size:var(--ds-type-display)}
.hero-copy { text-align:center}
.hero-actions { justify-content:center}
.hero-description { font-size:14px; margin-block:24px}
.idea-scene { width:min(480px,100%); margin-inline:auto; min-height:370px}
.idea-note { left:12px; top:65px}
.scene-window { top:140px; right:12px; width:275px}
.specimen-card { grid-template-columns:1fr; gap:32px; padding:28px}
.specimen-copy h3 br { display:none}
.specimen-copy h3 { font-size:28px}
.specimen-copy p { max-width:36em}
.section-heading { align-items:flex-start; flex-direction:column; gap:12px}
.section-heading .eyebrow { font-size:11px}
.product-grid { grid-template-columns:1fr}
.projects-section { padding-top:56px}
.section-aside { display:none}
.product-copy { padding:28px}
.about-section { flex-wrap:wrap; padding-block:56px; gap:20px}
.about-initial { width:56px; height:64px; border-radius:18px; font-size:30px}
.about-copy { flex-basis:calc(100% - 80px)}
.about-copy h2 { font-size:22px}
.about-section>.ds-button { margin-left:76px}
.footer-top { flex-wrap:wrap; gap:8px 20px}
.footer-top nav { width:100%; margin:12px 0 0}
.footer-bottom { font-size:9px}
}

@media(max-width:430px) { .preview-note { font-size:10px}
.site-header { flex-wrap:wrap; gap:12px; padding-block:16px}
.site-header nav { width:100%; justify-content:space-between; font-size:12px}
.hero { padding-top:28px}
h1 { font-size:var(--ds-type-display)}
.eyebrow { font-size:11px}
.hero-footnote { font-size:10px}
.hero-actions .ds-button { padding-inline:16px; font-size:13px}
.desktop-break { display:none}
.idea-scene { min-height:360px}
.idea-note { width:195px; left:8px}
.idea-note p { font-size:15px}
.scene-window { width:240px; right:8px}
.scene-caption,.scene-tag { left:20px}
.specimen-card { padding:24px}
.sample-gallery { gap:12px}
.sample>span { padding:9px 10px; font-size:10px}
.product-copy { padding:24px}
.product-copy h3 { font-size:30px}
.product-summary { font-size:15px}
.companion-demo { padding-inline:16px}
.demo-conversation { padding:16px; height:278px}
.demo-agent { min-height:83px}
.demo-tabs button { padding-inline:8px}
.bridge-demo { gap:18px; padding-inline:16px}
.desktop-node { max-width:70px}
.desktop-glyph { width:56px}
.desktop-glyph::after { left:14px}
.phone-demo { width:160px}
.about-copy h2 { font-size:20px}
}


/* 手机缩小交叠，只让装饰边缘相叠，正文与底部说明留在清晰区域。 */
@media(max-width:430px) { .idea-scene { min-height:450px}
.idea-note { top:52px}
.idea-note .note-signature { display:none}
.scene-window { top:178px}
.scene-tag { bottom:14px}
}

.traffic { color:var(--ds-muted); font-size:12px; margin:24px 0 0; line-height:1.8 }