/* ==========================================================
   VersaForge -Thank You page styles
   Mirrors 404.css's cosmic-stage visual language (dark hero,
   drifting glows, twinkling stars) but success-toned (emerald
   ring + confetti instead of the ranking-collapse motif), plus
   two additional light sections: a 3-step "what's next" grid
   and a services quick-links grid. Fully responsive, reduced-
   motion aware.
   ========================================================== */

@keyframes ty-blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes ty-glow-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-22px)}}
@keyframes ty-fadein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes ty-ring-sweep{from{stroke-dashoffset:377}to{stroke-dashoffset:26}}
@keyframes ty-ring-pulse{0%,100%{stroke-dashoffset:26}50%{stroke-dashoffset:40}}
@keyframes ty-twinkle{0%,100%{opacity:.15}50%{opacity:.9}}
@keyframes ty-check-pop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes ty-confetti-fall{
  0%{transform:translateY(-40px) rotate(0deg);opacity:0}
  10%{opacity:1}
  100%{transform:translateY(340px) rotate(340deg);opacity:0}
}
@keyframes ty-rise{0%{transform:translateY(16px);opacity:0}100%{transform:translateY(0);opacity:1}}

/* ---- dark cosmic success stage ---- */
.ty-hero{position:relative;overflow:hidden;padding:clamp(3.5rem,8vw,6rem) 0 clamp(3rem,6vw,4.5rem);
  background:radial-gradient(ellipse 120% 90% at 50% -10%,#142B22 0%,#0B0F19 55%,#070A12 100%);}
.ty-stars{position:absolute;inset:0;z-index:0;pointer-events:none;}
.ty-star{position:absolute;width:2px;height:2px;border-radius:9999px;background:#fff;animation:ty-twinkle 3.4s ease-in-out infinite;}
.ty-glow{position:absolute;border-radius:9999px;filter:blur(100px);pointer-events:none;z-index:0;}
.ty-glow-a{width:560px;height:560px;background:rgba(16,185,129,.25);top:-200px;left:50%;transform:translateX(-70%);animation:ty-glow-drift 10s ease-in-out infinite;}
.ty-glow-b{width:460px;height:460px;background:rgba(74,134,245,.2);bottom:-180px;right:-100px;animation:ty-glow-drift 12s ease-in-out infinite reverse;}

.ty-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.ty-confetti-piece{position:absolute;top:0;width:8px;height:14px;border-radius:2px;opacity:0;
  animation:ty-confetti-fall 3.2s cubic-bezier(.3,.6,.4,1) infinite;}

.ty-container{max-width:1180px;margin:0 auto;padding:0 1.5rem;position:relative;z-index:1;}

.ty-pill{display:inline-flex;align-items:center;gap:.55rem;padding:.5rem 1.1rem;border-radius:9999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);
  font:800 11px/1 'Inter',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6EE7B7;
  margin-bottom:1.75rem;animation:ty-fadein .6s ease-out both;}
.ty-pill-dot{width:7px;height:7px;border-radius:9999px;background:#6A58E4;flex-shrink:0;position:relative;}
.ty-pill-dot::after{content:'';position:absolute;inset:-4px;border-radius:9999px;border:1.5px solid #6A58E4;animation:ty-blink 1.6s ease-in-out infinite;}

/* ---- success ring + checkmark ---- */
.ty-check-ring{position:relative;width:clamp(6.5rem,16vw,9rem);height:clamp(6.5rem,16vw,9rem);margin:0 auto 1.75rem;
  animation:ty-fadein .7s ease-out .1s both;}
.ty-ring-svg{width:100%;height:100%;transform:rotate(-90deg);}
.ty-ring-svg .track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:9;}
.ty-ring-svg .fill{fill:none;stroke-width:9;stroke-linecap:round;stroke-dasharray:377;
  stroke:url(#tyRingGrad);animation:ty-ring-sweep 1.4s cubic-bezier(.2,.8,.2,1) both,ty-ring-pulse 2.6s ease-in-out infinite 1.4s;}
.ty-check-mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  animation:ty-check-pop .6s cubic-bezier(.34,1.56,.64,1) .5s both;}
.ty-check-mark svg{width:38%;height:38%;color:#6A58E4;filter:drop-shadow(0 0 14px rgba(52,211,153,.5));}

.ty-headline{font-family:'Inter',sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.15;
  font-size:clamp(2rem,4.4vw,2.9rem);color:#fff;margin-bottom:1rem;animation:ty-fadein .6s ease-out .15s both;}

.ty-sub{font:500 clamp(15px,1.5vw,17px)/1.65 'Inter',sans-serif;color:#94A3B8;max-width:560px;margin:0 auto 2.25rem;
  animation:ty-fadein .6s ease-out .2s both;}

.ty-actions{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;margin-bottom:1.5rem;
  animation:ty-fadein .6s ease-out .25s both;}
.ty-btn-primary{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 1.8rem;border-radius:.85rem;font:700 14.5px/1 'Inter',sans-serif;color:#fff;
  background:linear-gradient(135deg,#6A58E4,#4A86F5);box-shadow:0 16px 34px -10px rgba(106,88,228,.55);
  transition:transform .25s ease,box-shadow .25s ease;text-decoration:none;}
.ty-btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 40px -10px rgba(106,88,228,.65);}
.ty-btn-secondary{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 1.8rem;border-radius:.85rem;font:700 14.5px/1 'Inter',sans-serif;color:#E2E8F0;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  transition:transform .25s ease,background .25s ease,border-color .25s ease;text-decoration:none;}
.ty-btn-secondary:hover{transform:translateY(-2px);background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.24);}

.ty-ref-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .95rem;border-radius:9999px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:#8B96AC;
  font:600 11.5px/1 'Inter',monospace;animation:ty-fadein .6s ease-out .3s both;}
.ty-ref-chip b{color:#CBD5E1;font-weight:700;margin-left:.15rem;}

/* ---- "what happens next" 3-step section ---- */
.ty-next{padding:clamp(3.5rem,7vw,5.5rem) 0;}
.ty-next-head{text-align:center;max-width:640px;margin:0 auto clamp(2.5rem,5vw,3.5rem);}

.ty-steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;}
.ty-step-card{position:relative;background:#fff;border:1px solid #E6ECF5;border-radius:1.5rem;
  padding:2rem 1.75rem 1.85rem;box-shadow:0 20px 50px -12px rgba(106,88,228,.05);
  opacity:0;animation:ty-rise .6s ease-out both;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;}
.ty-step-card:nth-child(1){animation-delay:.05s;}
.ty-step-card:nth-child(2){animation-delay:.2s;}
.ty-step-card:nth-child(3){animation-delay:.35s;}
.ty-step-card:hover{transform:translateY(-4px);box-shadow:0 25px 60px -10px rgba(106,88,228,.16);border-color:rgba(106,88,228,.3);}
.ty-step-num{position:absolute;top:1.5rem;right:1.75rem;font:800 13px/1 'Inter',monospace;color:#C7D2E8;letter-spacing:.05em;}
.ty-step-icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:1rem;
  background:rgba(106,88,228,.1);color:#6A58E4;margin-bottom:1.25rem;}
.ty-step-icon i{width:24px;height:24px;}
.ty-step-card h3{font:800 19px/1.25 'Inter',sans-serif;color:#111827;letter-spacing:-.01em;margin:0 0 .6rem;}
.ty-step-card p{font:500 14px/1.6 'Inter',sans-serif;color:#5B6475;margin:0;}

/* ---- while-you-wait quick links (mirrors 404's nf-services pattern) ---- */
.ty-services{padding:clamp(3.5rem,7vw,5.5rem) 0;}
.ty-services-head{text-align:center;max-width:640px;margin:0 auto clamp(2.25rem,5vw,3rem);}
.ty-eyebrow-light{display:inline-flex;align-items:center;gap:.55rem;padding:.5rem 1.1rem;border-radius:9999px;
  background:#fff;border:1px solid #E6ECF5;font:800 11px/1 'Inter',monospace;letter-spacing:.14em;text-transform:uppercase;
  color:#6A58E4;margin-bottom:1.1rem;}
.ty-eyebrow-light-dot{width:7px;height:7px;border-radius:9999px;background:#6A58E4;flex-shrink:0;}
.ty-services-head h2{font-family:'Inter',sans-serif;font-weight:800;letter-spacing:-.015em;line-height:1.25;
  font-size:clamp(1.6rem,3vw,2.2rem);color:#111827;}

.ty-services-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;}
.ty-service-card{display:block;background:#fff;border:1px solid #E6ECF5;border-radius:1.25rem;padding:1.65rem 1.5rem;
  text-decoration:none;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
  box-shadow:0 14px 34px -14px rgba(106,88,228,.08);}
.ty-service-card:hover{transform:translateY(-4px);box-shadow:0 22px 50px -12px rgba(106,88,228,.16);border-color:rgba(106,88,228,.3);}
.ty-service-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:.85rem;
  background:rgba(106,88,228,.1);color:#6A58E4;margin-bottom:1rem;}
.ty-service-card h3{font:800 16px/1.3 'Inter',sans-serif;color:#111827;letter-spacing:-.01em;margin:0 0 .45rem;}
.ty-service-card p{font:500 13px/1.55 'Inter',sans-serif;color:#5B6475;margin:0 0 1rem;}
.ty-service-card .go{display:inline-flex;align-items:center;gap:.35rem;font:700 12.5px/1 'Inter',sans-serif;color:#6A58E4;}
.ty-service-card .go i{transition:transform .25s ease;}
.ty-service-card:hover .go i{transform:translateX(3px);}

/* ---- responsive ---- */
@media (max-width:1023px){
  .ty-services-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:768px){
  .ty-steps-grid{grid-template-columns:1fr;gap:1.1rem;}
  .ty-step-card{padding:1.75rem 1.5rem 1.6rem;}
}
@media (max-width:640px){
  .ty-hero{padding:2.75rem 0 2.25rem;}
  .ty-services-grid{grid-template-columns:1fr;}
  .ty-actions{flex-direction:column;align-items:stretch;}
  .ty-btn-primary,.ty-btn-secondary{width:100%;}
}
@media (max-width:400px){
  .ty-headline{font-size:1.7rem;}
  .ty-sub{font-size:14px;}
}
@media (prefers-reduced-motion: reduce){
  .ty-hero *{animation-duration:.001ms !important;animation-iteration-count:1 !important;}
  .ty-confetti{display:none;}
}