/* ═══════════════════════════════════════════════
   DentaZon — Main Stylesheet
   All styles extracted from Figma design
   File: 1URNdYALjUFYH9eW6EcJsx
   ═══════════════════════════════════════════════ */


/* ─────────────────────────────────────────────
   BUTTONS (from Figma Make source)
   ───────────────────────────────────────────── */
#dz-home .dz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 48px;
  padding: 0 2rem;
  border-radius: var(--dz-radius);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none !important;
  transition: all .3s ease;
  border: 2px solid transparent;
  white-space: nowrap;
  line-height: 24px;
}

#dz-home .dz-btn:hover {
  transform: scale(1.05);
}

#dz-home .dz-btn:active {
  transform: scale(0.95);
}

#dz-home .dz-btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Primary — #1E88E5 → #0D47A1 */
#dz-home .dz-btn-primary {
  background: linear-gradient(90deg, #1E88E5, #0D47A1) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--dz-shadow-lg);
}

#dz-home .dz-btn-primary:hover {
  background: linear-gradient(90deg, #0D47A1, #1E88E5) !important;
  box-shadow: 0 16px 40px rgba(30, 136, 229, .35), 0 6px 12px rgba(30, 136, 229, .2);
}

/* Accent (Dentist) — #0D47A1 → #00BFA6 */
#dz-home .dz-btn-accent {
  background: linear-gradient(90deg, #0D47A1, #00BFA6) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--dz-shadow-md);
}

#dz-home .dz-btn-accent:hover {
  background: linear-gradient(90deg, #00BFA6, #0D47A1) !important;
  box-shadow: var(--dz-shadow-lg);
}

/* CTA — #1E88E5 → #00BFA6 */
#dz-home .dz-btn-cta {
  background: linear-gradient(90deg, #1E88E5, #00BFA6) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--dz-shadow-lg);
}

#dz-home .dz-btn-cta:hover {
  background: linear-gradient(90deg, #0D47A1, #1E88E5) !important;
  box-shadow: 0 16px 40px rgba(13, 71, 161, .35), 0 6px 12px rgba(30, 136, 229, .2);
}

/* Outline — white bg, blue border */
#dz-home .dz-btn-outline {
  background: var(--dz-white) !important;
  color: #1E88E5 !important;
  border: 2px solid #1E88E5 !important;
  /* height: 52px; */
}

#dz-home .dz-btn-outline:hover {
  background: #1E88E5 !important;
  color: #fff !important;
}

/* White — for dark sections */
#dz-home .dz-btn-white {
  background: #fff !important;
  color: #1E88E5 !important;
  box-shadow: var(--dz-shadow-lg);
}

#dz-home .dz-btn-white:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, .2);
}

/* Card-level buttons (smaller, 14px, full-width) */
#dz-home .dz-btn--card {
  font-size: 14px;
  line-height: 20px;
  width: 100%;
}


/* ─────────────────────────────────────────────
   SCROLL REVEAL ANIMATIONS
   ───────────────────────────────────────────── */
#dz-home .dz-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .65s ease, transform .65s ease;
}

#dz-home .dz-reveal.is-visible {
  opacity: 1;
  transform: none;
}

#dz-home .dz-reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .65s ease, transform .65s ease;
}

#dz-home .dz-reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .65s ease, transform .65s ease;
}

#dz-home .dz-reveal-left.is-visible,
#dz-home .dz-reveal-right.is-visible {
  opacity: 1;
  transform: none;
}

#dz-home .dz-delay-1 {
  transition-delay: .1s;
}

#dz-home .dz-delay-2 {
  transition-delay: .2s;
}

#dz-home .dz-delay-3 {
  transition-delay: .3s;
}

#dz-home .dz-delay-4 {
  transition-delay: .4s;
}

#dz-home .dz-delay-5 {
  transition-delay: .5s;
}

#dz-home .dz-delay-6 {
  transition-delay: .6s;
}

/* Keyframes */
@keyframes dz-float {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-10px)
  }
}

@keyframes dz-orb-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: .3
  }

  50% {
    transform: scale(1.2);
    opacity: .48
  }
}

@keyframes dz-orb-float {

  0%,
  100% {
    transform: translate(0, 0) scale(1)
  }

  50% {
    transform: translate(30px, -30px) scale(1.15)
  }
}

/* Orb Backgrounds (from Figma) */
#dz-home .dz-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(64px);
}

#dz-home .dz-orb--blue {
  background: rgba(30, 136, 229, .05);
  width: 288px;
  height: 288px;
  animation: dz-orb-pulse 8s ease-in-out infinite;
}

#dz-home .dz-orb--teal {
  background: rgba(0, 191, 166, .05);
  width: 486px;
  height: 486px;
  animation: dz-orb-pulse 8s ease-in-out infinite;
  animation-delay: -4s;
}


/* ─────────────────────────────────────────────
   HEADER (Figma node 5:1644)
   ───────────────────────────────────────────── */
.dz-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  /* border-bottom: 1px solid var(--dz-border); */
  transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}

.dz-header.is-scrolled {
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(18px);
  box-shadow: var(--dz-shadow-lg);
}

.dz-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1440px, 100% - 3rem);
  margin-inline: auto;
  min-height: 84px;
  gap: 1.5rem;
}

.dz-header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.dz-header__logo img {
  height: 56px;
  width: auto;
}

.dz-header__site-name {
  font-size: 20px;
  font-weight: 700;
  background: var(--dz-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dz-header__nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.dz-header__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dz-header__menu li a {
  font-size: 14px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  color: #1F2937;
  text-decoration: none;
  transition: color .3s ease;
  position: relative;
  display: inline-block;
  padding: .25rem 0;
}

.dz-header__menu li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: #1E88E5;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}

.dz-header__menu li a:hover,
.dz-header__menu li.current-menu-item a {
  color: var(--dz-blue);
}

.dz-header__menu li a:hover::after,
.dz-header__menu li.current-menu-item a::after {
  transform: scaleX(1);
}

.dz-header__actions {
  display: flex;
  gap: .625rem;
}

.dz-header__actions .dz-btn-sm,
.dz-header__mobile-actions .dz-btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 48px;
  padding: 0 2rem;
  font-size: 16px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  border-radius: var(--dz-radius);
  text-decoration: none !important;
  cursor: pointer;
  transition: all .3s ease;
  border: 2px solid transparent;
  white-space: nowrap;
  line-height: 24px;
}

.dz-header__actions .dz-btn-sm--outline,
.dz-header__mobile-actions .dz-btn-sm--outline {
  background: var(--dz-white) !important;
  color: #1E88E5 !important;
  border: 2px solid #1E88E5 !important;
}

.dz-header__actions .dz-btn-sm--outline:hover,
.dz-header__mobile-actions .dz-btn-sm--outline:hover {
  background: #1E88E5 !important;
  color: #fff !important;
  transform: scale(1.05);
}

.dz-header__actions .dz-btn-sm--primary,
.dz-header__mobile-actions .dz-btn-sm--primary {
  background: linear-gradient(90deg, #1E88E5, #0D47A1) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--dz-shadow-lg);
}

.dz-header__actions .dz-btn-sm--primary:hover,
.dz-header__mobile-actions .dz-btn-sm--primary:hover {
  background: linear-gradient(90deg, #0D47A1, #1E88E5) !important;
  box-shadow: 0 16px 40px rgba(30, 136, 229, .35), 0 6px 12px rgba(30, 136, 229, .2);
  transform: scale(1.05);
}

.dz-header__mobile {
  display: none;
}

.dz-header__mobile-menu,
.dz-header__mobile-actions {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dz-header__mobile-menu {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.dz-header__mobile-menu a {
  display: block;
  color: #1F2937;
  font-size: 15px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
  padding: .75rem 0;
  transition: color .3s ease;
}

.dz-header__mobile-menu a:hover {
  color: var(--dz-blue);
}

.dz-header__mobile-actions {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: 1rem;
}

.dz-header__mobile-actions .dz-btn-sm {
  display: inline-flex;
  justify-content: center;
}

/* Hamburger */
.dz-header__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}

.dz-header__toggle span {
  width: 24px;
  height: 2px;
  background: var(--dz-dark);
  border-radius: 2px;
  transition: all .3s;
}

.dz-header.menu-open .dz-header__toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.dz-header.menu-open .dz-header__toggle span:nth-child(2) {
  opacity: 0;
}

.dz-header.menu-open .dz-header__toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ─────────────────────────────────────────────
   FOOTER (Figma node 5:1569)
   ───────────────────────────────────────────── */
.dz-footer {
  background: var(--dz-dark);
  color: #9CA3AF;
  padding: 4rem 0 0;
  font-family: 'Inter', sans-serif;
}

.dz-footer .container {
  width: min(1440px, 100% - 3rem);
  margin-inline: auto;
}

.dz-footer__top {
  display: grid;
  grid-template-columns: 1.5fr 2.5fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.dz-footer__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-bottom: 1rem;
}

.dz-footer__logo img {
  height: 4rem;
  width: auto;
}

.dz-footer__logo .dz-header__site-name {
  font-size: 20px;
  font-weight: 700;
  background: var(--dz-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dz-footer__tagline {
  font-size: 14px;
  line-height: 20px;
  max-width: 320px;
  margin-bottom: 1rem;
}

.dz-footer__socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.dz-footer__socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #E5E7EB;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.dz-footer__socials a:hover {
  background: var(--dz-blue);
  color: #fff;
  transform: translateY(-2px);
}

.dz-footer__socials svg {
  width: 16px;
  height: 16px;
  display: block;
}

.dz-footer__links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.dz-footer__col h4 {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 1rem;
}

.dz-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.dz-footer__col a {
  font-size: 14px;
  color: #9CA3AF;
  text-decoration: none;
  transition: color .2s;
}

.dz-footer__col a:hover {
  color: #fff;
}

.dz-footer__bottom {
  padding: 1.5rem 0;
  text-align: center;
  font-size: 14px;
  color: #6B7280;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.dz-footer__copyright {
  margin: 0;
}

.dz-footer__bottom-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem 1.25rem;
}

.dz-footer__bottom-links a {
  color: #9CA3AF;
  font-size: 13px;
  transition: color .2s ease;
}

.dz-footer__bottom-links a:hover {
  color: #fff;
}

.dz-footer__social {
  display: flex;
  gap: 1rem;
}

.dz-footer__social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s;
}

.dz-footer__social a:hover {
  background: var(--dz-blue);
  transform: scale(1.1);
}

.dz-footer__social img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}


/* ═══════════════════════════════════════════════
   SECTION 1 — HERO (Figma node 5:1019)
   Background: gradient(145.82deg, #fff → rgba(239,246,255,0.3) → #fff)
   ═══════════════════════════════════════════════ */
#dz-home .dz-hero {
  background: linear-gradient(145.82deg, #fff 0%, rgba(239, 246, 255, 0.3) 50%, #fff 100%) !important;
  padding: 4rem 0 5rem;
}

#dz-home .dz-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

/* Badge pill — gradient bg, border */
#dz-home .dz-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0 1.25rem;
  height: 38px;
  border-radius: 9999px;
  background: linear-gradient(90deg, rgba(30, 136, 229, .1), rgba(0, 191, 166, .1));
  border: 1px solid rgba(30, 136, 229, .2);
  font-size: 14px;
  font-weight: 500;
  color: var(--dz-blue);
  margin-bottom: 1.5rem;
}

#dz-home .dz-hero__badge img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

#dz-home .dz-hero__badge svg {
  width: 16px;
  height: 16px;
  color: var(--dz-blue);
}

/* Heading — 60px bold */
#dz-home .dz-hero__heading {
  font-size: clamp(36px, 5vw, 60px) !important;
  font-weight: 700 !important;
  line-height: clamp(44px, 6vw, 75px) !important;
  margin-bottom: 1.25rem !important;
  color: var(--dz-dark) !important;
}

/* Description — 18px, #4A5565 */
#dz-home .dz-hero__desc {
  font-size: 18px !important;
  color: var(--dz-text) !important;
  line-height: 29.25px !important;
  margin-bottom: 2rem;
}

/* CTA buttons row */
#dz-home .dz-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-top: 1rem;
}

/* Stats — 30px bold blue */
#dz-home .dz-hero__stats {
  display: flex;
  gap: 2rem;
  padding-top: 1.5rem;
}

#dz-home .dz-hero__stat strong {
  display: block;
  font-size: 30px !important;
  font-weight: 700 !important;
  color: var(--dz-blue) !important;
  line-height: 36px;
}

