/* Realti Intel — page styles: markets (loaded after styles.css) */

.nav-links a:hover.nav-links a.active { color: var(--white); }

section { width: 100%; }

.body-dark p + p.body-light p + p { margin-top: 16px; }

.placeholder-dark { background: rgba(255,200,50,0.05); border: 1.5px dashed rgba(255,180,0,0.25);
    border-radius: 12px; padding: 32px; text-align: center; color: #F5D060;
    font-size: 13.5px; line-height: 1.6; margin: 32px 0; font-style: italic; }

.use-case-resolution { font-size: 15px; line-height: 1.7; color: var(--muted); }

.form-field input.form-field select.form-field textarea {
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px; padding: 12px 16px; font-size: 15px; color: var(--white);
    font-family: 'Inter', sans-serif; outline: none; transition: border-color .2s; }

.form-field input:focus.form-field select:focus { border-color: var(--green); }

.footer-tagline { font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 240px; }

.footer-col-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--muted);
    text-transform: uppercase; margin-bottom: 16px; }

.footer-links { list-style: none; }

.footer-links li { margin-bottom: 10px; }

.footer-links a { font-size: 14px; color: rgba(255,255,255,0.5); text-decoration: none; transition: color .2s; }

.ma-badge { font-size: 12px; color: var(--muted); }

h1, h2, h3 { text-wrap: balance; }

.sticky-bar-text strong { color: #12B76A; }

.sticky-bar-close:hover { color: #fff; border-color: rgba(255,255,255,0.4); }

/* ── Hero: padding + typography ────────────────────────────────────── */
.markets-hero {
  padding-top: 140px;
  padding-bottom: 100px;
  text-align: center;
}
.markets-hero h1 {
  font-size: clamp(44px, 6vw, 74px);
  line-height: 1.08;
  margin-bottom: 24px;
}
.markets-hero .hero-sub {
  max-width: 600px;
  margin: 0 auto 28px;
  font-size: 18px;
  line-height: 1.7;
  color: #94A3B8;
}

/* ── Hero: staggered fade-in ───────────────────────────────────────── */
@keyframes marketsHeroFade {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.markets-hero .hero-eyebrow {
  animation: marketsHeroFade 0.5s ease both;
  animation-delay: 0.1s;
  opacity: 0;
}
.markets-hero h1 {
  animation: marketsHeroFade 0.55s ease both;
  animation-delay: 0.2s;
  opacity: 0;
}
.markets-hero .hero-sub {
  animation: marketsHeroFade 0.5s ease both;
  animation-delay: 0.35s;
  opacity: 0;
}
.markets-hero .hero-alert {
  animation: marketsHeroFade 0.5s ease both;
  animation-delay: 0.45s;
  opacity: 0;
}
.markets-hero .hero-cta-group {
  animation: marketsHeroFade 0.5s ease both;
  animation-delay: 0.55s;
  opacity: 0;
}
.markets-hero .hero-note {
  animation: marketsHeroFade 0.5s ease both;
  animation-delay: 0.65s;
  opacity: 0;
}

/* ── Eyebrow: pulse dot ────────────────────────────────────────────── */
@keyframes dotPulse {
  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(18,183,106,0.4); }
  50% { transform: scale(1.2); opacity: 0.8; box-shadow: 0 0 0 6px rgba(18,183,106,0); }
}
.pulse-dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: #12B76A;
  border-radius: 50%;
  margin-right: 8px;
  animation: dotPulse 2s ease-in-out infinite;
  vertical-align: middle;
}

/* ── CTA: glow pulse ───────────────────────────────────────────────── */
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(18,183,106,0.35); }
  50% { box-shadow: 0 0 24px 8px rgba(18,183,106,0.12); }
}
.markets-hero .btn-hero {
  animation: ctaGlow 3s ease-in-out infinite;
  transition: transform 0.2s ease;
}
.markets-hero .btn-hero:hover {
  transform: translateY(-2px);
}

/* ── "Your competitors…" alert line ────────────────────────────────── */
.markets-alert-line {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 20px;
  background: rgba(18,183,106,0.06);
  border: 1px solid rgba(18,183,106,0.2);
  border-radius: 99px;
  font-size: 14px;
  font-weight: 500;
  color: #12B76A;
  margin: 16px auto;
}