.fwtn-process{position:relative;overflow:hidden;background:#0a0a0a;color:#fff;padding:clamp(4rem,9vw,8rem) 0}
.fwtn-process__orb{position:absolute;border-radius:999px;filter:blur(140px)}
.fwtn-process__orb--one{top:0;right:0;width:min(500px,42vw);aspect-ratio:1;background:rgba(76,43,124,.12)}
.fwtn-process__orb--two{bottom:0;left:0;width:min(500px,42vw);aspect-ratio:1;background:rgba(107,63,160,.12)}
.fwtn-process__container{position:relative;z-index:1;width:min(96vw,1440px);margin:0 auto}
.fwtn-process__head{text-align:center;margin-bottom:clamp(2rem,5vw,5rem)}
.fwtn-process__eyebrow{display:inline-flex;padding:.56rem 1rem;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#6b3fa0;font-size:.85rem}
.fwtn-process__head h2{margin:1rem 0 0;font-size:clamp(2rem,5vw,3.75rem);line-height:1.08}
.fwtn-process__head h2 span{display:block}
.fwtn-process__head .is-accent{margin-top:.2rem;background:linear-gradient(90deg,#fff,#6b3fa0,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.fwtn-process__head p{margin:1rem auto 0;max-width:50ch;color:#9ca3af;font-size:clamp(1rem,1.8vw,1.25rem);line-height:1.45}
.fwtn-process__timeline{position:relative;display:grid;gap:2.6rem}
.fwtn-process__line{display:none}
.fwtn-step{position:relative;display:grid;grid-template-columns:1fr;gap:1rem}
.fwtn-step__content{border-radius:24px;padding:1.55rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(20px)}
.fwtn-step__icon{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,#5a3589,#6b3fa0);box-shadow:0 8px 28px rgba(107,63,160,.45);display:inline-flex;align-items:center;justify-content:center;color:#fff;position:relative;overflow:hidden}
.fwtn-step__icon::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.04) 45%,transparent)}
.fwtn-step__icon svg{position:relative;z-index:1;width:28px;height:28px;stroke:currentColor}
.fwtn-step__num{font-size:3rem;line-height:1;font-weight:700;color:rgba(255,255,255,.08);margin:.55rem 0 .15rem}
.fwtn-step h3{margin:0 0 .5rem;font-size:1.9rem;line-height:1.08}
.fwtn-step p{margin:0;color:#9ca3af;line-height:1.52;font-size:1.03rem}
.fwtn-step__meta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.95rem;font-size:.83rem;color:#9ca3af}
.fwtn-step__meta b{color:#fff;font-weight:600}
.fwtn-step__visual{border-radius:24px;padding:1.25rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(20px);position:relative;overflow:hidden}
.fwtn-step__visual::before{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 46%,rgba(76,43,124,.16));pointer-events:none}
.fwtn-step__phase{display:flex;justify-content:space-between;align-items:center;margin-bottom:.65rem;position:relative;z-index:1}
.fwtn-step__phase span{font-size:.76rem;color:#9ca3af;font-weight:500}
.fwtn-step__phase b{font-size:.86rem;color:#8d4ce8;font-weight:700}
.fwtn-step__progress{height:8px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.fwtn-step__progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#5a3589,#6b3fa0);box-shadow:0 0 12px rgba(107,63,160,.6),0 0 22px rgba(107,63,160,.45);transition:width 1.05s ease}
.fwtn-step__progress span::after{content:"";display:block;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-120%);animation:fwtnProgressSweep 2.8s linear infinite}
.fwtn-step__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-top:1rem;position:relative;z-index:1}
.fwtn-step__grid span{height:70px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);position:relative;overflow:hidden;padding:8px}
.fwtn-step__grid span::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.12),transparent)}
.fwtn-step__grid span.is-off{opacity:.45;filter:saturate(.65)}
.fwtn-step__grid span.is-on{opacity:1;background:linear-gradient(145deg,rgba(107,63,160,.22),rgba(255,255,255,.1));border-color:rgba(150,96,236,.35);box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 0 12px rgba(107,63,160,.18)}
.fwtn-step__grid span i{display:block;height:8px;border-radius:8px;background:rgba(255,255,255,.2);margin-bottom:6px}
.fwtn-step__grid span i:last-child{width:70%;margin-bottom:0;background:rgba(255,255,255,.12)}
.fwtn-step__grid span.is-on i:first-child{animation:fwtnGridPulse 1.8s ease-in-out infinite}
.fwtn-step__grid span.is-on i:last-child{animation:fwtnGridPulse 1.8s ease-in-out infinite .25s}
.fwtn-step-v-1 .fwtn-step__grid span i:first-child{height:10px;border:2px solid rgba(107,63,160,.7);background:rgba(107,63,160,.2)}
.fwtn-step-v-2 .fwtn-step__grid span{display:flex;gap:6px;align-items:stretch}
.fwtn-step-v-2 .fwtn-step__grid span i{flex:1;height:auto;margin:0;background:linear-gradient(145deg,rgba(107,63,160,.35),rgba(255,255,255,.16))}
.fwtn-step-v-3 .fwtn-step__grid span i{height:5px}
.fwtn-step-v-3 .fwtn-step__grid span i:first-child{width:100%;background:rgba(107,63,160,.45)}
.fwtn-step-v-4 .fwtn-step__grid span{display:flex;align-items:flex-end;gap:5px}
.fwtn-step-v-4 .fwtn-step__grid span i{flex:1;height:30%;margin:0;background:linear-gradient(180deg,rgba(107,63,160,.55),rgba(107,63,160,.18))}
.fwtn-step-v-4 .fwtn-step__grid span i:last-child{height:70%}
.fwtn-step__dot{display:none}
.fwtn-process__bottom{text-align:center;margin-top:clamp(1.8rem,4.5vw,4rem)}
.fwtn-process__bottom a{display:inline-flex;align-items:center;gap:.5rem;min-height:58px;padding:0 1.6rem;border-radius:20px;color:#fff;text-decoration:none;font-weight:600;background:linear-gradient(180deg,#5a3589,#4c2b7c);box-shadow:0 8px 32px rgba(76,43,124,.5)}
.fwtn-ps{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.fwtn-ps-2{transition-delay:.12s}.fwtn-ps-3{transition-delay:.24s}.fwtn-ps-4{transition-delay:.36s}
.fwtn-process-reveal.is-in .fwtn-ps{opacity:1;transform:translateY(0)}
.fwtn-process-reveal.is-in .fwtn-step__progress span{width:var(--fwtn-step-progress)}
.fwtn-step{transition:none}
.fwtn-step:hover .fwtn-step__icon{animation:fwtnProcessIcon .6s linear}
.fwtn-step-v-1 .fwtn-step__progress span{box-shadow:0 0 10px rgba(107,63,160,.35)}
.fwtn-step-v-2 .fwtn-step__progress span{box-shadow:0 0 12px rgba(107,63,160,.45)}
.fwtn-step-v-3 .fwtn-step__progress span{box-shadow:0 0 16px rgba(107,63,160,.55)}
.fwtn-step-v-4 .fwtn-step__progress span{box-shadow:0 0 20px rgba(107,63,160,.72),0 0 28px rgba(107,63,160,.5)}
@media (max-width:1023.98px){
  .fwtn-process{
    padding: clamp(4.8rem, 12vw, 6.8rem) 0;
  }
  .fwtn-process::before,
  .fwtn-process::after{
    content:"";
    position:absolute;
    z-index:0;
    border-radius:999px;
    filter:blur(56px);
    pointer-events:none;
  }
  .fwtn-process::before{
    width:44vw;
    height:44vw;
    min-width:150px;
    min-height:150px;
    right:-14vw;
    top:18vh;
    background:rgba(123,84,189,.24);
  }
  .fwtn-process::after{
    width:38vw;
    height:38vw;
    min-width:130px;
    min-height:130px;
    left:-12vw;
    bottom:16vh;
    background:rgba(76,43,124,.22);
  }
  .fwtn-process__orb{filter:blur(110px)}
  .fwtn-process__container{width:min(94vw,760px)}
  .fwtn-process__head{
    margin-bottom: clamp(1.35rem, 6vw, 2.3rem);
    text-align:left;
  }
  .fwtn-process__eyebrow{
    background:rgba(255,255,255,.1);
    border-color:rgba(255,255,255,.18);
    color:#e7dcff;
    font-weight:600;
  }
  .fwtn-process__head h2{
    font-size:clamp(1.95rem, 9vw, 2.8rem);
    line-height:1.06;
    text-wrap:balance;
  }
  .fwtn-process__head p{
    margin-top:.85rem;
    max-width: 52ch;
    font-size:clamp(.98rem, 3.9vw, 1.08rem);
    line-height:1.56;
    color:rgba(255,255,255,.74);
  }
  .fwtn-process__timeline{
    gap:1.25rem;
  }
  .fwtn-step{
    gap:.7rem;
  }
  .fwtn-step__content{
    border-radius:20px;
    padding:1.05rem;
    background:linear-gradient(148deg,rgba(255,255,255,.09),rgba(255,255,255,.04) 52%,rgba(107,63,160,.15));
    border-color:rgba(255,255,255,.14);
    box-shadow:0 14px 36px rgba(0,0,0,.35);
  }
  .fwtn-step__icon{
    width:54px;
    height:54px;
    border-radius:14px;
    box-shadow:0 8px 24px rgba(107,63,160,.45);
  }
  .fwtn-step__icon svg{width:24px;height:24px}
  .fwtn-step__num{
    font-size:2.35rem;
    margin:.48rem 0 .1rem;
  }
  .fwtn-step h3{
    font-size:1.38rem;
    margin:0 0 .4rem;
    line-height:1.12;
  }
  .fwtn-step p{
    font-size:.98rem;
    line-height:1.52;
    color:rgba(255,255,255,.72);
  }
  .fwtn-step__meta{
    margin-top:.78rem;
    gap:.45rem;
    display:grid;
    grid-template-columns:1fr;
    font-size:.8rem;
  }
  .fwtn-step__meta span{
    min-height:34px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.04);
    display:flex;
    align-items:center;
    padding:0 .7rem;
  }
  .fwtn-step__visual{
    border-radius:18px;
    padding:.9rem;
    background:linear-gradient(148deg,rgba(255,255,255,.09),rgba(255,255,255,.04) 55%,rgba(107,63,160,.17));
    border-color:rgba(255,255,255,.14);
  }
  .fwtn-step__phase{
    margin-bottom:.55rem;
  }
  .fwtn-step__phase span{
    font-size:.74rem;
  }
  .fwtn-step__phase b{
    font-size:.82rem;
  }
  .fwtn-step__progress{
    height:9px;
  }
  .fwtn-step__grid{
    margin-top:.8rem;
    gap:.38rem;
  }
  .fwtn-step__grid span{
    height:58px;
    border-radius:10px;
    padding:7px;
  }
  .fwtn-step__grid span i{
    height:7px;
    margin-bottom:5px;
  }
  .fwtn-process__bottom{
    margin-top:1.4rem;
  }
  .fwtn-process__bottom a{
    width:100%;
    justify-content:center;
    min-height:56px;
    border-radius:18px;
    box-shadow:0 16px 34px rgba(76,43,124,.48);
  }
}
@media (min-width:1024px){
  .fwtn-process__timeline{gap:4.4rem}
  .fwtn-process__line{display:block;position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(180deg,rgba(76,43,124,.5),rgba(107,63,160,.5),rgba(76,43,124,.5))}
  .fwtn-step{grid-template-columns:1fr 1fr;gap:2.25rem;align-items:center}
  .fwtn-step-2 .fwtn-step__content{grid-column:2}
  .fwtn-step-2 .fwtn-step__visual{grid-column:1;grid-row:1}
  .fwtn-step-1:hover .fwtn-step__content{transform:translateX(10px)}
  .fwtn-step-2:hover .fwtn-step__content{transform:translateX(-10px)}
  .fwtn-step__content{transition:transform .3s ease}
  .fwtn-step-1:hover .fwtn-step__visual{transform:scale(1.05) rotateY(3deg) rotateX(-2deg)}
  .fwtn-step-2:hover .fwtn-step__visual{transform:scale(1.05) rotateY(-3deg) rotateX(-2deg)}
  .fwtn-step__visual{transition:transform .35s ease}
  .fwtn-step__dot{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:999px;background:linear-gradient(135deg,#5a3589,#6b3fa0);border:4px solid #0a0a0a;box-shadow:0 0 24px rgba(107,63,160,.6)}
  .fwtn-step__dot::after{content:"";position:absolute;inset:4px;border-radius:999px;background:rgba(255,255,255,.28)}
}
@keyframes fwtnProcessIcon{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.fwtn-process__bottom a{position:relative;overflow:hidden}
.fwtn-process__bottom a em{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-150%);opacity:0}
.fwtn-process__bottom a:hover em{opacity:1;animation:fwtnBtnSweep .7s ease}
.fwtn-process__bottom a span{position:relative;z-index:1}
@keyframes fwtnBtnSweep{from{transform:translateX(-150%)}to{transform:translateX(160%)}}
@keyframes fwtnProgressSweep{from{transform:translateX(-120%)}to{transform:translateX(140%)}}
@keyframes fwtnGridPulse{0%,100%{opacity:.45;transform:scaleX(1)}50%{opacity:1;transform:scaleX(1.06)}}