#dz-home .dz-hero__stat span {
  font-size: 14px;
  color: var(--dz-text);
  line-height: 20px;
}

/* Hero image — rounded-16px, shadow-2xl */
#dz-home .dz-hero__image-wrap {
  position: relative;
}

#dz-home .dz-hero__image-wrap>img {
  width: 100%;
  border-radius: var(--dz-radius-xl);
  box-shadow: var(--dz-shadow-2xl);
  object-fit: cover;
}

/* Floating badge — Figma: 177×74px, white, rounded-14px, shadow-xl */
#dz-home .dz-hero__float-badge {
  position: absolute;
  top: -24px;
  left: -24px;
  background: var(--dz-white);
  width: 177px;
  padding: 17px;
  border-radius: var(--dz-radius-lg);
  box-shadow: var(--dz-shadow-lg);
  border: 1px solid var(--dz-border);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: dz-float 3s ease-in-out infinite;
  z-index: 2;
}

#dz-home .dz-hero__float-badge-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--dz-grad-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#dz-home .dz-hero__float-badge-icon svg {
  width: 20px;
  height: 20px;
  color: #fff;
}

#dz-home .dz-hero__float-badge-icon--has-img {
  background: none;
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
}

#dz-home .dz-hero__float-badge-icon--has-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

#dz-home .dz-hero__float-label {
  font-size: 12px;
  font-weight: 400;
  color: var(--dz-text-light);
  line-height: 16px;
}

#dz-home .dz-hero__float-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--dz-dark);
  line-height: 20px;
}


/* ═══════════════════════════════════════════════
   SECTION 2 — GET STARTED (Figma node 5:1079)
   Background: gradient(180deg, #fff → #F8FAFC)
   Cards: 500px, rounded-16px, shadow-xl, gradient bg
   ═══════════════════════════════════════════════ */
#dz-home .dz-get-started {
  background: linear-gradient(180deg, #fff 0%, #F8FAFC 100%) !important;
}

#dz-home .dz-gs-grid {
  display: grid;
  grid-template-columns: repeat(2, 500px);
  gap: 24px;
  max-width: 1024px;
  margin-inline: auto;
  justify-content: center;
}

#dz-home .dz-gs-note {
  margin: 1.25rem auto 0;
  max-width: 1024px;
  text-align: center;
  font-size: 14px;
  line-height: 22px;
  color: var(--dz-text-light);
}

#dz-home .dz-gs-note a {
  color: var(--dz-blue);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(30, 136, 229, .25);
  transition: color .25s ease, border-color .25s ease;
}

#dz-home .dz-gs-note a:hover {
  color: var(--dz-navy);
  border-color: rgba(13, 71, 161, .35);
}

#dz-home .dz-gs-card {
  border-radius: var(--dz-radius-xl);
  box-shadow: var(--dz-shadow-xl);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s cubic-bezier(.22, 1, .36, 1);
  position: relative;
  isolation: isolate;
}

#dz-home .dz-gs-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .45s ease;
  z-index: 0;
}

#dz-home .dz-gs-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--dz-shadow-2xl);
}

#dz-home .dz-gs-card:hover::before {
  opacity: 1;
}

#dz-home .dz-gs-card--patient {
  background: linear-gradient(137.76deg, #fff 0%, rgba(239, 246, 255, 0.5) 100%);
}

#dz-home .dz-gs-card--patient::before {
  background: linear-gradient(135deg, rgba(30, 136, 229, .05) 0%, rgba(30, 136, 229, 0) 100%);
}

#dz-home .dz-gs-card--dentist {
  background: linear-gradient(137.76deg, #fff 0%, rgba(236, 254, 255, 0.5) 100%);
}

#dz-home .dz-gs-card--dentist::before {
  background: linear-gradient(135deg, rgba(0, 191, 166, .05) 0%, rgba(0, 191, 166, 0) 100%);
}

/* Card header — centered icon + title */
#dz-home .dz-gs-card__header {
  padding: 24px 24px 0;
  text-align: center;
  position: relative;
  z-index: 1;
}

#dz-home .dz-gs-card__icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: var(--dz-radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--dz-shadow-md);
  margin: 0 auto 22px;
  padding: 16px;
}

#dz-home .dz-gs-card__icon-wrap img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

#dz-home .dz-gs-card__icon-wrap svg {
  width: 32px;
  height: 32px;
  color: #fff;
}

#dz-home .dz-gs-card--patient .dz-gs-card__icon-wrap {
  background: var(--dz-grad-icon);
}

#dz-home .dz-gs-card--dentist .dz-gs-card__icon-wrap {
  background: var(--dz-grad-accent);
}

#dz-home .dz-gs-card h3 {
  font-size: 24px !important;
  font-weight: 500 !important;
  color: var(--dz-dark) !important;
  line-height: 32px !important;
  text-align: center;
}

/* Card content — features list + button */
#dz-home .dz-gs-card__content {
  padding: 24px;
  position: relative;
  z-index: 1;
}

#dz-home .dz-gs-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 2rem;
}

#dz-home .dz-gs-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #364153;
  font-size: 16px;
  line-height: 24px;
}

#dz-home .dz-gs-check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

#dz-home .dz-gs-check img {
  width: 100%;
  height: 100%;
}

#dz-home .dz-gs-check svg {
  width: 100%;
  height: 100%;
  color: var(--dz-teal);
}


/* ═══════════════════════════════════════════════
   SECTION 3 — ECOSYSTEM (Figma node 5:1166)
   ═══════════════════════════════════════════════ */
/* Figma: background white/light */
#dz-home .dz-ecosystem {
  background: var(--dz-light) !important;
}

/* Figma: 3-col grid */
#dz-home .dz-eco-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin-inline: auto;
}

/* Figma: card — white, border 1px #E5E7EB, rounded-16px, padding 24px */
#dz-home .dz-eco-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 24px;
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#dz-home .dz-eco-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--eco-hover-bg, transparent);
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 0;
}

#dz-home .dz-eco-card:hover {
  border-color: transparent;
  box-shadow: var(--dz-shadow-xl);
  transform: translateY(-5px);
}

#dz-home .dz-eco-card:hover::before {
  opacity: .05;
}

/* Figma: icon row — space-between, 22px gap to title */
#dz-home .dz-eco-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}

/* Figma: icon — 48×48px, rounded-14px, padding 12px, shadow-md */
#dz-home .dz-eco-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, .1), 0px 10px 15px -3px rgba(0, 0, 0, .1);
  transform: rotate(0deg) scale(1);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

#dz-home .dz-eco-card:hover .dz-eco-icon {
  transform: rotate(8deg) scale(1.1);
}

#dz-home .dz-eco-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

#dz-home .dz-eco-icon svg {
  width: 24px;
  height: 24px;
  color: #fff;
}

/* Figma: badge — rounded-8px, padding 2px 8px, 12px medium, NOT uppercase */
#dz-home .dz-eco-badge {
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 8px;
  line-height: 16px;
  border: 1px solid transparent;
}

#dz-home .dz-eco-badge--live {
  background: var(--dz-teal);
  color: #fff;
}

#dz-home .dz-eco-badge--coming_soon {
  background: #E5E7EB;
  color: #364153;
}

#dz-home .dz-eco-badge--beta {
  background: var(--dz-blue);
  color: #fff;
}

#dz-home .dz-eco-badge--new {
  background: #FEF3C7;
  color: #92400E;
}

/* Figma: title — 20px, medium (500), line-height 28px */
#dz-home .dz-eco-card h4 {
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 28px !important;
  margin-bottom: 12px !important;
  color: var(--dz-dark) !important;
  position: relative;
  z-index: 1;
}

/* Figma: description — 14px, regular, line-height 20px */
#dz-home .dz-eco-card p {
  font-size: 14px !important;
  color: var(--dz-text) !important;
  line-height: 20px !important;
  position: relative;
  z-index: 1;
}


/* ═══════════════════════════════════════════════
   SECTION 4 — WHY DENTAZON
   Alternating rows with gradient visual panels
   ═══════════════════════════════════════════════ */
#dz-home .dz-why {
  background: #fff !important;
}

#dz-home .dz-why__features {
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

#dz-home .dz-why__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

#dz-home .dz-why__row--reversed .dz-why__visual {
  order: 2;
}

#dz-home .dz-why__row--reversed .dz-why__content {
  order: 1;
}

/* Visual panel */
#dz-home .dz-why__visual {
  border-radius: var(--dz-radius-xl);
  padding: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--dz-shadow-2xl);
  min-height: 230px;
  transition: transform .3s ease;
}

#dz-home .dz-why__visual:hover {
  transform: scale(1.02);
}

#dz-home .dz-why__visual-pattern {
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMSI+PHBhdGggZD0iTTM2IDE2YzAtMi4yMSAxLjc5LTQgNC00czQgMS43OSA0IDQtMS43OSA0LTQgNC00LTEuNzktNC00em0wIDI0YzAtMi4yMSAxLjc5LTQgNC00czQgMS43OSA0IDQtMS43OSA0LTQgNC00LTEuNzktNC00eiIvPjwvZz48L2c+PC9zdmc+");
  background-repeat: repeat;
  background-size: 51px 51px;
  background-position: center;
  transition: transform .7s ease;
  transform-origin: center;
}

#dz-home .dz-why__visual:hover .dz-why__visual-pattern {
  transform: scale(1.1);
}

#dz-home .dz-why__visual-orb-tr {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 5rem;
  height: 5rem;
  background: rgba(255, 255, 255, .12);
  border-radius: 50%;
}

#dz-home .dz-why__visual-orb-bl {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  width: 4rem;
  height: 4rem;
  background: rgba(255, 255, 255, .12);
  border-radius: 50%;
}

/* Icon box */
#dz-home .dz-why__icon-box {
  width: 7rem;
  height: 7rem;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, .2);
  backdrop-filter: blur(8px);
  border: 3px solid rgba(255, 255, 255, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .2);
  transition: transform .3s ease;
}

#dz-home .dz-why__visual:hover .dz-why__icon-box {
  animation: dz-why-icon-wiggle .5s ease;
}

#dz-home .dz-why__icon-box svg {
  width: 4rem;
  height: 4rem;
  color: #fff;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .2));
}

@keyframes dz-why-icon-wiggle {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-5deg);
  }

  50% {
    transform: rotate(5deg);
  }

  75% {
    transform: rotate(-5deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* Number row */
#dz-home .dz-why__num-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

#dz-home .dz-why__num {
  width: 3rem;
  height: 3rem;
  border-radius: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}

#dz-home .dz-why__num-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, #D1D5DB, transparent);
}

/* Content */
#dz-home .dz-why__content h3 {
  font-size: 24px !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
  color: var(--dz-dark) !important;
}

#dz-home .dz-why__content p {
  font-size: 16px !important;
  color: var(--dz-text) !important;
  line-height: 26px !important;
  margin-bottom: 1.5rem;
}

/* Tags */
#dz-home .dz-why__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

#dz-home .dz-why__tag {
  padding: .5rem 1rem;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
}


/* ═══════════════════════════════════════════════
   SECTION — TRANSFORM CTA BANNER (inline in Why)
   ═══════════════════════════════════════════════ */
#dz-home .dz-why__inner-cta {
  display: block;
  text-align: center;
  margin-top: 4rem;
  background: var(--dz-grad) !important;
  border-radius: var(--dz-radius-xl);
  padding: 2.5rem 3rem;
  width: 60%;
  margin-inline: auto;
  box-shadow: 0 16px 48px rgba(30, 136, 229, .3);
}

#dz-home .dz-why__inner-cta h3 {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 30px;
  color: #fff !important;
  margin-bottom: .5rem !important;
}

#dz-home .dz-why__inner-cta p {
  color: rgba(255, 255, 255, .9) !important;
  font-size: 17px !important;
}


/* ═══════════════════════════════════════════════
   SECTION 5 — HOW IT WORKS (Figma node 5:1414)
   4 columns, gradient number squares, icon boxes, connector lines
   ═══════════════════════════════════════════════ */
#dz-home .dz-hiw {
  background: #fff !important;
}

#dz-home .dz-hiw__steps {
  display: grid;
  grid-template-columns: repeat(4, 264px);
  gap: 2rem;
  max-width: 1152px;
  margin-inline: auto;
  justify-content: center;
  position: relative;
}

/* Connector lines between steps */
#dz-home .dz-hiw__step {
  position: relative;
  z-index: 1;
  text-align: center;
}

