/* =============================================================
   WORKOVA STOCKS — index.css
   Landing page–specific styles
   ============================================================= */


/* ── TRUSTED BY ──────────────────────────────────────────────── */
.trusted-section {
  padding:          var(--sp-8) 0;
  border-top:       1px solid var(--border-subtle);
  border-bottom:    1px solid var(--border-subtle);
  background-color: var(--surface-card);
}

.trusted-label {
  font-size:      var(--type-xs);
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--text-muted);
  text-align:     center;
  margin-bottom:  var(--sp-5);
}

.trusted-logos {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             var(--sp-6) var(--sp-10);
}

.trusted-logo {
  font-size:      var(--type-sm);
  font-weight:    700;
  color:          var(--text-muted);
  letter-spacing: 0.04em;
  opacity:        0.55;
  transition:     opacity var(--dur-fast) var(--ease-out);
}

.trusted-logo:hover { opacity: 0.85; }


/* ── AI SECTION BACKGROUND ───────────────────────────────────── */
.ai-section {
  background-color: var(--surface-subtle);
  position:         relative;
  overflow:         hidden;
}

.ai-section::before {
  content:          '';
  position:         absolute;
  top:              -120px;
  right:            -120px;
  width:            500px;
  height:           500px;
  border-radius:    50%;
  background:       radial-gradient(circle, rgba(37,99,235,0.07) 0%, transparent 70%);
  pointer-events:   none;
}


/* ── CTA BANNER ──────────────────────────────────────────────── */
.cta-banner {
  background-color: var(--clr-navy);
  position:         relative;
  overflow:         hidden;
}

.cta-banner::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background-image:
    linear-gradient(rgba(37,99,235,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,0.12) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.cta-banner::after {
  content:        '';
  position:       absolute;
  top:            -200px;
  left:           50%;
  transform:      translateX(-50%);
  width:          700px;
  height:         400px;
  background:     radial-gradient(ellipse, rgba(37,99,235,0.35) 0%, transparent 70%);
  pointer-events: none;
}

.cta-inner {
  position:        relative;
  z-index:         1;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--sp-10);
  flex-wrap:       wrap;
}

.cta-heading {
  font-size:      var(--type-3xl);
  font-weight:    800;
  letter-spacing: -0.03em;
  color:          #FFFFFF;
  line-height:    1.15;
  margin-bottom:  var(--sp-3);
}

.cta-body {
  font-size:   var(--type-lg);
  color:       rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  max-width:   44ch;
}

.cta-actions {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  flex-shrink: 0;
  flex-wrap:   wrap;
}

@media (max-width: 767px) {
  .cta-inner   { flex-direction: column; align-items: flex-start; }
  .cta-actions { width: 100%; }
  .cta-actions .btn { flex: 1; justify-content: center; }
  .cta-heading { font-size: var(--type-2xl); }
}