:root{
 --bg1:#07111f;--bg2:#0d1b2a;--glass:rgba(255,255,255,.075);
 --glass2:rgba(255,255,255,.11);--line:rgba(255,255,255,.16);
 --text:#f8fafc;--muted:#b7c4d6;--primary:#2dd4bf;--primary2:#14b8a6;
 --danger:#fb7185;--shadow:0 24px 70px rgba(0,0,0,.32);
}
*{box-sizing:border-box}
html{min-height:100%;background:linear-gradient(135deg,var(--bg1),var(--bg2) 50%,#102a43)}
body{
 margin:0;min-height:100vh;color:var(--text);
 font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
 background:
 radial-gradient(circle at 10% 10%,rgba(45,212,191,.16),transparent 28%),
 radial-gradient(circle at 90% 20%,rgba(59,130,246,.14),transparent 30%),
 radial-gradient(circle at 50% 100%,rgba(168,85,247,.12),transparent 35%);
}
body:before,body:after{content:"";position:fixed;z-index:-1;border-radius:50%;filter:blur(2px);pointer-events:none}
body:before{width:280px;height:280px;left:-90px;top:120px;background:rgba(45,212,191,.10)}
body:after{width:360px;height:360px;right:-130px;bottom:50px;background:rgba(59,130,246,.10)}
.topbar{
 position:sticky;top:0;z-index:50;background:rgba(7,17,31,.58);
 border-bottom:1px solid var(--line);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)
}
.topbar-inner{max-width:1220px;margin:auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}.brand-mark{
 width:44px;height:44px;border:1px solid rgba(255,255,255,.25);border-radius:14px;
 display:grid;place-items:center;font-weight:950;font-size:20px;color:#fff;
 background:linear-gradient(135deg,rgba(45,212,191,.9),rgba(59,130,246,.7));
 box-shadow:0 10px 30px rgba(45,212,191,.18)
}
.brand h1{margin:0;font-size:18px;letter-spacing:.2px}.brand p{margin:2px 0 0;font-size:11px;color:var(--muted)}
main{max-width:1220px;margin:auto;padding:30px 22px 70px}
.hero{display:grid;grid-template-columns:1.5fr .7fr;gap:18px;margin-bottom:20px}
.hero-card,.card{
 background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.045));
 border:1px solid var(--line);box-shadow:var(--shadow);
 backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
 border-radius:24px
}
.hero-card{padding:32px;min-height:230px;display:flex;flex-direction:column;justify-content:center}
.hero-card h2{font-size:34px;margin:8px 0 10px;letter-spacing:-.8px}
.hero-card p{margin:0;color:#d6e1ed;line-height:1.7}.hero-badge{
 display:inline-flex;align-self:flex-start;padding:7px 11px;border-radius:999px;
 background:rgba(45,212,191,.12);border:1px solid rgba(45,212,191,.28);
 color:#99f6e4;font-size:11px;font-weight:800;letter-spacing:.7px
}
.card{padding:20px;margin-bottom:16px}.card h2,.card h3{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
input,select,textarea{
 width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:13px;
 background:rgba(0,0,0,.16);color:var(--text);font:inherit;outline:none
}
select option{background:#102033;color:#fff}
input::placeholder,textarea::placeholder{color:#8fa0b5}
input:focus,select:focus,textarea:focus{border-color:rgba(45,212,191,.65);box-shadow:0 0 0 3px rgba(45,212,191,.10)}
textarea{min-height:100px;resize:vertical}
button{
 border:1px solid rgba(255,255,255,.10);border-radius:13px;padding:12px 15px;
 font-weight:800;cursor:pointer;color:#03201d;
 background:linear-gradient(135deg,#5eead4,#2dd4bf);
 box-shadow:0 10px 24px rgba(45,212,191,.13);transition:.18s
}
button:hover{transform:translateY(-2px);filter:brightness(1.04)}
button:disabled{opacity:.45;cursor:not-allowed;transform:none}.danger{background:linear-gradient(135deg,#fb7185,#e11d48);color:#fff}.secondary{background:rgba(255,255,255,.10);color:#fff}
.small{font-size:13px;color:var(--muted);line-height:1.55}.ok{background:rgba(16,185,129,.12);border:1px solid rgba(52,211,153,.25);color:#a7f3d0;padding:11px;border-radius:13px}.err{background:rgba(244,63,94,.11);border:1px solid rgba(251,113,133,.25);color:#fecdd3;padding:11px;border-radius:13px}
.display{border:1px solid var(--line);border-radius:22px;background:rgba(0,0,0,.25);padding:26px;text-align:center;box-shadow:inset 0 1px rgba(255,255,255,.05)}
.display .big{font-size:68px;font-weight:950;letter-spacing:2px;color:#99f6e4;text-shadow:0 0 35px rgba(45,212,191,.25)}
.display .svc{font-size:18px;color:#d7fff9}.token{font-size:48px;font-weight:950;display:block;margin:10px 0;color:#5eead4}
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:13px}
.service-card{
 padding:18px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.055);
 cursor:pointer;transition:.18s
}.service-card:hover{border-color:rgba(45,212,191,.55);background:rgba(45,212,191,.08);transform:translateY(-2px)}
.service-price{font-size:25px;font-weight:900;color:#5eead4}
.nav-pills{display:flex;flex-wrap:wrap;gap:8px}.nav-pills button{background:rgba(255,255,255,.07);color:#dbeafe;box-shadow:none}.nav-pills button.active{background:#2dd4bf;color:#03201d}
table{border-collapse:collapse;width:100%;background:rgba(0,0,0,.12);border-radius:14px;overflow:hidden}
th,td{padding:12px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}th{background:rgba(255,255,255,.06);color:#dbeafe}
.hidden{display:none!important}
@media(max-width:760px){
 .hero{grid-template-columns:1fr}.hero-card{padding:24px;min-height:200px}.hero-card h2{font-size:27px}
 .topbar-inner{padding:12px 14px}main{padding:18px 14px 50px}.display .big{font-size:50px}.card{padding:16px}
}