/* 根官网补充样式(GMV 站样式之外): 导航新功能角标、联系方式、大数字、模拟数据角标、视频窗口 */
.nav a.ext sup{font-size:9px;font-weight:700;margin-left:3px;color:#0071e3;letter-spacing:.02em}
.window video{display:block;width:100%;background:#000}
.bignum{display:block;font-size:clamp(48px,7vw,84px);font-weight:700;letter-spacing:-.03em}
.contact{max-width:760px;margin:0 auto;text-align:center}
.contact h2{font-size:clamp(28px,4vw,44px);font-weight:700;margin-bottom:22px}
.contact p{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;color:var(--ink2)}
.demo-chip,.tagdemo{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:rgba(0,113,227,.12);color:#0071e3}
.chrome .demo-chip{margin-left:auto}
.shot-link{position:relative;display:block}
.shot-link .demo-chip{position:absolute;top:12px;right:14px;z-index:2;background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(0,0,0,.08)}
a.shots{display:block;color:inherit}
.menu a{display:flex;gap:12px;align-items:center}
.menu a span:not(.ic-box){display:block;font-size:12px;color:var(--mute)}
.ic-box{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(0,113,227,.1);color:#0071e3;flex:none}

/* ===== 站内页动效(老板 10-22『站内也搞炫酷点』): 字不动, 只加视觉和交互 ===== */
#progress{position:fixed;left:0;top:0;height:2.5px;width:100%;z-index:200;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#0071e3,#7c5cff,#e45bff);pointer-events:none}
#app.enter{animation:pageIn .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes pageIn{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
/* 页头极光 + 网格 */
.page-hero,.doc{position:relative;isolation:isolate}
.page-hero::before,.doc::before{content:"";position:absolute;left:50%;top:40px;width:min(1200px,120vw);height:560px;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(38% 46% at 30% 40%,rgba(0,113,227,.20),transparent 70%),radial-gradient(34% 42% at 70% 35%,rgba(124,92,255,.18),transparent 70%),radial-gradient(30% 40% at 52% 70%,rgba(228,91,255,.13),transparent 70%);
  filter:blur(20px);animation:aurora 14s ease-in-out infinite alternate}
.page-hero::after,.doc::after{content:"";position:absolute;left:0;right:0;top:0;height:640px;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(0,0,0,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.045) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(60% 70% at 50% 20%,#000,transparent 75%);mask-image:radial-gradient(60% 70% at 50% 20%,#000,transparent 75%)}
@keyframes aurora{0%{transform:translateX(-50%) rotate(0) scale(1)}50%{transform:translateX(-46%) rotate(4deg) scale(1.08)}100%{transform:translateX(-54%) rotate(-3deg) scale(1.02)}}
/* 标题逐字浮现 */
.chars .ch{display:inline-block;opacity:0;transform:translateY(.45em) rotateX(-50deg);filter:blur(8px);animation:chIn .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*38ms + .1s)}
@keyframes chIn{to{opacity:1;transform:none;filter:none}}
/* 截图 3D 跟手 + 扫光 */
.split .pic{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;will-change:transform;position:relative;overflow:hidden;box-shadow:0 30px 60px -30px rgba(20,20,60,.25)}
.split .pic:hover{box-shadow:0 50px 90px -35px rgba(40,40,120,.35)}
.split .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.split .pic.in::after{animation:sheen 1.4s .3s ease forwards}
@keyframes sheen{to{transform:translateX(120%)}}
/* 功能点: 左侧亮条依次点亮 */
.feat2 .spot>b::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:3px;background:linear-gradient(#0071e3,#7c5cff);transform:scaleY(0);transition:transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0)*90ms + .2s)}
.feat2 .spot.in>b::before{transform:scaleY(1)}
.feat2 .spot:hover{transform:translateX(6px)}
/* 产品页小导航 / 文档目录: 吸顶 + 跟着滚动亮 */
.tabs.sticky,.doc .toc{position:sticky;top:64px;z-index:20;padding:10px;margin-left:auto;margin-right:auto;border-radius:999px;width:fit-content;max-width:100%;background:rgba(251,251,253,.93);backdrop-filter:saturate(1.8) blur(18px);-webkit-backdrop-filter:saturate(1.8) blur(18px);box-shadow:0 8px 30px -14px rgba(0,0,0,.18);border:1px solid rgba(0,0,0,.06)}
.doc .toc{border-radius:18px;justify-content:center}
.tabs.sticky button.on,.doc .toc a.on{background:#1d1d1f;color:#fff;border-color:#1d1d1f}
.doc .toc a{transition:all .3s}
.doc .block{transition:transform .5s,box-shadow .5s}
.doc .block.cur{box-shadow:0 20px 50px -28px rgba(0,60,160,.35);transform:translateY(-2px)}
.doc .block h2{display:flex;align-items:center;gap:10px}
.doc .block h2::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#0071e3,#7c5cff);box-shadow:0 0 0 4px rgba(0,113,227,.12)}
/* 深色区: 流动光晕 + 大数字发光 */
.sec.dark{overflow:hidden}
.sec.dark::after{content:"";position:absolute;width:900px;height:900px;left:50%;top:-30%;transform:translateX(-50%);background:conic-gradient(from 0deg,rgba(0,113,227,0),rgba(0,113,227,.22),rgba(124,92,255,.22),rgba(228,91,255,.14),rgba(0,113,227,0));border-radius:50%;filter:blur(90px);animation:spin 22s linear infinite;pointer-events:none;z-index:0}
.sec.dark>*{position:relative;z-index:1}
@keyframes spin{to{transform:translateX(-50%) rotate(360deg)}}
.bignum{background:linear-gradient(90deg,#fff,#9cc8ff,#c9b5ff,#fff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite;filter:drop-shadow(0 0 30px rgba(80,140,255,.35))}
@keyframes shine{to{background-position:200% 0}}
/* 关于: 办公室照片缓慢推近 */
.ken{overflow:hidden}
.ken img{animation:ken 24s ease-in-out infinite alternate;transform-origin:60% 40%}
@keyframes ken{from{transform:scale(1)}to{transform:scale(1.09)}}
.stats .spot{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.stats .spot:hover{transform:translateY(-6px)}
/* 价格: 年度方案流光边框 */
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
.plan.hot{border:1.5px solid transparent!important;background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--ang),#0071e3,#7c5cff,#e45bff,#0071e3) border-box!important;animation:ang 4s linear infinite;box-shadow:0 30px 70px -36px rgba(80,60,255,.45)}
@keyframes ang{to{--ang:360deg}}
.plan{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.plan:hover{transform:translateY(-6px)}
.cmp tr:hover td{background:rgba(0,113,227,.05)}
details.spot[open]{box-shadow:0 18px 40px -26px rgba(0,60,160,.35)}
@media (prefers-reduced-motion:reduce){.chars .ch,#app.enter,.page-hero::before,.doc::before,.sec.dark::after,.ken img,.bignum,.plan.hot{animation:none!important;opacity:1;transform:none;filter:none}}
@media (max-width:760px){.tabs.sticky,.doc .toc{top:58px;border-radius:16px}}

/* 10-24 老板『首页咋变黑了』: 原来苹果风的黑底段(.dark)一律改浅灰底深色字, 跟白底段交替; 品牌换 DorisMarketting 文字标 */
html[data-theme="apple"] main > section.dark { background: #f5f5f7; color: #1d1d1f; --ink: #1d1d1f; --ink2: #424245; --mute: #6e6e73; --dim: #86868b; --line: rgba(0, 0, 0, .08); --line2: rgba(0, 0, 0, .12); }
html[data-theme="apple"] main > section.dark .spot { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .05); }
html[data-theme="apple"] main > section.dark .prod .tag { background: #e8e8ed; color: #1d1d1f; }
html[data-theme="apple"] .dark .nums b.grad { background: linear-gradient(180deg, #1d1d1f, #6e6e73); -webkit-background-clip: text; background-clip: text; }
.dark .link { color: #0066cc; }
.sec.dark::after { opacity: .35; }
.brand.wordmark { font-weight: 700; font-size: 17px; letter-spacing: -.01em; color: #1d1d1f; text-decoration: none; padding: 0 4px; }
html[data-theme="apple"] .hero h1 { font-size: clamp(40px, 6vw, 72px); }
.hero .company { margin-top: 10px; font-size: 15px; color: #6e6e73; letter-spacing: .02em; }
html[data-theme="apple"] .ring { background: #fff; color: #1d1d1f; --ink: #1d1d1f; --ink2: #424245; --mute: #6e6e73; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px rgba(0, 0, 0, .06); }
html[data-theme="apple"] main > section.dark .ring .spot, html[data-theme="apple"] .ring .spot { background: #f5f5f7; box-shadow: none; color: #1d1d1f; }

/* 10-24 产品多了云手机, 四张卡一排 */
@media (min-width: 1100px) { .prods { grid-template-columns: repeat(4, 1fr); } }