/* ==========================================================================
   viklab design system — components
   Nav, footer, buttons, cards, chips, forms, tables, Bootstrap bridge.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Scroll progress bar
   -------------------------------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1101;
  height: 2px;
  width: 100%;
  background: var(--grad);
  transform: scaleX(var(--scroll-p, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Site navigation
   -------------------------------------------------------------------------- */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1100;
  height: var(--nav-h);
  transition: background-color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease), backdrop-filter var(--dur-2) var(--ease);
  border-bottom: 1px solid transparent;
}

.site-nav.is-scrolled {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .site-nav.is-scrolled {
    background: rgba(9, 9, 11, 0.82);
  }
}

.site-nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-brand {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--text);
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}

.nav-brand:hover {
  color: var(--text);
}

.nav-brand .cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  transform: translateY(0.18em);
  background: var(--grad);
  border-radius: 1px;
  animation: blink 1.2s steps(1) infinite;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
}

.nav-link {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-2);
  border-radius: var(--radius-sm);
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.2rem;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-2) var(--ease);
}

.nav-link:hover {
  color: var(--text);
}

.nav-link.is-active {
  color: var(--text);
}

.nav-link.is-active::after,
.nav-link:hover::after {
  transform: scaleX(1);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.5rem;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}

.icon-btn:hover {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
}

.icon-btn .icon {
  width: 18px;
  height: 18px;
}

/* --------------------------------------------------------------------------
   Theme toggle: BB-8 day/night switch — checked = dark
   (adapted from Uiverse.io by Galahhad; scaled via font-size)
   The --accent / --radius custom properties below intentionally shadow the
   global tokens inside the toggle subtree only.
   -------------------------------------------------------------------------- */
.bb8-toggle {
  --toggle-size: 6px;
  --toggle-width: 10.625em;
  --toggle-height: 5.625em;
  --toggle-offset: calc((var(--toggle-height) - var(--bb8-diameter)) / 2);
  --toggle-bg: linear-gradient(#2c4770, #070e2b 35%, #628cac 50% 70%, #a6c5d4) no-repeat;
  --bb8-diameter: 4.375em;
  --radius: 99em;
  --transition: 0.4s;
  --accent: #de7d2f;
  --bb8-bg: #fff;
  --travel: calc(var(--toggle-width) - var(--bb8-diameter) - var(--toggle-offset) * 2);
  display: inline-block;
  flex: none;
  cursor: pointer;
  font-size: var(--toggle-size);
}

/* Larger variant for the mobile overlay */
.bb8-toggle--lg {
  font-size: 8px;
}

.bb8-toggle,
.bb8-toggle *,
.bb8-toggle *::before,
.bb8-toggle *::after {
  box-sizing: border-box;
}

/* Kept focusable (visually hidden, not display:none) for keyboard users */
.bb8-toggle__checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.bb8-toggle__checkbox:focus-visible + .bb8-toggle__container {
  box-shadow: var(--ring);
}

.bb8-toggle__container {
  display: block;
  position: relative;
  width: var(--toggle-width);
  height: var(--toggle-height);
  border-radius: var(--radius);
  transition: box-shadow var(--dur-1) var(--ease);
}

/* ── BB-8 himself ── */
.bb8-toggle .bb8 {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: calc(var(--toggle-offset) - 1.688em + 0.188em);
  left: var(--toggle-offset);
  transition: transform var(--transition);
  will-change: transform;
  z-index: 2;
}

.bb8-toggle .bb8__head-container {
  display: block;
  position: relative;
  transition: transform var(--transition);
  z-index: 2;
  transform-origin: 1.25em 3.75em;
}

.bb8-toggle .bb8__head {
  display: block;
  overflow: hidden;
  margin-bottom: -0.188em;
  width: 2.5em;
  height: 1.688em;
  background: linear-gradient(
      transparent 0.063em,
      dimgray 0.063em 0.313em,
      transparent 0.313em 0.375em,
      var(--accent) 0.375em 0.5em,
      transparent 0.5em 1.313em,
      silver 1.313em 1.438em,
      transparent 1.438em
    ),
    linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent 1.25em),
    linear-gradient(-45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent 1.25em),
    linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
  border-radius: var(--radius) var(--radius) 0 0;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0.063em 0.125em gray);
}

