/* ===== Fonts ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap');

/* ZT Talk fallback: use Inter 900 */
@font-face {
  font-family: 'ZT Talk Bold';
  src: local('Inter');
  font-weight: 900;
  font-style: normal;
}

body {
  font-family: 'Inter', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

/* ===== Navbar glassmorphism ===== */
.navbar-scrolled {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

/* ===== Phone Mockup ===== */
.phone-frame {
  width: 280px;
  border: 8px solid #1a1a1a;
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(31, 38, 135, 0.14);
  background: #FAF7FF;
  position: relative;
}

.phone-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 24px;
  background: #1a1a1a;
  border-radius: 0 0 16px 16px;
  z-index: 10;
}

.phone-screen {
  padding: 40px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 440px;
}

.phone-frame-sm {
  width: 200px;
  border: 6px solid #1a1a1a;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.10);
  background: #FAF7FF;
  position: relative;
}

.phone-frame-sm::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 18px;
  background: #1a1a1a;
  border-radius: 0 0 12px 12px;
  z-index: 10;
}

.phone-frame-sm .phone-screen {
  padding: 32px 14px 18px;
  min-height: 320px;
}

/* ===== Pulse Link Animation ===== */
@keyframes pulse-link {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); box-shadow: 0 2px 12px rgba(115, 103, 240, 0.2); }
}

.link-btn {
  animation: pulse-link 3s ease-in-out infinite;
}

.link-btn:nth-child(1) { animation-delay: 0s; }
.link-btn:nth-child(2) { animation-delay: 0.6s; }
.link-btn:nth-child(3) { animation-delay: 1.2s; }
.link-btn:nth-child(4) { animation-delay: 1.8s; }

/* ===== Deeplink Animation ===== */
@keyframes deeplink-arrow {
  0% { transform: translateX(0); opacity: 1; }
  40% { transform: translateX(60px); opacity: 1; }
  50% { transform: translateX(60px); opacity: 0; }
  51% { transform: translateX(100px); opacity: 0; }
  60% { transform: translateX(100px); opacity: 1; }
  100% { transform: translateX(160px); opacity: 1; }
}

@keyframes deeplink-glow {
  0%, 40% { box-shadow: 0 0 0 rgba(115, 103, 240, 0); }
  60%, 90% { box-shadow: 0 0 20px rgba(115, 103, 240, 0.3); }
  100% { box-shadow: 0 0 0 rgba(115, 103, 240, 0); }
}

.deeplink-arrow {
  animation: deeplink-arrow 4s ease-in-out infinite;
}

.deeplink-target {
  animation: deeplink-glow 4s ease-in-out infinite;
}

/* ===== Shield Bounce Animation ===== */
@keyframes shield-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(115, 103, 240, 0)); }
  50% { transform: scale(1.05); filter: drop-shadow(0 0 16px rgba(115, 103, 240, 0.3)); }
}

@keyframes bot-approach-left {
  0% { transform: translateX(-80px); opacity: 0; }
  30% { transform: translateX(-10px); opacity: 1; }
  40% { transform: translateX(-30px) scale(0.8); opacity: 0.5; }
  50% { transform: translateX(-60px) scale(0.5); opacity: 0; }
  100% { transform: translateX(-60px) scale(0.5); opacity: 0; }
}

@keyframes bot-approach-right {
  0% { transform: translateX(80px); opacity: 0; }
  30% { transform: translateX(10px); opacity: 1; }
  40% { transform: translateX(30px) scale(0.8); opacity: 0.5; }
  50% { transform: translateX(60px) scale(0.5); opacity: 0; }
  100% { transform: translateX(60px) scale(0.5); opacity: 0; }
}

@keyframes bot-approach-top {
  0% { transform: translateY(-60px); opacity: 0; }
  30% { transform: translateY(-10px); opacity: 1; }
  40% { transform: translateY(-25px) scale(0.8); opacity: 0.5; }
  50% { transform: translateY(-50px) scale(0.5); opacity: 0; }
  100% { transform: translateY(-50px) scale(0.5); opacity: 0; }
}

