:root {
  --connect-bg: #f5f3ff;
  --connect-bg-2: #fbfaff;
  --connect-paper: rgba(255, 255, 255, .72);
  --connect-paper-strong: #ffffff;
  --connect-ink: #12111c;
  --connect-muted: #6f6a91;
  --connect-muted-2: #918caf;
  --connect-line: rgba(18, 17, 28, .095);
  --connect-line-strong: rgba(18, 17, 28, .16);
  --connect-accent: #725cff;
  --connect-accent-2: #9a86ff;
  --connect-accent-soft: rgba(114, 92, 255, .11);
  --connect-green: #31d17a;
  --connect-radius: 18px;
  --connect-wrap: min(1160px, calc(100vw - 40px));
  --connect-ease: cubic-bezier(.16, 1, .3, 1);
  --connect-shadow: 0 24px 80px rgba(35, 30, 82, .13);
  --connect-shadow-soft: 0 14px 44px rgba(35, 30, 82, .10);
}

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

html {
  min-height: 100%;
  background: var(--connect-bg);
  color: var(--connect-ink);
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 14% 16%, rgba(114, 92, 255, .16), transparent 30vw),
    radial-gradient(circle at 84% 18%, rgba(255, 255, 255, .9), transparent 28vw),
    radial-gradient(circle at 86% 84%, rgba(114, 92, 255, .12), transparent 30vw),
    linear-gradient(135deg, #ffffff 0%, var(--connect-bg) 46%, #eeeaff 100%);
  color: var(--connect-ink);
  font-family: "Inter", "Angusu Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
a {
  font: inherit;
}

button {
  cursor: pointer;
}

img,
svg {
  display: block;
}

a {
  color: inherit;
}

.connect-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.connect-bg__mesh {
  position: absolute;
  inset: 0;
  opacity: .38;
  background-image:
    linear-gradient(rgba(18, 17, 28, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 17, 28, .035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 78%, transparent);
}

.connect-bg__orb {
  position: absolute;
  width: 34vw;
  min-width: 280px;
  aspect-ratio: 1;
  border-radius: 999px;
  border: 1px solid rgba(114, 92, 255, .08);
  filter: blur(.2px);
  opacity: .78;
  animation: connectOrbit 18s ease-in-out infinite;
}

.connect-bg__orb--one {
  left: -12vw;
  top: 16vh;
  background: radial-gradient(circle, rgba(255, 255, 255, .78), rgba(114, 92, 255, .12) 45%, transparent 69%);
}

.connect-bg__orb--two {
  right: -13vw;
  bottom: -9vh;
  background: radial-gradient(circle, rgba(255, 255, 255, .82), rgba(114, 92, 255, .13) 42%, transparent 70%);
  animation-delay: -8s;
}

.connect-bg__grain {
  position: absolute;
  inset: 0;
  opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 210px 210px;
}

.connect-nav,
.connect-shell,
.connect-dock {
  width: var(--connect-wrap);
  margin-inline: auto;
}

.connect-nav {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  z-index: 10;
}

.connect-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--connect-ink);
  text-decoration: none;
}

.connect-brand img {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  object-fit: cover;
  border: 1px solid rgba(18, 17, 28, .08);
  box-shadow: 0 14px 30px rgba(35, 30, 82, .1);
}

.connect-brand span {
  display: grid;
  gap: 2px;
}

.connect-brand strong {
  font-family: "Space Grotesk", "Angusu Space", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1;
  letter-spacing: -.02em;
}

.connect-brand small,
.connect-status,
.connect-kicker {
  color: var(--connect-muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.connect-nav__right {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.connect-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  border: 1px solid rgba(18, 17, 28, .08);
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(255, 255, 255, .58);
  min-height: 38px;
  border: 1px solid var(--connect-line);
  border-radius: 999px;
  padding: 0 13px;
  background: rgba(255, 255, 255, .58);
  backdrop-filter: blur(18px);
}

.connect-status i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--connect-green);
  box-shadow: 0 0 0 6px rgba(49, 209, 122, .14);
}

.connect-mini-button {
  min-height: 38px;
  border: 1px solid var(--connect-ink);
  border-radius: 999px;
  padding: 0 15px;
  background: var(--connect-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 850;
  transition:
    transform .25s var(--connect-ease),
    box-shadow .25s var(--connect-ease),
    background .25s var(--connect-ease);
}

.connect-mini-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(18, 17, 28, .18);
}

