/* ==========================================================================
   BPI System - correctiveactionsoftware.com
   Static rebuild for IIS hosting.
   ========================================================================== */

:root {
  --orange:      #ff8f40;   /* accent bar / stars */
  --orange-btn:  #ff9040;   /* CTA button */
  --black:       #000000;
  --white:       #ffffff;
  --card-bg:     rgba(242, 242, 242, 0.73);
  --container:   940px;
  --gutter:      20px;
  --font:        "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 200;
  font-size: 16px;
  line-height: 1.4;
  color: var(--black);
  background: var(--white);
}

h1, h2, h3, h4 { margin: 0; font-family: var(--font); font-style: normal; }
p  { margin: 0; font-size: 1.1em; font-weight: 200; line-height: 1.4; }
ul { margin: 0; }
img { max-width: 100%; display: block; }

/* --- Type scale (mirrors the original hero / title / title2 classes) ----- */
h1,
.hero h1      { font-size: 3em;   font-weight: 500; line-height: 1.3; }
.title        { font-size: 1.5em; font-weight: 300; line-height: 1.3; }
.title2       { font-size: 2.5em; font-weight: 400; line-height: 1.2; }
.center       { text-align: center; }

/* --- Layout ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Shared treatment for the three photo-backed sections */
.section-bg {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: var(--white);
}

/* --- Call-to-action button ---------------------------------------------- */
.btn {
  display: inline-block;
  min-width: 268px;
  padding: 13px 28px;
  border: none;
  border-radius: 100px;
  background: var(--orange-btn);
  color: var(--white);
  font-family: var(--font);
  font-weight: 400;
  font-size: 1.1em;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all ease-out 0.25s;
}
.btn:hover,
.btn:focus-visible {
  filter: brightness(1.07);
  transform: translateY(6px);
}
.btn:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }

/* --- Announcement bar --------------------------------------------------- */
.bar {
  background: var(--orange);
  color: var(--white);
  padding: 18px 0;
}
.bar p { font-size: 1em; text-align: center; }

/* --- Hero --------------------------------------------------------------- */
.hero {
  background-image: linear-gradient(rgba(0,0,0,0.29), rgba(0,0,0,0.29)),
                    url("../images/hero-bg.jpg");
}
.hero__inner {
  min-height: 513px;
  padding-top: 94px;
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.hero__logo { width: 246px; height: auto; margin-bottom: 60px; }
.hero h1 { max-width: 707px; }
.hero .title { max-width: 576px; margin-top: 22px; font-weight: 300; }

/* --- "Why compliance teams trust BPI System" ---------------------------- */
.why {
  background: var(--black);
  color: var(--white);
  padding: 75px 0;
}
.why__grid {
  display: grid;
  grid-template-columns: 426fr 443fr;
  column-gap: 71px;
  align-items: start;
}
.why__left .title2 { margin-bottom: 40px; }
.why__img { width: 100%; height: 362px; object-fit: cover; }
.why__right .title { margin: 38px 0 14px; }
.why__list { padding-left: 20px; font-size: 1.1em; font-weight: 200; line-height: 1.4; }
.why__list li { margin-bottom: 12px; }

/* --- "No more spreadsheets" band ---------------------------------------- */
.band {
  background-image: linear-gradient(rgba(0,0,0,0.71), rgba(0,0,0,0.71)),
                    url("../images/band-bg.jpg");
}
.band__grid {
  min-height: 352px;
  display: grid;
  grid-template-columns: 426fr 443fr;
  column-gap: 71px;
  align-items: center;
  padding-top: 60px;
  padding-bottom: 60px;
}
.band__right { grid-column: 2; }
.band__right .btn { margin-top: 34px; }

/* --- Testimonials ------------------------------------------------------- */
.trust { background: var(--white); padding: 70px 0 80px; }
.trust__heading { max-width: 640px; margin: 0 auto 55px; }
.trust__grid {
  display: grid;
  grid-template-columns: 303fr 280fr 280fr;
  column-gap: 28px;
  align-items: start;
}
.trust__left .title { margin-bottom: 40px; }
.trust__left .btn { min-width: 268px; }

.card {
  margin: 0;
  padding: 32px 30px;
  background: var(--card-bg);
  border-radius: 20px;
  min-height: 325px;
}
.stars { display: flex; gap: 12px; margin-bottom: 18px; }
.stars svg { width: 24px; height: 24px; fill: var(--orange); flex: none; }
.card blockquote { margin: 0; font-size: 1.1em; font-weight: 200; line-height: 1.4; }
.card blockquote strong { font-weight: 600; }
.card figcaption { margin-top: 20px; font-size: 1.1em; font-weight: 200; }

/* --- Closing CTA -------------------------------------------------------- */
.cta {
  background-image: linear-gradient(rgba(0,0,0,0.57), rgba(0,0,0,0.57)),
                    url("../images/cta-bg.jpg");
}
.cta__inner {
  min-height: 468px;
  padding-top: 77px;
  padding-bottom: 77px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.cta__inner .title2 { max-width: 470px; }
.cta__inner p      { max-width: 499px; margin-top: 30px; }
.cta__inner .title { max-width: 499px; margin-top: 30px; }
.cta__inner .btn   { margin-top: 40px; }

/* --- Footer ------------------------------------------------------------- */
.footer {
  background: var(--black);
  color: var(--white);
  padding: 36px 0;
}
.footer p { font-size: 1em; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet */
@media (max-width: 1023px) {
  .why__grid,
  .band__grid,
  .trust__grid {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
  .band__right { grid-column: 1; }
  .why__left  { order: 2; }
  .why__right { order: 1; }
  .why__left .title2 { margin-bottom: 24px; }
  .why__img { height: auto; }
  .trust__grid { row-gap: 28px; }
  .card { min-height: 0; }
  .hero h1 { font-size: 2.6em; }
  .title2  { font-size: 2.2em; }
}

/* Phone */
@media (max-width: 767px) {
  :root { --gutter: 16px; }

  .hero h1 { font-size: 2em; }
  .title   { font-size: 1.25em; }
  .title2  { font-size: 1.75em; }

  .hero__inner { min-height: 0; padding-top: 48px; padding-bottom: 48px; text-align: center; align-items: center; }
  .hero__logo  { width: 190px; margin-bottom: 36px; }

  .why  { padding: 50px 0; }
  .band__grid { min-height: 0; padding-top: 48px; padding-bottom: 48px; text-align: center; }
  .trust { padding: 50px 0 60px; }
  .trust__heading { margin-bottom: 36px; }
  .trust__left { text-align: center; }
  .cta__inner { min-height: 0; padding-top: 56px; padding-bottom: 56px; text-align: center; align-items: center; }

  .stars { justify-content: center; }
  .card  { text-align: center; }

  .btn { min-width: 0; width: 100%; max-width: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover, .btn:focus-visible { transform: none; }
}