:root { --ink:#1f2329; --muted:#687386; --blue:#3370ff; --line:#e9edf4; --soft:#f6f8fc; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font:16px/1.7 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
a { color:inherit; }
.header-container { position:fixed; top:0; left:0; z-index:20; width:100%; height:64px; display:flex; justify-content:center; background:rgba(255,255,255,.94); box-shadow:0 1px 8px rgba(0,0,0,.08); backdrop-filter:blur(8px); }
.header-content { width:min(1200px,calc(100% - 48px)); height:64px; display:flex; align-items:center; justify-content:space-between; }
.logo-wrap { display:flex; align-items:center; height:100%; }
.logo { display:inline-block; width:72px; height:34px; background:url("../static/images/logo-zh-cn.png") center/contain no-repeat; }
.header-menus { flex:1; display:flex; align-items:center; justify-content:space-between; min-width:0; }
.header-menus__conttent,.header-menus__tools { display:inline-flex; align-items:center; margin:0; padding:0; list-style:none; }
.header-menus__conttent { padding-left:70px; gap:48px; }
.header-menus__conttent a { font-size:16px; line-height:64px; color:#333; transition:color .2s ease; white-space:nowrap; text-decoration:none; }
.header-menus__conttent a:hover,.header-menus__conttent .active > a { color:var(--blue); }
.partner-dropdown { position:relative; }
.partner-dropdown > a { display:inline-flex; align-items:center; }
.partner-dropdown > a::after { content:""; width:6px; height:6px; margin-left:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-1px); transition:transform .2s ease; }
.partner-dropdown:hover > a::after { transform:rotate(-135deg) translateY(-1px); }
.partner-dropdown ul { position:absolute; top:100%; left:0; min-width:180px; margin:0; padding:8px 0; list-style:none; border-radius:6px; background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.08); opacity:0; visibility:hidden; transform:translateY(-6px); transition:all .2s ease; }
.partner-dropdown:hover ul { opacity:1; visibility:visible; transform:translateY(0); }
.partner-dropdown li a { display:block; padding:10px 24px; line-height:1.4; font-size:15px; }
.partner-dropdown li a:hover { background:#f5f7fa; }
.register-btn { display:inline-block; height:36px; padding:0 20px; border-radius:18px; color:#fff; background:var(--blue); font-size:14px; line-height:36px; white-space:nowrap; transition:opacity .2s ease; text-decoration:none; }
.register-btn:hover { opacity:.75; }
.hero { min-height:540px; padding:122px max(24px,calc((100vw - 1080px)/2)) 76px; display:grid; grid-template-columns:1fr .72fr; gap:44px; align-items:center; overflow:hidden; background:linear-gradient(118deg,#f4f7ff 0%,#eef4ff 48%,#f6f2ff 100%); }
.hero-copy { max-width:610px; }
.eyebrow,.section-kicker { margin:0 0 12px; color:#4774e8; font-size:14px; font-weight:700; letter-spacing:.08em; }
h1 { margin:0; max-width:620px; font-size:clamp(38px,5vw,66px); line-height:1.13; letter-spacing:-.04em; }
.hero-tagline { margin:22px 0 0; font-size:22px; font-weight:600; line-height:1.45; }
.hero-description { max-width:590px; margin:14px 0 0; color:#5d6a7e; font-size:17px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-width:132px; padding:11px 22px; border-radius:999px; font-weight:700; text-decoration:none; transition:transform .16s,box-shadow .16s; }
.button:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(51,112,255,.18); }
.button-primary { background:var(--blue); color:#fff; }
.button-secondary { border:1px solid #8aaaff; color:var(--blue); background:#fff; }
.hero-visual { min-height:300px; display:grid; place-items:center; }
.visual-window { position:relative; width:min(100%,390px); height:260px; padding:22px; border-radius:22px; background:rgba(255,255,255,.76); box-shadow:0 24px 60px rgba(58,90,150,.16); transform:rotate(3deg); }
.visual-bar { display:flex; gap:7px; }.visual-bar i { width:9px; height:9px; border-radius:50%; background:#b9c9f8; }.visual-bar i:first-child { background:#ffb3b3; }.visual-bar i:nth-child(2) { background:#ffd98b; }
.visual-lines { position:absolute; left:28px; top:76px; display:grid; gap:17px; width:50%; }.visual-lines span { height:12px; border-radius:8px; background:#dce6ff; }.visual-lines span:nth-child(2) { width:72%; background:#c4d4ff; }.visual-lines span:nth-child(3) { width:88%; }.visual-lines span:nth-child(4) { width:58%; background:#e1d8ff; }
.visual-orbit { position:absolute; right:32px; bottom:30px; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff 0 8%,transparent 9%),linear-gradient(135deg,#477dff,#9569e9); box-shadow:0 10px 26px rgba(67,102,221,.24); }
.product-switcher { max-width:1140px; margin:-26px auto 0; padding:10px; position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:5px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.94); box-shadow:0 12px 28px rgba(31,47,83,.08); }
.product-switcher a { padding:7px 13px; border-radius:9px; color:#687386; text-decoration:none; font-size:14px; }.product-switcher a:hover,.product-switcher a.active { background:#edf3ff; color:var(--blue); }
.section { padding:92px max(24px,calc((100vw - 1080px)/2)); }.section-light { background:#fff; }.section-tinted { background:#f7f9fd; }
.section-heading { max-width:720px; }.section-heading h2 { margin:0; font-size:clamp(28px,4vw,42px); line-height:1.25; letter-spacing:-.035em; }.section-heading > p:last-child { margin:15px 0 0; color:var(--muted); font-size:16px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; margin-top:38px; }.feature-card { padding:24px; border:1px solid var(--line); border-radius:14px; background:#fff; }.feature-no { color:#7a9cff; font-weight:800; font-size:13px; }.feature-card h3 { margin:11px 0 5px; font-size:18px; }.feature-card p { margin:0; color:var(--muted); font-size:14px; }
.scenario-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:34px; }.scenario-card { min-height:142px; padding:23px; border-radius:14px; background:#fff; }.scenario-card h3 { margin:0 0 7px; font-size:17px; }.scenario-card p { margin:0; color:var(--muted); font-size:14px; }
.guide-section { border-top:1px solid var(--line); }.guide-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:76px; align-items:start; }.guide-list { display:grid; gap:14px; margin:0; padding:0; list-style:none; counter-reset:guide; }.guide-list li { position:relative; min-height:68px; padding:14px 16px 14px 58px; border:1px solid var(--line); border-radius:12px; background:#fff; }.guide-list li::before { counter-increment:guide; content:counter(guide); position:absolute; left:17px; top:15px; display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#edf3ff; color:var(--blue); font-size:13px; font-weight:800; }.guide-list strong { display:block; font-size:15px; }.guide-list span { display:block; color:var(--muted); font-size:13px; }.notice { margin-top:38px; padding:15px 18px; border-left:3px solid #89a8ff; background:#f4f7ff; color:#607089; font-size:13px; }
.tutorial-video { max-width:780px; margin-top:48px; }.tutorial-video[hidden] { display:none; }.tutorial-video-heading h3 { margin:0; font-size:22px; }.tutorial-video-heading .section-kicker { margin-bottom:6px; }.tutorial-video-player { display:block; width:100%; max-height:520px; margin-top:18px; border-radius:14px; background:#10141b; box-shadow:0 18px 40px rgba(31,47,83,.14); }
.video-overlay { position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(10,15,24,.78); }.video-overlay[hidden] { display:none; }.video-dialog { position:relative; width:min(960px,100%); max-height:calc(100vh - 48px); overflow:auto; padding:48px 16px 16px; border-radius:14px; background:#0f1622; box-shadow:0 24px 80px rgba(0,0,0,.35); }.video-close { position:absolute; top:12px; right:14px; width:36px; height:36px; border:0; border-radius:50%; color:#fff; background:#1d2735; font-size:28px; line-height:1; cursor:pointer; }.video-picker { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }.video-card { position:relative; min-width:0; padding:0; overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:10px; color:#fff; background:#111923; text-align:left; cursor:pointer; }.video-card img { display:block; width:100%; aspect-ratio:1; object-fit:cover; opacity:.9; }.video-card span { position:absolute; right:0; bottom:0; left:0; padding:34px 12px 12px; color:#fff; background:linear-gradient(180deg,transparent,rgba(0,0,0,.8)); font-size:13px; font-weight:700; }.video-card:hover img { opacity:1; transform:scale(1.03); }.video-card img { transition:transform .2s ease,opacity .2s ease; }.video-player[hidden] { display:none; }.video-back { margin-bottom:12px; padding:8px 16px; border:0; border-radius:8px; color:#0564f5; background:#f0f4ff; cursor:pointer; }.video-player video { display:block; width:100%; max-height:70vh; border-radius:8px; background:#000; }.video-error { display:none; margin:10px 4px 0; padding:10px 12px; border-radius:8px; color:#ffb3b3; background:rgba(180,40,40,.2); font-size:13px; }.video-error:not([hidden]) { display:block; }
.site-footer { display:flex; justify-content:space-between; gap:20px; padding:25px max(24px,calc((100vw - 1080px)/2)); border-top:1px solid var(--line); color:#8b95a5; font-size:13px; }.site-footer a { color:#6478a0; text-decoration:none; }
@media (max-width:980px) { .header-menus__conttent { gap:24px; padding-left:32px; } }
@media (max-width:800px) { .header-content { width:calc(100% - 28px); }.header-menus { justify-content:flex-end; }.header-menus__conttent { display:none; }.hero { min-height:0; grid-template-columns:1fr; padding:94px 20px 54px; gap:20px; }.hero-copy { max-width:none; }.hero-visual { min-height:210px; }.visual-window { width:min(88vw,360px); height:220px; }.product-switcher { margin:-16px 14px 0; justify-content:flex-start; overflow:auto; flex-wrap:nowrap; white-space:nowrap; }.product-switcher a { flex:none; }.section { padding:64px 20px; }.feature-grid,.scenario-grid { grid-template-columns:1fr; margin-top:26px; }.guide-layout { grid-template-columns:1fr; gap:30px; }.tutorial-video { margin-top:34px; }.video-overlay { padding:12px; }.video-dialog { max-height:calc(100vh - 24px); padding:48px 10px 10px; }.video-picker { grid-template-columns:1fr; }.video-card { display:grid; grid-template-columns:104px 1fr; align-items:end; }.video-card img { width:104px; height:104px; }.video-card span { position:static; padding:14px; background:none; }.site-footer { flex-direction:column; padding:22px 20px; } }
@media (max-width:420px) { h1 { font-size:38px; }.hero-tagline { font-size:18px; }.hero-description { font-size:15px; }.button { flex:1; min-width:0; padding-left:12px; padding-right:12px; } }

body.video-open { overflow:hidden; }
.video-picker[hidden] { display:none; }
.video-card-art { display:grid; place-items:center; aspect-ratio:1; font-size:40px; font-weight:700; background:linear-gradient(135deg,#3370ff,#8367e8); }
@media (max-width:800px) { .video-card-art { width:104px; height:104px; font-size:23px; } }