.r8-footer > .studio-social {
  grid-column: 1 / -1;
  min-width: 0;
  margin-top: 22px;
  padding: 18px 0 16px;
  border-top: 1px solid var(--kit-line);
  border-bottom: 1px solid var(--kit-line);
  font-family: Exo, system-ui, sans-serif;
}

.r8-footer > .studio-social .studio-social-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  margin-bottom: 12px;
}

.r8-footer > .studio-social .studio-social-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.r8-footer > .studio-social h2 {
  margin: 0;
  color: #a4ef83;
  font: 600 12px/1.4 Exo, system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.r8-footer > .studio-social .studio-social-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-sizing: border-box;
  min-height: 44px;
  padding: 6px 12px 6px 7px;
  border: 1px solid color-mix(in srgb, var(--contact-color) 52%, var(--kit-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--contact-color) 14%, var(--kit-panel));
  color: var(--kit-ink);
  font: 700 13px/1.3 Exo, system-ui, sans-serif;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

.r8-footer > .studio-social .studio-contact-telegram { --contact-color: #229ed9; }
.r8-footer > .studio-social .studio-contact-whatsapp { --contact-color: #25d366; }

.r8-footer > .studio-social .studio-social-icon {
  display: inline-flex;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--icon-bg);
  color: #fff;
}

.r8-footer > .studio-social .studio-social-contact .studio-social-icon {
  --icon-bg: var(--contact-color);
}

.r8-footer > .studio-social .studio-social-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

.r8-footer > .studio-social .studio-social-contact:is(:hover, :focus-visible) {
  border-color: var(--contact-color);
  background: color-mix(in srgb, var(--contact-color) 24%, var(--kit-panel));
  color: var(--kit-ink);
}

.r8-footer > .studio-social .studio-social-contact:focus-visible {
  outline: 2px solid #a4ef83;
  outline-offset: 3px;
}

.r8-footer > .studio-social nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.r8-footer > .studio-social nav a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
  padding: 6px 12px 6px 7px;
  border: 1px solid color-mix(in srgb, var(--brand-color) 36%, var(--kit-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-color) 10%, var(--kit-panel));
  color: var(--kit-ink);
  font: 600 13px/1.3 Exo, system-ui, sans-serif;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.r8-footer > .studio-social .studio-brand-linkedin { --brand-color: #0a66c2; --icon-bg: #0a66c2; }
.r8-footer > .studio-social .studio-brand-x { --brand-color: #91acc4; --icon-bg: #151b22; }
.r8-footer > .studio-social .studio-brand-threads { --brand-color: #ad9bbb; --icon-bg: #211d28; }
.r8-footer > .studio-social .studio-brand-reddit { --brand-color: #ff4500; --icon-bg: #ff4500; }
.r8-footer > .studio-social .studio-brand-youtube { --brand-color: #ff0033; --icon-bg: #e9002c; }
.r8-footer > .studio-social .studio-brand-tiktok { --brand-color: #25f4ee; --icon-bg: #10171a; }
.r8-footer > .studio-social .studio-brand-instagram { --brand-color: #dd2a7b; --icon-bg: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 60%, #4f5bd5 100%); }
.r8-footer > .studio-social .studio-brand-tiktok svg { overflow: visible; }
.r8-footer > .studio-social .studio-brand-tiktok .studio-tiktok-cyan { color: #25f4ee; transform: translate(-1px, 1px); }
.r8-footer > .studio-social .studio-brand-tiktok .studio-tiktok-red { color: #fe2c55; transform: translate(1px, -1px); }

.r8-footer > .studio-social nav a:is(:hover, :focus-visible) {
  border-color: var(--brand-color);
  background: color-mix(in srgb, var(--brand-color) 19%, var(--kit-panel));
  color: var(--kit-ink);
}

.r8-footer > .studio-social nav a:focus-visible {
  outline: 2px solid #a4ef83;
  outline-offset: 3px;
}

.r8-footer > .studio-social .studio-social-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin: 14px 0 0;
  font: 600 13px/1.4 Exo, system-ui, sans-serif;
}

.r8-footer > .studio-social .studio-social-pages a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--kit-ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, #a4ef83 55%, transparent);
  text-underline-offset: 4px;
}

.r8-footer > .studio-social .studio-social-pages a:is(:hover, :focus-visible) {
  color: #a4ef83;
}

.r8-footer > .studio-social .studio-social-pages a:focus-visible {
  outline: 2px solid #a4ef83;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .r8-footer > .studio-social :is(nav a, .studio-social-contact) { transition: none; }
}

@media (max-width: 390px) {
  .r8-footer > .studio-social .studio-social-contacts { width: 100%; }
  .r8-footer > .studio-social .studio-social-contact { flex: 1 1 150px; }
}
