body{
    background:#f4f7fb;
}

.hero{
    background:
    linear-gradient(135deg,#0f172a 0%,#1e293b 100%);
    color:white;
    border-radius:24px;
    overflow:hidden;
    position:relative;
}

.hero::before{
    content:'';
    position:absolute;
    width:300px;
    height:300px;
    border-radius:50%;
    background:rgba(59,130,246,.15);
    top:-100px;
    right:-100px;
    filter:blur(20px);
}

.result-card{
    border:0;
    border-radius:22px;
    overflow:hidden;
    transition:all .25s ease;
}

.result-card:hover{
    transform:translateY(-4px);
}

.result-value{
    font-size:2.2rem;
    font-weight:800;
    line-height:1;
}

.bg-glass{
    background:rgba(255,255,255,0.08);
    backdrop-filter:blur(10px);
}

.code-box{
    background:#111827;
    color:#d1fae5;
    border-radius:16px;
    padding:16px;
    font-family:monospace;
    font-size:.95rem;
    overflow:auto;
}

.slider-value{
    font-weight:700;
    color:#0d6efd;
}

.badge-tech{
    font-size:.9rem;
    padding:.7rem 1rem;
    border-radius:999px;
}

.section-title{
    font-weight:800;
}

.endpoint-box{
    background:#0f172a;
    color:#fff;
    border-radius:20px;
}