:root{--bg:#0b132b;--card:#0f172a;--ink:#e2e8f0;--muted:#94a3b8;--brand:#0ea5e9;--border:#1f2937;--radius:16px;--container:1100px;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:#0b1220;color:var(--ink)}
a{color:var(--brand);text-decoration:none}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.header{position:sticky;top:0;background:#0c1325cc;backdrop-filter:saturate(130%) blur(8px);border-bottom:1px solid var(--border);z-index:20}
.nav{display:flex;align-items:center;gap:18px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:800}
.brand img{height:32px}
.nav .spacer{flex:1}
.nav a{color:var(--ink);opacity:.9;padding:10px 12px;border-radius:12px}
.nav a:hover{opacity:1;background:#0f172a}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;padding:12px 16px;border-radius:12px;font-weight:700}
.btn.ghost{background:#121a2f;border:1px solid var(--border)}
main{min-height:60vh}
.hero{padding:72px 0;display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
h1{font-size:42px;margin:0 0 12px}
h2{font-size:28px;margin:0 0 8px}
.lead{color:var(--muted);font-size:18px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.grid{display:grid;gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.section{padding:56px 0}
.section.alt{background:#0b1220}
.kpi{display:flex;gap:12px;align-items:flex-start}
.kpi .dot{width:10px;height:10px;background:#22c55e;border-radius:50%;margin-top:8px}
.list{margin:0;padding-left:20px}
.list li{margin:6px 0}
footer{border-top:1px solid var(--border);padding:28px 0;color:var(--muted);text-align:center}
form{display:grid;gap:12px}
input,textarea{background:#0b1220;border:1px solid var(--border);color:var(--ink);padding:12px;border-radius:12px}
textarea{min-height:120px;resize:vertical}
label{font-weight:600}
.small{font-size:12px;color:var(--muted)}
@media (max-width:900px){.hero{grid-template-columns:1fr}.grid.cols-3{grid-template-columns:1fr}.nav a.hide-md{display:none}}


/* === THREE-FIX PACK (header+contact) === */
@media (max-width: 480px){
  .nav a{ font-size:13px !important; padding:8px 10px !important; line-height:1.2 !important; border-radius:10px !important; }
  .nav{ flex-wrap:wrap !important; row-gap:8px !important; }
}
@media (max-width: 600px){
  /* contact page grid to single column */
  main.container.section > .grid{ display:grid !important; grid-template-columns:1fr !important; gap:16px !important; }
  .card, form{ width:100% !important; max-width:100% !important; }
  .card img, .card iframe, form img, form iframe{ max-width:100% !important; height:auto !important; display:block !important; }
  .card a, form a, .card p, form p, .card li, form li{ overflow-wrap:anywhere !important; word-break:break-word !important; }
}


/* === Dark Blue Background (added) === */
html, body {
  background-color: #0b1a3a !important; /* deep navy */
  min-height: 100%;
}
/* Brand badge (logo) fixed at top-left */
.brand-badge{
  position:fixed;
  top:16px;
  left:16px;
  z-index:1000;
  background: rgba(0,0,0,0.0);
  padding:0;
  border-radius:12px;
}
.brand-badge img{
  height:56px;
  width:auto;
  display:block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.45));
}
@media (max-width: 640px){
  .brand-badge img{ height:44px; }
}



/* === Brand fixed logo (top-left) === */
:root { --brand-logo-size: 56px; }
.brand-badge {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 1000;
  display: inline-block;
}
.brand-badge img {
  height: var(--brand-logo-size);
  width: auto;
  display: block;
  border-radius: 8px;
  background: transparent;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
}
@media (max-width: 640px){
  :root { --brand-logo-size: 44px; }
}



/* === Mobile header/logo fix === */
@media (max-width: 768px){
  .brand-badge{ display: none !important; } /* hide fixed overlay on mobile */
  header .brand img{ height: 36px; width: auto; }
  header.header{ padding-top: 8px; padding-bottom: 8px; }
}