/* =========================================================
   【首屏 · 第2/3屏】home-screens-2-3.css
   ---------------------------------------------------------
   模块 A  工程学科剖切    .v4-disciplines
   模块 B  规模全景图      .v4-scale
   搜索：.v4-disciplines  .v4-scale  .v4-shell
   结构 HTML：home-v4-screens.html
   ========================================================= */

.home-v4 .v4-shell{
  width:var(--layout-width,min(85%,calc(100% - 48px)));
  max-width:var(--layout-max,min(85%,calc(100% - 48px)));
  margin:auto;
  box-sizing:border-box;
}
.home-v4 .v4-section{padding:82px 0}
.home-v4 .v4-disciplines{padding-top:24px;padding-bottom:8px;background:#fff}
.home-v4 .v4-scale{padding-top:0;padding-bottom:0}
.home-v4{
  color:var(--v4-navy,#102a43);
  background:#fff;
  font-family:Manrope,Arial,sans-serif;
  --v4-muted:#617181;
}


/* ---------------------------------------------------------
   【模块 B】规模全景 .v4-scale
   --------------------------------------------------------- */
.home-v4 .v4-scale__overlay{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:2;
  width:100%;
  display:flex;
  justify-content:center;
  padding:calc(clamp(12px,2vw,24px) + 5rem) 0 0;
  box-sizing:border-box;
  pointer-events:none;
}
.home-v4 .v4-scale__head{
  text-align:center;
  width:var(--layout-width,min(85%,calc(100% - 48px)));
  max-width:var(--layout-max,min(85%,calc(100% - 48px)));
  margin:0;
}
.home-v4 .v4-scale__head h2{
  width:100%;
  max-width:100%;
  margin:0 auto;
  text-align:center;
  font-size:clamp(26px,2.6vw,40px);
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--v4-navy);
}
.home-v4 .v4-scale__desc{
  margin:14px auto 0;
  text-align:center;
  color:var(--v4-muted);
  font-size:15px;
  line-height:1.65;
}
.home-v4 .v4-scale__visual{
  position:relative;
  width:100%;
  max-width:100%;
  margin:0;
  overflow:hidden;
  background:#dfe7ef;
}
.home-v4 .v4-scale__visual--continuum{
  aspect-ratio:auto;
  min-height:0;
  padding-bottom:0;
  background:transparent;
}
.home-v4 .v4-scale__visual--continuum::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:2;
  height:clamp(64px, 10vw, 128px);
  pointer-events:none;
  /* soft fade only — former scale-top-soft-edge.svg was never shipped */
  background: linear-gradient(180deg, #fff 0 18%, rgba(255,255,255,.7) 48%, rgba(255,255,255,0) 100%);
}
.home-v4 .v4-scale__image{
  display:block;
  width:100%;
  height:auto;
}
.home-v4 .v4-scale__copy{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}
.home-v4 .v4-scale__headline{
  position:absolute;
  top:calc(clamp(18px, 4.5%, 48px) + 4rem);
  left:50%;
  transform:translateX(-50%);
  width:min(92%, 52rem);
  margin:0;
  text-align:center;
  font-family:Manrope,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:clamp(18px, 2.4vw, 36px);
  font-weight:800;
  line-height:1.35;
  letter-spacing:.02em;
  color:#102a43;
  text-shadow:
    0 0 2px #fff,
    0 0 6px rgba(255,255,255,.95),
    1px 0 0 #fff,
    -1px 0 0 #fff,
    0 1px 0 #fff,
    0 -1px 0 #fff;
}
.home-v4 .v4-scale__visual--continuum .v4-scale__desc{
  position:absolute;
  top:calc(clamp(18px, 4.5%, 48px) + 4rem + 3.1em);
  left:50%;
  transform:translateX(-50%);
  width:min(90%, 40rem);
  margin:0;
  text-align:center;
  font-family:Manrope,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:clamp(13px, 1.15vw, 17px);
  font-weight:600;
  line-height:1.55;
  color:#3a5166;
  text-shadow:
    0 0 2px #fff,
    0 0 5px rgba(255,255,255,.9);
}
.home-v4 .v4-scale__labels{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:4.75rem;
  margin:0;
  padding:0;
  list-style:none;
  box-sizing:border-box;
}
.home-v4 .v4-scale__labels::before{
  content:"";
  position:absolute;
  left:6%;
  right:6%;
  top:0;
  height:2px;
  background:#e67a2e;
  transform:translateY(-50%);
}
.home-v4 .v4-scale__label{
  position:absolute;
  left:var(--x);
  width:var(--w);
  top:0;
  transform:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  padding:14px 4px 8px;
  box-sizing:border-box;
  text-align:center;
  color:#fff;
  text-shadow:0 1px 3px rgba(8,24,40,.55);
}
.home-v4 .v4-scale__mark{
  position:absolute;
  top:0;
  left:50%;
  width:9px;
  height:9px;
  margin:0;
  background:#e67a2e;
  transform:translate(-50%, -50%) rotate(45deg);
  box-shadow:0 0 0 2px rgba(255,255,255,.35);
}
.home-v4 .v4-scale__label strong{
  display:block;
  font-size:clamp(11px, 1.05vw, 15px);
  font-weight:700;
  line-height:1.25;
  white-space:nowrap;
}
.home-v4 .v4-scale__label span{
  display:block;
  font-size:clamp(10px, .95vw, 13px);
  font-weight:600;
  line-height:1.2;
  opacity:.95;
  white-space:nowrap;
}
@media(max-width:720px){
  .home-v4 .v4-scale__visual--continuum{
    padding-bottom:0;
  }
  .home-v4 .v4-scale__labels{
    height:5.5rem;
  }
  .home-v4 .v4-scale__headline{
    width:94%;
    font-size:clamp(14px, 3.8vw, 20px);
  }
  .home-v4 .v4-scale__label strong,
  .home-v4 .v4-scale__label span{
    white-space:normal;
    max-width:5.2rem;
  }
}
.home-v4 .v4-scale__zones{
  position:absolute;
  inset:0;
  z-index:4;
}
.home-v4 .v4-scale__zone{
  position:absolute;
  top:12%;
  left:var(--x);
  width:var(--w);
  height:76%;
  border-radius:8px;
  text-indent:-9999px;
  overflow:hidden;
  outline:none;
  transition:background .2s ease, box-shadow .2s ease;
}
.home-v4 .v4-scale__zone:hover,
.home-v4 .v4-scale__zone:focus-visible{
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);
}

