/* Closing CTA — Figma 2339:747 / 2349:1864. Follows FAQ on the same ground, so no top padding. */
.cta { padding-block: 0 var(--sec-pad); }

.cta__band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 84px 24px;
  border-radius: 40px;
  overflow: hidden;
  text-align: center;
  color: #fff;
  background: linear-gradient(146deg, var(--cta-a) 13.4%, var(--cta-b) 53.66%, #1e7fa8 86.6%);
}
.cta__title {
  max-width: 720px;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
}
.cta__lede {
  max-width: 600px;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
}
.cta__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.cta__note-line {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255, 255, 255, .72);
}
.cta__band { position: relative; isolation: isolate; }
.cta__band > :not(.cta__story) { position: relative; z-index: 1; }

/* =========================================================================
   Story reveal — parcel → your 1 sq.ft. → certificate → verified on-chain.
   Lives in the band's side gutters (the copy is 720px wide), so only ≥1180px.
   Hidden until JS arms it (.is-armed); plays once on .is-live.
   ========================================================================= */
.cta__story { display: none; }

@media (min-width: 1180px) {
  .cta__story { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }

  /* soft light behind each piece of art */
  .cta__story::before, .cta__story::after {
    content: ""; position: absolute; top: 50%; width: 340px; aspect-ratio: 1; translate: 0 -50%; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .16), transparent 70%);
  }
  .cta__story::before { left: -60px; }
  .cta__story::after { right: -70px; }

  /* ---- 1 · the parcel ---- */
  .cta__plot { position: absolute; left: 34px; top: 50%; width: 200px; translate: 0 -54%; rotate: -4deg; }
  .cta__plot-svg { width: 200px; height: 210px; overflow: visible; }
  .cta__grid path { stroke: rgba(255, 255, 255, .26); stroke-width: 1; }
  .cta__edge { stroke: #fff; stroke-width: 2; stroke-linejoin: round; fill: rgba(255, 255, 255, .06); }
  .cta__pins circle { fill: var(--ink-deep); stroke: #fff; stroke-width: 1.5; }
  .cta__unit { fill: var(--accent); filter: drop-shadow(0 0 8px rgba(49, 226, 154, .9)); transform-box: fill-box; transform-origin: center; }

  /* ---- 2 · the certificate (text-free) ---- */
  .cta__cert {
    position: absolute; right: 30px; top: 50%; width: 200px; translate: 0 -50%; rotate: 3deg;
    padding: 16px; border-radius: 18px;
    background: #fff; box-shadow: 0 30px 60px -24px rgba(6, 33, 31, .6), 0 0 0 1px rgba(255, 255, 255, .5);
  }
  .cta__cert-head { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; }
  .cta__cert-mark { display: grid; place-items: center; width: 34px; height: 34px; }
  .cta__cert-mark img { width: 34px; height: 34px; }
  .cta__cert-lines { display: grid; gap: 6px; }
  .cta__cert-lines i, .cta__cert-rows i { display: block; height: 7px; border-radius: 99px; background: var(--line); }
  .cta__cert-lines i:first-child { width: 90%; height: 9px; background: var(--ink); opacity: .85; }
  .cta__cert-lines i:last-child { width: 60%; }
  .cta__cert-rows { display: grid; gap: 9px; margin: 16px 0; padding-top: 14px; border-top: 1px dashed var(--line); }
  .cta__cert-rows i:nth-child(1) { width: 100%; }
  .cta__cert-rows i:nth-child(2) { width: 78%; }
  .cta__cert-rows i:nth-child(3) { width: 88%; }
  .cta__chain {
    position: relative; display: grid; place-items: center; height: 32px; overflow: hidden; border-radius: 999px;
    background: var(--ink-deep); color: var(--ink-deep);
    transition: background-color .4s var(--ease);
  }
  .cta__chain-fill { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(49, 226, 154, .25), rgba(49, 226, 154, .55)); transform: scaleX(0); transform-origin: left; }
  .cta__chain-ok { position: relative; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .5s cubic-bezier(.34, 1.56, .64, 1); }

  /* Final state (no JS / reduced motion): the card shows its tick */
  .cta__story:not(.is-armed) .cta__chain { background: var(--accent); }
  .cta__story:not(.is-armed) .cta__chain-ok { opacity: 1; transform: none; }

  /* ---- Armed: everything waits ---- */
  .cta__story.is-armed .cta__edge,
  .cta__story.is-armed .cta__grid path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .cta__story.is-armed .cta__edge { fill-opacity: 0; }
  .cta__story.is-armed .cta__pins circle { opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: center; }
  .cta__story.is-armed .cta__unit { opacity: 0; transform: scale(.3); }
  .cta__story.is-armed .cta__cert { opacity: 0; transform: translateY(36px); }

  /* ---- Live: the sequence ---- */
  .cta__story.is-live .cta__edge { stroke-dashoffset: 0; fill-opacity: 1; transition: stroke-dashoffset 1.2s cubic-bezier(.45, .05, .25, 1), fill-opacity .6s 1s; }
  .cta__story.is-live .cta__pins circle { opacity: 1; transform: none; transition: opacity .3s, transform .5s var(--ease); }
  .cta__story.is-live .cta__pins circle:nth-child(1) { transition-delay: .05s; }
  .cta__story.is-live .cta__pins circle:nth-child(2) { transition-delay: .3s; }
  .cta__story.is-live .cta__pins circle:nth-child(3) { transition-delay: .55s; }
  .cta__story.is-live .cta__pins circle:nth-child(4) { transition-delay: .8s; }
  .cta__story.is-live .cta__pins circle:nth-child(5) { transition-delay: 1.05s; }
  .cta__story.is-live .cta__grid path { stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.45, .05, .25, 1) calc(1s + var(--i, 0) * .05s); }
  .cta__story.is-live .cta__unit { opacity: 1; transform: none; transition: opacity .3s 1.9s, transform .6s cubic-bezier(.34, 1.56, .64, 1) 1.9s; }
  .cta__story.is-live .cta__cert { opacity: 1; transform: none; transition: opacity .7s 2.5s, transform 1s var(--ease) 2.5s; }
  .cta__story.is-live .cta__chain-fill { animation: cta-fill 1.4s cubic-bezier(.4, 0, .2, 1) 3.4s forwards; }
  .cta__story.is-live .cta__chain { background: var(--accent); transition: background-color .4s 4.75s; }
  .cta__story.is-live .cta__chain-ok { opacity: 1; transform: none; transition-delay: 4.8s; }
}
@keyframes cta-fill {
  0% { transform: scaleX(0); opacity: 1; }
  92% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* Mobile 390 frame */
@media (max-width: 720px) {
  .cta__band {
    gap: 16px;
    padding: 52px 22px;
    border-radius: 32px;
    background: linear-gradient(113deg, var(--cta-a) 13.4%, var(--cta-b) 53.66%, #1e7fa8 86.6%);
  }
  .cta__br { display: none; }
  .cta__title { font-size: 27px; line-height: 1.18; }
  .cta__lede { font-size: 15px; }
  .cta__btns { flex-direction: column; align-self: stretch; gap: 10px; }
  .cta__btns .btn { width: 100%; }
  .cta__note-line { font-size: 12px; line-height: 1.4; }
}