/* --- Hero Banner: base --- */
.hero-banner {
  position: relative;
  overflow: hidden;
  padding-top: 40px;
  padding-bottom: 40px;   /* replaces margin-bottom: 40px */
}

@media screen and (min-width: 768px) {
  .hero-banner {
    display: flex;
    align-items: flex-start;
    text-align: left;
    padding-top: 48px;
    padding-bottom: 40px;
}

/* First hero in a dnd column gets extra breathing room */
.dnd-section .row-fluid > .dnd-column > .dnd-row:first-child section.hero-banner,
.dnd-section .row-fluid > .dnd-column > .dnd-row:first-child .is-section.hero-banner {
  padding-top: 40px;
  padding-bottom: 40px;
}

@media screen and (min-width: 768px) {
  .dnd-section .row-fluid > .dnd-column > .dnd-row:first-child section.hero-banner,
  .dnd-section .row-fluid > .dnd-column > .dnd-row:first-child .is-section.hero-banner {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

.hero-banner .is-background {
  position: absolute;
  inset: 0;
  z-index: 0; /* below the overlays */
  background-size: cover;
  background-position: center;
}

/* --- Typography --- */
.hero-banner .is-main-title {
  font-family: 'Macan', sans-serif !important;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 0;
  margin-bottom: 24px;
}

.hero-banner h1.is-main-title {
  font-size: clamp(30px, 6vw, 52px);
  line-height: 1.2;
}

.hero-banner .is-subhead {
  font-family: 'Macan', sans-serif;
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.01em;
  margin-top: -8px;   /* title already has 24px bottom margin */
  margin-bottom: 20px;
  text-wrap: pretty;
}

.hero-banner .is-intro p {
  font-size: clamp(14px, 3.5vw, 18px) !important;
  line-height: 1.6 !important;
}

.hero-banner .is-eyebrow {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #00e698;
  margin-bottom: 16px;
  display: block;
}

.text-highlight-green {
  color: #00e698 !important;
}

/* --- Buttons --- */
.hero-banner__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.hero-banner .is-green-ai-button {
  background-color: #03D38D !important;
  color: #000 !important;
  border: none !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
  border-radius: 45px !important;
}

.hero-banner .btn-hollow {
  background-color: transparent !important;
  border: 2px solid currentColor !important;
  font-weight: 700 !important;
  padding: 10px 22px !important;
  border-radius: 45px !important;
  transition: background-color .2s ease, color .2s ease;
}

/* Sizes */
.hero-banner .btn-xs { font-size: 12px !important; padding: 8px 16px !important; }
.hero-banner .btn-sm { font-size: 14px !important; padding: 10px 20px !important; }
.hero-banner .btn-md { font-size: 16px !important; padding: 13px 28px !important; }
.hero-banner .btn-lg { font-size: 18px !important; padding: 16px 36px !important; }

/* Hollow variant: shave 2px so the border doesn't add height */
.hero-banner .btn-hollow.btn-xs { padding: 6px 14px !important; }
.hero-banner .btn-hollow.btn-sm { padding: 8px 18px !important; }
.hero-banner .btn-hollow.btn-md { padding: 11px 26px !important; }
.hero-banner .btn-hollow.btn-lg { padding: 14px 34px !important; }

/* Dark backgrounds — green hollow */
.hero-banner.has-lightest-text-color .btn-hollow { color: #00e698 !important; }
.hero-banner.has-lightest-text-color .btn-hollow:hover {
  background-color: #00e698 !important;
  color: #000 !important;
}

.hero-banner .btn-primary.btn-hollow        { color: #009845 !important; border-color: #009845 !important; }
.hero-banner .btn-highlight.btn-hollow      { color: #FFD84D !important; border-color: #FFD84D !important; }
.hero-banner .btn-highlight-blue.btn-hollow { color: #5dc9c2 !important; border-color: #5dc9c2 !important; }
.hero-banner .btn-white.btn-hollow          { color: #FFFFFF !important; border-color: #FFFFFF !important; }
.hero-banner .btn-black.btn-hollow          { color: #000000 !important; border-color: #000000 !important; }
.hero-banner .btn-green-ai.btn-hollow       { color: #00E698 !important; border-color: #00E698 !important; }

/* --- Overlays --- */
.hero-banner .is-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.hero-banner .is-overlay--image {
  background-repeat: no-repeat;
}

.hero-banner .is-overlay--noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
}

/* .is-overlay--gradient: background set inline from the module */

/* Content sits above all overlays */
.hero-banner > .container,
.hero-banner > [class*="container"] {
  position: relative;
  z-index: 2;
}

/* --- Optional Media Column --- */
.hero-banner .row.align-items-center {
  align-items: center;
}

.hero-banner__media {
  display: flex;
  justify-content: center;
}

.hero-banner__media img,
.hero-banner .hero-banner__img,
.hero-banner .hero-banner__img img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Image on the LEFT: reverse the column order on desktop */
@media screen and (min-width: 768px) {
  .hero-banner--media-left .row { flex-direction: row-reverse; }
}

/* Stacked on mobile: image drops below the copy */
@media screen and (max-width: 767px) {
  .hero-banner--has-media .hero-banner__media { margin-top: 32px; }
}