/* 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, #EBF2FE 0%, #ffffff 50%, #F0F7FF 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;
}