.connect-shell {
  min-height: calc(100svh - 68px);
  display: grid;
  align-items: center;
  padding: 10px 0 74px;
}

.connect-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 405px);
  align-items: center;
  gap: clamp(26px, 5vw, 62px);
}

.connect-copy {
  min-width: 0;
}

.connect-kicker {
  margin: 0 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.connect-kicker::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}

.connect-title {
  width: min-content;
  margin: 0;
  font-family: "Space Grotesk", "Angusu Space", system-ui, sans-serif;
  font-size: clamp(68px, 9.8vw, 138px);
  font-weight: 800;
  letter-spacing: -.078em;
  line-height: .805;
}

.connect-title__line {
  display: block;
  position: relative;
  white-space: nowrap;
  overflow: visible;
}

.connect-title__line--soft {
  margin-left: .08em;
  color: rgba(18, 17, 28, .62);
  -webkit-text-stroke: 1px rgba(18, 17, 28, .18);
}

.connect-title__line--accent {
  display: inline-block;
  margin-left: .025em;
  padding: 0 .1em .058em;
  color: var(--connect-accent);
}

.connect-title__line--accent svg {
  position: absolute;
  inset: -10% -10% -13% -10%;
  width: 121%;
  height: 122%;
  pointer-events: none;
  overflow: visible;
}

.connect-title__line--accent path {
  fill: none;
  stroke: var(--connect-accent);
  stroke-width: 6.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1180;
  stroke-dashoffset: 1180;
  opacity: .64;
  filter: drop-shadow(0 9px 18px rgba(114, 92, 255, .14));
}

.connect-title .char {
  display: inline-block;
  min-width: .08em;
  transform-origin: 50% 100%;
}

.connect-title .char--space {
  width: .18em;
}

.connect-lead {
  max-width: 610px;
  margin: 22px 0 0;
  color: var(--connect-muted);
  font-size: clamp(17px, 1.65vw, 20px);
  line-height: 1.45;
}

.connect-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px;
  margin-top: 24px;
}

.connect-button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--connect-ink);
  border-radius: 15px;
  padding: 0 17px;
  color: var(--connect-ink);
  background: transparent;
  text-decoration: none;
  font-weight: 900;
  overflow: hidden;
  transition:
    transform .25s var(--connect-ease),
    box-shadow .25s var(--connect-ease),
    background .25s var(--connect-ease),
    color .25s var(--connect-ease),
    border-color .25s var(--connect-ease);
}

.connect-button--ink {
  background: var(--connect-ink);
  color: #fff;
  box-shadow: 0 18px 42px rgba(18, 17, 28, .19);
}

.connect-button--paper {
  background: rgba(255, 255, 255, .58);
  backdrop-filter: blur(18px);
  border-color: var(--connect-line-strong);
}

.connect-button:hover {
  transform: translateY(-3px) rotate(-.28deg);
  box-shadow: 0 22px 48px rgba(35, 30, 82, .15);
}

.connect-button:active,
.connect-mini-button:active,
.connect-link-chip button:active,
.connect-card-switcher button:active {
  transform: translateY(0) scale(.98);
}

.connect-button__icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  transition: transform .24s var(--connect-ease);
}

.connect-button__icon svg,
.connect-link-chip svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.connect-button:hover .connect-button__icon {
  transform: translateX(2px) rotate(-4deg);
}

.connect-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}

.connect-proof a {
  --chip-delay: calc(var(--chip-index, 0) * 140ms);
  position: relative;
  isolation: isolate;
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: baseline;
  gap: 8px;
  min-height: 37px;
  padding: 8px 12px;
  border: 1px solid var(--connect-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  color: var(--connect-ink);
  text-decoration: none;
  font-weight: 850;
  overflow: hidden;
  transition:
    transform .22s var(--connect-ease),
    background .22s var(--connect-ease),
    border-color .22s var(--connect-ease),
    color .22s var(--connect-ease),
    box-shadow .22s var(--connect-ease);
}

.connect-proof a::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 0%, rgba(114, 92, 255, .12) 42%, rgba(255, 255, 255, .75) 50%, rgba(114, 92, 255, .12) 58%, transparent 100%);
  transform: translateX(-125%);
  opacity: 0;
}

.connect-proof a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 1px;
  background: currentColor;
  opacity: .18;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--connect-ease), opacity .28s var(--connect-ease);
}