.bb8-toggle .bb8__head::before {
  content: '';
  position: absolute;
  width: 0.563em;
  height: 0.563em;
  background: radial-gradient(0.125em circle at 0.25em 0.375em, red, transparent),
    radial-gradient(0.063em circle at 0.375em 0.188em, var(--bb8-bg) 50%, transparent 100%),
    linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
  border-radius: var(--radius);
  top: 0.413em;
  left: 50%;
  transform: translate(-50%);
  box-shadow: 0 0 0 0.089em lightgray, 0.563em 0.281em 0 -0.148em,
    0.563em 0.281em 0 -0.1em var(--bb8-bg), 0.563em 0.281em 0 -0.063em;
  z-index: 1;
  transition: left var(--transition);
}

.bb8-toggle .bb8__head::after {
  content: '';
  position: absolute;
  bottom: 0.375em;
  left: 0;
  width: 100%;
  height: 0.188em;
  background: linear-gradient(
    to right,
    var(--accent) 0.125em,
    transparent 0.125em 0.188em,
    var(--accent) 0.188em 0.313em,
    transparent 0.313em 0.375em,
    var(--accent) 0.375em 0.938em,
    transparent 0.938em 1em,
    var(--accent) 1em 1.125em,
    transparent 1.125em 1.875em,
    var(--accent) 1.875em 2em,
    transparent 2em 2.063em,
    var(--accent) 2.063em 2.25em,
    transparent 2.25em 2.313em,
    var(--accent) 2.313em 2.375em,
    transparent 2.375em 2.438em,
    var(--accent) 2.438em
  );
  transition: background-position var(--transition);
}

.bb8-toggle .bb8__antenna {
  position: absolute;
  transform: translateY(-90%);
  width: 0.059em;
  border-radius: var(--radius) var(--radius) 0 0;
  transition: left var(--transition), right var(--transition);
}

.bb8-toggle .bb8__antenna:nth-child(1) {
  height: 0.938em;
  right: 0.938em;
  background: linear-gradient(#000 0.188em, silver 0.188em);
}

.bb8-toggle .bb8__antenna:nth-child(2) {
  height: 0.375em;
  left: 50%;
  transform: translate(-50%, -90%);
  background: silver;
}

.bb8-toggle .bb8__body {
  display: block;
  width: 4.375em;
  height: 4.375em;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition);
  will-change: transform;
  z-index: 1;
  transform: rotate(45deg);
  background: linear-gradient(
      -90deg,
      var(--bb8-bg) 4%,
      var(--accent) 4% 10%,
      transparent 10% 90%,
      var(--accent) 90% 96%,
      var(--bb8-bg) 96%
    ),
    linear-gradient(
      var(--bb8-bg) 4%,
      var(--accent) 4% 10%,
      transparent 10% 90%,
      var(--accent) 90% 96%,
      var(--bb8-bg) 96%
    ),
    linear-gradient(to right, transparent 2.156em, silver 2.156em 2.219em, transparent 2.188em),
    linear-gradient(transparent 2.156em, silver 2.156em 2.219em, transparent 2.188em);
  background-color: var(--bb8-bg);
}

.bb8-toggle .bb8__body::after {
  content: '';
  bottom: 1.5em;
  left: 0.563em;
  position: absolute;
  width: 0.188em;
  height: 0.188em;
  background: rgb(236, 236, 236);
  color: rgb(236, 236, 236);
  border-radius: 50%;
  box-shadow: 0.875em 0.938em, 0 -1.25em, 0.875em -2.125em, 2.125em -2.125em,
    3.063em -1.25em, 3.063em 0, 2.125em 0.938em;
}

.bb8-toggle .bb8__body::before {
  content: '';
  width: 2.625em;
  height: 2.625em;
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0.313em solid var(--accent);
  background: radial-gradient(1em circle at center, rgb(236, 236, 236) 50%, transparent 51%),
    radial-gradient(1.25em circle at center, var(--bb8-bg) 50%, transparent 51%),
    linear-gradient(-90deg, transparent 42%, var(--accent) 42% 58%, transparent 58%),
    linear-gradient(var(--bb8-bg) 42%, var(--accent) 42% 58%, var(--bb8-bg) 58%);
}

