/* Homepage SPA — Drop hub parity (loads after Tailwind + drops.css + marketplace.css) v29 */

#root .min-h-screen.bg-black {
  background: transparent !important;
}

.vk-home-hero.hero {
  padding-top: 0 !important;
  padding-inline: 0 !important;
  padding-bottom: var(--vk-section-y, clamp(3.5rem, 7vw, 6rem)) !important;
  text-align: inherit !important;
}

.vk-home-header .brand .text-xl {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

#root .gradient-button,
#root a.gradient-button,
#root button.gradient-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(168, 85, 247, 0.5) !important;
  background: linear-gradient(90deg, #7c3aed, #0d9488) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

#root .gradient-button:hover,
#root a.gradient-button:hover {
  filter: brightness(1.08);
  color: #fff !important;
}

.vk-home-header.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

.vk-home-header .wrap {
  padding-top: 10px;
  padding-bottom: 10px;
}

.vk-home-header .nav--hub button {
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 8px;
  transition: color 0.15s ease;
}

.vk-home-header .nav--hub button:hover {
  color: var(--accent-teal);
  background: transparent;
}

.vk-home-header .brand.vk-brand-hit {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
}

.vk-home-header .brand img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.vk-home-hero {
  background: transparent !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* Unified page gutters (hero + app screens use --vk-page-* from hub block) */
#root::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60rem 32rem at 18% 8%, rgba(168, 85, 247, 0.11), transparent 62%),
    radial-gradient(48rem 26rem at 88% 34%, rgba(45, 212, 191, 0.07), transparent 60%),
    radial-gradient(56rem 30rem at 12% 78%, rgba(236, 72, 153, 0.05), transparent 62%);
}

#root > * {
  position: relative;
  z-index: 1;
}

.vk-home-header .wrap {
  max-width: var(--vk-page-max, 72rem) !important;
  padding-inline: var(--vk-page-gutter, clamp(1.25rem, 4vw, 2rem)) !important;
}

#root #privacy > .relative.z-10,
#root #compare > .relative.z-10,
#root .site-footer > div {
  max-width: var(--vk-page-max, 72rem) !important;
  margin-inline: auto !important;
  padding-inline: var(--vk-page-gutter, clamp(1.25rem, 4vw, 2rem)) !important;
}

#root #pricing > .relative.z-10,
#root #site-hub > .relative.z-10,
#root #typing > .relative.z-10,
#root #faq > .relative.z-10,
#root #download > .relative.z-10,
#root #ios-waitlist > div {
  padding-inline: var(--vk-page-gutter, clamp(1.25rem, 4vw, 2rem)) !important;
}

#root section > .absolute.inset-0.bg-gradient-to-b {
  background: linear-gradient(180deg, transparent, rgba(88, 28, 135, 0.06), transparent) !important;
}

#root section > .absolute.rounded-full[class*="blur-"] {
  display: none !important;
}

.vk-hero-phone-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: calc(var(--vk-phone-w, 17rem) * 2.4);
  height: calc(var(--vk-phone-h, 26rem) * 1.05);
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(168, 85, 247, 0.18) 0%,
    rgba(45, 212, 191, 0.08) 42%,
    transparent 72%
  );
}

.vk-hero-phone-stage .vk-hero-phone {
  position: relative;
  z-index: 1;
}

.vk-home-hero .absolute.inset-0.bg-gradient-to-b,
.vk-home-hero .absolute.top-1\/4,
.vk-home-hero .absolute.bottom-1\/4 {
  display: none !important;
}

.vk-hero-phone-stage {
  position: relative;
  width: var(--vk-phone-w);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1024px) {
  .vk-hero-phone-stage {
    margin-left: auto;
    margin-right: 0;
  }
}

/* Hero motion — Apple-style ease (iphone-duo: content rises in, ambient glow breathes) */
@keyframes vk-rise {
  from {
    transform: translateY(14px);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes vk-breathe {
  0%,
  100% {
    opacity: 0.85;
  }

  50% {
    opacity: 1;
  }
}

@keyframes vk-emoji-settle {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.92);
  }

  100% {
    opacity: 0.9;
    transform: translateY(0) scale(1);
  }
}

@keyframes vk-emoji-drift {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-0.25em);
  }
}

.vk-hero-copy-inner > * {
  opacity: 1;
  animation: vk-rise 0.75s var(--vk-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) backwards;
}

.vk-hero-copy-inner > *:nth-child(1) {
  animation-delay: 0.05s;
}

