:root {
  --action-ring: #a58aef;
}

a, button { touch-action: manipulation; }

.button{
  min-height: 48px;
  padding: 7px 8px 7px 22px;
  gap: 20px;
  border: 1px solid #ffffff38;
  border-radius: 999px;
  background: linear-gradient(115deg, #171b4c, #43317f 65%, #7753ba);
  color: #fff;
  font-weight: 650;
  box-shadow: inset 0 1px 0 #ffffff26, 0 5px 16px #39256618;
  transition: transform .22s ease, box-shadow .22s ease;
}

.button > span {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffffeb;
  color: #6242b2;
  font-size: 20px;
  transition: transform .22s ease, background .22s ease;
}

.text-link,
.h3-copy .text-link {
  min-height: 44px;
  max-width: 100%;
  gap: 12px;
  padding: 4px 5px 4px 0;
  border-radius: 999px;
  color: #6041bb;
  font-weight: 650;
  line-height: 1.3;
  transition: color .22s ease, background .22s ease;
}

.text-link > span,
.h3-copy .text-link > span {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid #d8ccf5;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff, #e9e0ff);
  color: #7450ce;
  font-size: 20px;
  transition: transform .22s ease, background .22s ease, color .22s ease;
}

.header nav { gap: 8px; }
.header nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 15px;
  border-radius: 999px;
  color: #514b73;
  transition: background .22s ease, color .22s ease;
}

.h3-nav a {
  min-height: 46px;
  background: #ffffff40;
  border-color: #ffffff80;
  border-radius: 999px;
  transition: background .22s ease, color .22s ease, box-shadow .22s ease;
}

.h3-nav a svg {
  padding: 5px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: #e9e0ff;
  transition: background .22s ease, stroke .22s ease;
}

.footer-grid > div > a:not(.brand) {
  display: flex;
  align-items: center;
  min-height: 44px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 10px;
  margin-left: -10px;
  border-radius: 12px;
  color: #666080;
  overflow-wrap: anywhere;
  transition: background .22s ease, color .22s ease;
}

.footer-bottom div { align-items: center; flex-wrap: wrap; gap: 12px; }
.menu-toggle {
  width: 44px;
  height: 44px;
  border: 1px solid #ddd3f2;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff, #eee7fc);
  color: #64508d;
  text-align: center;
  transition: background .22s ease, color .22s ease, transform .22s ease;
}

@media (hover: hover) {
  .button:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 #ffffff38, 0 10px 24px #5d3ba52b;
  }
  .button:hover > span { transform: rotate(-35deg); background: #eee5ff; }
  .text-link:hover, .h3-copy .text-link:hover { color: #422387; text-decoration: none; }
  .text-link:hover > span { transform: rotate(-35deg); background: #7050ce; color: #fff; }
  .header nav a:hover,
  .footer-grid > div > a:not(.brand):hover { background: #eae1fc; color: #5936a5; }
  .h3-nav a:hover { background: #fff; color: #523398; box-shadow: 0 4px 14px #7155aa14; }
  .h3-nav a:hover svg { background: #7450ce; stroke: #fff; }
  .menu-toggle:hover { background: #e4d8fa; color: #472883; transform: translateY(-2px); }
}

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--action-ring);
  outline-offset: 4px;
}
.button:active, .text-link:active, .h3-nav a:active { transform: translateY(1px); }

@media (max-width: 760px) {
  .header { gap: 8px; }
  .header-cta { min-height: 44px; padding: 5px 6px 5px 12px; gap: 8px; font-size: 10px; }
  .header-cta > span { width: 28px; height: 28px; font-size: 18px; }
  .h3-nav a { padding: 7px 10px; gap: 7px; }
  .h3-nav a svg { width: 27px; height: 27px; }
}

@media (max-width: 420px) {
  .header .brand { font-size: 16px; gap: 6px; }
  .header-cta { gap: 5px; padding-left: 9px; }
  .header-cta > span { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  a, button, .button > span, .text-link > span, .h3-nav a svg { transition: none; }
  .button:hover, .button:hover > span, .text-link:hover > span, .menu-toggle:hover,
  .button:active, .text-link:active, .h3-nav a:active { transform: none; }
}