/* —— 模块 B 子块：全景热点呼吸动画 —— */
.home-v4 .v4-scale__hotspots{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
}
.home-v4 .v4-scale__hotspot{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:28px;
  height:28px;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
  text-decoration:none;
  color:#fff;
  cursor:pointer;
}
.home-v4 .v4-scale__hotspot i{
  position:relative;
  z-index:2;
  display:block;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--v4-blue,#1769e0);
  border:2.5px solid #fff;
  box-shadow:0 0 0 0 rgba(23,105,224,.55),0 2px 10px rgba(16,42,67,.35);
  animation:v4-hotspot-core 2.2s ease-in-out infinite;
  animation-delay:var(--d,0s);
}
.home-v4 .v4-scale__hotspot::before,
.home-v4 .v4-scale__hotspot::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid rgba(23,105,224,.85);
  transform:translate(-50%,-50%) scale(1);
  opacity:.9;
  animation:v4-hotspot-breathe 2.2s ease-out infinite;
  animation-delay:var(--d,0s);
  pointer-events:none;
}
.home-v4 .v4-scale__hotspot::after{
  animation-delay:calc(var(--d,0s) + 1.1s);
  border-color:rgba(255,255,255,.75);
}
.home-v4 .v4-scale__hotspot span{
  position:absolute;
  left:50%;
  bottom:calc(100% + 12px);
  transform:translateX(-50%);
  padding:6px 12px;
  border-radius:999px;
  background:rgba(16,42,67,.9);
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
  opacity:.92;
  pointer-events:none;
  box-shadow:0 4px 14px rgba(16,42,67,.28);
  animation:v4-hotspot-tip 2.2s ease-in-out infinite;
  animation-delay:var(--d,0s);
}
.home-v4 .v4-scale__hotspot span::after{
  content:'↗';
  margin-left:5px;
  color:#8ec2ff;
}
.home-v4 .v4-scale__hotspot:hover i,
.home-v4 .v4-scale__hotspot:focus-visible i{
  background:#0e4fb0;
  transform:scale(1.12);
}
.home-v4 .v4-scale__hotspot:hover span,
.home-v4 .v4-scale__hotspot:focus-visible span{
  opacity:1;
  background:var(--v4-blue,#1769e0);
}
.home-v4 .v4-scale__hotspot:focus-visible{
  outline:2px solid #fff;
  outline-offset:8px;
  border-radius:50%;
}
@keyframes v4-hotspot-core{
  0%,100%{
    box-shadow:0 0 0 0 rgba(23,105,224,.5),0 2px 10px rgba(16,42,67,.35);
    transform:scale(1);
  }
  50%{
    box-shadow:0 0 0 10px rgba(23,105,224,0),0 2px 10px rgba(16,42,67,.35);
    transform:scale(1.08);
  }
}
@keyframes v4-hotspot-breathe{
  0%{
    transform:translate(-50%,-50%) scale(1);
    opacity:.85;
  }
  70%{
    transform:translate(-50%,-50%) scale(3.1);
    opacity:0;
  }
  100%{
    transform:translate(-50%,-50%) scale(3.1);
    opacity:0;
  }
}
@keyframes v4-hotspot-tip{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-3px)}
}
@media(prefers-reduced-motion:reduce){
  .home-v4 .v4-scale__hotspot i,
  .home-v4 .v4-scale__hotspot::before,
  .home-v4 .v4-scale__hotspot::after,
  .home-v4 .v4-scale__hotspot span{
    animation:none;
  }
  .home-v4 .v4-scale__hotspot::before,
  .home-v4 .v4-scale__hotspot::after{
    opacity:.5;
    transform:translate(-50%,-50%) scale(2);
  }
  .home-v4 .v4-scale__hotspot span{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }
}
.home-v4 .v4-scale__footer{
  position:absolute;
  left:50%;
  bottom:clamp(22px,3.5vw,40px);
  z-index:3;
  width:var(--layout-width,min(85%,calc(100% - 48px)));
  max-width:var(--layout-max,min(85%,calc(100% - 48px)));
  transform:translateX(-50%);
}
.home-v4 .v4-scale__nav{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  padding-top:28px;
}
.home-v4 .v4-scale__nav::before{
  content:'';
  position:absolute;
  top:5px;
  left:0;
  right:12px;
  height:0;
  border-top:2px dashed var(--v4-navy);
  pointer-events:none;
}
.home-v4 .v4-scale__nav::after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:0;
  height:0;
  border-style:solid;
  border-width:6px 0 6px 11px;
  border-color:transparent transparent transparent var(--v4-navy);
  pointer-events:none;
}
.home-v4 .v4-scale__item{
  position:relative;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:14px;
  box-sizing:border-box;
  width:300px;
  max-width:300px;
  flex:0 0 300px;
  padding:10px 0 0;
  color:var(--v4-navy);
}
.home-v4 .v4-scale__dot{
  position:absolute;
  top:-25px;
  left:50%;
  width:11px;
  height:11px;
  margin-left:-5.5px;
  border-radius:50%;
  background:var(--v4-navy);
  box-shadow:0 0 0 4px rgba(255,255,255,.92);
}
.home-v4 .v4-scale__icon{
  display:block;
  flex:0 0 auto;
  width:60px;
  height:60px;
  object-fit:contain;
}
.home-v4 .v4-scale__text{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
  text-align:left;
}
.home-v4 .v4-scale__text strong{
  display:block;
  font-size:16px;
  font-weight:700;
  line-height:1.25;
  color:var(--v4-navy);
}
.home-v4 .v4-scale__text span{
  color:var(--v4-navy);
  font-size:13px;
  line-height:1.5;
  opacity:.82;
}
@media(max-width:960px){
  .home-v4 .v4-scale__hotspot span{
    opacity:0;
    animation:none;
  }
  .home-v4 .v4-scale__hotspot:hover span,
  .home-v4 .v4-scale__hotspot:focus-visible span{
    opacity:1;
  }
  .home-v4 .v4-scale__visual{
    aspect-ratio:auto;
    min-height:520px;
    padding-bottom:12px;
  }
  .home-v4 .v4-scale__visual--continuum{
    min-height:0;
    padding-bottom:0;
  }
  .home-v4 .v4-scale__footer{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    width:var(--layout-width,min(85%,calc(100% - 48px)));
    max-width:var(--layout-max,min(85%,calc(100% - 48px)));
    margin:0 auto;
    padding:8px 0 18px;
    z-index:3;
  }
  .home-v4 .v4-scale__nav{
    flex-direction:column;
    gap:0;
    padding-top:0;
  }
  .home-v4 .v4-scale__nav::before,
  .home-v4 .v4-scale__nav::after,
  .home-v4 .v4-scale__dot{display:none}
  .home-v4 .v4-scale__item{
    width:100%;
    max-width:none;
    flex:1 1 auto;
    padding:16px 0;
    border-bottom:1px solid rgba(16,42,67,.12);
  }
  .home-v4 .v4-scale__item:last-child{border-bottom:0}
}