#dz-home .dz-hiw__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 32px;
  left: calc(50% + 80px);
  width: 264px;
  height: 2px;
  background: var(--dz-grad);
  opacity: .3;
  z-index: 0;
}

/* Number + icon row */
#dz-home .dz-hiw__step-top {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-bottom: 1rem;
  position: relative;
}

/* Number square — 64px, rounded-16px, gradient, shadow-xl */
#dz-home .dz-hiw__step-num {
  width: 64px;
  height: 64px;
  border-radius: var(--dz-radius-xl);
  background: var(--dz-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  box-shadow: var(--dz-shadow-lg);
  transition: transform .3s ease, box-shadow .3s ease;
}

#dz-home .dz-hiw__step:hover .dz-hiw__step-num {
  transform: scale(1.08) rotate(3deg);
  box-shadow: 0 16px 40px rgba(30, 136, 229, .35);
}

/* Icon box — 48px, rounded-14px, gradient border */
#dz-home .dz-hiw__step-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--dz-radius-lg);
  background: linear-gradient(135deg, rgba(30, 136, 229, .1), rgba(0, 191, 166, .1));
  border: 2px solid rgba(30, 136, 229, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .3s ease;
}

#dz-home .dz-hiw__step:hover .dz-hiw__step-icon {
  border-color: var(--dz-blue);
}

#dz-home .dz-hiw__step-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

#dz-home .dz-hiw__step-icon svg {
  width: 24px;
  height: 24px;
  color: var(--dz-blue);
}

#dz-home .dz-hiw__step h4 {
  font-size: 18px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  color: var(--dz-dark) !important;
  line-height: 28px !important;
}

#dz-home .dz-hiw__step p {
  font-size: 14px !important;
  color: var(--dz-text) !important;
  line-height: 20px !important;
  max-width: 220px;
  margin-inline: auto;
}


/* ═══════════════════════════════════════════════
   SECTION 6 — VISION / BUILDING FUTURE (Figma 5:1480)
   Dark gradient background with dots pattern
   ═══════════════════════════════════════════════ */
#dz-home .dz-vision {
  background: linear-gradient(135deg, var(--dz-blue) 0%, var(--dz-navy) 50%, var(--dz-teal) 100%) !important;
  position: relative;
  overflow: hidden;
}

#dz-home .dz-vision__dots {
  position: absolute;
  inset: 0;
  opacity: .07;
  background-image: radial-gradient(circle at 2px 2px, #fff 1px, transparent 0);
  background-size: 40px 40px;
}

#dz-home .dz-vision__orb-1 {
  top: 5rem;
  left: 2.5rem;
  animation: dz-orb-float 8s ease-in-out infinite;
}

#dz-home .dz-vision__orb-2 {
  bottom: 5rem;
  right: 2.5rem;
  animation: dz-orb-float 10s ease-in-out infinite reverse;
}

#dz-home .dz-vision__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin-inline: auto;
}

#dz-home .dz-vision__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 6px 1rem;
  background: rgba(255, 255, 255, .15);
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .9);
  border: 1px solid rgba(255, 255, 255, .2);
  margin-bottom: 1.5rem;
}

#dz-home .dz-vision h2 {
  font-size: 36px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 44px !important;
  margin-bottom: 1.25rem !important;
}

#dz-home .dz-vision h2 span {
  color: var(--dz-teal) !important;
  -webkit-text-fill-color: var(--dz-teal) !important;
}

#dz-home .dz-vision__desc {
  font-size: 17px !important;
  color: rgba(255, 255, 255, .85) !important;
  line-height: 27px !important;
  margin-bottom: .75rem;
}

/* Stats grid */
#dz-home .dz-vision__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

#dz-home .dz-vision__stat {
  text-align: center;
  padding: 1.25rem 1rem;
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(8px);
  border-radius: var(--dz-radius);
  border: 1px solid rgba(255, 255, 255, .15);
  transition: transform .3s ease;
}

#dz-home .dz-vision__stat:hover {
  transform: translateY(-4px);
}

#dz-home .dz-vision__stat-icon {
  width: 2rem;
  height: 2rem;
  color: var(--dz-teal);
  margin: 0 auto .5rem;
}

#dz-home .dz-vision__stat strong {
  display: block;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #fff !important;
}

#dz-home .dz-vision__stat span {
  font-size: 12px;
  color: rgba(255, 255, 255, .65);
}

/* Image */
#dz-home .dz-vision__image-wrap {
  position: relative;
  border-radius: var(--dz-radius-xl);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .3);
}

#dz-home .dz-vision__image-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .15), transparent);
  z-index: 1;
}

#dz-home .dz-vision__image-wrap img {
  width: 100%;
  height: auto;
  display: block;
}


/* ═══════════════════════════════════════════════
   SECTION 7 — FINAL CTA (Figma node 5:1523)
   Light gradient background
   ═══════════════════════════════════════════════ */
#dz-home .dz-final-cta {
  background: linear-gradient(135deg, var(--dz-light) 0%, #fff 50%, rgba(219, 234, 254, .2) 100%) !important;
  text-align: center;
  overflow: hidden;
}

#dz-home .dz-final-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 8px 1.25rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(30, 136, 229, .08), rgba(0, 191, 166, .08));
  border: 1px solid rgba(30, 136, 229, .2);
  font-size: 14px;
  font-weight: 600;
  color: var(--dz-blue);
  margin-bottom: 1.5rem;
}

#dz-home .dz-final-cta__eyebrow svg {
  width: 1rem;
  height: 1rem;
}

#dz-home .dz-final-cta h2 {
  font-size: 36px !important;
  font-weight: 700 !important;
  margin-bottom: 1.25rem !important;
  line-height: 40px !important;
}

#dz-home .dz-final-cta p {
  font-size: 18px;
  color: var(--dz-text) !important;
  line-height: 28px;
  max-width: 42ch;
  margin-inline: auto;
  margin-bottom: 2.5rem;
}

#dz-home .dz-final-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 3rem;
}

/* Trust Badges */
#dz-home .dz-trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

#dz-home .dz-trust-badge {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 14px;
  color: var(--dz-text);
}

#dz-home .dz-trust-badge-check {
  color: var(--dz-teal);
  font-weight: 700;
  font-size: 14px;
}

#dz-home .dz-trust-badge img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}


/* ═══════════════════════════════════════════════
   MODALS — Structure only (no form styling)
   ═══════════════════════════════════════════════ */

.dz-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}

.dz-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.dz-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.dz-modal__container {
  position: relative;
  background: #fff;
  border: 2px solid var(--dz-blue);
  border-radius: .75rem;
  box-shadow: var(--dz-shadow-xl);
  width: min(92vw, 38rem);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: translateY(2rem) scale(.96);
  transition: transform .3s ease;
  overflow: hidden;
  padding: 2rem !important;
}

.dz-modal.is-open .dz-modal__container {
  transform: translateY(0) scale(1);
}

.dz-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 2rem 0;
  margin-bottom: 1.5rem;
}

.dz-modal__header h2 {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--dz-dark);
  margin: 0;
}

.dz-modal__header h2 span {
  color: var(--dz-blue);
}

.dz-modal__close {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  border: 1px solid #D1D5DB;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
  flex-shrink: 0;
}

.dz-modal__close svg {
  width: 1rem;
  height: 1rem;
  color: #6B7280;
}

.dz-modal__close:hover {
  background: #F3F4F6;
  border-color: #9CA3AF;
}

.dz-modal__body {
  padding: 1.5rem 2rem 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
}

.dz-modal__body::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

.dz-form-col .wpcf7-not-valid-tip,
.wpcf7-response-output {
  font-size: 12px !important;
  margin-top: 2px;
  line-height: 1.3;
}

@media (max-width: 640px) {
  .dz-modal {
    padding: .75rem;
  }

  .dz-modal__container {
    width: 100%;
    max-height: 98vh;
  }

  .dz-modal__header {
    padding: 1.5rem 1.5rem 0;
  }

  .dz-modal__header h2 {
    font-size: 1.5rem;
  }

  .dz-modal__body {
    padding: 1.25rem 1.5rem 1.5rem;
  }
}


/* ═══════════════════════════════════════════════
   CF7 FORM STYLING
   ═══════════════════════════════════════════════ */

.dz-cf7-form {
  width: 100%;
  --dz-form-placeholder-color: #7f8aa3;
}

.dz-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.dz-form-row--full {
  grid-template-columns: 1fr;
}

.dz-form-row--hidden {
  display: none;
}

.dz-form-col {
  width: 100%;
}

.dz-cf7-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.dz-cf7-form input[type="text"],
.dz-cf7-form input[type="email"],
.dz-cf7-form input[type="tel"],
.dz-cf7-form input[type="url"],
.dz-cf7-form select,
.dz-cf7-form textarea {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid #d9dee7;
  border-radius: 10px;
  font-size: 14px;
  background: #fff;
  outline: none;
  box-sizing: border-box;
}

.dz-cf7-form textarea {
  height: 140px;
  padding: 14px;
  resize: vertical;
}

.dz-cf7-form input[type="text"]::placeholder,
.dz-cf7-form input[type="email"]::placeholder,
.dz-cf7-form input[type="tel"]::placeholder,
.dz-cf7-form input[type="url"]::placeholder,
.dz-cf7-form textarea::placeholder,
.dz-cf7-form .flatpickr-input::placeholder,
.dz-modal__body .flatpickr-input::placeholder,
.contact-form-card .flatpickr-input::placeholder {
  color: var(--dz-form-placeholder-color);
  opacity: 1;
}

.dz-cf7-form input[type="text"]:focus,
.dz-cf7-form input[type="email"]:focus,
.dz-cf7-form input[type="tel"]:focus,
.dz-cf7-form input[type="url"]:focus,
.dz-cf7-form select:focus,
.dz-cf7-form textarea:focus {
  border-color: #1e73e8;
}

.dz-cf7-form input[type="submit"] {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 10px;
  background: #1e73e8;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.dz-cf7-form input[type="submit"]:hover {
  opacity: 0.92;
}

/* Trust / helper line above submit */
.dz-form-trust {
  font-size: 0.8125rem;
  color: #9ca3af;
  /* text-align: center; */
  margin-bottom: 1rem !important;
}

/* Field hint text below input */
.dz-form-hint {
  display: block;
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 4px;
  line-height: 1.3;
}

/* Confirmation checkbox row */
.dz-form-checkbox-row {
  margin-bottom: 1.5rem;
}

.dz-form-checkbox-row .wpcf7-list-item {
  margin: 0;
}

.dz-form-checkbox-row label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #4b5563;
  cursor: pointer;
  line-height: 1.4;
}

.dz-form-checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 1px;
  accent-color: #1e73e8;
  cursor: pointer;
}

.dz-form-col input,
textarea,
select {
  padding: 8px !important;
}

/* Hide CF7 response output bar */
.wpcf7-response-output {
  display: none !important;
}

/* Thank you message after submit */
.dz-thank-you {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 2rem;
  min-height: 280px;
}

.dz-thank-you__icon {
  width: 64px;
  height: 64px;
  background: #e8f5e9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.dz-thank-you__icon svg {
  width: 32px;
  height: 32px;
  color: #2e7d32;
}

.dz-thank-you h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dz-dark);
  margin: 0 0 .5rem;
}

.dz-thank-you p {
  font-size: .9375rem;
  color: #6b7280;
  margin: 0 auto;
  max-width: 320px;
  line-height: 1.5;
  text-align: center;
}

/* Remove scroll when thank-you / duplicate message is shown */
.dz-modal__body:has(.dz-thank-you) {
  overflow: hidden;
}




/* ═══════════════════════════════════════════════
   CHOICES.JS — Theme overrides
   ═══════════════════════════════════════════════ */

/* ===========================
   Choices.js - Dropdown polish (v2, specificity-hardened)
   =========================== */

.dz-cf7-form .choices {
  margin-bottom: 0;
}

/* The visible field */
.dz-cf7-form .choices .choices__inner {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 12px;
  min-height: 48px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  transition: border-color .18s ease, box-shadow .18s ease;
}

/* Single-select: keep placeholder vertically centered */
.dz-cf7-form .choices[data-type*="select-one"] .choices__inner {
  flex-wrap: nowrap;
}

.dz-cf7-form .choices[data-type*="select-one"] .choices__list--single {
  padding: 0;
  display: flex;
  align-items: center;
  height: 100%;
}

.dz-cf7-form .choices[data-type*="select-one"] .choices__item {
  font-size: 14px;
  line-height: 1;
}

