:root{
  --bg:#f7fbff;
  --card:#ffffff;
  --text:#0f1724;
  --muted:#475569;
  --primary:#0b74ff;
  --accent:#06d6a0;
  --radius:12px;
  --maxw:1180px;
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Segoe UI,Arial; margin:0; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased;}
.container{width:92%;max-width:var(--maxw);margin:0 auto;padding:0 12px;}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);}
.logo{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--primary),#6ea8fe);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;}
.brand-text{font-weight:700}

/* NAV: desktop right */
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;align-items:center;}
.main-nav a{color:var(--muted);text-decoration:none;font-weight:600;padding:8px 10px;border-radius:8px;}
.main-nav a:hover{color:var(--primary)}
.main-nav .cta{background:var(--primary);color:#fff;padding:8px 12px;border-radius:8px;font-weight:700}

/* mobile toggle */
.nav-toggle{display:none;background:transparent;border:0;cursor:pointer}
.hamburger{display:block;width:22px;height:2px;background:var(--text);position:relative}
.hamburger::before,.hamburger::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--text)}
.hamburger::before{top:-6px} .hamburger::after{top:6px}

/* HERO */
.hero{padding:56px 0}
.hero-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
.eyebrow{color:var(--muted);font-weight:700;font-size:13px}
.hero h1{font-family:Poppins,system-ui;font-size:32px;margin:12px 0;line-height:1.05}
.lead{color:var(--muted);margin-bottom:16px}
.hero-visual img{width:100%;border-radius:12px;display:block;}

/* TRUST strip */
.trust-strip{display:flex;gap:18px;margin-top:18px;flex-wrap:wrap}
.trust-strip div{display:flex;flex-direction:column;align-items:flex-start}
.trust-strip strong{font-size:18px;color:var(--primary)}

/* SECTIONS / CARDS */
.section{padding:44px 0}
.section.alt{background:linear-gradient(180deg, rgba(11,116,255,0.03), rgba(255,255,255,0))}
.section-title{font-size:20px;margin-bottom:18px}
.cards{display:grid;gap:18px}
.grid-3{grid-template-columns:1fr;}

/* card base */
.card{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(15,23,36,0.04)}
.service-card .icon{font-size:28px}
.work-thumb{height:160px;border-radius:10px;overflow:hidden;margin-bottom:12px}
.work-thumb img{width:100%;height:100%;object-fit:cover}
.testimonial-card blockquote{font-style:italic;margin:0 0 8px}

/* CTA strip */
.cta-strip{background:linear-gradient(90deg,var(--primary),#6ea8fe);color:#fff;padding:22px 0}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* CONTACT */
.contact-form input, .contact-form textarea{width:100%;padding:12px;border-radius:8px;border:1px solid #e6e6e6;margin-bottom:12px}
.form-grid{display:grid;gap:12px}
.container.small{max-width:720px}

/* FOOTER */
.site-footer{padding:22px 0;background:transparent;color:var(--muted)}

/* Responsive */
@media(min-width:768px){
  .hero-grid{grid-template-columns:1fr 520px}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .nav-toggle{display:none}
  .main-nav{display:block}
}
@media(max-width:767px){
  .nav-toggle{display:block}
  .main-nav{position:absolute;right:12px;top:70px;background:var(--card);border-radius:10px;padding:12px;box-shadow:0 10px 30px rgba(15,23,36,0.08);display:none}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;gap:8px;min-width:160px}
  .cta-inner{flex-direction:column;align-items:flex-start}
  .hero h1{font-size:26px}
}
.hero {
  padding: 100px 0;
  display: flex;
  align-items: center;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.hero-content h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}
.hero-content .lead {
  font-size: 1.2rem;
  margin-bottom: 30px;
  color: #555;
}
.hero-ctas .btn {
  margin-right: 15px;
}
.hero-visual img {
  max-width: 100%;
  border-radius: 12px;
}