/* ==== O3 首页样式（front-page.php）==== */
/* 全部走 :root 设计 token；新块 .vt- 前缀 + BEM；full-bleed 分区 + 限宽内容；含 <768px 响应式。 */

:root{
  /* 数字展示字体（DIN 工程字体族，系统自带，不加载 web font）——design-system §3 首次落地 */
  --font-num:"Bahnschrift","DIN Alternate","DIN Condensed","Oswald",var(--font-sans);
}

.vt-home{--vt-max:1290px}

/* ---- 按钮（首页 CTA / 次级 / 深底 ghost）---- */
.vt-btn{display:inline-block;border:1px solid transparent;border-radius:var(--radius-sm);padding:var(--space-3) var(--space-6);font-size:var(--fs-base);font-weight:var(--fw-medium);font-family:inherit;line-height:1.2;cursor:pointer;text-decoration:none;transition:background .18s,color .18s}
.vt-btn--primary{background:var(--color-primary);color:#fff}
.vt-btn--primary:hover{background:var(--color-primary-dark);color:#fff}
.vt-btn--cta{background:var(--color-accent);color:#fff}
.vt-btn--cta:hover{background:var(--color-accent-dark);color:#fff}
.vt-btn--secondary{background:#fff;color:var(--color-primary);border-color:var(--color-primary)}
.vt-btn--secondary:hover{background:var(--color-primary-050)}
.vt-btn--ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.vt-btn--ghost-light:hover{background:rgba(255,255,255,.14);color:#fff}

/* ---- 1. Hero 轮播（淡入淡出；高度较初版增高约 1/3）---- */
.vt-hero{position:relative;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;overflow:hidden}
.vt-hero__track{position:relative}
.vt-hero__slide{position:absolute;inset:0;display:flex;align-items:center;min-height:800px;overflow:hidden;background:#08111a;color:#fff;opacity:0;transition:opacity .6s ease;pointer-events:none}
.vt-hero__slide.is-active{position:relative;opacity:1;pointer-events:auto}
.vt-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.vt-hero__slide::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to right,rgba(8,17,26,.80) 0%,rgba(8,17,26,.62) 42%,rgba(8,17,26,.22) 72%,rgba(8,17,26,0) 100%)}
.vt-hero__inner{position:relative;z-index:2;max-width:var(--vt-max);margin:0 auto;padding:var(--space-16) 20px;width:100%}
.vt-hero__eyebrow{color:rgba(255,255,255,.85);font-size:var(--fs-sm);font-weight:var(--fw-medium);letter-spacing:1px;margin:0 0 var(--space-3)}
.vt-hero__title{font-size:32px;font-weight:800;line-height:var(--lh-heading);margin:0;color:#fff;white-space:nowrap}
.vt-hero__sub{font-size:var(--fs-md);color:rgba(255,255,255,.88);line-height:var(--lh-body);margin:var(--space-4) 0 var(--space-8);max-width:40em}
.vt-hero__actions{display:flex;gap:var(--space-4);flex-wrap:wrap}
/* 左右切换按钮：圆角方钮 + 半透明深底 + 细描边，hover 转强调橙 */
.vt-hero__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--radius-md);background:rgba(11,26,38,.42);border:1px solid rgba(255,255,255,.4);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-shadow:none;-webkit-tap-highlight-color:transparent;transition:background .18s,border-color .18s,transform .18s}
/* 静置态显式声明 :focus —— Kadence 父主题全局 `button:focus`（与 :hover 同组）会接管 background 与
   box-shadow，而鼠标点击后按钮仍保有焦点，导致点过的切换钮底色卡在 hover 色不回弹。此处以同特异性
   的类选择器盖回静置态，使点击后立即复原。 */
.vt-hero__arrow:focus{background:rgba(11,26,38,.42);border-color:rgba(255,255,255,.4);color:#fff;box-shadow:none}
/* 键盘聚焦才给焦点环（:focus-visible 不被鼠标点击命中），兼顾可达性与鼠标观感 */
.vt-hero__arrow:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
.vt-hero__arrow:hover{background:var(--color-accent);border-color:var(--color-accent);box-shadow:none}
.vt-hero__arrow:active{transform:translateY(-50%) scale(.94)}
.vt-hero__arrow svg{display:block}
.vt-hero__arrow--prev{left:24px}
.vt-hero__arrow--next{right:24px}
.vt-hero__dots{position:absolute;bottom:22px;left:0;right:0;display:flex;justify-content:center;gap:10px;z-index:3}
.vt-hero__dot{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,.45);cursor:pointer;padding:0;box-shadow:none;-webkit-tap-highlight-color:transparent;transition:width .2s,background .2s}
/* 同切换钮：盖回 Kadence `button:focus`，避免点过的圆点残留底色。须排在 .is-active 之前 —— 两者
   特异性相同（0,2,0），靠源序决胜，后置的 .is-active 才能保住激活点的橙色。 */
.vt-hero__dot:focus{background:rgba(255,255,255,.45);box-shadow:none}
/* 同源问题漏网的一处：本类原本没有 :hover 规则，父主题 `button:hover` 的背景/阴影会直接生效，
   表现为"悬停圆点也变色"。这里显式声明回静置态，不引入新的悬停视觉。 */
.vt-hero__dot:hover{background:rgba(255,255,255,.45);box-shadow:none}
.vt-hero__dot.is-active{background:var(--color-accent);width:26px;border-radius:5px}
.vt-hero__dot:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---- 2. 公司简介（标题居中 + 橙线；首段 lead 强调）---- */
.vt-intro{max-width:940px;margin:0 auto}
.vt-intro__title{font-size:var(--fs-2xl);color:var(--color-ink);font-weight:var(--fw-bold);line-height:var(--lh-heading);text-align:center;margin:0 0 var(--space-8)}
.vt-intro__title::after{content:"";display:block;width:56px;height:4px;border-radius:2px;background:var(--color-accent);margin:var(--space-4) auto 0}
.vt-intro__lead{font-size:var(--fs-md);color:var(--color-ink);line-height:var(--lh-body);margin:0 0 var(--space-4)}
.vt-intro__lead:last-child{margin-bottom:0}

/* ---- 3. 信任数字墙（浅底，与「服务行业标杆客户」区一致）---- */
.vt-statwall{position:relative;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;background:var(--color-bg-soft)}
.vt-statwall__inner{max-width:var(--vt-max);margin:0 auto;padding:var(--space-12) 20px;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
.vt-stat{text-align:center}
.vt-stat__num{font-family:var(--font-num);font-size:48px;font-weight:600;color:var(--color-accent);line-height:1;letter-spacing:.5px;font-feature-settings:"tnum"}
.vt-stat__unit{font-size:.5em;font-weight:700;vertical-align:middle;margin-left:2px;color:var(--color-accent)}
.vt-stat__label{font-size:var(--fs-sm);color:var(--color-muted);margin-top:var(--space-2)}

/* ---- 通用分区（白 / 浅灰交替）---- */
.vt-sec{position:relative;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;background:var(--color-bg)}
.vt-sec--soft{background:var(--color-bg-soft)}
.vt-sec__inner{max-width:var(--vt-max);margin:0 auto;padding:calc(var(--space-16) + var(--space-4)) 20px}
.vt-sec__title{font-size:var(--fs-2xl);color:var(--color-ink);font-weight:var(--fw-bold);line-height:var(--lh-heading);margin:0 0 var(--space-6);position:relative;padding-left:14px}
.vt-sec__title::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:5px;border-radius:3px;background:var(--color-accent)}
.vt-sec__title--center{text-align:center;padding-left:0}
.vt-sec__title--center::before{display:none}
.vt-sec__note{color:var(--color-muted);font-size:var(--fs-md);margin:0 0 var(--space-8)}
.vt-sec__note--center{text-align:center}

/* ---- 4. 解决方案（图文导航卡）---- */
.vt-solutions{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
.vt-solution{display:flex;flex-direction:column;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card);text-decoration:none;transition:transform .2s,box-shadow .2s}
.vt-solution:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.vt-solution__media{aspect-ratio:40/26;overflow:hidden;background:var(--color-bg-soft)}
.vt-solution__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.vt-solution:hover .vt-solution__media img{transform:scale(1.05)}
.vt-solution__body{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2);flex:1;border-top:3px solid var(--color-primary)}
.vt-solution:hover .vt-solution__body{border-top-color:var(--color-accent)}
.vt-solution__title{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--color-ink);margin:0}
.vt-solution__tag{font-size:var(--fs-xs);color:var(--color-primary);background:var(--color-primary-050);align-self:flex-start;padding:2px 10px;border-radius:20px}
.vt-solution__desc{font-size:var(--fs-sm);color:var(--color-muted);line-height:var(--lh-body);margin:0}
.vt-solution__more{font-size:var(--fs-sm);color:var(--color-accent);font-weight:var(--fw-medium);margin-top:auto}

/* ---- 5. 热门产品网格（复用全站 .vt-card）---- */
.vt-cardgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
.vt-sec__cta{text-align:center;margin-top:var(--space-8)}

/* ---- 6. 核心工艺与选型指南（Tab）---- */
.vt-guide__tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-1);border-bottom:2px solid var(--color-border);margin-bottom:var(--space-8)}
.vt-guide__tab{background:transparent;border:0;border-bottom:2px solid transparent;font-family:inherit;font-size:var(--fs-base);font-weight:var(--fw-medium);color:var(--color-ink);text-align:center;padding:var(--space-3) var(--space-4);cursor:pointer;position:relative;bottom:-2px;box-shadow:none;-webkit-tap-highlight-color:transparent;transition:color .18s}
/* 同切换钮：盖回 Kadence `button:focus`，避免点过的 Tab 残留底色。须排在 .is-active 之前。 */
.vt-guide__tab:focus{background:transparent;color:var(--color-ink);box-shadow:none}
/* hover 只做文字高亮、不动背景 —— 父主题 `button:hover` 会塞进 hover 底色与阴影，此处显式声明
   background:transparent + box-shadow:none 挡掉。高亮色用 --color-accent-dark 而非 --color-accent：
   本区为白底正文级字号，按 design-system §2 白底橙色文字须用深一档的那支保 AA 对比度。 */
