:root{
  --bg:#ffffff;--maxw:1200px;
  --blue:#0b63d6;--blue-dark:#063a78;--gray:#6b7280;--muted:#9aa6b2;--accent:#ff7a2d;
  --card:#f8fbff;--shadow:0 8px 24px rgba(15,23,42,0.06);--radius:12px;--text:#0b1a2b;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
.container{width:94%;max-width:var(--maxw);margin:0 auto}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo-img{height:44px}
.main-nav{display:flex;align-items:center}
#nav-toggle{display:none;border:none;background:transparent;font-size:20px}
.nav-list{list-style:none;display:flex;gap:14px;margin:0;padding:0;align-items:center}
.nav-list a{color:var(--blue-dark);text-decoration:none;padding:8px 10px;border-radius:8px;font-weight:600}
.nav-list a.cta{background:linear-gradient(90deg,var(--accent),#ff924f);color:#fff}

/* Hero */
.hero{padding:48px 0}
.hero-grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:center}
h1{font-size:clamp(24px,3.6vw,40px);margin:0 0 12px;color:var(--blue-dark)}
.lead{color:var(--gray);margin-bottom:16px}
.hero-features{list-style:none;padding:0;margin:12px 0 20px;display:grid;gap:8px;color:var(--muted)}
.hero-ctas .btn{margin-right:10px}

/* Buttons */
.btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:700;cursor:pointer;border:2px solid transparent}
.btn.primary{background:linear-gradient(90deg,var(--accent),#ff8a52);color:white;box-shadow:var(--shadow)}
.btn.ghost{background:transparent;border:2px solid rgba(11,99,214,0.08);color:var(--blue-dark)}
.btn.outline{background:transparent;border:2px dashed rgba(11,99,214,0.08);color:var(--blue-dark)}

/* Banner & cards */
.banner-wrap{position:relative;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);background:var(--card)}
.banner{display:block;width:100%;height:auto;object-fit:cover}
.banner-cards{position:absolute;left:18px;bottom:18px;display:flex;gap:12px}
.card.stat{background:white;padding:10px 12px;border-radius:10px;box-shadow:0 6px 18px rgba(11,63,150,0.06);color:var(--blue-dark)}

/* Sections */
.section{padding:42px 0}
.services-grid{display:grid;grid-template-columns:1fr;gap:30px;margin-top:30px}
.service-card{background:linear-gradient(180deg,#fff,#fbfdff);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.service-card img{width:100%;height:420px;object-fit:cover}
.card-body{padding:14px}

/* Infographics */
.infographic-grid{display:grid;grid-template-columns:1fr;gap:18px}
.infographic-card{background:white;padding:14px;border-radius:12px;box-shadow:var(--shadow);text-align:center}
.infographic-card img{width:100%;height:300px;object-fit:cover}


/* Process */
.process-grid{display:grid;grid-template-columns:1fr;gap:12px}
.process-step{background:white;padding:12px;border-radius:12px;box-shadow:var(--shadow);text-align:center}

/* Clients marquee */
.clients-marquee{overflow:hidden;padding:10px 0}
.client-logos{display:flex;gap:24px;align-items:center;animation:marquee 18s linear infinite}
.client-logos img{height:120px;opacity:1}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} /* simple */

/* Testimonials */
.testimonials-wrap{display:flex;align-items:center;gap:12px;margin-top:12px}
.carousel{display:flex; width:100%}
.testimonial-item{min-width:100%;padding:16px;background:white;border-radius:12px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:center}

/* FAQ */
.faq-grid{display:grid;gap:10px}
.faq-grid details{background:white;padding:12px;border-radius:10px;box-shadow:var(--shadow)}

/* Forms and modal formatting */
.contact-form-wrap{background:white;padding:14px;border-radius:12px;box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:1fr;gap:10px}
.form-grid input,.form-grid textarea,.form-grid select{width:100%;padding:10px;border-radius:8px;border:1px solid #e6ecf5}
.form-grid label span{display:block;margin-bottom:6px;color:var(--gray)}
.form-actions{display:flex;gap:12px;align-items:center;margin-top:8px}
#form-status,#m-form-status,#career-status{color:var(--accent);font-weight:700}

/* Modal */
.modal{position:fixed;left:0;top:0;width:100%;height:100%;display:none;align-items:center;justify-content:center;background:rgba(11,24,44,0.45);z-index:200;padding:18px}
.modal[aria-hidden="false"]{display:flex}
.modal-content{background:white;border-radius:12px;max-width:980px;width:100%;padding:18px;box-shadow:0 40px 100px rgba(11,24,44,0.3)}
.modal-grid{display:grid;grid-template-columns:1fr;gap:12px}
.modal-image img{width:100%;height:auto;border-radius:8px}
.modal-form h3{margin-top:0}
.modal-close{position:absolute;right:18px;top:18px;background:#fff;border:1px solid #eef2f7;padding:6px;border-radius:8px;cursor:pointer}

/* Floating back-to-top & email */
#back-to-top{position:fixed;right:14px;bottom:90px;width:52px;height:52px;border-radius:12px;background:white;box-shadow:var(--shadow);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:300}
#back-to-top img{width:28px;height:28px}
#email-now-btn{position:fixed;right:14px;bottom:20px;width:52px;height:52px;border-radius:12px;background:linear-gradient(90deg,var(--accent),#ff8a52);color:white;border:none;display:flex;align-items:center;justify-content:center;font-weight:800;z-index:300;cursor:pointer}

/* Footer */
.site-footer{padding:20px 0;border-top:1px solid #f1f5f9;background:white}
.footer-inner{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:start}

/* Responsive */
@media(min-width:880px){
  .hero-grid{display:grid;grid-template-columns:1fr 560px;gap:28px}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .infographic-grid{grid-template-columns:repeat(3,1fr)}
  .process-grid{grid-template-columns:repeat(4,1fr)}
  .client-logos{animation:marquee 20s linear infinite}
  .modal-grid{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr 1fr}
  #nav-toggle{display:none}
}
@media(max-width:879px){
  #nav-toggle{display:inline-block}
  .nav-list{display:none;position:absolute;right:18px;top:68px;background:#fff;padding:12px;border-radius:10px;box-shadow:var(--shadow);flex-direction:column}
  .clients-marquee .client-logos{animation:none;flex-wrap:wrap;justify-content:center}
  .modal-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .nav-list li{margin-bottom:8px}
}
/* small animations */
.fade-in{animation:fadeIn 0.9s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}