.dz-cf7-form .choices[data-type*="select-one"] .choices__placeholder {
  color: var(--dz-form-placeholder-color);
  opacity: 1;
}

.dz-cf7-form .choices.is-focused .choices__inner,
.dz-cf7-form .choices.is-open .choices__inner {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

/* Dropdown panel */
.dz-cf7-form .choices .choices__list--dropdown {
  margin-top: 6px;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .18),
    0 4px 12px -4px rgba(15, 23, 42, .08);
  overflow: hidden;
  background: #fff;
  z-index: 50;
}

.dz-cf7-form .choices .choices__list--dropdown .choices__list {
  padding: 6px !important;
  max-height: 260px;
  overflow-y: auto;
}

/* Each option — reset Choices defaults */
.dz-cf7-form .choices .choices__list--dropdown .choices__item--choice {
  padding: 10px 14px 10px 42px !important;
  margin: 2px 0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #334155 !important;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  transition: background .15s ease, color .15s ease;
}

/* Faux checkbox */
.dz-cf7-form .choices .choices__list--dropdown .choices__item--choice::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 1.5px solid #cbd5e1;
  border-radius: 5px;
  background: #fff;
  transition: all .15s ease;
}

/* Hover / keyboard highlight */
.dz-cf7-form .choices .choices__list--dropdown .choices__item--choice.is-highlighted {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.dz-cf7-form .choices .choices__list--dropdown .choices__item--choice.is-highlighted::before {
  border-color: #2563eb;
}

/* Already-selected option (stays visible because closeDropdownOnSelect:false) */
.dz-cf7-form .choices .choices__list--dropdown .choices__item--choice.is-selected {
  background: #eff6ff !important;
  color: #1e3a8a !important;
  font-weight: 600;
}

.dz-cf7-form .choices .choices__list--dropdown .choices__item--choice.is-selected::before {
  background: #2563eb;
  border-color: #2563eb;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3.5 8l3 3 6-7' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

/* Disabled (max reached) */
.dz-cf7-form .choices .choices__list--dropdown .choices__item--choice.is-disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Selected chips in the field */
.dz-cf7-form .choices .choices__list--multiple .choices__item {
  background: #eff6ff !important;
  color: #1e3a8a !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 999px !important;
  padding: 4px 10px 4px 12px !important;
  font-size: 13px;
  font-weight: 500;
  margin: 2px 4px 2px 0;
}

.dz-cf7-form .choices .choices__list--multiple .choices__item .choices__button {
  border-left: 1px solid #bfdbfe;
  margin-left: 8px;
  padding-left: 10px;
  opacity: .6;
}

.dz-cf7-form .choices .choices__list--multiple .choices__item .choices__button:hover {
  opacity: 1;
}

/* Placeholder / input */
.dz-cf7-form .choices__input,
.dz-cf7-form .choices__placeholder {
  background: transparent !important;
  color: var(--dz-form-placeholder-color);
  font-size: 14px;
}

/* Scrollbar */
.dz-cf7-form .choices__list--dropdown .choices__list::-webkit-scrollbar {
  width: 6px;
}

.dz-cf7-form .choices__list--dropdown .choices__list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

/* When max selections are reached */
.dz-cf7-form .choices.is-max-reached .choices__list--dropdown,
.dz-cf7-form .choices.is-max-reached .choices__list[aria-expanded] {
  display: none !important;
}

.dz-cf7-form .choices.is-max-reached .choices__input {
  display: none !important;
}

.dz-cf7-form .choices.is-max-reached .choices__inner {
  cursor: default;
}

.dz-cf7-form .choices.is-max-reached.is-focused .choices__inner {
  border-color: #bfdbfe;
  box-shadow: none;
}

/* Single-select arrow */
.dz-cf7-form .choices[data-type*="select-one"]::after {
  border-color: #6b7280 transparent transparent;
  right: 14px;
  margin-top: -3px;
}

/* Single-select: no faux checkbox */
.dz-cf7-form .choices[data-type*="select-one"] .choices__list--dropdown .choices__item--choice {
  padding-left: 14px !important;
}

.dz-cf7-form .choices[data-type*="select-one"] .choices__list--dropdown .choices__item--choice::before {
  display: none;
}


/* ═══════════════════════════════════════════════
   FLATPICKR — Theme overrides
   ═══════════════════════════════════════════════ */

.dz-cf7-form .flatpickr-input,
.dz-modal__body .flatpickr-input,
.contact-form-card .flatpickr-input {
  cursor: pointer;
}

.flatpickr-calendar {
  border-radius: 10px;
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, .12);
  border: 1px solid #d9dee7;
  font-family: 'Inter', sans-serif;
}

.flatpickr-months .flatpickr-month {
  height: 40px;
}

.flatpickr-current-month {
  font-size: 14px;
  font-weight: 600;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: #1e73e8;
  border-color: #1e73e8;
}

.flatpickr-day.today {
  border-color: #1e73e8;
}

.flatpickr-day.today:hover {
  background: #eef4fd;
  color: #1e73e8;
  border-color: #1e73e8;
}

.flatpickr-day:hover {
  background: #eef4fd;
  border-color: #eef4fd;
}

/* Year & month selects inside flatpickr header */
.flatpickr-current-month select,
.flatpickr-current-month .numInputWrapper input {
  font-size: 14px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
}

.flatpickr-current-month .numInputWrapper {
  width: 70px;
}

.flatpickr-current-month .numInputWrapper input {
  padding: 0;
}

.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown {
  opacity: 1;
  width: 20px;
  right: 0;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:hover,
.flatpickr-current-month .numInputWrapper span.arrowDown:hover {
  background: #eef4fd;
}


/* ═══════════════════════════════════════════════
   CONTACT PAGE — #dz-contact
   ═══════════════════════════════════════════════ */

/* Reveal */
#dz-contact .cr {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .5s ease, transform .5s ease;
}

#dz-contact .cr.on {
  opacity: 1;
  transform: none;
}

#dz-contact .crl {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .6s ease, transform .6s ease;
}

#dz-contact .crr {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity .6s ease, transform .6s ease;
}

#dz-contact .crl.on,
#dz-contact .crr.on {
  opacity: 1;
  transform: none;
}

#dz-contact .cd1 {
  transition-delay: .1s
}

#dz-contact .cd2 {
  transition-delay: .2s
}

#dz-contact .cd3 {
  transition-delay: .3s
}

/* Hero */
#dz-contact .contact-hero {
  position: relative;
  overflow: hidden;
  padding: 6rem 0 9rem;
  background: linear-gradient(135deg, var(--dz-blue) 0%, var(--dz-navy) 50%, var(--dz-blue) 100%);
  text-align: center;
}

#dz-contact .contact-hero__overlay {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: .3;
  pointer-events: none;
}

#dz-contact .contact-hero__dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .3;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDE2YzAtMi4yMSAxLjc5LTQgNC00czQgMS43OSA0IDQtMS43OSA0LTQgNC00LTEuNzktNC00em0wIDI0YzAtMi4yMSAxLjc5LTQgNC00czQgMS43OSA0IDQtMS43OSA0LTQgNC00LTEuNzktNC00eiIvPjwvZz48L2c+PC9zdmc+");
}

#dz-contact .contact-hero__inner {
  position: relative;
  z-index: 1;
}

#dz-contact .contact-hero__icon {
  color: var(--dz-teal);
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1.5rem;
  display: inline-block;
}

#dz-contact .contact-hero h1 {
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

#dz-contact .contact-hero h1 span {
  color: var(--dz-teal);
}

#dz-contact .contact-hero p {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, .9);
  max-width: 48rem;
  margin-inline: auto;
}

/* Content section (cards + form/map) */
#dz-contact .contact-content {
  position: relative;
  padding: 0 0 5rem;
  background: #fff;
  margin-top: -5rem;
  z-index: 2;
}

/* Info Cards */
#dz-contact .contact-info__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 5rem 0px !important;
}

#dz-contact .contact-ic {
  background: #fff;
  border: 2px solid #E5E7EB;
  border-radius: .75rem;
  padding: 2rem;
  text-align: center;
  transition: border-color .3s, box-shadow .3s;
}

#dz-contact .contact-ic:hover {
  border-color: var(--dz-blue);
  box-shadow: var(--dz-shadow-2xl);
}

#dz-contact .contact-ic__icon-wrap {
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  transition: transform .5s;
}

#dz-contact .contact-ic:hover .contact-ic__icon-wrap {
  transform: rotate(8deg) scale(1.1);
}

#dz-contact .contact-ic__icon-wrap svg {
  width: 2rem;
  height: 2rem;
  color: #fff;
}

#dz-contact .contact-ic__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dz-dark);
  margin-bottom: .75rem;
}

#dz-contact .contact-ic__value {
  font-size: 1rem;
  color: #4B5563;
  line-height: 1.5;
  text-decoration: none;
  transition: color .2s;
  display: block;
}

#dz-contact a.contact-ic__value:hover {
  color: var(--dz-blue);
}

/* Form + Map grid */
#dz-contact .contact-form-row__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 80rem;
  margin-inline: auto;
  align-items: stretch;
}

/* Form card */
#dz-contact .contact-form-card {
  background: #fff;
  border: 2px solid var(--dz-blue);
  border-radius: .75rem;
  box-shadow: var(--dz-shadow-xl);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

#dz-contact .contact-form-card h2 {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--dz-dark);
  margin-bottom: 1.5rem;
}

#dz-contact .contact-form-card h2 span {
  color: var(--dz-blue);
}

#dz-contact .contact-form-card .wpcf7-form,
#dz-contact .contact-form-card form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}

#dz-contact .contact-form-card input[type="text"],
#dz-contact .contact-form-card input[type="email"],
#dz-contact .contact-form-card input[type="tel"],
#dz-contact .contact-form-card select,
#dz-contact .contact-form-card textarea {
  width: 100%;
  padding: .625rem .75rem;
  background: #fff;
  border: 1px solid #D1D5DB;
  border-radius: .5rem;
  font-size: 1rem;
  color: var(--dz-dark);
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}

#dz-contact .contact-form-card input:focus,
#dz-contact .contact-form-card textarea:focus,
#dz-contact .contact-form-card select:focus {
  border-color: var(--dz-blue);
  box-shadow: 0 0 0 3px rgba(30, 136, 229, .15);
}

#dz-contact .contact-form-card input::placeholder,
#dz-contact .contact-form-card textarea::placeholder {
  color: #9CA3AF;
}

#dz-contact .contact-form-card textarea {
  min-height: 9.375rem;
  resize: none;
  flex: 1;
}

#dz-contact .contact-form-card input[type="submit"],
#dz-contact .contact-form-card button[type="submit"],
#dz-contact .contact-form-card .wpcf7-submit {
  width: 100%;
  padding: 0.5rem;
  background: linear-gradient(90deg, var(--dz-blue), var(--dz-navy));
  color: #fff;
  font-size: 1.125rem;
  font-weight: 500;
  font-family: inherit;
  border: none;
  border-radius: .75rem;
  cursor: pointer;
  box-shadow: 0 10px 15px -3px rgba(30, 136, 229, .35), 0 4px 6px -4px rgba(30, 136, 229, .2);
  transition: all .3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

#dz-contact .contact-form-card input[type="submit"]:hover,
#dz-contact .contact-form-card button[type="submit"]:hover,
#dz-contact .contact-form-card .wpcf7-submit:hover {
  background: linear-gradient(90deg, var(--dz-navy), var(--dz-blue));
  transform: scale(1.05);
  box-shadow: 0 20px 25px -5px rgba(30, 136, 229, .4), 0 8px 10px -6px rgba(30, 136, 229, .2);
}

#dz-contact .contact-form-card .wpcf7-not-valid-tip {
  font-size: .8125rem;
  color: #d4183d;
}

#dz-contact .contact-form-card .wpcf7-response-output {
  font-size: .875rem;
  padding: .5rem;
  border-radius: .5rem;
}

/* Map card */
#dz-contact .contact-map-card {
  background: #fff;
  border: 2px solid var(--dz-teal);
  border-radius: .75rem;
  box-shadow: var(--dz-shadow-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

#dz-contact .contact-map-card__heading {
  padding: 1.5rem 1.5rem .5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dz-dark);
}

#dz-contact .contact-map-card iframe {
  width: 100%;
  flex: 1;
  border: 0;
  display: block;
  border-radius: .75rem;
  min-height: 600px;
}

#dz-contact .contact-map-fallback {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: #F3F4F6;
  padding: 2rem;
  text-align: center;
}

