/* Home: "How it works" (#agh-process). Prefix agh-proc-. Timeline draws itself when .agh-proc-timeline gets .is-in (ag-effects.js). */
.agh-process { background: var(--ag-bg); overflow: clip; }
.agh-proc-inner { position: relative; z-index: 1; }

/* ---------- Decorations: a clean surface with two big, very soft glows ---------- */
.agh-proc-deco { position: absolute; inset: 0; overflow: clip; pointer-events: none; z-index: 0; }
.agh-proc-glow {
  position: absolute; left: 50%; top: 52%; width: min(900px, 120vw); height: 520px;
  margin: -260px 0 0 calc(min(900px, 120vw) / -2);
  background: radial-gradient(closest-side, rgba(18, 163, 122, .10), transparent);
  animation: agh-proc-drift 22s ease-in-out infinite;
}
.agh-proc-glow--b {
  left: auto; right: -180px; top: -160px; width: 620px; height: 460px; margin: 0;
  background: radial-gradient(closest-side, rgba(52, 211, 153, .10), transparent);
  animation-duration: 30s; animation-direction: reverse;
}
html[data-theme="dark"] .agh-proc-glow { background: radial-gradient(closest-side, rgba(52, 211, 153, .09), transparent); }
html[data-theme="dark"] .agh-proc-glow--b { background: radial-gradient(closest-side, rgba(52, 211, 153, .06), transparent); }

/* ---------- Header ---------- */
.agh-proc-head { max-width: 680px; margin: 0 auto clamp(40px, 5.5vw, 68px); text-align: center; }
.agh-proc-head .agh-proc-lead { margin: 0 auto; max-width: 560px; }

/* ---------- Timeline (mobile first: vertical) ---------- */
.agh-proc-steps {
  --agp-node: 64px; --agp-gap: 26px;
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--agp-gap);
}
.agh-proc-step {
  position: relative; margin: 0; padding: 0;
  display: grid; grid-template-columns: var(--agp-node) minmax(0, 1fr); column-gap: 18px; align-items: start;
}

/* Track: one thin solid segment per step, from this node's centre to the next node's centre */
.agh-proc-line {
  position: absolute; z-index: 0; pointer-events: none; border-radius: 2px;
  left: calc(var(--agp-node) / 2 - 1px); top: calc(var(--agp-node) / 2);
  width: 2px; height: calc(100% + var(--agp-gap));
  background: var(--ag-line);
}
.agh-proc-line-fill {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, #05664F, #12A37A);
  box-shadow: 0 0 10px rgba(18, 163, 122, .28);
  transform-origin: 50% 0;
}
html[data-theme="dark"] .agh-proc-line-fill { background: linear-gradient(180deg, #10B981, #6EE7B7); box-shadow: 0 0 12px rgba(52, 211, 153, .3); }
html.ag-js .agh-proc-line-fill { transform: scaleY(0); }
.agh-proc-timeline.is-in .agh-proc-line-fill {
  transform: none;
  transition: transform .7s cubic-bezier(.55, .05, .9, .55) calc(.2s + var(--agp-i) * .7s);
}
.agh-proc-timeline.is-in .agh-proc-step:nth-child(2) .agh-proc-line-fill { transition-timing-function: cubic-bezier(.1, .45, .45, .95); }

/* Light sweep: a long, soft highlight glides slowly along the finished line.
   It is clipped to the segment and both ends sit under the nodes, so the two segments relay it through the middle node. */
.agh-proc-line-sheen { position: absolute; inset: 0 -6px; overflow: hidden; pointer-events: none; }
.agh-proc-line-sheen::after {
  content: ""; position: absolute; left: 50%; top: 0; width: 6px; height: 40%; margin-left: -3px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0));
  filter: blur(1.5px);
  transform: translateY(-100%);
}
.agh-proc-timeline.is-in .agh-proc-line-sheen::after { animation: agh-proc-sweep-y 8s linear calc(2.2s + var(--agp-i) * 2.88s) infinite both; }

