.cx{position:fixed;inset:0;z-index:90;display:grid;place-items:center;visibility:hidden;font-family:Inter,system-ui,sans-serif;color:#fff}
.cx.open{visibility:visible}
.cx .bg{position:absolute;inset:0;background:#07060bf2;opacity:0;transition:opacity .5s}
.cx.open .bg{opacity:1}
.cx .aur{position:absolute;inset:-20%;opacity:0;transition:opacity 1s,filter 1s;filter:blur(80px) saturate(1.4);background:radial-gradient(40% 35% at 30% 30%,var(--a1,#a855f7) 0,transparent 70%),radial-gradient(35% 30% at 72% 70%,var(--a2,#e7b84a) 0,transparent 70%),radial-gradient(30% 30% at 75% 20%,var(--a3,#34d399) 0,transparent 70%);animation:aur 14s ease-in-out infinite alternate}
.cx.open .aur{opacity:.32}
@keyframes aur{to{transform:rotate(18deg) scale(1.15)}}
.cx .cxs{position:relative;width:min(560px,92vw);perspective:1400px}
.cx .cardx{position:relative;border-radius:28px;padding:34px 34px 28px;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 120px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(24px);overflow:hidden;transform:rotateX(14deg) translateY(60px) scale(.9);opacity:0;transition:transform .8s cubic-bezier(.2,.9,.2,1),opacity .5s;min-height:440px;display:flex;flex-direction:column}
.cx.open .cardx{transform:none;opacity:1}
.cx .cardx::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.08) 45%,transparent 60%);transform:translateX(var(--gx,-60%));transition:transform .2s;pointer-events:none}
.cx .top{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.cx .bk{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;font-size:15px;opacity:0;pointer-events:none;transition:opacity .3s,transform .2s}
.cx .bk.on{opacity:1;pointer-events:auto}.cx .bk:hover{transform:translateX(-2px)}
.cx .bar{flex:1;display:flex;gap:6px}
.cx .bar i{flex:1;height:4px;border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden;position:relative}
.cx .bar i::after{content:"";position:absolute;inset:0;background:var(--ac,#e7b84a);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.9,.2,1),background .6s}
.cx .bar i.on::after{transform:scaleX(1)}
.cx .xx{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;font-size:14px;transition:transform .3s}.cx .xx:hover{transform:rotate(90deg)}
.cx .steps{position:relative;flex:1}
.cx .st{position:absolute;inset:0;opacity:0;transform:translateX(40px);pointer-events:none;transition:opacity .45s,transform .6s cubic-bezier(.2,.9,.2,1)}
.cx .st.on{opacity:1;transform:none;pointer-events:auto;position:relative}
.cx .st.out{transform:translateX(-40px)}
.cx h2{font:700 clamp(28px,4.4vw,40px)/1.05 'Space Grotesk',Inter,sans-serif;letter-spacing:-.04em;margin:0 0 6px}
.cx h2 em{font-style:normal;color:var(--ac,#e7b84a);transition:color .6s}
.cx .sub{color:rgba(255,255,255,.6);font-size:14px;margin:0 0 22px}
.cx .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cx .tile{--t:#e7b84a;position:relative;text-align:left;padding:16px 14px 14px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#fff;cursor:pointer;font:600 13px Inter;transition:transform .25s cubic-bezier(.2,.9,.2,1),border-color .3s,background .3s,box-shadow .3s;opacity:0;transform:translateY(14px)}
.cx .st.on .tile{animation:tin .55s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes tin{to{opacity:1;transform:none}}
.cx .tile .em{display:block;font-size:24px;margin-bottom:10px;transition:transform .4s cubic-bezier(.2,1.6,.4,1)}
.cx .tile small{display:block;font:500 11px Inter;color:rgba(255,255,255,.5);margin-top:3px}
.cx .tile:hover{transform:translateY(-3px);border-color:var(--t);box-shadow:0 14px 40px -14px var(--t)}
.cx .tile:hover .em{transform:scale(1.25) rotate(-8deg)}
.cx .tile.sel{background:color-mix(in srgb,var(--t) 22%,transparent);border-color:var(--t);box-shadow:0 0 0 1px var(--t),0 18px 50px -16px var(--t)}
.cx .apps{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.cx .ap{--t:#fff;display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:0;color:rgba(255,255,255,.7);cursor:pointer;font:600 10px Inter;opacity:0;transform:scale(.6)}
.cx .st.on .ap{animation:pop .5s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes pop{to{opacity:1;transform:none}}
.cx .ap .cxi{position:relative;width:54px;height:54px;border-radius:16px;background:linear-gradient(145deg,var(--t),color-mix(in srgb,var(--t) 50%,#000));display:grid;place-items:center;overflow:hidden;box-shadow:0 8px 20px -8px var(--t);transition:transform .3s cubic-bezier(.2,1.5,.4,1),box-shadow .3s,filter .3s;filter:saturate(.5) brightness(.75)}
.cx .ap .cxi img{width:70%;height:70%;object-fit:contain}.cx .ap .cxi img.fill{width:100%;height:100%;object-fit:cover}
.cx .ap .cxi b{font:800 10px Inter;letter-spacing:-.02em;color:#fff}
.cx .ap:hover .cxi{transform:translateY(-3px) scale(1.06);filter:none}
.cx .ap.sel{color:#fff}.cx .ap.sel .cxi{filter:none;box-shadow:0 0 0 2px #fff,0 12px 30px -6px var(--t);transform:scale(1.08)}
.cx .ap .cxi::after{content:"✓";position:absolute;right:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;color:#000;font:800 10px/16px Inter;text-align:center;transform:scale(0);transition:transform .3s cubic-bezier(.2,1.6,.4,1)}
.cx .ap.sel .cxi::after{transform:scale(1)}
.cx .fld{position:relative;margin-bottom:14px}
.cx .fld input,.cx .fld textarea{width:100%;box-sizing:border-box;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:22px 16px 10px;color:#fff;font:500 16px Inter;outline:none;transition:border-color .3s,box-shadow .3s,background .3s;resize:none}
.cx .fld textarea{height:150px;line-height:1.5}
.cx .fld label{position:absolute;left:17px;top:17px;color:rgba(255,255,255,.5);font:500 15px Inter;pointer-events:none;transition:all .25s cubic-bezier(.2,.9,.2,1)}
.cx .fld input:focus,.cx .fld textarea:focus{border-color:var(--ac,#e7b84a);box-shadow:0 0 0 4px color-mix(in srgb,var(--ac,#e7b84a) 22%,transparent);background:rgba(255,255,255,.07)}
.cx .fld input:focus+label,.cx .fld input:not(:placeholder-shown)+label,.cx .fld textarea:focus+label,.cx .fld textarea:not(:placeholder-shown)+label{top:7px;font-size:11px;color:var(--ac,#e7b84a);letter-spacing:.04em}
.cx .fld .ok{position:absolute;right:14px;top:18px;width:20px;height:20px;border-radius:50%;background:#34d399;color:#04110b;font:800 11px/20px Inter;text-align:center;transform:scale(0);transition:transform .35s cubic-bezier(.2,1.6,.4,1)}
.cx .fld.good .ok{transform:scale(1)}
.cx .cnt{position:absolute;right:14px;bottom:10px;font:600 11px Inter;color:rgba(255,255,255,.35)}
.cx .sugg{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 12px}
.cx .sugg button{font:500 12px Inter;color:rgba(255,255,255,.75);background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.2);border-radius:999px;padding:6px 11px;cursor:pointer;transition:all .2s}
.cx .sugg button:hover{border-style:solid;border-color:var(--ac);color:#fff}
.cx .foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.cx .cxh{font:500 11px Inter;color:rgba(255,255,255,.4)}.cx .cxh kbd{font:600 10px Inter;border:1px solid rgba(255,255,255,.2);border-radius:5px;padding:1px 5px;margin:0 2px}
.cx .nx{position:relative;font:700 15px 'Space Grotesk',Inter;color:#0b0a10;background:var(--ac,#e7b84a);border:0;border-radius:999px;padding:14px 22px;cursor:pointer;box-shadow:0 14px 40px -12px var(--ac,#e7b84a);transition:transform .2s,background .6s,box-shadow .6s,opacity .3s;overflow:hidden}
.cx .nx:hover{transform:translateY(-2px) scale(1.03)}.cx .nx:disabled{opacity:.35;transform:none;cursor:default}
.cx .err{color:#fca5a5;font:500 12px Inter;min-height:16px;margin-top:6px}
.cx .done{position:absolute;inset:0;display:grid;place-items:center;text-align:center;opacity:0;pointer-events:none;transition:opacity .5s .3s}
.cx .done.on{opacity:1;pointer-events:auto}
.cx .eyes{width:96px;height:96px;margin:0 auto 18px;border-radius:28px;overflow:hidden;box-shadow:0 20px 60px -10px var(--ac,#e7b84a);transform:scale(0);transition:transform .7s .4s cubic-bezier(.2,1.6,.4,1)}
.cx .done.on .eyes{transform:scale(1)}.cx .eyes img{width:100%;height:100%;object-fit:cover;animation:blink 3.2s 1.4s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.cx .done h3{font:700 34px 'Space Grotesk',Inter;letter-spacing:-.04em;margin:0 0 8px}.cx .done p{color:rgba(255,255,255,.65);margin:0 0 20px;font-size:14px}
.cx .done .nx{background:rgba(255,255,255,.1);color:#fff;box-shadow:none}
.cx .fly{position:fixed;z-index:95;pointer-events:none;border-radius:20px;background:linear-gradient(145deg,var(--ac,#e7b84a),#fff);box-shadow:0 0 60px var(--ac,#e7b84a)}
.cx .spark{position:fixed;z-index:94;width:6px;height:6px;border-radius:50%;pointer-events:none}
.cx .cardx.sending{animation:sendfold .9s cubic-bezier(.7,0,.2,1) forwards}
@keyframes sendfold{40%{transform:rotateX(-8deg) scale(.96)}100%{transform:translateY(-130vh) rotateX(40deg) scale(.4);opacity:0}}
.cx .cardx.back-in{animation:backin .8s cubic-bezier(.2,.9,.2,1)}
@keyframes backin{from{transform:translateY(60px) scale(.9);opacity:0}}
@media (max-width:560px){.cx .cardx{padding:24px 18px 20px;border-radius:24px;min-height:0}.cx .tiles{grid-template-columns:repeat(2,1fr)}.cx .apps{grid-template-columns:repeat(4,1fr)}.cx .cxh{display:none}.cx .cxs{width:94vw}}
@media (prefers-reduced-motion:reduce){.cx *{animation-duration:.01ms!important;transition-duration:.01ms!important}}