.vt-guide__tab:hover{background:transparent;color:var(--color-accent-dark);box-shadow:none}
.vt-guide__tab.is-active{color:var(--color-primary);border-bottom-color:var(--color-accent)}
.vt-guide__tab:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.vt-guide__tabsub{display:block;font-size:var(--fs-xs);color:var(--color-muted);font-weight:var(--fw-normal);margin-top:2px}
.vt-guide__panel{display:grid;grid-template-columns:340px 1fr;gap:var(--space-12);align-items:stretch}
.vt-guide__panel[hidden]{display:none}
/* 左栏改 flex 纵向排列，让末尾 CTA 用 margin-top:auto 顶到容器左下角：panel 的 align-items 由
   start 改 stretch 后左栏被拉满行高，多余空间即被 auto 上边距吃掉。align-self 必须有 ——
   flex 纵向容器默认 align-items:stretch 会把按钮拉成通栏，失去左侧贴边。 */
.vt-guide__aside{display:flex;flex-direction:column}
.vt-guide__aside .vt-btn{align-self:flex-start;margin-top:auto}
.vt-guide__models{font-size:var(--fs-sm);color:var(--color-text);margin:0 0 var(--space-4);line-height:1.5}
.vt-guide__models b{color:var(--color-ink);font-weight:var(--fw-medium)}
.vt-guide__specs{display:grid;gap:var(--space-2);margin-bottom:var(--space-6)}
.vt-guide__spec{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);padding-bottom:var(--space-2);border-bottom:1px dashed var(--color-border);font-size:var(--fs-sm)}
.vt-guide__spec b{color:var(--color-ink);font-weight:var(--fw-medium);flex:0 0 auto}
.vt-guide__spec span{color:var(--color-accent-dark);font-weight:var(--fw-medium);text-align:right}
.vt-guide__highlight{background:var(--color-accent-050);border-radius:var(--radius-md);padding:var(--space-4);font-size:var(--fs-sm);color:var(--color-text);line-height:var(--lh-body);margin:0 0 var(--space-6)}
.vt-guide__highlight b{color:var(--color-accent-dark)}
.vt-guide__industries{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-6)}
.vt-guide__chip{font-size:var(--fs-xs);color:var(--color-primary);background:var(--color-primary-050);padding:4px 12px;border-radius:20px}
.vt-guide__main p{font-size:var(--fs-base);color:var(--color-text);line-height:var(--lh-body);margin:0 0 var(--space-4)}
.vt-guide__main p:last-child{margin-bottom:0}

