/*
 * "From first call to first sale" on the home page (.steps-sec > .steps--flow > .step). Loaded on the home page only; js/steps.js adds the reveal.
 * Each step is a glass card: a gold number, a dashed rail that flows towards the drawing of the step, a large faint number and a top line that fills in.
 * Between the cards a small gold arrow (below the card on a phone). A slow blue / gold glow floats behind the section. Everything moves with transform /
 * opacity only and stops under prefers-reduced-motion; without the script (or with reduced motion) all the cards are simply visible. RTL: logical
 * properties, the rail flows the other way and the arrows turn round.
 */
.steps-sec { isolation: isolate; }
.steps-sec::before, .steps-sec::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(70px); }
.steps-sec::before { inline-size: 520px; block-size: 520px; inset-block-start: -180px; inset-inline-start: -120px; background: rgba(22, 119, 255, .28); animation: steps-float 16s ease-in-out infinite alternate; }
.steps-sec::after { inline-size: 440px; block-size: 440px; inset-block-end: -200px; inset-inline-end: -100px; background: rgba(201, 163, 73, .2); animation: steps-float 20s ease-in-out infinite alternate-reverse; }
@keyframes steps-float { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(60px, 36px, 0) scale(1.18); } }

.steps--flow { gap: 28px; }
.steps--flow .step {
  --i: 0; position: relative; display: flex; flex-direction: column; overflow: visible; padding: 26px 26px 30px; border-radius: 22px; animation: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025) 60%); border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .6); transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, border-color .3s ease, opacity .6s ease;
}
.steps--flow .step:nth-child(2) { --i: 1; } .steps--flow .step:nth-child(3) { --i: 2; } .steps--flow .step:nth-child(4) { --i: 3; } .steps--flow .step:nth-child(5) { --i: 4; }
.steps--flow .step > h3, .steps--flow .step > p, .steps--flow .step > .step-top { position: relative; z-index: 1; }
.steps--flow .step h3 { margin: 0 0 .45em; font-size: 1.3rem; }
.steps--flow .step p { max-inline-size: 34em; }
/* top line that fills in */
.steps--flow .step > .step-top::before { content: ""; position: absolute; inset-inline: 24px; inset-block-start: -27px; block-size: 3px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--gold), var(--sky)); transform-origin: left center; }
[dir="rtl"] .steps--flow .step > .step-top::before { transform-origin: right center; }
.step-top { display: flex; align-items: center; gap: 12px; margin-block-end: 20px; }
.step-num { position: relative; flex: none; display: grid; place-items: center; inline-size: 48px; block-size: 48px; margin: 0; border-radius: 50%; font-weight: 800; font-size: 1.2rem; color: var(--navy-950); background: linear-gradient(145deg, #f3d98b, var(--gold)); box-shadow: 0 6px 18px rgba(201, 163, 73, .45); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.step-num::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(201, 163, 73, .7); animation: steps-ping 2.8s ease-out infinite; }
.steps--flow .step:nth-child(2) .step-num::after { animation-delay: .9s; } .steps--flow .step:nth-child(3) .step-num::after { animation-delay: 1.8s; }
@keyframes steps-ping { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.7); opacity: 0; } }
.step-rail { flex: 1; min-inline-size: 18px; block-size: 2px; border-radius: 2px; opacity: .75; background: repeating-linear-gradient(90deg, rgba(201, 163, 73, .9) 0 7px, transparent 7px 14px); background-size: 14px 2px; animation: steps-flow 1.1s linear infinite; }
[dir="rtl"] .step-rail { animation-direction: reverse; }
@keyframes steps-flow { to { background-position: 14px 0; } }
.step-ico { flex: none; display: grid; place-items: center; inline-size: 46px; block-size: 46px; border-radius: 14px; color: var(--sky); background: rgba(56, 189, 248, .12); border: 1px solid rgba(56, 189, 248, .35); transition: transform .3s cubic-bezier(.2, .7, .2, 1), background .3s ease; }
.step-ico .ico { inline-size: 24px; block-size: 24px; }
.step-ghost { position: absolute; z-index: 0; inset-inline-end: 18px; inset-block-end: -20px; font-size: 5.5rem; line-height: 1; font-weight: 800; letter-spacing: -.04em; color: rgba(255, 255, 255, .035); pointer-events: none; transition: color .3s ease, transform .4s cubic-bezier(.2, .7, .2, 1); }
/* the arrow between two cards */
.steps--flow .step:not(:last-child)::after {
  content: "\203A"; position: absolute; z-index: 2; inset-block-start: 38px; inset-inline-start: calc(100% + 14px); transform: translateX(-50%); inline-size: 30px; block-size: 30px; border: 0; display: grid; place-items: center;
  border-radius: 50%; background: var(--gold); color: var(--navy-950); font-size: 1.5rem; font-weight: 800; line-height: 1; padding-block-end: 3px; box-shadow: 0 4px 14px rgba(201, 163, 73, .5);
}
[dir="rtl"] .steps--flow .step:not(:last-child)::after { content: "\2039"; transform: translateX(50%); }
@media (max-width: 859px) {
  .steps--flow .step:not(:last-child)::after { inset-block-start: auto; inset-block-end: -30px; inset-inline-start: 50%; transform: translateX(-50%) rotate(90deg); }
  [dir="rtl"] .steps--flow .step:not(:last-child)::after { transform: translateX(50%) rotate(90deg); }
  .steps--flow { gap: 40px; }
  .steps--flow .step { padding: 22px 22px 28px; }
  .step-ghost { font-size: 5rem; }
}
@media (min-width: 860px) { .steps--flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; } }
@media (hover: hover) {
  .steps--flow .step:hover { transform: translateY(-8px); border-color: rgba(201, 163, 73, .6); box-shadow: 0 26px 50px -20px rgba(0, 0, 0, .75), 0 0 36px -6px rgba(201, 163, 73, .35); }
  .steps--flow .step:hover .step-num { transform: scale(1.1) rotate(-6deg); }
  .steps--flow .step:hover .step-ico { transform: translateY(-3px) scale(1.06); background: rgba(56, 189, 248, .22); }
  .steps--flow .step:hover .step-ghost { color: rgba(201, 163, 73, .16); transform: translateY(-6px) scale(1.04); }
}
/* the reveal (js/steps.js adds .steps-armed only when the section is still below the fold, then .is-in on each card, one after the other) */
@media (prefers-reduced-motion: no-preference) {
  .steps-armed .step { opacity: 0; transform: translateY(34px); }
  .steps-armed .step > .step-top::before { transform: scaleX(0); }
  .steps-armed .step.is-in { opacity: 1; transform: none; transition-delay: calc(var(--i) * 170ms), 0s, 0s, calc(var(--i) * 170ms); transition-duration: .7s, .3s, .3s, .7s; }
  .steps-armed .step.is-in > .step-top::before { transform: scaleX(1); transition: transform .9s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * 170ms + 300ms); }
}
@media (prefers-reduced-motion: reduce) {
  .steps-sec::before, .steps-sec::after, .step-num::after, .step-rail { animation: none; }
  .step-num::after { display: none; }
  .steps--flow .step, .step-num, .step-ico, .step-ghost { transition: none; }
}