/* ---------------------------------------------------------
   【模块 A】工程学科剖切 .v4-disciplines
   --------------------------------------------------------- */
.home-v4 .v4-disciplines{
  background:#fff;
  padding-top:24px;
  padding-bottom:8px;
}
.home-v4 .v4-disciplines__head{
  text-align:center;
  margin:0 0 16px;
}
.home-v4 .v4-disciplines__head h2{
  width:fit-content;
  max-width:100%;
  margin:0 auto;
  font-size:clamp(24px,2.4vw,36px);
  line-height:1.25;
  letter-spacing:-.02em;
  color:var(--v4-navy);
}
.home-v4 .v4-disciplines__board{
  display:grid;
  grid-template-columns:20% minmax(0,1fr) 20%;
  gap:20px 18px;
  align-items:center;
}
.home-v4 .v4-disciplines__side{
  position:relative;
  z-index:2;
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.home-v4 .v4-disciplines__side li{
  position:relative;
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:12px;
  align-items:flex-start;
  padding:14px 16px;
  background:#fff;
  border:1px solid #c9d7e6;
  border-radius:10px;
  box-sizing:border-box;
}
.home-v4 .v4-disciplines__side img{
  display:block;
  width:36px;
  height:36px;
  object-fit:contain;
}
.home-v4 .v4-disciplines__side strong{
  display:block;
  margin:0 0 4px;
  font-size:14px;
  font-weight:700;
  line-height:1.25;
  color:var(--v4-navy);
}
.home-v4 .v4-disciplines__side span{
  display:block;
  font-size:12px;
  line-height:1.45;
  color:#5f7388;
}
.home-v4 .v4-disciplines__side--left li::after,
.home-v4 .v4-disciplines__side--right li::before{
  content:'';
  position:absolute;
  top:50%;
  width:200px;
  height:0;
  border-top:1.5px dashed #6b8299;
  transform:translateY(-50%);
  pointer-events:none;
}
.home-v4 .v4-disciplines__side--left li::after{
  right:-200px;
}
.home-v4 .v4-disciplines__side--right li::before{
  left:-200px;
}
.home-v4 .v4-disciplines__side--left li::before,
.home-v4 .v4-disciplines__side--right li::after{
  content:'';
  position:absolute;
  top:50%;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#0159A6;
  transform:translateY(-50%);
  pointer-events:none;
}
.home-v4 .v4-disciplines__side--left li::before{
  right:-204px;
  z-index:1;
}
.home-v4 .v4-disciplines__side--right li::after{
  left:-204px;
  z-index:1;
}
.home-v4 .v4-disciplines__visual{
  position:relative;
  display:block;
  min-width:0;
  border:0;
  border-radius:0;
  overflow:visible;
  background:transparent;
  box-shadow:none;
}
.home-v4 .v4-disciplines__visual img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:19 / 10;
  object-fit:cover;
  object-position:center;
  border:0;
  outline:none;
  box-shadow:none;
}