.bb8-toggle .artificial__hidden {
  position: absolute;
  border-radius: inherit;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.bb8-toggle .bb8__shadow {
  width: var(--bb8-diameter);
  height: 20%;
  border-radius: 50%;
  background: #3a271c;
  box-shadow: 0.313em 0 3.125em #3a271c;
  opacity: 0.25;
  position: absolute;
  bottom: 0;
  left: calc(var(--toggle-offset) - 0.938em);
  transition: transform var(--transition);
  transform: skew(-70deg);
  will-change: transform;
  z-index: 1;
}

/* ── Scenery ── */
.bb8-toggle__scenery {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  position: relative;
  border-radius: inherit;
  z-index: 0;
}

/* Sky: the day/night pan runs as a transform on the compositor
   (background-position would repaint every frame and stutter) */
.bb8-toggle__scenery::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  background: var(--toggle-bg);
  transform: translateY(-50%);
  transition: transform var(--transition);
  will-change: transform;
  z-index: -1;
}

.bb8-toggle__scenery::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 30%;
  bottom: 0;
  background: #b18d71;
  z-index: 1;
}

.bb8-toggle__cloud {
  z-index: 1;
  position: absolute;
  border-radius: 50%;
}

.bb8-toggle__cloud:nth-last-child(1) {
  width: 0.875em;
  height: 0.625em;
  filter: blur(0.125em) drop-shadow(0.313em 0.313em #ffffffae) drop-shadow(-0.625em 0 #fff)
    drop-shadow(-0.938em -0.125em #fff);
  right: 1.875em;
  top: 2.813em;
  background: linear-gradient(to top right, #ffffffae, #ffffffae);
  transition: transform var(--transition);
}

.bb8-toggle__cloud:nth-last-child(2) {
  top: 0.625em;
  right: 4.375em;
  width: 0.875em;
  height: 0.375em;
  background: #dfdedeae;
  filter: blur(0.125em) drop-shadow(-0.313em -0.188em #e0dfdfae)
    drop-shadow(-0.625em -0.188em #bbbbbbae) drop-shadow(-1em 0.063em #cfcfcfae);
  transition: transform 0.6s;
}

.bb8-toggle__cloud:nth-last-child(3) {
  top: 1.25em;
  right: 0.938em;
  width: 0.875em;
  height: 0.375em;
  background: #ffffffae;
  filter: blur(0.125em) drop-shadow(0.438em 0.188em #ffffffae)
    drop-shadow(-0.625em 0.313em #ffffffae);
  transition: transform 0.8s;
}

.bb8-toggle .gomrassen,
.bb8-toggle .hermes,
.bb8-toggle .chenini {
  position: absolute;
  border-radius: var(--radius);
  background: linear-gradient(#fff, #6e8ea2);
  top: 100%;
}

.bb8-toggle .gomrassen {
  left: 0.938em;
  width: 1.875em;
  height: 1.875em;
  box-shadow: 0 0 0.188em #ffffff52, 0 0 0.188em #6e8ea24b;
  transition: transform var(--transition);
}

.bb8-toggle .gomrassen::before,
.bb8-toggle .gomrassen::after {
  content: '';
  position: absolute;
  border-radius: inherit;
  box-shadow: inset 0 0 0.063em rgb(140, 162, 169);
  background: rgb(184, 196, 200);
}

.bb8-toggle .gomrassen::before {
  left: 0.313em;
  top: 0.313em;
  width: 0.438em;
  height: 0.438em;
}

.bb8-toggle .gomrassen::after {
  width: 0.25em;
  height: 0.25em;
  left: 1.25em;
  top: 0.75em;
}

.bb8-toggle .hermes {
  left: 3.438em;
  width: 0.625em;
  height: 0.625em;
  box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
  transition: transform 0.6s;
}

.bb8-toggle .chenini {
  left: 4.375em;
  width: 0.5em;
  height: 0.5em;
  box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
  transition: transform 0.8s;
}

.bb8-toggle .tatto-1,
.bb8-toggle .tatto-2 {
  position: absolute;
  width: 1.25em;
  height: 1.25em;
  border-radius: var(--radius);
}

.bb8-toggle .tatto-1 {
  background: #fefefe;
  right: 3.125em;
  top: 0.625em;
  box-shadow: 0 0 0.438em #fdf4e1;
  transition: transform var(--transition);
}

.bb8-toggle .tatto-2 {
  background: linear-gradient(#e6ac5c, #d75449);
  right: 1.25em;
  top: 2.188em;
  box-shadow: 0 0 0.438em #e6ad5c3d, 0 0 0.438em #d755494f;
  transition: transform 0.7s;
}

.bb8-toggle__star {
  position: absolute;
  width: 0.063em;
  height: 0.063em;
  background: #fff;
  border-radius: var(--radius);
  filter: drop-shadow(0 0 0.063em #fff);
  color: #fff;
  top: 100%;
}

.bb8-toggle__star:nth-child(1) {
  left: 3.75em;
  box-shadow: 1.25em 0.938em, -1.25em 2.5em, 0 1.25em, 1.875em 0.625em, -3.125em 1.875em,
    1.25em 2.813em;
  transition: transform 0.2s;
}

.bb8-toggle__star:nth-child(2) {
  left: 4.688em;
  box-shadow: 0.625em 0, 0 0.625em, -0.625em -0.625em, 0.625em 0.938em, -3.125em 1.25em,
    1.25em -1.563em;
  transition: transform 0.3s;
}

.bb8-toggle__star:nth-child(3) {
  left: 5.313em;
  box-shadow: -0.625em -0.625em, -2.188em 1.25em, -2.188em 0, -3.75em -0.625em,
    -3.125em -0.625em, -2.5em -0.313em, 0.75em -0.625em;
  transition: transform var(--transition);
}

.bb8-toggle__star:nth-child(4) {
  left: 1.875em;
  width: 0.125em;
  height: 0.125em;
  transition: transform 0.5s;
}

.bb8-toggle__star:nth-child(5) {
  left: 5em;
  width: 0.125em;
  height: 0.125em;
  transition: transform 0.6s;
}

.bb8-toggle__star:nth-child(6) {
  left: 2.5em;
  width: 0.125em;
  height: 0.125em;
  transition: transform 0.7s;
}

.bb8-toggle__star:nth-child(7) {
  left: 3.438em;
  width: 0.125em;
  height: 0.125em;
  transition: transform 0.8s;
}

/* ── Checked (= dark / night) state ──
   Every movement is a transform so it animates on the compositor and stays
   smooth even while the theme switch repaints the rest of the page. */
.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(1) {
  transform: translateY(-5em);
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(2) {
  transform: translateY(-3.75em);
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(3) {
  transform: translateY(-4.375em);
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(4) {
  transform: translateY(-2.188em);
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(5) {
  transform: translateY(-2.188em);
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(6) {
  transform: translateY(-5.313em);
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(7) {
  transform: translateY(-3.75em);
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__cloud {
  transform: translateX(11em);
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .gomrassen {
  transform: translateY(-4.688em);
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .hermes {
  transform: translateY(-3.125em);
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .chenini {
  transform: translateY(-2.875em);
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__scenery::after {
  transform: translateY(0);
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .tatto-1 {
  transform: translateY(5em);
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .tatto-2 {
  transform: translateY(3.438em);
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8 {
  transform: translateX(var(--travel));
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8__shadow {
  transform: translateX(calc(var(--travel) + 1.876em)) skew(70deg);
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8__body {
  transform: rotate(225deg);
}

/* ── Hover / active easter eggs ── */
.bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__head::before {
  left: 100%;
}

.bb8-toggle__checkbox:not(:checked):hover + .bb8-toggle__container .bb8__antenna:nth-child(1) {
  right: 1.5em;
}

.bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__antenna:nth-child(2) {
  left: 0.938em;
}

.bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__head::after {
  background-position: 1.375em 0;
}

.bb8-toggle__checkbox:checked:hover + .bb8-toggle__container .bb8__head::before {
  left: 0;
}

.bb8-toggle__checkbox:checked:hover + .bb8-toggle__container .bb8__antenna:nth-child(2) {
  left: calc(100% - 0.938em);
}

.bb8-toggle__checkbox:checked:hover + .bb8-toggle__container .bb8__head::after {
  background-position: -1.375em 0;
}

.bb8-toggle__checkbox:active + .bb8-toggle__container .bb8__head-container {
  transform: rotate(25deg);
}

.bb8-toggle__checkbox:checked:active + .bb8-toggle__container .bb8__head-container {
  transform: rotate(-25deg);
}

.bb8-toggle .bb8:hover .bb8__head::before,
.bb8-toggle .bb8:hover .bb8__antenna:nth-child(2) {
  left: 50% !important;
}

.bb8-toggle .bb8:hover .bb8__antenna:nth-child(1) {
  right: 0.938em !important;
}

.bb8-toggle .bb8:hover .bb8__head::after {
  background-position: 0 0 !important;
}

/* No flip animation while syncing to the stored theme, or under reduced motion */
.bb8-toggle--static *,
.bb8-toggle--static *::before,
.bb8-toggle--static *::after {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .bb8-toggle *,
  .bb8-toggle *::before,
  .bb8-toggle *::after {
    transition: none !important;
  }
}

/* Language switch */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 38px;
  padding: 0 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
    background-color var(--dur-1) var(--ease);
}

.lang-switch:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface);
}

.lang-switch .icon {
  width: 14px;
  height: 14px;
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}

body.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

body.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

body.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile overlay */
.nav-overlay {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  z-index: 1099;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  display: none;
  flex-direction: column;
  padding: clamp(1.5rem, 6vw, 3rem);
  overflow-y: auto;
}

body.nav-open .nav-overlay {
  display: flex;
}

.nav-overlay .nav-link {
  font-size: 1.6rem;
  font-weight: 600;
  padding: 0.9rem 0.5rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}

.nav-overlay .nav-link::after {
  display: none;
}

.nav-overlay .nav-overlay__actions {
  margin-top: 2rem;
  display: flex;
  gap: 0.75rem;
}

@media (max-width: 860px) {
  .nav-links,
  .site-nav .nav-actions {
    display: none;
  }

  .nav-toggle {
    display: flex;
    margin-left: auto;
  }
}

body.nav-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn-v {
  --btn-h: 44px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: var(--btn-h);
  padding: 0 1.35rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--press, 1));
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease);
  overflow: hidden;
}

.btn-v:active {
  --press: 0.97;
}

.btn-v .icon {
  width: 17px;
  height: 17px;
  flex: none;
  transition: transform var(--dur-2) var(--ease);
}

.btn-v--lg {
  --btn-h: 52px;
  padding: 0 1.75rem;
  font-size: 1rem;
  border-radius: 14px;
}

.btn-v--sm {
  --btn-h: 36px;
  padding: 0 0.9rem;
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
}

/* Primary: gradient fill, glow, sheen sweep */
.btn-v--primary {
  background-image: linear-gradient(135deg, #6e7bff, #8d6ffb 55%, #22d3ee 130%);
  background-size: 140% 140%;
  background-position: 0% 50%;
  color: #fff;
  border: none;
}

.btn-v--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 60%
  );
  transform: translateX(-120%);
  transition: transform var(--dur-3) var(--ease);
  pointer-events: none;
}

.btn-v--primary:hover {
  color: #fff;
  box-shadow: var(--shadow-glow);
  background-position: 90% 50%;
}

.btn-v--primary:hover::after {
  transform: translateX(120%);
}

/* Secondary: bordered, icon nudges on hover */
.btn-v--secondary {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}

.btn-v--secondary:hover {
  background: var(--surface);
  border-color: var(--text-3);
  color: var(--text);
}

.btn-v--secondary:hover .icon {
  transform: translateX(3px);
}

.btn-v--secondary:hover .icon--static {
  transform: none;
}

/* Ghost: text with gradient underline */
.btn-v--ghost {
  height: auto;
  padding: 0.25rem 0.1rem;
  border-radius: 4px;
  background: none;
  color: var(--text-2);
  position: relative;
  overflow: visible;
}

.btn-v--ghost::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-2) var(--ease);
}

.btn-v--ghost:hover {
  color: var(--text);
}

.btn-v--ghost:hover::after {
  transform: scaleX(1);
}

/* Destructive */
.btn-v--danger {
  background: transparent;
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  color: var(--danger);
}

.btn-v--danger:hover {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-color: var(--danger);
  color: var(--danger);
}

.btn-v--block {
  width: 100%;
}

/* Loading state (JS toggles .is-loading) */
.btn-v.is-loading {
  pointer-events: none;
  opacity: 0.75;
}

.btn-v.is-loading::before {
  content: '';
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Legacy alias: old markup uses .button-30 — render it as a secondary button */
.button-30 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 44px;
  padding: 0 1.35rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: none;
  transition: background-color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}

.button-30:hover {
  background: var(--surface);
  border-color: var(--text-3);
  color: var(--text);
  box-shadow: none;
  transform: none;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card-v {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}

.card-v--hover:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card);
}

/* Mouse-tracked spotlight (JS sets --mx / --my in px) */
.card-v--spot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    var(--accent-soft),
    transparent 65%
  );
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
  pointer-events: none;
}

.card-v--spot:hover::before {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Chips, badges, status
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.chip--accent {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: var(--accent-soft);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  animation: pulse-ring 2.4s var(--ease) infinite;
}

.status-live {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--success);
}

.demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.demo-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* --------------------------------------------------------------------------
   Page head (sub-app pages)
   -------------------------------------------------------------------------- */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}

.page-head__title {
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  margin: 0;
}

.page-head__sub {
  color: var(--text-2);
  margin: 0.35rem 0 0;
}

/* --------------------------------------------------------------------------
   Forms — native styling + Bootstrap .form-control bridge
   -------------------------------------------------------------------------- */
.form-label,
label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-2);
}

.form-label {
  margin-bottom: 0.4rem;
}

.form-control,
.form-select {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 0.65rem 0.9rem;
  font-size: 0.95rem;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease),
    background-color var(--dur-1) var(--ease);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--surface);
  border-color: var(--accent);
  box-shadow: var(--ring);
  color: var(--text);
  outline: none;
}

.form-control::placeholder {
  color: var(--text-3);
}

.form-check-input {
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
}

.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.form-check-input:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.form-text {
  color: var(--text-3);
}

/* Legacy Bootstrap 4 `.form-group` (still in old markup) gets its spacing back */
.form-group {
  margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.table-v {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
}

.table-v .table,
.table-v table {
  margin: 0;
}

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: color-mix(in srgb, var(--surface) 55%, transparent);
  --bs-table-striped-color: var(--text);
  --bs-table-hover-bg: var(--card-hover);
  --bs-table-hover-color: var(--text);
  color: var(--text);
  border-color: var(--border);
}

.table thead th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--surface);
  border-bottom: 1px solid var(--border-strong);
  padding: 0.75rem 1rem;
  white-space: nowrap;
}

.table tbody td {
  padding: 0.7rem 1rem;
  border-color: var(--border);
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Bootstrap bridge — components used by sub-apps inherit the system
   -------------------------------------------------------------------------- */
.btn {
  border-radius: var(--radius);
  font-weight: 500;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}

.btn-primary,
.btn-success {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--accent) 85%, #fff);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--accent);
  --bs-btn-active-border-color: var(--accent);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
  --bs-btn-disabled-color: #fff;
}

.btn-info,
.btn-secondary,
.btn-light,
.btn-warning,
.btn-outline-primary,
.btn-outline-secondary {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-color: var(--text);
  --bs-btn-hover-bg: var(--surface);
  --bs-btn-hover-border-color: var(--text-3);
  --bs-btn-hover-color: var(--text);
  --bs-btn-active-bg: var(--surface);
  --bs-btn-active-border-color: var(--text-3);
  --bs-btn-active-color: var(--text);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--border);
  --bs-btn-disabled-color: var(--text-3);
}

.btn-danger,
.btn-outline-danger {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  --bs-btn-color: var(--danger);
  --bs-btn-hover-bg: color-mix(in srgb, var(--danger) 12%, transparent);
  --bs-btn-hover-border-color: var(--danger);
  --bs-btn-hover-color: var(--danger);
  --bs-btn-active-bg: color-mix(in srgb, var(--danger) 16%, transparent);
  --bs-btn-active-border-color: var(--danger);
  --bs-btn-active-color: var(--danger);
}

.card {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
}

.card-body {
  background-color: transparent;
  border-radius: inherit;
  color: var(--text);
}

.card-header {
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
}

.card-header h5 {
  margin: 0;
  font-size: 1rem;
}

.alert {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
}

.alert-success {
  border-left: 3px solid var(--success);
  color: var(--text);
}

.alert-danger {
  border-left: 3px solid var(--danger);
  color: var(--text);
}

.alert-info {
  border-left: 3px solid var(--accent);
  color: var(--text);
}

.alert-warning {
  border-left: 3px solid var(--warning);
  color: var(--text);
}

.modal-content {
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--text);
}

.modal-header,
.modal-footer {
  border-color: var(--border);
}

.dropdown-menu {
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.4rem;
  box-shadow: var(--shadow-card);
}

.dropdown-item {
  color: var(--text-2);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.75rem;
  font-size: 0.9rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--surface);
  color: var(--text);
}

.badge {
  font-family: var(--font-mono);
  font-weight: 600;
  border-radius: 999px;
}

.badge.bg-primary,
.badge.bg-info {
  background-color: var(--accent-soft) !important;
  color: var(--accent);
}

.badge.bg-success {
  background-color: color-mix(in srgb, var(--success) 15%, transparent) !important;
  color: var(--success);
}

.badge.bg-warning {
  background-color: color-mix(in srgb, var(--warning) 15%, transparent) !important;
  color: var(--warning);
}

.badge.bg-secondary {
  background-color: var(--surface) !important;
  color: var(--text-2);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  margin-top: auto;
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  padding: clamp(2.5rem, 6vh, 4rem) 0 1.5rem;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--grad);
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

@media (max-width: 760px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.9rem;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.footer-col a {
  color: var(--text-2);
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.footer-col a:hover {
  color: var(--text);
}

.footer-col a .icon {
  width: 15px;
  height: 15px;
}

.footer-tagline {
  color: var(--text-2);
  font-size: 0.95rem;
  max-width: 300px;
  margin: 0.75rem 0 0;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-3);
}

/* Back to top */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 1050;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--bg-elev) 85%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text-2);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease),
    color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}

.to-top.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.to-top:hover {
  color: var(--text);
  border-color: var(--text-3);
}

.to-top .icon {
  width: 18px;
  height: 18px;
}

/* --------------------------------------------------------------------------
   Cookie consent
   -------------------------------------------------------------------------- */
.consent-card {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 1200;
  width: min(400px, calc(100vw - 2rem));
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.25rem 1.1rem;
  box-shadow: var(--shadow-card);
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}

.consent-card.is-open {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

.consent-card h3 {
  font-size: 1rem;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.consent-card h3 .icon {
  width: 16px;
  height: 16px;
  color: var(--accent);
}

.consent-card p {
  font-size: 0.875rem;
  color: var(--text-2);
  margin-bottom: 1rem;
  line-height: 1.55;
}

/* Scribble checkboxes (adapted from Uiverse.io by PriyanshuGupta28) */
.consent-opts {
  display: grid;
  gap: 0.3rem;
  margin-bottom: 1rem;
}

.scribble-check {
  position: relative;
}

/* The real input sits invisibly over the drawn box: clickable + focusable */
.scribble-check input {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.scribble-check label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-2);
  user-select: none;
}

.scribble-check svg {
  width: 30px;
  height: 30px;
  flex: none;
  overflow: visible;
}

.scribble-check rect {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 4;
  transition: stroke var(--dur-1) var(--ease);
}

.scribble-check__path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  opacity: 0;
  transition: stroke-dashoffset 0.5s var(--ease), opacity 0.2s var(--ease);
}

.scribble-check input:checked + label .scribble-check__path {
  stroke-dashoffset: 0;
  opacity: 1;
}

.scribble-check input:not(:disabled):hover + label rect {
  stroke: var(--text-3);
}

.scribble-check input:not(:disabled):hover + label,
.scribble-check input:focus-visible + label {
  color: var(--text);
}

.scribble-check input:focus-visible + label svg {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.scribble-check--locked input {
  cursor: default;
}

.scribble-check--locked label {
  cursor: default;
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  .scribble-check__path {
    transition: none;
  }
}

.consent-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.consent-card__more {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--text-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.consent-card__more:hover {
  color: var(--text);
}

/* --------------------------------------------------------------------------
   LinkedIn button with profile-preview tooltip
   (adapted from Uiverse.io by vikas7754, tokenized for this design system)
   -------------------------------------------------------------------------- */
.li-wrap {
  --li: #3ea6ff;
  position: relative;
  display: inline-flex;
  justify-content: center;
}

[data-theme='light'] .li-wrap {
  --li: #0a66c2;
}

.li-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 10px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
  z-index: 20;
}

.li-wrap:hover .li-tip,
.li-wrap:focus-within .li-tip {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.li-profile {
  width: max-content;
  max-width: 250px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.8rem 0.95rem;
  box-shadow: var(--shadow-card);
  text-align: left;
}

.li-user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.li-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border: 1px solid var(--li);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--li) 12%, transparent);
  color: var(--li);
  font-family: var(--font-mono);
  font-weight: 700;
}

