*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,sans-serif;background:#f4f7fb;color:#111;overflow-x:hidden}
.container{width:92%;max-width:1400px;margin:auto}

.topbar{background:#02142f;color:#fff;padding:12px 0}
.topbar-inner{display:flex;justify-content:space-between}

.header{background:#fff;padding:25px 0;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.header-inner{display:flex;justify-content:space-between;align-items:center;gap:30px}

.main-logo{height:90px}
.logo-area h1{font-size:52px;color:#0d4ea3}
.logo-area span{display:block;margin-top:8px;color:#666}

.operator-area{display:flex;gap:20px}
.operator-logo{height:55px}

.header-actions a{
display:inline-block;
padding:16px 24px;
border-radius:14px;
background:#052760;
color:#fff;
text-decoration:none;
font-weight:bold;
margin-left:10px;
}

.navbar{background:#041b46}
.navbar ul{display:flex;gap:35px;list-style:none;padding:18px 0}
.navbar a{color:#fff;text-decoration:none;font-weight:bold}

.hero{
height:760px;
background-size:cover;
background-position:center;
display:flex;
align-items:center;
}

.hero-content{
max-width:650px;
color:#fff;
background:rgba(255,255,255,.08);
padding:45px;
border-radius:30px;
backdrop-filter:blur(6px);
}

.hero-badge{
display:inline-block;
padding:12px 22px;
background:#0a56d8;
border-radius:40px;
margin-bottom:25px;
}

.hero-content h2{
font-size:88px;
margin-bottom:25px;
}

.hero-content p{
font-size:28px;
line-height:1.5;
margin-bottom:35px;
}

.hero-buttons a{
display:inline-block;
padding:18px 32px;
border-radius:14px;
margin-right:15px;
text-decoration:none;
font-weight:bold;
}

.btn-primary{background:#0a56d8;color:#fff}
.btn-secondary{border:2px solid #fff;color:#fff}

.payments{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
margin-top:-70px;
position:relative;
z-index:10;
}

.payment-card{
background:#fff;
padding:40px;
border-radius:28px;
text-align:center;
box-shadow:0 20px 40px rgba(0,0,0,.08);
}

.icon-circle{
width:70px;
height:70px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#eef3ff;
font-size:30px;
margin:auto auto 20px;
}

.services{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
padding:110px 0;
}

.service-card,
.campaign-card{
background:#fff;
padding:45px;
border-radius:28px;
box-shadow:0 20px 40px rgba(0,0,0,.08);
}

.campaigns{
padding-bottom:100px;
}

.campaigns h2{
font-size:46px;
text-align:center;
margin-bottom:50px;
}

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

.badge{
display:inline-block;
padding:10px 18px;
border-radius:30px;
background:#0a56d8;
color:#fff;
margin-bottom:20px;
}

.red{background:#e60000}
.blue{background:#0095ff}

.footer{
background:#02142f;
color:#fff;
padding:100px 0 30px;
}

.footer-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;
}

.copyright{
text-align:center;
padding-top:40px;
opacity:.7;
}

@media(max-width:992px){

.topbar-inner,
.header-inner,
.navbar ul{
display:flex;
flex-direction:column;
gap:20px;
}

.payments,
.services,
.campaign-grid,
.footer-grid{
grid-template-columns:1fr;
}

.hero-content h2{
font-size:54px;
}

}