#dz-contact .contact-map-fallback svg {
  width: 3rem;
  height: 3rem;
  color: #9CA3AF;
}

#dz-contact .contact-map-fallback p {
  color: var(--dz-gray);
  font-size: .9375rem;
}

#dz-contact .contact-map-fallback a {
  display: inline-block;
  padding: .625rem 1.5rem;
  background: var(--dz-grad-btn);
  color: #fff;
  border-radius: .625rem;
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .2s;
}

#dz-contact .contact-map-fallback a:hover {
  opacity: .9;
}

/* Emergency CTA */
#dz-contact .contact-ecta {
  padding: 5rem 0;
  background: var(--dz-grad);
  text-align: center;
}

#dz-contact .contact-ecta__icon {
  width: 3rem;
  height: 3rem;
  color: #fff;
  margin: 0 auto 1rem;
}

#dz-contact .contact-ecta h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .5rem;
}

#dz-contact .contact-ecta p {
  font-size: 1rem;
  color: rgba(255, 255, 255, .9);
  margin-bottom: 1rem;
}

#dz-contact .contact-ecta__btn {
  display: inline-block;
  padding: .75rem 2rem;
  background: #fff;
  border-radius: .75rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dz-blue);
  text-decoration: none;
  box-shadow: var(--dz-shadow-2xl);
  transition: all .3s ease;
}

#dz-contact .contact-ecta__btn:hover {
  transform: scale(1.05);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .35);
}


/* ═══════════════════════════════════════════════
   GOALS PAGE — #dz-goals
   ═══════════════════════════════════════════════ */

/* Reveal */
#dz-goals .gr {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .5s ease, transform .5s ease;
}

#dz-goals .gr.on {
  opacity: 1;
  transform: none;
}

#dz-goals .grl {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .6s ease, transform .6s ease;
}

#dz-goals .grr {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity .6s ease, transform .6s ease;
}

#dz-goals .grl.on,
#dz-goals .grr.on {
  opacity: 1;
  transform: none;
}

#dz-goals .gd1 {
  transition-delay: .1s
}

#dz-goals .gd2 {
  transition-delay: .2s
}

#dz-goals .gd3 {
  transition-delay: .3s
}

#dz-goals .gd4 {
  transition-delay: .4s
}

/* Section header */
#dz-goals .goals-sh {
  text-align: center;
  margin-bottom: 3rem;
}

#dz-goals .goals-sh h2 {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--dz-dark);
  line-height: 1.2;
  margin-bottom: .75rem;
}

#dz-goals .goals-sh h2 .g-hl {
  color: var(--dz-blue);
}

#dz-goals .goals-sh h2 .g-hl-teal {
  color: var(--dz-teal);
}

#dz-goals .goals-sh p {
  font-size: 1.125rem;
  color: var(--dz-gray);
  max-width: 42ch;
  margin-inline: auto;
}

/* Hero */
#dz-goals .goals-hero {
  position: relative;
  overflow: hidden;
  padding: 6rem 0 9rem;
  background: linear-gradient(135deg, var(--dz-blue) 0%, var(--dz-navy) 50%, var(--dz-blue) 100%);
  text-align: center;
}

#dz-goals .goals-hero__overlay {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: .3;
  pointer-events: none;
}

#dz-goals .goals-hero__dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .3;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDE2YzAtMi4yMSAxLjc5LTQgNC00czQgMS43OSA0IDQtMS43OSA0LTQgNC00LTEuNzktNC00em0wIDI0YzAtMi4yMSAxLjc5LTQgNC00czQgMS43OSA0IDQtMS43OSA0LTQgNC00LTEuNzktNC00eiIvPjwvZz48L2c+PC9zdmc+");
}

#dz-goals .goals-hero__inner {
  position: relative;
  z-index: 1;
}

#dz-goals .goals-hero__icon {
  color: var(--dz-teal);
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1.5rem;
}

#dz-goals .goals-hero h1 {
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

#dz-goals .goals-hero h1 span {
  color: var(--dz-teal);
}

#dz-goals .goals-hero p {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, .9);
  max-width: 52rem;
  margin-inline: auto;
}

/* Vision & Mission */
#dz-goals .goals-vm {
  position: relative;
  background: #fff;
  padding: 5rem 0px;
  margin-top: -5rem;
  z-index: 2;
}

#dz-goals .goals-vm__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  /* max-width: 72rem; */
  margin-inline: auto;
}

#dz-goals .goals-vm-card {
  border-radius: .75rem;
  padding: 2rem;
  border: 2px solid;
  background: #fff;
  box-shadow: var(--dz-shadow-xl);
  transition: all .3s ease;
}

#dz-goals .goals-vm-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--dz-shadow-2xl);
}

#dz-goals .goals-vm-card__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

#dz-goals .goals-vm-card__icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#dz-goals .goals-vm-card__icon svg {
  width: 1.75rem;
  height: 1.75rem;
  color: #fff;
}

#dz-goals .goals-vm-card__head h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dz-dark);
}

#dz-goals .goals-vm-card p {
  font-size: 1rem;
  color: var(--dz-gray);
  line-height: 1.7;
}

/* Core Vision Goal */
#dz-goals .goals-cvg {
  padding: 5rem 0;
  background: #F9FAFB;
}

#dz-goals .goals-cvg__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  /* max-width: 72rem; */
  margin-inline: auto;
}

#dz-goals .goals-cvg__text h2 {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--dz-dark);
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

#dz-goals .goals-cvg__text h2 span {
  color: var(--dz-blue);
}

#dz-goals .goals-cvg__text p {
  font-size: 1.125rem;
  color: var(--dz-gray);
  line-height: 1.8;
}

#dz-goals .goals-cvg__img-wrap {
  position: relative;
}

#dz-goals .goals-cvg__img-wrap::before {
  content: '';
  position: absolute;
  inset: -1rem;
  border-radius: 1.5rem;
  background: linear-gradient(135deg, rgba(30, 136, 229, .15), rgba(0, 191, 166, .15));
  z-index: 0;
  filter: blur(20px);
}

#dz-goals .goals-cvg__img-wrap img {
  position: relative;
  z-index: 1;
  border-radius: 1rem;
  width: 100%;
  box-shadow: var(--dz-shadow-2xl);
}

/* UX Goals */
#dz-goals .goals-ux {
  padding: 5rem 0;
  background: #fff;
}

#dz-goals .goals-ux__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  /* max-width: 72rem; */
  margin-inline: auto;
}

#dz-goals .goals-ux-panel {
  border-radius: .75rem;
  overflow: hidden;
  border: 2px solid;
  background: #fff;
  box-shadow: var(--dz-shadow-xl);
  transition: all .3s ease;
}

#dz-goals .goals-ux-panel:hover {
  transform: translateY(-4px);
  box-shadow: var(--dz-shadow-2xl);
}

#dz-goals .goals-ux-panel__img {
  position: relative;
  height: 12rem;
  overflow: hidden;
}

#dz-goals .goals-ux-panel__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#dz-goals .goals-ux-panel__body {
  padding: 1.5rem;
}

#dz-goals .goals-ux-panel__title-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}

#dz-goals .goals-ux-panel__icon {
  width: 3rem;
  height: 3rem;
  border-radius: .875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#dz-goals .goals-ux-panel__icon svg {
  width: 1.5rem;
  height: 1.5rem;
  color: #fff;
}

#dz-goals .goals-ux-panel__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--dz-dark);
}

#dz-goals .goals-ux-panel__intro {
  font-size: .875rem;
  color: var(--dz-gray);
  margin-bottom: 1rem;
}

#dz-goals .goals-ux-panel__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

#dz-goals .goals-ux-panel__list li {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  font-size: .9375rem;
  color: #374151;
  line-height: 1.5;
}

#dz-goals .goals-ux-check {
  flex-shrink: 0;
  margin-top: .125rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

#dz-goals .goals-ux-check svg {
  width: 1.375rem;
  height: 1.375rem;
}

/* Strategic Goals */
#dz-goals .goals-sg {
  padding: 5rem 0;
  background: #F9FAFB;
}

#dz-goals .goals-sg__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  /* max-width: 72rem; */
  margin-inline: auto;
}

#dz-goals .goals-sg-card {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  height: 20rem;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1);
  transition: transform .3s ease, box-shadow .3s ease;
}

#dz-goals .goals-sg-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .4);
}

#dz-goals .goals-sg-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}

#dz-goals .goals-sg-card:hover .goals-sg-card__bg {
  transform: scale(1.08);
}

#dz-goals .goals-sg-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--sg-color) 0%, color-mix(in srgb, var(--sg-color) 80%, transparent) 50%, transparent 100%);
  opacity: .92;
}

#dz-goals .goals-sg-card__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
}

#dz-goals .goals-sg-card__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  background: rgba(255, 255, 255, .2);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: .625rem;
  padding: .375rem .875rem;
  font-size: .875rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .02em;
}

#dz-goals .goals-sg-card__icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: .75rem;
  background: #fff;
  border-radius: .75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
  display: flex;
  align-items: center;
  justify-content: center;
}

#dz-goals .goals-sg-card__icon svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--sg-color);
}

#dz-goals .goals-sg-card h4 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .375rem;
}

#dz-goals .goals-sg-card p {
  font-size: 1rem;
  color: rgba(255, 255, 255, .85);
  line-height: 1.6;
}

/* Business Model */
#dz-goals .goals-bm {
  padding: 5rem 0;
  background: #fff;
}

#dz-goals .goals-bm__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  /* max-width: 72rem; */
  margin-inline: auto;
}

#dz-goals .goals-bm-card {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  height: 22rem;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1);
  transition: transform .3s ease, box-shadow .3s ease;
}

#dz-goals .goals-bm-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .4);
}

#dz-goals .goals-bm-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}

#dz-goals .goals-bm-card:hover .goals-bm-card__bg {
  transform: scale(1.08);
}

#dz-goals .goals-bm-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--bm-color) 0%, color-mix(in srgb, var(--bm-color) 80%, transparent) 50%, transparent 100%);
  opacity: .92;
}

#dz-goals .goals-bm-card__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
}

#dz-goals .goals-bm-card__badge {
  position: static;
  display: inline-block;
  background: rgba(255, 255, 255, .2);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 2rem;
  padding: .25rem .75rem;
  font-size: .6875rem;
  font-weight: 600;
  color: #fff;
  margin-top: .625rem;
  width: fit-content;
}

#dz-goals .goals-bm-card__icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: .75rem;
  background: #fff;
  border-radius: .75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
  display: flex;
  align-items: center;
  justify-content: center;
}

#dz-goals .goals-bm-card__icon svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--bm-color);
}

#dz-goals .goals-bm-card h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .25rem;
}

#dz-goals .goals-bm-card p {
  font-size: .8125rem;
  color: rgba(255, 255, 255, .85);
  line-height: 1.6;
}

/* Powered by Innovation */
#dz-goals .goals-pbi {
  padding: 5rem 0;
  background: #F9FAFB;
}

#dz-goals .goals-pbi__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: stretch;
  margin-inline: auto;
}

#dz-goals .goals-pbi__img-wrap {
  position: relative;
  min-height: 20rem;
}

#dz-goals .goals-pbi__img-wrap::before {
  content: '';
  position: absolute;
  inset: -1rem;
  border-radius: 1.5rem;
  background: linear-gradient(135deg, rgba(0, 191, 166, .15), rgba(30, 136, 229, .15));
  z-index: 0;
  filter: blur(20px);
}

#dz-goals .goals-pbi__img-wrap img {
  position: relative;
  z-index: 1;
  border-radius: 1rem;
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: var(--dz-shadow-2xl);
}

#dz-goals .goals-pbi__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#dz-goals .goals-pbi__text h2 {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--dz-dark);
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

#dz-goals .goals-pbi__text h2 span {
  color: var(--dz-blue);
}

#dz-goals .goals-pbi__text>p {
  font-size: 1.125rem;
  color: var(--dz-gray);
  line-height: 1.8;
  margin-bottom: 2rem;
}

#dz-goals .goals-pbi__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

#dz-goals .goals-pbi-stat {
  border-radius: .75rem;
  padding: 1.5rem;
  color: #fff;
  text-align: center;
  transition: transform .3s ease;
}

#dz-goals .goals-pbi-stat:hover {
  transform: translateY(-4px);
}

#dz-goals .goals-pbi-stat strong {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: .25rem;
}

#dz-goals .goals-pbi-stat span {
  font-size: .875rem;
  opacity: .9;
}


