/* How it works / FAQ / Contact polish. Everything animates on transform + opacity; scroll drives CSS vars only. */

/* ---- How it works: a light trail joins the three steps as you scroll; each card catches it in turn ----
   core.js writes --p (0..1 as the list crosses the viewport) onto .steps[data-p]. */
.steps{--t:clamp(0,(var(--p,1) - .15) * 3,1);--gapk:.5;position:relative;padding-top:64px}
.steps::before,.steps::after{content:"";position:absolute;top:22px;left:30px;right:calc((100% - 36px) / 3 - 30px);height:1px;pointer-events:none}
.steps::before{background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 6px,transparent 6px 12px)}
.steps::after{height:2px;margin-top:-.5px;transform-origin:0 50%;transform:scaleX(var(--t));
  background:linear-gradient(90deg,rgba(var(--spot-rgb),.25),var(--spot) 85%,#fff);box-shadow:0 0 14px rgba(var(--spot-rgb),.7)}
.steps li{--k:clamp(0,(var(--t) - var(--i) * var(--gapk) + .06) * 10,1);overflow:visible}
.steps li::after{display:none}
.steps li>:not(.lit){position:relative}
/* the node on the trail */
.steps li::before{content:"";position:absolute;left:24px;top:-48px;width:13px;height:13px;border-radius:50%;background:var(--spot);
  box-shadow:0 0 0 5px rgba(var(--spot-rgb),.18),0 0 22px rgba(var(--spot-rgb),.9);opacity:calc(.22 + var(--k) * .78);transform:scale(calc(.55 + var(--k) * .45))}
/* the light the card catches: a lit edge, a warm corner, and one sheen that slides across as it arrives */
.lit{position:absolute;inset:-1px;border-radius:inherit;overflow:hidden;pointer-events:none;opacity:var(--k);
  border:1px solid rgba(var(--spot-rgb),.42);
  background:radial-gradient(420px circle at 18% -10%,rgba(var(--spot-rgb),.16),transparent 60%),linear-gradient(rgba(255,255,255,.035),transparent 45%)}
.lit::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,244,214,.13) 50%,transparent 65%);
  transform:translateX(calc(-100% + var(--k) * 200%))}
.steps .n{opacity:calc(.45 + var(--k) * .55)}
.steps h3{opacity:calc(.7 + var(--k) * .3)}

@media (max-width:980px){
  .steps{--gapk:.36;padding-top:0;padding-left:34px}
  .steps::before,.steps::after{top:40px;bottom:40px;left:6px;right:auto;width:1px;height:auto}
  .steps::before{background:repeating-linear-gradient(180deg,rgba(255,255,255,.18) 0 6px,transparent 6px 12px)}
  .steps::after{width:2px;margin:0 0 0 -.5px;transform-origin:50% 0;transform:scaleY(var(--t));background:linear-gradient(180deg,rgba(var(--spot-rgb),.25),var(--spot) 85%,#fff)}
  .steps li::before{left:-34px;top:34px}
}

/* ---- FAQ: height eases open, a rail lights the active question, and a glint crosses it ---- */
.qs details{position:relative}
.qs details.anim{clip-path:inset(0 0 0 -40px)}
.qs details::before{content:"";position:absolute;left:-22px;top:22px;bottom:22px;width:2px;border-radius:2px;background:var(--spot);
  box-shadow:0 0 12px rgba(var(--spot-rgb),.8);transform:scaleY(0);transform-origin:50% 0;transition:transform .5s var(--ease-out)}
.qs details[open]:not(.closing)::before{transform:none}
.qs summary{position:relative;overflow:hidden;isolation:isolate;align-items:center;transition:color .3s}
.qs summary:hover{color:#000}
.qs summary::after{content:"+";flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  font:400 22px/1 Inter;color:var(--text);transition:transform .4s var(--ease),background-color .3s,border-color .3s}
.qs summary:hover::after{border-color:rgba(22,23,26,.3)}
.qs details[open]:not(.closing) summary::after{transform:rotate(45deg);background:var(--spot);border-color:var(--spot);box-shadow:0 6px 18px -6px rgba(var(--spot-rgb),.9)}
.qs summary::before{content:"";position:absolute;z-index:-1;left:0;top:50%;width:26%;height:90px;margin-top:-45px;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(var(--spot-rgb),.5),rgba(var(--spot-rgb),0))}
.qs details.glint summary::before{animation:glint 1s var(--ease) forwards}
@keyframes glint{0%{opacity:0;transform:translateX(-60%)}25%{opacity:1}100%{opacity:0;transform:translateX(340%)}}
@media (max-width:640px){.qs details::before{left:-10px}.qs summary{font-size:18px}}

/* ---- Contact: a soft light follows the pointer over the form, fields light up as you use them ---- */
.form{position:relative;isolation:isolate}
.form::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(360px circle at var(--fx,50%) var(--fy,30%),rgba(var(--spot-rgb),.09),transparent 70%)}
.form:hover::before{opacity:1}
.form label{position:relative;transition:color .3s}
.form label:focus-within{color:#fff}
.form input:focus{background:rgba(255,255,255,.07)}
.form input{transition:border-color .25s,box-shadow .25s,background-color .25s}
/* a beam draws along the bottom of the field in focus */
.form label::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--spot-rgb),0),var(--spot) 50%,rgba(var(--spot-rgb),0));box-shadow:0 0 14px rgba(var(--spot-rgb),.8);
  opacity:0;transform:scaleX(.2);transition:transform .55s var(--ease-out),opacity .3s}
.form label:focus-within::after{opacity:1;transform:none}
/* every filled field gets its light on */
.form label::before{content:"";position:absolute;right:2px;top:5px;width:7px;height:7px;border-radius:50%;background:var(--spot);
  box-shadow:0 0 0 3px rgba(var(--spot-rgb),.18),0 0 12px rgba(var(--spot-rgb),.9);opacity:0;transform:scale(0);transition:opacity .3s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.form label.filled::before{opacity:1;transform:none}
/* submit: a flash of light and a tick */
.form .btn{position:relative;overflow:visible}
.form .btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 2px var(--spot);opacity:0}
.form.sent .btn{background:#fff3c4}
.form.sent .btn::after{animation:burst .9s var(--ease-out)}
@keyframes burst{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.18,1.6)}}
.form .btn .tick{width:18px;height:18px}
.form .btn .tick path{stroke-dasharray:1;stroke-dashoffset:1;animation:tick .5s var(--ease-out) .15s forwards}
@keyframes tick{to{stroke-dashoffset:0}}
.form .ok:not([hidden]){animation:okIn .6s var(--ease-out)}
@keyframes okIn{from{opacity:0;transform:translateY(8px)}}

@media (prefers-reduced-motion:reduce){
  .steps{--t:1}
  .qs details.glint summary::before{animation:none}
}