.connect-proof a:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .84);
  border-color: rgba(114, 92, 255, .34);
  box-shadow: 0 14px 34px rgba(35, 30, 82, .09);
}

.connect-proof a:hover::after {
  opacity: .32;
  transform: scaleX(1);
}

.connect-proof a:hover::before {
  animation: connectChipGlint .86s var(--connect-ease);
}

.connect-proof span {
  font-size: 13px;
}

.connect-proof small {
  color: var(--connect-muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.connect-proof i {
  color: var(--connect-accent);
  font-style: normal;
  font-size: 11px;
  transform: translate(-2px, 1px);
  opacity: .5;
  transition: opacity .22s var(--connect-ease), transform .22s var(--connect-ease);
}

.connect-proof a:hover i {
  opacity: 1;
  transform: translate(1px, -1px);
}

html.js body.is-ready .connect-proof a::before {
  animation: connectChipHint 4.8s var(--connect-ease) var(--chip-delay) infinite;
}

.connect-socials {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  margin-top: 12px;
  max-width: 100%;
}

.connect-socials a {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--connect-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  color: var(--connect-ink);
  text-decoration: none;
  transition:
    transform .22s var(--connect-ease),
    background .22s var(--connect-ease),
    color .22s var(--connect-ease),
    border-color .22s var(--connect-ease);
}

.connect-socials a:hover {
  border-color: rgba(114, 92, 255, .38);
  background: var(--connect-accent-soft);
  color: var(--connect-accent);
  transform: translateY(-2px) rotate(-.4deg);
}

.connect-socials__icon {
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: var(--icon) center / contain no-repeat;
  -webkit-mask: var(--icon) center / contain no-repeat;
}

.connect-socials__icon--github {
  --icon: url("/assets/connect/social-github.svg");
}

.connect-socials__icon--linkedin {
  --icon: url("/assets/connect/social-linkedin.svg");
}

.connect-socials__icon--threads {
  --icon: url("/assets/connect/social-threads.svg");
}

.connect-socials__icon--instagram {
  --icon: url("/assets/connect/social-instagram.svg");
}

.connect-socials__icon--x {
  --icon: url("/assets/connect/social-x.svg");
}

.connect-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.connect-stage {
  min-height: 505px;
  position: relative;
  display: grid;
  place-items: center;
  perspective: 1100px;
}

.connect-stage__halo {
  position: absolute;
  width: min(470px, 82vw);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .92), rgba(114, 92, 255, .13) 52%, transparent 72%);
  filter: blur(.2px);
  box-shadow:
    inset 0 0 0 1px rgba(114, 92, 255, .06),
    0 32px 90px rgba(35, 30, 82, .13);
  animation: connectPulse 7s ease-in-out infinite;
}

.connect-card-switcher {
  position: absolute;
  z-index: 5;
  /* display: flex; */
  display: none;
  top: 16px;
  right: 12px;
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(18, 17, 28, .09);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 13px 34px rgba(35, 30, 82, .1);
  backdrop-filter: blur(18px);
}

.connect-card-switcher button {
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  padding: 0 10px;
  background: transparent;
  color: var(--connect-muted);
  font-size: 11px;
  font-weight: 900;
  transition: color .22s var(--connect-ease), background .22s var(--connect-ease), transform .22s var(--connect-ease);
}

.connect-card-switcher button:hover,
.connect-card-switcher button.is-active {
  background: var(--connect-ink);
  color: #fff;
}

.connect-float {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(114, 92, 255, .18);
  border-radius: 999px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, .74);
  color: var(--connect-ink);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: var(--connect-shadow-soft);
  backdrop-filter: blur(20px);
  animation: connectFloat 6.2s ease-in-out infinite;
}

.connect-float--one {
  top: 64px;
  left: 12px;
  rotate: -4deg;
}

.connect-float--two {
  right: -8px;
  top: 150px;
  rotate: 3deg;
  animation-delay: -1.8s;
}

.connect-float--three {
  left: 24px;
  bottom: 92px;
  rotate: 2deg;
  animation-delay: -3.4s;
}

