:root {
  --navy: #0A2342;
  --orange: #FF6B35;
  --steel: #4A5568;
  --light: #F7FAFC;
  --white: #FFFFFF;
}
* { margin:0; padding:0; box-sizing:border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { color: var(--steel); background: var(--white); line-height:1.6; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }

.navbar { background: var(--navy); color: var(--white); padding:15px 0; position:sticky; top:0; z-index:100; }
.navbar .container { display:flex; justify-content:space-between; align-items:center; }
.logo-wrap { display:flex; align-items:center; gap:12px; }
.logo-img { height:50px; width:auto; }
.logo-text { font-size:1.3rem; font-weight:800; line-height:1.1; }
.logo-text span { font-weight:400; font-size:0.8rem; display:block; }
.navbar nav a { color:var(--white); margin-left:20px; text-decoration:none; font-weight:600; }
.navbar nav a.active, .navbar nav a:hover { color: var(--orange); }

.hero { background: url('https://images.unsplash.com/photo-1581090700227-1e37b190418e?q=80&w=2070') center/cover; height:90vh; position:relative; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--white); }
.hero .overlay { position:absolute; inset:0; background:rgba(10,35,66,0.75); }
.hero-content { position:relative; z-index:2; max-width:800px; }
.hero h1 { font-size:3.5rem; margin-bottom:20px; }
.btn { padding:14px 28px; border-radius:6px; text-decoration:none; font-weight:700; display:inline-block; margin:5px; }
.btn-primary { background:var(--orange); color:var(--white); }
.btn-outline { border:2px solid var(--white); color:var(--white); }

.page-header { background:var(--navy); color:var(--white); text-align:center; padding:80px 20px; }
h2 { font-size:2.5rem; color:var(--navy); margin-bottom:20px; text-align:center; }
h3 { color:var(--navy); margin-bottom:10px; }

.grid, .service-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:30px; padding:60px 0; }
.card, .service { background:var(--light); padding:0; border-radius:10px; overflow:hidden; border-top:4px solid var(--orange); }
.card img, .service img { width:100%; height:200px; object-fit:cover; }
.card h3, .service h3 { padding:20px 20px 0; }
.card p, .service p { padding:0 20px 20px; }

.portfolio-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:15px; padding:60px 0; }
.portfolio-grid img { width:100%; height:250px; object-fit:cover; border-radius:8px; }

.about-img { width:100%; border-radius:10px; margin-bottom:30px; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; padding:60px 0; }
.contact-form input, .contact-form textarea { width:100%; padding:12px; margin-bottom:15px; border:1px solid #ddd; border-radius:6px; }
footer { background:var(--navy); color:var(--white); text-align:center; padding:20px 0; margin-top:40px; }

@media(max-width:768px){
  .hero h1 { font-size:2.2rem; }
  .contact-grid, .portfolio-grid { grid-template-columns:1fr; }
  .navbar .container { flex-direction:column; gap:10px; }
}