:root{
  --di-primary:#0d6efd; /* matches bootstrap primary */
  --di-dark:#212529;
  --di-muted:#6c757d;
  --di-surface:#f8f9fa;
}

/* Better typography + spacing */
html{scroll-behavior:smooth;}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  line-height:1.55;
}

/* Accessibility: visible focus */
:focus{outline:3px solid rgba(13,110,253,.35); outline-offset:2px;}

/* Skip link */
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem;
  background:#fff; border:1px solid #dee2e6; border-radius:.25rem; z-index:2000;
}

/* Hero */
.hero{
  /* Use the full hero image (logo stays crisp). Text is placed ABOVE and BELOW the logo area. */
  background: url("../img/slider/hero_bg_clean.png");
  background-size:cover;
  background-position:center;
  color:#fff;
  border-radius:.5rem;
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* Subtle overlay to help text pop without blurring the logo */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.15) 40%, rgba(0,0,0,.15) 60%, rgba(0,0,0,.55));
  pointer-events:none;
}

.hero-overlay{
  position: relative;
  z-index: 1;
  min-height: 22rem;
  padding: 2.0rem 1.5rem;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  text-align: center;
}

.hero-top{ align-self: start; }
.hero-center{ align-self: center; display:flex; justify-content:center; }
.hero-bottom{ align-self: end; }

.hero-logo{
  width: min(560px, 86%);
  height: auto;
  /* crisp scaling */
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.45));
}

.hero-headline{
  font-weight: 700;
  letter-spacing: .2px;
  font-size: clamp(1.6rem, 2.5vw, 2.6rem);
  line-height: 1.15;
  text-shadow: 0 2px 14px rgba(0,0,0,.65);
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}

.hero-subtext{
  color: rgba(255,255,255,.92);
  text-shadow: 0 2px 14px rgba(0,0,0,.65);
  max-width: 58rem;
  margin-left:auto;
  margin-right:auto;
}

/* Section headers */
.section-title{
  font-weight:600;
}

/* Card tweaks */
.card{border-radius:.75rem;}
.card .card-title{margin-bottom:.5rem;}

/* Badge row */
.trust-badges img{height:34px; width:auto; opacity:.9;}

/* Footer */
.site-footer{background: var(--di-dark); color:#fff;}
.site-footer a{color:rgba(255,255,255,.9);}
.site-footer a:hover{color:#fff; text-decoration:underline;}

/* Small utility */
.text-muted-strong{color:var(--di-muted) !important;}


/* Responsive hero: on small screens use a logo-free crop to avoid text collision */
@media (max-width: 768px){
  .hero{
    background: linear-gradient(120deg, rgba(0,0,0,.82), rgba(0,0,0,.45)),
                url("../img/slider/hero_mobile.png");
    background-size: cover;
    background-position: center;
    padding: 0;
  }
  .hero::before{ background: linear-gradient(180deg, rgba(0,0,0,.70), rgba(0,0,0,.35)); }
  .hero-overlay{ min-height: 18rem; padding: 1.75rem 1rem; }
}


/* Print */
@media print{
  .navbar, .site-footer, .btn {display:none !important;}
  body{padding-top:0 !important;}
}


@media (max-width: 768px){
  .hero-overlay{ min-height: 18rem; padding: 1.75rem 1rem; grid-template-rows: auto auto auto; row-gap: .75rem; }
  /* Mobile hero uses logo-free background; hide lockup image to reduce clutter */
  .hero-logo{ display:none; }
}