/* ============================================================
   JIUHUI ADVERTISING · V11 PREMIUM VISUAL SYSTEM
   白 / 黑 / 深灰 / 品牌橙 #F8AA05 · 编辑级错落排版
   纯视觉覆盖层：不改动任何 HTML 结构与 JS 钩子
   ============================================================ */
:root{
  --ink:#0e1013;
  --char:#1b1e23;
  --graphite:#3b4048;
  --mist:#f4f4f2;
  --line:#e4e4e0;
  --orange:#f8aa05;
  --orange-deep:#d98e00;
  --muted:#767b82;
  --serif:"Noto Serif SC",Georgia,"Songti SC",serif;
  --sans:"Noto Sans CJK SC","PingFang SC","Microsoft YaHei",sans-serif;
}
body{font-family:var(--sans);color:var(--ink);background:#fff;letter-spacing:.01em}

/* ---------- 顶部导航 ---------- */
.topbar{background:#ffffffe8;backdrop-filter:blur(18px);border-bottom:1px solid #0000000d}
.brand-title{font-weight:800}
.navlinks a{font-size:13px;letter-spacing:.06em;position:relative;padding:6px 0}
.navlinks a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--orange);transition:width .28s}
.navlinks a:hover::after,.navlinks a.current::after{width:100%}
.navlinks a:hover,.navlinks a.current{color:var(--ink)}
.header-contact{background:var(--ink);border:1px solid var(--ink);transition:.25s}
.header-contact:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}

