*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#07070d;--p:#7c5cff;--p2:#22d3ee;--t:#eef0ff;--m:#9aa0c7}
html,body{height:100%}
body{background:var(--bg);color:var(--t);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden}
#bg{position:fixed;inset:0;z-index:0}
.screen{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transform:translateY(20px);transition:opacity .6s,transform .6s,visibility .6s;overflow:auto}
.screen.active{opacity:1;visibility:visible;transform:none}
.logo{font-size:clamp(2.6rem,12vw,6rem);font-weight:800;letter-spacing:2px;display:flex}
.logo span{display:inline-block;opacity:0;transform:translateY(40px) scale(.6);animation:pop .7s forwards;background:linear-gradient(135deg,var(--p),var(--p2));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(124,92,255,.6))}
@keyframes pop{to{opacity:1;transform:none}}
.tagline{margin-top:16px;color:var(--m);text-align:center;max-width:520px;opacity:0;animation:fade 1s 1.2s forwards}
@keyframes fade{to{opacity:1}}
.loader{margin-top:28px;width:200px;height:4px;background:#1b1b2e;border-radius:4px;overflow:hidden}
.loader span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--p),var(--p2));animation:load 2.6s .4s forwards}
@keyframes load{to{width:100%}}
.card{width:min(460px,100%);background:rgba(18,18,32,.85);backdrop-filter:blur(10px);border:1px solid #2a2a48;border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:16px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.card.wide{width:min(560px,100%)}
h2{font-size:1.35rem}
.muted{color:var(--m);font-size:.92rem}
.row{display:flex;gap:12px;flex-wrap:wrap}
.btn{border:0;border-radius:12px;padding:12px 20px;font-size:1rem;font-weight:600;cursor:pointer;color:#fff;transition:transform .15s,box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:linear-gradient(135deg,var(--p),var(--p2));box-shadow:0 8px 24px rgba(124,92,255,.35)}
.btn.ghost{background:#1d1d34;border:1px solid #33335a}
label{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:var(--m)}
input:not([type=checkbox]){background:#0e0e1c;border:1px solid #2f2f55;border-radius:10px;padding:12px;color:var(--t);font-size:1rem;outline:none}
input:focus{border-color:var(--p2)}
label.check{flex-direction:row;align-items:flex-start;gap:10px}
.error{color:#ff6b81;font-size:.9rem}
.rights{font-weight:700;color:var(--p2)}
.signature{position:relative;background:#fbfaf5;color:#14142b;border-radius:12px;padding:22px 20px 16px;overflow:hidden;animation:pop .8s both}
.sig-name{font-family:"Brush Script MT","Segoe Script","Lucida Handwriting",cursive;font-size:2.4rem;word-break:break-word;clip-path:inset(0 100% 0 0);animation:write 2s .3s forwards}
@keyframes write{to{clip-path:inset(0 0 0 0)}}
.sig-line{height:2px;background:#14142b;margin:6px 0 10px;width:0;animation:line 1s 2s forwards}
@keyframes line{to{width:100%}}
.sig-meta{font-size:.75rem;color:#4a4a6a;line-height:1.5;font-family:ui-monospace,Consolas,monospace}
.stamp{position:absolute;right:14px;bottom:12px;border:2px solid #7c5cff;color:#7c5cff;border-radius:8px;padding:4px 8px;font-size:.65rem;font-weight:800;text-align:center;transform:rotate(-10deg) scale(2);opacity:0;animation:stamp .5s 2.6s forwards}
@keyframes stamp{to{opacity:.85;transform:rotate(-10deg) scale(1)}}
footer{position:fixed;bottom:8px;left:0;right:0;text-align:center;font-size:.75rem;color:#555a80;z-index:2}