/* Vision • Commitment • Policy — Scoped Styles */
:where(.vcp-section){
  --bg:#f7fbf5; --card:#ffffff; --text:#143016; --muted:#5a7a5d;
  --track:#e7efe4; --accent1:#7ac46b; --accent2:#d7b15e;
  --shadow:0 12px 32px rgba(20,48,22,.10); --radius:18px;
}

.vcp-section{
  background:
    radial-gradient(1100px 700px at -10% 0%, #eaf5e7 0%, transparent 60%),
    radial-gradient(1000px 650px at 120% 10%, #fff6df 0%, transparent 60%),
    var(--bg);
  padding: clamp(28px,6vw,72px) clamp(16px,5vw,48px);
  color: var(--text);
}
.vcp-wrap{ max-width:1200px; margin:0 auto; display:grid; gap:18px; }
.vcp-head{ text-align:center }
.vcp-head h2{ margin:0 0 8px; font-size: clamp(24px,4.8vw,40px); letter-spacing:.2px }
.vcp-head p{ margin:0; color:var(--muted) }

.vcp-grid{ display:grid; gap:18px; grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 980px){ .vcp-grid{ grid-template-columns: 1fr } }

.vc-card{
  position:relative; isolation:isolate; perspective:800px;
  border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(180deg, #fff, #fbfef9);
  border:1px solid #eef2ea; box-shadow: var(--shadow);
  padding: clamp(16px,2.4vw,22px);
  transform-style: preserve-3d;
  transform: translateY(8px) scale(.985);
  opacity:.0;
  transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .45s ease, box-shadow .2s;
}
.vc-card.in{ transform: none; opacity:1 }
.vc-card:hover{ box-shadow: 0 16px 36px rgba(20,48,22,.14) }

.vc-card::after{
  content:""; position:absolute; inset:auto -28% -28% auto; width:260px; height:260px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(215,177,94,.16), transparent 60%); filter: blur(12px);
  z-index:0; animation: vcp_float 10s ease-in-out infinite alternate;
}
@keyframes vcp_float{ from{ transform: translateY(-6px) } to{ transform: translateY(6px) } }

.vc-top{ display:flex; align-items:center; gap:12px; margin-bottom:6px; position:relative; z-index:1 }
.vc-icon{
  flex:0 0 56px; width:56px; height:56px; border-radius:14px;
  display:grid; place-items:center;
  background:#eef6ea; border:1px solid #dfe7dc; color:#1e3f22;
  box-shadow: inset 0 0 0 1px rgba(23,61,29,.05);
}
.vc-title{ font-weight:800; letter-spacing:.2px; font-size: clamp(16px,2.6vw,20px) }

.vc-body{ position:relative; z-index:1; color:#244730; font-size:15px; line-height:1.55 }
.chips{ margin-top:10px; display:flex; flex-wrap:wrap; gap:8px }
.chip{ background:#f1f7ef; border:1px solid #dfe7dc; color:#35553b; border-radius:999px; padding:4px 8px; font-size:12px }

.more{
  margin-top:12px; display:flex; align-items:center; gap:8px; cursor:pointer;
  background:#eef6ea; border:1px solid #dfe7dc; color:#173c1d;
  border-radius:12px; padding:10px 12px; font-weight:800;
}
.more[aria-expanded="true"]{ background:linear-gradient(90deg,var(--accent1),var(--accent2)); color:#fff; border-color:transparent }
.more svg{ width:16px; height:16px }

.vc-extra{ margin-top:10px; border-top:1px dashed #dfe7dc; padding-top:10px; display:none }
.vc-extra[hidden]{ display:none }
.vc-extra ul{ margin:8px 0 0 18px; padding:0; }
.vc-extra li{ margin:6px 0; }

@media (prefers-reduced-motion: reduce){
  .vc-card{ transition: none }
  .vc-card::after{ animation: none }
}