
:root{
  --ink:#0b1a28; --muted:#5c6b76; --line:#e7edf2; --paper:#ffffff;
  --navy:#061a24; --navy2:#072230; --blue:#0a66c2;
  --radius:14px; --container:1160px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}
*{box-sizing:border-box} html,body{height:100%} body{margin:0;background:#f6f9fb;color:var(--ink);line-height:1.55}
.container{max-width:var(--container);margin:0 auto;padding:24px}

/* Hero dark header */
.hero-dark{background:linear-gradient(180deg,var(--navy),var(--navy2));color:#eaf2f7;border-bottom:1px solid rgba(255,255,255,.08)}
.hero-dark__inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;gap:14px;align-items:center}
.brand__logo{width:64px;height:64px;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.5)}
.brand__name{font-weight:800;letter-spacing:.3px;font-size:20px}
.brand__tag{color:#00c2c7;font-size:13px;margin-top:2px}
.nav a{color:#dfeaf2;text-decoration:none;margin-left:18px;opacity:.9}
.nav a:hover{opacity:1}
.li-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin-left:12px;border-radius:8px;border:1px solid rgba(255,255,255,.25);color:#ffffff}
.li-icon:hover{background:rgba(255,255,255,.08)}
.hero-dark__body{padding:24px 0 36px}
.hero-dark__body h1{margin:8px 0 6px;font-size:34px}
.lead{color:#c9d7e2}
.meta{color:#9ab0bf;font-size:13px;margin-top:6px}
.hero-kpis{display:flex;gap:14px;margin-top:12px;flex-wrap:wrap}
.kpi{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:10px 14px;display:flex;gap:10px;align-items:center}

/* White corporate body */
.section{padding:44px 0;background:#f6f9fb}
.section--alt{background:#ffffff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section__lead{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:0 6px 26px rgba(8,32,72,.06);text-align:center}
.card__icon{font-size:32px;margin:4px auto 8px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:12px}
.step{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:0 6px 22px rgba(8,32,72,.06)}
.step__index{width:36px;height:36px;border-radius:8px;background:#eaf7f6;color:#037c76;font-weight:900;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:12px}
.tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:0 6px 22px rgba(8,32,72,.06)}
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:start}
.bullets{color:var(--muted)} .bullets li{margin-left:18px}
.form{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:0 6px 22px rgba(8,32,72,.06)}
.form label{display:block;margin-bottom:10px}
.form span{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
.form input,.form textarea{width:100%;padding:10px;border-radius:10px;border:1px solid var(--line)}

/* Footer with LinkedIn */
.footer{border-top:1px solid var(--line);background:#fff}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.small{color:#7b8a95;font-size:13px}
.li-link{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink)}
.li-link .li-ico{display:inline-flex;width:22px;height:22px;border-radius:6px;background:#0a66c2;color:#ffffff;align-items:center;justify-content:center}
.li-link:hover .li-ico{filter:brightness(1.1)}

/* Fade */
.fade{opacity:0;transform:translateY(10px);transition:.5s ease all}
.in{opacity:1;transform:none}

/* Responsive */
@media (max-width:1020px){
  .hero-dark__inner{flex-direction:column;gap:10px;align-items:flex-start}
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .contact{grid-template-columns:1fr}
}
@media (max-width:620px){
  .cards{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
}
