.back-btn{
    display:inline-block;
    margin-bottom:22px;
    color:#6b7280;
    text-decoration:none;
    font-size:15px;
}

.hero-card{
    background:linear-gradient(135deg,#071424,#0d223f);
    border-radius:28px;
    padding:50px;
    display:flex;
    justify-content:space-between;
    gap:40px;
    color:#fff;
}

.hero-left{
    width:70%;
}

.hero-tag{
    display:inline-block;
    padding:8px 18px;
    border-radius:30px;
    border:1px solid rgba(255,255,255,.2);
    background:#0f3158;
    color:#57b7ff;
    font-size:12px;
    font-weight:700;
    letter-spacing:1px;
}

.hero-card h1{
    margin:22px 0 18px;
    font-size:52px;
    line-height:1.15;
    font-weight:800;
}

.hero-card p{
    color:#b8c8dd;
    line-height:1.8;
    font-size:15px;
}

.hero-stats{
    display:flex;
    gap:60px;
    margin-top:45px;
}

.stat h2 {
    margin: 0;
    color: #53c8ff;
    font-size: 18px;
    text-align: center;
}

.stat span{
    color:#9db0c8;
    text-transform:uppercase;
    font-size:12px;
}

.hero-right{
    width:230px;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.pill {
    border: 1px solid rgba(255, 255, 255, .15);
    padding: 7px 22px;
    border-radius: 40px;
    background: rgba(255, 255, 255, .05);
    font-size: 12px;
}

.feature-strip{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    background:#fff;
    border-radius:0 0 18px 18px;
    overflow:hidden;
    border:1px solid #e6edf8;
        margin-top: -22px;
}

.feature-strip .item{
    padding:22px;
    border-right:1px solid #edf2fa;
}
.content h6 {
    font-size: 16px !important;
}
.feature-strip .item:last-child{
    border-right:none;
}

.feature-strip small{
    display:block;
    color:#8d98aa;
    margin-bottom:8px;
    font-size:11px;
    letter-spacing:1px;
}

.feature-strip strong{
    font-size:14px;
}

.problem{
    margin-top:55px;
}

.problem h6{
    color:#7a8ca7;
    font-size:12px;
    letter-spacing:2px;
    margin-bottom:18px;
}

.quote {
    background: #f2f6fb;
    border: 1px solid #dbe6f4;
    border-radius: 2px;
    padding: 28px;
    color: #4a5d77;
    font-style: italic;
    line-height: 1.8;
    margin-bottom: 25px;
    font-size: 17px;
    border-left: 6px solid #0078aa;
}


.problem p{
    color:#526277;
    line-height:1.9;
    font-size: 16px;
}
.components{
    margin-top:70px;
}

.components h6{
    font-size:12px;
    letter-spacing:2px;
    color:#7b8798;
    margin-bottom:18px;
}

.tabs{
    display:flex;
    gap:12px;
    margin-bottom:35px;
}

.tabs button{
    border:1px solid #d9e5f3;
    background:#fff;
    padding:12px 22px;
    border-radius:40px;
    cursor:pointer;
    font-weight:600;
    color:#50627d;
}

.tabs .active{
    background:#007aab;
    color:#fff;
    border-color:#007aab;
}

.component-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.component-card{
    background:#fff;
    border:1px solid #e5edf7;
    border-radius:18px;
    padding:30px;
    transition:.3s;
}

.component-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.component-card span{
    color:#9fb0c5;
    font-weight:700;
    font-size:13px;
}

.component-card h3{
    margin:16px 0;
    font-size:24px;
    line-height:1.35;
    color:#13243d;
}

.component-card p{
    color:#66758a;
    line-height:1.8;
    margin-bottom:26px;
}

.component-card label{
    display:inline-block;
    padding:8px 14px;
    border-radius:30px;
    background:#eef5ff;
    color:#3b82f6;
    font-size:12px;
    font-weight:700;
}
.changes{
    margin-top:70px;
}

.changes h6,
.expect h6{
    font-size:12px;
    letter-spacing:2px;
    color:#7a8798;
    margin-bottom:20px;
}

.compare-table{

    display:grid;
    grid-template-columns:1fr 1fr;
    border:1px solid #e4ebf4;
    border-radius:18px;
    overflow:hidden;
    background:#fff;

}

.compare-head{

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

}

.before{
    background:#fff1f1;
    color:#d13b3b;
}

.after{
    background:#ebfff3;
    color:#12a150;
}

.cell{

    padding:24px;
    border-top:1px solid #edf2f7;
    border-right:1px solid #edf2f7;
    color:#536579;
    line-height:1.8;

}

.green{

    background:#f7fff8;

}

.expect{

    margin-top:70px;

}

.expect-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;

}

.expect-card{

    background:#fff;
    border-radius:18px;
    padding:18px;
    border-top:5px solid;
    border-color: #0078aa;
}
span.hero-tag {
    display: none;
}

.expect-card h3{

    margin-top:0;
    font-size:18px;
    line-height:1.3;

}

.expect-card p{

    color:#66758a;
    line-height:1.8;

}

.blue{
    border-color:#0078aa;
}

/*.green{
    border-color:#22c55e;
}*/

.orange{
    border-color:#0078aa;
}

.purple{
    border-color:#0078aa;
}

.cta{

    margin-top:50px;
    background:linear-gradient(135deg,#061425,#0c203b);
    border-radius:24px;
    padding:20px 50px;
    display:flex;
    justify-content:space-between;
    align-items:center;

}

.cta h2{

    color:#fff;
    font-size:38px;
    margin-bottom:12px;

}

.cta p{

    color:#9eb3cb;
    max-width:650px;
    line-height:1.8;

}

.cta a{

    background:#3366ff;
    color:#fff;
    text-decoration:none;
    padding:18px 34px;
    border-radius:12px;
    font-weight:700;
    white-space:nowrap;

}

.cta a:hover{

    background:#2555ef;

}


*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

a,
button,
.component-card,
.expect-card,
.hero-card,
.pill{
    transition:.3s ease;
}


.component-card:hover{

    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(16,24,40,.08);

}

.expect-card:hover{

    transform:translateY(-6px);

}

.pill:hover{

    background:#1677ff;
    color:#fff;

}

.tabs button:hover{

    background:#007aab;
    color:#fff;

}

.feature-strip .item:hover{

    background:#f7fbff;

}



.component-card,
.expect-card,
.quote,
.compare-table,
.feature-strip,
.hero-card{

    overflow:hidden;

}



@media(max-width:1024px){

.container{

    width:92%;

}

.hero-card{

    flex-direction:column;

}

.hero-left,
.hero-right{

    width:100%;

}

.hero-right{

    flex-direction:row;
    flex-wrap:wrap;

}

.hero-card h1{

    font-size:42px;

}

.hero-stats{

    gap:35px;
    flex-wrap:wrap;

}

.feature-strip{

    grid-template-columns:repeat(2,1fr);

}

.component-grid{

    grid-template-columns:repeat(2,1fr);

}

.expect-grid{

    grid-template-columns:repeat(2,1fr);

}

.cta{

    flex-direction:column;
    align-items:flex-start;
    gap:30px;

}

.cta h2{

    font-size:32px;

}

}



@media(max-width:767px){

.container{

    width:92%;
    padding:30px 0 60px;

}

.hero-card{

    padding:30px;

}

    .hero-card h1 {
        font-size: 18px;
        line-height: 30px;
    }
    .stat {
    text-align: center;
}

.hero-card p{

    font-size:16px;

}

.hero-tag{

    font-size:11px;

}

.hero-stats{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-top:30px;

}

.hero-right{

    margin-top:25px;

}

.pill{

    width:100%;
    /*text-align:center;*/

}

.feature-strip{

    grid-template-columns:1fr;

}

.component-grid{

    grid-template-columns:1fr;

}

.expect-grid{

    grid-template-columns:1fr;

}

.compare-table{

    grid-template-columns:1fr;

}

.compare-head{

    text-align:center;

}

.cell{

    border-right:none;

}

.tabs{

    overflow:auto;
    white-space:nowrap;
    padding-bottom:10px;

}

.tabs button{

    flex:none;

}

.cta{

    padding:30px;

}

.cta h2{

    font-size:18px;

}

.cta a{

    width:100%;
    text-align:center;

}

}



@media(min-width:1400px){

.container{

    width:1280px;

}

.hero-card h1{

    font-size:32px;

}

.component-card h3{

    font-size:18px;

}

.cta h2{

    font-size:32px;

}

}



::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#0d5eff;
    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#edf2f7;

}
.tab-content{
    display:none;
}

.tab-content.active{
    display:block;
}

.component-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

@media(max-width:768px){
    .component-grid{
        grid-template-columns:1fr;
    }
}