/* ═══════════════════════════════════════════════
   ABOUT PAGE — #dz-about
   ═══════════════════════════════════════════════ */

/* Reveal */
#dz-about .ar {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .5s ease, transform .5s ease;
}

#dz-about .ar.on {
  opacity: 1;
  transform: none;
}

#dz-about .arl {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .6s ease, transform .6s ease;
}

#dz-about .arr {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity .6s ease, transform .6s ease;
}

#dz-about .arl.on,
#dz-about .arr.on {
  opacity: 1;
  transform: none;
}

#dz-about .ad1 {
  transition-delay: .1s
}

#dz-about .ad2 {
  transition-delay: .2s
}

#dz-about .ad3 {
  transition-delay: .3s
}

/* Section header */
#dz-about .about-sh {
  text-align: center;
  margin-bottom: 3rem;
}

#dz-about .about-sh h2 {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--dz-dark);
  line-height: 1.2;
  margin-bottom: .75rem;
}

#dz-about .about-sh h2 .a-hl {
  color: var(--dz-blue);
}

#dz-about .about-sh p {
  font-size: 1.125rem;
  color: var(--dz-gray);
  max-width: 48ch;
  margin-inline: auto;
}

/* Hero */
#dz-about .about-hero {
  position: relative;
  overflow: hidden;
  padding: 6rem 0 4rem;
  background: linear-gradient(135deg, var(--dz-blue) 0%, var(--dz-navy) 50%, var(--dz-blue) 100%);
  text-align: center;
}

#dz-about .about-hero__overlay {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: .3;
  pointer-events: none;
}

#dz-about .about-hero__dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .3;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDE2YzAtMi4yMSAxLjc5LTQgNC00czQgMS43OSA0IDQtMS43OSA0LTQgNC00LTEuNzktNC00em0wIDI0YzAtMi4yMSAxLjc5LTQgNC00czQgMS43OSA0IDQtMS43OSA0LTQgNC00LTEuNzktNC00eiIvPjwvZz48L2c+PC9zdmc+");
}

#dz-about .about-hero__inner {
  position: relative;
  z-index: 1;
}

#dz-about .about-hero__eyebrow {
  display: inline-block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--dz-teal);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: .75rem;
}

#dz-about .about-hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

#dz-about .about-hero h1 span {
  color: var(--dz-teal);
}

/* About Content */
#dz-about .about-content {
  padding: 5rem 0;
  background: #fff;
}

#dz-about .about-content__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  margin-inline: auto;
}

#dz-about .about-content__img {
  position: relative;
}

#dz-about .about-content__img img {
  border-radius: 1rem;
  width: 100%;
  box-shadow: var(--dz-shadow-2xl);
}

#dz-about .about-content__text {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

#dz-about .about-content__text p {
  font-size: 1rem;
  color: var(--dz-gray);
  line-height: 1.8;
}

#dz-about .about-content__rich {
  font-size: 1rem;
  color: var(--dz-gray);
  line-height: 1.8;
}

#dz-about .about-content__rich strong {
  color: var(--dz-blue);
  font-weight: 600;
}

/* Why Choose */
#dz-about .about-why {
  padding: 5rem 0;
  background: #F9FAFB;
}

#dz-about .about-why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  /* max-width: 72rem; */
  margin-inline: auto;
}

#dz-about .about-wc {
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid #E5E7EB;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);
  transition: all .3s ease;
}

#dz-about .about-wc:hover {
  transform: translateY(-4px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
  border-color: var(--dz-blue);
}

#dz-about .about-wc__img {
  position: relative;
  height: 15rem;
  overflow: hidden;
}

#dz-about .about-wc__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

#dz-about .about-wc:hover .about-wc__img img {
  transform: scale(1.08);
}

#dz-about .about-wc__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .4) 0%, transparent 60%);
}

#dz-about .about-wc__float-icon {
  position: absolute;
  bottom: 1rem;
  left: 1.25rem;
  z-index: 2;
  width: 3rem;
  height: 3rem;
  border-radius: .75rem;
  background: var(--dz-grad-icon);
  box-shadow: 0 4px 12px rgba(30, 136, 229, .3);
  display: flex;
  align-items: center;
  justify-content: center;
}

#dz-about .about-wc__float-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  color: #fff;
}

#dz-about .about-wc__body {
  padding: 2.25rem 1.25rem 1.5rem;
}

#dz-about .about-wc__body h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--dz-dark);
  margin-bottom: .25rem;
}

#dz-about .about-wc__sub {
  font-size: .8125rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

#dz-about .about-wc__list {
  display: flex;
  flex-direction: column;
  gap: .625rem;
}

#dz-about .about-wc__list li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .8125rem;
  color: #4B5563;
  line-height: 1.5;
}

#dz-about .about-wc__check {
  flex-shrink: 0;
  margin-top: .1875rem;
}

#dz-about .about-wc__check svg {
  width: .875rem;
  height: .875rem;
}

/* Stats & Contact */
#dz-about .about-stats {
  padding: 5rem 0;
  background: #fff;
}

#dz-about .about-stats__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  /* max-width: 72rem; */
  margin-inline: auto;
  align-items: stretch;
}

/* Stats card (left — blue with bg image) */
#dz-about .about-stats-card {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  min-height: 20rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--dz-shadow-xl);
}

#dz-about .about-stats-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}

#dz-about .about-stats-card:hover .about-stats-card__bg {
  transform: scale(1.05);
}

#dz-about .about-stats-card__overlay {
  position: absolute;
  inset: 0;
  /* background: linear-gradient(to right, rgba(30, 136, 229, .95), rgba(13, 71, 161, .90)); */
}

#dz-about .about-stats-card__content {
  position: relative;
  z-index: 2;
  padding: 2.5rem 2rem;
}

#dz-about .about-stats-card__hero {
  text-align: center;
  margin-bottom: 2rem;
  display: flex;
  gap: 1rem;
  align-items: center;
}

#dz-about .about-stats-card__hero-icon {
  width: 4rem;
  height: 4rem;
  background: rgba(255, 255, 255, .2);
  backdrop-filter: blur(4px);
  border: 2px solid rgba(255, 255, 255, .4);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /* margin: 0 auto 1.25rem; */
}

#dz-about .about-stats-card__hero-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  color: #fff;
}

#dz-about .about-stats-card__hero strong {
  display: block;
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

#dz-about .about-stats-card__hero span {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, .9);
}

.about-stats-card__hero-title {
  text-align: left;
}

#dz-about .about-stats-card__minis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}

#dz-about .about-mini-stat {
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: .75rem;
  padding: .75rem;
  text-align: center;
}

#dz-about .about-mini-stat strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .125rem;
}

#dz-about .about-mini-stat span {
  font-size: .75rem;
  color: rgba(255, 255, 255, .85);
}

/* Contact card (right — teal gradient) */
#dz-about .about-contact-card {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  background: linear-gradient(135deg, var(--dz-teal), var(--dz-blue));
  display: flex;
  align-items: center;
  /* justify-content: center; */
  min-height: 20rem;
  box-shadow: var(--dz-shadow-xl);
  padding: 2rem;
}

/* Decorative circles */
#dz-about .about-contact-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 10rem;
  height: 10rem;
  background: rgba(255, 255, 255, .1);
  border-radius: 50%;
  transform: translate(5rem, -5rem);
  pointer-events: none;
}

#dz-about .about-contact-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 8rem;
  height: 8rem;
  background: rgba(255, 255, 255, .1);
  border-radius: 50%;
  transform: translate(-4rem, 4rem);
  pointer-events: none;
}

#dz-about .about-contact-card__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
}

#dz-about .about-contact-card__icon-wrap {
  width: 4rem;
  height: 4rem;
  background: rgba(255, 255, 255, .2);
  backdrop-filter: blur(4px);
  border: 2px solid rgba(255, 255, 255, .4);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /* margin: 0 auto 1.25rem; */
}

.about-contact-card__icon-title {
  display: flex;
  gap: 1rem;
}

#dz-about .about-contact-card__icon-wrap svg {
  width: 1.5rem;
  height: 1.5rem;
  color: #fff;
}

/* Legacy icon (hidden if icon-wrap exists) */
#dz-about .about-contact-card__icon {
  display: none;
}

#dz-about .about-contact-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  /* margin-bottom: .5rem; */
}

#dz-about .about-contact-card__sub {
  font-size: 1rem;
  color: rgba(255, 255, 255, .9);
  margin-bottom: 1.5rem;
}

#dz-about .about-contact-card__phone {
  display: block;
  text-align: center;
  padding: 0.5rem 1.5rem;
  background: #fff;
  border-radius: 1rem;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--dz-blue);
  text-decoration: none;
  margin-bottom: 1rem;
  transition: all .3s ease;
}

#dz-about .about-contact-card__phone:hover {
  background: #F9FAFB;
  transform: scale(1.05);
}

#dz-about .about-contact-card__note {
  display: flex;
  /* align-items: center; */
  /* justify-content: center; */
  gap: .375rem;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .8);
}

/* CTA */
#dz-about .about-cta {
  padding: 5rem 0;
  background: #F9FAFB;
}

#dz-about .about-cta__inner {
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
}

#dz-about .about-cta__inner h2 {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--dz-dark);
  line-height: 1.2;
  margin-bottom: 1rem;
}

#dz-about .about-cta__inner h2 .a-hl {
  color: var(--dz-blue);
}

#dz-about .about-cta__sub {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--dz-blue);
  margin-bottom: .75rem;
}

#dz-about .about-cta__desc {
  font-size: 1rem;
  color: var(--dz-gray);
  margin-bottom: 2rem;
}

#dz-about .about-cta__btn {
  display: inline-block;
  padding: .875rem 2.5rem;
  background: var(--dz-grad-btn);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border-radius: .75rem;
  text-decoration: none;
  box-shadow: 0 10px 15px -3px rgba(30, 136, 229, .35);
  transition: all .3s ease;
}

#dz-about .about-cta__btn:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 25px -5px rgba(30, 136, 229, .4);
}

.wpcf7-not-valid-tip {
  font-size: 12px;
}

/* ═══════════════════════════════════════════════
   Legal Pages — Terms, Privacy, Data Protection
   Template: template-legal.php
   ═══════════════════════════════════════════════ */

#dz-legal {
  background: var(--dz-white);
  color: var(--dz-dark);
}

/* ── Hero ─────────────────────────────────── */
#dz-legal .legal-hero {
  position: relative;
  background: var(--dz-grad-btn);
  color: #fff;
  padding: 5.5rem 0 3.5rem;
  overflow: hidden;
  /* margin-top: 80px; */
}

#dz-legal .legal-hero__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  opacity: .55;
}

#dz-legal .legal-hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

#dz-legal .legal-hero__eyebrow {
  display: inline-block;
  padding: .35rem 1rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dz-teal);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

#dz-legal .legal-hero__title {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  color: #fff;
}

#dz-legal .legal-hero__meta {
  margin-top: 1rem;
  font-size: .9rem;
  color: rgba(255, 255, 255, .78);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.5rem;
}

/* ── Body ─────────────────────────────────── */
#dz-legal .legal-body {
  padding: 4rem 0 5rem;
}

#dz-legal .legal-article {
  background: #fff;
}

/* ── Intro ────────────────────────────────── */
#dz-legal .legal-intro {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--dz-text);
  margin-bottom: 2rem;
  background: #fff;
}

#dz-legal .legal-intro > *:last-child {
  margin-bottom: 0;
}

/* ── Section ──────────────────────────────── */
#dz-legal .legal-section {
  margin-bottom: 2.5rem;
  padding-top: .5rem;
  scroll-margin-top: 100px;
}

#dz-legal .legal-section + .legal-section {
  border-top: 1px solid var(--dz-border);
  padding-top: 2rem;
}

#dz-legal .legal-section__title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--dz-dark);
  margin: 0 0 1rem;
  display: flex;
  align-items: baseline;
  gap: .6rem;
}

#dz-legal .legal-section__num {
  color: var(--dz-blue);
  font-weight: 700;
  flex-shrink: 0;
}

#dz-legal .legal-section__text {
  flex: 1;
}

/* ── Prose typography (shared by intro + sections) ─── */
#dz-legal .legal-prose {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--dz-text);
}

#dz-legal .legal-prose p {
  margin: 0 0 1rem;
}

#dz-legal .legal-prose p:last-child {
  margin-bottom: 0;
}

