/* ==========================================================================
   12 CTA — mono ribbons around a hairline frame over the logo horizon (inline SVG)
   ========================================================================== */
#cta { overflow: clip; --cta-lbl: var(--text-3); /* ~5:1 on --bg, AA for 12px mono labels */ }
/* ribbons butt against this section's bar and the footer bar (the -1px overlaps share one hairline) */
#cta .cta-wrap > .cta-ribbon:first-child { margin-top: -1px; }
#cta .cta-wrap > .cta-ribbon:last-child { margin-bottom: -1px; }

/* ---------- ribbons ---------- */
#cta .cta-ribbon {
  height: 54px; display: flex; align-items: center; position: relative;
  border-block: 1px solid var(--line);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.025), transparent);
}
#cta .cta-ribbon .marquee-track { align-items: center; }
#cta .cta-rib-item {
  display: inline-flex; align-items: center; gap: 18px; padding-inline: 18px 30px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-2);
}
#cta .cta-rib-item b { font-weight: 400; color: var(--text-4); }
#cta .cta-rib-item i { font-style: normal; color: var(--text-4); }
/* every third ampersand is a touch brighter (neutral): the CTA's red signal is the live dot in the Free pill */
#cta .cta-rib-item:nth-child(3n) i { color: var(--text-2); }

/* ---------- band (Aeye grid) ---------- */
#cta .cta-band { position: relative; padding-block: clamp(40px, 5vw, 72px); }
#cta .cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* cell = shell / 20 (64px at 1440), anchored on the left rail so the vertical lines land on both rails */
  --cell: calc(var(--shell) / 20);
  background:
    linear-gradient(var(--line) 1px, transparent 1px) var(--gutter) 0 / var(--cell) var(--cell),
    linear-gradient(90deg, var(--line) 1px, transparent 1px) var(--gutter) 0 / var(--cell) var(--cell);
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000 20%, transparent 85%);
          mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000 20%, transparent 85%);
  opacity: .8;
}

/* ---------- frame ---------- */
#cta .cta-frame { position: relative; padding: 8px; box-shadow: inset 0 0 0 1px var(--line-2); background: var(--bg); }
#cta .cta-sq { position: absolute; width: 9px; height: 9px; background: #ededed; z-index: 3; }
#cta .cta-sq.tl { left: -5px; top: -5px; }  #cta .cta-sq.tr { right: -5px; top: -5px; }
#cta .cta-sq.bl { left: -5px; bottom: -5px; } #cta .cta-sq.br { right: -5px; bottom: -5px; }

#cta .cta-inner {
  position: relative; overflow: hidden; isolation: isolate;
  box-shadow: inset 0 0 0 1px var(--line);
  background: var(--bg);
}
#cta .cta-bg {
  position: absolute; left: 0; right: 0; top: calc(var(--shell) * -0.055); aspect-ratio: 1600 / 760; z-index: -2;
  will-change: transform;
  /* no CSS mask here: Chrome mis-maps userSpaceOnUse stroke gradients on non-scaling strokes inside a CSS-masked
     layer (the arcs vanished at some scroll positions). The top/bottom fade is the .ch-fade rect inside the SVG. */
}
/* neutral line work with gradient strokes that fade to transparent; the hot point is the composition's red signal.
   --rise (SVG units) lifts the dome out of the horizon: cta.js scrubs it as the frame enters. */
#cta .cta-art { --rise: 0; display: block; width: 100%; height: 100%; overflow: hidden; }
#cta .ch-fade { pointer-events: none; }
#cta .cta-art * { transform-box: view-box; }
#cta .ch-rise { transform: translateY(calc(var(--rise) * 1px)); }
#cta .ch-arc { fill: none; vector-effect: non-scaling-stroke; }
#cta .ch-dash { stroke: #fff; stroke-opacity: .14; stroke-dasharray: 1 6; }
#cta .ch-dial { transform-origin: 800px 470px; animation: ch-turn 160s linear infinite; }
@keyframes ch-turn { to { transform: rotate(360deg); } }
#cta .ch-dial path { stroke: #fff; stroke-opacity: .1; vector-effect: non-scaling-stroke; }
#cta .ch-dial path.mj { stroke-opacity: .26; }
#cta .ch-cap { fill: rgba(255,255,255,.025); stroke: #fff; stroke-opacity: .3; vector-effect: non-scaling-stroke; }
#cta .ch-mol path { stroke: #fff; stroke-opacity: .18; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
#cta .ch-mol circle { fill: #050506; stroke: #fff; stroke-opacity: .28; vector-effect: non-scaling-stroke; }
#cta .ch-mol .ch-mol-c { fill: #ededed; fill-opacity: .7; stroke: none; }
#cta .ch-mol { animation: ch-bob 9s var(--ease-in-out) infinite alternate; }
@keyframes ch-bob { from { transform: translateY(-5px); } to { transform: translateY(5px); } }
#cta .ch-sat { transform-origin: 800px 470px; animation: ch-orbit var(--d) linear infinite; animation-delay: var(--o, 0s); }
#cta .ch-sat circle { fill: #ededed; }
@keyframes ch-orbit { to { transform: rotate(-360deg); } }
#cta .ch-floor path { fill: none; stroke: #fff; stroke-opacity: .09; vector-effect: non-scaling-stroke; }
#cta .ch-refl path { fill: none; stroke: #fff; stroke-opacity: .12; vector-effect: non-scaling-stroke; }
#cta .ch-hz { fill: none; vector-effect: non-scaling-stroke; }
#cta .ch-ping { fill: none; stroke: #ff6a52; stroke-opacity: .6; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: 50% 50%; animation: ch-ping 3.4s var(--ease-out) infinite; }
@keyframes ch-ping { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(3); opacity: 0; } }
#cta .ch-flare { transform-box: fill-box; transform-origin: 50% 50%; }
#cta .cta-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 34% at 50% 66%, rgba(5,5,6,.62), transparent 100%),
    linear-gradient(180deg, transparent 38%, rgba(5,5,6,.35) 52%, rgba(5,5,6,.84) 72%, var(--bg) 92%);
}

