/* ===================================================== */
/* PAGE BASE                                             */
/* ===================================================== */

body{
font-family:Arial, Helvetica, sans-serif;
max-width:1100px;
margin:40px auto;
padding:0 20px;
line-height:1.6;
background:#ffffff;
}

h1{font-size:36px;margin-bottom:10px}


/* ===================================================== */
/* INPUT BLOCKS                                          */
/* ===================================================== */

.block{
padding:22px;
border:1px solid #ddd;
border-radius:12px;
margin-bottom:22px;
}

.competitor{
background:#fafafa;
}


/* ===================================================== */
/* SLIDERS                                               */
/* ===================================================== */

input[type=range]{
appearance:none;
width:100%;
height:14px;
background:#d6d6d6;
border-radius:20px;
margin-bottom:18px;
}

input[type=range]::-webkit-slider-thumb{
appearance:none;
width:34px;
height:34px;
border-radius:50%;
background:#2b6fd8;
border:4px solid #fff;
cursor:pointer;
margin-top:-10px;
box-shadow:0 2px 6px rgba(0,0,0,.35);
}


/* ===================================================== */
/* RESULT DASHBOARD                                      */
/* ===================================================== */

.result-container{

display:flex;
gap:30px;
background:#070a12;
padding:30px;
border-radius:20px;
margin-bottom:40px;
color:#fff;

}

.result-panel{

flex:1;
text-align:center;
padding:20px;
border-radius:14px;
transition:all .35s ease;

}

.panel-title{
color:#bbb;
margin-bottom:10px;
font-size:18px;
}

.score-number{
font-size:72px;
font-weight:bold;
margin-bottom:15px;
}

.bar-wrap{
height:26px;
background:#333;
border-radius:20px;
overflow:hidden;
}

.bar{
height:26px;
width:0%;
transition:width 2.4s ease;
border-radius:20px;
}


/* ===================================================== */
/* WINNER EFFECT                                         */
/* ===================================================== */

.result-panel.winner{

transform:scale(1.03);
box-shadow:0 0 60px rgba(0,255,160,.55);

animation:pulseGlow 1s ease;

}

@keyframes pulseGlow{

0%{box-shadow:0 0 0 rgba(0,255,160,0)}
50%{box-shadow:0 0 80px rgba(0,255,160,.9)}
100%{box-shadow:0 0 60px rgba(0,255,160,.55)}

}

/* ===================================================== */
/* PRIMARY COMPARE BUTTON                                */
/* Large centered blue CTA                               */
/* ===================================================== */

.compare-btn{
display:block;
width:100%;
max-width:420px;
margin:34px auto 10px auto;
padding:18px 28px;

background:#2b6fd8;
color:#ffffff;

font-size:20px;
font-weight:700;
line-height:1.2;
text-align:center;

border:none;
border-radius:12px;

cursor:pointer;

box-shadow:0 8px 20px rgba(43,111,216,0.28);
transition:all .18s ease;
}

.compare-btn:hover{
background:#1f5ec0;
box-shadow:0 10px 24px rgba(31,94,192,0.34);
transform:translateY(-1px);
}

.compare-btn:active{
background:#1b4ea0;
box-shadow:0 4px 12px rgba(27,78,160,0.28);
transform:translateY(1px) scale(0.99);
}

.compare-btn:focus{
outline:none;
box-shadow:0 0 0 4px rgba(43,111,216,0.18), 0 8px 20px rgba(43,111,216,0.28);
}

/* ===================================================== */
/* PAGE INTRO TEXT                                       */
/* ===================================================== */

.page-intro{
text-align:center;
max-width:720px;
margin:0 auto 35px auto;
font-size:17px;
}


/* ===================================================== */
/* CTA SECTION                                           */
/* ===================================================== */

.cta-box{

margin-top:60px;
padding:36px;

border-radius:16px;
border:1px solid #e4e4e4;

background:#f8f9fb;

text-align:center;
max-width:760px;
margin-left:auto;
margin-right:auto;

}

.cta-box h2{
margin-top:0;
font-size:28px;
}

.cta-box p{
max-width:620px;
margin:14px auto;
}

.cta-button{

display:inline-block;
margin-top:18px;
padding:16px 30px;

background:#2b6fd8;
color:#fff;

font-size:18px;
font-weight:700;

text-decoration:none;

border-radius:10px;

box-shadow:0 6px 18px rgba(43,111,216,.25);

transition:all .18s ease;

}

.cta-button:hover{
background:#1f5ec0;
transform:translateY(-1px);
}


/* ===================================================== */
/* NAV CENTER                                            */
/* ===================================================== */

nav{
margin-top:60px;
text-align:center;
}

nav ul{
list-style:none;
padding:0;
margin:0;
}

nav li{
margin:6px 0;
}


/* ===================================================== */
/* MOBILE STACK RESULT PANELS                            */
/* ===================================================== */

@media (max-width:720px){

.result-container{
flex-direction:column;
}

}

/* ===================================================== */
/* PAGE HEADER                                           */
/* ===================================================== */

h1{
font-size:36px;
margin-bottom:10px;
text-align:center;
}

.page-intro{
text-align:center;
max-width:720px;
margin:0 auto 30px auto;
font-size:17px;
}