.vk-hero-copy-inner > *:nth-child(2) {
  animation-delay: 0.12s;
}

.vk-hero-copy-inner > *:nth-child(3) {
  animation-delay: 0.19s;
}

.vk-hero-copy-inner > *:nth-child(n + 4) {
  animation-delay: 0.26s;
}

.vk-hero-phone-stage {
  opacity: 1;
  animation: vk-rise 0.9s var(--vk-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 0.15s backwards;
}

html.vk-motion-on .vk-home-hero::before,
html.vk-motion-on .vk-home-hero::after {
  animation: vk-breathe 14s ease-in-out 2;
}

.vk-hero-copy-col,
.vk-hero-phone-col {
  position: relative;
  overflow: visible;
}

.vk-hero-copy-inner,
.vk-hero-phone-stage {
  position: relative;
  z-index: 1;
}

/* Decorative emojis — one inject in layout patch; anchored to columns / phone box */
.vk-home-hero > .vk-hero-emoji-layer {
  display: none !important;
}

.vk-hero-emoji-zone {
  position: absolute;
  pointer-events: none;
  overflow: visible;
  --vk-emoji: clamp(0.85rem, calc(var(--vk-phone-w, 17rem) * 0.085), 1.75rem);
  --vk-emoji-gap: calc(var(--vk-emoji) * 0.45);
}

.vk-hero-emoji-zone--copy {
  inset: 0;
  z-index: 0;
}

.vk-hero-emoji-zone--phone {
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--vk-phone-w, 17rem);
  max-width: 100%;
  transform: translateX(-50%);
  z-index: 2;
}

.vk-hero-emoji-zone .vk-hero-emoji-slot {
  position: absolute;
  font-size: var(--vk-emoji);
  line-height: 1;
  opacity: 0;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.55));
  animation:
    vk-emoji-settle 0.85s cubic-bezier(0.16, 1, 0.3, 1) both,
    vk-emoji-drift 7s ease-in-out 1.85s 3;
  white-space: nowrap;
}

.vk-hero-emoji {
  display: none;
}

.vk-hero-emoji--sparkle {
  display: none;
  top: 4%;
  left: 0;
}

.vk-hero-emoji--bolt-mobile {
  display: block;
  top: 5%;
  right: 0;
  left: auto;
}

.vk-hero-emoji--paint-tablet {
  display: none;
  bottom: 8%;
  left: 0;
}

.vk-hero-emoji--bolt-desktop {
  display: none;
  top: 38%;
  right: 0;
}

.vk-hero-emoji--paint-desktop,
.vk-hero-emoji--paint-mobile,
.vk-hero-emoji--heart {
  display: none;
}

.vk-hero-emoji-zone--phone .vk-hero-emoji--paint-desktop,
.vk-hero-emoji-zone--phone .vk-hero-emoji--paint-mobile {
  top: 8%;
  right: calc(100% + var(--vk-emoji-gap));
  left: auto;
}

.vk-hero-emoji-zone--phone .vk-hero-emoji--heart {
  bottom: 10%;
  left: calc(100% + var(--vk-emoji-gap));
  top: auto;
}

