/* ==========================================================================
   Marketing Pages — Landing pages, product pages, company pages
   ========================================================================== */

/* --- Hero section --- */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--sp-3xl) 0 var(--sp-4xl);
}

/* Decorative radial accent blobs */
.hero-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero-glow-1 {
  top: -100px;
  right: -80px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(37,99,235,.06) 0%, transparent 70%);
}
.hero-glow-2 {
  bottom: -60px;
  left: -40px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(37,99,235,.04) 0%, transparent 70%);
}

/* Hero content entrance */
.hero-content {
  position: relative;
  z-index: 1;
}
.hero-content > *:nth-child(1) { animation: revealUp .5s ease-out both; animation-delay: 0ms; }
.hero-content > *:nth-child(2) { animation: revealUp .5s ease-out both; animation-delay: 80ms; }
.hero-content > *:nth-child(3) { animation: revealUp .5s ease-out both; animation-delay: 160ms; }
.hero-content > *:nth-child(4) { animation: revealUp .5s ease-out both; animation-delay: 240ms; }
.hero-content > *:nth-child(5) { animation: revealUp .5s ease-out both; animation-delay: 320ms; }

.hero-visual {
  animation: revealScale .6s ease-out both;
  animation-delay: 200ms;
}

/* --- Trust bar --- */
.trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xl);
  flex-wrap: wrap;
  padding-top: var(--sp-xl);
  border-top: 1px solid var(--border);
  margin-top: var(--sp-3xl);
}
.trust-bar-label {
  font-size: .875rem;
  color: var(--text-secondary);
  margin-right: var(--sp-sm);
}
.trust-logo {
  height: 32px;
  width: 100px;
  background: var(--surface);
  border-radius: var(--radius-sm);
}
@media (max-width: 639px) {
  .trust-bar {
    gap: var(--sp-md);
  }
}

/* --- Section headers --- */
.section-header {
  text-align: center;
  margin-bottom: var(--sp-3xl);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.section-header h2 {
  margin-bottom: var(--sp-md);
}
.section-header p {
  color: var(--text-secondary);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* --- Feature cards --- */
.feature-card {
  padding: var(--sp-xl);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.feature-card .icon-box {
  margin-bottom: var(--sp-lg);
}
.feature-card h3 {
  font-size: 1.125rem;
  margin-bottom: var(--sp-sm);
}
.feature-card p {
  color: var(--text-secondary);
  font-size: .875rem;
  line-height: 1.6;
  flex: 1;
}
.feature-card .placeholder {
  margin-top: var(--sp-lg);
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
}

/* --- Problem section badges --- */
.tool-badge {
  display: inline-block;
  padding: .5rem .875rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .875rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* --- Stakeholder cards --- */
.stakeholder-card {
  padding: var(--sp-xl);
  height: 100%;
}
.stakeholder-card h4 {
  font-size: 1rem;
  margin-bottom: var(--sp-sm);
}
.stakeholder-card p {
  color: var(--text-secondary);
  font-size: .875rem;
  line-height: 1.6;
}

/* --- Differentiator cards --- */
.diff-card {
  text-align: center;
  padding: var(--sp-xl);
}
.diff-card .icon-box {
  margin: 0 auto var(--sp-lg);
}
.diff-card h3 {
  font-size: 1.125rem;
  margin-bottom: var(--sp-sm);
}
.diff-card p {
  color: var(--text-secondary);
  font-size: .875rem;
  line-height: 1.6;
}

/* --- Audience router cards --- */
.audience-card {
  text-align: center;
  padding: var(--sp-xl);
  height: 100%;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.audience-card:hover {
  color: var(--text);
}
.audience-card i {
  font-size: 40px;
  margin-bottom: var(--sp-lg);
}
.audience-card h4 {
  font-size: 1rem;
  margin-bottom: var(--sp-xs);
}
.audience-card .text-secondary {
  font-size: .875rem;
}

/* --- CTA section --- */
.cta-section {
  background: var(--navy);
  padding: var(--sp-4xl) 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.15) 0%, transparent 70%);
  pointer-events: none;
}
.cta-section::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -5%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.08) 0%, transparent 70%);
  pointer-events: none;
}
.cta-section > * {
  position: relative;
  z-index: 1;
}
.cta-section h2 {
  color: #fff;
}

/* --- Footer --- */
.footer {
  background: var(--navy);
  color: rgba(255,255,255,.5);
  padding: var(--sp-3xl) 0 var(--sp-xl);
}
.footer a {
  color: #CBD5E1;
  text-decoration: none;
  transition: color var(--ease);
}
.footer a:hover {
  color: #fff;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: var(--sp-xl);
  margin-bottom: var(--sp-xl);
}
@media (max-width: 767px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-brand-col {
    grid-column: 1 / -1;
  }
}
.footer-heading {
  color: #fff;
  text-transform: uppercase;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: .875rem;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  font-size: .875rem;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  font-size: .875rem;
  padding-top: var(--sp-xl);
  border-top: 1px solid rgba(255,255,255,.1);
}

/* --- Testimonial cards --- */
.testimonial {
  position: relative;
  padding: var(--sp-xl);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.testimonial-quote {
  position: absolute;
  top: 20px;
  left: 24px;
  font-family: var(--font-display);
  font-size: 3.5rem;
  color: var(--sapphire-light);
  line-height: 1;
  pointer-events: none;
}
.testimonial p {
  color: var(--text-secondary);
  font-size: .875rem;
  font-style: italic;
  line-height: 1.6;
  padding-top: var(--sp-xl);
  flex: 1;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
}

/* --- Pricing section --- */
.pricing-section {
  max-width: 600px;
  margin: 0 auto;
}

/* --- Problem → Solution flow --- */
.problem-flow {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--sp-2xl);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.problem-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-lg);
}
.problem-arrow {
  text-align: center;
  margin: var(--sp-lg) 0;
  color: var(--sapphire);
  font-size: 32px;
}
.problem-solution {
  text-align: center;
}

/* --- About section stats --- */
.stat-item {
  text-align: center;
}
.stat-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  color: var(--navy);
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: var(--sp-xs);
}
.stat-label {
  font-size: .875rem;
  color: var(--text-secondary);
}

/* --- Team member --- */
.team-member {
  text-align: center;
}
.team-photo {
  width: 180px;
  height: 180px;
  min-width: 180px;
  min-height: 180px;
  max-width: 180px;
  max-height: 180px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  margin: 0 auto var(--sp-lg);
  color: var(--text-secondary);
  font-size: .875rem;
  overflow: hidden;
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.team-member h4 {
  font-size: 1.25rem;
  margin-bottom: var(--sp-xs);
}
.team-member .text-sm {
  font-size: 1rem;
}
.team-member .text-secondary {
  font-size: .875rem;
}

/* --- Ecosystem flywheel --- */
.flywheel-box {
  max-width: 800px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: var(--sp-3xl);
  text-align: center;
}

/* --- AI features list --- */
.ai-check-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
.ai-check-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
}
.ai-check-item i {
  color: var(--sapphire);
  font-size: 20px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* --- Coming Soon page --- */
.coming-soon {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.coming-soon-content {
  max-width: 480px;
  position: relative;
  z-index: 1;
}
.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  padding: .5rem 1rem;
  font-size: .875rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  margin-bottom: var(--sp-xl);
}