/* ---- 5. 差异化价值 ---- */
.vt-values{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);align-items:start}
.vt-values__item{position:relative;overflow:hidden;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-8);box-shadow:var(--shadow-card);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.vt-values__item:nth-child(2){margin-top:var(--space-12)}
.vt-values__item:nth-child(3){margin-top:calc(var(--space-12) * 2)}
.vt-values__item::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--color-accent);opacity:0;transition:opacity .25s ease}
.vt-values__item:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:var(--color-accent)}
.vt-values__item:hover::after{opacity:1}
.vt-values__icon{position:absolute;top:var(--space-8);right:var(--space-8);display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--color-accent-050);font-family:var(--font-num);font-size:20px;font-weight:700;color:var(--color-accent);line-height:1;transition:background .22s ease,color .22s ease,transform .22s ease}
.vt-values__item:hover .vt-values__icon{background:var(--color-accent);color:#fff;transform:scale(1.08)}
.vt-values__name{font-size:var(--fs-lg);color:var(--color-ink);font-weight:var(--fw-bold);margin:var(--space-4) 0 var(--space-3);padding-right:calc(46px + var(--space-2));transition:color .22s ease}
.vt-values__item:hover .vt-values__name{color:var(--color-accent-dark)}
.vt-values__desc{font-size:var(--fs-base);color:var(--color-text);line-height:var(--lh-body);margin:0}

/* ---- 6. 应用领域（图文卡）---- */
.vt-scenes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.vt-scene{display:flex;flex-direction:column;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card);transition:transform .2s,box-shadow .2s}
.vt-scene:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover)}
.vt-scene__media{aspect-ratio:16/10;overflow:hidden;background:var(--color-bg-soft)}
.vt-scene__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.vt-scene:hover .vt-scene__media img{transform:scale(1.05)}
.vt-scene__body{padding:var(--space-6);flex:1;border-left:3px solid var(--color-primary-light)}
.vt-scene:hover .vt-scene__body{border-left-color:var(--color-accent)}
.vt-scene__name{font-size:var(--fs-lg);color:var(--color-ink);font-weight:var(--fw-bold);margin:0 0 var(--space-2)}
.vt-scene__desc{font-size:var(--fs-sm);color:var(--color-text);line-height:var(--lh-body);margin:0}

