/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; }

/* Navbar scroll state — applied via JS */
#navbar.scrolled {
  background: rgba(255,255,255,0.97);
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.07);
  border-bottom: 1px solid #f1f5f9;
}

/* FAQ accordion answer — animated open/close */
.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.28s ease, opacity 0.22s ease;
  opacity: 0;
}
.faq-answer.open {
  max-height: 500px;
  opacity: 1;
}
/* Override Tailwind's .hidden when we animate */
.faq-answer.animating {
  display: block !important;
}

/* FAQ item open state */
.faq-item.open {
  border-color: #99f6e4;
  background-color: rgba(240,253,250,0.4);
}
.faq-item.open .faq-num   { color: #0d9488; }
.faq-item.open .faq-q     { color: #0f766e; }
.faq-item.open .faq-icon  { background-color: #0f766e; color: #fff; }

/* Mobile menu is shown via JS toggling .hidden on the element */

/* Prevent content from being covered by fixed navbar */
main { padding-top: 0; }

/* ── Problem section 2-column layout ── */
.problem-section {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: 64px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 88px 28px;
}

.problem-image {
  padding: 8px;
}

.problem-image img {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

@media (max-width: 768px) {
  .problem-section {
    grid-template-columns: 1fr;
    padding: 48px 20px;
    gap: 28px;
  }
  .problem-image {
    padding: 0;
    margin-top: 4px;
  }
}

/* ── Footer logo ── */
.footer-logo-wrap {
  text-align: center;
  padding: 36px 20px 8px;
}

.footer-logo-img {
  max-width: 180px;
  height: auto;
  opacity: 0.88;
  display: inline-block;
}

/* ── Hero responsive layout ── */
.hero-layout {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 380px);
  gap: 80px;
  align-items: center;
}

.hero-copy {
  min-width: 0;
}

.hero-card {
  width: 100%;
  max-width: 380px;
}

/* Switch to single-column below 1400px so buttons never crowd the card */
@media (max-width: 1399px) {
  .hero-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero-card {
    max-width: 680px;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .hero-card {
    max-width: 100%;
  }
}

/* ── Hero background image + overlay ── */
#hero {
  background-image: url('hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.72);
  pointer-events: none;
}
#hero .hero-content {
  position: relative;
  z-index: 2;
}