@media (min-width: 640px) {
  .vk-hero-emoji--sparkle {
    display: block;
  }

  .vk-hero-emoji-zone--phone .vk-hero-emoji--heart {
    display: block;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .vk-hero-emoji--bolt-mobile {
    display: none !important;
  }

  .vk-hero-emoji--paint-tablet {
    display: block;
  }

  .vk-hero-emoji-zone--phone .vk-hero-emoji--paint-mobile {
    display: block;
  }
}

@media (min-width: 1024px) {
  .vk-hero-emoji-zone--copy {
    inset: 0 calc(-1 * var(--vk-page-gutter, 1.25rem));
  }

  .vk-hero-emoji-zone--phone {
    left: auto;
    right: 0;
    transform: none;
  }

  .vk-hero-emoji--bolt-mobile,
  .vk-hero-emoji--paint-tablet {
    display: none !important;
  }

  .vk-hero-emoji--bolt-desktop {
    display: block;
  }

  .vk-hero-emoji-zone--phone .vk-hero-emoji--paint-desktop {
    display: block;
  }

  .vk-hero-emoji-zone--phone .vk-hero-emoji--paint-mobile {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .vk-hero-emoji-zone--phone .vk-hero-emoji--paint-mobile {
    display: block;
    top: -0.3em;
    right: calc(100% - 0.35em);
  }

  .vk-hero-emoji-zone--phone .vk-hero-emoji--heart {
    bottom: -0.2em;
    left: calc(100% - 0.35em);
  }
}

/* Scroll reveals — content visible by default; motion is opt-in via .vk-motion-on */
.vk-scroll-reveal {
  opacity: 1;
  transform: none;
}

html.vk-motion-on .vk-scroll-reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.85s var(--vk-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    transform 0.85s var(--vk-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

html.vk-motion-on .vk-scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .vk-hero-copy-inner > *,
  .vk-hero-phone-stage,
  .vk-home-hero::before,
  .vk-home-hero::after,
  #hero::before,
  .vk-hero-emoji-zone .vk-hero-emoji-slot,
  .vk-scroll-reveal,
  .vibekey-compare-art__item.vk-scroll-reveal {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.vk-home-hero::before,
.vk-home-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.vk-home-hero::before {
  inset: -6rem 0 auto 0;
  height: 28rem;
  background:
    radial-gradient(60% 100% at 28% 0%, rgba(168, 85, 247, 0.2), transparent 70%),
    radial-gradient(45% 90% at 82% 12%, rgba(45, 212, 191, 0.1), transparent 72%);
}

.vk-home-hero::after {
  inset: 2rem 0 auto 0;
  height: 14rem;
  background: radial-gradient(50% 80% at 78% 20%, rgba(45, 212, 191, 0.1), transparent 70%);
}

.vk-home-hero .gradient-text,
.vk-home-hero .gradient-text-teal,
.vk-home-hero .animate-gradient {
  background: linear-gradient(90deg, var(--accent-teal), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: none;
}

.vk-home-hero [class*="bg-purple-500/20"],
.vk-home-hero [class*="bg-green-500/20"],
.vk-home-hero [class*="bg-teal-500/20"] {
  border-radius: 999px !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #d1d5db !important;
}

#root section.bg-black,
#root main section.bg-black {
  background: transparent !important;
}

#root .site-footer {
  background: transparent !important;
  border-top-color: var(--border) !important;
}

#root .site-footer a,
#root .site-footer button {
  transition: color 0.15s ease;
}

#root .site-footer a.text-gray-400:hover,
#root .site-footer button.text-gray-400:hover {
  color: var(--accent-teal) !important;
}

#root #site-hub {
  border-top-color: var(--border) !important;
}

#vibe-cards,
#privacy,
#faq {
  scroll-margin-top: 5.5rem;
}

/* Hero phone — chat below avatar header + divider, above keyboard */
.vk-home-hero .vk-hero-phone .vk-hero-phone-header,
.vk-home-hero .vk-hero-phone .absolute.top-12.border-b {
  z-index: 8;
  background: #030712;
}

.vk-home-hero .vk-hero-phone .vk-hero-chat.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0 !important;
}

.vk-home-hero .vk-hero-phone .vk-hero-chat.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0 !important;
}

.vk-home-hero .vk-hero-phone .vk-hero-chat,
.vk-home-hero .vk-hero-phone .vk-hero-chat {
  top: 3.05rem !important;
  left: 0.45rem !important;
  right: 0.45rem !important;
  bottom: 41% !important;
  max-height: none !important;
  height: auto !important;
  padding-top: 0.35rem;
  padding-bottom: 0.15rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.28rem;
  z-index: 2;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 96%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 96%, transparent 100%);
}

.vk-home-hero .vk-hero-phone .vk-hero-chat > div {
  flex-shrink: 0;
}

.vk-home-hero .vk-hero-phone .vk-hero-chat p {
  font-size: 0.62rem !important;
  line-height: 1.22 !important;
}

.vk-home-hero .vk-hero-phone #vibekey-hero-keyboard {
  z-index: 6;
}

