
/* ---------- read-progress bar ---------- */
.vpp-prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:140;background:transparent;pointer-events:none}
.vpp-prog i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--amber),#ffc94d);
  box-shadow:0 0 12px rgba(246,167,0,.65);transition:width .12s linear}

/* ---------- hero extras ---------- */
.vpp-hero-scan{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.vpp-hero-scan::before{content:"";position:absolute;left:-30%;top:0;width:38%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(246,167,0,.13),transparent);
  animation:vppSweep 9s cubic-bezier(.5,0,.5,1) infinite}
@keyframes vppSweep{0%{transform:translateX(0)}55%,100%{transform:translateX(330%)}}
.vpp-hero-badge{display:inline-flex;align-items:center;gap:10px;margin-top:24px;
  font-family:"IBM Plex Mono","Inter",monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#cfe0f5;border:1px solid rgba(246,167,0,.45);background:rgba(246,167,0,.10);
  border-radius:4px;padding:8px 14px}
.vpp-hero-badge svg{width:15px;height:15px;stroke:var(--amber);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- intro band with drifting field ---------- */
.vpp-intro{position:relative;overflow:hidden;isolation:isolate;background:#F7F9FC;
  padding:clamp(56px,7vw,96px) 0 clamp(46px,6vw,78px)}
.vpp-intro::before{content:"";position:absolute;inset:-20%;z-index:-2;pointer-events:none;
  background:radial-gradient(closest-side,rgba(16,76,141,.11),transparent 70%) 14% 20%/48% 48% no-repeat,
             radial-gradient(closest-side,rgba(246,167,0,.13),transparent 70%) 86% 76%/44% 44% no-repeat;
  animation:vppDrift 26s ease-in-out infinite alternate}
.vpp-intro::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(16,76,141,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(16,76,141,.06) 1px,transparent 1px);
  background-size:56px 56px;animation:vppGrid 34s linear infinite;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000 30%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 40%,#000 30%,transparent 78%)}
@keyframes vppDrift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3%,-2.5%,0) scale(1.08)}100%{transform:translate3d(-3%,3%,0) scale(1.04)}}
@keyframes vppGrid{to{background-position:56px 56px,56px 56px}}
.vpp-intro-core{max-width:880px;margin:0 auto;text-align:center}
.vpp-intro h2{font-family:"Archivo";font-weight:800;text-transform:uppercase;
  font-size:clamp(26px,3.8vw,44px);line-height:1.06;color:var(--ink);margin-top:14px}
.vpp-intro h2 .amber{color:var(--dark)}
.vpp-intro p.vpp-lead{color:var(--body);font-size:16.5px;line-height:1.85;margin:20px auto 0;max-width:68ch}
.vpp-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
.vpp-chip{display:inline-flex;align-items:center;text-align:left;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:4px;padding:11px 16px;transition:border-color .25s,box-shadow .25s,transform .25s}
.vpp-chip:hover{border-color:var(--amber);box-shadow:0 10px 26px rgba(16,76,141,.09);transform:translateY(-2px)}
.vpp-chip svg{width:17px;height:17px;stroke:var(--dark);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.vpp-chip b{font-family:"IBM Plex Mono","Inter",monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);font-weight:600;display:block}
.vpp-chip span{font-size:14px;color:var(--ink);font-weight:600}

/* ---------- body layout ---------- */
.vpp-body{padding:clamp(56px,7vw,100px) 0 clamp(60px,8vw,110px)}
.vpp-grid{display:grid;grid-template-columns:264px minmax(0,1fr);gap:clamp(30px,4vw,64px);align-items:start}
@media(max-width:1020px){.vpp-grid{grid-template-columns:1fr}}

/* ---------- sticky scrollspy TOC ---------- */
.vpp-toc{position:sticky;top:112px}
@media(max-width:1020px){.vpp-toc{position:static;margin-bottom:34px}}
.vpp-toc h4{font-family:"IBM Plex Mono","Inter",monospace;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.vpp-toc-rail{position:relative}
.vpp-toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.vpp-toc-marker{position:absolute;left:-2px;width:2px;background:var(--amber);border-radius:2px;
  height:0;top:0;transition:top .32s cubic-bezier(.22,.61,.36,1),height .32s cubic-bezier(.22,.61,.36,1)}
.vpp-toc a{display:block;padding:10px 0 10px 18px;font-size:13.8px;line-height:1.45;color:var(--muted);
  transition:color .22s,transform .22s;position:relative}
.vpp-toc a:hover{color:var(--dark);transform:translateX(3px)}
.vpp-toc a.is-active{color:var(--ink);font-weight:600}
.vpp-toc a .num{font-family:"IBM Plex Mono","Inter",monospace;font-size:11px;color:var(--amber);
  margin-right:9px;opacity:.75}

/* ---------- policy cards ---------- */
.vpp-stack{display:grid;gap:clamp(16px,2vw,24px)}
.vpp-card{background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:clamp(24px,3vw,40px);position:relative;overflow:hidden;scroll-margin-top:120px;
  opacity:0;transform:translateY(26px);
  transition:opacity .65s ease var(--d,0s),transform .65s cubic-bezier(.22,.61,.36,1) var(--d,0s),
             border-color .28s,box-shadow .28s}
.vpp-card.in{opacity:1;transform:none}
.vpp-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--amber);
  transform:scaleY(0);transform-origin:top;transition:transform .5s cubic-bezier(.22,.61,.36,1) .12s}