#cta .cta-content {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 24px;
  padding: calc(var(--shell) * .27) var(--pad) clamp(48px, 5vw, 76px);
}
#cta .cta-content .display { max-width: 13ch; font-size: clamp(42px, 6vw, 92px); }
#cta .cta-content .lead { max-width: 600px; }
#cta .cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 4px; }

/* email form */
#cta .cta-form { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; width: min(460px, 100%); margin-top: 14px; }
#cta .cta-or { color: var(--cta-lbl); display: flex; align-items: center; gap: 12px; width: 100%; }
#cta .cta-or::before, #cta .cta-or::after { content: ""; height: 1px; flex: 1; background: var(--line-2); }
#cta .cta-field {
  position: relative; display: flex; align-items: center; gap: 6px; width: 100%; height: 48px; padding: 0 8px 0 14px;
  border-radius: var(--r); background: rgba(10,10,10,.82); box-shadow: 0 0 0 1px #2e2e2e;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: box-shadow .15s cubic-bezier(0.4, 0, 0.2, 1);
}
#cta .cta-field:hover { box-shadow: 0 0 0 1px #454545; }
#cta .cta-field:focus-within { box-shadow: 0 0 0 1px #8f8f8f, 0 0 0 4px rgba(255,255,255,.12); }
#cta .cta-at { width: 16px; height: 16px; color: var(--text-3); flex: none; }
#cta .cta-field input {
  flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; padding: 0 6px;
  font-size: 14.5px; letter-spacing: -0.01em;
}
#cta .cta-field input::placeholder { color: var(--text-3); }
#cta .cta-field .btn { flex: none; }
#cta .cta-msg { font-size: 12px; color: var(--cta-lbl); min-height: 18px; transition: color .3s; }
#cta .cta-msg .nw { white-space: nowrap; }
#cta .cta-form.is-error .cta-field { box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft); }
#cta .cta-form.is-error .cta-msg { color: var(--accent-light); }
#cta .cta-form.is-done .cta-msg { color: #7cf0b5; }
#cta .cta-form.is-done .cta-field { box-shadow: 0 0 0 1px rgba(62,224,143,.5); }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  #cta .cta-content { padding-top: calc(var(--shell) * .29); }
}
@media (max-width: 767px) {
  #cta .cta-frame { padding: 5px; }
  #cta .cta-bg { top: -24px; left: -62%; right: -62%; }
  #cta .cta-shade {
    background:
      radial-gradient(ellipse 80% 30% at 50% 52%, rgba(5,5,6,.6), transparent 100%),
      linear-gradient(180deg, transparent 28%, rgba(5,5,6,.5) 40%, rgba(5,5,6,.9) 55%, var(--bg) 70%);
  }
  #cta .cta-content { padding: 230px 18px 36px; gap: 20px; }
  #cta .cta-btns { width: 100%; }
  #cta .cta-btns .btn { flex: 1 1 100%; }
  #cta .cta-at { display: none; }
  #cta .cta-field { padding-left: 8px; }
  #cta .cta-ribbon { height: 46px; }
  #cta .cta-band::before { --cell: calc(var(--shell) / 6); }
  #cta .cta-msg { min-height: 36px; }
  #cta .cta-rib-item { font-size: 11px; gap: 14px; }
}
/* pill over the horizon: neutral glass; with the hot point it is one of the band's two red marks */
#cta .cta-content .pill { background: rgba(10,10,10,.66); color: var(--text); }
#cta .cta-content .pill-tag { background: rgba(255,255,255,.08); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  #cta .ch-dial, #cta .ch-mol, #cta .ch-sat, #cta .ch-ping { animation: none; }
  #cta .ch-sat, #cta .ch-ping { display: none; }
}