/* In-phone Vibe Cards — free-floating over chat (absolute slots, not a row) */
.vk-hero-vibe-cards {
  position: absolute;
  inset: 0;
  z-index: 9;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.vk-hero-vibe-cards--visible {
  opacity: 1;
}

.vk-hero-vibe-card-slot {
  position: absolute;
  will-change: transform;
  font-size: clamp(3.75rem, 22cqi, 5.375rem);
}

.vk-hero-vibe-cards:not(.vk-hero-vibe-cards--visible) .vk-hero-vibe-card-slot {
  animation-play-state: paused;
}

.vk-hero-vibe-card-slot--float {
  left: 14%;
  bottom: 41%;
  transform: translateY(28%) rotate(-6deg) scale(0.9);
  opacity: 0;
}

.vk-hero-vibe-card-slot--spin {
  right: 14%;
  bottom: 44%;
  transform: translateY(28%) rotate(6deg) scale(0.9);
  opacity: 0;
}

.vk-hero-vibe-cards--visible .vk-hero-vibe-card-slot--float {
  animation: vk-hero-peek-in 0.68s var(--vk-ease-snap, cubic-bezier(0.34, 1.56, 0.64, 1)) forwards;
}

.vk-hero-vibe-cards--visible .vk-hero-vibe-card-slot--spin {
  animation: vk-hero-peek-in 0.68s var(--vk-ease-snap, cubic-bezier(0.34, 1.56, 0.64, 1)) 0.12s forwards;
}

@keyframes vk-hero-peek-in {
  from {
    transform: translateY(28%) rotate(-6deg) scale(0.88);
    opacity: 0.5;
  }

  to {
    transform: translateY(0) rotate(-3deg) scale(1);
    opacity: 1;
  }
}

.vk-hero-vibe-cards--visible .vk-hero-vibe-card-slot--spin {
  animation-name: vk-hero-peek-in-alt;
}

@keyframes vk-hero-peek-in-alt {
  from {
    transform: translateY(28%) rotate(6deg) scale(0.88);
    opacity: 0.5;
  }

  to {
    transform: translateY(0) rotate(3deg) scale(1);
    opacity: 1;
  }
}

.vk-hero-phone-screen-inner.vk-hero-shutter::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.42);
  animation: vk-hero-shutter 0.22s ease-out forwards;
}

@keyframes vk-hero-shutter {
  from {
    opacity: 0.55;
  }

  to {
    opacity: 0;
  }
}