/* Section heading inside prose (parser output: "1. Purpose") */
#dz-legal .legal-prose h2,
#dz-legal .legal-prose .legal-h2 {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--dz-dark);
  margin: 2.5rem 0 1rem;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
}

#dz-legal .legal-prose > h2:first-child,
#dz-legal .legal-prose > .legal-h2:first-child {
  margin-top: 0;
}

#dz-legal .legal-prose .legal-h2__num {
  color: var(--dz-blue);
  font-weight: 700;
  flex-shrink: 0;
}

/* Sub-heading inside prose (parser output: "4.1 Lawfulness") */
#dz-legal .legal-prose h3,
#dz-legal .legal-prose .legal-h3 {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--dz-navy);
  margin: 1.75rem 0 .65rem;
}

#dz-legal .legal-prose .legal-h3__num {
  color: var(--dz-teal);
  font-weight: 700;
  margin-right: .25rem;
}

#dz-legal .legal-prose h4 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--dz-dark);
  margin: 1.25rem 0 .5rem;
}

#dz-legal .legal-prose strong {
  color: var(--dz-dark);
  font-weight: 600;
}

#dz-legal .legal-prose a {
  color: var(--dz-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s ease;
}

#dz-legal .legal-prose a:hover {
  color: var(--dz-navy);
}

/* Lists — restore markers + indentation on legal pages */
#dz-legal .legal-prose ul,
#dz-legal .legal-prose .legal-list {
  list-style: disc;
  padding-left: 1.75rem;
  margin: 0 0 1rem;
}

#dz-legal .legal-prose ol {
  list-style: decimal;
  padding-left: 1.75rem;
  margin: 0 0 1rem;
}

#dz-legal .legal-prose li {
  /* margin-bottom: .5rem; */
  padding-left: .25rem;
}

#dz-legal .legal-prose li::marker {
  color: var(--dz-teal);
}

/* Nested lists — second level uses open circle ("o" style from Word) */
#dz-legal .legal-prose ul ul,
#dz-legal .legal-prose .legal-sublist {
  list-style: circle;
  margin: .5rem 0 .5rem;
  padding-left: 1.5rem;
}

#dz-legal .legal-prose ul ul li::marker,
#dz-legal .legal-prose .legal-sublist li::marker {
  color: var(--dz-blue);
}

#dz-legal .legal-prose ol ol,
#dz-legal .legal-prose ul ol,
#dz-legal .legal-prose ol ul {
  margin-top: .5rem;
  margin-bottom: .5rem;
}

#dz-legal .legal-prose blockquote {
  margin: 1rem 0;
  padding: .75rem 1.25rem;
  border-left: 3px solid var(--dz-blue);
  background: var(--dz-light);
  color: var(--dz-text);
  font-style: italic;
  border-radius: 0 var(--dz-radius) var(--dz-radius) 0;
}

#dz-legal .legal-prose hr {
  border: none;
  border-top: 1px solid var(--dz-border);
  margin: 1.5rem 0;
}

/* ═══════════════════════════════════════════════
   404 — Page Not Found
   ═══════════════════════════════════════════════ */

#dz-404 {
  background: var(--dz-white);
  color: var(--dz-dark);
}

/* ── Hero ─────────────────────────────────── */
#dz-404 .e404-hero {
  position: relative;
  background: var(--dz-grad-btn);
  color: #fff;
  padding: 6rem 0 5rem;
  /* margin-top: 80px; */
  overflow: hidden;
  text-align: center;
}

#dz-404 .e404-hero__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  opacity: .5;
}

#dz-404 .e404-hero__inner {
  position: relative;
  z-index: 1;
}

#dz-404 .e404-illustration {
  width: 120px;
  height: 120px;
  margin: 0 auto 1.5rem;
  animation: e404-float 3.5s ease-in-out infinite;
}

#dz-404 .e404-illustration svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes e404-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

#dz-404 .e404-number {
  font-size: clamp(5rem, 14vw, 10rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .45) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: .5rem;
}

#dz-404 .e404-eyebrow {
  display: inline-block;
  padding: .35rem 1rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dz-teal);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

#dz-404 .e404-title {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin: 0 auto 1rem;
  max-width: 38ch;
}

#dz-404 .e404-lead {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .82);
  margin: 0 auto 2rem;
  max-width: 52ch;
}

#dz-404 .e404-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}

#dz-404 .e404-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 999px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  line-height: 1;
}

#dz-404 .e404-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

#dz-404 .e404-btn--primary {
  background: #fff;
  color: var(--dz-navy);
  box-shadow: 0 10px 20px -6px rgba(0, 0, 0, .25);
}

#dz-404 .e404-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 24px -6px rgba(0, 0, 0, .32);
  color: var(--dz-blue);
}

#dz-404 .e404-btn--ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .6);
}

#dz-404 .e404-btn--ghost:hover {
  background: rgba(255, 255, 255, .12);
  border-color: #fff;
  transform: translateY(-2px);
}

/* ── Suggestions grid ─────────────────────── */
#dz-404 .e404-suggest {
  padding: 4rem 0 5rem;
  background: var(--dz-light);
}

#dz-404 .e404-suggest__title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dz-dark);
  margin: 0 0 2rem;
}

#dz-404 .e404-suggest__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

#dz-404 .e404-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.5rem 1.75rem;
  background: #fff;
  border-radius: var(--dz-radius-lg);
  box-shadow: var(--dz-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
  color: var(--dz-dark);
  overflow: hidden;
}

#dz-404 .e404-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--dz-grad);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .25s ease;
}

#dz-404 .e404-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--dz-shadow-lg);
}

#dz-404 .e404-card:hover::before {
  transform: scaleY(1);
}

#dz-404 .e404-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dz-dark);
}

#dz-404 .e404-card__desc {
  font-size: .9rem;
  color: var(--dz-text);
  line-height: 1.55;
}

#dz-404 .e404-card__arrow {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--dz-light);
  color: var(--dz-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

#dz-404 .e404-card__arrow svg {
  width: 14px;
  height: 14px;
}

#dz-404 .e404-card:hover .e404-card__arrow {
  background: var(--dz-blue);
  color: #fff;
  transform: translateX(3px);
}

#dz-home .dz-eco-socials {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  position: relative;
  z-index: 1;
}

#dz-home .dz-eco-socials__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dz-text);
  line-height: 1;
  transition: color .2s ease, opacity .2s ease;
}

#dz-home .dz-eco-socials__link:hover {
  color: var(--dz-dark);
  opacity: .9;
}

#dz-home .dz-eco-socials__link svg {
  width: 16px;
  height: 16px;
}


/* ═══════════════════════════════════════════════
   JOIN PAGE — #dz-join
   Template: template-join.php
   ═══════════════════════════════════════════════ */

#dz-join {
  background: var(--dz-white);
  color: var(--dz-dark);
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}

/* Buttons */
#dz-join .dz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 48px;
  padding: 0 2rem;
  border-radius: var(--dz-radius);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none !important;
  transition: all .3s ease;
  border: 2px solid transparent;
  white-space: nowrap;
  line-height: 24px;
}

#dz-join .dz-btn:hover {
  transform: scale(1.05);
}

#dz-join .dz-btn:active {
  transform: scale(0.95);
}

#dz-join .dz-btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

#dz-join .dz-btn-primary {
  background: linear-gradient(90deg, #1E88E5, #0D47A1) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--dz-shadow-lg);
}

#dz-join .dz-btn-primary:hover {
  background: linear-gradient(90deg, #0D47A1, #1E88E5) !important;
  box-shadow: 0 16px 40px rgba(30, 136, 229, .35), 0 6px 12px rgba(30, 136, 229, .2);
}

#dz-join .dz-btn-accent {
  background: linear-gradient(90deg, #0D47A1, #00BFA6) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--dz-shadow-md);
}

#dz-join .dz-btn-accent:hover {
  background: linear-gradient(90deg, #00BFA6, #0D47A1) !important;
  box-shadow: var(--dz-shadow-lg);
}

#dz-join .dz-btn-cta {
  background: linear-gradient(90deg, #1E88E5, #00BFA6) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--dz-shadow-lg);
}

#dz-join .dz-btn-cta:hover {
  background: linear-gradient(90deg, #0D47A1, #1E88E5) !important;
  box-shadow: 0 16px 40px rgba(13, 71, 161, .35), 0 6px 12px rgba(30, 136, 229, .2);
}

#dz-join .dz-btn-outline {
  background: var(--dz-white) !important;
  color: #1E88E5 !important;
  border: 2px solid #1E88E5 !important;
}

#dz-join .dz-btn-outline:hover {
  background: #1E88E5 !important;
  color: #fff !important;
}

#dz-join .dz-btn-white {
  background: #fff !important;
  color: #1E88E5 !important;
  box-shadow: var(--dz-shadow-lg);
}

#dz-join .dz-btn-white:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, .2);
}

#dz-join .dz-btn--card {
  width: 100%;
  font-size: 14px;
  line-height: 20px;
}

/* Join-only button themes */
#dz-join .join-btn-purple {
  background: linear-gradient(90deg, #8B5CF6, #6366F1) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--dz-shadow-md);
}

#dz-join .join-btn-purple:hover {
  background: linear-gradient(90deg, #6366F1, #8B5CF6) !important;
  box-shadow: var(--dz-shadow-lg);
}

#dz-join .join-btn-green {
  background: linear-gradient(90deg, #22C55E, #10B981) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--dz-shadow-md);
}

#dz-join .join-btn-green:hover {
  background: linear-gradient(90deg, #10B981, #22C55E) !important;
  box-shadow: var(--dz-shadow-lg);
}

#dz-join .join-btn-orange {
  background: linear-gradient(90deg, #F97316, #EF4444) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--dz-shadow-md);
}

#dz-join .join-btn-orange:hover {
  background: linear-gradient(90deg, #EF4444, #F97316) !important;
  box-shadow: var(--dz-shadow-lg);
}

/* Reveal */
#dz-join .jr {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .5s ease, transform .5s ease;
}

#dz-join .jr.on {
  opacity: 1;
  transform: none;
}

#dz-join .jrl {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .6s ease, transform .6s ease;
}

#dz-join .jrr {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity .6s ease, transform .6s ease;
}

#dz-join .jrl.on,
#dz-join .jrr.on {
  opacity: 1;
  transform: none;
}

#dz-join .jd1 { transition-delay: .1s; }
#dz-join .jd2 { transition-delay: .2s; }
#dz-join .jd3 { transition-delay: .3s; }
#dz-join .jd4 { transition-delay: .4s; }
#dz-join .jd5 { transition-delay: .5s; }

/* Gradient text */
#dz-join .dz-grad-text {
  background: linear-gradient(90deg, #1E88E5, #00BFA6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#dz-join .j-hl {
  color: var(--dz-blue);
}

/* Orbs */
#dz-join .dz-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(64px);
}

#dz-join .dz-orb--blue {
  background: rgba(30, 136, 229, .05);
  width: 288px;
  height: 288px;
  animation: dz-join-blob-left 8s ease-in-out infinite;
}

#dz-join .dz-orb--teal {
  background: rgba(0, 191, 166, .05);
  width: 486px;
  height: 486px;
  animation: dz-join-blob-right 10s ease-in-out infinite;
}

@keyframes dz-join-blob-left {
  0%, 100% { transform: scale(1); opacity: .3; }
  50% { transform: scale(1.2); opacity: .5; }
}

@keyframes dz-join-blob-right {
  0%, 100% { transform: scale(1); opacity: .3; }
  50% { transform: scale(1.3); opacity: .6; }
}

/* Shared */
#dz-join .join-section {
  padding: 5rem 0;
}

#dz-join .join-sh {
  text-align: center;
  margin-bottom: 3rem;
}

#dz-join .join-sh h2 {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--dz-dark);
  line-height: 1.2;
  margin-bottom: .75rem;
}

#dz-join .join-sh p {
  font-size: 1.125rem;
  color: var(--dz-gray);
  max-width: 48ch;
  margin-inline: auto;
}

/* Hero */
#dz-join .join-hero {
  position: relative;
  overflow: hidden;
  padding: 6rem 0 5rem;
  background: linear-gradient(145deg, #fff 0%, rgba(239, 246, 255, .3) 50%, #fff 100%);
  text-align: center;
}

#dz-join .join-hero__orb--left {
  top: 4rem;
  left: 2.5rem;
}

#dz-join .join-hero__orb--right {
  bottom: 3rem;
  right: 2.5rem;
}

#dz-join .join-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 56rem;
  margin-inline: auto;
}

