/* ==========================================================================
   02 HERO BANNER — native Divi modules, scoped under .cdt-hero only.
   Custom classes are set per-module via module.advanced.htmlAttributes in
   divi-json/02-hero.json (cdt-eyebrow, cdt-hero__title, cdt-hero__desc,
   cdt-hero__cta, cdt-hero__img, cdt-float--1..5).

   The section's gradient background is ALSO set via native Section design
   settings (module.decoration.background in the JSON) — that field's exact
   shape isn't verified against a working example, so the identical
   gradient is repeated here as a guaranteed-correct fallback. If the
   native setting renders correctly, this rule is redundant but harmless;
   if it doesn't, this keeps the visual correct regardless.
   ========================================================================== */

.cdt-hero, .cdt-hero * { box-sizing: border-box; }

.cdt-hero {
  padding: 170px 24px 110px;
  background: linear-gradient(120deg, #eae4fc 0%, #d7cdf9 25%, #b9a4f2 50%, #8fd6ff 75%, #d7cdf9 100%);
  position: relative;
  overflow: hidden;
}

.cdt-hero__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 3rem; position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; }
.cdt-hero__content { flex: 1 1 420px; min-width: 0; }
.cdt-hero__media { flex: 1 1 380px; min-width: 0; position: relative; display: flex; justify-content: center; }

.cdt-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .85rem; font-weight: 600; color: rgba(28,24,54,.65);
  margin-bottom: 1.3rem;
}
.cdt-eyebrow .cdt-eyebrow__pill {
  background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9);
  padding: .3rem .8rem; border-radius: 999px; color: #4527c9;
}

.cdt-hero__title h1 {
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin: 0 0 1.2rem;
  color: #17143c;
}
.cdt-hero__title span.purple { color: #5b39f2; }
.cdt-hero__title span.dark { color: #17143c; }

.cdt-hero__desc p {
  max-width: 460px;
  color: rgba(28,24,54,.75);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.7;
  margin: 0 0 2rem;
}

.cdt-hero__cta {
  display: inline-flex;
  align-items: center;
  padding: 1rem 1.9rem !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #5b39f2, #4824d8) !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 16px 34px -14px rgba(91,57,242,.78);
}

.cdt-hero__img, .cdt-hero__img img {
  width: 100%;
  max-width: 480px;
  border-radius: 999px 999px 40px 40px;
  box-shadow: 0 28px 70px rgba(40,32,89,.18);
}

.cdt-float {
  position: absolute;
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  color: #5b39f2;
  font-size: 1.2rem;
  box-shadow: 0 18px 42px rgba(72,36,216,.18);
  animation: cdt-float 4s ease-in-out infinite;
}
.cdt-float--1 { top: 8%; left: 4%; animation-delay: 0s; }
.cdt-float--2 { top: 30%; left: -4%; animation-delay: .6s; }
.cdt-float--3 { bottom: 22%; left: 0; animation-delay: 1.2s; }
.cdt-float--4 { top: 4%; right: 4%; animation-delay: .3s; }
.cdt-float--5 { bottom: 10%; right: -2%; animation-delay: .9s; }
@keyframes cdt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

@media (max-width: 900px) {
  .cdt-hero { padding: 60px 20px; }
  .cdt-hero__inner { text-align: center; justify-content: center; }
  .cdt-hero__desc { margin-inline: auto; }
  .cdt-float { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cdt-float { animation: none; }
}