.connect-qr-card {
  --shine-x: 50%;
  --shine-y: 0%;
  width: min(366px, 86vw);
  position: relative;
  z-index: 2;
  border: 1px solid rgba(18, 17, 28, .105);
  border-radius: 30px;
  padding: 14px;
  background:
    radial-gradient(circle at var(--shine-x) var(--shine-y), rgba(255, 255, 255, .98), transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(248, 246, 255, .72));
  box-shadow:
    0 30px 80px rgba(35, 30, 82, .15),
    0 1px 0 rgba(255, 255, 255, .9) inset;
  transform: rotate(-1deg);
  transform-style: preserve-3d;
  transition:
    transform .42s var(--connect-ease),
    box-shadow .3s var(--connect-ease),
    border-radius .32s var(--connect-ease),
    width .32s var(--connect-ease),
    padding .32s var(--connect-ease);
  overflow: hidden;
}

.connect-qr-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 28px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .78);
  transition: border-radius .32s var(--connect-ease);
}

.connect-qr-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .74), transparent);
  opacity: .36;
  transform: translateX(-120%);
  animation: connectCardGlint 6.8s ease-in-out infinite;
}

.connect-qr-card > * {
  position: relative;
  z-index: 1;
}

.connect-qr-card__top {
  min-height: 30px;
  /* display: flex; */
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--connect-muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.connect-qr-card__top span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  border: 1px solid rgba(18, 17, 28, .08);
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(255, 255, 255, .58);
}

.connect-qr-card__top span i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--connect-green);
  box-shadow: 0 0 0 5px rgba(49, 209, 122, .13);
}

.connect-qr-card__top b {
  font: inherit;
}

.connect-qr-card__top strong {
  color: var(--connect-ink);
  font-size: 10.5px;
  letter-spacing: -.01em;
  text-transform: none;
}

.connect-qr-wrap {
  position: relative;
  isolation: isolate;
  border-radius: 23px;
  padding: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 52%, rgba(114, 92, 255, .11), transparent 58%),
    linear-gradient(180deg, rgba(245, 243, 255, .94), rgba(255, 255, 255, .98)),
    linear-gradient(90deg, rgba(18, 17, 28, .035) 1px, transparent 1px),
    linear-gradient(rgba(18, 17, 28, .035) 1px, transparent 1px);
  background-size: auto, auto, 22px 22px, 22px 22px;
  border: 1px solid rgba(18, 17, 28, .08);
  transition: border-radius .32s var(--connect-ease), padding .32s var(--connect-ease);
}

.connect-qr-wrap img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  border-radius: 17px;
  background: #fff;
  border: 10px solid #fff;
  box-shadow:
    0 20px 54px rgba(35, 30, 82, .13),
    0 0 0 1px rgba(18, 17, 28, .055);
  transition:
    border-radius .32s var(--connect-ease),
    transform .32s var(--connect-ease),
    box-shadow .32s var(--connect-ease);
}

.connect-qr-aura {
  position: absolute;
  inset: 10%;
  z-index: 1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(114, 92, 255, .13), transparent 68%);
  filter: blur(18px);
  opacity: 0;
  transition: opacity .32s var(--connect-ease);
}

.connect-corner {
  position: absolute;
  z-index: 3;
  width: 39px;
  height: 39px;
  border-color: var(--connect-accent);
  border-style: solid;
  pointer-events: none;
  opacity: .78;
  transition:
    opacity .32s var(--connect-ease),
    transform .32s var(--connect-ease),
    border-radius .32s var(--connect-ease);
}

.connect-corner--tl {
  left: 10px;
  top: 10px;
  border-width: 3px 0 0 3px;
  border-radius: 14px 0 0 0;
}

.connect-corner--tr {
  right: 10px;
  top: 10px;
  border-width: 3px 3px 0 0;
  border-radius: 0 14px 0 0;
}

.connect-corner--br {
  right: 10px;
  bottom: 10px;
  border-width: 0 3px 3px 0;
  border-radius: 0 0 14px 0;
}

.connect-corner--bl {
  left: 10px;
  bottom: 10px;
  border-width: 0 0 3px 3px;
  border-radius: 0 0 0 14px;
}

.connect-scan-rail {
  position: absolute;
  z-index: 4;
  left: 16px;
  right: 16px;
  top: 16px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(114, 92, 255, .75), transparent);
  box-shadow: 0 0 22px rgba(114, 92, 255, .45);
  animation: connectScan 4.8s var(--connect-ease) infinite;
  opacity: .72;
}

