:root{--bg:#fff;--text:#0f172a;--muted:#64748b;--dark:#020617}
*{box-sizing:border-box}
html,body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text)}
.container{min-height:100vh;display:flex;flex-direction:column}
.top{display:flex;justify-content:space-between;align-items:center;padding:24px 48px}
.logo a{font-size:22px;font-weight:800;color:#000;text-decoration:none}
.nav{display:flex;align-items:center;gap:24px}
.nav a{text-decoration:none;color:var(--text);font-weight:500}
.btn{background:var(--dark);color:#fff;border-radius:999px;font-weight:600;cursor:pointer}
.btn-sm{padding:10px 18px;font-size:14px}
.btn-lg{padding:18px 44px;font-size:16px}
.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 20px}
.hero h1{font-size:56px;font-weight:900;line-height:1.1;margin:0}
.hero h1 span{color:#475569}
.hero p{margin-top:16px;font-size:18px;color:var(--muted)}
.hero .btn{margin-top:40px}
.btn.animate{pointer-events:none;opacity:.9}
body.dragging .btn-lg{box-shadow:0 0 0 6px rgba(15,23,42,.08)}
.upload-error{margin-top:16px;color:#dc2626;font-weight:500;display:none}
.footer{padding:24px 20px;text-align:center;font-size:14px;color:#94a3b8}
.footer a{color:#94a3b8;text-decoration:none;margin:0 8px}
.footer a:hover{text-decoration:underline}
.modal{display:none;position:fixed;inset:0;z-index:999}
.modal-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;width:90%;max-width:360px;padding:24px;border-radius:16px;text-align:center;box-shadow:0 20px 40px rgba(0,0,0,.2)}
.modal-close{position:absolute;top:16px;right:20px;font-size:22px;cursor:pointer}
@media(max-width:768px){
.top{padding:16px 20px}
.hero h1{font-size:34px}
.hero p{font-size:16px}
}