body{
    font-family:Arial;
    margin:0;
    background:#f5f7fb;
    }
    
    
    /* HEADER */

.site-header{
    background:#fff;
    border-bottom:1px solid #eee;
    position:sticky;
    top:0;
    z-index:1000;
    transition:all .3s ease;
    }
    
    .header-flex{
    display:flex;
    justify-content:center; /* center logo */
    align-items:center;
    padding:6px 0;
    }
    
    .logo{
    height:55px;
    transition:all .3s ease;
    }
    
    /* Header shrink on scroll */
    
    .site-header.scrolled{
    padding:0;
    }
    
    .site-header.scrolled .logo{
    height:42px;
    }
    .site-header.scrolled{
        box-shadow:0 4px 12px rgba(0,0,0,0.08);
        }
    
    /* HERO */
    
    .hero-section{
        position:relative;
        background:url('https://d3q7porexqyyxj.cloudfront.net/sites/5008/welcome-bg.jpg') center/cover no-repeat;
        padding:60px 20px 60px;
        text-align:center;
        color:#fff;
        }
    
    .hero-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,rgba(0,55,85,.85),rgba(0,90,120,.65));
    }
    
    .hero-center{
    position:relative;
    z-index:2;
    max-width:950px;
    margin:auto;
    }
    
    .hero-center h1{
    font-size:48px;
    font-weight:800;
    }
    
    .hero-center h3{
    font-size:22px;
    margin-bottom:20px;
    }
    
    
    /* HERO BENEFITS */
    
    .hero-benefits{
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
    margin-bottom:30px;
    }
    
    .benefit{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:600;
    }
    
    .benefit i{
    color:#7be7ff;
    }
    
    
    /* FORM */
    
    .form-wrapper{
    display:flex;
    justify-content:center;
    }
    
    .form-box{
    background:#fff;
    color:#333;
    padding:35px;
    border-radius:14px;
    box-shadow:0 20px 50px rgba(0,0,0,.3);
    max-width:520px;
    width:100%;
    }
    
    .form-sub{
    font-size:14px;
    color:#666;
    margin-bottom:15px;
    }
    
    .progress{
    height:6px;
    margin-bottom:20px;
    }
    
    .progress-bar{
    background:#00a9b7;
    width:20%;
    }
    
    .step{
    display:none;
    }
    
    .step.active{
    display:block;
    }
    
    .edu{
    font-size:14px;
    color:#666;
    margin-top:10px;
    }
    
    
    /* TRUST BAR */
    
    .trust-bar{
    background:#f3f5f7;
    padding:25px 0;
    }
    
    .trust-items{
    display:flex;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
    }
    
    .trust-item{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:600;
    }
    
    .trust-item i{
    color:#0086d1;
    }
    /* BMI STEP */

.bmi-card{
background:#fff;
padding:20px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
margin-bottom:20px;
text-align:center;
}

.bmi-card p{
font-size:14px;
color:#666;
margin-bottom:8px;
}

.bmi-bar{
height:6px;
border-radius:10px;
background:linear-gradient(to right, green, yellow, orange, red);
margin-bottom:10px;
position:relative;
overflow:hidden;
}

.bmi-fill{
height:6px;
width:0%;
background:#00a9b7;
transition:0.3s ease;
}

.bmi-card h3{
font-size:22px;
margin:0;
}

.hw-row{
display:flex;
gap:10px;
}

.hw-row select{
flex:1;
}

/* Smooth CTA feel */
/* PREMIUM CTA BUTTON */

