/* =============== THEME =============== */
:root{
  --bg:#f6f8fb;
  --surface:#ffffff;
  --text:#0f172a;
  --muted:#6b7280;
  --brand:#0b6efd;
  --brand-600:#0a58ca;
  --ring: #cfe2ff;
  --border:#e8ecf6;
  --shadow: 0 8px 28px rgba(2,6,23,.08);
  --radius:12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: "Inter", system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  margin:0; color:var(--text); background:var(--bg); line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}

/* Utilities */
.container{max-width:1160px; margin:0 auto; padding:28px 20px}
.small{font-size:14px}
.muted{color:var(--muted)}
.link{color:var(--brand); text-decoration:none; font-weight:600}
.link:hover{text-decoration:underline}

/* =============== HEADER =============== */
.site-header{background:#fff; position:sticky; top:0; z-index:50; border-bottom:1px solid var(--border)}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.logo{width:210px; height:54px; border-radius:10px; object-fit:cover}
.brand-text{font-weight:700; font-size:17px}
.brand-text .muted{margin-left:6px}

.main-nav{display:flex; align-items:center; gap:14px}
.main-nav a{color:var(--text); text-decoration:none; padding:10px 12px; border-radius:10px; font-weight:500}
.main-nav a:hover{background:#f1f5ff}

.mobile-toggle{display:none; background:none; border:none; font-size:22px; padding:8px; line-height:1}
.annc{border-top:1px solid var(--border); background:#fbfdff; color:#334155; font-size:14px; display:flex; gap:8px; justify-content:center; padding:8px 12px}
.annc .link{font-weight:600}

/* Buttons */
.btn{display:inline-block; padding:11px 16px; border-radius:10px; text-decoration:none; font-weight:700; transition:.2s; border:1px solid transparent}
.btn:focus-visible{outline:3px solid var(--ring); outline-offset:1px}
.btn-primary{background:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-600); transform:translateY(-1px)}
.btn-ghost{background:#fff; border:1px solid var(--border); color:var(--text)}
.btn-ghost:hover{background:#f8fafc}
.btn-outline{border:1.5px solid var(--brand); color:var(--brand); background:transparent}
.btn-outline:hover{background:#eaf2ff}

/* =============== HERO =============== */
.hero{display:grid; grid-template-columns: 1.1fr 0.9fr; gap:28px; align-items:stretch; margin-top:24px}
.hero::before{
  content:""; position:absolute; inset:70px 0 auto 0; height:320px; z-index:-1;
  background: radial-gradient(1000px 300px at 10% 0%, #eaf2ff 0%, rgba(255,255,255,0) 70%),
              radial-gradient(700px 260px at 90% 20%, #f5f7ff 0%, rgba(255,255,255,0) 70%);
}
.eyebrow{font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#3b82f6; margin-bottom:8px}
.hero-left h1{font-size:40px; line-height:1.2; margin:0 0 10px}
.grad-text{background:linear-gradient(90deg,#0b6efd,#3b82f6); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{font-size:18px; color:#475569; margin:0 0 18px}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:14px}
.trust-badge{font-size:13px; color:#0b6efd; background:#eef5ff; padding:6px 10px; border-radius:999px; border:1px solid #d9e7ff}
.stats{display:flex; gap:12px; margin-top:14px}
.stats div{background:#fff; padding:12px 18px; border-radius:12px; box-shadow: var(--shadow); text-align:center; font-weight:700}
.stats span{display:block; font-weight:600; color:var(--muted); margin-top:2px}

.hero-right{width:100%}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}
.contact-card{padding:22px}
.contact-card h3{margin:0 0 12px; font-size:20px}
.form input{width:100%; padding:11px 12px; border-radius:10px; border:1px solid #e6eef8; margin-bottom:10px; font:inherit}
.form input:focus{outline:2px solid var(--ring)}
.form-note{margin:8px 2px 0; color:var(--muted); font-size:13px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

/* =============== SOCIAL PROOF STRIP =============== */
.logos-row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; background:#fff; border:1px solid var(--border); border-radius:12px; padding:10px; box-shadow:var(--shadow)}
.logo-pill{border:1px dashed #d7e3ff; padding:8px 12px; border-radius:999px; font-weight:600; color:#3b82f6; background:#f7faff}

/* =============== SECTIONS =============== */
.section{margin-top:32px}
.section-title{font-size:26px; font-weight:800; text-align:center; margin:8px 0 20px}
.section-head{display:flex; align-items:center; justify-content:space-between; gap:12px}

/* Services */
.services-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.service-card{padding:20px; border-radius:12px; border:1px solid var(--border); background:#fff; box-shadow:var(--shadow); transition:transform .2s, box-shadow .2s}
.service-card:hover{transform:translateY(-3px); box-shadow:0 14px 36px rgba(2,6,23,.12)}
.service-card h4{margin:0 0 6px; font-size:18px}
.service-card p{margin:0 0 8px}

/* Jobs */
.jobs-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px}
.job-card{padding:20px; border-radius:12px; border:1px solid var(--border); background:#fff; box-shadow:var(--shadow); transition:transform .2s, box-shadow .2s}
.job-card:hover{transform:translateY(-3px); box-shadow:0 14px 36px rgba(2,6,23,.12)}
.job-card h3{margin:0 0 4px; font-size:18px}
.job-tags{display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 0}
.chip{font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid #e1e7f5; background:#f7f9fe; color:#334155}
.job-actions{display:flex; gap:8px; margin-top:12px}
.empty{background:#fff; border:1px dashed #d8e2f2; border-radius:12px; padding:20px; text-align:center}

/* Why trust us */
.why-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px}
.why-card{background:#fff; padding:18px; border-radius:12px; border:1px solid var(--border); text-align:center; box-shadow:var(--shadow); font-weight:500}

/* Testimonials */
.testimonials-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px}
.testimonial-card{background:#fff; padding:18px; border-radius:12px; border:1px solid var(--border); box-shadow:var(--shadow); position:relative}
.testimonial-card::before{content:"“"; position:absolute; top:-18px; left:12px; font-size:64px; line-height:1; color:#e6edff; font-weight:700}
.testimonial-card blockquote{margin:10px 0 6px; font-style:italic}
.testimonial-card figcaption{font-size:14px}

/* Process Timeline */
.timeline{list-style:none; padding:0; margin:10px auto 0; max-width:760px}
.timeline li{display:grid; grid-template-columns:36px 1fr; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--border)}
.timeline li:last-child{border-bottom:none}
.timeline li span{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#eef5ff; color:#1d4ed8; font-weight:800; border:1px solid #d9e7ff}

/* CTA */
.contact-cta{text-align:center; padding:44px 20px; background:linear-gradient(180deg,#fff,#f7faff); border:1px solid var(--border); border-radius:14px; margin-top:44px}
.contact-cta h2{margin:0 0 6px; font-size:24px}

/* Footer */
.site-footer{background:#fff; border-top:1px solid var(--border); margin-top:60px}
.footer-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px}

/* Responsive */
@media (max-width: 980px){
  .hero{grid-template-columns:1fr; gap:16px}
}
@media (max-width: 900px){
  .main-nav{display:none}
  .main-nav.open{
    display:flex; flex-direction:column; position:absolute; right:20px; top:74px;
    background:#fff; padding:12px; border-radius:12px; border:1px solid var(--border); box-shadow:var(--shadow)
  }
  .mobile-toggle{display:block}
}