@media(prefers-reduced-motion:reduce){
  .home-v4 .v4-scale__hotspot i,
  .home-v4 .v4-scale__hotspot::before,
  .home-v4 .v4-scale__hotspot::after,
  .home-v4 .v4-scale__hotspot span{
    animation:none;
  }
  .home-v4 .v4-scale__hotspot::before,
  .home-v4 .v4-scale__hotspot::after{
    opacity:.5;
    transform:translate(-50%,-50%) scale(2);
  }
  .home-v4 .v4-scale__hotspot span{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }
}

@media(max-width:960px){
  .home-v4 .v4-scale__hotspot span{
    opacity:0;
    animation:none;
  }
  .home-v4 .v4-scale__hotspot:hover span,
  .home-v4 .v4-scale__hotspot:focus-visible span{
    opacity:1;
  }
  .home-v4 .v4-scale__visual{
    aspect-ratio:auto;
    min-height:520px;
    padding-bottom:12px;
  }
  .home-v4 .v4-scale__visual--continuum{
    min-height:0;
    padding-bottom:0;
  }
  .home-v4 .v4-scale__footer{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    width:var(--layout-width,min(85%,calc(100% - 48px)));
    max-width:var(--layout-max,min(85%,calc(100% - 48px)));
    margin:0 auto;
    padding:8px 0 18px;
    z-index:3;
  }
  .home-v4 .v4-scale__nav{
    flex-direction:column;
    gap:0;
    padding-top:0;
  }
  .home-v4 .v4-scale__nav::before,
  .home-v4 .v4-scale__nav::after,
  .home-v4 .v4-scale__dot{display:none}
  .home-v4 .v4-scale__item{
    width:100%;
    max-width:none;
    flex:1 1 auto;
    padding:16px 0;
    border-bottom:1px solid rgba(16,42,67,.12);
  }
  .home-v4 .v4-scale__item:last-child{border-bottom:0}
}

@media(max-width:1100px){
  .home-v4 .v4-disciplines__board{
    grid-template-columns:1fr 1fr;
  }
  .home-v4 .v4-disciplines__visual{
    grid-column:1 / -1;
    order:-1;
  }
  .home-v4 .v4-disciplines__side--left li::after,
  .home-v4 .v4-disciplines__side--right li::before,
  .home-v4 .v4-disciplines__side--left li::before,
  .home-v4 .v4-disciplines__side--right li::after{
    display:none;
  }
}

@media(max-width:720px){
  .home-v4 .v4-disciplines__board{grid-template-columns:1fr}
}
