:root{
    --gold:#D4AF74; --gold-dark:#B8956A; --gold-dim:rgba(212,175,116,.12);
    --bg:#0B0D12; --bg-2:#12151C; --card:#161A23; --card-2:#1B202A;
    --line:rgba(212,175,116,.16); --line-2:rgba(255,255,255,.07);
    --text:#F2EEE6; --text-2:rgba(242,238,230,.66); --text-3:rgba(242,238,230,.4);
    --ok:#5FB98A;
    --serif:'Songti SC','Source Han Serif SC','Noto Serif SC',serif;
    --section-y:clamp(68px,8vw,120px);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg);color:var(--text);line-height:1.7;
    font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}
  .gold{color:var(--gold)}

  /* ============ 导航 ============ */
  .nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
    background:rgba(11,13,18,.74);border-bottom:1px solid var(--line)}
  .nav-in{display:flex;align-items:center;gap:26px;height:68px}
  .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
  /* 52px 高：logo 内含凤凰纹样与书法字，40px 时细节糊成一团 */
  .logo-img{height:52px;width:auto;flex:none;display:block;object-fit:contain}

  /* logo 扫光：把 logo 自己当遮罩，高光只落在金色笔画上。
     否则高光会糊成一条横贯整个方框的亮带，包括透明区域。 */
  .logo-mark{position:relative;display:block;flex:none}
  .logo-mark::after{content:'';position:absolute;inset:0;pointer-events:none;
    /* 窄而亮的一道，两侧带柔和过渡 —— 白色大面积铺在金色上反而看不出亮 */
    background:linear-gradient(105deg,
      transparent 43%,
      rgba(255,255,255,.5) 47.5%,
      rgba(255,255,255,1) 50%,
      rgba(255,255,255,.5) 52.5%,
      transparent 57%);
    background-size:260% 100%;background-repeat:no-repeat;background-position:0% 0;
    -webkit-mask:url(assets/intro-xuan.png) center/contain no-repeat;
    mask:url(assets/intro-xuan.png) center/contain no-repeat;
    animation:logoShine 1.9s ease-in-out infinite}
  /* 节奏：前 26% 停在框外（不可见）作间歇，其余 74% 扫过一遍。
     周期 1.9s → 静默 0.5s + 扫光 1.4s，即一道接一道几乎不停。
     想放慢只改上面那个 1.9s：静默 = 周期 × 26%，扫光 = 周期 × 74%。 */
  @keyframes logoShine{
    0%,26%{background-position:0% 0}
    100%  {background-position:100% 0}
  }
  .logo-tx b{display:block;font-family:var(--serif);letter-spacing:.18em;font-size:17px;color:var(--gold)}
  .logo-tx span{display:block;font-size:10px;letter-spacing:.22em;color:var(--text-3)}
  .nav-links{display:flex;gap:24px;margin-left:auto}
  .nav-links a{color:var(--text-2);text-decoration:none;font-size:14px;transition:.2s}
  .nav-links a:hover{color:var(--gold)}
  .nav-cta{padding:9px 20px;border-radius:999px;font-size:14px;text-decoration:none;
    border:1px solid var(--gold);color:var(--gold);transition:.2s;white-space:nowrap}
  .nav-cta:hover{background:var(--gold-dim)}

  /* ============ 通用 ============ */
  .btn{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 26px;border-radius:999px;
    font-size:15px;font-weight:600;text-decoration:none;transition:.22s;white-space:nowrap}
  .btn-gold{background:linear-gradient(135deg,#C9A462,#D4AF74);color:#12151C;box-shadow:0 8px 26px rgba(201,164,98,.3)}
  .btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(201,164,98,.42)}
  .btn-line{border:1px solid var(--line);color:var(--text)}
  .btn-line:hover{border-color:var(--gold);color:var(--gold)}
  .section{padding:var(--section-y) 0;border-top:1px solid var(--line-2)}
  .sec-hd{max-width:760px;margin-bottom:44px}
  .sec-kicker{font-size:12px;letter-spacing:.24em;color:var(--gold);text-transform:uppercase}
  .sec-hd h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.2vw,38px);margin-top:14px;line-height:1.32}
  .sec-hd p{margin-top:16px;color:var(--text-2);font-size:16px}
  .note{font-size:12px;color:var(--text-3)}

  /* ============ Hero ============ */
  /* 顶部不留内边距，品牌片紧贴导航下沿通栏铺满 */
  .hero{position:relative;overflow:hidden;padding:0 0 clamp(48px,6vw,84px)}
  /* 暖光改锚在底部，否则会被顶部整幅视频压住 */
  .hero::before{content:'';position:absolute;inset:auto 42% 3% -12%;height:520px;pointer-events:none;
    background:radial-gradient(ellipse at 32% 100%,rgba(212,175,116,.16),transparent 62%)}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);align-items:center;position:relative}
  .hero-tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--gold);
    border:1px solid var(--line);background:rgba(212,175,116,.07);padding:6px 14px;border-radius:999px;margin-bottom:24px}
  .hero-tag i{width:6px;height:6px;border-radius:50%;background:var(--gold)}
  .hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(20px,3.2vw,38px);line-height:1.35;letter-spacing:.01em}
  .hero h1 em{font-style:normal;color:var(--gold)}
  .hero-sub{margin-top:22px;font-size:clamp(15px,1.5vw,17px);color:var(--text-2);max-width:620px}
  .hero-points{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
  .hp{border:1px solid var(--line-2);border-radius:12px;padding:14px 16px;background:rgba(255,255,255,.02)}
  .hp b{display:block;font-size:15px;color:var(--gold)}
  .hp span{font-size:12.5px;color:var(--text-3)}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}

  /* 工作台示意卡 */
  .wb-demo{background:linear-gradient(160deg,var(--card),var(--bg-2));border:1px solid var(--line);
    border-radius:18px;padding:20px;box-shadow:0 24px 60px rgba(0,0,0,.34)}
  .wb-demo .bar{display:flex;align-items:center;gap:8px;margin-bottom:16px}
  .wb-demo .dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)}
  .wb-demo .bar span{font-size:12px;color:var(--text-3);margin-left:6px}
  .wb-steps{display:flex;flex-direction:column;gap:9px}
  .wb-step{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;
    border:1px solid var(--line-2);background:rgba(255,255,255,.02);font-size:13.5px}
  .wb-step .n{width:22px;height:22px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
    font-size:11px;background:rgba(255,255,255,.08);color:var(--text-2)}
  .wb-step.on{border-color:rgba(212,175,116,.5);background:var(--gold-dim)}
  .wb-step.on .n{background:linear-gradient(135deg,#C9A462,#D4AF74);color:#12151C;font-weight:700}
  .wb-step.done .n{background:rgba(95,185,138,.22);color:var(--ok)}
  /* 完成态对勾用内联 SVG 而非 U+2713 对勾字符：后者落在 emoji 码点区段，
     跨系统字体渲染不一致，且被 scripts/check-company-site.sh §4 判红（spec §11） */
  .wb-step .n svg{width:12px;height:12px;display:block}
  .wb-step .sub{margin-left:auto;font-size:11.5px;color:var(--text-3)}

  /* Hero 品牌片（放在「AIGC 创作者商业赋能平台」那行上方） */
  /* 通栏：无边框圆角（贴边元素带圆角会露出破绽），左右到屏幕边缘。
     高度压到 72vh / 720px 以内，超出的画面由 object-fit:cover 裁掉上下。
     必须显式写 width:100% —— 否则 aspect-ratio 会按被压缩后的高度反推出
     一个更窄的宽度（实测 1440 视口下缩到 1152px），右侧会空出一条。 */
  .hero-media{position:relative;width:100%;margin:0 0 clamp(34px,4.2vw,54px);
    overflow:hidden;background:var(--card);aspect-ratio:16/9;max-height:min(72vh,720px)}
  .hero-media video{display:block;width:100%;height:100%;object-fit:cover}
  /* 遮罩沿用老官网的比例：上下略深、中段偏透 */
  .hero-media::after{content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to bottom,rgba(11,13,18,.4) 0%,rgba(11,13,18,.18) 42%,rgba(11,13,18,.56) 100%)}
  /* 品牌名压在视频正中，字距与排版对齐老官网（text-indent 抵消末字右侧字距） */
  .hero-media-title{position:absolute;inset:0;z-index:1;pointer-events:none;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--serif);font-weight:400;color:var(--gold);
    font-size:clamp(34px,6vw,80px);letter-spacing:.28em;text-indent:.28em}
  .hero-ctl{position:absolute;right:14px;bottom:14px;z-index:1;display:flex;gap:8px}
  .hero-ctl-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
    background:rgba(11,13,18,.62);color:var(--text);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    backdrop-filter:blur(8px);transition:border-color .2s,color .2s}
  .hero-ctl-btn:hover{border-color:var(--gold);color:var(--gold)}
  .hero-ctl-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  .hero-ctl-btn svg{width:18px;height:18px;fill:currentColor}
  /* 图标成对：默认显示"点下去会发生什么"，aria-pressed 时换成另一种 */
  .icon-play,.icon-sound-off{display:none}
  .hero-pause[aria-pressed="true"] .icon-pause{display:none}
  .hero-pause[aria-pressed="true"] .icon-play{display:block}
  .hero-sound[aria-pressed="true"] .icon-sound-on{display:none}
  .hero-sound[aria-pressed="true"] .icon-sound-off{display:block}

  /* ============ 角色 Tab（页面核心） ============ */
  .roles{position:relative}
  .roles::before{content:'';position:absolute;inset:-14% 30% auto -8%;height:420px;pointer-events:none;
    background:radial-gradient(ellipse at 28% 0%,rgba(212,175,116,.1),transparent 64%)}
  .tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);position:relative}
  .tab{appearance:none;-webkit-appearance:none;background:none;border:0;cursor:pointer;
    font-family:inherit;font-size:16px;color:var(--text-3);padding:16px 26px;position:relative;
    transition:color .22s;white-space:nowrap}
  .tab:hover{color:var(--text-2)}
  .tab:focus-visible{outline:2px solid var(--gold);outline-offset:-4px;border-radius:6px}
  .tab[aria-selected="true"]{color:var(--gold)}
  .tab::after{content:'';position:absolute;left:26px;right:26px;bottom:-1px;height:2px;border-radius:2px;
    background:var(--gold);transform:scaleX(0);transition:transform .3s cubic-bezier(.22,1,.36,1)}
  .tab[aria-selected="true"]::after{transform:scaleX(1)}

  .panel{padding-top:38px;animation:panelIn .38s cubic-bezier(.22,1,.36,1) both}
  .panel[hidden]{display:none}
  .panel:focus{outline:none}
  @keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .panel-lead{font-size:clamp(16px,1.7vw,19px);max-width:760px;line-height:1.75}

  /* 分组标题 */
  .grp{margin-top:36px}
  .grp-hd{display:flex;align-items:center;gap:14px;margin-bottom:16px}
  .grp-hd h3{font-family:var(--serif);font-weight:400;font-size:18px;color:var(--gold);flex:none}
  .grp-hd p{font-size:13px;color:var(--text-3);flex:none}
  .grp-hd::after{content:'';flex:1;height:1px;background:var(--line-2)}

  .feats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .feat{border:1px solid var(--line-2);border-radius:14px;padding:22px;background:rgba(255,255,255,.02);
    transition:border-color .24s,background .24s}
  .feat:hover{border-color:rgba(212,175,116,.4);background:var(--gold-dim)}
  .feat-n{font-family:var(--serif);font-size:13px;color:var(--gold);letter-spacing:.08em}
  .feat h4{font-size:15.5px;margin:10px 0 8px;font-weight:600}
  .feat p{font-size:13px;color:var(--text-2);line-height:1.68}

  /* 关键数据条 */
  .metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .metric{background:var(--bg-2);padding:20px 22px}
  .metric b{display:block;font-family:var(--serif);font-size:clamp(23px,2.5vw,29px);color:var(--gold);
    line-height:1;font-variant-numeric:tabular-nums}
  .metric span{display:block;font-size:12.5px;color:var(--text-3);margin-top:9px;line-height:1.5}

  /* 案例卡 */
  .cases{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .case-card{border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--card);
    display:flex;flex-direction:column;gap:11px;transition:border-color .24s}
  .case-card:hover{border-color:rgba(212,175,116,.4)}
  .case-tag{align-self:flex-start;font-size:11.5px;color:var(--gold);border:1px solid var(--line);
    border-radius:999px;padding:3px 11px}
  .case-card h4{font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.45}
  .case-card p{font-size:13px;color:var(--text-2);line-height:1.68}
  .nums{display:flex;gap:20px;flex-wrap:wrap;margin-top:auto;padding-top:15px;border-top:1px dashed var(--line)}
  .nums b{display:block;font-family:var(--serif);font-size:19px;color:var(--gold);line-height:1;
    font-variant-numeric:tabular-nums}
  .nums span{display:block;font-size:11px;color:var(--text-3);margin-top:6px}

  /* ============ 保障 ============ */
  .guards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .gd{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--bg-2)}
  .gd b{font-size:15px;display:block;margin-bottom:8px}
  .gd p{font-size:13px;color:var(--text-2);line-height:1.68}

  /* ============ 入驻 ============ */
  .join{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .join-col{border:1px solid var(--line);border-radius:16px;padding:28px;background:var(--card);
    display:flex;flex-direction:column}
  .join-col h3{font-family:var(--serif);font-weight:400;font-size:20px;color:var(--gold);margin-bottom:8px}
  .join-col .desc{font-size:13.5px;color:var(--text-2);margin-bottom:18px}
  .join-steps{list-style:none;display:flex;flex-direction:column;gap:14px;counter-reset:s}
  .join-steps li{display:flex;gap:12px;font-size:14px;color:var(--text-2);counter-increment:s}
  .join-steps li::before{content:counter(s);flex:none;width:22px;height:22px;border-radius:50%;
    background:var(--gold-dim);color:var(--gold);font-size:12px;display:flex;align-items:center;justify-content:center}
  .join-col .btn{margin-top:22px;height:44px;font-size:14px;align-self:flex-start}

  /* ============ footer ============ */
  footer{border-top:1px solid var(--line);padding:44px 0;color:var(--text-3);font-size:13px}
  .foot-in{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
  footer a{color:var(--text-2);text-decoration:none}
  footer a:hover{color:var(--gold)}

  @media(max-width:1000px){
    .hero-grid,.join{grid-template-columns:1fr}
    .feats,.guards,.metrics,.cases{grid-template-columns:repeat(2,1fr)}
    .nav-links{display:none}
  }
  @media(max-width:620px){
    .feats,.guards,.hero-points,.cases{grid-template-columns:1fr}
    .metrics{grid-template-columns:repeat(2,1fr)}
    .tab{padding:14px 12px;font-size:15px}
    .tab::after{left:12px;right:12px}
    .case-card{padding:20px}
    /* 窄屏下说明文字换行，末尾那条横线就多余了 */
    .grp-hd{flex-wrap:wrap;gap:8px}
    .grp-hd::after{display:none}
  }
  @media(prefers-reduced-motion:reduce){
    .panel{animation:none}
    .tab::after{transition:none}
    /* 注：logo 扫光与品牌片自动播放都不在此列 —— 按需求它们始终保留动效。
       系统开启「减少动效」时会一同失效，如需恢复，在这里加：
       .logo-mark::after{animation:none} */
  }

  /* ============ 语言切换（导航右侧） ============ */
  .nav-lang{padding:8px 16px;border-radius:999px;font-size:13px;text-decoration:none;
    color:var(--text-2);border:1px solid var(--line-2);transition:.2s;white-space:nowrap}
  .nav-lang:hover{color:var(--gold);border-color:var(--gold)}