:root {
  --ink: #464149;
  --muted: #747078;
  --brand: #865596;
  --brand2: #b28dc0;
  --pale: #f7f1f9;
  --warm: #f7f5f2;
  --line: #e8dfea;
  --shadow: 0 22px 55px rgba(85, 61, 94, .12);
}

.btn-primary {
  box-shadow: 0 12px 30px rgba(134, 85, 150, .26);
}

.btn-primary:hover { background: #70457e; }
.topbar { background: #55405d; color: #f0e7f3; }
.header { border-bottom-color: rgba(232, 223, 234, .9); }
.brand-logo { width: 190px; height: auto; object-fit: contain; }
.footer .brand-logo { width: 205px; background: #fff; border-radius: 10px; padding: 5px 8px; }
.hero { background: linear-gradient(115deg, #faf6fb 0 55%, #eadced 55%); }
.hero:before { border-color: rgba(178, 141, 192, .28); }
.tech { background: #4c3753; }
.tech-copy .eyebrow { color: #e0bcea; }
.tech-copy p { color: #eadfed; }
.pro { background: linear-gradient(120deg, #f3eaf6, #fbf9fb); }
.cta { background: linear-gradient(120deg, #865596, #5d3c68); }
.cta p { color: #eee2f1; }
.footer { background: #382b3d; color: #e2d9e5; }
.footer .brand { width: fit-content; }

@media (max-width: 680px) {
  .brand-logo { width: 155px; }
  .footer .brand-logo { width: 185px; }
}