.vk-hero-vibe-cards--visible .vk-hero-vibe-card-figure {
  animation: vk-hero-captured 0.45s var(--vk-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 0.35s both;
}

@keyframes vk-hero-captured {
  0%,
  100% {
    transform: scale(1);
  }

  40% {
    transform: scale(0.96);
  }
}

.vk-home-hero .vk-hero-phone {
  container-type: inline-size;
  container-name: vk-hero-phone;
}

.vk-hero-vibe-card-figure.home-drop-card {
  width: clamp(3.75rem, 22cqi, 5.375rem);
  max-width: 42%;
  font-size: 1em;
  margin: 0;
  padding: 0;
  border-radius: 0.45rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #030712;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
}

.vk-hero-vibe-cards .home-drop-card__image {
  width: 100%;
  display: block;
  aspect-ratio: 778 / 1024;
  object-fit: contain;
  object-position: center;
  background: #030712;
}

@media (prefers-reduced-motion: reduce) {
  .vk-hero-vibe-cards {
    transition: none;
  }

  .vk-hero-vibe-card-slot--float,
  .vk-hero-vibe-card-slot--spin {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .vk-hero-phone-screen-inner.vk-hero-shutter::after {
    display: none !important;
  }
}

.vk-home-header .vk-home-nav-toggle {
  display: none;
  appearance: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
}

.vk-home-header .nav--hub {
  flex: 1 1 auto;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.vk-home-header .wrap {
  position: relative;
  flex-wrap: wrap;
}

.vk-home-header .vk-home-nav-toggle {
  border: 1px solid transparent;
}

.vk-home-header .vk-home-nav-toggle:hover {
  border-color: var(--border);
}

.vk-home-header .vk-home-menu {
  width: 100%;
  flex-basis: 100%;
  order: 3;
  padding: 8px 0 16px;
  background: rgba(0, 0, 0, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.vk-home-header .vk-home-menu > div {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.vk-home-header .vk-home-menu button {
  appearance: none;
  width: 100%;
  text-align: left;
  padding: 12px 4px;
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0 !important;
  background: transparent;
  color: #e5e7eb;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}

.vk-home-header .vk-home-menu button:hover {
  color: var(--accent-teal);
  background: rgba(255, 255, 255, 0.04);
}

.vk-home-header .vk-home-menu .flex.flex-col.gap-2.mt-2 {
  margin-top: 14px !important;
  padding: 0 4px;
  gap: 10px !important;
}

.vk-home-header .vk-home-menu .play-store-cta,
.vk-home-header .vk-home-menu .header-signin {
  width: 100%;
  justify-content: center;
  text-align: center;
  margin: 0;
}

@media (max-width: 1023px) {
  .vk-home-header .nav--hub,
  .vk-home-header .vk-home-actions {
    display: none !important;
  }

  .vk-home-header .vk-home-nav-toggle {
    display: inline-flex;
  }
}

@media (min-width: 1024px) {
  /* Flatten inner row so nav + CTAs participate in .wrap flex (hub parity) */
  .vk-home-header .wrap > div:first-of-type {
    display: contents;
  }

  .vk-home-header .nav--hub {
    display: flex !important;
    flex: 1 1 auto;
    justify-content: center;
    width: auto !important;
    min-width: 0;
    order: 0 !important;
  }

  .vk-home-header .vk-home-actions {
    display: flex !important;
    flex-shrink: 0;
  }

  .vk-home-header .vk-home-menu {
    display: none !important;
  }
}



/* z-index for hero content stack — see emoji layer block above */

/* Hero phone keyboard — same device preview + press overlay on all viewports */
.vk-home-hero #vibekey-hero-keyboard {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 980;
  height: auto;
  min-height: 0;
  max-height: none;
  flex: 0 0 auto;
}

.vk-home-hero #vibekey-hero-keyboard .vault-theme-preview-anim,
.vk-home-hero #vibekey-hero-keyboard .vault-device-press-canvas,
.vk-home-hero #vibekey-hero-keyboard canvas.vault-theme-preview-anim {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

.vk-home-hero #vibekey-hero-keyboard.store-card-preview--device,
.vk-home-hero #vibekey-hero-keyboard.store-card-preview--canvas {
  width: 100%;
}

.vk-home-hero #vibekey-hero-keyboard img,
.vk-home-hero #vibekey-hero-keyboard canvas,
.vk-home-hero #vibekey-hero-keyboard svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

/* vibekey-layout-rhythm:start */
:root{
  --vk-header-offset:clamp(4.25rem,11vw,5rem);
  --vk-sticky-bar-h:7.5rem;
  --vk-pill-radius:999px;
  --vk-pill-pad-y:.75rem;
  --vk-pill-pad-x:1rem;
  --vk-pill-border:rgba(255,255,255,.12);
  --vk-pill-bg:rgba(255,255,255,.04);
  --vk-pill-muted:#9ca3af;
  --vk-pill-teal-border:rgba(45,212,191,.45);
  --vk-pill-teal-bg:rgba(45,212,191,.12);
  --vk-pill-teal-text:#99f6e4;
}
@media (max-width:767px){:root{--vk-sticky-bar-h:8.75rem}}
.vk-seo-copy-mobile{display:none!important}
.vk-seo-copy-desktop{display:block}
@media (max-width:767px){.vk-seo-copy-desktop{display:none!important}.vk-seo-copy-mobile{display:block!important}.vk-hero-market-link.vk-copy-desktop{display:none!important}}
@media (min-width:768px){.vk-hero-market-link.vk-copy-mobile{display:none!important}}
#hero .text-teal-400.text-sm.font-medium.tracking-wide.uppercase{
  font-size:.75rem!important;letter-spacing:.14em!important;text-transform:uppercase
}
@media (max-height:520px) and (orientation:landscape){
  .vk-home-hero .vk-hero-phone-stage{--vk-vh-budget:min(42dvh,220px)!important}
}
.vk-section-y{padding-top:var(--vk-section-y)!important;padding-bottom:var(--vk-section-y)!important}
@media (max-width:767px){
  .vk-hero-trust-strip.vk-copy-mobile{
    display:flex!important;flex-wrap:wrap;justify-content:center;gap:.5rem .65rem;
    margin-top:1rem;margin-inline:auto;max-width:32rem
  }
}
.vk-hero-trust-chip{font-size:.8125rem!important}
#root main.vk-main-pad{padding-bottom:calc(var(--vk-sticky-bar-h) + .5rem)!important}
#root main > section:not(#hero){
  padding-top:var(--vk-section-y)!important;padding-bottom:var(--vk-section-y)!important
}
.vk-home-hero{padding-top:var(--vk-header-offset)!important;padding-bottom:clamp(1rem,3vw,2rem)!important}
#official-drop.vk-home-drop-hub{padding-top:var(--vk-section-y)!important;padding-bottom:var(--vk-section-y)!important}
.vk-home-drop-hub .vk-home-drop-headline{font-size:clamp(1.35rem,5vw,2.75rem)!important}
@media (max-width:767px){
  .vk-home-hero .vk-hero-phone-stage,.vk-home-hero .vk-hero-phone{
    --vk-vh-budget:min(40dvh,40svh,300px)
  }
}
@media (max-width:380px){
  .vk-home-hero .vk-hero-phone-stage,.vk-home-hero .vk-hero-phone{
    --vk-vh-budget:min(36dvh,36svh,280px)
  }
}
@media (max-width:1023px){
  .vk-home-hero .grid.lg\:grid-cols-2{row-gap:1rem!important;column-gap:1rem!important}
}
@media (max-width:767px){
  .vk-hero-actions .vk-hero-play-pill,.vk-hero-actions .vk-hero-market-link{width:100%!important}
}
@media (min-width:768px){
  .vk-hero-actions{align-items:center!important;flex-direction:row!important;flex-wrap:wrap!important}
  .vk-hero-actions .vk-hero-play-pill,.vk-hero-actions .vk-hero-market-link{
    width:auto!important;flex:0 0 auto!important;margin-top:0!important
  }
}
.vk-hero-actions .vk-hero-play-pill,.vk-hero-actions .vk-hero-market-link{
  box-sizing:border-box!important;height:auto!important;min-height:3rem!important;
  border-radius:var(--vk-pill-radius,999px)!important;
  font-weight:700!important;line-height:1.2!important;
  padding:var(--vk-pill-pad-y) var(--vk-pill-pad-x)!important
}
.vk-hero-actions .vk-hero-play-pill{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  font-size:1rem!important;min-height:3.125rem!important;
  padding:calc(var(--vk-pill-pad-y) + .0625rem) calc(var(--vk-pill-pad-x) + .125rem)!important
}
.vk-hero-actions .vk-hero-market-link{font-size:.875rem!important;font-weight:600!important}
@media (hover:hover){
  .vk-hero-actions .vk-hero-play-pill,.vk-hero-actions .vk-hero-market-link{
    transition:transform .15s ease,opacity .15s ease,border-color .15s ease,background .15s ease!important
  }
  .vk-hero-actions .vk-hero-play-pill:hover{transform:scale(1.05)!important}
}
@media (prefers-reduced-motion:reduce){
  .vk-hero-actions .vk-hero-play-pill:hover{transform:none!important}
}
.vk-hero-market-link:focus-visible{outline:2px solid rgba(45,212,191,.85)!important;outline-offset:2px!important}
@media (max-height:640px){
  .vk-home-hero .vk-hero-phone-stage,.vk-home-hero .vk-hero-phone{
    --vk-vh-budget:min(38dvh,38svh,280px)!important
  }
}
#root [class*="fixed"][class*="bottom-0"][class*="z-40"] .max-w-7xl{
  max-width:var(--vk-page-max)!important;margin-inline:auto!important;padding-inline:var(--vk-page-gutter)!important
}
#root main > section > .relative.z-10{padding-inline:var(--vk-page-gutter)!important}
#root .site-footer > div{padding-block:clamp(1.75rem,4vw,2.5rem)!important}
.vk-home-header .nav--hub a,.vk-home-header .nav--hub button{padding-inline:0!important}
html{overflow-x:clip}
body{overflow-x:clip}
.vk-hero-market-link{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border:1px solid var(--vk-pill-teal-border,rgba(45,212,191,.45))!important;
  background:var(--vk-pill-teal-bg,rgba(45,212,191,.12))!important;
  color:var(--vk-pill-teal-text,#99f6e4)!important;
  text-decoration:none!important;text-align:center!important
}
.vk-hero-market-link:hover{
  color:#fff!important;border-color:rgba(45,212,191,.75)!important;
  background:rgba(45,212,191,.22)!important
}
.vk-hero-trust-chip{
  font-size:.8125rem!important;padding:.35rem .65rem!important;
  border-radius:var(--vk-pill-radius,999px)!important
}
/* vibekey-layout-rhythm:end */
/* vibekey-phone-hub:start */
:root{
  --vk-video-w:1440;
  --vk-video-h:3120;
  --vk-bezel:clamp(4px,0.45vw,6px);
  --vk-vh-budget:min(72dvh,72svh,680px);
  --vk-cap-w:clamp(216px,min(92vw,304px),304px);
  --vk-screen-w0:min(var(--vk-cap-w),92vw);
  --vk-screen-h0:calc(var(--vk-screen-w0) * var(--vk-video-h) / var(--vk-video-w));
  --vk-screen-h:min(var(--vk-screen-h0),calc(var(--vk-vh-budget) - 2 * var(--vk-bezel)));
  --vk-screen-w:calc(var(--vk-screen-h) * var(--vk-video-w) / var(--vk-video-h));
  --vk-phone-w:calc(var(--vk-screen-w) + 2 * var(--vk-bezel));
  --vk-phone-h:calc(var(--vk-screen-h) + 2 * var(--vk-bezel));
}
@media (min-width:480px){:root{--vk-cap-w:clamp(228px,58vw,288px)}}
@media (min-width:768px){:root{--vk-cap-w:clamp(240px,34vw,296px);--vk-vh-budget:min(76dvh,76svh,720px)}}
@media (min-width:1024px){:root{--vk-cap-w:clamp(256px,24vw,304px)}}
@media (min-width:1280px){:root{--vk-cap-w:clamp(272px,20vw,320px)}}
@media (max-width:767px){:root{--vk-vh-budget:min(40dvh,40svh,300px)}}
@media (max-width:380px){:root{--vk-cap-w:min(94vw,248px);--vk-vh-budget:min(36dvh,36svh,280px)}}
@media (max-height:640px){
  :root{--vk-vh-budget:min(62dvh,62svh,480px)}
  .vk-home-hero .vk-hero-phone-stage,.vk-home-hero .vk-hero-phone{--vk-vh-budget:min(38dvh,38svh,280px)!important}
}
@media (max-height:520px) and (orientation:landscape){:root{--vk-vh-budget:min(88dvh,520px);--vk-cap-w:clamp(180px,28vh,240px)}}
.vk-ai-compare-row{
  --vk-cap-w:clamp(156px,38vw,240px);
  --vk-vh-budget:min(64dvh,64svh,560px);
}
@media (min-width:640px){.vk-ai-compare-row{--vk-cap-w:clamp(200px,32vw,260px)}}
@media (min-width:1024px){.vk-ai-compare-row{--vk-cap-w:clamp(220px,22vw,272px)}}

.vk-home-hero .vk-hero-phone,
.vk-section-phone__frame {
  background-color: #c4c8d0;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.11) 0,rgba(255,255,255,.11) 1px,rgba(0,0,0,.07) 1px,rgba(0,0,0,.07) 2px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0,rgba(255,255,255,.04) 3px,rgba(0,0,0,.03) 3px,rgba(0,0,0,.03) 6px);
  border-radius: clamp(1.25rem, 4vw, 1.72rem);
  box-shadow: 0 26px 52px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.08);
}
body.vk-app-mounted #vk-seo-shell { display: none; }
/* vibekey-app-screens:start */
.vk-home-hero{min-height:auto!important;justify-content:flex-start!important;padding-bottom:var(--vk-section-y)!important;overflow-x:clip!important}
.vk-home-hero .max-w-7xl.py-20,.vk-home-hero .relative.z-10.max-w-7xl{
  max-width:var(--vk-page-max)!important;margin-inline:auto!important;padding-inline:var(--vk-page-gutter)!important;
  padding-top:clamp(2rem,5vw,3.5rem)!important;padding-bottom:clamp(1rem,3vw,2rem)!important
}
@media (min-width:1024px){
  .vk-home-hero .grid.lg\:grid-cols-2{grid-template-columns:minmax(0,1fr) var(--vk-phone-w)!important;column-gap:var(--vk-col-gap)!important;row-gap:var(--vk-section-gap)!important}
  .vk-home-hero .vk-hero-copy-inner{max-width:34rem}
}
.vk-app-screens{--vk-section-gap:clamp(1.25rem,4vw,3.5rem);--vk-copy-max:28rem}
@media (max-width:1023px){.vk-app-screen__phone{order:-1}.vk-app-screen__copy{order:0}}
.vk-hero-h1{font-size:clamp(1.85rem,8.4vw,3.75rem)!important;line-height:1.12!important}
@media (max-width:767px){.vk-hero-desktop-only{display:none!important}}
.vk-ai-compare-row--scroll{scroll-padding-inline:var(--vk-page-gutter,1rem);-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;flex-wrap:nowrap!important}
.vk-hero-mobile-only{display:none}
@media (max-width:767px){.vk-hero-mobile-only{display:block}}
@media (min-width:768px){.vk-hero-trust-strip.vk-copy-mobile{display:none!important}}
@media (max-width:1023px){.vk-home-hero .grid.lg\:grid-cols-2{row-gap:1rem!important;column-gap:1rem!important}}
@media (max-width:767px){.vk-home-hero .vk-hero-phone-stage,.vk-home-hero .vk-hero-phone{--vk-vh-budget:min(40dvh,40svh,300px)}}
.vk-ai-compare-row--scroll .vk-section-phone{flex:0 0 min(70vw,220px);scroll-snap-align:center}
@media (min-width:640px){.vk-ai-compare-row--scroll{overflow-x:visible;justify-content:center!important}.vk-ai-compare-row--scroll .vk-section-phone{flex:0 0 auto}}
.vk-app-screens-intro{
  position:relative;isolation:isolate;width:100%;
  padding-top:var(--vk-section-y);padding-bottom:var(--vk-section-y);
  border-top:1px solid var(--vk-hairline);border-bottom:1px solid var(--vk-hairline)
}
.vk-app-screens-intro > *{max-width:var(--vk-page-max);margin-inline:auto;padding-inline:var(--vk-page-gutter)}
.vk-app-screen{
  position:relative;isolation:isolate;overflow:hidden;
  padding-top:var(--vk-section-y);padding-bottom:var(--vk-section-y);border-top:1px solid var(--vk-hairline)
}
.vk-app-screen::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:var(--vk-section-wash)
}
.vk-app-screen:nth-of-type(even){--vk-section-wash:linear-gradient(180deg,#000 0%,rgba(13,148,136,.06) 48%,#000 100%)}
.vk-app-screens-intro::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(70% 120% at 50% 0%,rgba(168,85,247,.12),transparent 65%)
}
.vk-app-screen__inner{position:relative;z-index:1;max-width:var(--vk-page-max);margin-inline:auto;padding-inline:var(--vk-page-gutter)}
.vk-app-screen__grid{display:flex;flex-direction:column;align-items:center;gap:var(--vk-section-gap);width:100%}
.vk-app-screen__copy{width:100%;max-width:var(--vk-copy-max);text-align:center}
.vk-app-screen__copy ul,.vk-app-screen__copy p,.vk-app-screen__copy .max-w-md{max-width:var(--vk-copy-max);margin-inline:auto}
.vk-app-screen__phone{position:relative;width:100%;display:flex;justify-content:center;align-items:flex-end}
.vk-app-screen__phone::before{
  content:"";position:absolute;left:50%;top:50%;z-index:0;pointer-events:none;
  width:calc(var(--vk-phone-w) * 2.4);height:calc(var(--vk-phone-h) * 1.1);
  transform:translate(-50%,-50%);background:var(--vk-phone-glow)
}
.vk-app-screen:not(.vk-app-screen--dual) .vk-app-screen__phone::after{
  content:"";position:absolute;left:50%;bottom:-1rem;z-index:0;pointer-events:none;
  width:calc(var(--vk-phone-w) * 1.25);height:2rem;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.55),transparent 70%)
}
.vk-app-screen__phone .vk-section-phone{position:relative;z-index:1;margin:0}
.vk-app-screen__extras{margin-top:var(--vk-section-gap);width:100%;max-width:640px;margin-inline:auto}
@media (min-width:1024px){
  .vk-app-screen__grid{display:grid;grid-template-columns:minmax(0,1fr) var(--vk-phone-w);align-items:center;column-gap:var(--vk-col-gap);row-gap:var(--vk-section-gap)}
  .vk-app-screen__copy{grid-column:1;grid-row:1;text-align:left;align-self:center;justify-self:start;margin-inline:0}
  .vk-app-screen__copy ul,.vk-app-screen__copy p,.vk-app-screen__copy .max-w-md{margin-inline:0}
  .vk-app-screen__phone{grid-column:2;grid-row:1;width:var(--vk-phone-w);max-width:100%;justify-self:end;justify-content:center;align-items:flex-end}
  .vk-app-screen--phone-left .vk-app-screen__grid{grid-template-columns:var(--vk-phone-w) minmax(0,1fr)}
  .vk-app-screen--phone-left .vk-app-screen__phone{grid-column:1;justify-self:start}
  .vk-app-screen--phone-left .vk-app-screen__copy{grid-column:2;justify-self:start}
  .vk-app-screen--dual .vk-app-screen__grid{grid-template-columns:minmax(0,1fr) auto}
  .vk-app-screen--dual .vk-app-screen__phone{width:auto;max-width:min(100%,calc(2 * var(--vk-phone-w) + 2.75rem));justify-self:end}
  .vk-app-screen--dual.vk-app-screen--phone-left .vk-app-screen__phone{justify-self:start}
  .vk-app-screen--dual .vk-ai-compare-row{--vk-cap-w:clamp(168px,17vw,244px);width:100%;justify-content:center;align-items:flex-end;flex-wrap:nowrap}
}
@media (min-width:1280px){
  .vk-app-screens{--vk-copy-max:32rem}
  .vk-app-screen--dual .vk-ai-compare-row{--vk-cap-w:clamp(184px,14vw,252px)}
}
/* vibekey-app-screens:end *//* vibekey-phone-hub:end */