/* 14 — Join our online community (Agent CLOSE). Live footer-bg photo + drifting
   hexagon particle field (canvas), big masked headline, magnetic CTAs. */
.cm { position: relative; min-height: 540px; display: flex; align-items: center; overflow: hidden; overflow: clip; isolation: isolate; background: #040b15;
  border-top: 1px solid rgba(153,44,255,.3); }
.cm-bg { position: absolute; inset: 0; z-index: -3; }
.cm-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 35%; filter: saturate(1.1) brightness(1.25) contrast(1.05); transform: scale(1.06); }
.cm-hex { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
.cm-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 70% at 78% 50%, rgba(153,44,255,.20), transparent 70%),
    linear-gradient(90deg, #040b15 8%, rgba(4,11,21,.72) 38%, rgba(4,11,21,.22) 62%, rgba(4,11,21,.55) 88%, #040b15 100%),
    linear-gradient(180deg, #040b15 0%, transparent 18%, transparent 80%, #040b15 100%); }
.cm-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-block: 90px; }
.cm-title { font-size: clamp(46px, 6.2vw, 96px); line-height: .92; margin-bottom: 22px; }
.cm-line { display: block; overflow: hidden; padding-bottom: .04em; }
.cm-line > span { display: inline-block; }
.cm-accent { color: var(--purple); }
.cm-body { font: 400 clamp(17px, 1.5vw, 22px)/1.3 var(--f-ui); color: #c4c6d8; margin: 0; max-width: 560px; }
.cm-cta { display: flex; flex-direction: column; gap: 16px; width: 250px; flex: 0 0 250px; }
.cm-btn { justify-content: center; min-height: 56px; font-size: 15px; position: relative; overflow: hidden; }
.cm-btn.btn-lime::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); transition: left .7s var(--ease-out); }
.cm-btn.btn-lime:hover::after { left: 130%; }
.cm-btn.btn-ghost { border-color: #6d4a99; background: rgba(6,12,25,.7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cm-btn.btn-ghost:hover { border-color: var(--purple); background: rgba(153,44,255,.2); box-shadow: 0 10px 40px -10px rgba(153,44,255,.6); }
.cm-btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

/* entrance (JS-armed) */
.cm.is-armed .cm-line > span { transform: translateY(110%) skewY(6deg); transform-origin: 0 100%; }
.cm.is-armed .cm-body { opacity: 0; transform: translateY(20px); }
.cm.is-armed .cm-cta > * { opacity: 0; transform: translateY(24px) scale(.96); }
.cm.is-in .cm-line > span { transform: none; transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.cm.is-in .cm-line + .cm-line > span { transition-delay: .12s; }
.cm.is-in .cm-body { opacity: 1; transform: none; transition: opacity 1s var(--ease-out) .3s, transform 1s var(--ease-out) .3s; }
.cm.is-in .cm-cta > * { opacity: 1; transform: none; transition: opacity .8s var(--ease-out) .45s, transform .9s var(--ease-out) .45s, box-shadow .25s, background .25s; }
.cm.is-in .cm-cta > * + * { transition-delay: .55s; }
.cm.is-done .cm-cta > * { transition: transform .25s var(--ease-out), box-shadow .25s, background .25s; }

@media (max-width: 900px) {
  .cm-inner { flex-direction: column; align-items: flex-start; }
  .cm-cta { flex-direction: row; width: auto; flex: none; flex-wrap: wrap; }
  .cm-btn { min-width: 200px; }
}
@media (max-width: 767px) {
  .cm { min-height: 0; }
  .cm-inner { padding-block: 64px 70px; gap: 30px; }
  .cm-title { font-size: 44px; }
  .cm-body { font-size: 17px; max-width: 320px; }
  .cm-cta { flex-direction: column; width: 100%; max-width: 300px; }
  .cm-btn { min-width: 0; width: 100%; }
  .cm-bg img { object-position: 72% 30%; }
  .cm-shade { background:
    linear-gradient(90deg, rgba(4,11,21,.9) 0%, rgba(4,11,21,.45) 70%, rgba(4,11,21,.3) 100%),
    linear-gradient(180deg, #040b15 0%, transparent 25%, transparent 70%, #040b15 100%); }
}