.connect-qr-note {
  min-height: 38px;
  /* display: flex; */
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  border: 1px solid rgba(114, 92, 255, .13);
  border-radius: 999px;
  padding: 0 13px;
  background: rgba(114, 92, 255, .07);
  color: var(--connect-muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .04em;
}

.connect-qr-note i {
  color: var(--connect-accent);
  font-style: normal;
}

.connect-card-meta {
  /* display: grid; */
  display: none;
  grid-template-columns: 1.15fr .85fr;
  gap: 8px;
  margin-top: 9px;
  transition: opacity .24s var(--connect-ease), transform .24s var(--connect-ease);
}

.connect-card-meta div {
  border: 1px solid rgba(18, 17, 28, .075);
  border-radius: 17px;
  padding: 10px 11px;
  background: rgba(255, 255, 255, .56);
}

.connect-card-meta span {
  display: block;
  margin-bottom: 4px;
  color: var(--connect-muted-2);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.connect-card-meta strong {
  display: block;
  color: var(--connect-ink);
  font-size: 11.5px;
  line-height: 1.25;
}

.connect-link-chip {
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  border: 1px solid rgba(18, 17, 28, .08);
  border-radius: 17px;
  padding: 5px 5px 5px 12px;
  background: rgba(255, 255, 255, .68);
  color: var(--connect-ink);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 800;
  transition: border-radius .32s var(--connect-ease);
}

.connect-link-chip button {
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(18, 17, 28, .1);
  border-radius: 13px;
  background: var(--connect-ink);
  color: #fff;
  transition:
    transform .22s var(--connect-ease),
    background .22s var(--connect-ease),
    box-shadow .22s var(--connect-ease);
}

.connect-link-chip button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(18, 17, 28, .16);
}

.connect-qr-card[data-card-variant="pass"] {
  width: min(382px, 86vw);
  border-radius: 36px;
  padding: 12px;
  background:
    radial-gradient(circle at var(--shine-x) var(--shine-y), rgba(255, 255, 255, .98), transparent 34%),
    radial-gradient(circle at 12% 8%, rgba(114, 92, 255, .15), transparent 34%),
    linear-gradient(145deg, rgba(18, 17, 28, .04), rgba(255, 255, 255, .9) 38%, rgba(114, 92, 255, .13));
}

.connect-qr-card[data-card-variant="pass"]::before {
  border-radius: 34px;
  border-color: rgba(255, 255, 255, .9);
}

.connect-qr-card[data-card-variant="pass"] .connect-qr-card__top {
  padding: 2px 2px 0;
}

.connect-qr-card[data-card-variant="pass"] .connect-qr-wrap {
  border-radius: 31px;
  padding: 20px;
  background:
    radial-gradient(circle at 50% 50%, rgba(114, 92, 255, .16), transparent 64%),
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(244, 241, 255, .98));
}

.connect-qr-card[data-card-variant="pass"] .connect-qr-wrap img {
  border-radius: 25px;
  transform: scale(.965);
  box-shadow:
    0 28px 62px rgba(35, 30, 82, .14),
    0 0 0 1px rgba(18, 17, 28, .045);
}

.connect-qr-card[data-card-variant="pass"] .connect-qr-aura {
  opacity: 1;
}

.connect-qr-card[data-card-variant="pass"] .connect-corner {
  opacity: 0;
  transform: scale(.7);
}

.connect-qr-card[data-card-variant="pass"] .connect-scan-rail {
  left: 36px;
  right: 36px;
  opacity: .46;
}

.connect-qr-card[data-card-variant="pass"] .connect-card-meta {
  opacity: .84;
}

.connect-qr-card[data-card-variant="pass"] .connect-card-meta div,
.connect-qr-card[data-card-variant="pass"] .connect-link-chip,
.connect-qr-card[data-card-variant="pass"] .connect-qr-note {
  border-radius: 999px;
}

.connect-dock {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: auto;
  max-width: calc(100vw - 24px);
  display: flex;
  gap: 6px;
  border: 1px solid rgba(18, 17, 28, .1);
  border-radius: 999px;
  padding: 6px;
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 16px 44px rgba(35, 30, 82, .14);
  backdrop-filter: blur(22px);
}

.connect-dock a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 13px;
  color: var(--connect-muted);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 850;
  transition:
    background .22s var(--connect-ease),
    color .22s var(--connect-ease),
    transform .22s var(--connect-ease);
}

.connect-dock a:hover {
  background: var(--connect-ink);
  color: #fff;
  transform: translateY(-1px);
}

