/* Namespaced .vcv-* — uses existing tokens (--navy-2/--blue/--amber/--steel/--line/--radius) */
.vcv{position:relative;overflow:hidden;background:linear-gradient(180deg,#FCFDFE 0%,#F3F6FA 100%)}
.vcv-deco{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.vcv-dots{position:absolute;top:52px;left:44px;width:168px;height:132px;opacity:.5;
  background-image:radial-gradient(circle,rgba(11,46,91,.30) 1.7px,transparent 1.8px);
  background-size:19px 19px}
.vcv-blob{position:absolute;top:-190px;right:-160px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle at 32% 32%,rgba(30,111,208,.10),rgba(30,111,208,0) 68%)}
.vcv-wave{position:absolute;bottom:-260px;left:-160px;width:760px;height:520px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,rgba(11,46,91,.055),rgba(11,46,91,0) 70%)}
.vcv .wrap{position:relative;z-index:2}

/* ---- heading ---- */
.vcv-head{max-width:760px;margin:0 auto;text-align:center}
.vcv-head h2{font-family:'Archivo',sans-serif;font-size:clamp(32px,4.2vw,54px);font-weight:900;
  color:var(--navy-2);text-transform:uppercase;letter-spacing:-.015em;margin:16px 0 0}
.vcv-rule{width:74px;height:4px;background:var(--amber);margin:22px auto 0;border-radius:2px;
  transform:scaleX(0);transform-origin:center;transition:transform .8s .18s var(--ease)}
.vcv-head.in .vcv-rule{transform:scaleX(1)}
.vcv-head p{color:var(--steel);font-size:17px;line-height:1.7;margin:20px auto 0;max-width:52ch}

/* ---- grid ---- */
.vcv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:96px}

/* ---- card ---- */
.vcv-card{position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:64px 26px 40px;text-align:center;overflow:visible;
  box-shadow:0 10px 30px rgba(10,31,60,.055);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease),
             opacity .8s var(--ease)}
.vcv-card::before,.vcv-card::after{content:"";position:absolute;left:0;right:0;height:5px;
  transform:scaleX(0);transform-origin:left;transition:transform .85s .25s var(--ease)}
.vcv-card::before{top:0}
.vcv-card::after{bottom:0;transform-origin:right}
.vcv-card.in::before,.vcv-card.in::after{transform:scaleX(1)}
.vcv-card.is-amber::before,.vcv-card.is-amber::after{background:linear-gradient(90deg,#E08F00,#F6A700 45%,#FFC957)}
.vcv-card.is-blue::before,.vcv-card.is-blue::after{background:linear-gradient(90deg,#0B2E5B,#104C8D 45%,#2E86E0)}
.vcv-card:hover{transform:translateY(-10px);box-shadow:0 26px 54px rgba(10,31,60,.16);border-color:#D7E0EC}

/* ---- floating icon badge ---- */
.vcv-badge{position:absolute;top:-38px;left:50%;width:78px;height:78px;margin-left:-39px;
  border-radius:50%;background:var(--paper);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;z-index:3;
  box-shadow:0 10px 24px rgba(10,31,60,.10);overflow:visible;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.vcv-badge svg{width:38px;height:38px;overflow:visible;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vcv-card.is-amber .vcv-badge svg{stroke:var(--amber)}
.vcv-card.is-blue  .vcv-badge svg{stroke:var(--blue)}
.vcv-card:hover .vcv-badge{transform:translateY(-6px) scale(1.07);box-shadow:0 18px 34px rgba(10,31,60,.18)}
/* pulse ring */
.vcv-badge::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid currentColor;
  opacity:0;transform:scale(.9)}
.vcv-card.is-amber .vcv-badge{color:var(--amber)}
.vcv-card.is-blue  .vcv-badge{color:var(--blue)}
.vcv-card:hover .vcv-badge::after{animation:vcvPulse 1.4s var(--ease) infinite}
@keyframes vcvPulse{0%{opacity:.45;transform:scale(.94)}70%{opacity:0;transform:scale(1.32)}100%{opacity:0;transform:scale(1.32)}}

/* ---- card text ---- */
.vcv-card h3{font-family:'Archivo',sans-serif;font-size:21px;font-weight:800;text-transform:uppercase;
  letter-spacing:.02em;margin:0}
.vcv-card.is-amber h3{color:var(--amber)}
.vcv-card.is-blue  h3{color:var(--blue)}
.vcv-tick{width:44px;height:3px;border-radius:2px;margin:16px auto 20px;opacity:.85}
.vcv-card.is-amber .vcv-tick{background:var(--amber)}
.vcv-card.is-blue  .vcv-tick{background:var(--blue)}
.vcv-card p{position:relative;z-index:2;color:var(--steel);font-size:15.5px;line-height:1.75;margin:0}

/* ---- watermark (own clip layer so the badge stays unclipped) ---- */
.vcv-clip{position:absolute;inset:0;overflow:hidden;border-radius:var(--radius);
  z-index:1;pointer-events:none}
.vcv-wm{position:absolute;right:-14px;bottom:-18px;width:132px;height:132px;z-index:1;opacity:.085;
  transition:transform .55s var(--ease),opacity .55s var(--ease)}
.vcv-wm svg{width:100%;height:100%;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.vcv-card.is-amber .vcv-wm svg{stroke:var(--amber)}
.vcv-card.is-blue  .vcv-wm svg{stroke:var(--blue)}
.vcv-card:hover .vcv-wm{opacity:.16;transform:translate(-6px,-6px) rotate(-6deg)}

/* ---- reveal stagger (rides the existing .reveal IntersectionObserver) ---- */
.vcv-grid .reveal{transition-delay:0s}
.vcv-grid .reveal:nth-child(2){transition-delay:.12s}
.vcv-grid .reveal:nth-child(3){transition-delay:.24s}
.vcv-grid .reveal:nth-child(4){transition-delay:.36s}
.vcv-grid .reveal:nth-child(2)::before,.vcv-grid .reveal:nth-child(2)::after{transition-delay:.37s}
.vcv-grid .reveal:nth-child(3)::before,.vcv-grid .reveal:nth-child(3)::after{transition-delay:.49s}
.vcv-grid .reveal:nth-child(4)::before,.vcv-grid .reveal:nth-child(4)::after{transition-delay:.61s}

/* ---- responsive ---- */
@media(max-width:1100px){.vcv-grid{grid-template-columns:repeat(2,1fr);gap:26px 24px;row-gap:78px}}
@media(max-width:600px){
  .vcv-grid{grid-template-columns:1fr;row-gap:74px;margin-top:84px}
  .vcv-card{padding:60px 22px 36px}
  .vcv-dots{display:none}
  .vcv-head p{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .vcv-card,.vcv-badge,.vcv-wm,.vcv-rule,.vcv-card::before,.vcv-card::after{transition:none!important;animation:none!important}
  .vcv-rule,.vcv-card::before,.vcv-card::after{transform:none!important}
  .vcv-card:hover{transform:none}
  .vcv-card:hover .vcv-badge{transform:none}
  .vcv-card:hover .vcv-wm{transform:none}
}