/* Nodes */
.agh-proc-node {
  position: relative; z-index: 2; width: var(--agp-node); height: var(--agp-node);
  border-radius: 50%; background: var(--ag-bg); display: grid; place-items: center;
}
html.ag-js .agh-proc-node { opacity: 0; transform: scale(.35); }
.agh-proc-timeline.is-in .agh-proc-node {
  opacity: 1; transform: none;
  transition: transform .75s cubic-bezier(.34, 1.56, .64, 1) calc(.1s + var(--agp-i) * .72s), opacity .35s ease calc(.1s + var(--agp-i) * .72s);
}
/* Thin solid ring with a slowly rotating conic sheen (masked to the ring), so light travels around it */
.agh-proc-node-orbit {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(18, 163, 122, .26);
}
.agh-proc-node-orbit::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; padding: 1.5px;
  background: conic-gradient(from 0deg, transparent 0deg 200deg, rgba(18, 163, 122, .25) 290deg, #12A37A 352deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ag-spin-slow 10s linear infinite; animation-delay: calc(var(--agp-i) * -3.3s);
}
.agh-proc-node-core {
  position: relative; width: calc(var(--agp-node) - 14px); height: calc(var(--agp-node) - 14px); border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: 1.35rem;
  background: var(--ag-grad);
  box-shadow: 0 10px 24px rgba(5, 102, 79, .32), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .45s var(--ag-ease);
}
.agh-proc-node-core::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(18, 163, 122, .6); opacity: 0;
  animation: agh-proc-ripple 3s ease-out calc(1.9s + var(--agp-i) * .6s) infinite both;
}
.agh-proc-node-core .bi { line-height: 1; }
.agh-proc-node-num {
  position: absolute; top: -4px; right: -8px; z-index: 1;
  min-width: 28px; height: 24px; padding: 0 7px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em; line-height: 1;
  color: var(--ag-brand); background: var(--ag-surface); border: 1.5px solid var(--ag-line);
  box-shadow: var(--ag-shadow);
}
.agh-proc-step:hover .agh-proc-node-core { transform: scale(1.08); }
html[data-theme="dark"] .agh-proc-node-orbit { border-color: rgba(52, 211, 153, .28); }
html[data-theme="dark"] .agh-proc-node-orbit::before { background: conic-gradient(from 0deg, transparent 0deg 200deg, rgba(52, 211, 153, .25) 290deg, #6EE7B7 352deg, transparent 360deg); }
html[data-theme="dark"] .agh-proc-node-core { box-shadow: 0 0 0 1px rgba(110, 231, 183, .35), 0 12px 28px rgba(16, 185, 129, .22), inset 0 1px 0 rgba(255, 255, 255, .18); }
html[data-theme="dark"] .agh-proc-node-core::after { border-color: rgba(52, 211, 153, .6); }

/* Cards */
.agh-proc-card-wrap { display: flex; min-width: 0; }
.agh-proc-card {
  position: relative; flex: 1; min-width: 0;
  background: var(--ag-surface); border: 1px solid var(--ag-line); border-radius: var(--ag-radius);
  padding: 22px 22px 24px; text-align: left;
  box-shadow: 0 1px 2px rgba(2, 44, 34, .04);
  transition: transform .45s var(--ag-ease), border-color .45s var(--ag-ease);
}
/* Caret pointing at the node (left on mobile, top on desktop) */
.agh-proc-card::before {
  content: ""; position: absolute; z-index: 2; top: 22px; left: -8px; width: 15px; height: 15px;
  background: var(--ag-surface); border-left: 1px solid var(--ag-line); border-bottom: 1px solid var(--ag-line);
  border-bottom-left-radius: 3px; transform: rotate(45deg);
  transition: border-color .45s var(--ag-ease);
}
/* Glow shadow layer (opacity-only transition) */
.agh-proc-card::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: 0 26px 56px -18px rgba(5, 102, 79, .38), 0 0 0 4px rgba(18, 163, 122, .08);
  transition: opacity .45s var(--ag-ease);
}
.agh-proc-card-fx { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.agh-proc-card-fx::before {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(320px circle at var(--ag-mx, 50%) var(--ag-my, 0%), var(--ag-glow), transparent 60%);
  transition: opacity .4s var(--ag-ease);
}
.agh-proc-card-fx::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #05664F, #12A37A, #6EE7B7);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .6s var(--ag-ease);
}
.agh-proc-card-num {
  position: absolute; right: 12px; top: -10px;
  font-size: 5.6rem; font-weight: 800; line-height: 1; letter-spacing: -.05em;
  background: var(--ag-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .1; user-select: none;
  transition: transform .6s var(--ag-ease), opacity .6s var(--ag-ease);
}
.agh-proc-card .agh-proc-kicker,
.agh-proc-card .agh-proc-card-title,
.agh-proc-card .agh-proc-card-text { position: relative; z-index: 1; }
.agh-proc-card .agh-proc-kicker {
  display: inline-block; margin-bottom: 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ag-brand);
}
.agh-proc-card .agh-proc-card-title {
  margin: 0 0 8px; font-family: var(--ag-font); font-size: 1.18rem; font-weight: 700; line-height: 1.3;
  letter-spacing: -.01em; color: var(--ag-ink);
}
.agh-proc-card .agh-proc-card-text { margin: 0; font-size: .95rem; line-height: 1.7; color: var(--ag-text); }

.agh-proc-card:hover { transform: translateY(-6px); border-color: rgba(18, 163, 122, .45); }
.agh-proc-card:hover::before { border-color: rgba(18, 163, 122, .45); }
.agh-proc-card:hover::after,
.agh-proc-card:hover .agh-proc-card-fx::before { opacity: 1; }
.agh-proc-card:hover .agh-proc-card-fx::after { transform: none; }
.agh-proc-card:hover .agh-proc-card-num { opacity: .18; transform: translate(-6px, 6px) scale(1.05); }

html[data-theme="dark"] .agh-proc-card { box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset; }
html[data-theme="dark"] .agh-proc-card::after { box-shadow: 0 28px 60px -18px rgba(0, 0, 0, .6), 0 0 34px -6px rgba(52, 211, 153, .22); }
html[data-theme="dark"] .agh-proc-card-num { opacity: .13; }
html[data-theme="dark"] .agh-proc-card:hover { border-color: rgba(52, 211, 153, .4); }
html[data-theme="dark"] .agh-proc-card:hover::before { border-color: rgba(52, 211, 153, .4); }
html[data-theme="dark"] .agh-proc-card:hover .agh-proc-card-num { opacity: .22; }

/* CTA */
.agh-proc-cta { margin-top: clamp(40px, 5vw, 60px); text-align: center; }
.agh-proc-btn .bi { display: inline-block; transition: transform .35s var(--ag-ease); }
.agh-proc-btn:hover .bi, .agh-proc-btn:focus-visible .bi { transform: translateX(4px); }

/* ---------- Desktop: horizontal timeline ---------- */
@media (min-width: 992px) {
  .agh-proc-steps { --agp-node: 80px; --agp-gap: 30px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agh-proc-step { display: flex; flex-direction: column; align-items: center; }
  .agh-proc-line {
    left: 50%; top: calc(var(--agp-node) / 2 - 1px);
    width: calc(100% + var(--agp-gap)); height: 2px;
  }
  .agh-proc-line-fill { background: linear-gradient(90deg, #05664F, #12A37A); transform-origin: 0 50%; }
  html[data-theme="dark"] .agh-proc-line-fill { background: linear-gradient(90deg, #10B981, #6EE7B7); }
  html.ag-js .agh-proc-line-fill { transform: scaleX(0); }
  .agh-proc-line-sheen { inset: -6px 0; }
  .agh-proc-line-sheen::after {
    left: 0; top: 50%; width: 40%; height: 6px; margin: -3px 0 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0));
    transform: translateX(-100%);
  }
  .agh-proc-timeline.is-in .agh-proc-line-sheen::after { animation-name: agh-proc-sweep-x; }
  .agh-proc-node-core { font-size: 1.6rem; }
  .agh-proc-card-wrap { flex: 1; width: 100%; margin-top: 30px; }
  .agh-proc-card { padding: 34px 28px 30px; text-align: center; }
  .agh-proc-card::before {
    top: -8px; left: 50%; margin-left: -7.5px;
    border-bottom: 0; border-top: 1px solid var(--ag-line); border-bottom-left-radius: 0; border-top-left-radius: 3px;
  }
  .agh-proc-card-num { font-size: 7rem; right: 14px; top: -14px; }
  .agh-proc-card:hover { transform: translateY(-8px); }
}

/* ---------- Keyframes ---------- */
/* sweep: enters from under one node, leaves under the next (36% of 8s = the 2.88s relay step), then rests */
@keyframes agh-proc-sweep-y {
  0% { transform: translateY(-100%); }
  36%, 100% { transform: translateY(250%); }
}
@keyframes agh-proc-sweep-x {
  0% { transform: translateX(-100%); }
  36%, 100% { transform: translateX(250%); }
}
@keyframes agh-proc-ripple {
  0% { transform: scale(.96); opacity: 0; }
  12% { opacity: .75; }
  100% { transform: scale(1.7); opacity: 0; }
}
@keyframes agh-proc-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(3%, -4%) scale(1.06); }
}

/* ---------- Reduced motion: line fully drawn, nodes shown, no loops ---------- */
@media (prefers-reduced-motion: reduce) {
  html.ag-js .agh-proc-line-fill,
  html.ag-js .agh-proc-node { transform: none; opacity: 1; transition: none; }
  .agh-proc-line-sheen { display: none; }
  .agh-proc-node-core::after { animation: none; opacity: 0; }
  .agh-proc-node-orbit::before, .agh-proc-glow { animation: none; }
  .agh-proc-card, .agh-proc-card:hover { transition: none; transform: none; }
}