/* ---- 7. 关于简介（居中排版 + 加宽文案栏 + 三段字体统一；橙线沿用 intro 语汇）---- */
.vt-about{max-width:1080px;margin:0 auto;text-align:center}
.vt-about__title{font-size:var(--fs-2xl);color:var(--color-ink);font-weight:var(--fw-bold);line-height:var(--lh-heading);margin:0 0 var(--space-8)}
.vt-about__title::after{content:"";display:block;width:56px;height:4px;border-radius:2px;background:var(--color-accent);margin:var(--space-4) auto 0}
.vt-about__p{font-size:var(--fs-base);color:var(--color-text);line-height:var(--lh-body);text-align:left;margin:0 0 var(--space-4)}
.vt-about__actions{margin:var(--space-8) 0 0}

/* ---- 8. 底部转化条（图片背景 + 深蒙版；与页脚留间隙）---- */
.vt-cta-band{position:relative;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;background-color:var(--color-primary);background-size:cover;background-position:center calc(50% - 80px);background-repeat:no-repeat;margin-bottom:0;display:flex;align-items:center;justify-content:center;min-height:540px;overflow:hidden}
.vt-cta-band::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(11,26,38,.50),rgba(11,26,38,.64));z-index:0}
.vt-cta-band__inner{position:relative;z-index:1;max-width:var(--vt-max);margin:0 auto;padding:var(--space-16) 20px;text-align:center;color:#fff}
.vt-cta-band__title{font-size:var(--fs-2xl);color:#fff;font-weight:var(--fw-bold);margin:0 0 var(--space-3)}
.vt-cta-band__sub{font-size:var(--fs-md);color:rgba(255,255,255,.88);margin:0 0 var(--space-8)}

/* ---- 9. 最新行业技术资讯网格（最新 6 篇；3 列，复用全站 .vt-card）---- */
.vt-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
/* 博客卡圆角减半（全站 .vt-card 为 12px → 博客区 6px，作用域覆盖不影响产品卡）*/
.vt-posts .vt-card{border-radius:6px}
/* 博客卡顶图：统一比例 16/10、铺满容器、无间隙（作用域覆盖全站 .vt-card__media 的 contain+padding，不影响产品卡）*/
.vt-posts .vt-card__media{aspect-ratio:16/10}
.vt-posts .vt-card__media img{object-fit:cover;padding:0}

/* ---- 响应式 <768px ---- */
@media(max-width:768px){
  .vt-hero__slide{min-height:600px}
  .vt-hero__slide::before{background:linear-gradient(to right,rgba(8,17,26,.82) 0%,rgba(8,17,26,.64) 55%,rgba(8,17,26,.38) 100%)}
  .vt-hero__inner{padding-top:var(--space-12);padding-bottom:var(--space-12)}
  .vt-hero__title{font-size:24px;white-space:normal}
  .vt-hero__sub{font-size:var(--fs-base)}
  .vt-hero__arrow{width:40px;height:40px}
  .vt-hero__arrow--prev{left:12px}
  .vt-hero__arrow--next{right:12px}
  .vt-statwall__inner{grid-template-columns:repeat(2,1fr);gap:var(--space-8)}
  .vt-solutions,.vt-cardgrid,.vt-posts{grid-template-columns:repeat(2,1fr)}
  .vt-values,.vt-scenes{grid-template-columns:1fr}
  .vt-values__item:nth-child(2),.vt-values__item:nth-child(3){margin-top:0}
  .vt-guide__panel{grid-template-columns:1fr;gap:var(--space-6)}
  .vt-sec__inner{padding-top:var(--space-12);padding-bottom:var(--space-12)}
  .vt-sec__title{font-size:var(--fs-xl)}
  .vt-intro__title{font-size:var(--fs-xl);margin-bottom:var(--space-6)}
  .vt-cta-band{margin-bottom:0;min-height:427px}
}
@media(max-width:480px){
  .vt-solutions,.vt-cardgrid,.vt-posts{grid-template-columns:1fr}
}

/* 尊重减少动态偏好：hero 关淡入、卡片停过渡 */
@media(prefers-reduced-motion:reduce){
  .vt-hero__slide{transition:none}
  .vt-solution__media img,.vt-scene__media img{transition:none}
  .vt-values__item,.vt-values__item::after,.vt-values__icon{transition:none}
  .vt-values__item:hover{transform:none}
  .vt-values__item:hover .vt-values__icon{transform:none}
}