/* =========================================================================
   VMI Homepage v3 — animation + base layer (recolored to the VMI palette:
   indigo #3a36e0/#4f46ff · teal #14b8a6 · navy #0a0e3f · cream #fffaf0)
   Loaded on the home route only; the shared header/footer + General Sans come
   from includes/header.php + style.css. Inter + IBM Plex Mono are for the body
   sections (the shared header doesn't load them).
   ========================================================================= */
/* Home body: cream base; the site's bgphoto1 banner sits behind the header. */
body { background: #fffaf0 url("../../images/bgphoto1.jpeg") top center / 100% auto no-repeat !important; }

/* Hero (1st section): the photo COVERS the whole hero box (full-bleed), with a
   soft cream veil on top so the dark hero text stays readable. */
#top {
  background:
    linear-gradient(180deg, rgba(255,250,240,.62), rgba(255,250,240,.38) 55%, rgba(255,250,240,.72)),
    url("../../images/bgphoto1.jpeg") center center / cover no-repeat !important;
}

/* ONE font across the whole home page — the site's General Sans (matches every
   other page). Forced over the design's inline Inter / IBM Plex Mono / Georgia. */
body, body *, body *::before, body *::after,
svg text, input, textarea, select, button, .vmi-lift {
  font-family: var(--font-body) !important;
}

/* Home CTA buttons = the sitewide primary button (indigo pill), identical to
   .btn--primary used on every other page. Covers the hero "Build report"
   (#heroBuild), every "Start Building" ([data-scrolltop]) and the dark CTAs
   (.vmi-btn-dark → e.g. "Continue free"). */
#heroBuild, [data-scrolltop], .vmi-btn-dark {
  background: var(--indigo, #3a36e0) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  padding: .72rem 1.4rem !important;
  font-weight: 500 !important;
  font-size: .95rem !important;
  line-height: 1.2 !important;
  box-shadow: 0 8px 24px rgba(58,54,224,.28) !important;
  transition: transform .25s cubic-bezier(.22,.61,.36,1), background .25s, box-shadow .25s !important;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}
#heroBuild:hover, [data-scrolltop]:hover, .vmi-btn-dark:hover {
  background: var(--indigo-600, #2a27c4) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 34px rgba(58,54,224,.38) !important;
}
#heroBuild:active, [data-scrolltop]:active, .vmi-btn-dark:active { transform: translateY(0) scale(.99) !important; }

@keyframes vmiFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vmiPop { from { opacity: 0; transform: scale(0.85) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes vmiBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vmiDraw { from { stroke-dashoffset: 940; } to { stroke-dashoffset: 0; } }
@keyframes vmiAreaIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes vmiPulseDot { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(3); opacity: 0; } }
@keyframes vmiFloatA { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes vmiFloatB { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes vmiBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes vmiBeamShift { from { background-position: 0% 0; } to { background-position: 200% 0; } }
@keyframes vmiKenBurns { 0% { transform: scale(1.06) translate(0,0); } 50% { transform: scale(1.14) translate(-1.5%,-1%); } 100% { transform: scale(1.06) translate(0,0); } }
@keyframes vmiShimmer { 0% { transform: translateX(-120%) rotate(8deg); } 100% { transform: translateX(120%) rotate(8deg); } }
@keyframes vmiOdometer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vmiSpokeSlow { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(0.6deg); } }
@keyframes vmiHubPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(79,70,255,0.35), 0 20px 44px -18px rgba(10,14,63,0.5); } 50% { box-shadow: 0 0 0 14px rgba(79,70,255,0), 0 20px 44px -18px rgba(10,14,63,0.5); } }
@keyframes vmiRadarPing { 0% { transform: scale(0.3); opacity: 0.55; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes vmiWaveDrift { 0%,100% { transform: translateX(0) translateY(0); } 50% { transform: translateX(-3%) translateY(-1.5%); } }
@keyframes vmiColGlow { 0%,100% { box-shadow: 0 0 0 1px rgba(20,184,166,0.35), 0 0 40px -10px rgba(20,184,166,0.25); } 50% { box-shadow: 0 0 0 1px rgba(20,184,166,0.55), 0 0 55px -8px rgba(20,184,166,0.4); } }
@keyframes vmiDashDraw { from { stroke-dashoffset: 220; } }
@keyframes vmiCellGlow { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes vmiFaqOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vmiStickyGlow { 0%,100% { box-shadow: 0 -2px 0 rgba(20,184,166,0.7), 0 -14px 40px -8px rgba(20,184,166,0.45), 0 -22px 60px -16px rgba(79,70,255,0.3); } 50% { box-shadow: 0 -2px 0 rgba(20,184,166,0.95), 0 -16px 46px -8px rgba(20,184,166,0.6), 0 -24px 66px -16px rgba(79,70,255,0.42); } }
@keyframes vmiBtnBlink { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(20,184,166,0.6); } 50% { opacity: 0.82; box-shadow: 0 0 0 6px rgba(20,184,166,0); } }
@keyframes vmiBtnBlinkTeal { 0%,100% { box-shadow: 0 0 0 0 rgba(20,184,166,0.55); } 50% { box-shadow: 0 0 0 7px rgba(20,184,166,0); } }
@keyframes vmiSpin { to { transform: rotate(360deg); } }
@keyframes vmiMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
[data-marquee]:hover { animation-play-state: paused; }
@keyframes vmiTravel { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes vmiIconFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(-2deg); } }
@keyframes vmiLayerSpin { 0%,100% { transform: rotateX(52deg) rotateZ(0deg); } 50% { transform: rotateX(52deg) rotateZ(3deg); } }
@keyframes vmiRise2 { 0% { transform: translateY(0) scale(0.4); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-190px) scale(1); opacity: 0; } }

