:root{
--main:#1f4e79;
--soft:#f6f8fb;
--text:#222;
}

body{
margin:0;
background:var(--soft);
font-family:system-ui;
color:var(--text);
}

/* navbar */

.navbar{

background:#fff;

border-bottom:1px solid #eee;

}

.navbar-brand{

font-size:28px;

font-weight:800;

color:var(--main);

}

/* layout */

.main{

padding:34px;

max-width:1200px;

margin:auto;

}

/* hero */
.hero{

background:
linear-gradient(
135deg,
#1f4e79,
#2f6fb2
);

border-radius:
28px;

padding:
28px;

color:
white;

overflow:
hidden;

}


.hero h1{

font-size:
clamp(
36px,
8vw,
72px
);

line-height:
1.1;

word-break:
keep-all;

margin-top:
16px;

}


.hero p{

font-size:
clamp(
16px,
3.5vw,
22px
);

opacity:
.95;

}


.badge-fast{

display:inline-flex;

align-items:center;

padding:
10px 18px;

background:
rgba(
255,
255,
255,
.9
);

color:
#1f4e79;

border-radius:
999px;

font-weight:
700;

}


@media(max-width:768px){

.hero{

padding:
24px;

border-radius:
22px;

}

.hero h1{

font-size:
48px;

}

.hero p{

font-size:
18px;

}

}

/* cards */

.card-menu{

display:block;

background:#fff;

padding:24px;

border-radius:24px;

text-decoration:none;

color:#222;

margin-bottom:20px;

box-shadow:

0 10px 30px
rgba(0,0,0,.05);

transition:.2s;

}

.card-menu:hover{

transform:
translateY(-4px);

color:#222;

}

.card-title{

font-size:22px;

font-weight:700;

}

.card-desc{

color:#666;

margin-top:8px;

line-height:1.7;

}

/* footer */

footer{

margin-top:60px;

padding:40px;

background:white;

text-align:center;

color:#888;

border-top:1px solid #eee;

}

/* mobile */

@media(max-width:991px){

.main{

padding:18px;

}

.hero{

padding:28px;

}

.hero h1{

font-size:34px;

}

.hero p{

font-size:16px;

}

.card-title{

font-size:20px;

}

}

.nav-link{

padding:10px 16px!important;

border-radius:14px;

color:#444!important;

}

.nav-link:hover{

background:#eef4ff;

}

.navbar-toggler{

border:none;

}