.tp-photo{aspect-ratio:2000/1496;background:#e7e5e0;border-radius:24px;width:100%;max-width:960px;margin:0 auto;position:relative;overflow:hidden}.tp-photo img{object-fit:cover}@media (min-width:768px){.tp-photo{border-radius:28px}}.tp-hero{flex-wrap:wrap;align-items:center;gap:48px 64px;display:flex}.tp-hero-text{flex-direction:column;flex:380px;gap:24px;min-width:0;display:flex}.tp-hero-text h1{margin:0}.tp-pills{flex-wrap:wrap;gap:10px;display:flex}.tp-pill{color:#4c1d95;background:#f5f1ff;border-radius:999px;align-items:center;gap:8px;padding:8px 14px;font-size:14px;font-weight:600;display:inline-flex}.tp-switcher{border:0;flex-direction:column;flex:1.5 520px;align-items:center;gap:20px;min-width:0;margin:0;padding:0;display:flex}.tp-frame{aspect-ratio:2000/1496;background:#e7e5e0;border-radius:24px;width:100%;max-width:720px;margin:0;position:relative;overflow:hidden;box-shadow:0 40px 80px -48px #22222273}@media (min-width:768px){.tp-frame{border-radius:28px}}.tp-shot{object-fit:cover;transition:opacity .7s,transform 1.2s cubic-bezier(.2,.8,.2,1)}.tp-shot-cheer{opacity:0;transform:scale(1.04)}.tp-seg{background:#f1f2f6;border-radius:999px;padding:5px;display:inline-flex;position:relative}.tp-seg label{cursor:pointer;color:#64748b;border-radius:999px;justify-content:center;align-items:center;width:140px;height:40px;font-size:15px;font-weight:600;transition:color .25s;display:inline-flex;position:relative}.tp-seg-thumb{background:#fff;border-radius:999px;width:140px;height:40px;transition:transform .45s cubic-bezier(.3,1.3,.5,1);position:absolute;top:5px;left:5px;box-shadow:0 2px 8px #2222221f}.tp-seg-posed{color:var(--color-text)}#tp-shot-cheer:checked~.tp-frame .tp-shot-posed{opacity:0;transform:scale(1.04)}#tp-shot-cheer:checked~.tp-frame .tp-shot-cheer{opacity:1;transform:none}#tp-shot-cheer:checked~.tp-seg .tp-seg-thumb{transform:translate(140px)}#tp-shot-cheer:checked~.tp-seg .tp-seg-posed{color:#64748b}#tp-shot-cheer:checked~.tp-seg .tp-seg-cheer{color:var(--color-text)}.tp-radio:focus-visible~.tp-seg{outline:2px solid var(--color-primary);outline-offset:3px}@media (prefers-reduced-motion:no-preference){.tp-switcher:not(:has(.tp-radio:checked)) .tp-shot-cheer{animation:8s 2s infinite both tp-auto-in}.tp-switcher:not(:has(.tp-radio:checked)) .tp-shot-posed{animation:8s 2s infinite both tp-auto-out}.tp-switcher:not(:has(.tp-radio:checked)) .tp-seg-thumb{animation:8s 2s infinite both tp-auto-thumb}.tp-switcher:not(:has(.tp-radio:checked)) .tp-seg-posed{animation:8s 2s infinite both tp-auto-dim}.tp-switcher:not(:has(.tp-radio:checked)) .tp-seg-cheer{animation:8s 2s infinite both tp-auto-lit}}@keyframes tp-auto-in{0%,40%,to{opacity:0;transform:scale(1.04)}50%,90%{opacity:1;transform:none}}@keyframes tp-auto-out{0%,40%,to{opacity:1;transform:none}50%,90%{opacity:0;transform:scale(1.04)}}@keyframes tp-auto-thumb{0%,42%,98%,to{transform:none}48%,92%{transform:translate(140px)}}@keyframes tp-auto-dim{0%,42%,to{color:var(--color-text)}48%,92%{color:#64748b}}@keyframes tp-auto-lit{0%,42%,to{color:#64748b}48%,92%{color:var(--color-text)}}.tp-mask{padding-bottom:.08em;display:block;overflow:hidden}.tp-mask>span{display:inline-block}@media (prefers-reduced-motion:no-preference){.tp-mask>span{animation:1s cubic-bezier(.2,.8,.2,1) both tp-line}.tp-fade{animation:.9s both tp-fade}.tp-frame{animation:1.2s cubic-bezier(.2,.8,.2,1) .3s both tp-frame-in}}@keyframes tp-line{0%{transform:translateY(105%)}to{transform:none}}@keyframes tp-fade{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes tp-frame-in{0%{opacity:0;transform:translateY(28px)rotate(1.5deg)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.tp-shot,.tp-seg-thumb,.tp-seg label{transition:none}}.tp-values{grid-template-columns:minmax(0,1fr);gap:16px;display:grid}@media (min-width:768px){.tp-values{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1200px){.tp-values{grid-template-columns:repeat(4,minmax(0,1fr))}}.tp-value{background:#fff;border:1px solid #e2e8f0;border-radius:20px;flex-direction:column;gap:10px;padding:28px;display:flex}.tp-value-icon{width:48px;height:48px;color:var(--color-primary);background:#f5f1ff;border-radius:14px;justify-content:center;align-items:center;margin-bottom:6px;display:inline-flex}.tp-value-icon svg{stroke-width:1.75px;width:24px;height:24px}.tp-value h3{font-family:var(--font-fustat);letter-spacing:-.01em;color:var(--color-text);margin:0;font-size:22px;font-weight:600;line-height:1.2}.tp-value p{color:#475569;margin:0;font-size:15px;line-height:1.65}.tp-value{transition:border-color .25s,box-shadow .25s,transform .25s}.tp-value:hover{border-color:#d9ccff;transform:translateY(-3px);box-shadow:0 12px 32px -18px #5b21b659}.tp-value-icon{transition:background-color .25s,color .25s}.tp-value:hover .tp-value-icon{background:var(--color-primary);color:#fff}.tp-value-icon svg{transform-origin:50%}.tp-value:hover .tp-value-icon[data-icon="0"] svg{animation:.9s ease-in-out tp-beat}.tp-value:hover .tp-value-icon[data-icon="1"] svg{animation:.7s ease-in-out tp-wave}.tp-value:hover .tp-value-icon[data-icon="2"] svg{animation:.7s cubic-bezier(.3,1.5,.5,1) tp-stack}.tp-value:hover .tp-value-icon[data-icon="3"] svg{transform-origin:50% 100%;animation:.8s cubic-bezier(.3,1.4,.5,1) tp-drop}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.tp-value{animation:linear backwards tp-rise;animation-timeline:view();animation-range:entry calc(var(--tp-i,0)*12%)entry calc(60% + var(--tp-i,0)*12%)}.tp-value-icon{animation:linear backwards tp-pop;animation-timeline:view();animation-range:entry calc(30% + var(--tp-i,0)*12%)entry calc(90% + var(--tp-i,0)*12%)}}}@keyframes tp-rise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes tp-pop{0%{opacity:0;transform:scale(.6)rotate(-12deg)}70%{opacity:1;transform:scale(1.08)rotate(2deg)}to{opacity:1;transform:none}}@keyframes tp-beat{0%,to{transform:scale(1)}20%{transform:scale(1.18)}40%{transform:scale(.96)}60%{transform:scale(1.1)}}@keyframes tp-wave{0%,to{transform:rotate(0)}25%{transform:rotate(-10deg)}60%{transform:rotate(8deg)}}@keyframes tp-stack{0%{transform:translateY(0)}40%{transform:translateY(-5px)}to{transform:translateY(0)}}@keyframes tp-drop{0%{transform:translateY(0)}30%{transform:translateY(-7px)scaleY(1.05)}60%{transform:translateY(0)scaleY(.92)}to{transform:none}}@media (prefers-reduced-motion:reduce){.tp-value,.tp-value:hover{transform:none}.tp-value:hover .tp-value-icon svg{animation:none}}
