.tl-card {
  overflow: hidden;
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius-lg);
  background: var(--tl-surface);
  box-shadow: var(--tl-shadow-sm);
}
.tl-card-hover { transition: transform var(--tl-transition), box-shadow var(--tl-transition), border-color var(--tl-transition); }
.tl-card-hover:hover { transform: translateY(-6px); border-color: rgba(33,140,116,.35); box-shadow: var(--tl-shadow-card); }
.tl-img-overlay { background: linear-gradient(to top, rgba(11,41,66,.9), rgba(11,41,66,.22) 65%, transparent); }
.tl-image-natural { transform: scale(1.001); }
.tl-badge-green {
  display: inline-flex; align-items: center; min-height: 1.875rem; padding: .35rem .75rem;
  border: 1px solid rgba(255,255,255,.34); border-radius: var(--tl-radius-pill);
  color: #fff; background: rgba(33,140,116,.9); backdrop-filter: blur(10px);
  font-size: .7rem; font-weight: 800; letter-spacing: .04em;
}
.tl-btn, .tl-btn-primary, .tl-btn-secondary, .tl-btn-accent, .tl-btn-green, .tl-btn-blue {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.875rem; padding: .75rem 1.25rem; border: 1px solid transparent;
  border-radius: var(--tl-radius-pill); font-weight: 750; line-height: 1.2;
  cursor: pointer; transition: transform var(--tl-transition), background var(--tl-transition), box-shadow var(--tl-transition);
}
.tl-btn-primary, .tl-btn-blue { color: #fff; background: var(--tl-primary); }
.tl-btn-secondary, .tl-btn-green { color: #fff; background: var(--tl-secondary); }
.tl-btn-accent { color: var(--tl-ink); background: var(--tl-accent); }
.tl-btn-primary:hover, .tl-btn-blue:hover { background: var(--tl-primary-dark); transform: translateY(-2px); }
.tl-btn-secondary:hover, .tl-btn-green:hover { background: var(--tl-secondary-dark); transform: translateY(-2px); }
.tl-btn-accent:hover { background: var(--tl-accent-dark); transform: translateY(-2px); }
.tl-btn-outline { color: var(--tl-primary); border-color: var(--tl-primary); background: transparent; }
.tl-btn-outline:hover { color: #fff; background: var(--tl-primary); }
.tl-form-control {
  width: 100%; min-height: 3.25rem; padding: .8rem 1rem; border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius-sm); color: var(--tl-ink); background: #fff;
}
.tl-form-control:focus { border-color: var(--tl-secondary); box-shadow: 0 0 0 4px rgba(33,140,116,.12); outline: 0; }