:root{
--navy:#17324d;
--navy-deep:#0d2033;
--ink:#1a2734;
--muted:#566575;
--line:#d8dee7;
--paper:#fff;
--surface:#f5f6f8;
--accent:#0f766e;
--accent-bright:#c69a4b;
--accent-dark:#0a5a55;
--shadow:0 18px 45px rgba(23,50,77,0.13);
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Poppins','Segoe UI',Arial,sans-serif;
line-height:1.7;
color:var(--ink);
background:
linear-gradient(180deg,#fff 0,#f7f7f5 360px,var(--surface) 100%);
}

a,
button,
input,
textarea{
font:inherit;
}

.container{
width:calc(100% - 48px);
max-width:1200px;
margin:auto;
}

header{
background:rgba(8,25,44,0.98);
border-bottom:1px solid rgba(255,255,255,0.14);
box-shadow:0 12px 36px rgba(1,9,31,0.2);
padding:12px 0;
position:sticky;
top:0;
z-index:999;
}

.nav-container{
display:flex;
justify-content:space-between;
align-items:center;
gap:28px;
min-height:78px;
}

.logo-area{
display:flex;
align-items:center;
gap:16px;
min-width:0;
}

.logo-area img{
width:76px;
height:auto;
flex-shrink:0;
}

.logo-text{
color:#fff;
}

.logo-text h2{
font-size:21px;
font-weight:600;
line-height:1.2;
letter-spacing:0;
}

.logo-text p{
color:rgba(255,255,255,0.72);
font-size:12px;
line-height:1.45;
margin-top:4px;
}

nav{
flex-shrink:0;
}

nav ul{
display:flex;
align-items:center;
gap:6px;
list-style:none;
}

nav ul li a{
border-bottom:2px solid transparent;
color:rgba(255,255,255,0.9);
display:block;
font-size:14px;
font-weight:500;
padding:10px 11px 8px;
text-decoration:none;
transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}

nav ul li a:hover,
nav ul li a:focus-visible{
background:rgba(255,255,255,0.08);
border-color:var(--accent);
color:#fff;
outline:none;
}

.hero{
background:
linear-gradient(90deg,rgba(13,32,51,0.96) 0%,rgba(23,50,77,0.84) 42%,rgba(23,50,77,0.28) 76%),
url("images/hero-business-solutions.jpg") center/cover no-repeat;
color:#fff;
display:flex;
align-items:center;
min-height:620px;
padding:92px 0 104px;
}

.hero-content::before{
background:linear-gradient(90deg,var(--accent-bright),var(--accent));
content:"";
display:block;
height:4px;
margin-bottom:24px;
width:72px;
}

.hero h1{
font-size:54px;
font-weight:600;
line-height:1.13;
letter-spacing:0;
max-width:720px;
margin-bottom:22px;
}

.hero p{
color:rgba(255,255,255,0.88);
font-size:19px;
font-weight:300;
line-height:1.75;
max-width:670px;
margin-bottom:34px;
}

.btn{
background:var(--accent);
border:1px solid var(--accent);
border-radius:6px;
box-shadow:0 14px 32px rgba(2,12,36,0.24);
color:#fff;
display:inline-block;
font-weight:500;
padding:13px 28px;
text-decoration:none;
transition:background-color .2s ease,border-color .2s ease,transform .2s ease;
}

.btn:hover,
.btn:focus-visible{
background:var(--accent-dark);
border-color:var(--accent-dark);
outline:none;
transform:translateY(-1px);
}

.section{
padding:92px 0;
}

.section-title{
margin-bottom:38px;
text-align:left;
}

.section-title h2{
color:var(--navy);
font-size:38px;
font-weight:600;
line-height:1.2;
letter-spacing:0;
}

.section-title h2::after{
background:linear-gradient(90deg,var(--accent),var(--accent-bright));
content:"";
display:block;
height:3px;
margin-top:16px;
width:58px;
}

.section .container > p{
color:var(--muted);
font-size:17px;
max-width:900px;
}

.card-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:22px;
margin-top:42px;
}

.card{
background:var(--paper);
border:1px solid var(--line);
border-radius:8px;
box-shadow:0 12px 30px rgba(20,32,53,0.07);
min-height:100%;
padding:30px 28px;
position:relative;
transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}

.card::before{
background:linear-gradient(90deg,var(--accent),var(--accent-bright));
content:"";
height:3px;
left:28px;
position:absolute;
top:0;
width:44px;
}

