.vpd-widget {
  --vpd-navy-1000: #010d13;
  --vpd-navy-950: #02171f;
  --vpd-navy-900: #05232d;
  --vpd-green: #69df42;
  --vpd-text: #f3f8f5;
  --vpd-text-soft: #bed0d1;
  --vpd-muted: #8ca5a8;
  --vpd-line: rgba(190, 222, 213, 0.15);
  --vpd-line-strong: rgba(190, 222, 213, 0.28);
  --vpd-container: 1280px;
  --vpd-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --vpd-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  width: 100%;
  min-width: 0;
  color: var(--vpd-text);
  font-family: var(--vpd-font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.vpd-widget,
.vpd-widget *,
.vpd-widget *::before,
.vpd-widget *::after { box-sizing: border-box; }
.vpd-widget img { display: block; max-width: 100%; height: auto; }
.vpd-widget a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.vpd-widget h2,
.vpd-widget h3,
.vpd-widget p { margin: 0; }
.vpd-widget h2,
.vpd-widget h3 { line-height: 1.08; text-wrap: balance; }
.vpd-widget :focus-visible { outline: 3px solid var(--vpd-green); outline-offset: 4px; }
.vpd-section { position: relative; width: 100%; overflow: clip; background: var(--vpd-navy-950); }
.vpd-container { width: min(calc(100% - 40px), var(--vpd-container)); margin-inline: auto; }

/* Section 1 — project browser showcase */
.vpd-showcase-stage {
  --vpd-stage-glow: rgba(105,223,66,.14);
  min-height: 630px;
  position: relative;
  padding: clamp(28px,6vw,70px);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 32px;
  background: radial-gradient(circle at 30% 20%, var(--vpd-stage-glow), transparent 35%), #03151c;
  transition: transform 180ms ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.vpd-showcase-browser {
  width: min(1080px,96%);
  max-width: 1080px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px;
  background: #e9edee;
  box-shadow: 0 32px 90px rgba(0,0,0,.42);
  transform: rotateX(1.6deg) rotateY(-2.5deg);
  transform-origin: center;
}
.vpd-browser-bar { height: 34px; padding: 0 12px; display: flex; align-items: center; gap: 6px; background: #e9edee; }
.vpd-browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: #9aa8aa; }
.vpd-browser-url { height: 16px; margin-left: 8px; flex: 1; border-radius: 6px; background: rgba(8,44,54,.08); }
.vpd-project-shot,
.vpd-project-shot img { width: 100%; height: auto; display: block; }
.vpd-project-shot img { object-fit: cover; }
.vpd-showcase-caption { margin-top: 12px !important; color: var(--vpd-muted); font-size: .7rem; }

/* Section 2 — editable case-study article + automatic TOC */
.vpd-section-2 { border-block: 1px solid var(--vpd-line); background: #041c25; }
.vpd-case-content {
  --vpd-toc-width: 240px;
  display: grid;
  grid-template-columns: var(--vpd-toc-width) minmax(0,1fr);
  gap: clamp(2rem,7vw,6rem);
  align-items: start;
}
.vpd-case-content.vpd-no-toc { grid-template-columns: minmax(0,1fr); }
.vpd-case-toc { position: sticky; top: 120px; align-self: start; display: grid; gap: 6px; }
.vpd-case-toc a {
  min-height: 36px;
  display: flex;
  align-items: center;
  border-left: 1px solid var(--vpd-line);
  padding-left: 12px;
  color: var(--vpd-muted);
  font-size: .72rem;
  line-height: 1.35;
  transition: color 170ms ease, border-color 170ms ease, background 170ms ease;
}
.vpd-case-toc a:hover,
.vpd-case-toc a:focus-visible,
.vpd-case-toc a.is-active { border-color: var(--vpd-green); color: #fff; }
.vpd-case-story { width: 100%; max-width: 820px; min-width: 0; }
.vpd-case-story > *:first-child { margin-top: 0 !important; }
.vpd-case-story h2 {
  margin: 3.5rem 0 0;
  color: var(--vpd-text);
  font-size: 2rem;
  font-weight: 650;
  letter-spacing: -.04em;
  scroll-margin-top: 120px;
}
.vpd-case-story .vpd-eyebrow + h2,
.vpd-case-story > h2:first-child { margin-top: 0; }
.vpd-case-story h3 { margin-top: 2.2rem; font-size: 1.35rem; }
.vpd-case-story p { margin-top: 1rem; color: var(--vpd-text-soft); }
.vpd-case-story ul,
.vpd-case-story ol { margin: 1rem 0 0; padding: 0; display: grid; gap: 9px; }
.vpd-case-story ul { list-style: none; }
.vpd-case-story ol { padding-left: 1.35rem; }
.vpd-case-story li { color: var(--vpd-muted); font-size: .86rem; }
.vpd-case-story ul > li::before { content: "↳"; margin-right: .6rem; color: var(--vpd-green); }
.vpd-case-story a { color: var(--vpd-green); text-decoration: underline; text-underline-offset: 3px; }
.vpd-case-story blockquote { margin: 2rem 0 0; padding: 1.25rem 1.4rem; border-left: 2px solid var(--vpd-green); background: rgba(255,255,255,.025); color: var(--vpd-text-soft); }
.vpd-case-story figure { margin: 1.8rem 0 0; }
.vpd-case-story img { width: 100%; max-width: 100%; margin-top: 1.8rem; border-radius: 8px; }
.vpd-case-story figure img { margin-top: 0; }
.vpd-case-story figcaption { margin-top: .65rem; color: var(--vpd-muted); font-size: .72rem; }
.vpd-eyebrow {
  margin-bottom: 1rem !important;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--vpd-green) !important;
  font-family: var(--vpd-font-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.vpd-eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.vpd-metrics-proof {
  margin-top: 2rem;
  padding: 20px;
  border: 1px solid var(--vpd-line);
  border-radius: 24px;
  background: #fff;
  color: #162a33;
}
.vpd-case-story .vpd-metrics-proof img { width: 100%; margin-top: 0; border-radius: 8px; }
.vpd-metrics-grid { margin-bottom: 15px; display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.vpd-metrics-grid > div { padding: 12px; border-radius: 8px; background: #edf3f7; }
.vpd-metrics-grid small { display: block; color: #61717a; font-size: .6rem; }
.vpd-metrics-grid strong { display: block; margin-top: 4px; font-size: 1.1rem; }
.vpd-case-story .vpd-proof-caption { margin-top: 10px; color: #5f6d75 !important; font-size: .68rem; }

/* Section 3 — related services + next project */
.vpd-section-head { margin-bottom: 2.5rem; }
.vpd-section-head .vpd-eyebrow { margin-bottom: 1rem !important; }
.vpd-section-heading { max-width: 760px; color: var(--vpd-text); font-size: clamp(1.9rem,3.7vw,2.8rem); font-weight: 650; letter-spacing: -.04em; }
.vpd-related-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.vpd-related-card {
  min-height: 150px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--vpd-line);
  border-radius: 14px;
  background: rgba(255,255,255,.015);
  transition: border-color 170ms ease, background 170ms ease, transform 170ms ease;
}
.vpd-related-card:hover,
.vpd-related-card:focus-visible { border-color: var(--vpd-line-strong); background: rgba(255,255,255,.03); transform: translateY(-3px); }
.vpd-related-card small,
.vpd-next-project small { color: var(--vpd-green); font: .62rem/1 var(--vpd-font-mono); text-transform: uppercase; letter-spacing: .04em; }
.vpd-related-card h3 { margin-top: 1rem; color: var(--vpd-text); font-size: 1.1rem; font-weight: 630; letter-spacing: -.027em; }
.vpd-text-link { margin-top: auto; display: inline-flex; align-items: center; gap: .7rem; color: #fff; font-size: .82rem; font-weight: 730; }
.vpd-text-link::after { content: "↗"; color: var(--vpd-green); transition: transform 180ms ease; }
.vpd-related-card:hover .vpd-text-link::after { transform: translate(3px,-3px); }
.vpd-next-project {
  margin-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 28px;
  border: 1px solid var(--vpd-line);
  border-radius: 24px;
  background: rgba(255,255,255,.018);
  transition: border-color 170ms ease, background 170ms ease;
}
.vpd-next-project:hover,
.vpd-next-project:focus-visible { border-color: var(--vpd-line-strong); background: rgba(255,255,255,.028); }
.vpd-next-project strong { display: block; margin-top: 7px; color: var(--vpd-text); font-size: 1.35rem; }
.vpd-next-button {
  min-height: 48px;
  padding: 0 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .72rem;
  flex: 0 0 auto;
  border: 1px solid var(--vpd-line-strong);
  border-radius: 11px;
  color: var(--vpd-text);
  background: rgba(255,255,255,.015);
  font-size: .82rem;
  font-weight: 760;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.vpd-next-project:hover .vpd-next-button { transform: translateY(-2px); border-color: rgba(105,223,66,.48); background: rgba(105,223,66,.05); }
.vpd-arrow { display: inline-block; transition: transform 180ms ease; }
.vpd-next-project:hover .vpd-arrow { transform: translate(3px,-3px); }

@media (max-width: 900px) {
  .vpd-case-content { grid-template-columns: 1fr; }
  .vpd-case-toc { position: static; display: flex; flex-wrap: wrap; gap: 5px; }
  .vpd-case-toc a { min-height: 36px; border-left: 0; border-bottom: 1px solid var(--vpd-line); padding: 0 10px; }
  .vpd-case-story { max-width: 100%; }
  .vpd-showcase-browser { width: 100%; }
}

@media (max-width: 767px) {
  .vpd-container { width: min(calc(100% - 32px), var(--vpd-container)); }
  .vpd-showcase-stage { min-height: 480px; padding: 18px; border-radius: 20px; }
  .vpd-showcase-browser { width: 100% !important; border-radius: 14px; transform: none; }
  .vpd-case-story h2 { font-size: clamp(1.7rem,8vw,2.1rem); scroll-margin-top: 90px; }
  .vpd-case-story h2:not(:first-child) { margin-top: 2.8rem; }
  .vpd-metrics-grid { grid-template-columns: 1fr 1fr; }
  .vpd-related-grid { grid-template-columns: 1fr; }
  .vpd-next-project { align-items: flex-start; flex-direction: column; padding: 24px; }
  .vpd-next-button { width: 100%; }
}

@media (max-width: 390px) {
  .vpd-container { width: calc(100% - 24px); }
  .vpd-showcase-stage { min-height: 400px; padding: 12px; }
  .vpd-browser-bar { height: 29px; }
  .vpd-metrics-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .vpd-widget *, .vpd-widget *::before, .vpd-widget *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .vpd-showcase-stage, .vpd-showcase-browser { transform: none !important; }
}