:root {
  --hbw-green: #00d084;
  --hbw-green-dark: #007a50;
  --hbw-yellow: #ffd83d;
  --hbw-ink: #102820;
  --hbw-cream: #fffdf5;
  --hbw-white: #ffffff;
  --hbw-shadow: 0 18px 50px rgba(16, 40, 32, .12);
}

.hbw-page,
.hbw-page * { box-sizing: border-box; }

.hbw-page {
  width: min(1180px, calc(100% - 32px));
  margin: 28px auto 60px;
  color: var(--hbw-ink);
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", Arial, sans-serif;
  line-height: 1.6;
}

.hbw-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.hbw-hero {
  position: relative;
  min-height: 540px;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  border: 6px solid var(--hbw-ink);
  border-radius: 34px;
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.35) 0 7%, transparent 7.5%),
    linear-gradient(135deg, var(--hbw-green) 0 58%, #7ef0bd 58% 100%);
  box-shadow: var(--hbw-shadow);
}

.hbw-hero {
  min-height: 0;
  display: block;
  aspect-ratio: 16 / 7;
  background: #4db5e5;
}

.hbw-hero::before,
.hbw-hero::after { display: none; }

.hbw-hero__picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hbw-hero::before,
.hbw-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 260px;
  height: 260px;
  background: var(--hbw-yellow);
  transform: rotate(45deg);
}

.hbw-hero::before { left: -170px; top: -120px; }
.hbw-hero::after { right: -180px; bottom: -100px; }

.hbw-hero__image {
	position: static;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hbw-hero__image + .hbw-hero__overlay {
  background: rgba(0, 122, 80, .76);
  backdrop-filter: blur(2px);
}

.hbw-hero__overlay {
  width: min(760px, calc(100% - 40px));
  padding: 52px;
  text-align: center;
  color: var(--hbw-white);
  border: 3px solid rgba(255,255,255,.82);
  border-radius: 26px;
}

.hbw-kicker,
.hbw-step {
  display: inline-block;
  margin: 0 0 10px;
  padding: 6px 14px;
  color: var(--hbw-ink);
  background: var(--hbw-yellow);
  border: 2px solid var(--hbw-ink);
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hbw-hero h1,
.hbw-section h2 {
  margin: 0;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
  font-weight: 900;
  line-height: 1.05;
}

.hbw-hero h1 { font-size: clamp(2.5rem, 7vw, 5.25rem); }
.hbw-hero p:not(.hbw-kicker) { max-width: 650px; margin: 20px auto 28px; font-size: 1.12rem; }

.hbw-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 50px;
  padding: 12px 24px;
  border: 3px solid var(--hbw-ink);
  border-radius: 999px;
  box-shadow: 5px 5px 0 var(--hbw-ink);
  color: var(--hbw-ink) !important;
  font-weight: 900;
  text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease;
}

.hbw-button:hover,
.hbw-button:focus-visible { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--hbw-ink); }
.hbw-button--yellow { background: var(--hbw-yellow); }
.hbw-button--green { background: var(--hbw-green); }

.hbw-intro {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  max-width: 850px;
  margin: 52px auto;
  text-align: center;
  font-size: 1.16rem;
  font-weight: 700;
}

.hbw-intro span { color: var(--hbw-green-dark); font-size: 2rem; }

.hbw-section {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(34px, 6vw, 76px);
  align-items: center;
  margin: 40px 0;
  padding: clamp(30px, 6vw, 70px);
  border-radius: 32px;
  background: var(--hbw-cream);
  box-shadow: var(--hbw-shadow);
}

.hbw-section--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); background: #effff8; }
.hbw-section--reverse .hbw-copy { order: 2; }
.hbw-section--diploma { background: #fff8cf; }

.hbw-section h2 { margin-bottom: 20px; font-size: clamp(2rem, 4.6vw, 3.6rem); }
.hbw-copy > p:not(.hbw-step) { margin: 0 0 24px; font-size: 1.08rem; }

.hbw-media-card {
  overflow: hidden;
  border: 4px solid var(--hbw-ink);
  border-radius: 26px;
  background: var(--hbw-white);
  box-shadow: 9px 9px 0 var(--hbw-yellow);
}

.hbw-media-card img { display: block; width: 100%; height: auto; }
.hbw-media-card--audio img { aspect-ratio: 4 / 3; object-fit: cover; }
.hbw-media-card--diploma { padding: 14px; }

.hbw-video { position: relative; padding-top: 56.25%; }
.hbw-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.hbw-placeholder {
  min-height: 330px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  padding: 30px;
  text-align: center;
  background: linear-gradient(135deg, #e8fff6, #fff6bc);
}

.hbw-placeholder p { margin: 0; font-weight: 800; }
.hbw-play { display: grid; place-items: center; width: 82px; height: 82px; padding-left: 5px; border: 4px solid var(--hbw-ink); border-radius: 50%; background: var(--hbw-yellow); font-size: 2rem; }

.hbw-robot { position: relative; width: 118px; height: 96px; border: 5px solid var(--hbw-ink); border-radius: 30px; background: var(--hbw-green); }
.hbw-robot::before { content: ""; position: absolute; left: 52px; top: -37px; width: 5px; height: 34px; background: var(--hbw-ink); }
.hbw-robot::after { content: ""; position: absolute; left: 44px; top: -48px; width: 20px; height: 20px; border: 4px solid var(--hbw-ink); border-radius: 50%; background: var(--hbw-yellow); }
.hbw-robot span::before, .hbw-robot span::after { content: ""; position: absolute; top: 29px; width: 18px; height: 18px; border: 4px solid var(--hbw-ink); border-radius: 50%; background: var(--hbw-white); }
.hbw-robot span::before { left: 23px; }
.hbw-robot span::after { right: 23px; }
.hbw-robot i { position: absolute; left: 32px; bottom: 18px; width: 45px; height: 12px; border-bottom: 5px solid var(--hbw-ink); border-radius: 50%; }

.hbw-audio { width: 100%; margin-top: 5px; accent-color: var(--hbw-green-dark); }

.hbw-footer {
  margin-top: 52px;
  padding: 38px 24px;
  color: var(--hbw-white);
  text-align: center;
  border-radius: 28px;
  background: var(--hbw-green-dark);
}

.hbw-footer p { margin: 4px; }

@media (max-width: 760px) {
  .hbw-page { width: min(100% - 20px, 1180px); margin-top: 12px; }
  .hbw-hero { min-height: 0; aspect-ratio: 9 / 16; border-width: 4px; border-radius: 24px; }
  .hbw-hero__overlay { padding: 34px 20px; }
  .hbw-section,
  .hbw-section--reverse { grid-template-columns: 1fr; padding: 28px 20px; border-radius: 24px; }
  .hbw-section--reverse .hbw-copy { order: initial; }
  .hbw-intro { gap: 9px; margin: 38px auto; }
  .hbw-intro span { font-size: 1.2rem; }
  .hbw-placeholder { min-height: 250px; }
  .hbw-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hbw-button { transition: none; }
}