.card:hover{
border-color:#c5d3e4;
box-shadow:var(--shadow);
transform:translateY(-3px);
}

.card h3{
color:var(--navy);
font-size:21px;
font-weight:600;
line-height:1.35;
letter-spacing:0;
margin-bottom:13px;
}

.card p{
color:var(--muted);
}

.page-banner{
background:
linear-gradient(90deg,rgba(13,32,51,0.98),rgba(23,50,77,0.92)),
url("images/hero-business-solutions.jpg") center/cover no-repeat;
border-bottom:1px solid rgba(7,26,82,0.08);
color:#fff;
padding:90px 24px;
text-align:center;
}

.page-banner h1{
font-size:46px;
font-weight:600;
line-height:1.2;
letter-spacing:0;
}

.contact-content{
align-items:start;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(360px,1fr);
gap:54px;
}

.contact-content h2{
color:var(--navy);
font-size:32px;
font-weight:600;
line-height:1.25;
letter-spacing:0;
}

.contact-content p{
color:var(--muted);
}

.contact-content strong{
color:var(--ink);
font-weight:600;
}

.contact-form{
background:var(--paper);
border:1px solid var(--line);
border-radius:8px;
box-shadow:var(--shadow);
padding:30px;
}

.contact-form input,
.contact-form textarea{
background:#fbfcfe;
border:1px solid #cbd6e5;
border-radius:6px;
color:var(--ink);
display:block;
margin-bottom:16px;
padding:14px 15px;
transition:border-color .2s ease,box-shadow .2s ease;
width:100%;
}

.contact-form textarea{
min-height:150px;
resize:vertical;
}

.contact-form input:focus,
.contact-form textarea:focus{
border-color:var(--navy);
box-shadow:0 0 0 4px rgba(15,118,110,0.16);
outline:none;
}

.contact-form button{
background:var(--navy);
border:1px solid var(--navy);
border-radius:6px;
color:#fff;
cursor:pointer;
font-weight:500;
padding:13px 27px;
transition:background-color .2s ease,border-color .2s ease,transform .2s ease;
}

.contact-form button:hover,
.contact-form button:focus-visible{
background:var(--navy-deep);
border-color:var(--navy-deep);
outline:none;
transform:translateY(-1px);
}

footer{
background:var(--navy-deep);
border-top:4px solid var(--accent-bright);
color:rgba(255,255,255,0.8);
font-size:14px;
line-height:1.8;
margin-top:18px;
padding:34px 20px;
text-align:center;
}

footer p:first-child{
color:#fff;
font-weight:500;
}

.highlight{
color:var(--accent-dark);
font-weight:600;
}

@media(max-width:1050px){

.nav-container{
align-items:flex-start;
flex-direction:column;
gap:12px;
}

nav{
width:100%;
}

nav ul{
border-top:1px solid rgba(255,255,255,0.12);
flex-wrap:wrap;
padding-top:10px;
}

.hero{
background-position:58% center;
min-height:590px;
}

}

@media(max-width:768px){

.container{
width:calc(100% - 32px);
}

header{
padding:10px 0;
}

.nav-container{
min-height:0;
}

.logo-area{
gap:12px;
}

.logo-area img{
width:62px;
}

.logo-text h2{
font-size:17px;
}

.logo-text p{
font-size:11px;
max-width:250px;
}

nav ul{
gap:2px 8px;
}

nav ul li a{
font-size:13px;
padding:8px 4px 6px;
}

.hero{
background:
linear-gradient(90deg,rgba(13,32,51,0.97) 0%,rgba(23,50,77,0.9) 58%,rgba(23,50,77,0.68) 100%),
url("images/hero-business-solutions.jpg") 68% center/cover no-repeat;
min-height:540px;
padding:70px 0 76px;
}

.hero-content::before{
margin-bottom:20px;
}

.hero h1{
font-size:36px;
margin-bottom:18px;
}

.hero p{
font-size:16px;
line-height:1.7;
margin-bottom:28px;
}

.section{
padding:68px 0;
}

.section-title{
margin-bottom:28px;
}

.section-title h2,
.contact-content h2{
font-size:30px;
}

.section .container > p{
font-size:16px;
}

.card-grid{
grid-template-columns:1fr;
gap:16px;
margin-top:32px;
}

.card{
padding:26px 22px;
}

.card::before{
left:22px;
}

.page-banner{
padding:66px 16px;
}

.page-banner h1{
font-size:34px;
}

.contact-content{
grid-template-columns:1fr;
gap:32px;
}

.contact-form{
padding:22px;
}

}