/* =========================
   Base Theme
   ========================= */
:root {
  --bar-bg: #405741;                 /* green bars like screenshot */
  --text: #e9e9e9;
  --muted: rgba(233,233,233,0.85);

  /* overlay tint */
  --overlay: rgba(64, 87, 65, 0.55);
}

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bar-bg);         /* shows behind header/footer */
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  letter-spacing: 0.2px;
}

/* =========================
   Header / Footer Bars
   ========================= */
.site-bar{
  background: var(--bar-bg);
}

.site-bar-inner{
  padding: 18px 18px;                /* mobile left padding */
}

@media (min-width: 768px){
  .site-bar-inner{
    padding: 18px 32px;              /* tablet/desktop */
  }
}

.brand-logo{
  display: block;
  width: 236px;                      /* matches your image size */
  height: 60px;
  max-width: 100%;
}

/* Footer bar */
.site-footer{
  text-align: center;
  padding: 16px 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.9);
}

/* =========================
   HERO (full-bleed)
   ========================= */
.hero{
  position: relative;
  width: 100%;
  /* full-bleed with no container margin */
  overflow: hidden;
  min-height: calc(100vh - 120px);   /* fills view under header+footer; adjust if needed */
}

/* background image via CSS */
.hero-bg{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../images/hero-desktop2.jpg"); /* default */
}

/* Tablet image */
@media (max-width: 991px) {
  .hero-bg{
    background-image: url("../images/hero-tablet.jpg");
  }
}

/* Mobile image */
@media (max-width: 576px) {
  .hero-bg{
    background-image: url("../images/hero-mobile.jpg");
  }
}

/* tinted overlay band (text nested inside) */
.hero-overlay{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  background: var(--overlay);
  padding: 22px 18px;

  /* subtle premium effect; safe if unsupported */
  backdrop-filter: blur(2px);
}

/* text styling similar to screenshot */
.hero-title{
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.05;
  font-size: 34px;
}

.hero-sub{
  color: var(--muted);
  font-size: 18px;
  line-height: 1.35;
  max-width: 36ch;                   /* keeps wrap similar to screenshot */
}

/* Tablet+ layout tuning (overlay becomes “panel-ish”) */
@media (min-width: 768px){
  .hero{
    min-height: 78vh;
  }

  .hero-overlay{
    max-width: 760px;
    margin-left: 32px;
    margin-top: 26px;
    border-radius: 14px;
  }

  .hero-title{ font-size: 44px; }
  .hero-sub{ font-size: 18px; max-width: 52ch; }
}

/* Desktop */
@media (min-width: 992px){
  .hero-overlay{
    margin-left: 48px;
    margin-top: 40px;
    max-width: 820px;
  }
}