/* ============================================================
   GLYDE MEDIA — cta.css
   Styles for the Contact / CTA band only.
   ============================================================ */

.cta-band {
  position: relative; overflow: hidden;
  padding: 100px 80px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 60px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(61,189,160,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61,189,160,0.04) 1px, transparent 1px);
  background-size: 48px 48px; pointer-events: none;
}
.cta-band::after {
  content: ''; position: absolute;
  top: -50%; right: -5%; width: 50%; height: 200%;
  background: linear-gradient(105deg, transparent 0%, rgba(61,189,160,0.06) 50%, transparent 100%);
  transform: skewX(-12deg); pointer-events: none;
}
.cta-left  { position: relative; z-index: 1; }
.cta-right { position: relative; z-index: 1; }
.cta-tag {
  font-family: var(--cond); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal);
  margin-bottom: 16px; display: flex; align-items: center; gap: 10px;
}
.cta-tag::before { content: ''; width: 24px; height: 2px; background: var(--teal); }
.cta-title {
  font-family: var(--cond);
  font-size: clamp(44px, 6vw, 84px); font-weight: 900;
  text-transform: uppercase; line-height: 0.88;
  letter-spacing: -0.01em; margin-bottom: 20px;
}
.cta-title .stroke { display: block; -webkit-text-stroke: 1.5px rgba(255,255,255,0.25); color: transparent; }
.cta-sub { font-size: 15px; font-weight: 300; color: var(--muted); max-width: 380px; }
.cta-btn {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--cond); font-size: 14px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy); background: var(--teal);
  padding: 20px 44px; text-decoration: none;
  position: relative; overflow: hidden; transition: color 0.3s;
}
.cta-btn::before {
  content: ''; position: absolute; inset: 0;
  background: var(--white); transform: translateX(-101%);
  transition: transform 0.35s cubic-bezier(0.76,0,0.24,1);
}
.cta-btn:hover::before { transform: translateX(0); }
.cta-btn span, .cta-btn svg { position: relative; z-index: 1; }
.cta-btn svg { transition: transform 0.3s; }
.cta-btn:hover svg { transform: translate(4px,-4px); }

@media (max-width: 900px) {
  .cta-band { padding: 64px 28px; flex-direction: column; }
}