/* Base */
:root{
  --topbar:#2c3b4a;         /* requested top bar color */
  --bg0:#0f1724;
  --bg1:#0f1b2a;
  --text:#e9eef6;
  --muted:#aeb7c6;
  --brand:#2b77ff;
  --card:#151e2c;
  --card-br:#253144;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  color:var(--text);
  background: radial-gradient(1200px 600px at 25% 15%, #17314a 0%, var(--bg1) 60%, var(--bg0) 100%);
}
.container{width:min(1120px,92vw); margin-inline:auto}

/* Navbar */
.navbar{
  position:sticky; top:0; z-index:1000;
  background:var(--topbar);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:10px 0;          /* reduced height, logo/menu keep size */
}
.nav-container{
  display:flex; align-items:center; justify-content:space-between;
}

/* Logo: bigger, cropped 10% top & bottom, aligned with hero text */
.logo-wrap{
  display:inline-block; width:360px; height:86px;   /* wide banner feel */
  border-radius:8px; overflow:hidden;
}
.logo{
  width:100%; height:120%; object-fit:cover; object-position:center;
  transform:translateY(-10%); /* trims ~10% off the top, bottom trims naturally */
}

/* Menu */
.nav-links{display:flex; gap:28px; align-items:center}
.nav-links a{
  color:#d6deea; text-decoration:none; font-weight:600; letter-spacing:.2px;
  padding:.55rem .9rem; border-radius:10px; transition:.2s ease;
}
.nav-links a:hover{background:rgba(255,255,255,.07)}
.btn.small{border:1px solid rgba(255,255,255,.18)}
.hamburger{display:none; background:transparent; border:0; color:#e8eef7; font-size:28px}

/* Hero */
.hero{padding:60px 0 24px}
.hero .container{padding-top:0}
.hero h1{
  font-size:56px; line-height:1.1; margin:0 0 14px 0; letter-spacing:.2px;
}
.hero p{color:var(--muted); max-width:760px; margin:0 0 24px 0}
.cta{display:flex; gap:16px}
.btn{
  display:inline-block; text-decoration:none; cursor:pointer;
  padding:.8rem 1.1rem; border-radius:12px; font-weight:700; color:#eaf1fb;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
}
.btn.primary{background:linear-gradient(180deg,#2f7cff,#1955f9); border-color:#2b66ff}
.btn.ghost{background:transparent}

/* Sections */
.section{padding:48px 0}
.section h2{margin:0 0 18px 0; font-size:28px}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{
  background:var(--card); border:1px solid var(--card-br); border-radius:16px;
  padding:18px;
}
.card h3{margin:0 0 6px 0}

/* Values */
.values{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; color:var(--muted)}

/* Contact */
.contact .form{
  margin-top:14px; max-width:620px; display:grid; gap:12px;
}
.form label{display:grid; gap:6px; font-weight:600}
.form input,.form textarea{
  background:#0d1522; color:var(--text);
  border:1px solid #29364a; border-radius:10px; padding:.8rem;
}

/* Footer */
.footer{border-top:1px solid rgba(255,255,255,.06); padding:26px 0; color:#cdd6e4}

/* Anchor offset so sticky bar doesn’t cover headings */
#services,#about,#contact{scroll-margin-top:90px}

/* Responsive */
@media (max-width:1024px){
  .hero h1{font-size:44px}
  .cards{grid-template-columns:1fr 1fr}
  .values{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .logo-wrap{width:240px; height:64px}
  .nav-links{position:absolute; right:14px; top:66px;
    background:#1a2634; border:1px solid rgba(255,255,255,.08);
    border-radius:12px; padding:10px; gap:6px; display:none; flex-direction:column}
  .nav-links.active{display:flex}
  .hamburger{display:block}
  .hero{padding:42px 0 16px}
  .hero h1{font-size:34px}
  .cards{grid-template-columns:1fr}
  .values{grid-template-columns:1fr}
}