.vpp-card.in::before{transform:scaleY(1)}
.vpp-card:hover{border-color:var(--line-2);box-shadow:0 18px 42px rgba(16,76,141,.10)}
.vpp-card-h{display:flex;align-items:flex-start;gap:18px}
.vpp-n{font-family:"IBM Plex Mono","Inter",monospace;font-size:12px;font-weight:600;letter-spacing:.08em;
  color:var(--amber);border:1px solid var(--amber);border-radius:4px;padding:7px 10px;flex:none;line-height:1}
.vpp-card h3{font-family:"Archivo";font-weight:800;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(17px,2vw,21px);color:var(--ink);line-height:1.2}
.vpp-card p{color:var(--body);font-size:15.5px;line-height:1.82;margin-top:14px}
.vpp-card ul{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.vpp-card li{position:relative;padding-left:28px;color:var(--body);font-size:15.5px;line-height:1.75}
.vpp-card li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:11px;border-radius:2px;
  background:var(--amber);transition:transform .25s}
.vpp-card li:hover::before{transform:rotate(45deg)}
.vpp-card li b{color:var(--ink);font-weight:700}

/* ---------- contact card ---------- */
.vpp-contact{background:var(--dark);border:1px solid rgba(255,255,255,.1);border-radius:4px;
  padding:clamp(28px,3.4vw,44px);position:relative;overflow:hidden;isolation:isolate;scroll-margin-top:120px;
  opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.vpp-contact.in{opacity:1;transform:none}
.vpp-contact::after{content:"";position:absolute;inset:-45%;z-index:-1;pointer-events:none;opacity:.5;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(246,167,0,.18) 40deg,transparent 110deg,rgba(11,46,91,.7) 200deg,transparent 300deg);
  animation:vppSpin 30s linear infinite}
@keyframes vppSpin{to{transform:rotate(360deg)}}
.vpp-contact h3{color:#fff;font-family:"Archivo";font-weight:800;text-transform:uppercase;
  font-size:clamp(19px,2.3vw,25px);margin-top:12px}
.vpp-contact .vpp-addr{color:#d9e2f2;font-size:15.5px;line-height:1.9;margin-top:16px}
.vpp-contact .vpp-addr b{color:#fff;font-weight:700}
.vpp-cbtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.vpp-cbtn{display:inline-flex;align-items:center;gap:10px;font-family:"Archivo";font-weight:700;font-size:13px;
  letter-spacing:.05em;text-transform:uppercase;padding:13px 22px;border-radius:40px;
  border:1px solid rgba(255,255,255,.28);color:#fff;transition:.22s}
.vpp-cbtn:hover{background:var(--amber);border-color:var(--amber);color:var(--darker);transform:translateY(-2px)}
.vpp-cbtn.solid{background:var(--amber);border-color:var(--amber);color:var(--darker)}
.vpp-cbtn.solid:hover{background:#fff;border-color:#fff}
.vpp-cbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- closing band ---------- */
.vpp-band{background:#124277;color:#fff;padding:clamp(44px,5.5vw,72px) 0;position:relative;overflow:hidden}
.vpp-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 320px at 92% 0%,rgba(16,76,141,.55),transparent 62%)}
.vpp-band-in{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  gap:28px;flex-wrap:wrap}
.vpp-band h2{color:#fff;font-family:"Archivo";font-weight:800;text-transform:uppercase;
  font-size:clamp(21px,2.8vw,32px)}
.vpp-band p{color:var(--d-muted);font-size:15px;margin-top:10px;max-width:56ch}

/* ---------- back to top ---------- */
.vpp-top{position:fixed;right:22px;bottom:88px;z-index:119;width:46px;height:46px;border-radius:50%;
  background:#fff;border:1px solid var(--line);color:var(--dark);display:flex;align-items:center;
  justify-content:center;cursor:pointer;box-shadow:0 10px 26px rgba(16,76,141,.16);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:.28s}
.vpp-top.show{opacity:1;visibility:visible;transform:none}
.vpp-top:hover{background:var(--amber);border-color:var(--amber);color:var(--darker)}
.vpp-top svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:680px){.vpp-top{bottom:132px;right:18px}}

@media(prefers-reduced-motion:reduce){
  .vpp-hero-scan::before,.vpp-intro::before,.vpp-intro::after,.vpp-contact::after{animation:none}
  .vpp-card,.vpp-contact{opacity:1;transform:none;transition:none}
  .vpp-card::before{transform:scaleY(1)}
  .vpp-prog i,.vpp-toc-marker{transition:none}
}
