:root {
  --bg: #f5f7fb;
  --bg-2: #ffffff;
  --surface: rgba(255, 255, 255, .84);
  --surface-solid: #ffffff;
  --text: #111827;
  --muted: #697386;
  --line: #e7eaf1;
  --primary: #665cf6;
  --primary-2: #28b8f7;
  --accent: #ffb347;
  --success: #20b486;
  --hero-bg: #f8f9ff;
  --header-bg: rgba(248, 249, 255, .82);
  --shadow: 0 24px 80px rgba(34, 45, 80, .12);
  --card-shadow: 0 14px 45px rgba(35, 43, 76, .08);
  --radius: 26px;
  --section-width: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; -webkit-font-smoothing: antialiased; transition: background .45s ease, color .45s ease; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.concept-switcher { height: 46px; position: relative; z-index: 100; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 0 24px; color: #dce4f8; background: #070b13; border-bottom: 1px solid rgba(255,255,255,.08); }
.switcher-brand { position: absolute; left: 24px; display: flex; align-items: center; gap: 9px; font-size: 12px; letter-spacing: .05em; }
.switcher-dot { width: 8px; height: 8px; border-radius: 50%; background: #6e63ff; box-shadow: 0 0 14px #6e63ff; }
.switcher-tabs { display: flex; height: 32px; padding: 3px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; }
.theme-tab { border: 0; padding: 0 16px; border-radius: 6px; background: transparent; color: #8f9ab0; font-size: 12px; transition: .2s ease; }
.theme-tab:hover { color: #fff; }
.theme-tab.is-active { color: #fff; background: #6a5ff8; box-shadow: 0 4px 16px rgba(106,95,248,.35); }
.switcher-note { position: absolute; right: 24px; color: #667189; font-size: 11px; }

.site-shell { overflow: hidden; min-height: 100vh; }
.site-header { height: 72px; position: absolute; z-index: 50; top: 46px; left: 50%; width: min(calc(100% - 48px), var(--section-width)); transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; }
.brand-name b { color: var(--primary); }
.brand-mark { width: 32px; height: 32px; position: relative; display: inline-block; border-radius: 11px; overflow: hidden; background: linear-gradient(145deg, var(--primary), var(--primary-2)); box-shadow: 0 7px 18px color-mix(in srgb, var(--primary) 30%, transparent); }
.brand-mark i { position: absolute; display: block; background: #fff; border-radius: 50%; }
.brand-mark i:nth-child(1) { width: 13px; height: 13px; left: 5px; top: 5px; }
.brand-mark i:nth-child(2) { width: 10px; height: 10px; right: 5px; bottom: 5px; opacity: .9; }
.brand-mark i:nth-child(3) { width: 8px; height: 8px; right: 5px; top: 5px; opacity: .55; }
.main-nav { display: flex; align-items: center; gap: 34px; color: var(--muted); font-size: 14px; }
.main-nav a { position: relative; transition: color .2s ease; }
.main-nav a:hover { color: var(--text); }
.main-nav a:first-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: -24px; height: 2px; background: var(--primary); border-radius: 2px; }
.header-actions { display: flex; gap: 10px; align-items: center; }
.ghost-button, .secondary-button { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 12px; }
.ghost-button { padding: 10px 16px; border: 0; background: transparent; }
.primary-button { border: 0; padding: 15px 23px; border-radius: 13px; color: #fff; font-weight: 700; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 74%, var(--primary-2))); box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 28%, transparent); transition: transform .2s ease, box-shadow .2s ease; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 38%, transparent); }
.primary-button span { margin-left: 8px; }
.primary-button.compact { padding: 11px 17px; border-radius: 11px; font-size: 13px; }
.mobile-menu { display: none; border: 0; background: transparent; }
.mobile-menu span { display: block; width: 22px; height: 2px; margin: 4px 0; background: var(--text); }

.section-pad { width: min(calc(100% - 48px), var(--section-width)); margin-inline: auto; }
.hero { min-height: 780px; padding-top: 190px; padding-bottom: 92px; position: relative; display: grid; grid-template-columns: .88fr 1.12fr; gap: 54px; align-items: center; }
.hero::before { content: ""; position: absolute; z-index: -3; left: 50%; top: -46px; width: 100vw; height: calc(100% + 46px); transform: translateX(-50%); background: var(--hero-bg); transition: background .45s ease; }
.hero::after { content: ""; position: absolute; z-index: -2; inset: 0; opacity: .55; background-image: radial-gradient(color-mix(in srgb, var(--primary) 17%, transparent) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom, #000, transparent 88%); }
.hero-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.glow-one { width: 420px; height: 420px; left: -260px; top: 120px; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 15%, transparent), transparent 70%); }
.glow-two { width: 560px; height: 560px; right: -300px; top: 70px; background: radial-gradient(circle, color-mix(in srgb, var(--primary-2) 15%, transparent), transparent 70%); }
.eyebrow, .section-kicker { color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; background: color-mix(in srgb, var(--primary) 8%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent); border-radius: 999px; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 5px color-mix(in srgb, var(--success) 15%, transparent); }
.hero h1 { margin: 24px 0 22px; font-size: clamp(42px, 4.4vw, 66px); line-height: 1.12; letter-spacing: -.052em; }
.hero h1 em, .workflow h2 em { font-style: normal; color: transparent; background: linear-gradient(100deg, var(--primary), var(--primary-2)); -webkit-background-clip: text; background-clip: text; }
.hero-copy > p { max-width: 570px; color: var(--muted); font-size: 17px; line-height: 1.85; }
.hero-actions { display: flex; gap: 13px; margin-top: 34px; }
.hero-cta { padding: 16px 25px; }
.secondary-button { padding: 15px 22px; font-weight: 650; }
.play-icon { display: inline-grid; place-items: center; width: 23px; height: 23px; margin-right: 8px; border-radius: 50%; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); font-size: 9px; }
.trust-row { display: flex; align-items: center; gap: 13px; margin-top: 36px; }
.avatar-stack { display: flex; padding-left: 8px; }
.avatar-stack span { width: 32px; height: 32px; display: grid; place-items: center; margin-left: -8px; border: 2px solid var(--hero-bg); border-radius: 50%; color: #fff; background: linear-gradient(145deg, #2d3b68, var(--primary)); font-size: 10px; }
.trust-row > div:last-child { display: grid; }
.trust-row strong { font-size: 13px; }
.trust-row small { color: var(--muted); font-size: 11px; }

.hero-product { position: relative; perspective: 1200px; }
.product-aura { position: absolute; inset: 8% 5%; border-radius: 50%; background: color-mix(in srgb, var(--primary) 18%, transparent); filter: blur(70px); }
.studio-window { position: relative; z-index: 2; overflow: hidden; border: 1px solid color-mix(in srgb, var(--line) 85%, transparent); border-radius: 20px; color: #dce5f7; background: #101827; box-shadow: 0 40px 100px rgba(19, 24, 46, .28); transform: rotateY(-3deg) rotateX(1deg); }
.window-topbar { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid rgba(255,255,255,.07); background: #0c1321; }
.traffic-lights { display: flex; gap: 5px; }.traffic-lights i { width: 7px; height: 7px; border-radius: 50%; background: #3a4354; }.traffic-lights i:first-child { background: #ff6a6a; }.traffic-lights i:nth-child(2) { background: #f6c75b; }.traffic-lights i:nth-child(3) { background: #5ccf87; }
.workspace-title { display: flex; align-items: center; gap: 7px; font-size: 10px; color: #aab6cc; }.mini-logo { width: 15px; height: 15px; border-radius: 5px; background: linear-gradient(145deg, var(--primary), var(--primary-2)); }
.credit-chip { padding: 5px 8px; border: 1px solid rgba(255,255,255,.07); border-radius: 6px; background: rgba(255,255,255,.04); color: #cfd8e8; font-size: 9px; }.credit-chip span { color: #f6c55d; }
.studio-body { min-height: 425px; display: grid; grid-template-columns: 65px 1fr; }
.studio-sidebar { display: flex; flex-direction: column; align-items: center; gap: 13px; padding-top: 16px; border-right: 1px solid rgba(255,255,255,.07); background: #0d1524; }
.side-logo { width: 29px; height: 29px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 9px; color: #fff; background: linear-gradient(145deg, var(--primary), var(--primary-2)); font-size: 11px; font-weight: 800; }
.studio-sidebar button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 9px; color: #6f7e98; background: transparent; font-size: 12px; }.studio-sidebar button small { margin-top: -5px; font-size: 7px; }.studio-sidebar button.active { color: #fff; background: rgba(112,97,255,.15); }
.studio-main { padding: 21px; background: radial-gradient(circle at 70% 10%, rgba(105,92,246,.1), transparent 40%), #111b2d; }
.studio-heading { display: flex; align-items: flex-start; justify-content: space-between; }.studio-heading small { color: #5f708c; font-size: 7px; letter-spacing: .12em; }.studio-heading h3 { margin: 4px 0 16px; font-size: 18px; }.status-online { padding: 5px 8px; color: #91a1ba; border-radius: 6px; background: rgba(255,255,255,.04); font-size: 8px; }.status-online i { width: 5px; height: 5px; display: inline-block; margin-right: 4px; border-radius: 50%; background: #35d79e; }
.prompt-box { display: grid; grid-template-columns: 31px 1fr auto; gap: 10px; align-items: center; padding: 11px; border: 1px solid rgba(126,111,255,.3); border-radius: 11px; background: rgba(255,255,255,.035); }.prompt-avatar { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: linear-gradient(145deg, var(--primary), var(--primary-2)); font-size: 9px; font-weight: 800; }.prompt-box p { margin: 0; color: #c4cee0; font-size: 9px; line-height: 1.55; }.prompt-box button { padding: 8px 10px; border: 0; border-radius: 7px; color: #fff; background: var(--primary); font-size: 8px; }
.agent-mini-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 9px; margin-top: 12px; }.mini-card { min-width: 0; padding: 9px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: rgba(255,255,255,.035); }.mini-card > div:nth-child(2) { display: grid; margin-top: 8px; }.mini-card strong { color: #e8edf8; font-size: 9px; }.mini-card small { color: #6d7c95; font-size: 7px; }.mini-card em { display: inline-block; margin-top: 7px; padding: 3px 5px; border-radius: 4px; color: #77ddba; background: rgba(50,201,150,.1); font-size: 6px; font-style: normal; }.mini-card.is-selected { border-color: rgba(113,98,255,.38); background: linear-gradient(145deg, rgba(111,95,246,.13), rgba(255,255,255,.035)); }
.mini-visual { height: 74px; position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 7px; background: radial-gradient(circle, rgba(108,91,247,.55), transparent 38%), linear-gradient(135deg, #192346, #161b2b); }.mini-visual::before,.mini-visual::after { content: ""; position: absolute; width: 50px; height: 50px; border: 1px solid rgba(119,105,255,.3); border-radius: 50%; }.mini-visual::after { width: 80px; height: 80px; }.play-orb { z-index: 2; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--primary); font-size: 8px; }.scan-line { position: absolute; left: 8px; right: 8px; height: 1px; background: #65dff5; box-shadow: 0 0 10px #65dff5; animation: scan 3s infinite ease-in-out; }
.note-lines { height: 74px; position: relative; display: flex; flex-direction: column; gap: 6px; justify-content: center; padding: 12px; border-radius: 7px; background: linear-gradient(145deg, #3f1f37, #1b1b2d); }.note-lines i { height: 5px; border-radius: 4px; background: rgba(255,255,255,.13); }.note-lines i:nth-child(2) { width: 75%; }.note-lines span { position: absolute; right: 8px; top: 8px; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #e85671; font-size: 7px; }
.human-face { height: 74px; position: relative; border-radius: 7px; overflow: hidden; background: radial-gradient(circle at 50% 42%, #f0c7b2 0 13%, transparent 14%), radial-gradient(circle at 50% 30%, #303348 0 17%, transparent 18%), linear-gradient(145deg,#243d48,#18202e); }.human-face i { position: absolute; width: 43px; height: 28px; left: 50%; bottom: 0; transform: translateX(-50%); border-radius: 25px 25px 0 0; background: #506cff; }
.progress-card { margin-top: 10px; padding: 10px; border: 1px solid rgba(255,255,255,.06); border-radius: 9px; background: rgba(255,255,255,.025); }.progress-card > div { display: flex; align-items: center; gap: 8px; }.progress-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: #72dec1; background: rgba(50,201,150,.1); }.progress-card p { display: grid; flex: 1; margin: 0; }.progress-card strong { font-size: 8px; }.progress-card small { color: #667790; font-size: 6px; }.progress-card b { float: right; margin-top: -20px; color: #7be0c0; font-size: 10px; }.progress-track { display: block; height: 3px; margin-top: 8px; border-radius: 3px; background: rgba(255,255,255,.06); }.progress-track i { display: block; width: 68%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), #5addbf); }
.floating-tag { position: absolute; z-index: 4; padding: 9px 12px; border: 1px solid rgba(255,255,255,.65); border-radius: 10px; color: var(--text); background: rgba(255,255,255,.88); box-shadow: 0 10px 35px rgba(27,35,62,.14); backdrop-filter: blur(12px); font-size: 9px; }.floating-tag span { color: var(--success); }.floating-tag b { color: var(--primary); }.tag-one { left: -30px; bottom: 48px; }.tag-two { right: -20px; top: 78px; }
@keyframes scan { 0%,100% { top: 16px; opacity: .3; } 50% { top: 58px; opacity: 1; } }

.partner-strip { min-height: 85px; display: flex; justify-content: center; align-items: center; gap: 42px; padding: 20px 40px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); background: var(--surface-solid); }.partner-strip > span { font-size: 11px; }.partner-strip div { display: flex; flex-wrap: wrap; gap: 36px; color: color-mix(in srgb, var(--text) 58%, transparent); }.partner-strip b { font-size: 13px; }
.agents, .template-section, .workflow, .pricing { padding-top: 118px; padding-bottom: 118px; }
.section-heading h2, .workflow h2, .sync-copy h2, .final-cta h2 { margin: 13px 0 15px; font-size: clamp(32px, 3.2vw, 46px); line-height: 1.22; letter-spacing: -.04em; }.section-heading p, .workflow-copy > p, .sync-copy > p, .final-cta > p { color: var(--muted); line-height: 1.8; }.centered { text-align: center; }.centered p { max-width: 600px; margin-inline: auto; }
.agent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }.agent-card { min-height: 284px; position: relative; overflow: hidden; padding: 27px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-solid); box-shadow: var(--card-shadow); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }.agent-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--primary) 28%, var(--line)); box-shadow: 0 22px 55px color-mix(in srgb, var(--primary) 12%, transparent); }.agent-card.featured { grid-column: span 1; color: #fff; border-color: transparent; background: radial-gradient(circle at 80% 20%, rgba(54,215,244,.22), transparent 32%), linear-gradient(145deg, color-mix(in srgb, var(--primary) 88%, #0b1632), #111b3b); }.agent-icon { width: 47px; height: 47px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 14px; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface-solid)); font-weight: 900; }.featured .agent-icon { color: #fff; background: rgba(255,255,255,.12); }.agent-card h3 { margin: 0 0 10px; font-size: 19px; }.agent-card p { min-height: 59px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }.featured p { color: #bac5e6; }.agent-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; }.agent-meta span { padding: 5px 8px; border-radius: 6px; color: var(--muted); background: color-mix(in srgb, var(--text) 4%, transparent); font-size: 9px; }.featured .agent-meta span { color: #d5dcf6; background: rgba(255,255,255,.08); }.agent-card button { position: absolute; left: 27px; bottom: 25px; padding: 0; border: 0; color: var(--primary); background: transparent; font-size: 12px; font-weight: 750; }.featured button { color: #fff; }.agent-label { position: absolute; top: 24px; right: 24px; padding: 5px 8px; border-radius: 999px; color: #fff; background: rgba(255,255,255,.12); font-size: 8px; }.agent-label.new { color: #fff; background: #ee516b; }.agent-card.redbook { background: linear-gradient(145deg, color-mix(in srgb, #ff4c6a 6%, var(--surface-solid)), var(--surface-solid)); }.card-orbit { position: absolute; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }.orbit-a { width: 180px; height: 180px; right: -84px; bottom: -90px; }.orbit-b { width: 110px; height: 110px; right: -48px; bottom: -55px; }

.template-section { width: 100%; max-width: none; padding-inline: max(24px, calc((100% - var(--section-width)) / 2)); background: var(--bg-2); }.split-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 35px; }.split-heading h2 { max-width: 650px; }.category-tabs { display: flex; gap: 5px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }.category-tabs button { padding: 8px 12px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: 11px; }.category-tabs button.active { color: #fff; background: var(--primary); }.template-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 16px; margin-top: 46px; }.template-card { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--surface-solid); box-shadow: var(--card-shadow); transition: transform .25s ease; }.template-card:hover { transform: translateY(-5px); }.template-cover { aspect-ratio: .9; position: relative; overflow: hidden; padding: 19px; color: #fff; }.template-card.tall .template-cover { aspect-ratio: .9; }.gradient-food .template-cover { background: radial-gradient(circle at 70% 42%, rgba(255,159,81,.7), transparent 18%), linear-gradient(145deg, #2a130e, #9b3523 60%, #ef874d); }.gradient-purple .template-cover { background: radial-gradient(circle at 58% 45%, #7b5ee8, transparent 22%), linear-gradient(145deg, #120e28, #3b236f); }.gradient-red .template-cover { color: #2f1720; background: linear-gradient(145deg, #ffe3e8, #f77f9c); }.gradient-blue .template-cover { background: linear-gradient(145deg, #081b32, #197da0); }.cover-badge { display: inline-block; position: relative; z-index: 3; padding: 5px 8px; border: 1px solid rgba(255,255,255,.22); border-radius: 6px; background: rgba(0,0,0,.16); backdrop-filter: blur(6px); font-size: 8px; }.cover-copy { position: absolute; z-index: 3; left: 20px; bottom: 28px; }.cover-copy small { display: block; margin-bottom: 8px; color: rgba(255,255,255,.68); font-size: 9px; letter-spacing: .12em; }.cover-copy strong { font-size: 27px; line-height: 1.12; letter-spacing: -.06em; }.cover-copy.bottom strong { font-size: 17px; }.cover-play { position: absolute; z-index: 3; right: 20px; bottom: 20px; width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(255,255,255,.15); backdrop-filter: blur(8px); font-size: 10px; }.portrait-shape { position: absolute; width: 120px; height: 155px; right: 18px; bottom: 0; border-radius: 60px 60px 0 0; background: linear-gradient(#d5a98f 0 27%, #27233f 28% 45%, #5c6fee 46%); filter: saturate(.85); }.portrait-shape i { position: absolute; width: 46px; height: 33px; left: 38px; top: 20px; border-radius: 60% 60% 45% 45%; background: #292439; }.note-cover { margin: 34px auto 0; padding: 18px; width: 90%; min-height: 175px; border-radius: 8px; background: #fff8f0; box-shadow: 8px 10px 0 rgba(72,28,37,.12); transform: rotate(-3deg); }.note-cover em { display: inline-block; padding: 4px 7px; border-radius: 4px; color: #fff; background: #ef5472; font-size: 8px; font-style: normal; }.note-cover strong { display: block; margin-top: 16px; font-size: 24px; line-height: 1.08; }.note-cover span { display: block; margin-top: 18px; color: #8d5965; font-size: 8px; }.storyboard-mini { position: absolute; inset: 55px 18px 70px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; transform: rotate(-5deg); }.storyboard-mini i { border: 1px solid rgba(255,255,255,.2); border-radius: 7px; background: linear-gradient(145deg, rgba(255,255,255,.2), transparent); }.storyboard-mini i:nth-child(2) { transform: translateY(13px); }.template-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 17px 17px; }.template-info > div { display: grid; }.template-info strong { font-size: 12px; }.template-info small, .template-info > span { margin-top: 3px; color: var(--muted); font-size: 8px; }.market-more { display: block; margin: 32px auto 0; padding: 12px 20px; border: 1px solid var(--line); border-radius: 11px; color: var(--text); background: var(--surface-solid); font-size: 11px; }

.workflow { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: center; }.workflow-copy > p { max-width: 480px; }.workflow-list { display: grid; gap: 8px; margin: 35px 0 0; padding: 0; list-style: none; }.workflow-list li { display: flex; gap: 14px; align-items: center; padding: 13px 15px; border: 1px solid transparent; border-radius: 12px; opacity: .48; }.workflow-list li.active { border-color: var(--line); background: var(--surface-solid); box-shadow: var(--card-shadow); opacity: 1; }.workflow-list b { color: var(--primary); font-size: 10px; }.workflow-list div { display: grid; }.workflow-list strong { font-size: 12px; }.workflow-list small { margin-top: 3px; color: var(--muted); font-size: 9px; }.workflow-visual { min-height: 520px; position: relative; }.workflow-visual::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 13%, transparent), transparent 65%); }.workflow-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }.workflow-visual path { fill: none; stroke: color-mix(in srgb, var(--primary) 22%, var(--line)); stroke-width: 1.5; stroke-dasharray: 6 7; animation: dash 14s linear infinite; }.flow-center, .flow-node { position: absolute; z-index: 2; display: grid; place-items: center; text-align: center; border: 1px solid var(--line); background: var(--surface-solid); box-shadow: var(--card-shadow); }.flow-center { width: 170px; height: 170px; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; }.flow-center .brand-mark { margin-bottom: 8px; }.flow-center strong { font-size: 14px; }.flow-center small { margin-top: 5px; color: var(--muted); font-size: 9px; }.flow-node { width: 126px; height: 95px; border-radius: 17px; }.flow-node > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); font-size: 11px; }.flow-node strong { font-size: 10px; }.flow-node small { color: var(--muted); font-size: 8px; }.node-video { left: 4%; top: 14%; }.node-note { right: 2%; top: 14%; }.node-human { left: 4%; bottom: 13%; }.node-publish { right: 2%; bottom: 13%; }
@keyframes dash { to { stroke-dashoffset: -130; } }

.sync-section { width: 100%; max-width: none; padding: 70px max(24px, calc((100% - var(--section-width)) / 2)); background: var(--bg-2); }.sync-card { min-height: 450px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; overflow: hidden; padding: 48px 54px; border: 1px solid var(--line); border-radius: 32px; background: radial-gradient(circle at 80% 50%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 42%), var(--surface-solid); box-shadow: var(--card-shadow); }.sync-copy { max-width: 500px; }.sync-points { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }.sync-points span { padding: 7px 10px; border-radius: 8px; color: var(--muted); background: color-mix(in srgb, var(--primary) 6%, transparent); font-size: 10px; }.device-stage { height: 350px; position: relative; }.laptop { width: 420px; position: absolute; right: 40px; bottom: 34px; }.laptop-screen { height: 245px; position: relative; overflow: hidden; border: 8px solid #1a2130; border-radius: 13px; background: #f2f4fa; box-shadow: 0 24px 60px rgba(23,28,47,.2); }.laptop > span { display: block; width: 470px; height: 11px; margin-left: -25px; border-radius: 2px 2px 10px 10px; background: linear-gradient(#bcc2cf,#787f8d); }.dash-top { height: 28px; background: #111a2b; }.dash-side { position: absolute; left: 0; top: 28px; bottom: 0; width: 47px; background: #172238; }.dash-cards { position: absolute; left: 63px; right: 15px; top: 47px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }.dash-cards i { height: 74px; border-radius: 9px; background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--primary) 8%, #fff)); box-shadow: 0 7px 20px rgba(39,45,70,.08); }.phone { width: 135px; height: 270px; position: absolute; z-index: 3; left: 22px; bottom: 20px; padding: 7px; border-radius: 26px; background: #151b26; box-shadow: 0 25px 60px rgba(18,23,40,.3); transform: rotate(-3deg); }.phone-island { width: 46px; height: 10px; position: absolute; z-index: 3; left: 50%; top: 11px; transform: translateX(-50%); border-radius: 10px; background: #0b0f17; }.phone-screen { height: 100%; padding: 31px 11px 12px; border-radius: 20px; color: #fff; background: radial-gradient(circle at 70% 35%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 33%), #101726; }.phone-screen > small { color: #8792a8; font-size: 6px; }.phone-screen > strong { display: block; margin: 6px 0 15px; font-size: 13px; }.phone-screen > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }.phone-screen i { height: 48px; border-radius: 9px; background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.04)); }.phone-screen > span { display: block; margin-top: 12px; padding: 8px; border-radius: 7px; color: #8fdbca; background: rgba(40,195,149,.11); font-size: 6px; }.sync-wave { position: absolute; z-index: 2; left: 135px; top: 108px; display: flex; align-items: center; gap: 4px; transform: rotate(-12deg); }.sync-wave i { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 10px var(--primary); }.sync-wave i:nth-child(2) { opacity: .65; }.sync-wave i:nth-child(3) { opacity: .3; }

.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; align-items: stretch; }.price-grid article { position: relative; padding: 32px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface-solid); box-shadow: var(--card-shadow); }.price-grid article.popular { color: #fff; border-color: transparent; background: radial-gradient(circle at 85% 5%, rgba(42,215,235,.22), transparent 24%), linear-gradient(145deg, color-mix(in srgb, var(--primary) 86%, #10162a), #10172d); transform: translateY(-10px); }.price-grid article > small { color: var(--primary); font-weight: 800; }.price-grid h3 { margin: 18px 0 10px; font-size: 36px; }.price-grid h3 em { font-size: 17px; font-style: normal; }.price-grid h3 small { color: var(--muted); font-size: 11px; font-weight: 500; }.price-grid p { min-height: 40px; color: var(--muted); font-size: 12px; }.price-grid ul { display: grid; gap: 12px; margin: 25px 0; padding: 22px 0 0; border-top: 1px solid var(--line); list-style: none; }.price-grid li { color: var(--muted); font-size: 11px; }.price-grid li::before { content: "✓"; margin-right: 8px; color: var(--success); font-weight: 800; }.price-grid button { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: transparent; font-weight: 700; }.popular > small, .popular h3, .popular h3 small { color: #fff; }.popular p, .popular li { color: #bfc8df; }.popular ul { border-color: rgba(255,255,255,.1); }.popular button { color: #fff; border-color: transparent; background: var(--primary); }.popular-tag { position: absolute; right: 22px; top: 22px; padding: 5px 8px; border-radius: 999px; color: #fff; background: rgba(255,255,255,.12); font-size: 8px; }
.final-cta { max-width: 1180px; position: relative; overflow: hidden; margin-top: 40px; margin-bottom: 100px; padding: 78px 40px; border-radius: 32px; text-align: center; color: #fff; background: radial-gradient(circle at 20% 80%, rgba(52,205,246,.22), transparent 28%), radial-gradient(circle at 80% 10%, rgba(167,99,255,.35), transparent 30%), #11162a; }.final-cta .section-kicker { color: #9c94ff; }.final-cta > p { color: #aeb8d0; }.final-cta .primary-button { margin-top: 20px; }.cta-noise { position: absolute; inset: 0; opacity: .3; background-image: radial-gradient(rgba(255,255,255,.13) .7px, transparent .7px); background-size: 20px 20px; mask-image: radial-gradient(circle, #000, transparent 70%); }
footer { width: min(calc(100% - 48px), var(--section-width)); min-height: 150px; display: grid; grid-template-columns: auto 1fr auto; gap: 22px 40px; align-items: center; margin: auto; padding: 40px 0 35px; border-top: 1px solid var(--line); }.brand + p { color: var(--muted); font-size: 11px; }footer > div { display: flex; gap: 25px; color: var(--muted); font-size: 11px; }footer > small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; }
.toast { position: fixed; z-index: 200; right: 24px; bottom: 24px; display: flex; gap: 11px; align-items: center; min-width: 270px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-solid); box-shadow: var(--shadow); transform: translateY(120px); opacity: 0; transition: .3s ease; }.toast.show { transform: translateY(0); opacity: 1; }.toast > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--success); }.toast div { display: grid; }.toast strong { font-size: 12px; }.toast small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }.reveal.revealed { opacity: 1; transform: translateY(0); }.agent-card:nth-child(2), .template-card:nth-child(2) { transition-delay: .06s; }.agent-card:nth-child(3), .template-card:nth-child(3) { transition-delay: .12s; }.agent-card:nth-child(4), .template-card:nth-child(4) { transition-delay: .18s; }

/* 02 创作社区版：参考创作社区的信息密度和发现路径，不复刻具体品牌视觉 */
body[data-theme="community"] {
  --bg: #f4f3f8; --bg-2: #ebe9f2; --surface: rgba(255,255,255,.72); --surface-solid: #fff;
  --text: #18151f; --muted: #6f697b; --line: #dfdce7; --primary: #7b4dff; --primary-2: #ff5da8;
  --accent: #ffd05a; --hero-bg: #eeeaf8; --header-bg: rgba(238,234,248,.82); --radius: 18px;
}
body[data-theme="community"] .theme-tab.is-active { background: linear-gradient(135deg,#7647ff,#ef5ba6); }
body[data-theme="community"] .hero { grid-template-columns: .82fr 1.18fr; }
body[data-theme="community"] .hero::before { background: radial-gradient(circle at 72% 30%, rgba(136,82,255,.16), transparent 33%), linear-gradient(180deg,#f1edf9,#f7f6fa); }
body[data-theme="community"] .hero::after { background-image: linear-gradient(rgba(101,71,154,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(101,71,154,.05) 1px, transparent 1px); background-size: 36px 36px; }
body[data-theme="community"] .studio-window { border-radius: 14px; background: #241e30; box-shadow: 22px 28px 0 #d9d1ec, 0 45px 100px rgba(38,25,70,.22); transform: rotateY(-2deg); }
body[data-theme="community"] .studio-main { background: radial-gradient(circle at 70% 10%, rgba(245,80,165,.13), transparent 42%), #241e30; }
body[data-theme="community"] .window-topbar, body[data-theme="community"] .studio-sidebar { background: #1b1723; }
body[data-theme="community"] .agent-grid { grid-template-columns: repeat(4, 1fr); }
body[data-theme="community"] .agent-card { min-height: 280px; }
body[data-theme="community"] .agent-card.featured, body[data-theme="community"] .agent-card.redbook { grid-column: span 2; }
body[data-theme="community"] .agent-card.featured { background: radial-gradient(circle at 80% 15%, rgba(255,90,171,.35), transparent 32%), linear-gradient(145deg,#5c35d4,#2e174f); }
body[data-theme="community"] .template-section { background: #eae7f1; }
body[data-theme="community"] .template-grid { grid-template-columns: repeat(4,1fr); }
body[data-theme="community"] .template-card { border-radius: 14px; }
body[data-theme="community"] .sync-section { background: #eae7f1; }
body[data-theme="community"] .final-cta { background: radial-gradient(circle at 20% 80%,rgba(255,87,170,.28),transparent 30%),radial-gradient(circle at 80% 10%,rgba(125,78,255,.5),transparent 35%),#21152f; }

/* 03 黑金版：高级、克制的品牌增长气质 */
body[data-theme="blackgold"] {
  --bg: #080806; --bg-2: #0c0b08; --surface: rgba(25,23,16,.78); --surface-solid: #12110d;
  --text: #f5f0df; --muted: #9b9586; --line: #2c291e; --primary: #d9ab42; --primary-2: #ffe198;
  --accent: #e8bb50; --success: #8dc783; --hero-bg: #080806; --header-bg: rgba(8,8,6,.8);
  --shadow: 0 25px 90px rgba(0,0,0,.48); --card-shadow: 0 18px 55px rgba(0,0,0,.25); --radius: 20px;
}
body[data-theme="blackgold"] .theme-tab.is-active { color: #161208; background: linear-gradient(135deg,#b88727,#f4d37f); box-shadow: 0 4px 18px rgba(221,177,75,.25); }
body[data-theme="blackgold"] .brand-mark { background: linear-gradient(145deg,#8c661f,#f0ce73); box-shadow: 0 8px 24px rgba(215,168,61,.2); }
body[data-theme="blackgold"] .site-header { border-color: rgba(219,175,74,.16); }
body[data-theme="blackgold"] .hero::before { background: radial-gradient(circle at 72% 42%, rgba(213,167,56,.13), transparent 28%), radial-gradient(circle at 15% 15%, rgba(213,167,56,.06), transparent 25%), #080806; }
body[data-theme="blackgold"] .hero::after { opacity: .28; background-image: linear-gradient(110deg, transparent 48%, rgba(229,188,88,.14) 49%, transparent 50%); background-size: 22px 22px; }
body[data-theme="blackgold"] .eyebrow { color: #e2bc62; background: rgba(216,172,66,.07); border-color: rgba(216,172,66,.18); }
body[data-theme="blackgold"] .pulse { background: #e1b94f; box-shadow: 0 0 0 5px rgba(216,172,66,.12); }
body[data-theme="blackgold"] .primary-button { color: #171208; background: linear-gradient(135deg,#b88627,#f2d079); box-shadow: 0 12px 28px rgba(205,156,43,.18); }
body[data-theme="blackgold"] .studio-window { border: 1px solid #4b4022; background: #0d0d09; box-shadow: 0 0 0 1px rgba(238,203,113,.06), 0 45px 120px rgba(0,0,0,.65); }
body[data-theme="blackgold"] .window-topbar, body[data-theme="blackgold"] .studio-sidebar { background: #090a08; }
body[data-theme="blackgold"] .studio-main { background: radial-gradient(circle at 70% 10%, rgba(218,171,59,.1), transparent 40%), #11110d; }
body[data-theme="blackgold"] .prompt-box { border-color: rgba(218,171,59,.33); background: rgba(218,171,59,.035); }
body[data-theme="blackgold"] .prompt-avatar, body[data-theme="blackgold"] .side-logo, body[data-theme="blackgold"] .mini-logo { color: #151108; background: linear-gradient(145deg,#a97b22,#e9cb76); }
body[data-theme="blackgold"] .prompt-box button { color: #181208; background: #d5a73c; }
body[data-theme="blackgold"] .mini-card.is-selected { border-color: rgba(219,174,67,.36); background: linear-gradient(145deg,rgba(219,174,67,.1),rgba(255,255,255,.02)); }
body[data-theme="blackgold"] .floating-tag { color: #eee7d4; border-color: rgba(229,191,97,.2); background: rgba(20,18,12,.9); box-shadow: 0 15px 45px rgba(0,0,0,.5); }
body[data-theme="blackgold"] .floating-tag b { color: #e4bb56; }
body[data-theme="blackgold"] .partner-strip { color: #7f7868; background: #0b0a07; }
body[data-theme="blackgold"] .agent-card.featured { color: #f5ecd4; background: radial-gradient(circle at 80% 20%,rgba(241,202,104,.13),transparent 32%),linear-gradient(145deg,#2a2414,#0f0f0b); border-color: #4d4020; }
body[data-theme="blackgold"] .agent-card.redbook { background: linear-gradient(145deg,#1d1713,#12110d); }
body[data-theme="blackgold"] .template-section, body[data-theme="blackgold"] .sync-section { background: #0c0b08; }
body[data-theme="blackgold"] .gradient-purple .template-cover { background: radial-gradient(circle at 58% 45%,#b18738,transparent 22%),linear-gradient(145deg,#12100b,#3b2b10); }
body[data-theme="blackgold"] .gradient-red .template-cover { color: #f6ecd0; background: linear-gradient(145deg,#39230e,#bc8229); }
body[data-theme="blackgold"] .note-cover { color: #261d0e; background: #f2dfad; }
body[data-theme="blackgold"] .sync-card { background: radial-gradient(circle at 80% 50%,rgba(216,170,58,.1),transparent 42%),#11100c; }
body[data-theme="blackgold"] .laptop-screen { background: #15140f; }.dash-cards i { background: linear-gradient(145deg,#1a1811,#2a2414); }
body[data-theme="blackgold"] .price-grid article.popular { color: #f5ecd4; border: 1px solid #594721; background: radial-gradient(circle at 85% 5%,rgba(239,200,101,.14),transparent 25%),linear-gradient(145deg,#2a2414,#10100c); }
body[data-theme="blackgold"] .popular button { color: #181208; background: linear-gradient(135deg,#b98526,#e7c56b); }
body[data-theme="blackgold"] .final-cta { color: #f5ecd4; border: 1px solid #4a3c1e; background: radial-gradient(circle at 20% 80%,rgba(194,142,35,.13),transparent 30%),radial-gradient(circle at 80% 10%,rgba(238,201,104,.14),transparent 35%),#11100c; }
body[data-theme="blackgold"] .final-cta .section-kicker { color: #d8ab44; }
body[data-theme="blackgold"] .toast { border-color: #4a3d20; }

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; padding-top: 170px; }.hero-copy { max-width: 760px; text-align: center; margin-inline: auto; }.hero-copy > p { margin-inline: auto; }.hero-actions,.trust-row { justify-content: center; }.hero-product { max-width: 750px; margin: 20px auto 0; }.agent-grid, body[data-theme="community"] .agent-grid { grid-template-columns: repeat(2,1fr); }.agent-card.featured, body[data-theme="community"] .agent-card.featured, body[data-theme="community"] .agent-card.redbook { grid-column: span 1; }.template-grid, body[data-theme="community"] .template-grid { grid-template-columns: repeat(2,1fr); }.workflow { grid-template-columns: 1fr; gap: 40px; }.workflow-copy { max-width: 700px; }.sync-card { grid-template-columns: 1fr; }.sync-copy { max-width: 700px; }.device-stage { margin-top: 20px; }.device-stage { transform-origin: left center; }.switcher-note { display: none; }
}
@media (max-width: 760px) {
  .concept-switcher { height: auto; min-height: 50px; justify-content: flex-end; padding: 7px 10px; }.switcher-brand { left: 12px; }.switcher-brand strong { display:none; }.switcher-tabs { max-width: calc(100% - 38px); overflow-x: auto; }.theme-tab { white-space: nowrap; padding: 0 10px; }.site-header { top: 50px; width: calc(100% - 32px); height: 65px; }.main-nav,.header-actions { display: none; }.mobile-menu { display:block; }.section-pad { width: min(calc(100% - 32px),var(--section-width)); }.hero { min-height: auto; padding-top: 145px; padding-bottom: 70px; gap: 32px; }.hero h1 { font-size: 38px; }.hero-copy > p { font-size: 14px; }.hero-actions { flex-direction: column; }.hero-actions button { width: 100%; }.trust-row { margin-top: 25px; }.studio-window { transform:none; }.studio-body { grid-template-columns: 48px 1fr; min-height: 390px; }.studio-sidebar { overflow:hidden; }.studio-main { padding: 13px; }.prompt-box { grid-template-columns: 28px 1fr; }.prompt-box button { grid-column: 1/-1; }.agent-mini-grid { grid-template-columns: 1fr 1fr; }.human-card { display:none; }.floating-tag { display:none; }.partner-strip { flex-direction:column; gap:15px; }.partner-strip div { justify-content:center; gap:15px 22px; }.agents,.template-section,.workflow,.pricing { padding-top: 82px; padding-bottom:82px; }.section-heading h2,.workflow h2,.sync-copy h2,.final-cta h2 { font-size:32px; }.agent-grid,body[data-theme="community"] .agent-grid,.template-grid,body[data-theme="community"] .template-grid,.price-grid { grid-template-columns:1fr; }.split-heading { align-items:flex-start; flex-direction:column; }.category-tabs { max-width:100%; overflow-x:auto; }.category-tabs button { white-space:nowrap; }.workflow-visual { min-height:410px; transform:scale(.86); margin-inline:-35px; }.flow-center { width:140px;height:140px; }.flow-node { width:105px;height:82px; }.sync-section { padding-block:50px; }.sync-card { padding:34px 24px; }.device-stage { height:310px; transform:scale(.75); transform-origin:left top; width:130%; }.price-grid article.popular { transform:none; }.final-cta { padding:60px 24px; margin-bottom:70px; }footer { grid-template-columns:1fr; }footer > div { flex-wrap:wrap; }footer > small { grid-column:auto; }.toast { left:16px; right:16px; bottom:16px; min-width:0; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }