/* SayIt — Custom styles (supplements Tailwind CDN) */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Gradient utilities */
.hero-gradient {
  background: linear-gradient(135deg, #0a0f1e 0%, #0d1a2e 50%, #0a1628 100%);
}

.feature-card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(27, 111, 232, 0.1);
}

/* Pricing card highlight */
.pricing-popular {
  box-shadow: 0 8px 40px rgba(27, 111, 232, 0.18);
  border: 2px solid #1B6FE8;
}

/* CTA gradient */
.cta-gradient {
  background: linear-gradient(135deg, #1B6FE8 0%, #1559BA 100%);
}

/* Testimonial quote styling */
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: -8px;
  left: 20px;
  font-size: 4rem;
  color: #1B6FE8;
  opacity: 0.15;
  font-family: Georgia, serif;
  line-height: 1;
}

/* Form focus states */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #1B6FE8;
  box-shadow: 0 0 0 3px rgba(27, 111, 232, 0.1);
}

/* Blog post content */
.blog-content h2 { margin-top: 2rem; margin-bottom: 0.75rem; }
.blog-content p { margin-bottom: 1rem; }
.blog-content ul, .blog-content ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.blog-content li { margin-bottom: 0.5rem; }

/* Subtle pattern for sections */
.dot-pattern {
  background-image: radial-gradient(circle, #e5e7eb 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ── Blog post prose styling ── */
.blog-prose p {
  margin-bottom: 1.5rem;
  line-height: 1.8;
  color: #374151;
  font-size: 1.0625rem;
}
.blog-prose h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}
.blog-prose h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #1f2937;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.blog-prose ul, .blog-prose ol {
  margin-bottom: 1.5rem;
  padding-left: 1.75rem;
}
.blog-prose li {
  margin-bottom: 0.75rem;
  line-height: 1.7;
  color: #374151;
}
.blog-prose strong {
  font-weight: 600;
  color: #111827;
}
.blog-prose a {
  color: #1B6FE8;
  text-decoration: none;
}
.blog-prose a:hover {
  text-decoration: underline;
}