/* Preserve the established HTML&HTML header/hero visual structure while keeping original HTML&HTML copy. */
#header-hero-wrapper {
  padding: 5.5rem 0 0;
  border-bottom: 1px solid var(--line);
}

#header-hero-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

#header-left {
  flex: 0 0 40%;
  text-align: left;
}

#header-left .logo-badge {
  display: inline-block;
  margin-bottom: 1.4rem;
  padding: .32em .85em;
  border-radius: 4px;
  background: #e7746f;
  color: #fff;
  text-decoration: none;
  font-size: 2.35rem;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(231,116,111,.22);
}

#header-left .tagline {
  margin: 0;
  color: #555b68;
  font-size: clamp(2.1rem, 3.35vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -.045em;
  font-weight: 300;
}

#header-left .tagline strong {
  color: #343b47;
  font-weight: 800;
}

#header-left .hero-support {
  max-width: 510px;
  margin: 1.2rem 0 0;
  color: #747b88;
  font-size: .97rem;
  line-height: 1.6;
}

#header-right {
  flex: 0 0 58%;
}

.feature-circles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .35rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-circles .circle-item {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.circle-box {
  width: 6.15rem;
  height: 6.15rem;
  margin-bottom: .9rem;
  border: 1px solid #dee0e3;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.025);
}

.circle-symbol {
  font-size: 1.1rem;
  font-weight: 850;
  letter-spacing: -.03em;
  color: #4e5664;
}

.circle-caption {
  color: #676d79;
  font-size: .92rem;
  line-height: 1.3;
}

.circle-caption span,
.circle-caption strong {
  display: block;
}

.circle-caption span {
  font-size: .84rem;
  font-weight: 400;
}

.circle-caption strong {
  margin-top: 2px;
  color: #3b424f;
  font-size: .98rem;
  font-weight: 750;
}

.plus-sign {
  margin-top: -2.1rem;
  color: #d9dde3;
  font-size: 1.85rem;
  font-weight: 250;
  user-select: none;
}

#hero-bar {
  min-height: 92px;
  padding: 2.6rem 0 1.35rem;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  color: #6d7480;
  font-size: .88rem;
}

#hero-bar p {
  margin: 0;
}

#hero-bar nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

#hero-bar a {
  color: #4d5562;
  text-decoration: none;
  border-bottom: 1px dotted #c8cdd4;
}

#hero-bar a:hover {
  color: #e7746f;
  border-color: #e7746f;
}

@media (max-width: 1020px) {
  #header-hero-wrapper { padding-top: 4.2rem; }
  #header-hero-inner { align-items: flex-start; flex-direction: column; gap: 3rem; }
  #header-left, #header-right { flex: 1 1 auto; width: 100%; }
  #header-left { max-width: 700px; }
  #header-right { max-width: 760px; }
}

@media (max-width: 700px) {
  #header-hero-wrapper { padding-top: 3rem; }
  #header-left .logo-badge { font-size: 1.85rem; }
  #header-left .tagline { font-size: clamp(2rem, 11vw, 3rem); }
  .feature-circles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 1.3rem;
  }
  .feature-circles .plus-sign { display: none; }
  .circle-box { width: 5.5rem; height: 5.5rem; }
  #hero-bar { align-items: flex-start; flex-direction: column; padding-top: 2rem; }
}