.connect-toast {
  position: fixed;
  z-index: 50;
  left: 50%;
  top: 18px;
  transform: translate(-50%, -14px);
  opacity: 0;
  pointer-events: none;
  border: 1px solid rgba(18, 17, 28, .12);
  border-radius: 999px;
  padding: 11px 14px;
  background: rgba(18, 17, 28, .92);
  color: #fff;
  box-shadow: 0 16px 34px rgba(18, 17, 28, .2);
  font-size: 13px;
  font-weight: 850;
  transition:
    opacity .24s var(--connect-ease),
    transform .24s var(--connect-ease);
}

.connect-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

body.is-confirming .connect-qr-card {
  animation: connectConfirm .72s var(--connect-ease);
}

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .78s var(--connect-ease),
    transform .78s var(--connect-ease);
  transition-delay: var(--reveal-delay, 0ms);
}

html.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

html.js .connect-title .char {
  opacity: 0;
  transform: translateY(.42em) rotate(2deg);
  filter: blur(6px);
  transition:
    opacity .7s var(--connect-ease),
    transform .7s var(--connect-ease),
    filter .7s var(--connect-ease);
  transition-delay: calc(var(--line-index, 0) * 120ms + var(--char-index, 0) * 18ms + 90ms);
}

html.js body.is-ready .connect-title .char {
  opacity: 1;
  transform: translateY(0) rotate(0);
  filter: blur(0);
}

html.js body.is-ready .connect-title__line--accent path {
  animation: connectDraw 1.15s var(--connect-ease) .72s forwards;
}

@keyframes connectDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes connectScan {
  0%, 18% {
    transform: translateY(0);
    opacity: 0;
  }

  28% {
    opacity: .78;
  }

  72% {
    opacity: .78;
  }

  84%, 100% {
    transform: translateY(calc(100% + 265px));
    opacity: 0;
  }
}

@keyframes connectCardGlint {
  0%, 38% {
    transform: translateX(-120%);
  }

  55%, 100% {
    transform: translateX(120%);
  }
}

@keyframes connectChipHint {
  0%, 56%, 100% {
    opacity: 0;
    transform: translateX(-125%);
  }

  64% {
    opacity: .85;
  }

  78% {
    opacity: 0;
    transform: translateX(125%);
  }
}

@keyframes connectChipGlint {
  0% {
    opacity: 0;
    transform: translateX(-125%);
  }

  35% {
    opacity: .85;
  }

  100% {
    opacity: 0;
    transform: translateX(125%);
  }
}

@keyframes connectFloat {
  0%, 100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -10px;
  }
}

@keyframes connectPulse {
  0%, 100% {
    transform: scale(1);
    opacity: .9;
  }

  50% {
    transform: scale(1.035);
    opacity: .72;
  }
}

@keyframes connectOrbit {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  50% {
    transform: translate3d(24px, -18px, 0) rotate(8deg);
  }
}

@keyframes connectConfirm {
  0%, 100% {
    transform: rotate(-1deg) scale(1);
  }

  45% {
    transform: rotate(1.3deg) scale(1.025);
  }
}

@media (min-width: 981px) {
  body {
    min-height: 100svh;
    overflow: hidden;
  }

  .connect-dock {
    opacity: .96;
  }
}

@media (max-height: 820px) and (min-width: 981px) {
  .connect-nav {
    min-height: 60px;
  }

  .connect-brand img {
    width: 38px;
    height: 38px;
    border-radius: 14px;
  }

  .connect-shell {
    min-height: calc(100svh - 60px);
    padding: 0 0 58px;
  }

  .connect-hero {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 372px);
    gap: clamp(22px, 4vw, 52px);
  }

  .connect-kicker {
    margin-bottom: 10px;
  }

  .connect-title {
    font-size: clamp(58px, 8.8vw, 116px);
  }

  .connect-lead {
    margin-top: 18px;
    max-width: 570px;
    font-size: clamp(16px, 1.45vw, 18px);
    line-height: 1.42;
  }

  .connect-actions {
    margin-top: 20px;
  }

  .connect-button {
    min-height: 46px;
  }

  .connect-proof {
    margin-top: 15px;
  }

  .connect-socials {
    margin-top: 10px;
  }

  .connect-stage {
    min-height: 448px;
  }

  .connect-stage__halo {
    width: min(420px, 82vw);
  }

  .connect-card-switcher {
    top: 2px;
  }

  .connect-qr-card {
    width: min(338px, 84vw);
    padding: 12px;
    border-radius: 27px;
  }

  .connect-qr-card[data-card-variant="pass"] {
    width: min(352px, 84vw);
  }

  .connect-qr-wrap {
    padding: 14px;
  }

  .connect-card-meta {
    display: none;
  }

  .connect-link-chip {
    min-height: 40px;
  }

  .connect-dock a {
    min-height: 33px;
    font-size: 12px;
  }
}