#dz-join .join-hero__heading {
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  font-weight: 700;
  color: #1F2937;
  line-height: 1.12;
  margin-bottom: 1.5rem;
}

#dz-join .join-hero__desc {
  font-size: 1.25rem;
  color: #6B7280;
  line-height: 1.7;
  max-width: 44rem;
  margin: 0 auto 2rem;
}

#dz-join .join-hero__cta {
  display: flex;
  justify-content: center;
}

#dz-join .join-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#dz-join .join-btn__icon svg {
  width: 20px;
  height: 20px;
}

#dz-join .join-hero__cta .dz-btn {
  border-radius: 999px;
  box-shadow: var(--dz-shadow-lg);
}

/* Roles */
#dz-join .join-roles {
  padding-top: 1rem;
  background: #fff;
}

#dz-join .join-roles__featured-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  max-width: 1152px;
  margin-inline: auto;
}

#dz-join .join-roles__secondary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1152px;
  margin-inline: auto;
}

#dz-join .join-role-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 2px solid #E5E7EB;
  box-shadow: var(--dz-shadow-lg);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#dz-join .join-role-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 0;
}

#dz-join .join-role-card:hover {
  border-color: var(--join-accent, #1E88E5);
  box-shadow: var(--dz-shadow-2xl);
}

#dz-join .join-role-card:hover::before {
  opacity: 1;
}

#dz-join .join-role-card--featured {
  border-radius: 1.5rem;
  padding: 2rem;
}

#dz-join .join-role-card--featured:hover {
  transform: translateY(-8px);
}

#dz-join .join-role-card--secondary {
  border-radius: 1.25rem;
  padding: 1.5rem;
}

#dz-join .join-role-card--secondary:hover {
  transform: translateY(-4px);
}

#dz-join .join-role-card__header,
#dz-join .join-role-card h3,
#dz-join .join-role-card__desc,
#dz-join .join-role-card__list,
#dz-join .join-role-card .dz-btn {
  position: relative;
  z-index: 1;
}

#dz-join .join-role-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

#dz-join .join-role-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--dz-shadow-md);
  flex-shrink: 0;
  transition: transform .5s ease;
}

#dz-join .join-role-card:hover .join-role-card__icon {
  transform: rotate(-8deg);
}

#dz-join .join-role-card__icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

#dz-join .join-role-card__icon svg {
  width: 32px;
  height: 32px;
  color: #fff;
}

#dz-join .join-role-card__badge {
  font-size: 12px;
  font-weight: 500;
  padding: .25rem .75rem;
  border-radius: 999px;
  line-height: 1.2;
  background: var(--join-badge-bg, var(--dz-teal));
  color: var(--join-badge-color, #fff);
}

#dz-join .join-role-card__badge--muted {
  background: #E5E7EB;
  color: #364153;
}

#dz-join .join-role-card h3 {
  font-weight: 700;
  color: var(--dz-dark);
  margin-bottom: 1rem;
}

#dz-join .join-role-card--featured h3 {
  font-size: 1.5rem;
  line-height: 1.25;
}

#dz-join .join-role-card--secondary h3 {
  font-size: 1.25rem;
  line-height: 1.35;
}

#dz-join .join-role-card__desc {
  font-size: 1rem;
  color: #6B7280;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

#dz-join .join-role-card--secondary .join-role-card__desc {
  font-size: .875rem;
  line-height: 1.65;
}

#dz-join .join-role-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 1.5rem;
}

#dz-join .join-role-card__list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .95rem;
  color: #374151;
  line-height: 1.5;
}

#dz-join .join-role-card__check {
  flex-shrink: 0;
  margin-top: .125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#dz-join .join-role-card__check svg {
  width: 20px;
  height: 20px;
  color: var(--dz-teal);
}

#dz-join .join-role-card .dz-btn {
  min-height: 56px;
  border-radius: .75rem;
  margin-top: auto;
}

/* Role themes */
#dz-join .join-role-card--blue {
  --join-accent: #1E88E5;
  --join-badge-bg: #00BFA6;
}

#dz-join .join-role-card--blue::before {
  background: linear-gradient(135deg, rgba(30, 136, 229, .06), rgba(13, 71, 161, .02));
}

#dz-join .join-role-card--blue .join-role-card__icon {
  background: linear-gradient(135deg, #1E88E5, #0D47A1);
}

#dz-join .join-role-card--teal {
  --join-accent: #00BFA6;
  --join-badge-bg: #00BFA6;
}

#dz-join .join-role-card--teal::before {
  background: linear-gradient(135deg, rgba(13, 71, 161, .05), rgba(0, 191, 166, .05));
}

#dz-join .join-role-card--teal .join-role-card__icon {
  background: linear-gradient(135deg, #0D47A1, #00BFA6);
}

#dz-join .join-role-card--purple {
  --join-accent: #8B5CF6;
  --join-badge-bg: #E5E7EB;
  --join-badge-color: #364153;
}

#dz-join .join-role-card--purple::before {
  background: linear-gradient(135deg, rgba(139, 92, 246, .06), rgba(99, 102, 241, .03));
}

#dz-join .join-role-card--purple .join-role-card__icon {
  background: linear-gradient(135deg, #8B5CF6, #6366F1);
}

#dz-join .join-role-card--green {
  --join-accent: #22C55E;
  --join-badge-bg: #E5E7EB;
  --join-badge-color: #364153;
}

#dz-join .join-role-card--green::before {
  background: linear-gradient(135deg, rgba(34, 197, 94, .06), rgba(16, 185, 129, .03));
}

#dz-join .join-role-card--green .join-role-card__icon {
  background: linear-gradient(135deg, #22C55E, #10B981);
}

#dz-join .join-role-card--orange {
  --join-accent: #F97316;
  --join-badge-bg: #E5E7EB;
  --join-badge-color: #364153;
}

#dz-join .join-role-card--orange::before {
  background: linear-gradient(135deg, rgba(249, 115, 22, .06), rgba(239, 68, 68, .03));
}

#dz-join .join-role-card--orange .join-role-card__icon {
  background: linear-gradient(135deg, #F97316, #EF4444);
}

/* Ecosystem */
#dz-join .join-ecosystem {
  background: linear-gradient(180deg, #fff 0%, #F8FAFC 100%);
}

#dz-join .join-eco__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

#dz-join .join-eco-card {
  background: #fff;
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  border: 0;
  box-shadow: var(--dz-shadow-lg);
  transition: transform .3s ease, box-shadow .3s ease;
}

#dz-join .join-eco-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--dz-shadow-xl);
}

#dz-join .join-eco-card__icon {
  width: 56px;
  height: 56px;
  border-radius: .875rem;
  background: linear-gradient(135deg, #1E88E5, #00BFA6);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  box-shadow: var(--dz-shadow-md);
}

#dz-join .join-eco-card__icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

#dz-join .join-eco-card__icon svg {
  width: 24px;
  height: 24px;
  color: #fff;
}

#dz-join .join-eco-card h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--dz-dark);
  margin-bottom: .5rem;
}

#dz-join .join-eco-card p {
  font-size: .875rem;
  color: var(--dz-gray);
  line-height: 1.55;
}

/* How it works */
#dz-join .join-hiw {
  background: #fff;
}

#dz-join .join-hiw__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 80rem;
  margin-inline: auto;
}

#dz-join .join-hiw__step-wrap {
  position: relative;
}

#dz-join .join-hiw__step {
  background: #fff;
  border: 2px solid rgba(30, 136, 229, .15);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  box-shadow: var(--dz-shadow-md);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
  height: 100%;
}

#dz-join .join-hiw__step:hover {
  border-color: var(--dz-blue);
  box-shadow: var(--dz-shadow-lg);
  transform: translateY(-4px);
}

#dz-join .join-hiw__step-num {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1E88E5, #00BFA6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  box-shadow: var(--dz-shadow-lg);
  margin: 0 auto 1rem;
}

#dz-join .join-hiw__step h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--dz-dark);
  margin-bottom: .5rem;
  line-height: 1.4;
}

#dz-join .join-hiw__step p {
  font-size: 1rem;
  color: #6B7280;
  line-height: 1.6;
  max-width: 18.5rem;
  margin-inline: auto;
}

/* Help */
#dz-join .join-help {
  background: linear-gradient(180deg, #fff 0%, #F8FAFC 100%);
}

#dz-join .join-help__card {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
  background: #fff;
  border: 2px solid #00BFA6;
  border-radius: 1.5rem;
  padding: 2.5rem;
  box-shadow: var(--dz-shadow-xl);
  position: relative;
  overflow: hidden;
}

#dz-join .join-help__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 191, 166, .05), rgba(30, 136, 229, .05));
  pointer-events: none;
}

#dz-join .join-help__icon,
#dz-join .join-help__card h2,
#dz-join .join-help__card p,
#dz-join .join-help__actions {
  position: relative;
  z-index: 1;
}

#dz-join .join-help__icon {
  width: 48px;
  height: 48px;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  box-shadow: none;
}

#dz-join .join-help__icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

#dz-join .join-help__icon svg {
  width: 48px;
  height: 48px;
  color: #00BFA6;
}

#dz-join .join-help__card h2 {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--dz-dark);
  margin-bottom: 1rem;
  line-height: 1.2;
}

#dz-join .join-help__card p {
  font-size: 1.125rem;
  color: #6B7280;
  line-height: 1.7;
  max-width: 40rem;
  margin: 0 auto 1.75rem;
}

#dz-join .join-help__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* FAQ */
#dz-join .join-faq {
  background: #fff;
}

#dz-join .join-faq__list {
  max-width: 56rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#dz-join .join-faq__item {
  background: #fff;
  border: 2px solid #E5E7EB;
  border-radius: .75rem;
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}

#dz-join .join-faq__item:hover,
#dz-join .join-faq__item.is-open {
  border-color: var(--dz-blue);
  box-shadow: var(--dz-shadow-lg);
}

#dz-join .join-faq__button {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
}

#dz-join .join-faq__button span:first-child {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--dz-dark);
  line-height: 1.5;
}

#dz-join .join-faq__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--dz-blue);
  transition: transform .3s ease;
}

#dz-join .join-faq__icon svg {
  width: 20px;
  height: 20px;
}

#dz-join .join-faq__item.is-open .join-faq__icon {
  transform: rotate(180deg);
}

#dz-join .join-faq__content {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 1.5rem;
  transition: max-height .35s ease, opacity .25s ease, padding .35s ease;
}

#dz-join .join-faq__item.is-open .join-faq__content {
  opacity: 1;
  padding: 0 1.5rem 2rem;
}

#dz-join .join-faq__answer {
  font-size: 1rem;
  color: #6B7280;
  line-height: 1.7;
  padding-bottom: .5rem;
}

#dz-join .join-faq__answer p:last-child {
  margin-bottom: 0;
}

/* Final CTA */
#dz-join .join-final-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--dz-blue) 0%, var(--dz-navy) 50%, var(--dz-blue) 100%);
  text-align: center;
}

#dz-join .join-final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .3;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDE2YzAtMi4yMSAxLjc5LTQgNC00czQgMS43OSA0IDQtMS43OSA0LTQgNC00LTEuNzktNC00em0wIDI0YzAtMi4yMSAxLjc5LTQgNC00czQgMS43OSA0IDQtMS43OSA0LTQgNC00LTEuNzktNC00eiIvPjwvZz48L2c+PC9zdmc+");
}

#dz-join .join-final-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 56rem;
  margin-inline: auto;
}

#dz-join .join-final-cta h2 {
  font-size: clamp(2.25rem, 5vw, 3rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 1rem;
}

#dz-join .join-final-cta h2 span {
  color: var(--dz-teal);
}

#dz-join .join-final-cta p {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, .9);
  line-height: 1.7;
  max-width: 42rem;
  margin: 0 auto 2rem;
}

#dz-join .join-final-cta__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

#dz-join .join-final-cta__btns .dz-btn {
  min-height: 56px;
  border-radius: .75rem;
  padding-inline: 2rem;
  box-shadow: var(--dz-shadow-xl);
}

#dz-join .join-final-cta__btn--secondary {
  background: #00BFA6 !important;
  color: #fff !important;
  border: 0 !important;
}

#dz-join .join-final-cta__btn--secondary:hover {
  background: rgba(0, 191, 166, .9) !important;
}

#dz-join .join-final-cta__btn--outline {
  background: transparent !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .9) !important;
}

#dz-join .join-final-cta__btn--outline:hover {
  background: #fff !important;
  color: var(--dz-blue) !important;
}