:root {
  --tapify-blue: #019DF9;
  --tapify-cyan: #20C6FA;
  --tapify-violet: #6C60B6;
  --tapify-magenta: #E94B98;
  --tapify-pink: #F31275;
  --tapify-gradient: linear-gradient(135deg, #20C6FA 0%, #019DF9 30%, #B81E88 65%, #FE003A 100%);
}

* { -webkit-font-smoothing: antialiased; box-sizing: border-box; }
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
  scroll-behavior: auto;
}
html { position: fixed; inset: 0; }
body {
  position: fixed;
  inset: 0;
  margin: 0;
  font-family: 'Cabin', system-ui, sans-serif;
  background: #080613;
  color: #f5f4ff;
}
button, a { -webkit-tap-highlight-color: transparent; }

.panel-hidden { display: none !important; }

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes letterJump {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-0.18em); }
}

.letter-jump {
  display: inline-block;
  animation: letterJump 1.1s ease-in-out infinite;
}

/* Only the dot of the "i" in tapify gets the palette gradient:
   a second copy of the same glyph is stacked on top and clipped
   so only its top portion (the dot) is visible — guarantees pixel-perfect alignment. */
.tapify-i-wrap { position: relative; }
.tapify-i-dot {
  position: absolute;
  inset: 0;
  background: var(--tapify-gradient);
  background-size: 300% 300%;
  animation: gradientShift 4s ease infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  clip-path: inset(0 0 68% 0);
  pointer-events: none;
  user-select: none;
}

.bg-white { background-color: #0a0714 !important; }
.text-black { color: #f5f4ff !important; }
.bg-black { background-color: #0a0714 !important; }
.bg-accent {
  background: linear-gradient(90deg, #0a0714 0%, #1b1440 25%, #16305e 50%, #1b1440 75%, #0a0714 100%) !important;
  background-size: 300% 100%;
  animation: gradientShift 16s ease infinite;
}
.text-accent {
  background: var(--tapify-gradient) !important;
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}
.tapify-mark {
  background: #fff;
}

.tapify-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  color: #f5f4ff;
  background: rgba(255,255,255,0.06);
  transition: transform 0.2s ease, background 0.2s ease;
}
.tapify-social-btn:hover { transform: scale(1.08); background: rgba(255,255,255,0.14); }
.tapify-social-btn svg { width: 17px; height: 17px; }

.tapify-cta {
  position: relative;
  background: transparent !important;
  border: none !important;
}
.tapify-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;
  background: var(--tapify-gradient);
  background-size: 300% 300%;
  animation: gradientShift 5s ease infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Fullscreen presentation: the page never becomes scrollable. */
[data-panel="home"] {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}
[data-panel="home"] > div {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
}

.wave-background { width: 100%; height: 100%; }

/* Main card: upper-left, anchored below the nav bar. */
.tapify-main-card {
  z-index: 20;
  left: clamp(16px, 3vw, 48px) !important;
  top: clamp(90px, 14vh, 140px) !important;
  width: fit-content !important;
  max-width: min(560px, calc(100vw - 64px)) !important;
  transform: none !important;
  padding: clamp(28px, 3vw, 46px) !important;
  border: none !important;
  background: transparent !important;
  box-shadow: 0 30px 80px -30px rgba(108,96,182,0.55), 0 12px 45px rgba(0,0,0,0.35) !important;
}

.tapify-main-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--tapify-gradient);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.tapify-main-card h2 {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  padding-bottom: 0.22em;
  font-size: clamp(54px, 5.5vw, 88px) !important;
}

.tapify-main-card h2::after {
  content: '';
  position: absolute;
  left: 0.05em;
  bottom: 0;
  width: 72px;
  height: 4px;
  border-radius: 4px;
  background: var(--tapify-gradient);
}

.tapify-main-card p[data-anim="big-desc"] {
  letter-spacing: 0.01em;
  line-height: 1.6;
  max-width: 420px;
}

/* CTA: lower-right, raised above the bottom edge, sized as a card. */
.tapify-cta-wrap {
  z-index: 20;
  bottom: clamp(90px, 14vh, 150px) !important;
  right: clamp(24px, 5vw, 90px) !important;
  width: min(340px, 30vw) !important;
  height: min(260px, 36vh) !important;
}

@media (max-width: 900px) {
  .tapify-main-card {
    left: 5vw !important;
    max-width: min(480px, 58vw) !important;
  }
  .tapify-cta-wrap { right: 4vw !important; width: min(280px, 40vw) !important; }
}

@media (max-width: 700px) {
  .tapify-main-card {
    left: 50% !important;
    max-width: min(520px, calc(100vw - 40px)) !important;
    transform: translateX(-50%) !important;
  }
  .tapify-cta-wrap {
    right: 50% !important;
    bottom: 24px !important;
    transform: translateX(50%) !important;
    width: min(240px, 70vw) !important;
    height: min(160px, 20vh) !important;
  }
}