.profile{padding:20px;background:#fff;color:#101010;border-radius:30px;box-shadow:0 15px 35px #20152e0d;min-height:600px;overflow:hidden;gap:0}
.profile-cover{height:136px;flex-shrink:0;border-radius:21px;background:radial-gradient(ellipse at 15% 85%,#35245f,transparent 60%),radial-gradient(ellipse at 78% 15%,#e6c8f4,transparent 60%),linear-gradient(130deg,#a586d6,#7854b3 55%,#c8ade8);position:relative;overflow:hidden;margin-bottom:-52px}
.profile-cover::after{content:'';position:absolute;inset:-40%;background:radial-gradient(ellipse,#ffffff35,transparent 60%);animation:profile-cover-light 10s ease-in-out infinite alternate}
.profile .avatar{position:relative;width:112px;height:112px;flex-shrink:0;border:7px solid #fff;border-radius:50%;background:#fff;margin:0 0 15px 10px;object-fit:contain;box-shadow:none}
.profile h2{font:400 29px/1.12 Gunday,Georgia,serif;margin:0 0 7px;letter-spacing:-.25px}
.profile .profile-role{font:400 13px/1.4 DM,Arial,sans-serif;color:#8c8494;margin:0 0 15px}
.profile .profile-bio{font:400 14px/1.55 DM,Arial,sans-serif;color:#77717c;margin:0 0 22px}
.profile-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border-top:1px solid #ece9ef;padding:20px 0 23px;margin-top:auto}
.profile-metric{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.profile-metric strong{display:flex;align-items:center;gap:5px;font:700 21px/1.2 DM,Arial,sans-serif;white-space:nowrap}.profile-metric svg{width:17px;height:17px;flex-shrink:0}.profile-metric small{font:400 10px/1.3 DM,Arial,sans-serif;color:#8c8494}
.profile-slide{--slide-progress:0;position:relative;flex-shrink:0;border-radius:999px;height:58px;background:linear-gradient(100deg,#050505,#252328 65%,#646168);color:white;box-shadow:inset 0 2px 3px #ffffff35,0 4px 8px #00000012;overflow:hidden}
.profile-slide-label{position:absolute;inset:0 12px 0 62px;display:flex;align-items:center;justify-content:center;text-align:center;font:400 12px/1.2 DM,Arial,sans-serif;pointer-events:none;transition:opacity .2s}
.profile-slide-handle{position:absolute;left:7px;top:7px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:#101010;box-shadow:0 2px 5px #0003;transform:translateX(calc(var(--slide-progress) * (var(--slide-distance, 200px))));pointer-events:none;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.profile-slide-handle svg{width:24px;height:24px}.profile-slide.dragging .profile-slide-handle{transition:none}
.profile-slide input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:grab;touch-action:pan-y}.profile-slide input:active{cursor:grabbing}.profile-slide:focus-within{outline:2px solid #9b7ac1;outline-offset:4px}.profile-slide.complete{background:linear-gradient(100deg,#44317b,#7e5aa7)}.profile-slide.complete .profile-slide-label{inset:0 54px 0 13px}.profile-slide.complete input{cursor:default}
@keyframes profile-cover-light{to{transform:translate(18%,12%) rotate(15deg)}}
@media(max-width:850px){.profile{min-height:0;padding:24px;max-width:100%;}.profile-cover{height:175px}.profile .profile-bio{max-width:560px}.profile-metrics{padding-block:22px}.profile-metric strong{font-size:25px}.profile-metric small{font-size:12px}.profile-slide-label{font-size:15px}}
@media(max-width:480px){.profile{padding:18px;border-radius:27px}.profile-cover{height:130px}.profile h2{font-size:30px}.profile .profile-bio{font-size:14px}.profile-metric strong{font-size:23px}.profile-metric small{font-size:10px}.profile-slide-label{font-size:12px}}
@media(prefers-reduced-motion:reduce){.profile-cover::after{animation:none}.profile-slide-handle{transition:none}}
/* Dark profile variant with larger, lighter figures and a truly centered CTA. */
.profile{background:#101011;color:#fff;box-shadow:0 16px 32px #00000024}.profile .avatar{border-color:#101011}.profile .profile-role{color:#b2a7bd}.profile .profile-bio{color:#b8b3bd}.profile-metrics{border-color:#ffffff19;padding-top:24px;padding-bottom:27px}.profile-metric{gap:10px}.profile-metric strong{font:400 29px/1 DM,Arial,sans-serif;gap:7px;letter-spacing:-.8px}.profile-metric svg{width:20px;height:20px}.profile-metric small{color:#aaa3b2;font-size:11px;line-height:1.4}.profile-slide{background:linear-gradient(100deg,#020202,#252329 65%,#56515d);box-shadow:inset 0 1px 3px #ffffff45,0 0 0 1px #ffffff18,0 6px 14px #0005}.profile-slide-label,.profile-slide.complete .profile-slide-label{inset:0;padding:0 56px;font:400 14px/1.25 DM,Arial,sans-serif;letter-spacing:0}.profile-slide.auto-running .profile-slide-handle{transition:none}.profile-slide.complete{background:linear-gradient(100deg,#44317b,#79599e)}
@media(max-width:480px){.profile-metric strong{font-size:27px}.profile-metric svg{width:18px;height:18px}.profile-metric small{font-size:10px}.profile-slide-label,.profile-slide.complete .profile-slide-label{font-size:13px;padding-inline:52px}}
/* Light starting state; the completed invitation keeps its purple finish. */
.profile-slide{background:#f7f7f8;color:#101010;box-shadow:inset 0 1px 2px #fff,0 0 0 1px #ffffff30,0 6px 14px #0003;transition:background .4s,color .4s}.profile-slide-handle{background:#fff;color:#101010;box-shadow:0 2px 8px #00000016}.profile-slide.complete{background:linear-gradient(100deg,#44317b,#79599e);color:#fff}

.profile-slide.auto-running .profile-slide-label{transition:none}
.profile-slide-handle{background:#44317b;color:#fff;transition:transform .3s cubic-bezier(.2,.7,.2,1),background .35s,color .35s}.profile-slide.complete .profile-slide-handle{background:#fff;color:#101010}