/* ---------- HERO：电影级三联 Banner ---------- */
.hero{background:#0a0b0d;height:min(860px,calc(100svh - 84px))}
.hero-slide:before{filter:saturate(.9) contrast(1.06)}
.hero-slide.is-active:before{animation:jhZoom 7s ease forwards}
@keyframes jhZoom{from{transform:scale(1.07)}to{transform:scale(1)}}
.hero-overlay{
  background:
    linear-gradient(90deg,rgba(8,9,11,.97) 0%,rgba(8,9,11,.85) 26%,rgba(8,9,11,.42) 55%,rgba(8,9,11,.08) 100%),
    linear-gradient(0deg,rgba(8,9,11,.55),transparent 40%)}
.hero-slide .hero-content::before{
  content:"JIUHUI";position:absolute;left:-8px;top:50%;transform:translateY(-58%);
  font-size:clamp(120px,17vw,260px);font-weight:900;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px #ffffff14;pointer-events:none;user-select:none}
.hero-kicker{color:var(--orange);display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.3em}
.hero-kicker::before{content:"";width:34px;height:2px;background:var(--orange)}
.hero-content :is(h1,h2){
  font-weight:820;font-size:clamp(58px,6.6vw,110px);line-height:1.12;letter-spacing:-.055em;
  text-shadow:0 6px 40px #0009}
.hero-content :is(h1,h2) em{font-style:normal;color:var(--orange)}
.hero-content p{color:#c9ccd2;max-width:520px}
.hero-actions .btn-cream{background:var(--orange);color:#141414;border-radius:2px}
.hero-actions .btn-cream:hover{background:#ffc233;transform:translateY(-3px)}
.hero-actions .btn-outline{border-color:#ffffff45;border-radius:2px}
.hero-actions .btn-outline:hover{background:#ffffff14;border-color:#fff}
.hero-indicator #hero-count{color:var(--orange);font-size:26px;font-weight:800}
.hero-track{height:2px;background:#ffffff2e;width:150px;overflow:hidden}
.hero-track i{background:var(--orange);width:33.333%}
.hero-navigation button{border-radius:50%;border:1px solid #ffffff30;background:#00000042;transition:.25s}
.hero-navigation button:hover{background:var(--orange);border-color:var(--orange);color:#141414}
.hero-vertical{color:#ffffff66}
.hero-side-note{border:1px solid #ffffff24;background:#0c0e10a6;backdrop-filter:blur(6px);color:#ffffffa8}

/* ---------- 能力横条 ---------- */
.capability-strip{background:var(--ink);border-bottom:3px solid var(--orange)}
.cap-inner span{color:#ffffff88}
.cap-inner a{color:#e8e9eb;font-weight:700}
.cap-inner a:hover{color:var(--orange)}

/* ---------- 章节标题 ---------- */
.eyebrow{color:var(--orange);font-weight:800}
.section h2,.intro h2,.about-grid h2,.promise h2{font-weight:800;letter-spacing:-.045em}
.section h2 span,.intro h2 .serif-word,.v7-section-heading h2 span{color:var(--orange)}
.intro-right p{color:var(--graphite)}
.arrow-link{border-bottom:2px solid var(--ink);font-weight:800}
.arrow-link:hover{color:var(--orange-deep);border-color:var(--orange)}

/* ---------- 解决方案四卡 ---------- */
.v7-solutions{background:var(--mist)}
.solution-card{height:520px}
.solution-card img{filter:saturate(.55) contrast(1.05)}
.solution-card:hover img{filter:saturate(1.05);transform:scale(1.07)}
.solution-text small{color:var(--orange);letter-spacing:.2em}
.solution-text strong{font-weight:800;letter-spacing:-.03em}
.solution-detail{color:#f8aa05cc}

/* ---------- 六大业务：编辑级错落大图 ---------- */
.service-area{background:#0e1013;color:#fff;padding:130px 0}
.service-area .eyebrow{color:var(--orange)}
.service-area .section-topline p{color:#9aa0a8}
.srv-grid{grid-template-columns:repeat(12,1fr);gap:20px}
.srv-card{height:560px;grid-column:span 7;border-radius:3px;outline:1px solid #ffffff12;outline-offset:-1px}
.srv-card:nth-child(1){grid-column:span 5;height:560px}
.srv-card:nth-child(3){grid-column:span 5;height:640px;margin-top:-80px}
.srv-card:nth-child(4){grid-column:span 7;height:560px}
.srv-card:nth-child(5){grid-column:span 5;height:520px}
.srv-card:nth-child(6){grid-column:span 7;height:520px;margin-top:-60px}
.srv-image{filter:saturate(.6) contrast(1.06);transition:transform .8s cubic-bezier(.2,.65,.15,1),filter .5s}
.srv-card:hover .srv-image{transform:scale(1.06);filter:saturate(1.05)}
.srv-shade{background:linear-gradient(185deg,#00000005 30%,#05070ac9 88%)}
.srv-top{top:30px;font-size:11px}
.srv-top span:first-child{color:var(--orange);font-weight:800;font-size:13px}
.srv-bottom h3{font-weight:820;letter-spacing:-.04em;text-shadow:0 4px 24px #000a}
.srv-bottom small{color:var(--orange);font-weight:700;letter-spacing:.08em}
.srv-bottom p{color:#cfd2d8}

/* ---------- 产品快速索引 ---------- */
.v8-product-index{background:var(--ink)}
.v8-index-head h2 span{color:var(--orange)}
.v8-index-grid a{background:#16181c;transition:.25s}
.v8-index-grid a:hover{background:#1f2228;outline:1px solid var(--orange);outline-offset:-1px}
.v8-index-grid a:hover em{color:var(--orange);transform:translate(3px,-3px)}
.v8-index-grid em{transition:.25s;color:#ffffff66}
.v8-index-grid b{font-weight:800}

/* ---------- 应用展示画廊 ---------- */
.work-area{background:#fff}
.filters button{border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:700}
.filters button:hover{border-color:var(--ink)}
.filters button.selected{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:inset 0 -3px 0 var(--orange)}
.work-media{box-shadow:0 10px 34px #10121414;border-radius:3px}
.work-media img{filter:saturate(.82);transition:transform .6s,filter .4s}
.work:hover .work-media img{transform:scale(1.07);filter:saturate(1.05)}
.work:hover .work-info strong{color:var(--orange-deep)}
.work-info{border-top:2px solid transparent;transition:.25s}
.work:hover .work-info{border-top-color:var(--orange)}
.work-info strong{font-weight:800;letter-spacing:-.01em}
.work-arrow{color:var(--orange)}
.work[data-feature="yes"] .work-media:after{background:#0e1013cc;color:var(--orange)}

/* ---------- 行业 / 承诺 / 流程 ---------- */
.industry-area{background:var(--mist)}
.industry-card img{filter:saturate(.55)}
.industry-card:hover img{filter:saturate(1)}
.industry-card small{color:var(--orange);font-weight:800}
.industry-card b{border-color:var(--orange);color:var(--orange)}
.promise-items>div:hover span{color:var(--orange)}
.promise-items span{color:#c3c6cb;font-weight:800}
.v7-process{background:var(--char)}
.v7-process .eyebrow{color:var(--orange)}
.v7-steps b{color:var(--orange);font-family:var(--serif)}
.v7-steps>div:hover{background:#20242b}

/* ---------- 结尾 CTA ---------- */
.final-cta{background:var(--ink)}
.final-cta h2 em{color:var(--orange)}
.final-cta:after{color:#ffffff07}
.final-cta .btn-cream{background:var(--orange);color:#141414;border-radius:2px}
.final-cta .btn-cream:hover{background:#ffc233}

/* ---------- 页脚 ---------- */
.footer{background:#0a0b0d}
.foot-kicker{color:var(--orange)}
.footer h2 span{color:var(--orange)}
.footer-nav a:hover{color:var(--orange)}

/* ---------- 内页统一 ---------- */
.sub-hero{background:var(--char)}
.sub-bg{filter:saturate(.6) contrast(1.05)}
.sub-content .eyebrow{color:var(--orange)}
.v7-subhero:before{background:linear-gradient(90deg,#0e1013f2,#0e1013a8 55%,#0e101326),url('v7-cinematic-hero.webp') center right/cover}
.v7-subhero .eyebrow{color:var(--orange)}
.detail-copy .eyebrow{color:var(--orange)}
.detail-tags span{background:var(--ink);color:#fff;border-radius:999px}
.value-grid>div:hover{box-shadow:0 14px 40px #10121412;border-top:3px solid var(--orange)}
.scope-card:hover{border-color:var(--orange)}
.catalogue-card:hover{border-color:var(--orange);box-shadow:0 12px 34px #10121410}

/* ---------- 弹窗 / 咨询面板 / 快捷联系 ---------- */
.viewer{background:#0a0b0de8;backdrop-filter:blur(8px)}
.viewer-copy small{color:var(--orange);font-weight:800}
.viewer-copy .btn-dark{background:var(--orange);color:#141414;border-radius:2px}
.jh-panel-top span{color:var(--orange);font-weight:800;letter-spacing:.14em}
.jh-panel-dial{background:var(--orange)!important;color:#141414!important;border-radius:2px}
.quick-contact a:last-child{background:var(--orange);border-color:var(--orange);color:#141414}
.quick-contact a:last-child span{color:#14141499}

/* ---------- 手机端 ---------- */
@media(max-width:1080px){
  .srv-grid{gap:14px}
  .srv-card,.srv-card:nth-child(n){grid-column:span 6;height:380px;margin-top:0}
  .work-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .hero{height:92svh;min-height:600px}
  .hero-content{padding-top:96px}
  .hero-slide .hero-content::before{font-size:34vw;left:-4px;top:auto;bottom:-4%;transform:none}
  .hero-content :is(h1,h2){font-size:clamp(40px,11vw,60px)}
  .hero-kicker{font-size:9px;letter-spacing:.22em}
  .hero-actions .btn{flex:1;justify-content:center;gap:10px}
  .service-area{padding:80px 0}
  .srv-grid{grid-template-columns:1fr;gap:12px}
  .srv-card,.srv-card:nth-child(n){grid-column:span 1;height:300px;margin-top:0}
  .work-grid{grid-template-columns:repeat(2,1fr);gap:11px}
  .work-media{height:170px}
  .work[data-feature="yes"] .work-media{height:230px}
  .solutions-grid{grid-template-columns:1fr}
  .solution-card{height:400px}
  .filters{scrollbar-width:none}
  .quick-contact a{min-height:58px}
  .arrow-link{gap:20px}
  .final-cta h2{font-size:clamp(40px,11vw,54px)}
}
@media(prefers-reduced-motion:reduce){
  .hero-slide.is-active:before{animation:none}
}

/* V11.2: 头部微信入口始终保持高对比度 */
.header-contact,.header-contact:visited{color:#fff!important}
.header-contact:hover,.header-contact:focus-visible{color:#15181b!important}
.header-contact:focus-visible{outline:3px solid #f8aa05;outline-offset:3px}

/* V11.3: 统一咨询来源标记按钮 */
.jh-copy-intent{background:#f8aa05;color:#101114;border:0;padding:11px 16px;border-radius:4px;font-weight:750;cursor:pointer;max-width:100%;text-align:center}
.jh-copy-intent:hover,.jh-copy-intent:focus-visible{background:#ffbf3f;outline:2px solid #1b1b1b;outline-offset:2px}
.jh-panel-hint{white-space:pre-line;overflow-wrap:anywhere}