/* HITP 首页 D「精致情景风」预览 · 2026-11-01 */
:root{
  --navy:#0E2F52; --navy-h:#163E68; --gold:#C9A96E; --cream:#F7F3EB; --cream-2:#F5F0E6;
  --ink:#0E2F52; --ink-2:#3A4B5E; --mute:#5E6B78; --line:#E6DFD2; --white:#fff;
  --sans:"HarmonyOS Sans SC","Inter v6","PingFang SC","Microsoft YaHei",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-weight:400;color:var(--ink);background:var(--cream);font-size:17px;line-height:1.75;line-break:strict;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.nw{white-space:nowrap}
.d-w{max-width:1200px;margin:0 auto;padding:0 40px}
@media (max-width:640px){.d-w{padding:0 20px}}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:4px}
.d-close :focus-visible,.d-four :focus-visible{outline-color:#fff}

/* 顶栏 */
.d-top{position:sticky;top:0;z-index:30;background:var(--cream);border-bottom:1px solid var(--line)}
.d-top-in{display:flex;align-items:center;gap:32px;height:68px}
.d-logo{display:flex;align-items:center;gap:10px;font-weight:500;font-size:19px;letter-spacing:.04em}
.d-nav{display:flex;gap:30px;margin-left:auto;font-size:15px;color:var(--ink-2)}
.d-nav a{display:inline-flex;align-items:center;min-height:44px}
.d-nav a:hover{color:var(--navy)}
@media (max-width:900px){.d-nav{display:none}.d-top-in .d-btn-sm{margin-left:auto}}

/* 按钮 */
.d-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border-radius:999px;background:var(--navy);color:#fff;font:inherit;font-size:16px;font-weight:500;letter-spacing:.02em;border:0;cursor:pointer;transition:transform .25s var(--ease),background .2s,box-shadow .25s var(--ease)}
.d-btn:hover{background:var(--navy-h);transform:translateY(-2px);box-shadow:0 8px 20px -10px rgba(14,47,82,.5)}
.d-btn:active{transform:translateY(0) scale(.98)}
.d-btn-sm{min-height:44px;padding:0 20px;font-size:14px}
.d-btn-line{background:transparent;color:var(--navy);border:1px solid var(--navy)}
.d-btn-line:hover{background:rgba(14,47,82,.05)}
.d-btn-white{background:#fff;color:var(--navy)}
.d-btn-white:hover{background:#fff;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}

/* 首屏 */
.d-hero{position:relative;overflow:hidden;background:var(--cream);min-height:min(78vh,720px)}
.d-hero-photo{position:absolute;top:0;right:0;bottom:0;width:60%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 22%,#000 46%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 22%,#000 46%)}
.d-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.d-ai{position:absolute;right:16px;bottom:14px;font-size:12px;color:var(--navy);background:rgba(247,243,235,.85);padding:3px 10px;border-radius:99px}
.d-hero-in{position:relative;z-index:2;display:flex;align-items:center;min-height:min(78vh,720px);padding-top:56px;padding-bottom:64px}
.d-hero-text{max-width:600px}
.d-h1{font-weight:300;font-size:clamp(38px,4.6vw,64px);line-height:1.22;letter-spacing:.01em;color:var(--navy)}
.d-h1 .ln{display:block}
.d-gold{display:block;width:72px;height:2px;background:var(--gold);margin:30px 0 26px;transform-origin:left}
.d-lead{font-size:clamp(17px,1.35vw,19px);line-height:1.85;color:var(--ink-2);max-width:28em;margin-bottom:36px}
.d-note{font-size:14px;color:var(--mute);margin-top:14px}
.h-2{display:none}
html[data-h="2"] .h-1{display:none}
html[data-h="2"] .h-2{display:block}
@media (max-width:900px){
  .d-hero{min-height:0}
  .d-hero-photo{position:relative;width:100%;height:280px;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .d-hero-in{min-height:0;padding-top:8px;padding-bottom:48px}
}

/* 信任条 */
.d-trust{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.d-trust ul{list-style:none;display:flex;justify-content:space-between;gap:12px;padding:22px 0;font-size:15px;color:var(--ink-2);letter-spacing:.02em}
.d-trust li{flex:1;text-align:center;position:relative}
.d-trust li+li::before{content:"";position:absolute;left:0;top:50%;width:1px;height:16px;margin-top:-8px;background:var(--line)}
@media (max-width:760px){.d-trust ul{display:grid;grid-template-columns:1fr 1fr;gap:12px 0;padding:18px 0}.d-trust li:nth-child(3)::before{display:none}}

/* 标题 */
.d-h2{font-weight:300;font-size:clamp(30px,3.2vw,44px);line-height:1.3;letter-spacing:.01em}

/* 四件事：藏青 */
.d-four{background:var(--navy);color:#fff;padding:112px 0 120px}
.d-four .d-h2{color:#fff;margin-bottom:64px}
.d-four-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px 80px}
.d-item{position:relative;padding-top:26px}
.d-line{position:absolute;left:0;top:0;width:48px;height:2px;background:var(--gold);transform-origin:left}
.d-item h3{font-weight:400;font-size:24px;line-height:1.4;margin-bottom:10px}
.d-item p{color:rgba(255,255,255,.78);font-size:16px;line-height:1.85;max-width:26em}
@media (max-width:760px){.d-four{padding:72px 0 80px}.d-four-grid{grid-template-columns:1fr;gap:40px}.d-four .d-h2{margin-bottom:44px}}

/* 四项服务：图文交替 */
.d-svc{background:var(--cream);padding:112px 0 40px}
.d-svc .d-h2{margin-bottom:64px}
.d-row{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:min(70vh,620px);margin-bottom:24px}
.d-pic{position:relative;height:100%;min-height:440px;overflow:hidden}
.d-pic img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;will-change:transform}
.d-txt{padding:48px max(40px,calc((100vw - 1200px)/2 + 40px)) 48px 72px}
.d-rev .d-pic{order:2}
.d-rev .d-txt{order:1;padding:48px 72px 48px max(40px,calc((100vw - 1200px)/2 + 40px))}
.d-txt h3{font-weight:300;font-size:clamp(30px,3vw,44px);line-height:1.3;margin-bottom:18px}
.d-txt p{font-size:18px;line-height:1.9;color:var(--ink-2);max-width:24em;margin-bottom:22px}
.d-link{display:inline-flex;align-items:center;min-height:44px;font-weight:500;font-size:16px;color:var(--navy);border-bottom:1px solid var(--gold);line-height:1.4;min-height:0;padding:10px 0 4px}
.d-link:hover{color:var(--navy-h);border-bottom-color:var(--navy)}
@media (max-width:900px){
  .d-svc{padding:72px 0 24px}.d-svc .d-h2{margin-bottom:36px}
  .d-row{grid-template-columns:1fr;min-height:0;margin-bottom:40px}
  .d-pic{min-height:0;height:300px}
  .d-rev .d-pic{order:0}
  .d-txt,.d-rev .d-txt{padding:28px 20px 8px}
}

/* 评估 */
.d-check{background:#fff;padding:112px 0}
.d-panel{max-width:760px;margin:0 auto;border:1px solid var(--line);border-radius:16px;padding:48px 52px 44px;background:#fff}
.d-panel .d-h2{font-size:clamp(26px,2.6vw,34px);margin-bottom:28px}
.d-q{border:0;margin:0 0 18px;padding:0;min-width:0}
.d-q legend{font-size:15px;color:var(--mute);margin-bottom:10px;padding:0}
.d-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.d-opt{font:inherit;font-size:15px;min-height:48px;padding:8px 6px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);cursor:pointer;transition:transform .12s,border-color .15s}
.d-opt:hover{border-color:#B9AE99}
.d-opt:active{transform:scale(.97)}
.d-opt[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.d-out{border-top:1px solid var(--line);margin-top:26px;padding-top:22px}
.d-out p{font-size:16px;line-height:1.85;color:var(--ink-2)}
.d-out .ph{color:var(--mute)}
.d-out b{color:var(--navy);font-weight:500;margin-right:8px}
.d-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:18px}
.d-acts .d-btn{min-height:46px;font-size:15px;padding:0 22px}
.d-wxinline{font-size:15px;color:var(--ink-2)}
.d-wxinline b,.d-wxline b{color:var(--ink);font-weight:500;-webkit-user-select:all;user-select:all;margin:0 0 0 4px}
.d-wxline{margin-top:16px}
.d-copy-msg{flex-basis:100%;font-size:14px;color:var(--navy);min-height:1.5em;margin:-4px 0 0}
.d-more{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;color:var(--navy)}
.d-out.go{position:relative;overflow:hidden}
@media (max-width:640px){.d-check{padding:72px 0}.d-panel{padding:32px 20px 28px;border-radius:12px}.d-opts{grid-template-columns:1fr 1fr}.d-acts{flex-direction:column;align-items:flex-start}.d-copy-msg{margin:0}}

/* 收尾 */
.d-close{position:relative;overflow:hidden;color:#fff;background:#0b1a2e;min-height:520px;display:flex;align-items:center}
.d-close img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.d-close::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(9,24,42,.82) 0%,rgba(9,24,42,.55) 55%,rgba(9,24,42,.35) 100%)}
.d-close .d-w{position:relative;z-index:2;width:100%;padding-top:96px;padding-bottom:96px}
.d-close-h{font-weight:300;font-size:clamp(40px,5.2vw,72px);line-height:1.2;letter-spacing:.02em;margin-bottom:34px;display:inline-block}
.d-close-acts p{margin-top:18px;font-size:15px;color:rgba(255,255,255,.86)}
.d-close-acts b{font-weight:500;color:#fff;-webkit-user-select:all;user-select:all}
.d-close-acts a:not(.d-btn){color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}
.d-sep{display:inline-block;width:1px;height:12px;background:rgba(255,255,255,.4);margin:0 14px;vertical-align:middle}
@media (max-width:640px){.d-close{min-height:440px}.d-close .d-w{padding-top:72px;padding-bottom:72px}.d-close-acts p{line-height:2}}

/* 页脚（沿用 C5） */
.c-foot{background:#fff;border-top:1px solid var(--line);padding:56px 0 40px;font-size:15px;color:var(--ink-2)}
.c-foot .w{max-width:1200px;margin:0 auto;padding:0 40px}
@media (max-width:640px){.c-foot .w{padding:0 20px}}
.c-foot-top{display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:start;padding-bottom:32px;border-bottom:1px solid var(--line)}
.c-foot .pv-logo{display:flex;align-items:center;gap:8px;font-weight:500;font-size:17px}
.c-foot .pv-logo img{width:22px;height:22px}
.c-foot dl{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.c-foot dt{font-size:14px;color:var(--mute);margin-bottom:4px}
.c-foot dd{color:var(--ink);line-height:1.7}
.c-foot .c-dt2{margin-top:12px}
.c-foot-nav{display:flex;flex-wrap:wrap;gap:4px 28px;padding:24px 0}
.c-foot-nav a{display:inline-flex;align-items:center;min-height:44px}
.c-foot-copy{font-size:14px;color:var(--mute)}
.d-fontnote{font-size:13px;color:var(--mute);margin-top:6px}
@media (max-width:900px){.c-foot-top{grid-template-columns:1fr}.c-foot dl{grid-template-columns:1fr;gap:16px}}

/* ===== 动效：只在 html.anim 时生效（有 IntersectionObserver、没开减少动态） ===== */
@media (prefers-reduced-motion:no-preference){
  /* 首屏（载入即播） */
  .anim .d-h1 .ln{animation:d-in .7s var(--ease) both}
  .anim .d-h1 .ln:nth-child(2){animation-delay:.12s}
  .anim .d-h1 .ln{background:linear-gradient(100deg,var(--navy) 0 40%,#d9bd85 48%,var(--gold) 50%,#d9bd85 52%,var(--navy) 60% 100%) no-repeat;background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:d-in .7s var(--ease) both,d-sweep .8s .55s ease-in-out both}
  .anim .d-h1 .ln:nth-child(2){animation-delay:.12s,.67s}
  .anim .d-gold{animation:d-draw .6s .35s var(--ease) both}
  .anim .d-lead,.anim .d-hero .d-btn,.anim .d-note{animation:d-in .6s .25s var(--ease) both}
  .anim .d-hero-photo img{animation:d-push 1.5s var(--ease) both}
  /* 滚动触发：未进入视口前的状态（只用 transform / opacity / clip-path，不占位不跳动） */
  .anim [data-anim="rise"]{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .anim [data-anim="rise"]:nth-child(2){transition-delay:.08s}.anim [data-anim="rise"]:nth-child(3){transition-delay:.16s}.anim [data-anim="rise"]:nth-child(4){transition-delay:.24s}
  .anim [data-anim="fade"]{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .anim [data-anim="stamp"]{opacity:0;transform:scale(1.06) translateY(-12px);transition:opacity .35s ease-out,transform .45s cubic-bezier(.2,.9,.3,1.25)}
  .anim [data-anim="stamp"]:nth-child(2){transition-delay:.12s}.anim [data-anim="stamp"]:nth-child(3){transition-delay:.24s}.anim [data-anim="stamp"]:nth-child(4){transition-delay:.36s}
  .anim [data-anim="stamp"] .d-line{transform:scaleX(0);transition:transform .5s .2s var(--ease)}
  .anim [data-anim="stamp"]:nth-child(2) .d-line{transition-delay:.32s}.anim [data-anim="stamp"]:nth-child(3) .d-line{transition-delay:.44s}.anim [data-anim="stamp"]:nth-child(4) .d-line{transition-delay:.56s}
  .anim [data-anim="curtain"]{clip-path:inset(0 0 0 100%);transition:clip-path .8s var(--ease)}
  .anim .d-rev [data-anim="curtain"]{clip-path:inset(0 100% 0 0)}
  .anim [data-anim="curtain"] img{scale:1.06;transition:scale .8s var(--ease)}
  .anim [data-anim="late"]{opacity:0;transform:translateY(10px);transition:opacity .6s .2s var(--ease),transform .6s .2s var(--ease)}
  .anim [data-anim="push"]{scale:1.08;transition:scale .8s var(--ease)}
  .anim [data-anim="sweep"]{opacity:0;transition:opacity .6s var(--ease)}
  .anim .d-opts .d-opt{opacity:0;transform:scale(.9);transition:opacity .3s,transform .35s cubic-bezier(.3,1.4,.5,1)}
  .anim .d-opts .d-opt:nth-child(2){transition-delay:.06s}.anim .d-opts .d-opt:nth-child(3){transition-delay:.12s}.anim .d-opts .d-opt:nth-child(4){transition-delay:.18s}
  .anim [data-g=w] .d-opt{transition-delay:.24s}.anim [data-g=w] .d-opt:nth-child(2){transition-delay:.3s}.anim [data-g=w] .d-opt:nth-child(3){transition-delay:.36s}.anim [data-g=w] .d-opt:nth-child(4){transition-delay:.42s}
  /* 进入后 */
  .anim .in[data-anim],.anim .in .d-line{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
  .anim .in[data-anim="curtain"] img,.anim .in[data-anim="push"]{scale:1}
  .anim .in .d-opt{opacity:1;transform:none}
  .anim .in[data-anim="sweep"]{background:linear-gradient(100deg,#fff 0 40%,#f1dfb6 48%,var(--gold) 50%,#f1dfb6 52%,#fff 60% 100%) no-repeat;background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:d-sweep .8s .3s ease-in-out both}
  .d-out.go{animation:d-slide .45s var(--ease) both}
  .d-out.go::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(201,169,110,.35) 50%,transparent 65%);transform:translateX(-110%);animation:d-glint .7s .15s ease-in-out both;pointer-events:none}
}
@keyframes d-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes d-sweep{from{background-position:100% 0}to{background-position:0 0}}
@keyframes d-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes d-push{from{transform:scale(1.07)}to{transform:scale(1)}}
@keyframes d-slide{from{transform:translateX(14px)}to{transform:none}}
@keyframes d-glint{to{transform:translateX(110%)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.d-btn:hover{transform:none}}



/* 正式首屏照（GPT，左侧自带米白虚化）：加宽，渐隐更轻 */
.d-hero-photo{width:74%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.7) 14%,#000 30%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.7) 14%,#000 30%)}
.d-hero-photo img{object-position:70% 55%}
@media (max-width:900px){.d-hero-photo{width:100%;height:260px;-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%);mask-image:linear-gradient(180deg,#000 60%,transparent 100%)}.d-hero-photo img{object-position:78% 50%}}
@media (max-width:420px){.d-h1{font-size:clamp(28px,8.6vw,34px)}}

/* ===== D2：配图统一（4:3、同圆角、全部在版心里） ===== */
.d-svc .d-row{max-width:1200px;margin:0 auto 72px;padding:0 40px;grid-template-columns:1fr 1fr;gap:72px;min-height:0}
.d-svc .d-pic{height:auto;min-height:0;aspect-ratio:4/3;border-radius:16px}
.d-svc .d-pic img{inset:-5% 0;height:110%}
.d-svc .d-txt,.d-svc .d-rev .d-txt{padding:0}
.d-pic .d-ai,.d-close .d-ai{z-index:3}
.d-close{background:var(--cream);color:#fff;min-height:0;display:block;padding:0 0 112px}
.d-close::before{display:none}
.d-close-box{position:relative;max-width:1120px;margin:0 auto;border-radius:16px;overflow:hidden;aspect-ratio:16/7;display:flex;align-items:center;background:#0b1a2e}
.d-close-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.d-close-box::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(9,24,42,.78) 0%,rgba(9,24,42,.5) 50%,rgba(9,24,42,.2) 100%)}
.d-close-in{position:relative;z-index:2;padding:0 72px}
.d-close .d-w{max-width:1200px;padding:0 40px}
@media (max-width:900px){
  .d-svc .d-row{grid-template-columns:1fr;gap:24px;padding:0 20px;margin-bottom:56px}
  .d-svc .d-rev .d-pic{order:0}
  .d-close{padding:0 0 72px}.d-close .d-w{padding:0 20px}
  .d-close-box{aspect-ratio:auto;min-height:420px;border-radius:12px}
  .d-close-in{padding:48px 24px}
}