/* ======================================================================
   VanillaDev Homepage Mockup · one-to-one implementation layer
   Final homepage based on approved mockup. Images/icons intentionally
   remain stylized placeholders where real assets are still missing.
   ====================================================================== */
body.static-home{background:#051611}
body.static-home .vd-home-m3{
  --vd-bg:#061712;
  --vd-bg-2:#0a2019;
  --vd-bg-3:#0d2921;
  --vd-paper:#fbfcfa;
  --vd-paper-2:#f3f7f5;
  --vd-paper-3:#eef5f2;
  --vd-line:rgba(7,34,27,.10);
  --vd-line-2:rgba(7,34,27,.18);
  --vd-text:#13211c;
  --vd-text-soft:#63746e;
  --vd-white:#ffffff;
  --vd-mint:#70dfd1;
  --vd-blue:#63b4ff;
  --vd-green:#72db8a;
  --vd-warm:#f0ae60;
  --vd-shadow:0 22px 54px rgba(6,22,17,.08);
  color:var(--vd-text);
  background:var(--vd-paper);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body.static-home .vd-home-m3__shell{width:min(100% - 52px,1360px);margin:0 auto}
body.static-home .vd-home-m3__hero,
body.static-home .vd-home-m3__checker-cta,
body.static-home .vd-home-m3__section--cta{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 75% 18%,rgba(99,180,255,.16),transparent 24%),
    radial-gradient(circle at 18% 92%,rgba(112,223,209,.10),transparent 22%),
    linear-gradient(90deg,rgba(112,223,209,.08),transparent 18%,transparent 82%,rgba(99,180,255,.08)),
    linear-gradient(180deg,#051611 0,#061712 100%);
}
body.static-home .vd-home-m3__hero:before,
body.static-home .vd-home-m3__checker-cta:before,
body.static-home .vd-home-m3__section--cta:before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:110px 110px;
  mask-image:linear-gradient(180deg,rgba(255,255,255,.55),transparent 86%);
  pointer-events:none;
}
body.static-home .vd-home-m3__hero{padding:48px 0 36px}
body.static-home .vd-home-m3__hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(520px,.98fr);gap:34px;align-items:center}
body.static-home .vd-home-m3__hero-copy{padding:18px 0 10px;position:relative;z-index:1}
body.static-home .vd-home-m3__eyebrow,
body.static-home .vd-home-m3__section-kicker,
body.static-home .vd-home-m3__checker-head span,
body.static-home .vd-home-m3__checker-foot{
  margin:0 0 16px;
  font:700 12px/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.18em;
  text-transform:uppercase;
}
body.static-home .vd-home-m3__eyebrow{color:#afc2ba}
body.static-home .vd-home-m3__section-kicker{color:#95a79f}
body.static-home .vd-home-m3__section-kicker--light{color:#cad8d3}
body.static-home .vd-home-m3__hero h1,
body.static-home .vd-home-m3__section-head h2,
body.static-home .vd-home-m3__project-intro h2,
body.static-home .vd-home-m3__checker-grid h2,
body.static-home .vd-home-m3__cta-band h2{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
  letter-spacing:-.055em;
}
body.static-home .vd-home-m3__hero h1{color:#fff;font-size:clamp(60px,5.65vw,88px);line-height:.94;max-width:700px}
body.static-home .vd-home-m3__lead,
body.static-home .vd-home-m3__section-head>div>p:last-child,
body.static-home .vd-home-m3__project-intro p,
body.static-home .vd-home-m3__checker-grid>div>p:last-of-type,
body.static-home .vd-home-m3__cta-band p:last-child{
  margin:26px 0 0;color:#d0dbd7;font-size:18px;line-height:1.6;max-width:690px
}
body.static-home .vd-home-m3__hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
body.static-home .vd-home-m3__btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:16px;border:1px solid transparent;text-decoration:none;font-size:16px;font-weight:650;transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease}
body.static-home .vd-home-m3__btn:hover,
body.static-home .vd-home-m3__btn:focus-visible{transform:translateY(-2px)}
body.static-home .vd-home-m3__btn--light{background:#fff;color:#0b1714;box-shadow:0 16px 36px rgba(0,0,0,.18)}
body.static-home .vd-home-m3__btn--ghost{background:rgba(255,255,255,.03);color:#fff;border-color:rgba(255,255,255,.18)}
body.static-home .vd-home-m3__btn--soft{background:#fff;color:#10211b;border-color:var(--vd-line);min-height:48px;padding-inline:18px;box-shadow:0 10px 24px rgba(6,22,17,.07)}
body.static-home .vd-home-m3__btn--compact{min-height:50px;padding-inline:20px}
body.static-home .vd-home-m3__hero-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:42px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08)}
body.static-home .vd-home-m3__hero-points>div{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start}
body.static-home .vd-home-m3__point-icon{display:grid;place-items:center;width:22px;height:22px;margin-top:2px;border-radius:50%;border:1px solid rgba(112,223,209,.4);box-shadow:inset 0 0 0 4px rgba(112,223,209,.08);position:relative}
body.static-home .vd-home-m3__point-icon:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--vd-mint)}
body.static-home .vd-home-m3__hero-points p{margin:0;color:#d6e0db;font-size:15px;line-height:1.45}
body.static-home .vd-home-m3__hero-points strong{display:block;color:#f8fbfa;font-size:15px;font-weight:650}
body.static-home .vd-home-m3__hero-visual{position:relative;min-height:540px}
body.static-home .vd-home-m3__orb{position:absolute;inset:3% 0 0 10%;border-radius:50%;background:radial-gradient(circle at center,rgba(112,223,209,.18),transparent 28%),radial-gradient(circle at center,rgba(99,180,255,.10),transparent 44%);filter:blur(6px)}
body.static-home .vd-home-m3__vcore-wrap{position:absolute;inset:0;display:grid;place-items:center}
body.static-home .vd-home-m3__vcore-wrap:before,
body.static-home .vd-home-m3__vcore-wrap:after{content:"";position:absolute;border:1px solid rgba(112,223,209,.12);border-radius:50%}
body.static-home .vd-home-m3__vcore-wrap:before{width:520px;height:520px}
body.static-home .vd-home-m3__vcore-wrap:after{width:420px;height:420px}
body.static-home .vd-home-m3__vcore-lines{position:absolute;width:420px;height:420px}
body.static-home .vd-home-m3__vcore-lines:before,
body.static-home .vd-home-m3__vcore-lines:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:linear-gradient(90deg,transparent,rgba(112,223,209,.5) 50%,transparent)}
body.static-home .vd-home-m3__vcore-lines:before{width:360px;height:1px}
body.static-home .vd-home-m3__vcore-lines:after{width:1px;height:360px;background:linear-gradient(180deg,transparent,rgba(112,223,209,.5) 50%,transparent)}
body.static-home .vd-home-m3__hero-node{position:absolute;display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:center;min-width:172px;padding:14px 16px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(7,24,20,.72);box-shadow:0 18px 40px rgba(0,0,0,.18);backdrop-filter:blur(12px)}
body.static-home .vd-home-m3__hero-node strong{display:block;color:#fff;font-size:18px;font-weight:650;line-height:1.1}
body.static-home .vd-home-m3__hero-node span{display:block;color:#c9d5d0;font-size:12px;line-height:1.35;margin-top:3px}
body.static-home .vd-home-m3__node-icon{width:34px;height:34px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));position:relative}
body.static-home .vd-home-m3__node-icon:before{content:"";position:absolute;inset:9px;border-radius:6px;border:1px solid rgba(112,223,209,.55)}
body.static-home .vd-home-m3__hero-node--top{top:18px;right:144px}
body.static-home .vd-home-m3__hero-node--left{left:28px;top:50%;transform:translateY(-50%)}
body.static-home .vd-home-m3__hero-node--right{right:22px;top:50%;transform:translateY(-50%)}
body.static-home .vd-home-m3__hero-node--bottom{bottom:20px;right:185px}
body.static-home .vd-home-m3__vcore-core{position:relative;z-index:1;display:grid;place-items:center;width:168px;height:168px;border-radius:34px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(20,40,33,.96),rgba(11,24,20,.96));box-shadow:0 24px 60px rgba(0,0,0,.34),inset 0 0 40px rgba(112,223,209,.08)}
body.static-home .vd-home-m3__vcore-core:before{content:"";position:absolute;inset:12px;border-radius:26px;border:1px solid rgba(112,223,209,.13)}
body.static-home .vd-home-m3__vcore-core img{position:relative;z-index:1;width:56px;height:auto;display:block}
body.static-home .vd-home-m3__vcore-core span{position:relative;z-index:1;margin-top:14px;color:#dce5e1;font-size:13px;font-weight:700;letter-spacing:.2em}
body.static-home .vd-home-m3__hero-signature{position:absolute;right:4px;bottom:114px;color:#dfebe6;font:400 40px/1 "Brush Script MT",cursive;transform:rotate(-6deg)}
body.static-home .vd-home-m3__section{padding:72px 0}
body.static-home .vd-home-m3__section--light{background:var(--vd-paper)}
body.static-home .vd-home-m3__section--soft{background:linear-gradient(180deg,var(--vd-paper) 0,var(--vd-paper-2) 100%)}
body.static-home .vd-home-m3__section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:32px}
body.static-home .vd-home-m3__section-head h2{font-size:clamp(48px,4.5vw,74px);line-height:.97;color:#111a17;max-width:920px}
body.static-home .vd-home-m3__section-head>div>p:last-child{color:var(--vd-text-soft);max-width:700px;font-size:17px;margin-top:18px}
body.static-home .vd-home-m3__section-head>a{white-space:nowrap;margin-top:6px;color:#15241f;text-decoration:none;font-size:16px;font-weight:650}
body.static-home .vd-home-m3__services-grid,
body.static-home .vd-home-m3__problem-grid,
body.static-home .vd-home-m3__lab-grid,
body.static-home .vd-home-m3__principles-grid{display:grid;gap:18px}
body.static-home .vd-home-m3__services-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
body.static-home .vd-home-m3__card,
body.static-home .vd-home-m3__problem-card,
body.static-home .vd-home-m3__mini-project,
body.static-home .vd-home-m3__principle-card,
body.static-home .vd-home-m3__project-feature{border:1px solid var(--vd-line);border-radius:26px;background:rgba(255,255,255,.88);box-shadow:var(--vd-shadow)}
body.static-home .vd-home-m3__service-card{padding:30px}
body.static-home .vd-home-m3__card-icon,
body.static-home .vd-home-m3__problem-icon{width:54px;height:54px;border-radius:16px;background:linear-gradient(180deg,#edf5f2,#dde9f6);border:1px solid rgba(8,34,27,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);position:relative}
body.static-home .vd-home-m3__card-icon:before,
body.static-home .vd-home-m3__problem-icon:before{content:"";position:absolute;inset:15px;border-radius:8px;border:1px solid rgba(16,33,27,.35)}
body.static-home .vd-home-m3__service-card h3,
body.static-home .vd-home-m3__problem-card h3,
body.static-home .vd-home-m3__lab-card h3,
body.static-home .vd-home-m3__mini-project h3,
body.static-home .vd-home-m3__principle-card h3{margin:22px 0 0;color:#121b18;font-size:24px;line-height:1.12;letter-spacing:-.03em}
body.static-home .vd-home-m3__service-card p,
body.static-home .vd-home-m3__problem-card p,
body.static-home .vd-home-m3__lab-card p,
body.static-home .vd-home-m3__mini-project p,
body.static-home .vd-home-m3__principle-card p{margin:18px 0 0;color:var(--vd-text-soft);font-size:16px;line-height:1.62}
body.static-home .vd-home-m3__service-card a,
body.static-home .vd-home-m3__inline-link,
body.static-home .vd-home-m3__mini-project a{display:inline-flex;align-items:center;gap:8px;margin-top:22px;color:#111f1a;text-decoration:none;font-size:15px;font-weight:650}
body.static-home .vd-home-m3__problem-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
body.static-home .vd-home-m3__problem-card{display:flex;flex-direction:column;padding:22px;min-height:252px;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
body.static-home .vd-home-m3__problem-card:hover,
body.static-home .vd-home-m3__problem-card:focus-visible{transform:translateY(-2px);border-color:rgba(99,180,255,.25);box-shadow:0 24px 50px rgba(6,22,17,.08)}
body.static-home .vd-home-m3__inline-link{margin-top:auto;padding-top:20px}
body.static-home .vd-home-m3__projects{background:linear-gradient(90deg,#091d18 0,#0b241d 28%,#f7faf8 28%,#f7faf8 100%);padding:0}
body.static-home .vd-home-m3__project-layout{display:grid;grid-template-columns:320px minmax(0,1fr) 340px;gap:24px;align-items:start;padding:44px 0}
body.static-home .vd-home-m3__project-intro{padding:26px 16px 26px 6px}
body.static-home .vd-home-m3__project-intro h2{color:#fff;font-size:clamp(54px,4.8vw,76px);line-height:.96}
body.static-home .vd-home-m3__project-intro p{margin:22px 0 0;color:#d0dbd7;font-size:17px;line-height:1.58;max-width:280px}
body.static-home .vd-home-m3__project-feature{background:linear-gradient(145deg,#10252d,#09161c 58%,#0d2127);overflow:hidden;position:relative;border-color:rgba(255,255,255,.1);min-height:430px}
body.static-home .vd-home-m3__project-image{position:relative;height:100%;padding:24px}
body.static-home .vd-home-m3__project-image-main{position:absolute;inset:28px 160px 28px 28px;border-radius:28px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(135deg,rgba(112,223,209,.12),rgba(99,180,255,.08) 45%,rgba(4,10,14,.16));display:flex;align-items:flex-start;justify-content:center;padding:38px 20px;color:#dce7e2;font-size:18px;text-align:center}
body.static-home .vd-home-m3__project-image-mobile{position:absolute;right:28px;bottom:28px;width:128px;height:210px;border-radius:28px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(12,26,31,.96),rgba(13,31,37,.9));display:flex;align-items:center;justify-content:center;padding:16px;color:#dce7e2;font-size:14px;text-align:center}
body.static-home .vd-home-m3__project-overlay{position:absolute;left:46px;right:190px;bottom:32px;padding:18px 20px;border-radius:22px;background:rgba(7,19,17,.72);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08)}
body.static-home .vd-home-m3__project-tags,.vd-home-m3__mini-meta{margin:0;font:700 11px/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase}
body.static-home .vd-home-m3__project-tags{color:#a9bbb5}
body.static-home .vd-home-m3__project-overlay h3{margin:12px 0 0;color:#fff;font-size:34px;line-height:1.06}
body.static-home .vd-home-m3__project-overlay p:last-of-type{margin:12px 0 0;color:#d6dfdb;font-size:15px;line-height:1.5}
body.static-home .vd-home-m3__project-overlay a{display:inline-flex;gap:8px;align-items:center;margin-top:14px;color:#fff;text-decoration:none;font-size:15px;font-weight:650}
body.static-home .vd-home-m3__project-side{display:grid;gap:18px}
body.static-home .vd-home-m3__mini-project{display:grid;grid-template-columns:112px 1fr;gap:18px;padding:18px}
body.static-home .vd-home-m3__mini-project-media{border-radius:22px;background:linear-gradient(145deg,#e6f0ed,#cad8df);border:1px solid rgba(8,34,27,.06);display:flex;align-items:center;justify-content:center;padding:14px;color:#5b7068;font-size:15px;line-height:1.45;text-align:center;min-height:150px}
body.static-home .vd-home-m3__mini-meta{color:#92a39d}
body.static-home .vd-home-m3__lab-grid{grid-template-columns:1.12fr .82fr 1.12fr .86fr;align-items:stretch}
body.static-home .vd-home-m3__lab-card,
body.static-home .vd-home-m3__lab-score,
body.static-home .vd-home-m3__lab-visual{padding:28px}
body.static-home .vd-home-m3__pill,
body.static-home .vd-home-m3__principle-number{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 12px;border-radius:999px;background:rgba(114,219,138,.16);color:#176239;font-size:12px;font-weight:700;letter-spacing:.04em}
body.static-home .vd-home-m3__pill--blue{background:rgba(99,180,255,.16);color:#1d5da0}
body.static-home .vd-home-m3__score-ring{display:grid;place-items:center;width:128px;height:128px;border-radius:50%;background:conic-gradient(var(--vd-mint) 0 72%,#dfe8e6 72% 100%);position:relative;margin:6px auto 0}
body.static-home .vd-home-m3__score-ring:before{content:"";position:absolute;inset:13px;border-radius:50%;background:#fff}
body.static-home .vd-home-m3__score-ring em{position:relative;z-index:1;font-style:normal;color:#16231e;font-size:28px;font-weight:700}
body.static-home .vd-home-m3__lab-score{display:grid;align-content:center;justify-items:center;background:linear-gradient(180deg,#fbfefe,#f5faf9)}
body.static-home .vd-home-m3__lab-score ul,
body.static-home .vd-home-m3__checker-body ul{list-style:none;margin:22px 0 0;padding:0;width:100%}
body.static-home .vd-home-m3__lab-score li,
body.static-home .vd-home-m3__checker-body li{display:flex;align-items:center;gap:10px;margin-top:14px;color:#5e716b;font-size:16px}
body.static-home .vd-home-m3__lab-score li span,
body.static-home .vd-home-m3__checker-body li span{width:12px;height:12px;border-radius:50%;background:var(--vd-blue);box-shadow:0 0 0 6px rgba(99,180,255,.12);flex:none}
body.static-home .vd-home-m3__lab-score li:nth-child(2) span,
body.static-home .vd-home-m3__checker-body li:nth-child(2) span{background:var(--vd-mint);box-shadow:0 0 0 6px rgba(112,223,209,.12)}
body.static-home .vd-home-m3__lab-score li:nth-child(3) span,
body.static-home .vd-home-m3__checker-body li:nth-child(3) span{background:var(--vd-green);box-shadow:0 0 0 6px rgba(114,219,138,.12)}
body.static-home .vd-home-m3__lab-score li:nth-child(4) span,
body.static-home .vd-home-m3__checker-body li:nth-child(4) span{background:var(--vd-warm);box-shadow:0 0 0 6px rgba(240,174,96,.12)}
body.static-home .vd-home-m3__coming-soon{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border-radius:15px;border:1px solid var(--vd-line-2);margin-top:24px;color:#475a55;font-size:15px;font-weight:550}
body.static-home .vd-home-m3__lab-visual{position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:flex-end;min-height:280px;background:linear-gradient(145deg,#0a1319,#091116 58%,#0d1e25);border-color:rgba(255,255,255,.05)}
body.static-home .vd-home-m3__lab-visual:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 18%,rgba(99,180,255,.16),transparent 16%),radial-gradient(circle at 34% 72%,rgba(112,223,209,.14),transparent 18%)}
body.static-home .vd-home-m3__social-chip{position:absolute;display:grid;place-items:center;width:64px;height:64px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.08);color:#fff;font-size:24px;font-weight:700;backdrop-filter:blur(8px)}
body.static-home .vd-home-m3__social-chip:nth-child(1){left:28px;top:26px}
body.static-home .vd-home-m3__social-chip:nth-child(2){right:26px;top:18px}
body.static-home .vd-home-m3__social-chip:nth-child(3){left:32px;bottom:56px}
body.static-home .vd-home-m3__visual-ring{position:absolute;right:54px;bottom:54px;width:220px;height:220px;border-radius:50%;border:2px solid rgba(112,223,209,.40);border-top-color:transparent;border-left-color:transparent}
body.static-home .vd-home-m3__visual-ring:before,
body.static-home .vd-home-m3__visual-ring:after{content:"";position:absolute;inset:22px;border-radius:50%;border:1px solid rgba(112,223,209,.26);border-top-color:transparent;border-left-color:transparent}
body.static-home .vd-home-m3__visual-ring:after{inset:42px}
body.static-home .vd-home-m3__lab-visual p{position:relative;z-index:1;margin:0;color:#fff;font-size:22px;line-height:1.35;text-align:right;padding:0 0 20px 20px}
body.static-home .vd-home-m3__principles-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--vd-line);border-radius:28px;overflow:hidden;background:#fff;box-shadow:var(--vd-shadow)}
body.static-home .vd-home-m3__principle-card{padding:28px;background:#fff;border-radius:0;border:0;box-shadow:none;border-right:1px solid var(--vd-line)}
body.static-home .vd-home-m3__principle-card:last-child{border-right:0}
body.static-home .vd-home-m3__principle-number{background:linear-gradient(180deg,#edf5f2,#dde9f6);color:#1c2823;min-width:44px;padding-inline:10px}
body.static-home .vd-home-m3__checker-cta{padding:68px 0}
body.static-home .vd-home-m3__checker-grid{display:grid;grid-template-columns:minmax(0,.98fr) minmax(420px,.92fr);gap:34px;align-items:center}
body.static-home .vd-home-m3__checker-grid h2{color:#fff;font-size:clamp(58px,5vw,82px);line-height:.95;max-width:560px}
body.static-home .vd-home-m3__checker-preview{border:1px solid rgba(255,255,255,.11);border-radius:28px;background:rgba(7,21,18,.72);box-shadow:0 24px 60px rgba(0,0,0,.24);overflow:hidden}
body.static-home .vd-home-m3__checker-head,
body.static-home .vd-home-m3__checker-foot{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;color:#d8e4e0}
body.static-home .vd-home-m3__checker-head{border-bottom:1px solid rgba(255,255,255,.08)}
body.static-home .vd-home-m3__checker-head span{margin:0;color:#bad0c7}
body.static-home .vd-home-m3__checker-head span:last-child{color:var(--vd-mint)}
body.static-home .vd-home-m3__checker-body{display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:center;padding:24px 22px}
body.static-home .vd-home-m3__score-ring--dark{background:conic-gradient(var(--vd-mint) 0 71%,rgba(255,255,255,.12) 71% 100%);margin:0}
body.static-home .vd-home-m3__score-ring--dark:before{background:#091915}
body.static-home .vd-home-m3__score-ring--dark em{color:#fff}
body.static-home .vd-home-m3__checker-body li{justify-content:space-between;color:#d3dfda}
body.static-home .vd-home-m3__checker-body li em{font-style:normal;color:#aec0b9;font-size:14px;margin-left:auto}
body.static-home .vd-home-m3__checker-foot{border-top:1px solid rgba(255,255,255,.08);color:#cad9d3}
body.static-home .vd-home-m3__section--cta{padding:18px 0 0;background:linear-gradient(180deg,var(--vd-paper) 0,var(--vd-paper) 22%,#061712 22%,#061712 100%)}
body.static-home .vd-home-m3__cta-band{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:44px 46px;border-radius:28px 28px 0 0;border:1px solid rgba(255,255,255,.09);background:linear-gradient(90deg,rgba(112,223,209,.08),transparent 20%,transparent 80%,rgba(99,180,255,.08)),linear-gradient(180deg,#071813,#06110e);box-shadow:0 28px 60px rgba(0,0,0,.24)}
body.static-home .vd-home-m3__cta-band h2{color:#fff;font-size:clamp(50px,4.4vw,72px);line-height:.96;max-width:900px}
body.static-home .vd-home-m3__hero-actions--cta{margin-top:0;justify-content:flex-end;flex:none}
body.static-home .vd-home-m3 a:focus-visible{outline:2px solid rgba(99,180,255,.7);outline-offset:4px}

@media (max-width: 1240px){
  body.static-home .vd-home-m3__hero-grid,
  body.static-home .vd-home-m3__checker-grid,
  body.static-home .vd-home-m3__cta-band{grid-template-columns:1fr;flex-direction:column;align-items:flex-start}
  body.static-home .vd-home-m3__project-layout{grid-template-columns:1fr}
  body.static-home .vd-home-m3__projects{background:linear-gradient(180deg,#091d18 0,#0b241d 22%,#f7faf8 22%,#f7faf8 100%)}
  body.static-home .vd-home-m3__project-intro{padding:22px 0 0}
  body.static-home .vd-home-m3__project-intro p{max-width:640px}
  body.static-home .vd-home-m3__lab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 1024px){
  body.static-home .vd-home-m3__shell{width:min(100% - 34px,1360px)}
  body.static-home .vd-home-m3__hero{padding-top:34px}
  body.static-home .vd-home-m3__hero-visual{min-height:500px}
  body.static-home .vd-home-m3__vcore-wrap:before{width:430px;height:430px}
  body.static-home .vd-home-m3__vcore-wrap:after{width:350px;height:350px}
  body.static-home .vd-home-m3__hero-node--top{right:88px}
  body.static-home .vd-home-m3__hero-node--bottom{right:128px}
  body.static-home .vd-home-m3__services-grid{grid-template-columns:1fr}
  body.static-home .vd-home-m3__problem-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.static-home .vd-home-m3__principles-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;border:0;background:transparent;box-shadow:none}
  body.static-home .vd-home-m3__principle-card{border:1px solid var(--vd-line)!important;border-radius:24px;box-shadow:var(--vd-shadow)}
}
@media (max-width: 820px){
  body.static-home .vd-home-m3__hero h1{font-size:clamp(44px,12vw,66px)}
  body.static-home .vd-home-m3__hero-points{grid-template-columns:1fr}
  body.static-home .vd-home-m3__section{padding:56px 0}
  body.static-home .vd-home-m3__section-head{flex-direction:column;align-items:flex-start}
  body.static-home .vd-home-m3__section-head h2{font-size:clamp(36px,10vw,58px)}
  body.static-home .vd-home-m3__lab-grid,
  body.static-home .vd-home-m3__problem-grid{grid-template-columns:1fr}
  body.static-home .vd-home-m3__hero-node{position:relative;transform:none!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important}
  body.static-home .vd-home-m3__hero-visual{min-height:auto}
  body.static-home .vd-home-m3__vcore-wrap{position:relative;gap:18px;padding:20px 0 14px}
  body.static-home .vd-home-m3__vcore-wrap:before,
  body.static-home .vd-home-m3__vcore-wrap:after,
  body.static-home .vd-home-m3__vcore-lines,
  body.static-home .vd-home-m3__hero-signature{display:none}
  body.static-home .vd-home-m3__vcore-core{margin:14px auto}
  body.static-home .vd-home-m3__hero-node{width:100%;max-width:none;grid-template-columns:34px 1fr}
  body.static-home .vd-home-m3__project-image-main{inset:20px 20px 156px 20px}
  body.static-home .vd-home-m3__project-image-mobile{right:20px;bottom:20px}
  body.static-home .vd-home-m3__project-overlay{left:34px;right:34px;bottom:40px}
  body.static-home .vd-home-m3__mini-project{grid-template-columns:1fr}
  body.static-home .vd-home-m3__checker-grid{gap:24px}
  body.static-home .vd-home-m3__checker-grid h2{font-size:clamp(44px,10vw,62px)}
  body.static-home .vd-home-m3__checker-body{grid-template-columns:1fr;justify-items:start}
  body.static-home .vd-home-m3__score-ring--dark{margin:0 auto 0 0}
}
@media (max-width: 560px){
  body.static-home .vd-home-m3__hero-actions,
  body.static-home .vd-home-m3__hero-actions--cta{flex-direction:column;align-items:stretch;width:100%}
  body.static-home .vd-home-m3__btn{width:100%}
  body.static-home .vd-home-m3__project-intro h2,
  body.static-home .vd-home-m3__cta-band h2{font-size:clamp(38px,13vw,54px)}
  body.static-home .vd-home-m3__project-overlay{left:20px;right:20px;bottom:20px}
  body.static-home .vd-home-m3__project-overlay h3{font-size:28px}
  body.static-home .vd-home-m3__project-image{padding:18px}
  body.static-home .vd-home-m3__project-image-main{inset:18px 18px 166px 18px;font-size:16px}
  body.static-home .vd-home-m3__project-image-mobile{width:96px;height:168px}
  body.static-home .vd-home-m3__lab-visual{min-height:240px}
  body.static-home .vd-home-m3__cta-band{padding:30px 22px}
}


/* ======================================================================
   Mockup alignment pass · projects, Vanilla Lab, principles
   ====================================================================== */

/* Projects: full dark band, compact center showcase and stacked cards. */
body.static-home .vd-home-m3__projects{
  padding:0;
  background:
    radial-gradient(circle at 66% 18%,rgba(99,180,255,.10),transparent 22%),
    radial-gradient(circle at 10% 86%,rgba(112,223,209,.08),transparent 26%),
    linear-gradient(180deg,#081b16,#071813);
}
body.static-home .vd-home-m3__project-layout{
  display:grid;
  grid-template-columns:minmax(235px,.72fr) minmax(470px,1.42fr) minmax(290px,.86fr);
  gap:18px;
  align-items:stretch;
  padding:34px 0;
}
body.static-home .vd-home-m3__project-intro{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:16px 22px 16px 0;
}
body.static-home .vd-home-m3__project-intro h2{
  color:#fff;
  font-size:clamp(44px,3.7vw,60px);
  line-height:.97;
  max-width:300px;
}
body.static-home .vd-home-m3__project-intro p{
  max-width:285px;
  margin:18px 0 0;
  color:#ccd9d4;
  font-size:15px;
  line-height:1.58;
}
body.static-home .vd-home-m3__project-intro .vd-home-m3__btn{align-self:flex-start;margin-top:22px}
body.static-home .vd-home-m3__project-feature{
  min-height:390px;
  border-color:rgba(255,255,255,.08);
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(145deg,#0d242b,#08161b 58%,#10262c);
  box-shadow:0 24px 60px rgba(0,0,0,.22);
}
body.static-home .vd-home-m3__project-shot{
  position:relative;
  height:100%;
  min-height:390px;
  overflow:hidden;
  padding:20px;
  background:
    radial-gradient(circle at 16% 16%,rgba(112,223,209,.14),transparent 22%),
    radial-gradient(circle at 86% 18%,rgba(99,180,255,.12),transparent 18%);
}
body.static-home .vd-home-m3__project-shot-ui{
  position:absolute;
  inset:22px 22px 22px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  overflow:hidden;
}
body.static-home .vd-home-m3__project-shot-ui>span{
  position:absolute;
  top:14px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.20);
}
body.static-home .vd-home-m3__project-shot-ui>span:nth-child(1){left:16px}
body.static-home .vd-home-m3__project-shot-ui>span:nth-child(2){left:30px}
body.static-home .vd-home-m3__project-shot-ui>span:nth-child(3){left:44px}
body.static-home .vd-home-m3__project-shot-screen{
  position:absolute;
  inset:38px 14px 14px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:36px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.055);
  background:
    linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.035) 50%,transparent 50.2%),
    linear-gradient(180deg,rgba(112,223,209,.08),rgba(7,18,22,.18));
  color:#d5e0dc;
  font-size:14px;
  text-align:center;
}
body.static-home .vd-home-m3__project-overlay{
  position:absolute;
  left:34px;
  right:34px;
  bottom:30px;
  z-index:2;
  padding:17px 18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(6,18,16,.78);
  backdrop-filter:blur(12px);
}
body.static-home .vd-home-m3__project-overlay h3{font-size:30px}
body.static-home .vd-home-m3__project-overlay p:last-of-type{font-size:14px}
body.static-home .vd-home-m3__project-side{display:grid;grid-template-rows:1fr 1fr;gap:14px}
body.static-home .vd-home-m3__mini-project{
  display:grid;
  grid-template-columns:42% 1fr;
  gap:14px;
  min-height:188px;
  padding:14px;
  border-radius:20px;
  background:#fff;
  box-shadow:0 16px 36px rgba(0,0,0,.10);
}
body.static-home .vd-home-m3__mini-project-media{
  min-height:0;
  height:100%;
  border-radius:16px;
  padding:12px;
  background:
    linear-gradient(145deg,rgba(112,223,209,.18),rgba(99,180,255,.15)),
    #dfe8e6;
  font-size:13px;
}
body.static-home .vd-home-m3__mini-project-copy{display:flex;flex-direction:column;justify-content:center;min-width:0}
body.static-home .vd-home-m3__mini-project h3{margin-top:7px;font-size:24px}
body.static-home .vd-home-m3__mini-project p{margin-top:9px;font-size:13px;line-height:1.48}
body.static-home .vd-home-m3__mini-project a{margin-top:11px;font-size:13px}
body.static-home .vd-home-m3__mini-meta{font-size:9px}

/* Vanilla Lab: editorial intro + two horizontal product cards. */
body.static-home .vd-home-m3__lab{padding:48px 0 52px;background:linear-gradient(180deg,#fbfcfa,#f6faf8)}
body.static-home .vd-home-m3__lab-layout{
  display:grid;
  grid-template-columns:minmax(225px,.72fr) repeat(2,minmax(0,1.18fr));
  gap:18px;
  align-items:stretch;
}
body.static-home .vd-home-m3__lab-intro{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8px 20px 8px 0;
}
body.static-home .vd-home-m3__lab-intro h2,
body.static-home .vd-home-m3__principles-intro h2{
  margin:0;
  color:#111a17;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
  letter-spacing:-.05em;
}
body.static-home .vd-home-m3__lab-intro h2{font-size:clamp(40px,3.3vw,54px);line-height:.98}
body.static-home .vd-home-m3__lab-intro>p:last-of-type{margin:16px 0 0;color:#63746e;font-size:15px;line-height:1.55}
body.static-home .vd-home-m3__lab-intro>a,
body.static-home .vd-home-m3__principles-intro>a{display:inline-flex;align-items:center;gap:8px;margin-top:20px;color:#14231e;text-decoration:none;font-size:14px;font-weight:650}
body.static-home .vd-home-m3__product-card{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(180px,1.08fr);
  min-height:250px;
  overflow:hidden;
  border:1px solid var(--vd-line);
  border-radius:22px;
  background:#fff;
  box-shadow:0 16px 38px rgba(6,22,17,.06);
}
body.static-home .vd-home-m3__product-copy{display:flex;flex-direction:column;align-items:flex-start;padding:24px 22px}
body.static-home .vd-home-m3__product-copy h3{margin:15px 0 0;color:#111b18;font-size:26px;line-height:1.1;letter-spacing:-.035em}
body.static-home .vd-home-m3__product-copy p{margin:14px 0 0;color:#62736d;font-size:14px;line-height:1.55}
body.static-home .vd-home-m3__product-copy .vd-home-m3__btn,
body.static-home .vd-home-m3__product-copy .vd-home-m3__coming-soon{margin-top:auto}
body.static-home .vd-home-m3__product-visual{position:relative;min-width:0}
body.static-home .vd-home-m3__product-visual--checker{
  display:grid;
  align-content:center;
  justify-items:center;
  padding:22px;
  background:linear-gradient(145deg,#f4fbfa,#edf7f6 60%,#eaf4f6);
  border-left:1px solid var(--vd-line);
}
body.static-home .vd-home-m3__product-visual--checker .vd-home-m3__score-ring{width:102px;height:102px;margin:0}
body.static-home .vd-home-m3__product-visual--checker .vd-home-m3__score-ring:before{inset:11px}
body.static-home .vd-home-m3__product-visual--checker ul{list-style:none;margin:14px 0 0;padding:0;width:100%}
body.static-home .vd-home-m3__product-visual--checker li{display:flex;align-items:center;gap:8px;margin-top:9px;color:#5c6d67;font-size:13px}
body.static-home .vd-home-m3__product-visual--checker li span{width:9px;height:9px;border-radius:50%;background:var(--vd-blue);box-shadow:0 0 0 5px rgba(99,180,255,.10)}
body.static-home .vd-home-m3__product-visual--checker li:nth-child(2) span{background:var(--vd-mint);box-shadow:0 0 0 5px rgba(112,223,209,.10)}
body.static-home .vd-home-m3__product-visual--checker li:nth-child(3) span{background:var(--vd-green);box-shadow:0 0 0 5px rgba(114,219,138,.10)}
body.static-home .vd-home-m3__product-visual--checker li:nth-child(4) span{background:var(--vd-warm);box-shadow:0 0 0 5px rgba(240,174,96,.10)}
body.static-home .vd-home-m3__product-visual--social{
  min-height:250px;
  overflow:hidden;
  background:
    radial-gradient(circle at 76% 18%,rgba(99,180,255,.18),transparent 19%),
    radial-gradient(circle at 24% 72%,rgba(112,223,209,.14),transparent 22%),
    linear-gradient(145deg,#0b151c,#091116 60%,#0c2024);
  border-left:1px solid rgba(255,255,255,.06);
}
body.static-home .vd-home-m3__product-visual--social .vd-home-m3__social-chip{width:48px;height:48px;border-radius:14px;font-size:18px}
body.static-home .vd-home-m3__product-visual--social .vd-home-m3__social-chip:nth-child(1){left:20px;top:22px}
body.static-home .vd-home-m3__product-visual--social .vd-home-m3__social-chip:nth-child(2){right:20px;top:18px}
body.static-home .vd-home-m3__product-visual--social .vd-home-m3__social-chip:nth-child(3){left:24px;bottom:32px}
body.static-home .vd-home-m3__product-visual--social .vd-home-m3__visual-ring{right:20px;bottom:22px;width:160px;height:160px}
body.static-home .vd-home-m3__product-visual--social p{position:absolute;right:18px;bottom:22px;z-index:2;margin:0;color:#fff;font-size:18px;line-height:1.3;text-align:right}

/* Principles: intro on the left, four compact cards on the right. */
body.static-home .vd-home-m3__principles{padding:42px 0 46px;background:#fbfcfa}
body.static-home .vd-home-m3__principles-layout{display:grid;grid-template-columns:minmax(250px,.82fr) minmax(0,3.18fr);gap:22px;align-items:stretch}
body.static-home .vd-home-m3__principles-intro{display:flex;flex-direction:column;justify-content:center;padding:8px 12px 8px 0}
body.static-home .vd-home-m3__principles-intro h2{font-size:clamp(40px,3.25vw,54px);line-height:.98}
body.static-home .vd-home-m3__principles-intro>p:last-of-type{margin:15px 0 0;color:#63746e;font-size:15px;line-height:1.52}
body.static-home .vd-home-m3__principles-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body.static-home .vd-home-m3__principle-card{
  min-height:190px;
  padding:20px 18px;
  border:1px solid var(--vd-line)!important;
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 28px rgba(6,22,17,.05);
}
body.static-home .vd-home-m3__principle-number{min-width:38px;min-height:28px;padding:0 9px;font-size:10px}
body.static-home .vd-home-m3__principle-card h3{margin-top:17px;font-size:18px;line-height:1.15}
body.static-home .vd-home-m3__principle-card p{margin-top:11px;font-size:13px;line-height:1.48}

@media (max-width:1180px){
  body.static-home .vd-home-m3__project-layout{grid-template-columns:240px minmax(0,1fr);}
  body.static-home .vd-home-m3__project-side{grid-column:1/-1;grid-template-columns:1fr 1fr;grid-template-rows:none}
  body.static-home .vd-home-m3__lab-layout{grid-template-columns:1fr 1fr}
  body.static-home .vd-home-m3__lab-intro{grid-column:1/-1;padding-right:0;max-width:720px}
  body.static-home .vd-home-m3__principles-layout{grid-template-columns:1fr}
  body.static-home .vd-home-m3__principles-intro{max-width:680px;padding-right:0}
}
@media (max-width:820px){
  body.static-home .vd-home-m3__project-layout{grid-template-columns:1fr}
  body.static-home .vd-home-m3__project-intro{padding-right:0}
  body.static-home .vd-home-m3__project-intro h2{max-width:560px}
  body.static-home .vd-home-m3__project-side{grid-template-columns:1fr}
  body.static-home .vd-home-m3__project-feature,
  body.static-home .vd-home-m3__project-shot{min-height:360px}
  body.static-home .vd-home-m3__lab-layout{grid-template-columns:1fr}
  body.static-home .vd-home-m3__lab-intro{grid-column:auto}
  body.static-home .vd-home-m3__principles-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:580px){
  body.static-home .vd-home-m3__project-overlay{left:20px;right:20px;bottom:20px}
  body.static-home .vd-home-m3__project-overlay h3{font-size:26px}
  body.static-home .vd-home-m3__mini-project{grid-template-columns:112px 1fr}
  body.static-home .vd-home-m3__product-card{grid-template-columns:1fr}
  body.static-home .vd-home-m3__product-visual--checker,
  body.static-home .vd-home-m3__product-visual--social{border-left:0;border-top:1px solid var(--vd-line);min-height:210px}
  body.static-home .vd-home-m3__principles-grid{grid-template-columns:1fr}
}


/* ======================================================================
   Mockup typography correction · Vanilla Lab + principles
   Keeps the exact section structure, but matches the compact type scale
   and left-column proportions of the approved desktop mockup.
   ====================================================================== */
@media (min-width:1181px){
  body.static-home .vd-home-m3__lab-layout{
    grid-template-columns:320px minmax(0,1fr) minmax(0,1fr);
    gap:16px;
  }
  body.static-home .vd-home-m3__lab-intro{
    padding:6px 22px 6px 0;
    min-width:0;
  }
  body.static-home .vd-home-m3__lab-intro h2{
    max-width:310px;
    font-size:38px;
    line-height:1.02;
    letter-spacing:-.045em;
    overflow-wrap:normal;
    word-break:normal;
  }
  body.static-home .vd-home-m3__lab-intro>p:last-of-type{
    max-width:290px;
    margin-top:14px;
    font-size:14px;
    line-height:1.5;
  }
  body.static-home .vd-home-m3__lab-intro>a{
    margin-top:17px;
    font-size:13px;
  }
  body.static-home .vd-home-m3__product-card{
    grid-template-columns:minmax(0,.9fr) minmax(190px,1.1fr);
    min-height:238px;
    border-radius:20px;
  }
  body.static-home .vd-home-m3__product-copy{
    padding:22px 20px;
  }
  body.static-home .vd-home-m3__product-copy h3{
    margin-top:13px;
    font-size:22px;
    line-height:1.08;
  }
  body.static-home .vd-home-m3__product-copy p{
    margin-top:12px;
    font-size:13px;
    line-height:1.5;
  }
  body.static-home .vd-home-m3__product-copy .vd-home-m3__btn,
  body.static-home .vd-home-m3__product-copy .vd-home-m3__coming-soon{
    min-height:42px;
    padding-inline:15px;
    font-size:13px;
  }
  body.static-home .vd-home-m3__product-visual--checker{
    padding:18px;
  }
  body.static-home .vd-home-m3__product-visual--checker .vd-home-m3__score-ring{
    width:92px;
    height:92px;
  }
  body.static-home .vd-home-m3__product-visual--checker li{
    margin-top:8px;
    font-size:12px;
  }
  body.static-home .vd-home-m3__product-visual--social{
    min-height:238px;
  }
  body.static-home .vd-home-m3__product-visual--social p{
    right:16px;
    bottom:18px;
    font-size:16px;
    line-height:1.25;
  }

  body.static-home .vd-home-m3__principles-layout{
    grid-template-columns:300px minmax(0,1fr);
    gap:18px;
  }
  body.static-home .vd-home-m3__principles-intro{
    padding:6px 20px 6px 0;
    min-width:0;
  }
  body.static-home .vd-home-m3__principles-intro h2{
    max-width:290px;
    font-size:38px;
    line-height:1.02;
    letter-spacing:-.045em;
  }
  body.static-home .vd-home-m3__principles-intro>p:last-of-type{
    max-width:275px;
    margin-top:13px;
    font-size:14px;
    line-height:1.48;
  }
  body.static-home .vd-home-m3__principles-intro>a{
    margin-top:17px;
    font-size:13px;
  }
  body.static-home .vd-home-m3__principles-grid{
    gap:8px;
  }
  body.static-home .vd-home-m3__principle-card{
    min-height:174px;
    padding:18px 16px;
    border-radius:16px;
  }
  body.static-home .vd-home-m3__principle-number{
    min-width:34px;
    min-height:25px;
    padding:0 8px;
    font-size:9px;
  }
  body.static-home .vd-home-m3__principle-card h3{
    margin-top:14px;
    font-size:16px;
    line-height:1.15;
    letter-spacing:-.025em;
  }
  body.static-home .vd-home-m3__principle-card p{
    margin-top:9px;
    font-size:12px;
    line-height:1.45;
  }
}

@media (min-width:821px) and (max-width:1180px){
  body.static-home .vd-home-m3__lab-intro h2,
  body.static-home .vd-home-m3__principles-intro h2{
    font-size:42px;
    line-height:1.02;
  }
  body.static-home .vd-home-m3__lab-intro>p:last-of-type,
  body.static-home .vd-home-m3__principles-intro>p:last-of-type{
    font-size:14px;
  }
}


/* ======================================================================
   Hero refinement · closer to approved mockup
   ====================================================================== */
body.static-home .vd-home-m3__hero{padding:52px 0 34px}
body.static-home .vd-home-m3__hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(580px,.98fr);gap:24px;align-items:start}
body.static-home .vd-home-m3__hero-copy{padding:34px 0 0}
body.static-home .vd-home-m3__eyebrow{margin-bottom:20px;color:#b4c7bf}
body.static-home .vd-home-m3__hero h1{max-width:730px;font-size:clamp(66px,5.7vw,96px);line-height:.92;letter-spacing:-.06em}
body.static-home .vd-home-m3__lead{max-width:760px;margin-top:30px;color:#d6dfdb;font-size:18px;line-height:1.62}
body.static-home .vd-home-m3__hero-actions{margin-top:34px;gap:16px}
body.static-home .vd-home-m3__btn{min-height:58px;padding:0 30px;border-radius:18px}
body.static-home .vd-home-m3__btn--ghost{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.20)}
body.static-home .vd-home-m3__hero-points{margin-top:46px;padding-top:28px;gap:20px;border-top:1px solid rgba(255,255,255,.09)}
body.static-home .vd-home-m3__hero-points>div{grid-template-columns:30px 1fr;gap:14px;align-items:start}
body.static-home .vd-home-m3__point-icon{width:26px;height:26px;border-color:rgba(112,223,209,.52);box-shadow:0 0 0 6px rgba(112,223,209,.06),inset 0 0 0 3px rgba(112,223,209,.08)}
body.static-home .vd-home-m3__point-icon:before{width:9px;height:9px;box-shadow:0 0 16px rgba(112,223,209,.55)}
body.static-home .vd-home-m3__hero-points p{font-size:14px;line-height:1.52;color:#cfddd7}
body.static-home .vd-home-m3__hero-points strong{display:inline;font-size:14px;color:#ffffff}

body.static-home .vd-home-m3__hero-visual{min-height:610px;display:flex;align-items:center;justify-content:center}
body.static-home .vd-home-m3__orb{inset:0;opacity:.9;background:
  radial-gradient(circle at 68% 22%, rgba(99,180,255,.18), transparent 18%),
  radial-gradient(circle at 34% 72%, rgba(112,223,209,.12), transparent 22%),
  radial-gradient(circle at center, rgba(112,223,209,.10), transparent 44%)}
body.static-home .vd-home-m3__vcore-wrap{position:relative;inset:auto;width:100%;height:100%;min-height:610px;display:block}
body.static-home .vd-home-m3__orbit-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(112,223,209,.13);pointer-events:none}
body.static-home .vd-home-m3__orbit-ring--outer{width:560px;height:560px;box-shadow:0 0 50px rgba(112,223,209,.04) inset}
body.static-home .vd-home-m3__orbit-ring--inner{width:436px;height:436px;border-color:rgba(112,223,209,.17)}
body.static-home .vd-home-m3__orbit-ring--outer:before,
body.static-home .vd-home-m3__orbit-ring--outer:after,
body.static-home .vd-home-m3__orbit-ring--inner:before,
body.static-home .vd-home-m3__orbit-ring--inner:after{content:"";position:absolute;inset:0;border-radius:50%;border:inherit;opacity:.45}
body.static-home .vd-home-m3__orbit-ring--outer:before{animation:vdOrbitPulse 7s ease-in-out infinite}
body.static-home .vd-home-m3__orbit-ring--outer:after{animation:vdOrbitPulse 7s ease-in-out 2.8s infinite}
body.static-home .vd-home-m3__orbit-ring--inner:before{animation:vdOrbitPulse 6s ease-in-out 1.4s infinite}
body.static-home .vd-home-m3__orbit-ring--inner:after{animation:vdOrbitPulse 6s ease-in-out 4.2s infinite}
body.static-home .vd-home-m3__orbit-dot{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:var(--vd-mint);box-shadow:0 0 18px rgba(112,223,209,.8),0 0 0 8px rgba(112,223,209,.08);transform:translate(-50%,-50%)}
body.static-home .vd-home-m3__orbit-dot--1{margin:-220px 0 0 -164px;animation:vdFloat 4.8s ease-in-out infinite}
body.static-home .vd-home-m3__orbit-dot--2{margin:-152px 0 0 206px;background:var(--vd-warm);box-shadow:0 0 18px rgba(240,174,96,.75),0 0 0 8px rgba(240,174,96,.08);animation:vdFloat 5.4s ease-in-out 1.2s infinite}
body.static-home .vd-home-m3__orbit-dot--3{margin:112px 0 0 -188px;background:var(--vd-blue);box-shadow:0 0 18px rgba(99,180,255,.75),0 0 0 8px rgba(99,180,255,.08);animation:vdFloat 5.8s ease-in-out .6s infinite}
body.static-home .vd-home-m3__orbit-dot--4{margin:190px 0 0 112px;animation:vdFloat 6.1s ease-in-out 1.8s infinite}

body.static-home .vd-home-m3__vcore-lines{position:absolute;left:50%;top:50%;width:420px;height:420px;transform:translate(-50%,-50%)}
body.static-home .vd-home-m3__vcore-lines:before,
body.static-home .vd-home-m3__vcore-lines:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
body.static-home .vd-home-m3__vcore-lines:before{width:1px;height:338px;background:linear-gradient(180deg,transparent 0,rgba(112,223,209,.72) 18%,rgba(112,223,209,.30) 50%,rgba(112,223,209,.72) 82%,transparent 100%);box-shadow:0 0 18px rgba(112,223,209,.28);animation:vdLinePulse 4.4s ease-in-out infinite}
body.static-home .vd-home-m3__vcore-lines:after{width:420px;height:1px;background:linear-gradient(90deg,transparent 0,rgba(112,223,209,.72) 18%,rgba(112,223,209,.26) 50%,rgba(112,223,209,.72) 82%,transparent 100%);box-shadow:0 0 18px rgba(112,223,209,.25);animation:vdLinePulse 4.4s ease-in-out 1.2s infinite}

body.static-home .vd-home-m3__vcore-core{width:196px;height:196px;border-radius:40px;left:50%;top:50%;transform:translate(-50%,-50%);position:absolute;border-color:rgba(112,223,209,.16);background:linear-gradient(180deg,rgba(17,37,31,.98),rgba(7,18,15,.98));box-shadow:0 28px 64px rgba(0,0,0,.30),inset 0 0 46px rgba(112,223,209,.09)}
body.static-home .vd-home-m3__vcore-core:before{inset:14px;border-radius:30px;border-color:rgba(112,223,209,.18)}
body.static-home .vd-home-m3__vcore-core:after{content:"";position:absolute;inset:-22px;border-radius:58px;background:radial-gradient(circle at center,rgba(112,223,209,.14),transparent 62%);filter:blur(8px);animation:vdGlowPulse 4.8s ease-in-out infinite;pointer-events:none}
body.static-home .vd-home-m3__vcore-seal{position:absolute;inset:18px;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0));border:1px solid rgba(255,255,255,.05)}
body.static-home .vd-home-m3__vcore-seal:before,
body.static-home .vd-home-m3__vcore-seal:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%}
body.static-home .vd-home-m3__vcore-seal:before{width:120px;height:120px;border:1px solid rgba(112,223,209,.12)}
body.static-home .vd-home-m3__vcore-seal:after{width:92px;height:92px;border:1px dashed rgba(112,223,209,.16);animation:vdSealSpin 18s linear infinite}
body.static-home .vd-home-m3__vcore-core img{width:62px;filter:drop-shadow(0 0 16px rgba(255,243,220,.16));opacity:.94;animation:vdLogoBreathe 4.6s ease-in-out infinite;z-index:2}
body.static-home .vd-home-m3__vcore-core span{margin-top:16px;font-size:14px;letter-spacing:.24em;color:#eef7f2}

body.static-home .vd-home-m3__hero-node{min-width:238px;grid-template-columns:42px 1fr;gap:12px;padding:16px 18px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(7,22,18,.64);backdrop-filter:blur(14px);box-shadow:0 20px 42px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03)}
body.static-home .vd-home-m3__hero-node strong{font-size:18px;line-height:1.05}
body.static-home .vd-home-m3__hero-node span{margin-top:4px;font-size:13px;color:#d1dcd7}
body.static-home .vd-home-m3__node-icon{width:36px;height:36px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);background-repeat:no-repeat;background-position:center;background-size:18px 18px}
body.static-home .vd-home-m3__node-icon:before,
body.static-home .vd-home-m3__node-icon:after{content:none}
body.static-home .vd-home-m3__node-icon--website{background-image:url("../icons/hero/website-white.png");background-size:20px auto}
body.static-home .vd-home-m3__node-icon--system{background-image:url("../icons/hero/system-white.png");background-size:18px 18px}
body.static-home .vd-home-m3__node-icon--product{background-image:url("../icons/hero/product-white.png");background-size:18px 18px}
body.static-home .vd-home-m3__node-icon--data{background-image:url("../icons/hero/data-white.png");background-size:18px 18px}

body.static-home .vd-home-m3__hero-node--top{top:56px;right:74px}
body.static-home .vd-home-m3__hero-node--left{left:8px;top:50%;transform:translateY(-50%)}
body.static-home .vd-home-m3__hero-node--right{right:10px;top:50%;transform:translateY(-50%)}
body.static-home .vd-home-m3__hero-node--bottom{right:88px;bottom:54px}
body.static-home .vd-home-m3__hero-signature{right:20px;bottom:122px;font-size:28px;line-height:1.1;color:#eef7f2;opacity:.95;text-shadow:0 0 18px rgba(255,255,255,.08)}

@keyframes vdOrbitPulse{0%,100%{transform:scale(1);opacity:.45}50%{transform:scale(1.035);opacity:.75}}
@keyframes vdLinePulse{0%,100%{opacity:.72;filter:none}50%{opacity:1;filter:drop-shadow(0 0 10px rgba(112,223,209,.45))}}
@keyframes vdGlowPulse{0%,100%{opacity:.56;transform:scale(1)}50%{opacity:.92;transform:scale(1.04)}}
@keyframes vdSealSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes vdLogoBreathe{0%,100%{transform:translateY(0);opacity:.94}50%{transform:translateY(-2px);opacity:1}}
@keyframes vdFloat{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.18)}}

@media (max-width: 1320px){
  body.static-home .vd-home-m3__hero-grid{grid-template-columns:minmax(0,1fr) minmax(520px,.95fr)}
  body.static-home .vd-home-m3__hero h1{font-size:clamp(58px,5.2vw,86px)}
  body.static-home .vd-home-m3__orbit-ring--outer{width:500px;height:500px}
  body.static-home .vd-home-m3__orbit-ring--inner{width:392px;height:392px}
  body.static-home .vd-home-m3__hero-node--top{right:42px}
  body.static-home .vd-home-m3__hero-node--bottom{right:60px}
}
@media (max-width: 1100px){
  body.static-home .vd-home-m3__hero-visual{min-height:560px}
  body.static-home .vd-home-m3__vcore-wrap{min-height:560px}
  body.static-home .vd-home-m3__hero-node{min-width:212px}
  body.static-home .vd-home-m3__hero-node--left{left:0}
  body.static-home .vd-home-m3__hero-node--right{right:0}
  body.static-home .vd-home-m3__hero-signature{right:6px;font-size:24px}
}
@media (max-width: 820px){
  body.static-home .vd-home-m3__hero-grid{gap:18px}
  body.static-home .vd-home-m3__hero-copy{padding-top:12px}
  body.static-home .vd-home-m3__hero h1{font-size:clamp(46px,12vw,66px)}
  body.static-home .vd-home-m3__hero-visual{min-height:auto;padding-top:8px}
  body.static-home .vd-home-m3__vcore-wrap{min-height:auto;display:grid;grid-template-columns:1fr;gap:14px}
  body.static-home .vd-home-m3__orbit-ring,
  body.static-home .vd-home-m3__orbit-dot,
  body.static-home .vd-home-m3__vcore-lines,
  body.static-home .vd-home-m3__hero-signature{display:none}
  body.static-home .vd-home-m3__vcore-core{position:relative;left:auto;top:auto;transform:none;margin:6px auto 10px;width:176px;height:176px}
  body.static-home .vd-home-m3__hero-node{position:relative;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;width:100%;min-width:0}
}


/* ======================================================================
   Hero VCORE · centered system + restrained motion pass
   ====================================================================== */
@media (min-width:821px){
  body.static-home .vd-home-m3__hero-visual{
    min-height:610px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
  }
  body.static-home .vd-home-m3__vcore-wrap{
    position:relative;
    width:min(100%,650px);
    height:610px;
    min-height:610px;
    margin-inline:auto;
    flex:none;
  }

  /* Core and satellites are now truly centered around the same axis. */
  body.static-home .vd-home-m3__vcore-core{
    left:50%;
    top:50%;
    width:190px;
    height:190px;
    transform:translate(-50%,-50%);
  }
  body.static-home .vd-home-m3__orbit-ring--outer{
    width:520px;
    height:520px;
  }
  body.static-home .vd-home-m3__orbit-ring--inner{
    width:398px;
    height:398px;
  }
  body.static-home .vd-home-m3__vcore-lines{
    left:50%;
    top:50%;
    width:404px;
    height:404px;
    transform:translate(-50%,-50%);
  }

  body.static-home .vd-home-m3__hero-node{
    min-width:218px;
    max-width:232px;
    padding:14px 16px;
  }
  body.static-home .vd-home-m3__hero-node--top{
    left:50%;
    right:auto;
    top:30px;
    transform:translateX(-50%);
  }
  body.static-home .vd-home-m3__hero-node--bottom{
    left:50%;
    right:auto;
    bottom:26px;
    transform:translateX(-50%);
  }
  body.static-home .vd-home-m3__hero-node--left{
    left:0;
    right:auto;
    top:50%;
    transform:translateY(-50%);
  }
  body.static-home .vd-home-m3__hero-node--right{
    right:0;
    left:auto;
    top:50%;
    transform:translateY(-50%);
  }

  /* Signature belongs to the system but no longer pushes its balance. */
  body.static-home .vd-home-m3__hero-signature{
    right:-6px;
    bottom:96px;
    font-size:25px;
    opacity:.88;
  }

  /* The points visibly travel around the system instead of only blinking. */
  body.static-home .vd-home-m3__orbit-dot{
    margin:0;
    left:50%;
    top:50%;
    will-change:transform;
  }
  body.static-home .vd-home-m3__orbit-dot--1{
    animation:vdCoreOrbitOuter 19s linear infinite;
  }
  body.static-home .vd-home-m3__orbit-dot--2{
    animation:vdCoreOrbitOuter 19s linear -6.2s infinite;
    background:var(--vd-warm);
    box-shadow:0 0 18px rgba(240,174,96,.75),0 0 0 8px rgba(240,174,96,.08);
  }
  body.static-home .vd-home-m3__orbit-dot--3{
    animation:vdCoreOrbitInner 14s linear -3.6s infinite reverse;
    background:var(--vd-blue);
    box-shadow:0 0 18px rgba(99,180,255,.75),0 0 0 8px rgba(99,180,255,.08);
  }
  body.static-home .vd-home-m3__orbit-dot--4{
    animation:vdCoreOrbitInner 14s linear -9.4s infinite reverse;
  }

  /* Energy travels through the four connections. */
  body.static-home .vd-home-m3__vcore-lines:before{
    width:1px;
    height:326px;
    background:linear-gradient(180deg,
      rgba(112,223,209,.08) 0%,
      rgba(112,223,209,.22) 28%,
      rgba(177,255,244,.98) 48%,
      rgba(112,223,209,.22) 68%,
      rgba(112,223,209,.08) 100%);
    background-size:100% 240%;
    box-shadow:0 0 14px rgba(112,223,209,.20);
    animation:vdEnergyVertical 5.2s linear infinite;
  }
  body.static-home .vd-home-m3__vcore-lines:after{
    width:404px;
    height:1px;
    background:linear-gradient(90deg,
      rgba(112,223,209,.08) 0%,
      rgba(112,223,209,.22) 28%,
      rgba(177,255,244,.98) 48%,
      rgba(112,223,209,.22) 68%,
      rgba(112,223,209,.08) 100%);
    background-size:240% 100%;
    box-shadow:0 0 14px rgba(112,223,209,.20);
    animation:vdEnergyHorizontal 5.2s linear -1.3s infinite;
  }

  /* The core reads as a quiet seal, not a static square. */
  body.static-home .vd-home-m3__vcore-core:after{
    animation:vdGlowPulse 4.8s ease-in-out infinite;
  }
  body.static-home .vd-home-m3__vcore-seal{
    animation:vdCoreSealBreath 5.8s ease-in-out infinite;
  }
  body.static-home .vd-home-m3__vcore-seal:before{
    box-shadow:0 0 24px rgba(112,223,209,.06);
  }
  body.static-home .vd-home-m3__vcore-seal:after{
    animation:vdSealSpin 22s linear infinite;
  }
  body.static-home .vd-home-m3__vcore-core img{
    width:60px;
    animation:vdLogoBreathe 4.6s ease-in-out infinite;
  }

  /* Very subtle life in the satellite modules. */
  body.static-home .vd-home-m3__hero-node{
    animation:vdNodeBreath 7.2s ease-in-out infinite;
  }
  body.static-home .vd-home-m3__hero-node--top{animation-delay:-.8s}
  body.static-home .vd-home-m3__hero-node--right{animation-delay:-2.4s}
  body.static-home .vd-home-m3__hero-node--bottom{animation-delay:-4.0s}
  body.static-home .vd-home-m3__hero-node--left{animation-delay:-5.6s}

  /* Compact lower benefits, closer to the approved mockup. */
  body.static-home .vd-home-m3__hero-points{
    max-width:710px;
    gap:16px;
    margin-top:42px;
    padding-top:24px;
  }
  body.static-home .vd-home-m3__hero-points>div{
    grid-template-columns:25px 1fr;
    gap:10px;
  }
  body.static-home .vd-home-m3__point-icon{
    width:22px;
    height:22px;
  }
  body.static-home .vd-home-m3__point-icon:before{
    width:7px;
    height:7px;
  }
  body.static-home .vd-home-m3__hero-points p,
  body.static-home .vd-home-m3__hero-points strong{
    font-size:13px;
    line-height:1.45;
  }
}

@keyframes vdCoreOrbitOuter{
  from{transform:translate(-50%,-50%) rotate(0deg) translateX(258px) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg) translateX(258px) rotate(-360deg)}
}
@keyframes vdCoreOrbitInner{
  from{transform:translate(-50%,-50%) rotate(0deg) translateX(198px) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg) translateX(198px) rotate(-360deg)}
}
@keyframes vdEnergyVertical{
  from{background-position:0 -110%}
  to{background-position:0 110%}
}
@keyframes vdEnergyHorizontal{
  from{background-position:-110% 0}
  to{background-position:110% 0}
}
@keyframes vdCoreSealBreath{
  0%,100%{border-color:rgba(255,255,255,.05);box-shadow:inset 0 0 0 rgba(112,223,209,0)}
  50%{border-color:rgba(112,223,209,.13);box-shadow:inset 0 0 28px rgba(112,223,209,.04)}
}
@keyframes vdNodeBreath{
  0%,100%{border-color:rgba(255,255,255,.10);box-shadow:0 20px 42px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.03)}
  50%{border-color:rgba(112,223,209,.18);box-shadow:0 20px 46px rgba(0,0,0,.18),0 0 22px rgba(112,223,209,.035),inset 0 1px 0 rgba(255,255,255,.04)}
}

@media (min-width:821px) and (max-width:1320px){
  body.static-home .vd-home-m3__vcore-wrap{
    width:min(100%,590px);
  }
  body.static-home .vd-home-m3__orbit-ring--outer{width:470px;height:470px}
  body.static-home .vd-home-m3__orbit-ring--inner{width:366px;height:366px}
  body.static-home .vd-home-m3__hero-node{min-width:198px;max-width:210px}
  body.static-home .vd-home-m3__hero-node--top{top:38px}
  body.static-home .vd-home-m3__hero-node--bottom{bottom:36px}
  body.static-home .vd-home-m3__hero-signature{right:0;bottom:108px;font-size:22px}
  body.static-home .vd-home-m3__orbit-dot--1,
  body.static-home .vd-home-m3__orbit-dot--2{animation-name:vdCoreOrbitOuterCompact}
  body.static-home .vd-home-m3__orbit-dot--3,
  body.static-home .vd-home-m3__orbit-dot--4{animation-name:vdCoreOrbitInnerCompact}
}
@keyframes vdCoreOrbitOuterCompact{
  from{transform:translate(-50%,-50%) rotate(0deg) translateX(234px) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg) translateX(234px) rotate(-360deg)}
}
@keyframes vdCoreOrbitInnerCompact{
  from{transform:translate(-50%,-50%) rotate(0deg) translateX(182px) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg) translateX(182px) rotate(-360deg)}
}

@media (prefers-reduced-motion:reduce){
  body.static-home .vd-home-m3__orbit-dot,
  body.static-home .vd-home-m3__vcore-lines:before,
  body.static-home .vd-home-m3__vcore-lines:after,
  body.static-home .vd-home-m3__vcore-core:after,
  body.static-home .vd-home-m3__vcore-seal,
  body.static-home .vd-home-m3__vcore-seal:after,
  body.static-home .vd-home-m3__vcore-core img,
  body.static-home .vd-home-m3__hero-node{
    animation:none!important;
  }
}


/* ======================================================================
   VCORE intro sequence · one quiet system-start animation
   Keeps the existing continuous orbit motion afterwards.
   ====================================================================== */
@media (min-width:821px) and (prefers-reduced-motion:no-preference){
  /* Rings first: the system space becomes visible. */
  body.static-home .vd-home-m3__orbit-ring--outer{
    animation:vdIntroRingOuter .9s cubic-bezier(.22,.8,.24,1) .05s both;
  }
  body.static-home .vd-home-m3__orbit-ring--inner{
    animation:vdIntroRingInner .9s cubic-bezier(.22,.8,.24,1) .16s both;
  }

  /* The connection layer fades in before the modules. */
  body.static-home .vd-home-m3__vcore-lines{
    animation:vdIntroLines .78s ease-out .28s both;
  }

  /* Core opens from its center like a quiet technical seal. */
  body.static-home .vd-home-m3__vcore-core{
    overflow:hidden;
    animation:vdIntroCore .92s cubic-bezier(.2,.82,.22,1) .34s both;
  }

  /* Logo appears after the core shell has opened, then returns to its
     existing slow breathing motion. */
  body.static-home .vd-home-m3__vcore-core img{
    animation:
      vdIntroLogo .72s cubic-bezier(.2,.78,.22,1) .63s both,
      vdLogoBreathe 4.6s ease-in-out 1.35s infinite;
  }
  body.static-home .vd-home-m3__vcore-core>span:last-child{
    animation:vdIntroLabel .55s ease-out .82s both;
  }

  /* Satellite modules resolve outward from the core. No flying cards. */
  body.static-home .vd-home-m3__hero-node--top{
    animation:
      vdIntroNode .62s cubic-bezier(.2,.78,.22,1) .88s both,
      vdNodeBreath 7.2s ease-in-out 1.5s infinite;
  }
  body.static-home .vd-home-m3__hero-node--right{
    animation:
      vdIntroNode .62s cubic-bezier(.2,.78,.22,1) .98s both,
      vdNodeBreath 7.2s ease-in-out 1.6s infinite;
  }
  body.static-home .vd-home-m3__hero-node--bottom{
    animation:
      vdIntroNode .62s cubic-bezier(.2,.78,.22,1) 1.08s both,
      vdNodeBreath 7.2s ease-in-out 1.7s infinite;
  }
  body.static-home .vd-home-m3__hero-node--left{
    animation:
      vdIntroNode .62s cubic-bezier(.2,.78,.22,1) 1.18s both,
      vdNodeBreath 7.2s ease-in-out 1.8s infinite;
  }

  /* Signature is intentionally last and almost static. */
  body.static-home .vd-home-m3__hero-signature{
    animation:vdIntroSignature .8s ease-out 1.28s both;
  }
}

@keyframes vdIntroRingOuter{
  0%{opacity:0;scale:.94;filter:blur(3px)}
  100%{opacity:1;scale:1;filter:blur(0)}
}
@keyframes vdIntroRingInner{
  0%{opacity:0;scale:.91;filter:blur(4px)}
  100%{opacity:1;scale:1;filter:blur(0)}
}
@keyframes vdIntroLines{
  0%{opacity:0;filter:blur(3px)}
  45%{opacity:.3}
  100%{opacity:1;filter:blur(0)}
}
@keyframes vdIntroCore{
  0%{
    opacity:0;
    clip-path:inset(47% 10% 47% 10% round 40px);
    filter:blur(8px) brightness(1.18);
  }
  58%{
    opacity:1;
    clip-path:inset(7% 4% 7% 4% round 40px);
    filter:blur(1px) brightness(1.08);
  }
  100%{
    opacity:1;
    clip-path:inset(0 0 0 0 round 40px);
    filter:blur(0) brightness(1);
  }
}
@keyframes vdIntroLogo{
  0%{opacity:0;filter:blur(8px) drop-shadow(0 0 22px rgba(255,243,220,.30));transform:translateY(7px) scale(.88)}
  62%{opacity:1;filter:blur(0) drop-shadow(0 0 22px rgba(255,243,220,.22));transform:translateY(0) scale(1.035)}
  100%{opacity:1;filter:drop-shadow(0 0 16px rgba(255,243,220,.16));transform:translateY(0) scale(1)}
}
@keyframes vdIntroLabel{
  from{opacity:0;letter-spacing:.36em;filter:blur(3px)}
  to{opacity:1;letter-spacing:.24em;filter:blur(0)}
}
@keyframes vdIntroNode{
  0%{opacity:0;clip-path:inset(0 48% 0 48% round 18px);filter:blur(5px)}
  70%{opacity:1;clip-path:inset(0 2% 0 2% round 18px);filter:blur(.5px)}
  100%{opacity:1;clip-path:inset(0 0 0 0 round 18px);filter:blur(0)}
}
@keyframes vdIntroSignature{
  from{opacity:0;filter:blur(4px);translate:0 5px}
  to{opacity:.88;filter:blur(0);translate:0 0}
}

/* Reduced motion: everything is immediately present, while the existing
   reduced-motion rules continue to disable loop animations. */
@media (prefers-reduced-motion:reduce){
  body.static-home .vd-home-m3__orbit-ring,
  body.static-home .vd-home-m3__vcore-lines,
  body.static-home .vd-home-m3__vcore-core,
  body.static-home .vd-home-m3__vcore-core img,
  body.static-home .vd-home-m3__vcore-core>span:last-child,
  body.static-home .vd-home-m3__hero-node,
  body.static-home .vd-home-m3__hero-signature{
    opacity:1!important;
    filter:none!important;
    clip-path:none!important;
    translate:none!important;
    scale:1!important;
  }
}


/* ======================================================================
   Mobile-only hero composition
   Desktop/tablet >= 821px remains untouched.
   ====================================================================== */
@media (max-width:820px){
  body.static-home .vd-home-m3__hero{
    padding:26px 0 38px;
    overflow:hidden;
  }
  body.static-home .vd-home-m3__hero-grid{
    display:block;
  }
  body.static-home .vd-home-m3__hero-copy{
    position:relative;
    z-index:3;
    width:100%;
    padding:8px 0 0;
  }
  body.static-home .vd-home-m3__eyebrow{
    max-width:100%;
    margin-bottom:18px;
    font-size:10px;
    line-height:1.55;
    letter-spacing:.17em;
  }
  body.static-home .vd-home-m3__hero h1{
    max-width:100%;
    margin:0;
    font-size:clamp(43px,12.4vw,62px);
    line-height:.94;
    letter-spacing:-.055em;
  }
  body.static-home .vd-home-m3__lead{
    max-width:100%;
    margin-top:26px;
    font-size:17px;
    line-height:1.6;
  }
  body.static-home .vd-home-m3__hero-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    width:100%;
    margin-top:28px;
  }
  body.static-home .vd-home-m3__hero-actions .vd-home-m3__btn{
    width:100%;
    min-width:0;
    min-height:54px;
    padding:0 16px;
    font-size:14px;
    white-space:nowrap;
  }

  /* Benefits remain part of the copy, never part of the visual layer. */
  body.static-home .vd-home-m3__hero-points{
    position:relative;
    z-index:3;
    grid-template-columns:1fr;
    gap:16px;
    width:100%;
    max-width:none;
    margin-top:30px;
    padding-top:24px;
  }
  body.static-home .vd-home-m3__hero-points>div{
    grid-template-columns:28px 1fr;
    gap:12px;
  }
  body.static-home .vd-home-m3__hero-points p,
  body.static-home .vd-home-m3__hero-points strong{
    font-size:14px;
    line-height:1.45;
  }

  /* Separate mobile visual block below all hero copy. */
  body.static-home .vd-home-m3__hero-visual{
    position:relative;
    z-index:1;
    display:block;
    width:100%;
    min-height:0;
    margin-top:34px;
    padding:0;
    overflow:visible;
  }
  body.static-home .vd-home-m3__orb{
    display:block;
    position:absolute;
    inset:0 8% auto;
    height:250px;
    opacity:.62;
    pointer-events:none;
  }
  body.static-home .vd-home-m3__vcore-wrap{
    position:relative;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:
      "core core"
      "top left"
      "right bottom";
    gap:12px;
    width:100%;
    height:auto;
    min-height:0;
    margin:0;
    padding:8px 0 0;
  }

  /* Desktop orbit system is intentionally removed on mobile. */
  body.static-home .vd-home-m3__orbit-ring,
  body.static-home .vd-home-m3__orbit-dot,
  body.static-home .vd-home-m3__vcore-lines,
  body.static-home .vd-home-m3__hero-signature{
    display:none!important;
  }

  /* Core becomes the compact mobile product seal. */
  body.static-home .vd-home-m3__vcore-core{
    grid-area:core;
    position:relative;
    left:auto;
    top:auto;
    width:164px;
    height:164px;
    margin:0 auto 12px;
    transform:none;
    border-radius:34px;
    overflow:hidden;
  }
  body.static-home .vd-home-m3__vcore-core:before{
    inset:12px;
    border-radius:26px;
  }
  body.static-home .vd-home-m3__vcore-core:after{
    inset:-16px;
  }
  body.static-home .vd-home-m3__vcore-seal{
    inset:15px;
    border-radius:24px;
  }
  body.static-home .vd-home-m3__vcore-core img{
    width:54px;
  }
  body.static-home .vd-home-m3__vcore-core>span:last-child{
    margin-top:12px;
    font-size:12px;
  }

  /* Satellites are cards below the core, not floating overlays. */
  body.static-home .vd-home-m3__hero-node{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    width:100%;
    min-width:0;
    max-width:none;
    min-height:76px;
    padding:12px 12px;
    grid-template-columns:34px minmax(0,1fr);
    gap:10px;
    border-radius:16px;
    background:rgba(7,22,18,.78);
    backdrop-filter:blur(10px);
    animation:none!important;
  }
  body.static-home .vd-home-m3__hero-node--top{grid-area:top}
  body.static-home .vd-home-m3__hero-node--left{grid-area:left}
  body.static-home .vd-home-m3__hero-node--right{grid-area:right}
  body.static-home .vd-home-m3__hero-node--bottom{grid-area:bottom}
  body.static-home .vd-home-m3__hero-node strong{
    font-size:14px;
    line-height:1.1;
  }
  body.static-home .vd-home-m3__hero-node span{
    margin-top:3px;
    font-size:11px;
    line-height:1.3;
  }
  body.static-home .vd-home-m3__node-icon{
    width:32px;
    height:32px;
    border-radius:10px;
  }
}

@media (max-width:480px){
  body.static-home .vd-home-m3__hero h1{
    font-size:clamp(40px,12.7vw,54px);
  }
  body.static-home .vd-home-m3__hero-actions{
    grid-template-columns:1fr;
  }
  body.static-home .vd-home-m3__hero-actions .vd-home-m3__btn{
    justify-content:space-between;
    padding-inline:18px;
  }
  body.static-home .vd-home-m3__vcore-wrap{
    grid-template-columns:1fr;
    grid-template-areas:
      "core"
      "top"
      "left"
      "right"
      "bottom";
    gap:10px;
  }
  body.static-home .vd-home-m3__hero-node{
    min-height:66px;
  }
}
/* Services section with real visual cards */
body.static-home .vd-home-m3__services-section .vd-home-m3__section-head{
  margin-bottom:36px;
}
body.static-home .vd-home-m3__services-grid--visual{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
}
body.static-home .vd-home-m3__service-card--visual{
  overflow:hidden;
  padding:0;
  display:flex;
  flex-direction:column;
}
body.static-home .vd-home-m3__service-media{
  margin:0;
  aspect-ratio: 16 / 9;
  background:linear-gradient(135deg,#d9e3df 0%,#f4f7f6 100%);
  border-bottom:1px solid var(--vd-line);
  overflow:hidden;
}
body.static-home .vd-home-m3__service-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
body.static-home .vd-home-m3__service-content{
  display:flex;
  flex-direction:column;
  padding:28px 28px 30px;
  flex:1;
}
body.static-home .vd-home-m3__service-card--visual .vd-home-m3__card-icon{
  width:62px;
  height:62px;
  border-radius:18px;
  margin-bottom:20px;
}
body.static-home .vd-home-m3__service-card--visual h3{
  margin:0;
  font-size:24px;
  line-height:1.14;
}
body.static-home .vd-home-m3__service-card--visual p{
  margin:16px 0 0;
  font-size:15px;
  line-height:1.62;
}
body.static-home .vd-home-m3__service-card--visual a{
  margin-top:auto;
  padding-top:22px;
}
body.static-home .vd-home-m3__card-icon--screen:before,
body.static-home .vd-home-m3__card-icon--gear:before,
body.static-home .vd-home-m3__card-icon--cube:before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
body.static-home .vd-home-m3__card-icon--screen:before{
  width:28px;
  height:22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 22' fill='none' stroke='%23131f1b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='22' height='14' rx='2.5'/%3E%3Cpath d='M10 19h8M14 17v2'/%3E%3C/svg%3E");
}
body.static-home .vd-home-m3__card-icon--gear:before{
  width:26px;
  height:26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2l1.16 2.2 2.48.45 1.82-1.66 1.58 1.58-1.66 1.82.45 2.48 2.2 1.16v2.24l-2.2 1.16-.45 2.48 1.66 1.82-1.58 1.58-1.82-1.66-2.48.45-1.16 2.2H9.76l-1.16-2.2-2.48-.45-1.82 1.66-1.58-1.58 1.66-1.82-.45-2.48-2.2-1.16v-2.24l2.2-1.16.45-2.48-1.66-1.82 1.58-1.58 1.82 1.66 2.48-.45 1.16-2.2z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E");
}
body.static-home .vd-home-m3__card-icon--cube:before{
  width:24px;
  height:24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 4v10l-7 4-7-4V7l7-4z'/%3E%3Cpath d='M5 7l7 4 7-4M12 11v10'/%3E%3C/svg%3E");
}
@media (max-width: 1180px){
  body.static-home .vd-home-m3__services-grid--visual{
    grid-template-columns:1fr;
    gap:20px;
  }
}
@media (max-width: 640px){
  body.static-home .vd-home-m3__service-content{
    padding:22px 22px 24px;
  }
  body.static-home .vd-home-m3__service-card--visual .vd-home-m3__card-icon{
    width:56px;
    height:56px;
    border-radius:16px;
    margin-bottom:18px;
  }
  body.static-home .vd-home-m3__service-card--visual h3{
    font-size:22px;
  }
}

/* ======================================================================
   Services UX refinement · full-card links + title arrow + image hover
   ====================================================================== */
body.static-home .vd-home-m3__service-card--visual{
  position:relative;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
  will-change:transform;
}
body.static-home .vd-home-m3__service-card-link{
  display:flex;
  flex-direction:column;
  height:100%;
  color:inherit;
  text-decoration:none;
  border-radius:inherit;
  overflow:hidden;
}
body.static-home .vd-home-m3__service-card-link:focus-visible{
  outline:2px solid rgba(19,31,27,.72);
  outline-offset:4px;
}
body.static-home .vd-home-m3__service-card--visual .vd-home-m3__service-media img{
  transition:transform .42s cubic-bezier(.2,.7,.2,1),filter .42s ease;
  transform-origin:center center;
  will-change:transform;
}
body.static-home .vd-home-m3__service-card--visual .vd-home-m3__service-content{
  flex:1;
}
body.static-home .vd-home-m3__service-card--visual h3{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
body.static-home .vd-home-m3__service-title-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid rgba(19,31,27,.14);
  font-size:17px;
  line-height:1;
  font-weight:500;
  transform:translateX(0) scale(1);
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
body.static-home .vd-home-m3__service-card--visual:hover,
body.static-home .vd-home-m3__service-card--visual:focus-within{
  transform:translateY(-4px);
  border-color:rgba(19,31,27,.18);
  box-shadow:0 28px 62px rgba(6,22,17,.11);
}
body.static-home .vd-home-m3__service-card--visual:hover .vd-home-m3__service-media img,
body.static-home .vd-home-m3__service-card--visual:focus-within .vd-home-m3__service-media img{
  transform:scale(1.045);
  filter:saturate(1.03) contrast(1.01);
}
body.static-home .vd-home-m3__service-card--visual:hover .vd-home-m3__service-title-arrow,
body.static-home .vd-home-m3__service-card--visual:focus-within .vd-home-m3__service-title-arrow{
  transform:translateX(3px) scale(1.16);
  border-color:rgba(19,31,27,.28);
  background:rgba(19,31,27,.045);
}

@media (hover:none){
  body.static-home .vd-home-m3__service-card--visual:hover{
    transform:none;
    box-shadow:var(--vd-shadow);
  }
  body.static-home .vd-home-m3__service-card--visual:hover .vd-home-m3__service-media img,
  body.static-home .vd-home-m3__service-card--visual:hover .vd-home-m3__service-title-arrow{
    transform:none;
    filter:none;
  }
}

@media (prefers-reduced-motion:reduce){
  body.static-home .vd-home-m3__service-card--visual,
  body.static-home .vd-home-m3__service-media img,
  body.static-home .vd-home-m3__service-title-arrow{
    transition:none!important;
  }
}


/* ======================================================================
   Problem cards · real SVG icons + restrained individual gradients
   Only affects "Typische Situationen. Klare Lösungen."
   ====================================================================== */
body.static-home .vd-home-m3__problem-card .vd-home-m3__problem-icon{
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  flex:0 0 56px;
  border-radius:17px;
  border:1px solid rgba(13,38,31,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 8px 22px rgba(13,38,31,.045);
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.static-home .vd-home-m3__problem-card .vd-home-m3__problem-icon:before{
  content:none;
}
body.static-home .vd-home-m3__problem-card .vd-home-m3__problem-icon img{
  display:block;
  width:27px;
  height:27px;
  object-fit:contain;
  transition:transform .2s ease;
}

/* Website veraltet · mint */
body.static-home .vd-home-m3__problem-card--outdated .vd-home-m3__problem-icon{
  background:linear-gradient(145deg,#f2faf7 0%,#dcefe8 100%);
  border-color:rgba(40,95,85,.11);
}
/* Zu wenig Anfragen · soft blue */
body.static-home .vd-home-m3__problem-card--leads .vd-home-m3__problem-icon{
  background:linear-gradient(145deg,#f2f7fc 0%,#dce9f5 100%);
  border-color:rgba(49,94,123,.11);
}
/* Zu viel Handarbeit · warm sand */
body.static-home .vd-home-m3__problem-card--manual .vd-home-m3__problem-icon{
  background:linear-gradient(145deg,#fff8f1 0%,#f4e2d1 100%);
  border-color:rgba(138,90,56,.10);
}
/* WordPress wird aufwendig · muted lilac */
body.static-home .vd-home-m3__problem-card--maintenance .vd-home-m3__problem-icon{
  background:linear-gradient(145deg,#f6f5fb 0%,#e6e3f1 100%);
  border-color:rgba(91,86,124,.10);
}

body.static-home .vd-home-m3__problem-card:hover .vd-home-m3__problem-icon,
body.static-home .vd-home-m3__problem-card:focus-visible .vd-home-m3__problem-icon{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 12px 26px rgba(13,38,31,.07);
}
body.static-home .vd-home-m3__problem-card:hover .vd-home-m3__problem-icon img,
body.static-home .vd-home-m3__problem-card:focus-visible .vd-home-m3__problem-icon img{
  transform:scale(1.06);
}

@media (max-width:640px){
  body.static-home .vd-home-m3__problem-card .vd-home-m3__problem-icon{
    width:52px;
    height:52px;
    flex-basis:52px;
    border-radius:16px;
  }
  body.static-home .vd-home-m3__problem-card .vd-home-m3__problem-icon img{
    width:25px;
    height:25px;
  }
}

@media (prefers-reduced-motion:reduce){
  body.static-home .vd-home-m3__problem-card .vd-home-m3__problem-icon,
  body.static-home .vd-home-m3__problem-card .vd-home-m3__problem-icon img{
    transition:none;
  }
}

/* ======================================================================
   Services cards · lower image fade + title accent hover + tighter arrow
   Only affects the 3 cards in "Websites, Systeme und eigene Produkte."
   ====================================================================== */
body.static-home .vd-home-m3__services-section .vd-home-m3__service-media{
  position:relative;
  border-bottom:0;
}

/* The photo now fades directly into the white card surface.
   No blur: only a short transparent-to-white transition at the bottom. */
body.static-home .vd-home-m3__services-section .vd-home-m3__service-media::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:30px;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.12) 28%,
    rgba(255,255,255,.55) 68%,
    rgba(255,255,255,1) 100%
  );
}

/* Keep the arrow visually attached to the heading rather than at the far
   right edge of the card. */
body.static-home .vd-home-m3__services-section .vd-home-m3__service-card--visual h3{
  justify-content:flex-start;
  gap:11px;
  transition:color .24s ease;
}

body.static-home .vd-home-m3__services-section .vd-home-m3__service-title-arrow{
  width:30px;
  height:30px;
  margin-left:2px;
  transition:transform .25s ease,border-color .25s ease,background .25s ease,color .25s ease;
}

/* Restrained VanillaDev accent on hover/focus. */
body.static-home .vd-home-m3__services-section .vd-home-m3__service-card--visual:hover h3,
body.static-home .vd-home-m3__services-section .vd-home-m3__service-card--visual:focus-within h3{
  color:#176a58;
}

body.static-home .vd-home-m3__services-section .vd-home-m3__service-card--visual:hover .vd-home-m3__service-title-arrow,
body.static-home .vd-home-m3__services-section .vd-home-m3__service-card--visual:focus-within .vd-home-m3__service-title-arrow{
  color:#176a58;
  border-color:rgba(23,106,88,.34);
  background:rgba(23,106,88,.065);
  transform:translateX(3px) scale(1.13);
}

@media (max-width:640px){
  body.static-home .vd-home-m3__services-section .vd-home-m3__service-media::after{
    height:24px;
  }
}

@media (hover:none){
  body.static-home .vd-home-m3__services-section .vd-home-m3__service-card--visual:hover h3{
    color:inherit;
  }
}

@media (prefers-reduced-motion:reduce){
  body.static-home .vd-home-m3__services-section .vd-home-m3__service-card--visual h3{
    transition:none!important;
  }
}


/* ======================================================================
   Problem cards · hover subtitles under the bottom action
   Only affects "Typische Situationen. Klare Lösungen."
   ====================================================================== */
body.static-home .vd-home-m3__problem-card .vd-home-m3__problem-footer{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  margin-top:auto;
  padding-top:20px;
  min-height:48px;
}

body.static-home .vd-home-m3__problem-card .vd-home-m3__problem-footer .vd-home-m3__inline-link{
  margin-top:0;
  padding-top:0;
}

body.static-home .vd-home-m3__problem-subtitle{
  display:block;
  max-width:100%;
  font-size:12px;
  line-height:1.35;
  font-weight:650;
  letter-spacing:.01em;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}

/* Match each subtitle to its icon accent */
body.static-home .vd-home-m3__problem-card--outdated .vd-home-m3__problem-subtitle{
  color:#3f796c;
}

body.static-home .vd-home-m3__problem-card--leads .vd-home-m3__problem-subtitle{
  color:#4d7393;
}

body.static-home .vd-home-m3__problem-card--manual .vd-home-m3__problem-subtitle{
  color:#9b6a43;
}

body.static-home .vd-home-m3__problem-card--maintenance .vd-home-m3__problem-subtitle{
  color:#71688e;
}

body.static-home .vd-home-m3__problem-card:hover .vd-home-m3__problem-subtitle,
body.static-home .vd-home-m3__problem-card:focus-visible .vd-home-m3__problem-subtitle{
  opacity:1;
  transform:translateY(0);
}

@media (hover:none){
  body.static-home .vd-home-m3__problem-subtitle{
    display:none;
  }
}

@media (prefers-reduced-motion:reduce){
  body.static-home .vd-home-m3__problem-subtitle{
    transition:none;
    transform:none;
  }
}


/* ======================================================================
   Services cards · image flush with top edge
   Only affects the 3 visual service cards.
   ====================================================================== */
body.static-home .vd-home-m3__services-section .vd-home-m3__service-card--visual{
  padding:0 !important;
  overflow:hidden;
}

body.static-home .vd-home-m3__services-section .vd-home-m3__service-card-link{
  margin:0 !important;
  padding:0 !important;
  width:100%;
}

body.static-home .vd-home-m3__services-section .vd-home-m3__service-media{
  margin:-1px -1px 0 !important;
  width:calc(100% + 2px);
  align-self:stretch;
  border-radius:26px 26px 0 0;
  overflow:hidden;
}

body.static-home .vd-home-m3__services-section .vd-home-m3__service-media img{
  display:block;
  width:100%;
  height:100%;
  margin:0;
}


/* ======================================================================
   VanillaDev Hero M4 · Editorial + Product System
   Approved light/dark hero mockup implementation. Homepage only.
   ====================================================================== */
body.static-home .vd-home-m4__hero{
  min-height:calc(100svh - 82px);
  padding:0;
  isolation:isolate;
  background:#061611;
}
body.static-home .vd-home-m4__hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 88% 18%,rgba(255,255,255,.92),transparent 25%),
    linear-gradient(180deg,#f4f1ea 0%,#f7f5f0 58%,#ebe9e3 100%);
  clip-path:polygon(67% 0,100% 0,100% 100%,43% 100%);
}
body.static-home .vd-home-m4__hero::before{
  z-index:0;
  opacity:.74;
  mask-image:linear-gradient(90deg,#000 0 59%,transparent 70%);
}
body.static-home .vd-home-m4__hero-grid{
  position:relative;
  z-index:2;
  width:min(calc(100% - 96px),1500px);
  min-height:calc(100svh - 82px);
  grid-template-columns:minmax(0,.93fr) minmax(650px,1.07fr);
  gap:28px;
  align-items:center;
}
body.static-home .vd-home-m4__hero-copy{
  padding:64px 0 44px;
  max-width:700px;
}
body.static-home .vd-home-m4__hero-copy .vd-home-m3__eyebrow{
  margin-bottom:28px;
  color:#b7c8c0;
  font-size:11px;
  letter-spacing:.24em;
}
body.static-home .vd-home-m4__hero-copy h1{
  max-width:680px;
  font-size:clamp(70px,5.45vw,94px);
  line-height:.91;
  letter-spacing:-.064em;
}
body.static-home .vd-home-m4__hero-copy .vd-home-m3__lead{
  max-width:660px;
  margin-top:30px;
  color:#d4dfda;
  font-size:18px;
  line-height:1.58;
}
body.static-home .vd-home-m4__hero-copy .vd-home-m3__hero-actions{
  margin-top:32px;
  gap:18px;
}
body.static-home .vd-home-m4__hero-copy .vd-home-m3__btn{
  min-height:58px;
  padding-inline:30px;
  border-radius:16px;
}
body.static-home .vd-home-m4__hero-copy .vd-home-m3__btn--ghost{
  background:rgba(255,255,255,.025);
  border-color:rgba(255,255,255,.22);
}
body.static-home .vd-home-m4__benefits{
  max-width:650px;
  margin-top:44px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.10);
  gap:18px;
}
body.static-home .vd-home-m4__benefits>div{
  grid-template-columns:46px 1fr;
  gap:12px;
  align-items:center;
}
body.static-home .vd-home-m4__benefit-icon{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid rgba(112,223,209,.32);
  border-radius:50%;
  background:rgba(112,223,209,.035);
  box-shadow:inset 0 0 0 5px rgba(112,223,209,.025);
}
body.static-home .vd-home-m4__benefit-icon svg{
  width:22px;
  height:22px;
  stroke:#dbeee7;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
body.static-home .vd-home-m4__benefits p,
body.static-home .vd-home-m4__benefits strong{font-size:13px;line-height:1.42}
body.static-home .vd-home-m4__signature-line{
  display:flex;
  align-items:center;
  gap:18px;
  max-width:520px;
  margin-top:34px;
  color:#8da59b;
  font:650 9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.24em;
  text-transform:uppercase;
}
body.static-home .vd-home-m4__signature-line::after{
  content:"";
  height:1px;
  flex:1;
  background:linear-gradient(90deg,rgba(112,223,209,.45),transparent);
}

/* Right product-system composition */
body.static-home .vd-home-m4__showcase{
  position:relative;
  min-height:700px;
  align-self:stretch;
  margin-right:-16px;
  z-index:3;
}
body.static-home .vd-home-m4__showcase::before{
  content:"";
  position:absolute;
  inset:4% -8% 0 9%;
  border-radius:48% 52% 52% 48%;
  background:
    radial-gradient(circle at 76% 22%,rgba(41,92,74,.10),transparent 25%),
    radial-gradient(circle at 34% 84%,rgba(38,103,80,.10),transparent 28%);
  filter:blur(4px);
  pointer-events:none;
}
body.static-home .vd-home-m4__ambient{position:absolute;border-radius:50%;filter:blur(2px);opacity:.48;pointer-events:none}
body.static-home .vd-home-m4__ambient--one{width:250px;height:250px;right:-50px;top:80px;background:radial-gradient(circle at 35% 35%,rgba(44,105,83,.20),rgba(44,105,83,0) 70%)}
body.static-home .vd-home-m4__ambient--two{width:310px;height:160px;left:120px;bottom:18px;background:radial-gradient(ellipse at center,rgba(11,50,38,.16),rgba(11,50,38,0) 72%)}

body.static-home .vd-home-m4__chip{
  position:absolute;
  z-index:7;
  display:grid;
  grid-template-columns:44px 1fr;
  align-items:center;
  gap:12px;
  min-width:220px;
  padding:14px 18px;
  border:1px solid rgba(8,47,37,.12);
  border-radius:16px;
  color:#12231d;
  background:rgba(255,255,255,.78);
  box-shadow:0 16px 36px rgba(24,44,36,.10);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
body.static-home .vd-home-m4__chip strong{display:block;font-size:16px;font-weight:720;line-height:1.08}
body.static-home .vd-home-m4__chip small{display:block;margin-top:4px;color:#5d6f68;font-size:11px;line-height:1.25}
body.static-home .vd-home-m4__chip-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(112,223,209,.26);
  background:rgba(112,223,209,.12);
  color:#134b3d;
  font-size:24px;
}
body.static-home .vd-home-m4__chip--websites{
  top:56px;
  left:118px;
  color:#fff;
  background:linear-gradient(135deg,rgba(8,43,34,.94),rgba(22,65,51,.88));
  border-color:rgba(112,223,209,.28);
  box-shadow:0 18px 42px rgba(12,45,35,.18);
}
body.static-home .vd-home-m4__chip--websites small{color:#c8d7d1}
body.static-home .vd-home-m4__chip--websites .vd-home-m4__chip-icon{color:#dffff5;background:rgba(112,223,209,.10)}
body.static-home .vd-home-m4__chip--systems{top:66px;right:10px;min-width:205px}
body.static-home .vd-home-m4__chip--products{right:8px;bottom:160px;min-width:200px}
body.static-home .vd-home-m4__chip--automation{left:405px;bottom:40px;min-width:250px}

body.static-home .vd-home-m4__laptop{
  position:absolute;
  z-index:4;
  left:125px;
  top:160px;
  width:555px;
  height:388px;
  transform:perspective(1200px) rotateY(-2.2deg) rotateX(.8deg);
  filter:drop-shadow(0 34px 40px rgba(15,33,27,.18));
}
body.static-home .vd-home-m4__laptop-lid{
  position:absolute;
  inset:0 18px 56px;
  padding:10px;
  border:2px solid #1f2623;
  border-radius:22px 22px 14px 14px;
  background:#101613;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
body.static-home .vd-home-m4__screenbar{
  height:24px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 8px;
  border-radius:9px 9px 0 0;
  background:#eef0ec;
  color:#66746d;
  font-size:9px;
}
body.static-home .vd-home-m4__screenbar span{width:6px;height:6px;border-radius:50%;background:#d2d6d2}
body.static-home .vd-home-m4__screenbar em{margin-left:auto;font-style:normal;font-weight:650}
body.static-home .vd-home-m4__screen{
  height:calc(100% - 24px);
  overflow:hidden;
  border-radius:0 0 8px 8px;
  background:#e9ece7;
}
body.static-home .vd-home-m4__screen img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.78) contrast(.96) brightness(1.06)}
body.static-home .vd-home-m4__laptop-base{
  position:absolute;
  left:-14px;
  right:-14px;
  bottom:38px;
  height:22px;
  border-radius:3px 3px 22px 22px;
  background:linear-gradient(180deg,#aab1ae,#767f7b 60%,#4d5652);
  box-shadow:0 10px 16px rgba(10,20,17,.16);
}
body.static-home .vd-home-m4__laptop-base::after{
  content:"";
  position:absolute;
  left:44%;
  right:44%;
  top:2px;
  height:4px;
  border-radius:0 0 7px 7px;
  background:#4a524f;
}

body.static-home .vd-home-m4__checker-card{
  position:absolute;
  z-index:9;
  right:22px;
  top:198px;
  width:270px;
  padding:20px;
  border:1px solid rgba(8,47,37,.12);
  border-radius:18px;
  background:rgba(255,255,255,.92);
  color:#14241e;
  box-shadow:0 20px 44px rgba(22,43,35,.14);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
body.static-home .vd-home-m4__checker-title{font-size:15px;font-weight:750}
body.static-home .vd-home-m4__checker-body{display:grid;grid-template-columns:92px 1fr;align-items:center;gap:13px;margin-top:14px}
body.static-home .vd-home-m4__score{
  width:88px;height:88px;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:radial-gradient(circle at center,#fff 56%,transparent 57%),conic-gradient(#4c8d70 0 313deg,#dce6e0 313deg 360deg);
}
body.static-home .vd-home-m4__score strong{font-size:28px;line-height:1}
body.static-home .vd-home-m4__score small{font-size:8px;color:#77857f;margin-top:3px}
body.static-home .vd-home-m4__checker-body ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:10px}
body.static-home .vd-home-m4__checker-body li{display:flex;align-items:center;gap:7px}
body.static-home .vd-home-m4__checker-body li span{width:7px;height:7px;border-radius:50%;background:#65a97d;box-shadow:0 0 0 3px rgba(101,169,125,.11)}
body.static-home .vd-home-m4__checker-action{display:flex;justify-content:space-between;align-items:center;margin-top:15px;padding:10px 12px;border:1px solid rgba(8,47,37,.10);border-radius:9px;font-size:10px;font-weight:680}

body.static-home .vd-home-m4__social-card{
  position:absolute;
  z-index:10;
  left:48px;
  bottom:36px;
  width:370px;
  padding:17px;
  border:1px solid rgba(8,47,37,.13);
  border-radius:18px;
  background:rgba(255,255,255,.93);
  color:#172820;
  box-shadow:0 24px 44px rgba(28,47,39,.13);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
body.static-home .vd-home-m4__social-head{display:flex;align-items:center;gap:10px}
body.static-home .vd-home-m4__social-head strong{display:block;font-size:14px}
body.static-home .vd-home-m4__social-head small{display:block;margin-top:2px;color:#6c7d76;font-size:10px}
body.static-home .vd-home-m4__social-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#edf7f2;color:#1d5d49;font-size:18px}
body.static-home .vd-home-m4__social-preview{height:110px;margin-top:12px;border:1px solid rgba(8,47,37,.08);border-radius:10px;overflow:hidden;background:#f2f4f1}
body.static-home .vd-home-m4__social-preview img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
body.static-home .vd-home-m4__social-foot{display:flex;justify-content:space-between;align-items:center;margin-top:11px;color:#77857f;font-size:9px}
body.static-home .vd-home-m4__social-foot strong{color:#344840;font-size:9px}

body.static-home .vd-home-m4__vcore-mini{
  position:absolute;
  z-index:9;
  right:194px;
  bottom:103px;
  width:122px;
  height:130px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(112,223,209,.24);
  border-radius:18px;
  background:linear-gradient(180deg,#153c30,#0a261d);
  color:#fff;
  box-shadow:0 18px 38px rgba(14,46,35,.18),inset 0 0 28px rgba(112,223,209,.07);
}
body.static-home .vd-home-m4__vcore-mini img{width:37px;height:auto;margin-bottom:8px}
body.static-home .vd-home-m4__vcore-mini strong{font-size:11px;letter-spacing:.20em}
body.static-home .vd-home-m4__vcore-mini small{max-width:92px;margin-top:8px;text-align:center;color:#a9c1b7;font-size:8px;line-height:1.3}
body.static-home .vd-home-m4__showcase-signature{position:absolute;right:22px;bottom:44px;color:#445d52;font:400 25px/1.02 "Brush Script MT",cursive;transform:rotate(-7deg);opacity:.75}
body.static-home .vd-home-m4__book{position:absolute;z-index:3;right:22px;bottom:-4px;width:248px;height:52px;border-radius:4px;background:#242b28;color:#e9eee9;box-shadow:0 14px 28px rgba(30,40,35,.14);transform:perspective(600px) rotateX(8deg);display:flex;align-items:center;justify-content:space-between;padding:0 16px}
body.static-home .vd-home-m4__book span{font:700 7px/1.25 ui-monospace,monospace;letter-spacing:.08em}
body.static-home .vd-home-m4__book b{font-family:Georgia,serif;font-size:22px;color:#e5dac2}

/* subtle system lines */
body.static-home .vd-home-m4__showcase .vd-home-m4__chip::after,
body.static-home .vd-home-m4__checker-card::after,
body.static-home .vd-home-m4__vcore-mini::after{
  content:"";
  position:absolute;
  pointer-events:none;
  opacity:.42;
}
body.static-home .vd-home-m4__chip--websites::after{left:100%;top:50%;width:72px;height:1px;background:linear-gradient(90deg,#3c7d66,transparent)}
body.static-home .vd-home-m4__chip--systems::after{right:100%;top:50%;width:68px;height:1px;background:linear-gradient(90deg,transparent,#7f9d90)}
body.static-home .vd-home-m4__checker-card::after{left:40%;top:100%;width:1px;height:60px;background:linear-gradient(#779789,transparent)}
body.static-home .vd-home-m4__vcore-mini::after{right:100%;top:50%;width:50px;height:1px;background:linear-gradient(90deg,transparent,#4b7f6c)}

/* one restrained intro motion */
@media (prefers-reduced-motion:no-preference){
  body.static-home .vd-home-m4__laptop{animation:vdM4LaptopIn .72s cubic-bezier(.2,.75,.2,1) both}
  body.static-home .vd-home-m4__checker-card{animation:vdM4CardIn .58s .18s cubic-bezier(.2,.75,.2,1) both}
  body.static-home .vd-home-m4__social-card{animation:vdM4CardIn .58s .28s cubic-bezier(.2,.75,.2,1) both}
  body.static-home .vd-home-m4__chip{animation:vdM4CardIn .5s .12s cubic-bezier(.2,.75,.2,1) both}
  body.static-home .vd-home-m4__vcore-mini{animation:vdM4CoreIn .55s .34s cubic-bezier(.2,.75,.2,1) both}
}
@keyframes vdM4LaptopIn{from{opacity:0;transform:perspective(1200px) translateY(16px) scale(.975) rotateY(-2.2deg)}to{opacity:1;transform:perspective(1200px) translateY(0) scale(1) rotateY(-2.2deg)}}
@keyframes vdM4CardIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes vdM4CoreIn{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}

@media(max-width:1320px){
  body.static-home .vd-home-m4__hero-grid{width:min(calc(100% - 64px),1400px);grid-template-columns:minmax(0,.96fr) minmax(590px,1.04fr)}
  body.static-home .vd-home-m4__hero-copy h1{font-size:clamp(64px,5.2vw,84px)}
  body.static-home .vd-home-m4__showcase{transform:scale(.91);transform-origin:center right}
}
@media(max-width:1080px){
  body.static-home .vd-home-m4__hero::after{clip-path:polygon(72% 0,100% 0,100% 100%,50% 100%)}
  body.static-home .vd-home-m4__hero-grid{grid-template-columns:minmax(0,1fr) minmax(500px,.95fr);gap:10px}
  body.static-home .vd-home-m4__showcase{transform:scale(.78);transform-origin:center right;margin-right:-88px}
  body.static-home .vd-home-m4__hero-copy h1{font-size:clamp(58px,5.5vw,76px)}
}
@media(max-width:900px){
  body.static-home .vd-home-m4__hero{padding-bottom:34px}
  body.static-home .vd-home-m4__hero::after{display:none}
  body.static-home .vd-home-m4__hero-grid{width:min(calc(100% - 34px),760px);min-height:auto;grid-template-columns:1fr;gap:0}
  body.static-home .vd-home-m4__hero-copy{padding:46px 0 32px;max-width:none}
  body.static-home .vd-home-m4__hero-copy h1{max-width:720px;font-size:clamp(52px,10.6vw,76px)}
  body.static-home .vd-home-m4__showcase{transform:none;margin:4px 0 0;min-height:590px;border-radius:28px;background:linear-gradient(180deg,#f4f1ea,#eeece6);overflow:hidden}
  body.static-home .vd-home-m4__showcase::before{inset:0}
  body.static-home .vd-home-m4__laptop{left:50%;top:135px;width:520px;transform:translateX(-50%)}
  body.static-home .vd-home-m4__chip--websites{left:24px;top:24px}
  body.static-home .vd-home-m4__chip--systems{right:24px;top:24px}
  body.static-home .vd-home-m4__checker-card{right:24px;top:240px;width:240px}
  body.static-home .vd-home-m4__social-card{left:24px;bottom:24px;width:330px}
  body.static-home .vd-home-m4__vcore-mini{right:38px;bottom:56px}
  body.static-home .vd-home-m4__chip--products,
  body.static-home .vd-home-m4__chip--automation,
  body.static-home .vd-home-m4__showcase-signature,
  body.static-home .vd-home-m4__book{display:none}
}
@media(max-width:640px){
  body.static-home .vd-home-m4__hero-grid{width:min(calc(100% - 28px),560px)}
  body.static-home .vd-home-m4__hero-copy{padding-top:36px}
  body.static-home .vd-home-m4__hero-copy h1{font-size:clamp(46px,13vw,62px)}
  body.static-home .vd-home-m4__hero-copy .vd-home-m3__lead{font-size:16px;line-height:1.55}
  body.static-home .vd-home-m4__benefits{grid-template-columns:1fr;gap:14px;margin-top:34px}
  body.static-home .vd-home-m4__showcase{min-height:650px}
  body.static-home .vd-home-m4__chip{min-width:0;width:calc(50% - 30px);padding:11px 12px;grid-template-columns:36px 1fr;gap:9px}
  body.static-home .vd-home-m4__chip-icon{width:34px;height:34px;font-size:18px}
  body.static-home .vd-home-m4__chip strong{font-size:13px}
  body.static-home .vd-home-m4__chip small{font-size:9px}
  body.static-home .vd-home-m4__laptop{top:132px;width:430px}
  body.static-home .vd-home-m4__checker-card{top:300px;right:16px;width:218px;padding:16px}
  body.static-home .vd-home-m4__social-card{left:16px;bottom:20px;width:calc(100% - 32px)}
  body.static-home .vd-home-m4__vcore-mini{display:none}
}


/* ======================================================================
   VanillaDev Hero M4.1 · closer pixel-match to approved editorial mockup
   Homepage hero only. Keeps all following homepage sections unchanged.
   ====================================================================== */

@media (min-width:1321px){
  body.static-home .vd-home-m4__hero{
    min-height:calc(100svh - 82px);
    overflow:hidden;
  }

  /* The target mockup starts the light plane slightly earlier at the top,
     then opens more strongly toward the bottom. */
  body.static-home .vd-home-m4__hero::after{
    background:
      radial-gradient(ellipse at 78% 11%,rgba(27,62,50,.075),transparent 23%),
      radial-gradient(ellipse at 54% 96%,rgba(35,77,61,.095),transparent 28%),
      linear-gradient(180deg,#f6f3ec 0%,#f5f2eb 56%,#eae8e1 100%);
    clip-path:polygon(64% 0,100% 0,100% 100%,43% 100%);
  }

  body.static-home .vd-home-m4__hero-grid{
    width:min(calc(100% - 154px),1510px);
    min-height:calc(100svh - 82px);
    grid-template-columns:minmax(0,.93fr) minmax(650px,1.07fr);
    gap:20px;
  }

  body.static-home .vd-home-m4__hero-copy{
    padding:58px 0 34px;
    max-width:690px;
  }

  body.static-home .vd-home-m4__hero-copy .vd-home-m3__eyebrow{
    margin-bottom:26px;
  }

  body.static-home .vd-home-m4__hero-copy h1{
    max-width:690px;
    font-size:clamp(70px,5.3vw,92px);
    line-height:.91;
  }

  body.static-home .vd-home-m4__hero-copy .vd-home-m3__lead{
    max-width:650px;
    margin-top:28px;
  }

  body.static-home .vd-home-m4__hero-copy .vd-home-m3__hero-actions{
    margin-top:30px;
  }

  body.static-home .vd-home-m4__benefits{
    margin-top:41px;
    padding-top:22px;
  }

  /* Move the full product composition left as one unit. This is the main
     difference between the previous implementation and the approved mockup. */
  body.static-home .vd-home-m4__showcase{
    min-height:720px;
    margin-left:-88px;
    margin-right:-10px;
  }

  body.static-home .vd-home-m4__showcase::before{
    inset:0 -5% -2% 4%;
    border-radius:0;
    filter:none;
    background:
      radial-gradient(ellipse at 88% 18%,rgba(41,82,67,.10),transparent 25%),
      radial-gradient(ellipse at 20% 92%,rgba(22,69,52,.08),transparent 28%),
      linear-gradient(104deg,transparent 0 63%,rgba(26,64,49,.035) 64%,transparent 72%);
  }

  /* soft architectural/plant-like shadows rather than a flat white field */
  body.static-home .vd-home-m4__showcase::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:.42;
    background:
      radial-gradient(ellipse at 92% 4%,rgba(18,49,38,.10),transparent 17%),
      radial-gradient(ellipse at 42% 102%,rgba(20,62,46,.10),transparent 19%),
      linear-gradient(72deg,transparent 0 76%,rgba(26,63,49,.04) 77%,transparent 81%);
    filter:blur(6px);
  }

  body.static-home .vd-home-m4__ambient--one{
    width:270px;
    height:270px;
    right:-20px;
    top:58px;
    opacity:.30;
  }
  body.static-home .vd-home-m4__ambient--two{
    width:340px;
    height:170px;
    left:92px;
    bottom:0;
    opacity:.30;
  }

  /* Top system chips */
  body.static-home .vd-home-m4__chip--websites{
    left:126px;
    top:48px;
    min-width:238px;
  }
  body.static-home .vd-home-m4__chip--systems{
    right:12px;
    top:52px;
    min-width:216px;
  }

  /* Laptop aligns with the main visual axis of the mockup. */
  body.static-home .vd-home-m4__laptop{
    left:126px;
    top:148px;
    width:565px;
    height:396px;
    filter:drop-shadow(0 34px 42px rgba(15,33,27,.16));
  }
  body.static-home .vd-home-m4__laptop-lid{
    inset:0 18px 55px;
  }
  body.static-home .vd-home-m4__screen{
    background:#f4f4ef;
  }
  body.static-home .vd-home-m4__screen img{
    object-fit:cover;
    object-position:center;
    filter:none;
  }

  /* Checker overlaps the upper-right quarter of the laptop like the target. */
  body.static-home .vd-home-m4__checker-card{
    right:18px;
    top:184px;
    width:270px;
    padding:19px;
    border-radius:18px;
    background:rgba(255,255,255,.95);
    box-shadow:0 22px 48px rgba(22,43,35,.13);
  }

  /* Social card sits across the laptop foot rather than far below it. */
  body.static-home .vd-home-m4__social-card{
    left:42px;
    bottom:62px;
    width:390px;
    padding:16px;
    border-radius:18px;
    background:rgba(255,255,255,.95);
  }
  body.static-home .vd-home-m4__social-preview{
    height:96px;
    background:#f7f7f3;
  }
  body.static-home .vd-home-m4__social-preview img{
    object-fit:contain;
    object-position:center;
    background:#f7f7f3;
  }

  /* VCORE stays small: brand seal / technological base, not main hero object. */
  body.static-home .vd-home-m4__vcore-mini{
    right:205px;
    bottom:116px;
    width:118px;
    height:132px;
    border-radius:17px;
  }

  body.static-home .vd-home-m4__chip--products{
    right:4px;
    bottom:162px;
    min-width:206px;
  }

  body.static-home .vd-home-m4__chip--automation{
    left:404px;
    bottom:36px;
    min-width:250px;
  }

  body.static-home .vd-home-m4__showcase-signature{
    right:8px;
    bottom:44px;
    font-size:25px;
  }

  body.static-home .vd-home-m4__book{
    right:6px;
    bottom:-5px;
    width:246px;
  }

  /* More deliberate connectors: thin, quiet, with small system nodes. */
  body.static-home .vd-home-m4__chip--websites::after{
    left:100%;
    top:50%;
    width:72px;
    height:54px;
    border-top:1px solid rgba(42,101,78,.48);
    border-right:1px solid rgba(42,101,78,.48);
    background:none;
    opacity:.72;
  }

  body.static-home .vd-home-m4__chip--systems::after{
    right:100%;
    top:50%;
    width:68px;
    height:54px;
    border-top:1px solid rgba(58,104,86,.42);
    border-left:1px solid rgba(58,104,86,.42);
    background:none;
    opacity:.66;
  }

  body.static-home .vd-home-m4__checker-card::after{
    left:39%;
    top:100%;
    width:74px;
    height:68px;
    border-left:1px solid rgba(58,104,86,.44);
    border-bottom:1px solid rgba(58,104,86,.44);
    background:none;
    opacity:.70;
  }

  body.static-home .vd-home-m4__vcore-mini::after{
    left:100%;
    right:auto;
    top:50%;
    width:52px;
    height:1px;
    background:linear-gradient(90deg,rgba(58,104,86,.55),transparent);
    opacity:.72;
  }

  body.static-home .vd-home-m4__chip--automation::before,
  body.static-home .vd-home-m4__chip--products::before,
  body.static-home .vd-home-m4__chip--websites::before,
  body.static-home .vd-home-m4__chip--systems::before{
    content:"";
    position:absolute;
    z-index:2;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#457a67;
    box-shadow:0 0 0 5px rgba(69,122,103,.07);
  }
  body.static-home .vd-home-m4__chip--websites::before{right:-76px;top:48px}
  body.static-home .vd-home-m4__chip--systems::before{left:-72px;top:48px}
  body.static-home .vd-home-m4__chip--products::before{left:-12px;top:50%;transform:translateY(-50%)}
  body.static-home .vd-home-m4__chip--automation::before{left:50%;top:-13px;transform:translateX(-50%)}
}

/* Preserve the approved composition as long as there is enough desktop room. */
@media (min-width:1181px) and (max-width:1320px){
  body.static-home .vd-home-m4__hero::after{
    clip-path:polygon(66% 0,100% 0,100% 100%,44% 100%);
  }
  body.static-home .vd-home-m4__showcase{
    margin-left:-48px;
  }
}

/* Keep responsive behavior safe; do not force the desktop diagonal layout. */
@media (max-width:900px){
  body.static-home .vd-home-m4__showcase{
    margin-left:0;
  }
}

/* ======================================================================
   Vanilla Lab product previews · supplied product artwork
   Additive patch on top of the final editorial/competitive frontpage CSS.
   Only the two product visual panes are changed.

   Transition logic:
   - no hard vertical seam
   - the white-to-image transition is centered on the former column edge
   - same visual idea as the service-card photo fade, but horizontal
   ====================================================================== */
body.static-home .vd-home-m3__product-card--checker,
body.static-home .vd-home-m3__product-card--social{
  position:relative;
}

body.static-home .vd-home-m3__product-visual--image{
  position:relative;
  display:block;
  min-height:238px;
  padding:0;
  overflow:hidden;
  border-left:0;
  background:#071815;
  isolation:isolate;
}

body.static-home .vd-home-m3__product-visual--image .vd-home-m3__product-preview-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  max-width:none;
  transform:translateZ(0) scale(1.002);
  image-rendering:auto;
}

/* Product preview: clean edge, intentionally without blur/fade. */
body.static-home .vd-home-m3__product-card--checker::after,
body.static-home .vd-home-m3__product-card--social::after,
body.static-home .vd-home-m3__product-visual--image::before,
body.static-home .vd-home-m3__product-visual--image::after{
  display:none;
}

@media (max-width:580px){
  body.static-home .vd-home-m3__product-visual--image{
    min-height:210px;
    border-left:0;
    border-top:0;
  }
}

/* Weitere Projekte: supplied project photo only. */
body.static-home .vd-home-m3__mini-project-media--image{
  padding:0;
  overflow:hidden;
  background:#dfe8e6;
}
body.static-home .vd-home-m3__mini-project-media--image img{
  width:100%;
  height:100%;
  min-height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}