/* ===== Stage 7: glass, 3D depth and scroll-linked motion (interaction patterns adapted from Vetra, in ZhongTai Bridge colours) ===== */
:root{--glass-bg:rgba(255,255,255,.08);--glass-br:rgba(255,255,255,.2);--glass-hi:inset 0 1px 0 rgba(255,255,255,.18)}

/* glass surfaces: only on dark or photographic backgrounds, where blur has something to work with */
.glass,.hx-nav,.inv2-card,.ind .in,.pillar-tag,.pnav-c,.gl-panel .gl-view.on{
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%)}
.inv2-card,.ind .in{background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border:1px solid var(--glass-br);box-shadow:var(--glass-hi),0 15px 30px -15px rgba(8,12,26,.55)}
.ind .in{margin:14px;border-radius:14px;padding:18px 20px 20px}
.ind a::before{background:linear-gradient(0deg,rgba(12,17,34,.55) 0%,rgba(12,17,34,.1) 50%,rgba(12,17,34,0) 75%)}
.pillar-tag{left:14px;bottom:14px;padding:10px 14px 11px;border-radius:12px;background:rgba(20,27,49,.35);border:1px solid rgba(255,255,255,.22)}
.pillar-img::after{background:linear-gradient(0deg,rgba(14,20,40,.45),rgba(14,20,40,0) 45%)}

/* 3D tilt with a soft glare that follows the pointer */
.tilt{transform-style:preserve-3d;will-change:transform;transition:transform .6s cubic-bezier(.22,.61,.36,1),box-shadow .4s}
.tilt.tilting{transition:transform .08s linear,box-shadow .4s}
.tilt .glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.22),transparent 45%)}
.tilt.tilting .glare{opacity:1}
.tilt .lift{transform:translateZ(36px)}
.pillar.tilt,.ind a.tilt,.rpt-card.tilt{position:relative}
.gl-panel.tilt{transform-style:preserve-3d}
.gl-panel.tilt .gl-view{transform:translateZ(24px)}

/* scroll-linked parallax for photography (set by JS as --py) */
.par{transform:translate3d(0,var(--py,0px),0) scale(1.12);will-change:transform}
.ph-photo{background-position:center calc(40% + var(--py,0px))}

/* image wipe-in when a photo section enters the viewport */
.motion .wipe{clip-path:inset(18% 0 0 0 round 16px);opacity:.001;transition:clip-path 1.1s cubic-bezier(.22,.61,.36,1),opacity .6s}
.motion .wipe.in{clip-path:inset(0 0 0 0 round 16px);opacity:1}

/* process line fills with scroll progress */
.steps::after{transition:none!important;transform:scaleX(var(--sp,0))!important}

/* ambient brand glow behind key dark sections */
.feat-rpt,.gl-panel{position:relative}
.sec.navy .glow,.inv2 .glow{position:absolute;width:640px;height:640px;border-radius:50%;filter:blur(90px);opacity:.35;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(62,101,86,.9),rgba(62,101,86,0) 70%);transform:translate3d(var(--gx2,0),var(--gy2,0),0);transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}

/* partners & investors: clean photo + readable glass card */
.inv2{position:relative;overflow:hidden;isolation:isolate;padding:clamp(72px,9vw,120px) 0;background:#dfe7ee}
.inv2-bg{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;z-index:-2}
.inv2::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,20,40,.78) 0%,rgba(14,20,40,.55) 45%,rgba(14,20,40,.08) 80%)}
.inv2-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;align-items:stretch}
.inv2-card{border-radius:22px;padding:clamp(28px,4vw,48px);color:#fff;background:linear-gradient(135deg,rgba(20,27,49,.72),rgba(20,27,49,.55))}
.inv2-card h2{color:#fff}
.inv2-card .eyebrow{color:var(--sage-lt)}
.inv2-card .lead{color:#E6EBF2;margin-top:16px}
.inv2-card .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.inv2-pts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;justify-content:center}
.inv2-pts li{border-radius:16px;padding:18px 22px;color:#fff;background:linear-gradient(135deg,rgba(20,27,49,.6),rgba(20,27,49,.42));border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.inv2-pts b{display:block;font-family:var(--hf);font-size:17px;margin-bottom:4px}
.inv2-pts span{font-size:14.5px;color:#DCE3EC;line-height:1.5}
@media (max-width:900px){.inv2-in{grid-template-columns:1fr}.inv2::after{background:linear-gradient(180deg,rgba(14,20,40,.7),rgba(14,20,40,.6))}}

/* card meta line (type, review date, reading time) */
.card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:12.5px;color:var(--muted);letter-spacing:.01em}
.card-meta b{font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:11px;color:var(--accent)}
.card-meta i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}

/* live FX in the utility bar */
.fx{display:inline-flex;align-items:center;gap:12px;font-variant-numeric:tabular-nums}
.fx b{color:#fff;font-weight:600;margin-left:4px}
.fx em{font-style:normal;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8f9bb0}
.fx[hidden]{display:none}
@media (max-width:1100px){.fx em{display:none}}
@media (max-width:860px){.fx{display:none}}

@media (prefers-reduced-motion:reduce){.par{transform:none!important}.tilt{transform:none!important}.motion .wipe{clip-path:none;opacity:1}}