/* hover helpers (design used inline style-hover; ported to real CSS) */
.vmi-lift { transition: transform .2s cubic-bezier(0.16,1,0.3,1), background .2s, box-shadow .25s, border-color .2s, color .2s, opacity .2s, filter .25s; }
.vmi-btn-dark:hover { transform: translateY(-1px); background: #2a27c4 !important; }
.vmi-chip:hover { border-color: #3a36e0 !important; color: #0a0e3f !important; transform: translateY(-1px); }
.vmi-search-wrap:hover { border-color: #3a36e0 !important; transform: translateY(-2px); box-shadow: 0 1px 2px rgba(10,14,63,0.05), 0 26px 56px -24px rgba(10,14,63,0.26) !important; }

/* hero search typeahead dropdown */
.vmi-ac { position:absolute; left:0; right:0; top:calc(100% + 8px); background:#fff; border:1px solid #e5e5e5; border-radius:14px; box-shadow:0 24px 60px -24px rgba(10,14,63,0.28); overflow:hidden; z-index:40; display:none; }
.vmi-ac.open { display:block; }
.vmi-ac__item { display:flex; align-items:center; gap:11px; padding:11px 16px; cursor:pointer; text-decoration:none; color:#0a0e3f; font-size:14.5px; border-bottom:1px solid #f3f0e6; }
.vmi-ac__item:last-child { border-bottom:0; }
.vmi-ac__item:hover, .vmi-ac__item.is-active { background:#f4f3fb; }
.vmi-ac__cat { margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#8a8aa0; text-transform:uppercase; letter-spacing:.05em; }
.vmi-ac__hint { padding:11px 16px; font-size:13px; color:#8a8aa0; }

/* =========================================================================
   HOME RESPONSIVENESS — collapse the design's fixed grids on tablet/phone,
   stop horizontal overflow, and cap wide fixed-width elements. (home only)
   Grid selectors anchor on the full property name so "…:1fr 1fr;" matches the
   2-col grids only (3-col has " 1fr;" after, so it's excluded). The shared
   header handles its own mobile nav (hamburger), so it's left untouched.
   ========================================================================= */
html, body { overflow-x: hidden; max-width: 100%; }
#top img, section img, section svg, section table, section canvas, .cert-band img { max-width: 100%; }
#top .vmi-search-wrap { flex-wrap: wrap; }

/* ≤ 980px — two-column section layouts stack; the walkthrough simplifies */
@media (max-width: 980px) {
  [data-hero-grid]   { grid-template-columns: 1fr !important; gap: 44px !important; }
  [data-how-grid]    { grid-template-columns: 1fr !important; }
  [data-how-line]    { display: none !important; }
  [data-source-grid] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1.05fr"], [style*="grid-template-columns:0.95fr"],
  [style*="grid-template-columns:0.85fr"], [style*="grid-template-columns:1.15fr"] { grid-template-columns: 1fr !important; }
  /* Traditional-vs-VMI table: drop the centre divider column, stack the two sides */
  [style*="grid-template-columns:1fr 34px 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 34px 1fr"] > :nth-child(2) { display: none !important; }
}

/* ≤ 720px — large phone / small tablet */
@media (max-width: 720px) {
  [data-stats-grid],
  [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns:1fr 1fr 1fr 1fr"] { grid-template-columns: repeat(2,1fr) !important; }
  [data-deliv-grid],
  [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns:1fr 1fr 1fr;"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
  [style*="grid-template-columns:1fr 1fr;"] { grid-template-columns: 1fr !important; }
}

/* ≤ 480px — phones */
@media (max-width: 480px) {
  [data-stats-grid],
  [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns:1fr 1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns: 1fr 1fr !important; }
}
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2.5px solid #3a36e0; outline-offset: 2px; border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
}

/* =========================================================================
   Accreditations & Compliance band (real cert logos from images/cert/)
   ========================================================================= */
.cert-band { position: relative; overflow: hidden;
  background: linear-gradient(115deg,#0a0e3f 0%,#141a5c 30%,#2a27c4 63%,#0e9488 100%); }
.cert-band::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.65;
  background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 72% 80% at 50% 18%, #000, transparent 78%);
          mask-image: radial-gradient(ellipse 72% 80% at 50% 18%, #000, transparent 78%); }
.cert-band::after { content:""; position:absolute; top:-32%; left:50%; transform:translateX(-50%);
  width:940px; height:540px; border-radius:50%; pointer-events:none;
  background: radial-gradient(ellipse at center, rgba(122,245,228,.18), transparent 65%); }
.cert-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.cert-card { background:#fff; border-radius:16px; padding:22px 16px; min-height:130px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px;
  box-shadow:0 16px 38px -20px rgba(0,0,0,.6);
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
  animation:vmiFadeUp .6s cubic-bezier(.16,1,.3,1) both; }
.cert-card:hover { transform:translateY(-6px);
  box-shadow:0 26px 54px -20px rgba(20,184,166,.55), 0 0 0 1.5px rgba(20,184,166,.6); }
.cert-card img { height:46px; max-width:132px; width:auto; object-fit:contain;
  filter:grayscale(.4) opacity(.92); transition:filter .3s, transform .3s; }
.cert-card:hover img { filter:grayscale(0) opacity(1); transform:scale(1.06); }
.cert-card__cap { font-size:11px; letter-spacing:.03em; color:#6a6a7e; text-align:center; font-weight:500; line-height:1.3; }
.cert-strip { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:34px; }
.cert-pill { display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.96);
  border-radius:10px; padding:8px 16px; box-shadow:0 8px 22px -12px rgba(0,0,0,.5); transition:transform .25s; }
.cert-pill:hover { transform:translateY(-2px); }
.cert-pill img { height:55px; max-width:250px; object-fit:contain; display:block; }
@media (max-width:900px){ .cert-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .cert-grid{ grid-template-columns:1fr 1fr; gap:12px;} .cert-card{ padding:16px 10px; min-height:112px; gap:10px;} .cert-card img{ height:40px;} }

/* Home only: the Accreditations band sits flush against the footer — remove the
   footer's default top-margin gap (which otherwise shows the cream body bg). */
.foot { margin-top: 0 !important; }

/* Social-proof marquee: real client logos — muted grayscale, colour on hover. */
.vmi-client-logo { height:30px; max-width:132px; width:auto; object-fit:contain;
  filter:grayscale(1) opacity(.55); transition:filter .25s, transform .25s; }
.vmi-lift:hover .vmi-client-logo { filter:grayscale(0) opacity(1); transform:translateY(-2px) scale(1.06); }

/* =========================================================================
   "Under the hood" — laptop that opens to reveal the explainer video
   ========================================================================= */
.vmi-laptop-wrap { position:relative; perspective:2400px; padding-top:8px; }
/* ambient glow behind the machine */
.vmi-laptop-wrap::before{
  content:""; position:absolute; left:50%; top:38%; transform:translateX(-50%);
  width:82%; height:70%; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(58,54,224,.22), rgba(20,184,166,.12) 45%, transparent 72%);
  filter:blur(14px); z-index:0; pointer-events:none;
}
.vmi-laptop { position:relative; z-index:1; width:100%; transform-style:preserve-3d; }

/* --- lid / screen --- */
.vmi-laptop__lid{
  position:relative; transform-origin:50% 100%;
  transform:rotateX(-86deg); backface-visibility:hidden; will-change:transform;
  border-radius:16px 16px 6px 6px;
  padding:11px 11px 13px;
  background:linear-gradient(160deg,#23252f 0%,#111319 60%,#080a10 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 42px 80px -30px rgba(10,14,63,.6);
}
.vmi-laptop.is-open .vmi-laptop__lid{ animation:vmiLidOpen 1.5s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes vmiLidOpen{ from{ transform:rotateX(-86deg);} 60%{ transform:rotateX(6deg);} to{ transform:rotateX(0deg);} }

.vmi-laptop__screen{
  position:relative; border-radius:8px; overflow:hidden; background:#0a0e1a;
  aspect-ratio:16/10; box-shadow:0 0 0 1px rgba(0,0,0,.6) inset;
}
.vmi-laptop__screen video{ display:block; width:100%; height:100%; object-fit:cover; background:#0a0e1a; }
/* screen sheen */
.vmi-laptop__screen::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:linear-gradient(115deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 74%, rgba(255,255,255,.06) 100%);
}
.vmi-laptop__cam{ position:absolute; top:5px; left:50%; transform:translateX(-50%); z-index:2;
  width:6px; height:6px; border-radius:50%; background:#2b2e3a; box-shadow:0 0 0 2px #16181f, 0 0 3px rgba(120,200,255,.5) inset; }

/* --- base / keyboard deck --- */
.vmi-laptop__deck{
  position:relative; height:16px; margin:0 -3.5%;
  background:linear-gradient(180deg,#e9ebf1 0%,#c7cbd6 52%,#a9adba 100%);
  border-radius:3px 3px 11px 11px;
  clip-path:polygon(1.5% 0, 98.5% 0, 100% 100%, 0 100%);
  box-shadow:0 22px 42px -16px rgba(10,14,63,.5), 0 2px 3px rgba(255,255,255,.7) inset;
}
/* the opening lip (thumb notch) */
.vmi-laptop__lip{ position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:14%; height:6px; background:#b4b8c4; border-radius:0 0 9px 9px; box-shadow:0 1px 2px rgba(0,0,0,.18) inset; }

/* stat trio under the machine */
.vmi-engine-stats{ display:flex; gap:22px; margin-top:40px; flex-wrap:wrap; }

@media (max-width:920px){
  .vmi-laptop-wrap{ max-width:560px; margin:6px auto 0; }
  .vmi-engine-stats{ margin-top:30px; }
}

/* =========================================================================
   Hero card — live, interactive 3D segment-share chart
   ========================================================================= */
.seg3d{ perspective:1100px; margin-top:2px; }
.seg3d__plane{ transform:rotateX(7deg); transform-style:preserve-3d; display:flex; flex-direction:column; gap:11px; }
.seg3d__row{ display:grid; grid-template-columns:minmax(0,1fr) 140px 46px; align-items:center; gap:10px;
  transition:transform .28s cubic-bezier(.16,1,.3,1); }
.seg3d__row:hover{ transform:translateZ(16px); }
.seg3d__label{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:500; color:#0a0e3f;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seg3d__label i{ width:8px; height:8px; border-radius:2px; background:var(--c); flex:none;
  box-shadow:0 0 8px -1px var(--c); }
.seg3d__track{ position:relative; height:15px; border-radius:99px; background:#eef0fb;
  box-shadow:inset 0 1.5px 2px rgba(10,14,63,.16), inset 0 -1px 0 rgba(255,255,255,.7); }
.seg3d__fill{ position:relative; display:block; height:100%; width:var(--w); border-radius:99px; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,0) 48%),
    linear-gradient(180deg, rgba(0,0,0,0) 52%, rgba(0,0,0,.26)),
    var(--c);
  box-shadow:0 5px 12px -4px var(--c), inset -3px 0 5px -2px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.5);
  animation:vmiSegGrow 1.05s cubic-bezier(.16,1,.3,1) both;
  transition:filter .2s; }
.seg3d__row:hover .seg3d__fill{ filter:brightness(1.09) saturate(1.06); }
.seg3d__gloss{ position:absolute; top:0; bottom:0; left:0; width:42%; border-radius:99px; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent);
  transform:translateX(-170%); animation:vmiSegGloss 3s ease-in-out infinite; }
.seg3d__val{ font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; color:#0a0e3f; text-align:right; }
@keyframes vmiSegGrow{ from{ width:0; } }
@keyframes vmiSegGloss{ 0%{ transform:translateX(-170%); } 62%,100%{ transform:translateX(330%); } }
@media (prefers-reduced-motion: reduce){ .seg3d__plane{ transform:none; } .seg3d__gloss{ animation:none; display:none; } }

/* =========================================================================
   Header "Build Your Report" → grab attention on the hero search box
   ========================================================================= */
.vmi-hero-tip{
  position:absolute; right:calc(100% + 14px); top:50%; z-index:20;
  background:#d6f4ee; color:#3a36e0; border:1px solid #a6e2d6;
  font-family:'Inter',sans-serif; font-weight:600; font-size:13px; letter-spacing:.005em;
  padding:8px 14px; border-radius:10px; white-space:nowrap;
  box-shadow:0 12px 28px -12px rgba(14,148,136,.4);
  opacity:0; transform:translate(8px,-50%) scale(.96); transform-origin:right center;
  pointer-events:none; transition:opacity .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
.vmi-hero-tip::after{ content:""; position:absolute; left:100%; top:50%; transform:translateY(-50%);
  border:7px solid transparent; border-left-color:#d6f4ee; }
.vmi-search-wrap.vmi-search-show-tip .vmi-hero-tip{ opacity:1; transform:translate(0,-50%) scale(1); animation:vmiTipNudge 1.4s ease-in-out .3s 2; }
@keyframes vmiTipNudge{ 0%,100%{ transform:translate(0,-50%); } 50%{ transform:translate(-4px,-50%); } }
/* narrow screens: not enough room on the left, so show above the box */
@media (max-width:900px){
  .vmi-hero-tip{ right:auto; left:16px; top:auto; bottom:calc(100% + 12px); transform:translate(0,7px) scale(.96); transform-origin:16px bottom; }
  .vmi-hero-tip::after{ left:22px; top:100%; transform:none; border-left-color:transparent; border-top-color:#d6f4ee; }
  .vmi-search-wrap.vmi-search-show-tip .vmi-hero-tip{ transform:translate(0,0) scale(1); animation:none; }
}

.vmi-search-wrap.vmi-search-ping{ animation:vmiSearchPing 1s cubic-bezier(.16,1,.3,1); }
@keyframes vmiSearchPing{
  0%   { box-shadow:0 0 0 0 rgba(255,99,160,.55), 0 20px 50px -24px rgba(10,14,63,.18); border-color:#ff8fb6; transform:scale(1); }
  28%  { transform:scale(1.025); }
  55%  { box-shadow:0 0 0 12px rgba(255,99,160,0), 0 20px 50px -24px rgba(10,14,63,.18); border-color:#ff8fb6; }
  100% { box-shadow:0 0 0 0 rgba(255,99,160,0), 0 20px 50px -24px rgba(10,14,63,.18); transform:scale(1); }
}

/* =========================================================================
   "Inside the process" — looped build-walkthrough animation
   ========================================================================= */
/* checkbox (chapters + regions): ticks on cue */
.vmi-bd-check{ width:17px; height:17px; border-radius:5px; flex:none; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1.5px solid #d8d3c4; transition:background .25s, border-color .25s, transform .2s; }
.vmi-bd-check > span{ color:#fff; font-size:10.5px; line-height:1; opacity:0; transform:scale(.3);
  transition:opacity .18s ease, transform .28s cubic-bezier(.16,1,.3,1); }
.vmi-bd-check.is-on{ background:var(--bd,#2a27c4); border-color:var(--bd,#2a27c4); }
.vmi-bd-check.is-on > span{ opacity:1; transform:scale(1); }
.vmi-bd-check.is-pop{ animation:vmiBdPop .42s ease; }
@keyframes vmiBdPop{ 0%{transform:scale(1)} 42%{transform:scale(1.28)} 100%{transform:scale(1)} }

/* stepper: pending -> active -> done */
.vmi-bd-step__dot{ position:relative; width:34px; height:34px; border-radius:99px; display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:700; background:#f0ece0; color:#9a9aab;
  transition:background .3s, color .3s, transform .3s, box-shadow .3s; }
.vmi-bd-step__chk{ position:absolute; opacity:0; transform:scale(.4); transition:opacity .2s, transform .3s cubic-bezier(.16,1,.3,1); }
.vmi-bd-step__num{ transition:opacity .2s; }
.vmi-bd-step__label{ font-family:'General Sans',sans-serif; font-size:12.5px; font-weight:500; color:#9a9aab; transition:color .3s, font-weight .3s; }
.vmi-bd-step.is-active .vmi-bd-step__dot{ background:#2a27c4; color:#fff; transform:scale(1.12); box-shadow:0 8px 18px -6px rgba(42,39,196,.5); }
.vmi-bd-step.is-active .vmi-bd-step__label{ color:#0a0e3f; font-weight:600; }
.vmi-bd-step.is-done .vmi-bd-step__dot{ background:#0e9488; color:#fff; }
.vmi-bd-step.is-done .vmi-bd-step__num{ opacity:0; }
.vmi-bd-step.is-done .vmi-bd-step__chk{ opacity:1; transform:scale(1); }
.vmi-bd-step.is-done .vmi-bd-step__label{ color:#0e9488; }
[data-bd-line]{ transition:all .5s cubic-bezier(.16,1,.3,1); }

/* cross-fading screens */
.vmi-bd-screen{ position:absolute; inset:0; opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .45s ease, transform .45s ease, visibility .45s; }
.vmi-bd-screen.is-on{ opacity:1; visibility:visible; transform:none; }
/* typing caret */
.vmi-bd-caret{ display:inline-block; width:2px; height:18px; background:#2a27c4; margin-left:2px; vertical-align:-3px; animation:vmiCaret 1s step-end infinite; }
@keyframes vmiCaret{ 50%{ opacity:0; } }
@keyframes vmiSpin{ to{ transform:rotate(360deg); } }
/* data-source chips lighting up */
.vmi-bd-source.is-on{ color:#0a0e3f; background:#fff; border-color:var(--bd,#2a27c4); box-shadow:0 5px 14px -7px var(--bd,#2a27c4); }
.vmi-bd-source.is-on .vmi-bd-source__dot{ background:var(--bd,#2a27c4); }
/* company chips selecting */
.vmi-bd-co.is-on{ color:#0a0e3f !important; background:#eef0fb !important; border-color:#c7c6ee !important; }

/* ============================================================
   Mid-range responsive fixes (tablet + small laptop) — added 2026-07-08.
   The 2-column hero/process/source grids stayed side-by-side until 980px;
   stacking them earlier also lets their fixed-width children (360px map
   circle, laptop mockup) fit instead of overflowing.
   ============================================================ */
@media (max-width: 1200px) {
  [data-hero-grid], [data-how-grid], [data-source-grid] { grid-template-columns: 1fr; }
  .vmi-laptop-wrap { max-width: 520px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 1024px) {
  [data-coverflow] { height: 340px !important; }
  [data-cover]     { width: 210px !important; height: 300px !important; margin-left: -105px !important; }
}

/* ============================================================
   Home — responsive stacking for the inline-style grids.
   [style*=…] + !important override the inline grid-template-columns.
   home-v3.css loads on the home page only, so these are scoped to it.
   (The 6-step build timeline uses repeat(6,1fr) inside an overflow-x
    scroll container and is intentionally NOT collapsed.)
   ============================================================ */
@media (max-width: 980px) {
  /* two-column content blocks → single column */
  [style*="grid-template-columns:1fr 1.05fr"],
  [style*="grid-template-columns:1.05fr 0.95fr"],
  [style*="grid-template-columns:1.15fr 0.85fr"],
  [style*="grid-template-columns:0.85fr 1.15fr"],
  [style*="grid-template-columns:1fr 3fr"],
  [style*="grid-template-columns:152px 1fr"] { grid-template-columns: 1fr !important; }
  /* 3- and 4-up grids → 2-up */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: repeat(2, 1fr) !important; }
  /* 5-up → 3-up */
  [style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 640px) {
  /* everything collapses to a single column on phones (timeline excluded — it scrolls) */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1fr 34px 1fr"] { grid-template-columns: 1fr !important; }
}