.shield-icon { animation: shield-pulse 3s ease-in-out infinite; }
.bot-left { animation: bot-approach-left 3s ease-in-out infinite; }
.bot-right { animation: bot-approach-right 3s ease-in-out infinite; animation-delay: 0.5s; }
.bot-top { animation: bot-approach-top 3s ease-in-out infinite; animation-delay: 1s; }

@keyframes protected-fade {
  0%, 55% { opacity: 0; transform: translateY(8px); }
  70%, 90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(8px); }
}

.protected-badge { animation: protected-fade 3s ease-in-out infinite; }

/* ===== Geo Pulse Animation ===== */
@keyframes geo-dot-pulse {
  0%, 100% { transform: scale(0); opacity: 0; }
  20% { transform: scale(1); opacity: 1; }
  80% { transform: scale(1); opacity: 1; }
  95% { transform: scale(0); opacity: 0; }
}

.geo-dot {
  animation: geo-dot-pulse 4s ease-in-out infinite;
}

.geo-dot:nth-child(1) { animation-delay: 0s; }
.geo-dot:nth-child(2) { animation-delay: 0.3s; }
.geo-dot:nth-child(3) { animation-delay: 0.6s; }
.geo-dot:nth-child(4) { animation-delay: 0.9s; }
.geo-dot:nth-child(5) { animation-delay: 1.2s; }
.geo-dot:nth-child(6) { animation-delay: 1.5s; }
.geo-dot:nth-child(7) { animation-delay: 1.8s; }

@keyframes geo-blocked-pulse {
  0%, 100% { transform: scale(0); opacity: 0; }
  20% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
  80% { transform: scale(1); opacity: 1; }
  95% { transform: scale(0); opacity: 0; }
}

.geo-dot-blocked {
  animation: geo-blocked-pulse 4s ease-in-out infinite;
}

/* ===== Dashboard Animation ===== */
@keyframes bar-grow {
  0% { height: 0; }
  100% { height: var(--bar-height); }
}

.bar-animated {
  animation: bar-grow 1.5s ease-out forwards;
}

@keyframes card-shuffle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.dashboard-card {
  animation: card-shuffle 4s ease-in-out infinite;
}

.dashboard-card:nth-child(1) { animation-delay: 0s; }
.dashboard-card:nth-child(2) { animation-delay: 0.8s; }
.dashboard-card:nth-child(3) { animation-delay: 1.6s; }

/* ===== Count Up (JS driven) ===== */
.count-up {
  font-variant-numeric: tabular-nums;
}

/* ===== Tab Transition ===== */
.tab-content {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.tab-content-enter {
  opacity: 0;
  transform: translateY(8px);
}

.tab-content-active {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Scroll Reveal ===== */
.fade-in-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.fade-in-up.visible .stagger-child:nth-child(1) { transition-delay: 0.1s; }
.fade-in-up.visible .stagger-child:nth-child(2) { transition-delay: 0.2s; }
.fade-in-up.visible .stagger-child:nth-child(3) { transition-delay: 0.3s; }

/* ===== Creator Tab Pills ===== */
.tab-pill {
  transition: all 0.3s ease;
  cursor: pointer;
}

.tab-pill:hover {
  background: #E3DEFF;
}

.tab-pill.active {
  background: #7367F0;
  color: white;
}

/* ===== Hamburger Menu ===== */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.mobile-menu.open {
  transform: translateX(0);
}

/* ===== Avatar Images ===== */
.avatar-img {
  object-fit: cover;
  background: linear-gradient(135deg, #7367F0, #FCB3FF);
}

.avatar-gradient {
  background: linear-gradient(135deg, #7367F0, #FCB3FF);
}

/* ===== Stat Card Hover ===== */
.stat-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 12px 48px rgba(31, 38, 135, 0.14);
}

/* ===== Waitlist Input Focus ===== */
.waitlist-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(115, 103, 240, 0.2);
  border-color: #7367F0;
}

/* ===== Responsive Overrides ===== */
@media (max-width: 809px) {
  .phone-frame {
    width: 240px;
  }

  .phone-frame-sm {
    width: 170px;
  }

  .stat-card {
    transform: rotate(0deg) !important;
  }
}