:root{
--cyan:#00e0ff;
--pink:#ff2fae;
--dark:#0e0e14;
--muted:#8e90a5;
}
*{box-sizing:border-box}
body{
margin:0;
font-family:Inter,Arial,sans-serif;
background:#0a0b12;
color:#fff;
overflow-x:hidden;
}
.bg{
position:fixed;
inset:0;
background:
radial-gradient(circle at top right,rgba(255,47,174,.22),transparent 30%),
radial-gradient(circle at left top,rgba(0,224,255,.18),transparent 30%),
linear-gradient(180deg,#090b11,#0f111d);
z-index:-1;
}
.app{
width:min(760px,100%);
margin:auto;
padding:18px 14px 120px;
}
.top{
display:flex;
justify-content:space-between;
align-items:center;
}
.logo{
display:flex;
gap:12px;
align-items:center;
}
.orb{
width:58px;
height:58px;
border-radius:20px;
display:grid;
place-items:center;
font-size:28px;
background:linear-gradient(135deg,var(--pink),var(--cyan));
}
.logo span{
display:block;
font-size:12px;
font-weight:900;
color:#8d8fa2;
text-transform:uppercase;
}
.logo strong{
font-size:24px;
}
.install{
border:0;
padding:13px 18px;
border-radius:999px;
font-weight:900;
background:linear-gradient(135deg,var(--pink),var(--cyan));
color:#fff;
}
.hero{
padding:30px 0;
}
.pill{
display:inline-block;
padding:10px 16px;
border-radius:999px;
background:#171926;
font-weight:900;
border:1px solid rgba(255,255,255,.08);
}
.hero h1{
font-size:74px;
line-height:.9;
letter-spacing:-4px;
margin:18px 0;
max-width:580px;
}
.hero p{
font-size:19px;
line-height:1.6;
color:var(--muted);
max-width:650px;
}
.counter{
display:inline-flex;
gap:12px;
align-items:center;
padding:12px 18px;
margin-top:18px;
border-radius:999px;
background:#151722;
border:1px solid rgba(255,255,255,.06);
}
.counter b{
font-size:30px;
color:var(--cyan);
}
.card{
background:#131521;
padding:22px;
border-radius:34px;
margin-top:18px;
border:1px solid rgba(255,255,255,.06);
}
.empty{
display:flex;
gap:18px;
align-items:center;
}
.circle{
width:110px;
height:110px;
border-radius:28px;
display:grid;
place-items:center;
font-size:50px;
font-weight:900;
background:linear-gradient(135deg,var(--pink),var(--cyan));
}
.inputWrap{
display:flex;
gap:12px;
margin-top:20px;
}
input{
flex:1;
padding:18px;
border-radius:18px;
border:1px solid rgba(255,255,255,.08);
background:#0f1017;
color:#fff;
font-size:18px;
}
button{
cursor:pointer;
}
#scanBtn,.unlock{
border:0;
padding:18px 22px;
border-radius:18px;
font-size:18px;
font-weight:900;
background:linear-gradient(135deg,var(--pink),var(--cyan));
color:#fff;
}
.unlock{
width:100%;
margin-top:18px;
}
.report{
background:#181b29;
padding:18px;
border-radius:24px;
margin-top:18px;
}
.row{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin-top:12px;
}
.score{
background:#10131f;
padding:16px;
border-radius:18px;
}
.score b{
display:block;
font-size:28px;
margin-top:6px;
color:var(--cyan);
}
.shareCard{
margin-top:18px;
padding:20px;
border-radius:28px;
background:linear-gradient(135deg,#151722,#1c1f30);
border:1px solid rgba(255,255,255,.06);
}
.shareTitle{
font-size:24px;
font-weight:900;
}
.hidden{display:none}