/* 6 · FINAL CTA — the closing line inside an orbiting ring of app fragments, plus the footer.
   Logic: js/sections/finale.js */

.finale { min-height: max(100svh, 760px); display: flex; flex-direction: column; justify-content: center; padding-bottom: 0; overflow: hidden; }
.finale-inner { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.finale-title { position: relative; }
.finale-title .display { position: relative; z-index: 2; }
.h-final { font-size: clamp(48px, 5.9vw, 108px); }
.h-final .ln { text-align: center; }
.finale .btn-lg { margin-top: clamp(150px, 21vh, 220px); position: relative; z-index: 4; }

.ring { position: absolute; left: 50%; top: 50%; width: min(1280px, 108vw); aspect-ratio: 1000 / 400; margin-left: calc(min(1280px, 108vw) / -2); margin-top: calc(min(1280px, 108vw) * -.2); pointer-events: none; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring path { fill: none; stroke-width: 1.2; }
.ring-back { z-index: 0; }
.ring-back path { stroke: rgba(243, 238, 227, .14); }
.ring-front { z-index: 3; }
.ring-front path { stroke: rgba(155, 235, 207, .4); }
.r-chip { position: absolute; left: 50%; top: 50%; z-index: var(--z, 1); opacity: var(--o, 0); will-change: transform;
  transform: translate(-50%, -50%) translate(var(--x, 0px), var(--y, 0px)) scale(var(--sc, 1)); filter: blur(var(--bl, 0px)); }
.r-chip .mini-job { width: 290px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7); }
.r-dot i { display: block; width: 10px; height: 10px; border-radius: 50%; background: #EFFFF7; box-shadow: 0 0 0 4px rgba(108, 255, 192, .25), 0 0 30px 6px rgba(108, 255, 192, .7); }

/* ---------- mobile ---------- */
@media (max-width: 900px) {
  .finale .btn-lg { margin-top: 120px; }
  .ring { width: 150vw; margin-left: -75vw; margin-top: -30vw; }
  .r-chip { z-index: 1 !important; }
  .r-chip:has(.mini-job), .r-chip:has(.paid) { display: none; }
}