@media (max-height: 700px) and (min-width: 981px) {
  .connect-status {
    display: none;
  }

  .connect-kicker,
  .connect-socials {
    display: none;
  }

  .connect-title {
    font-size: clamp(52px, 8vw, 98px);
  }

  .connect-lead {
    max-width: 540px;
    font-size: 16px;
  }

  .connect-stage {
    min-height: 388px;
  }

  .connect-card-switcher {
    top: -6px;
  }

  .connect-qr-card {
    width: min(305px, 82vw);
  }

  .connect-qr-card[data-card-variant="pass"] {
    width: min(318px, 82vw);
  }
}

@media (max-width: 980px) {
  :root {
    --connect-wrap: min(100vw - 28px, 700px);
  }

  .connect-nav {
    min-height: 70px;
  }

  .connect-shell {
    min-height: auto;
    padding: 16px 0 106px;
  }

  .connect-hero {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .connect-copy {
    display: grid;
    justify-items: start;
  }

  .connect-title {
    font-size: clamp(64px, 19vw, 116px);
  }

  .connect-lead {
    max-width: 560px;
    margin-top: 22px;
  }

  .connect-stage {
    min-height: min(510px, 76vh);
    margin-top: -4px;
  }

  .connect-card-switcher {
    top: 18px;
    right: 50%;
    transform: translateX(50%);
  }
}

@media (max-width: 620px) {
  :root {
    --connect-wrap: calc(100vw - 24px);
  }

  .connect-nav {
    min-height: 64px;
  }

  .connect-brand span {
    display: none;
  }

  .connect-status {
    display: none;
  }

  .connect-mini-button {
    min-height: 37px;
    padding-inline: 13px;
  }

  .connect-shell {
    padding-top: 6px;
  }

  .connect-kicker {
    margin-bottom: 12px;
    font-size: 10px;
  }

  .connect-title {
    font-size: clamp(48px, 17.6vw, 86px);
    letter-spacing: -.082em;
  }

  .connect-title__line--soft {
    margin-left: .04em;
  }

  .connect-lead {
    margin-top: 18px;
    font-size: 16.5px;
  }

  .connect-actions {
    width: 100%;
    margin-top: 21px;
  }

  .connect-button {
    flex: 1 1 150px;
    min-height: 50px;
    padding-inline: 14px;
  }

  .connect-proof {
    gap: 7px;
  }

  .connect-proof a {
    padding: 7px 10px;
  }

  .connect-proof span {
    font-size: 12px;
  }

  .connect-proof small {
    display: none;
  }

  .connect-stage {
    min-height: 440px;
  }

  .connect-card-switcher {
    top: 4px;
  }

  .connect-qr-card {
    width: min(334px, 92vw);
    border-radius: 24px;
    padding: 12px;
  }

  .connect-qr-card::before {
    border-radius: 22px;
  }

  .connect-qr-card__top {
    font-size: 10px;
  }

  .connect-qr-card__top strong {
    display: none;
  }

  .connect-qr-wrap {
    padding: 13px;
    border-radius: 20px;
  }

  .connect-card-meta {
    grid-template-columns: 1fr;
  }

  .connect-card-meta div:nth-child(2) {
    display: none;
  }

  .connect-qr-card[data-card-variant="pass"] {
    width: min(342px, 92vw);
  }

  .connect-qr-card[data-card-variant="pass"] .connect-qr-wrap {
    padding: 18px;
  }

  .connect-dock {
    max-width: calc(100vw - 18px);
  }

  .connect-dock a {
    min-height: 37px;
    padding-inline: 10px;
    font-size: 11.5px;
  }
}

@media (max-width: 380px) {
  .connect-dock a {
    padding-inline: 8px;
    font-size: 11px;
  }

  .connect-socials a {
    width: 39px;
    height: 39px;
  }

  .connect-card-meta {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }

  html.js [data-reveal],
  html.js .connect-title .char {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .connect-title__line--accent path {
    stroke-dashoffset: 0;
  }
}