/* Home page redesign (lib/home-redesign.mjs): only the pieces that are new. Everything reuses the live site's values:
   cards = the testimonial card (rgba(13,13,13,0.6), 1px rgba(255,255,255,0.1), 24px radius),
   text = Satoshi 500 headings in rgb(251,250,252), body copy in the site grey, links = the
   nav/button text style (Satoshi 500, -0.02em). */
.v2 {
  --v2-ink: rgb(251, 250, 252);
  --v2-mute: rgb(179, 179, 179);
  --v2-line: rgba(255, 255, 255, 0.1);
  --v2-card: rgba(13, 13, 13, 0.6);
  --v2-sans: "Satoshi", "Satoshi Placeholder", sans-serif;
  --v2-serif: "Instrument Serif", "Instrument Serif Placeholder", serif;
  color: var(--v2-ink);
  font-family: var(--v2-sans);
}
.v2 *, .v2 *::before, .v2 *::after { box-sizing: border-box; }
.v2 h1, .v2 h2, .v2 h3, .v2 p, .v2 ul { margin: 0; padding: 0; }
.v2 ul { list-style: none; }
.v2 a { color: inherit; text-decoration: none; }
.v2 em { font-family: var(--v2-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }

/* ---------- hero copy (inside the live hero; live pill above, live button below) ---------- */
.v2.v2-herocopy { width: 100%; max-width: 980px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 20px; }
.v2-h1 { font-size: clamp(44px, 5.6vw, 84px); line-height: 1; letter-spacing: -0.05em; font-weight: 500; text-wrap: balance; }
.v2-h1 em { font-size: 1.08em; letter-spacing: -0.02em; background: linear-gradient(100deg, #fff 10%, rgb(196, 181, 253) 60%, rgb(244, 164, 196) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-right: 0.06em; }
a.v2-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px;
  border-radius: 999px; background: rgb(75, 75, 214); color: #fff !important; text-decoration: none;
  font: 500 16px/1 "Satoshi", "Satoshi Placeholder", sans-serif; letter-spacing: -0.01em;
  box-shadow: 0 10px 30px -10px rgba(99, 96, 240, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: background-color 0.2s, transform 0.2s;
}
a.v2-btn:hover { background: rgb(99, 96, 240); transform: translateY(-1px); }
.v2-lede { margin-top: 20px !important; max-width: 800px; font-size: 19px; line-height: 1.5; letter-spacing: -0.02em; color: var(--v2-mute); }
.v2-buttons { width: auto !important; max-width: none !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 12px 28px !important; }
a.v2-textlink {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 0;
  font: 500 16px/24px "Satoshi", "Satoshi Placeholder", sans-serif; letter-spacing: -0.02em; color: rgb(251, 250, 252); text-decoration: none;
}
a.v2-textlink svg { transition: transform 0.2s; }
a.v2-textlink:hover svg { transform: translateX(3px); }

/* ---------- grids under the live section headers ---------- */
.v2.v2-grid { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.v2-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.v2-services li, .v2-case {
  position: relative; border-radius: 24px; background: var(--v2-card);
  border: 1px solid var(--v2-line); transition: border-color 0.25s;
}
.v2-services li:hover, .v2-case:hover { border-color: rgba(255, 255, 255, 0.22); }
.v2-services li { padding: 28px; }
.v2-icon { display: flex; align-items: center; justify-content: flex-start; width: 28px; height: 28px; color: var(--v2-ink); }
.v2-icon svg { width: 28px; height: 28px; fill: currentColor; color: var(--v2-ink); }
.v2-services h3 { margin-top: 18px !important; font-size: 20px; line-height: 1.3; font-weight: 500; letter-spacing: -0.02em; }
.v2-services p { margin-top: 8px !important; font-size: 16px; line-height: 24px; letter-spacing: -0.02em; color: var(--v2-mute); }

.v2-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.v2-case { display: flex; flex-direction: column; overflow: hidden; }
.v2-case-img { display: block; aspect-ratio: 16 / 8; overflow: hidden; }
.v2-case-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-case-body { display: flex; flex-direction: column; gap: 12px; padding: 28px; flex: 1; }
.v2-tag { font-size: 14px; font-weight: 500; letter-spacing: -0.02em; color: var(--v2-mute); }
.v2-case-title { font-size: 26px; line-height: 1.2; font-weight: 500; letter-spacing: -0.03em; }
.v2-case-text { font-size: 16px; line-height: 24px; letter-spacing: -0.02em; color: var(--v2-mute); }
.v2-stats { display: flex; flex-wrap: wrap; gap: 12px 32px; padding-top: 16px; margin-top: 4px; border-top: 1px solid var(--v2-line); }
.v2-stats span { display: flex; flex-direction: column; font-size: 14px; color: var(--v2-mute); }
.v2-stats strong { font-size: 34px; line-height: 1.15; font-weight: 500; letter-spacing: -0.04em; color: var(--v2-ink); }
.v2-all a.v2-textlink { font-size: 16px; }
.v2-case-more { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 500; letter-spacing: -0.02em; }
.v2-all { margin-top: 24px !important; text-align: center; }

@media (max-width: 1199.98px) {
  .v2-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 809.98px) {
  .v2.v2-herocopy { padding: 0; }
  .v2-h1 { font-size: 40px; line-height: 1.05; }
  .v2-lede { font-size: 17px; margin-top: 16px !important; }
  .v2.v2-grid { padding: 0; }
  a.v2-textlink { font-size: 16px; }
  .v2-buttons { gap: 12px 20px !important; }
  .v2-all a.v2-textlink { font-size: 16px; }
  .v2-services { grid-template-columns: 1fr; gap: 12px; }
  .v2-services li { padding: 22px; display: grid; grid-template-columns: 28px 1fr; column-gap: 16px; }
  .v2-icon { grid-row: span 2; }
  .v2-services h3 { margin-top: 0 !important; font-size: 18px; }
  .v2-services p { margin-top: 4px !important; font-size: 15px; line-height: 22px; }
  .v2-cases { grid-template-columns: 1fr; gap: 12px; }
  .v2-case-body { padding: 22px; }
  .v2-case-title { font-size: 22px; }
  .v2-stats strong { font-size: 28px; }
}