:root{--bg:#0b1020;--card:#fff;--ink:#0f172a;--mut:#64748b;--line:#e2e8f0;--p:#4f46e5;--p2:#06b6d4;--ok:#10b981;--warn:#f59e0b;--bad:#ef4444;--r:16px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter','Segoe UI',system-ui,sans-serif;color:var(--ink);background:#f1f5f9;-webkit-font-smoothing:antialiased}
a{color:var(--p);text-decoration:none}h1,h2,h3{margin:0 0 .5rem;letter-spacing:-.02em}
.btn{display:inline-flex;align-items:center;gap:.4rem;border:0;cursor:pointer;padding:.65rem 1.1rem;border-radius:12px;font-weight:600;font-size:.92rem;color:#fff;background:linear-gradient(135deg,var(--p),#7c3aed);box-shadow:0 6px 18px -6px rgba(79,70,229,.6);transition:.2s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}.btn.sec{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.ok{background:linear-gradient(135deg,#059669,#10b981)}.btn.bad{background:linear-gradient(135deg,#dc2626,#ef4444)}.btn.sm{padding:.4rem .7rem;font-size:.8rem;border-radius:9px}
input,select,textarea{width:100%;padding:.65rem .8rem;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid #c7d2fe;border-color:var(--p)}
label{display:block;font-size:.78rem;font-weight:600;color:var(--mut);margin:.7rem 0 .25rem;text-transform:uppercase;letter-spacing:.04em}
.grid{display:grid;gap:1rem}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--card);border-radius:var(--r);padding:1.2rem;box-shadow:0 1px 3px rgba(15,23,42,.06),0 10px 30px -18px rgba(15,23,42,.25)}
.card h3{font-size:1rem}
table{width:100%;border-collapse:collapse;font-size:.88rem}th{text-align:left;color:var(--mut);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;padding:.6rem .6rem;border-bottom:1px solid var(--line)}
td{padding:.65rem .6rem;border-bottom:1px solid #f1f5f9;vertical-align:middle}tr:hover td{background:#f8fafc}.tw{overflow-x:auto}
.badge{display:inline-block;padding:.2rem .6rem;border-radius:99px;font-size:.72rem;font-weight:700;white-space:nowrap}
.badge.ok{background:#d1fae5;color:#047857}.badge.warn{background:#fef3c7;color:#b45309}.badge.bad{background:#fee2e2;color:#b91c1c}.badge.info{background:#dbeafe;color:#1d4ed8}.badge.violet{background:#ede9fe;color:#6d28d9}
.alert{padding:.8rem 1rem;border-radius:12px;margin-bottom:1rem;font-weight:500}.alert.ok{background:#d1fae5;color:#065f46}.alert.bad{background:#fee2e2;color:#991b1b}
/* app shell */
.shell{display:flex;min-height:100vh}
.side{width:250px;background:linear-gradient(180deg,#0f172a,#1e1b4b);color:#cbd5e1;padding:1rem;position:sticky;top:0;height:100vh;overflow:auto;flex-shrink:0}
.brand{display:flex;align-items:center;gap:.6rem;color:#fff;font-weight:800;font-size:1.15rem;padding:.4rem .5rem 1rem}.brand i{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--p2),var(--p));display:grid;place-items:center;font-style:normal}
.side a{display:flex;gap:.7rem;align-items:center;color:#cbd5e1;padding:.62rem .8rem;border-radius:10px;font-size:.9rem;margin-bottom:2px}.side a:hover{background:rgba(255,255,255,.07)}.side a.on{background:linear-gradient(135deg,var(--p),#7c3aed);color:#fff}
.side small{display:block;margin:1rem .8rem .3rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:#64748b}
.main{flex:1;min-width:0}.top{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.5rem;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;gap:1rem}
.content{padding:1.5rem}.menu-btn{display:none}
@media(max-width:860px){.side{position:fixed;left:-260px;z-index:20;transition:.25s}.side.open{left:0}.menu-btn{display:inline-flex}.content{padding:1rem}}
.kpi{position:relative;overflow:hidden}.kpi .n{font-size:1.9rem;font-weight:800;letter-spacing:-.03em}.kpi .l{color:var(--mut);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.kpi:after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:var(--c,#e0e7ff);opacity:.6}
.toolbar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:end;margin-bottom:1rem}.toolbar>*{flex:1;min-width:140px}.toolbar .btn{flex:0}
.timeline{position:relative;padding-left:1.5rem}.timeline:before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line)}
.timeline .ev{position:relative;margin-bottom:1.1rem}.timeline .ev:before{content:"";position:absolute;left:-1.5rem;top:4px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--p)}.timeline .ev:first-child:before{background:var(--p);box-shadow:0 0 0 5px #e0e7ff}
.timeline .t{font-weight:700}.timeline .m{color:var(--mut);font-size:.8rem}
/* auth + public bg */
.bg-art{min-height:100vh;position:relative;overflow:hidden;color:#fff;background:radial-gradient(1200px 600px at 10% -10%,#4f46e5 0,transparent 60%),radial-gradient(900px 600px at 100% 10%,#06b6d4 0,transparent 55%),radial-gradient(900px 700px at 50% 120%,#c026d3 0,transparent 55%),#0b1020}
.bg-art:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(circle at 50% 40%,#000 0,transparent 75%);pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.45;animation:fl 14s ease-in-out infinite}.b1{width:340px;height:340px;background:#6366f1;left:-80px;top:20%}.b2{width:300px;height:300px;background:#22d3ee;right:-60px;bottom:10%;animation-delay:-5s}.b3{width:240px;height:240px;background:#e879f9;left:45%;top:-80px;animation-delay:-9s}
@keyframes fl{50%{transform:translate(40px,-50px) scale(1.15)}}
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:1.2rem;position:relative;z-index:2}
.glass{background:rgba(255,255,255,.1);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid rgba(255,255,255,.22);border-radius:24px;box-shadow:0 30px 80px -30px rgba(0,0,0,.6)}
.auth{width:100%;max-width:420px;padding:2rem}.auth label{color:#cbd5e1}.auth input,.auth select{background:rgba(255,255,255,.92)}
.auth .btn{width:100%;justify-content:center;margin-top:1.2rem;padding:.85rem}.auth a{color:#a5b4fc}
.nav{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:1.1rem 5%;gap:1rem}.nav .brand{padding:0}.nav .links{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}.nav .links a{color:#e2e8f0;font-weight:500;font-size:.92rem}
.hero{position:relative;z-index:2;padding:4rem 5% 3rem;display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;max-width:1250px;margin:auto}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:2rem}}
.hero h1{font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.05;font-weight:800}.hero h1 span{background:linear-gradient(90deg,#67e8f9,#c4b5fd,#f0abfc);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:#cbd5e1;font-size:1.1rem;max-width:560px}
.trackbox{display:flex;gap:.5rem;padding:.5rem;margin-top:1.5rem;max-width:560px}.trackbox input{border:0;background:transparent;color:#fff;font-size:1rem}.trackbox input::placeholder{color:#cbd5e1}.trackbox .btn{white-space:nowrap}
.stats{display:flex;gap:2rem;margin-top:2rem;flex-wrap:wrap}.stats b{display:block;font-size:1.8rem}.stats small{color:#a5b4fc}
.sec{position:relative;z-index:2;padding:4rem 5%;max-width:1250px;margin:auto}.sec h2{font-size:2rem;text-align:center}.sec .sub{text-align:center;color:#a5b4fc;margin-bottom:2.5rem}
.feat{padding:1.5rem;transition:.25s}.feat:hover{transform:translateY(-5px);background:rgba(255,255,255,.16)}.feat .ic{font-size:1.8rem;width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,rgba(99,102,241,.5),rgba(34,211,238,.4));margin-bottom:.8rem}.feat p{color:#cbd5e1;font-size:.9rem;margin:0}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;text-align:center}.steps div{padding:1.2rem}.steps b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;margin:0 auto .6rem;background:linear-gradient(135deg,#06b6d4,#4f46e5)}
footer.pub{position:relative;z-index:2;text-align:center;color:#94a3b8;padding:2rem;border-top:1px solid rgba(255,255,255,.1)}
.pubcard{max-width:760px;margin:0 auto;padding:1.5rem;color:#fff}.pubcard .timeline:before{background:rgba(255,255,255,.25)}.pubcard .timeline .ev:before{background:#0b1020}.pubcard .m{color:#cbd5e1}
.off{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);background:#b45309;color:#fff;padding:.6rem 1rem;border-radius:99px;font-weight:600;z-index:99;display:none;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.sigpad{border:2px dashed var(--line);border-radius:12px;background:#fff;touch-action:none;width:100%;height:150px}
.flowline{display:flex;gap:.3rem;flex-wrap:wrap}
@media print{.side,.top,.noprint{display:none!important}.content{padding:0}body{background:#fff}.card{box-shadow:none}}

/* ---- fixes: scrolling + responsive + polish ---- */
html,body{overflow-x:hidden;max-width:100%}
.bg-art{overflow:visible;overflow-x:clip;background-attachment:fixed}
.bg-art:before{position:fixed;z-index:0}
.blob{position:fixed;z-index:0}
.hero>*,.sec>*,.grid>*{min-width:0}
.hero{padding:3rem 5% 2rem;width:100%}
.hero h1{word-break:break-word}
.trackbox{width:100%}.trackbox input{min-width:0;flex:1}
.nav{flex-wrap:wrap;position:sticky;top:0;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(11,16,32,.55);border-bottom:1px solid rgba(255,255,255,.08)}
.sec{width:100%;padding:3.5rem 5%}
.sec .grid.g4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.feat h3{font-size:1.05rem;margin-bottom:.4rem}
.stats b{font-size:1.7rem;background:linear-gradient(90deg,#67e8f9,#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.glass{box-shadow:0 20px 60px -25px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.18)}
.btn.sec{color:#0f172a}
.hero .btn.sec,.glass .btn.sec{background:rgba(255,255,255,.92)}
.auth-wrap{padding:1.2rem 1.2rem 3rem}
@media(max-width:700px){.nav .links{gap:.6rem;font-size:.85rem}.nav .links a:not(.btn){display:none}.hero{padding-top:1.5rem}.sec h2{font-size:1.6rem}.stats{gap:1.2rem}}