*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Plus Jakarta Sans', -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes floatCard {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-10px); }
}
@keyframes floatCard2 {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-6px); }
}
@keyframes pulseDot {
  0%,100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.5); opacity: 0.5; }
}
@keyframes pulseRing {
  0%   { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.faq-answer { display: none; }
.faq-item.open .faq-answer { display: block; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }

.activity-row { animation: slideIn 0.3s ease both; }

/* ===== Mobile nav (hamburger) ===== */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 11px; margin: -11px; }

/* ===== Responsive layout ===== */
@media (max-width: 860px) {
  .nav-toggle { display: flex !important; align-items: center; justify-content: center; }
  .nav-links {
    display: none !important;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    background: white;
    padding: 10px 16px 18px !important;
    box-shadow: 0 16px 32px rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    gap: 2px !important;
  }
  .nav-links.open { display: flex !important; }
  .nav-links a { width: 100%; padding: 13px 14px !important; }
  .nav-links a:last-child { margin-left: 0 !important; justify-content: center; margin-top: 6px; }

  .hero-grid, .steps-grid, .before-after-grid, .telegram-grid {
    grid-template-columns: 1fr !important;
  }
  .billing-toggle-pill { border-radius: 20px !important; }
  .billing-toggle-pill button { flex: 1 1 auto; justify-content: center !important; }
  .hero-grid { gap: 48px !important; }
  .steps-grid { gap: 16px !important; }
  .before-after-grid { gap: 16px !important; }
  .telegram-grid { gap: 40px !important; }
  .step-arrow { display: none !important; }
  .telegram-grid > *:last-child { justify-self: center !important; }

  .landing-root section {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .landing-root nav > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .landing-root footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .landing-root footer > div { justify-content: center !important; text-align: center; }
}