.li-id {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.li-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}

.li-sub {
  font-size: 0.75rem;
  color: var(--text-3);
}

.li-hint {
  margin: 0.55rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--border);
  font-size: 0.8rem;
  color: var(--text-2);
}

.li-link {
  position: relative;
  display: block;
  width: 52px;
  color: var(--li);
  text-decoration: none;
}

.li-layer {
  position: relative;
  display: block;
  width: 52px;
  height: 52px;
  transition: transform var(--dur-2) var(--ease);
}

.li-link:hover .li-layer,
.li-link:focus-visible .li-layer {
  transform: rotate(-35deg) skew(20deg);
}

.li-layer span {
  position: absolute;
  inset: 0;
  border: 1px solid var(--li);
  border-radius: var(--radius-sm);
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}

.li-face {
  display: grid;
  place-items: center;
  background: var(--bg-elev);
}

.li-face svg {
  width: 26px;
  height: 26px;
  fill: var(--li);
}

.li-link:hover .li-layer span:nth-child(1),
.li-link:focus-visible .li-layer span:nth-child(1) {
  opacity: 0.2;
}

.li-link:hover .li-layer span:nth-child(2),
.li-link:focus-visible .li-layer span:nth-child(2) {
  opacity: 0.4;
  transform: translate(5px, -5px);
}

.li-link:hover .li-layer span:nth-child(3),
.li-link:focus-visible .li-layer span:nth-child(3) {
  opacity: 0.6;
  transform: translate(10px, -10px);
}

.li-link:hover .li-layer span:nth-child(4),
.li-link:focus-visible .li-layer span:nth-child(4) {
  opacity: 0.8;
  transform: translate(15px, -15px);
}

.li-link:hover .li-layer span:nth-child(5),
.li-link:focus-visible .li-layer span:nth-child(5) {
  transform: translate(20px, -20px);
  box-shadow: -2px 2px 8px color-mix(in srgb, var(--li) 45%, transparent);
}

.li-label {
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  opacity: 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--li);
  white-space: nowrap;
  transition: bottom var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}

.li-link:hover .li-label,
.li-link:focus-visible .li-label {
  bottom: -32px;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .li-tip,
  .li-layer,
  .li-layer span,
  .li-label {
    transition: none;
  }

  .li-link:hover .li-layer,
  .li-link:focus-visible .li-layer,
  .li-link:hover .li-layer span,
  .li-link:focus-visible .li-layer span {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Icon defaults
   -------------------------------------------------------------------------- */
.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--fill {
  fill: currentColor;
  stroke: none;
}