*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#1f2933;line-height:1.5;background:#fff}
a{color:inherit}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Header / Nav */
header{border-bottom:1px solid #e5e7eb;background:#fff;position:sticky;top:0;z-index:50}
.nav{display:flex;justify-content:space-between;align-items:center;height:70px}
.logo{font-size:24px;font-weight:800;letter-spacing:.3px}
nav a{margin-left:20px;text-decoration:none;color:#374151;font-weight:600}
nav a:hover{color:#111827}
.btn{border:1px solid #111827;padding:8px 14px;border-radius:10px}
.btn:hover{background:#111827;color:#fff}

/* Hero */
.hero{
  position:relative;
  min-height:78vh;
  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;
  display:flex;
  align-items:center;
  padding:72px 0;
  color:#fff;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  /* Dark-to-transparent overlay to guarantee text contrast */
  background:linear-gradient(90deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.38) 45%, rgba(0,0,0,.10) 100%);
  z-index:1;
}
.hero > .container{position:relative;z-index:2;max-width:1100px}
.hero h1{
  font-size:clamp(2.25rem, 4vw, 3.25rem);
  line-height:1.05;
  margin:0 0 16px;
  letter-spacing:-.5px;
}
.hero p{
  margin:0 0 18px;
  max-width:620px;
  font-size:clamp(1.05rem, 1.6vw, 1.25rem);
  color:rgba(255,255,255,.92);
}
.btn-primary{
  background:#0b1220;
  color:#fff;
  padding:12px 18px;
  text-decoration:none;
  display:inline-block;
  border-radius:12px;
  font-weight:700;
  border:1px solid rgba(255,255,255,.15);
}
.btn-primary:hover{filter:brightness(1.12)}

/* Sections */
.section{padding:60px 0}
.section h2{margin:0 0 12px;font-size:1.8rem;letter-spacing:-.2px}
.section p{margin:0 0 18px;color:#374151}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.card{
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:24px;
  background:#fff;
  box-shadow:0 1px 0 rgba(17,24,39,.02);
}
.card h3{margin:0 0 8px;font-size:1.15rem}
.card p{margin:0;color:#4b5563}

/* Footer */
footer{background:#111827;color:#fff;text-align:center;padding:22px}
footer p{margin:0;opacity:.9}

/* Small screens */
@media (max-width:640px){
  nav a{margin-left:12px}
  .hero{min-height:72vh;padding:56px 0}
}

/* --- Hero image with embedded text/button (clickable hotspot) --- */
.hero.hero-embedded::before { display: none; }
.hero.hero-embedded .container { pointer-events: none; }

/* Invisible but clickable area positioned over the button drawn in the image */
.hero-cta-hotspot{
  position:absolute;
  left: 8%;
  top: 63%;
  width: 26%;
  height: 10%;
  border-radius: 12px;
  display:block;
  text-indent: -9999px;
  overflow:hidden;
  pointer-events:auto;
}
.hero-cta-hotspot:focus-visible{
  outline: 3px solid #ffffff;
  outline-offset: 4px;
}

/* Screen-reader only utility */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* --- Section styling upgrades --- */
.section-alt{background:#f9fafb}
.section-head{margin-bottom:28px}
.section-head p{color:#4b5563;max-width:720px;margin-top:8px}

/* Cards with images */
.cards-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.feature-card{border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 10px 24px rgba(17,24,39,.06)}
.feature-card img{width:100%;height:190px;object-fit:cover;display:block}
.feature-body{padding:18px 18px 20px}
.feature-body h3{margin:0 0 8px}
.feature-body p{margin:0 0 14px;color:#4b5563}
.link{color:#1d4ed8;text-decoration:none;font-weight:600}
.link:hover{text-decoration:underline}

/* Products banner */
.products-banner{position:relative;padding:0}
.products-banner-bg{
  position:absolute;inset:0;
  background-image:url('../assets/images/products-banner.png');
  background-size:cover;background-position:center;
}
.products-banner-inner{
  position:relative;
  padding:70px 20px 60px;
  color:#fff;
}
.products-banner-inner h2{margin-top:0}
.products-banner-inner p{max-width:820px;color:rgba(255,255,255,.9);line-height:1.6}

/* Callout box */
.callout{
  margin-top:26px;
  display:flex;gap:16px;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  padding:18px 18px;border-radius:14px;
  backdrop-filter: blur(6px);
}
.callout h3{margin:0 0 4px}
.callout p{margin:0;color:rgba(255,255,255,.9)}
@media (max-width:720px){.callout{flex-direction:column;align-items:flex-start}}

/* About grid */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.about-media img{width:100%;border-radius:14px;display:block;border:1px solid #e5e7eb}
.about-copy p{color:#374151;line-height:1.7}
@media (max-width:900px){.about-grid{grid-template-columns:1fr}}

/* CTA banner */
.cta-banner{position:relative;padding:70px 0;margin-top:10px}
.cta-bg{
  position:absolute;inset:0;
  background-image:url('../assets/images/cta-banner.png');
  background-size:cover;background-position:center;
  filter: brightness(.65);
}
.cta-inner{position:relative;color:#fff}
.cta-inner p{color:rgba(255,255,255,.9);max-width:720px}

/* Page heroes */
.page-hero{position:relative;padding:60px 0;color:#fff}
.page-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(to right, rgba(0,0,0,.65), rgba(0,0,0,.25))}
.page-hero .container{position:relative}
.page-hero h1{margin:0 0 10px}
.page-hero p{margin:0;color:rgba(255,255,255,.92);max-width:800px}
.page-hero-services{background-image:url('../assets/images/service-2.png');background-size:cover;background-position:center}
.page-hero-products{background-image:url('../assets/images/products-banner.png');background-size:cover;background-position:center}
.page-hero-about{background-image:url('../assets/images/about.png');background-size:cover;background-position:center}