.btn-primary,
.btn-success{
position: relative;
border: none;
border-radius: 40px;
padding: 14px;
font-size: 16px;
font-weight: 600;
color: #fff;
background: linear-gradient(135deg, #00a9b7, #6dd5ed);
cursor: pointer;
overflow: hidden;
transition: all 0.3s ease;
}

/* Gradient animation */
.btn-primary::before,
.btn-success::before{
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
transition: 0.5s;
}

/* Hover effect */
.btn-primary:hover,
.btn-success:hover{
transform: translateY(-2px) scale(1.02);
box-shadow: 0 10px 25px rgba(0,169,183,0.4);
}

/* Shine animation */
.btn-primary:hover::before,
.btn-success:hover::before{
left: 100%;
}

/* Click effect */
.btn-primary:active,
.btn-success:active{
transform: scale(0.96);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Disabled state (optional but recommended) */
.btn-primary:disabled{
background: #ccc;
cursor: not-allowed;
box-shadow: none;
}
/* Left align fix */
.step h5{
text-align:left;
}

/* Icon color */
.icon-green{
color:#00a9b7;
}

/* Input with icon */
.input-icon{
position:relative;
flex:1;
}

.input-icon.full{
width:100%;
}

.input-icon i{
position:absolute;
left:12px;
top:50%;
transform:translateY(-50%);
color:#00a9b7;
font-size:14px;
}

/* Add padding for icon */
.input-icon select,
.input-icon input{
padding-left:35px;
}
.btn-loading{
pointer-events:none;
opacity:0.8;
}
.btn-primary i{
transition:0.3s;
}

.btn-primary:hover i{
transform:translateX(5px);
}
/* Height row */
.hw-row{
display:flex;
gap:10px;
}
/* ICON SYSTEM GLOBAL */

.icon-green{
color:#00a9b7;
}

/* Input icon system */
.input-icon{
position:relative;
width:100%;
}

.input-icon i{
position:absolute;
left:12px;
top:50%;
transform:translateY(-50%);
color:#00a9b7;
font-size:14px;
}

.input-icon input,
.input-icon select{
padding-left:38px;
}

/* Headings alignment */
.step h5{
text-align:left;
font-weight:600;
margin-bottom:15px;
}

/* Better spacing */
.step{
animation:fadeIn .3s ease;
}

@keyframes fadeIn{
from{opacity:0; transform:translateY(10px);}
to{opacity:1; transform:translateY(0);}
}

/* Better spacing */
.form-group{
margin-bottom:18px;
}

.field-error{
color:#b42318;
font-size:13px;
line-height:1.3;
margin-top:6px;
margin-bottom:8px;
text-align:left;
}

.field-error:empty{
display:none;
margin-top:0;
margin-bottom:0;
}

.is-invalid{
border-color:#dc2626 !important;
box-shadow:0 0 0 0.2rem rgba(220,38,38,0.15) !important;
}

.is-valid{
border-color:#16a34a;
}
    
    
    /* HOW IT WORKS */
    
    .how-section{
    padding:100px 20px;
    background:#fff;
    }
    
    .timeline{
    display:flex;
    justify-content:space-between;
    margin-top:60px;
    position:relative;
    }
    
    .timeline:before{
        content:"";
        position:absolute;
        top:38px;
        left:10%;
        right:10%;
        height:3px;
        background:#e6eef2;
        z-index:0;
        }
    
    .timeline-step{
    text-align:center;
    max-width:280px;
    }
    
    .timeline-icon{
        width:80px;
        height:80px;
        background:#00a9b7;
        border-radius:50%;
        display:flex;
        align-items:center;
        justify-content:center;
        margin:auto;
        margin-bottom:20px;
        color:#fff;
        font-size:28px;
        position:relative;
        z-index:2;
        }
    
    
    /* MOBILE */
    
    @media(max-width:768px){
    
    .hero-center h1{
    font-size:30px;
    }
    
    .hero-center h3{
    font-size:18px;
    }
    
    .hero-benefits{
    gap:15px;
    }
    
    .timeline{
    flex-direction:column;
    gap:40px;
    }
    
    .timeline:before{
    display:none;
    }
    
    }
    @media(max-width:768px){

        .header-btn{
        display:none;
        }
        
        }

        @media(max-width:768px){

            .hero-section{
            padding:50px 20px 50px;
            }
            
            .hero-center h1{
            font-size:30px;
            }
            
            .hero-center h3{
            font-size:18px;
            }
            
            }
            @media(max-width:768px){

                .hero-benefits{
                display:none;
                }
                
                }
                @media(max-width:768px){

                    .header-flex{
                    justify-content:center;
                    }
                    
                    }

                    @media(max-width:768px){

                        .logo{
                        height:50px;
                        }
                        
                        }
                        @media(max-width:768px){

                            .timeline{
                            flex-direction:column;
                            align-items:center;
                            gap:40px;
                            }
                            
                            .timeline-step{
                            text-align:center;
                            max-width:320px;
                            }
                            
                            .timeline:before{
                            display:none;
                            }
                            
                            
                            }
/* BENEFITS SECTION */

.benefits-section{

    background:#f6f9fc;
    
    padding:100px 20px;
    
    }
    
    
    .section-title{
    
    font-size:38px;
    
    font-weight:800;
    
    text-align:center;
    
    margin-bottom:10px;
    
    }
    
    
    .section-subtitle{
    
    text-align:center;
    
    color:#666;
    
    max-width:600px;
    
    margin:auto;
    
    }
    
    
    /* BENEFIT CARD */
    
    .benefit-modern-card{
    
    background:#fff;
    
    padding:35px 25px;
    
    border-radius:14px;
    
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    
    text-align:center;
    
    height:100%;
    
    transition:all .35s ease;
    
    }
    
    
    /* ICON */
    
    .benefit-icon{
    
    width:70px;
    
    height:70px;
    
    margin:auto;
    
    margin-bottom:20px;
    
    border-radius:50%;
    
    background:#eaf7fb;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    font-size:28px;
    
    color:#00a9b7;
    
    transition:all .35s ease;
    
    }
    
    
    /* TEXT */
    
    .benefit-modern-card h4{
    
    font-weight:700;
    
    margin-bottom:10px;
    
    font-size:20px;
    
    }
    
    
    .benefit-modern-card p{
    
    color:#666;
    
    font-size:15px;
    
    }
    
    
    /* HOVER EFFECT */
    
    .benefit-modern-card:hover{
    
    transform:translateY(-8px);
    
    box-shadow:0 20px 45px rgba(0,0,0,.15);
    
    }
    
    
    .benefit-modern-card:hover .benefit-icon{
    
    background:#00a9b7;
    
    color:#fff;
    
    transform:scale(1.15) rotate(8deg);
    
    }

    /* CTA BUTTON BASE */

.cta-main-btn,
.header-btn{

display:inline-block;

background:linear-gradient(135deg,#00a9b7,#0086d1);

color:#fff;

padding:12px 26px;

border-radius:10px;

font-weight:600;

text-decoration:none;

transition:all .35s ease;

box-shadow:0 6px 18px rgba(0,0,0,.15);

}


/* HEADER BUTTON SIZE */

.header-btn{

font-size:15px;

}


/* BENEFITS BUTTON BIGGER */

.cta-large{

font-size:18px;

padding:16px 34px;

font-weight:700;

}


/* HOVER EFFECT */

.cta-main-btn:hover,
.header-btn:hover{

color:#fff;

transform:translateY(-3px);

box-shadow:0 12px 28px rgba(0,0,0,.25);

background:linear-gradient(135deg,#0086d1,#00a9b7);

}


/* CLICK EFFECT */

.cta-main-btn:active,
.header-btn:active{

transform:translateY(1px);

box-shadow:0 5px 12px rgba(0,0,0,.2);

}
/* FAQ MODERN */

.faq-modern{

    padding:100px 20px;
    
    background:#FFF;
    
    }
    
    .faq-title{
    
    font-size:36px;
    
    font-weight:800;
    
    margin-bottom:15px;
    
    }
    
    .faq-lead{
    
    color:#666;
    
    margin-bottom:25px;
    
    }
    
    .faq-highlight{
    
    display:flex;
    
    gap:15px;
    
    flex-wrap:wrap;
    
    }
    
    .faq-mini{
    
    background:#fff;
    
    padding:10px 15px;
    
    border-radius:8px;
    
    box-shadow:0 5px 15px rgba(0,0,0,.08);
    
    font-size:14px;
    
    display:flex;
    
    gap:8px;
    
    align-items:center;
    
    }
    
    .faq-accordion .accordion-item{
    
    border:none;
    
    margin-bottom:12px;
    
    border-radius:10px;
    
    overflow:hidden;
    
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    
    }
    
    .faq-accordion .accordion-button{
    
    font-weight:600;
    
    gap:10px;
    
    }
    
    
    /* CTA MODERN */
    
    .cta-modern{
    
    padding:110px 20px;
    
    background:linear-gradient(135deg,#00a9b7,#0086d1);
    
    color:#fff;
    
    }
    .cta-inner{
    
        padding:60px 20px;
        
        background:linear-gradient(135deg,#00a9b7,#0086d1);
        
        color:#fff;
        
        }
    .cta-title{
    
    font-size:40px;
    
    font-weight:800;
    
    }
    
    .cta-text{
    
    max-width:700px;
    
    margin:auto;
    
    margin-top:15px;
    
    opacity:.95;
    
    }
    
    .cta-trust{
    
    display:flex;
    
    justify-content:center;
    
    gap:20px;
    
    flex-wrap:wrap;
    
    }
    
    .trust-pill{
    
    background:rgba(255,255,255,.15);
    
    padding:10px 18px;
    
    border-radius:30px;
    
    display:flex;
    
    gap:8px;
    
    align-items:center;
    
    }
    
    
    /* FOOTER MODERN */
    
    .footer-modern{
    
    background:#0f172a;
    
    color:#cbd5e1;
    
    padding:80px 20px 40px;
    
    }
    
    .footer-logo{
    
    max-width:200px;
    
    margin-bottom:15px;
    
    }
    
    .footer-links{
    
    list-style:none;
    
    padding:0;
    
    }
    
    .footer-links li{
    
    margin-bottom:8px;
    
    }
    
    .footer-links a{
    
    color:#cbd5e1;
    
    text-decoration:none;
    
    }
    
    .footer-links a:hover{
    
    color:#fff;
    
    }
    
    .footer-small{
    
    font-size:14px;
    
    color:#94a3b8;
    
    }
    
    .footer-bottom{
    
    text-align:center;
    
    font-size:14px;
    
    margin-top:20px;
    
    }

    /* CTA SECTION BUTTON */

.cta-modern .cta-main-btn{

    background:#ffffff;
    
    color:#0086d1;
    
    border:2px solid #ffffff;
    
    font-weight:700;
    
    box-shadow:0 10px 30px rgba(0,0,0,.2);
    
    }
    
    
    /* HOVER EFFECT */
    
    .cta-modern .cta-main-btn:hover{
    
    background:#f1f5f9;
    
    color:#0077b6;
    
    transform:translateY(-3px);
    
    box-shadow:0 15px 35px rgba(0,0,0,.25);
    
    }
    .tcpa-text{
font-size:12px; line-height: 16px; color:#666; margin-top:10px;
}