/* ============================================================
   ALLTAGSBEGLEITUNG.SOFTWARE – Custom Redesign CSS
   UI/UX Überarbeitung: Klarheit, Vertrauen, Professionalität
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;600;700;800&display=swap');

/* ── CSS Custom Properties (Design Tokens) ────────────────── */
:root {
  /* Brand Colors */
  --ab-green:        #178d72;
  --ab-green-light:  #e8f7f3;
  --ab-green-dark:   #0e5e4c;
  --ab-teal:         #0c5263;
  --ab-teal-light:   #e6f0f3;
  --ab-accent:       #34c98a;
  --ab-accent-hover: #28a872;

  /* Neutral Colors */
  --ab-white:        #ffffff;
  --ab-off-white:    #f8fafb;
  --ab-gray-50:      #f1f5f9;
  --ab-gray-100:     #e2e8f0;
  --ab-gray-200:     #cbd5e1;
  --ab-gray-400:     #94a3b8;
  --ab-gray-600:     #475569;
  --ab-gray-700:     #334155;
  --ab-gray-900:     #0f172a;

  /* Typography */
  --ab-font-primary:   'Inter', 'IBM Plex Sans Arabic', sans-serif;
  --ab-font-heading:   'Poppins', 'IBM Plex Sans Arabic', sans-serif;

  /* Spacing */
  --ab-radius-sm:    6px;
  --ab-radius:       12px;
  --ab-radius-lg:    20px;
  --ab-radius-xl:    32px;
  --ab-radius-pill:  999px;

  /* Shadows */
  --ab-shadow-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --ab-shadow:       0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --ab-shadow-lg:    0 10px 40px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);
  --ab-shadow-green: 0 8px 32px rgba(23,141,114,.20);
}

/* ── Global Reset & Base ──────────────────────────────────── */
body {
  font-family: var(--ab-font-primary) !important;
  background-color: var(--ab-white) !important;
  color: var(--ab-gray-700) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Force light mode – remove dark theme */
body.uc-dark,
.uc-dark {
  background-color: var(--ab-white) !important;
  color: var(--ab-gray-700) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ab-font-heading) !important;
  color: var(--ab-gray-900) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

a {
  color: var(--ab-green) !important;
  transition: color .2s ease !important;
}
a:hover {
  color: var(--ab-green-dark) !important;
}

/* ── Navigation ───────────────────────────────────────────── */
.uc-navbar-container {
  background: rgba(255,255,255,.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--ab-gray-100) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}

.uc-navbar {
  color: var(--ab-gray-900) !important;
}

.uc-navbar-nav a,
.uc-navbar-nav li a {
  color: var(--ab-gray-700) !important;
  font-weight: 500 !important;
  font-size: .95rem !important;
  letter-spacing: -.01em;
  transition: color .2s ease !important;
  text-decoration: none !important;
}

.uc-navbar-nav a:hover,
.uc-navbar-nav li a:hover {
  color: var(--ab-green) !important;
}

/* Offcanvas Menu */
.uc-offcanvas-bar {
  background: var(--ab-white) !important;
  color: var(--ab-gray-900) !important;
}
.uc-offcanvas-bar a {
  color: var(--ab-gray-700) !important;
}

/* ── CTA Buttons ──────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, var(--ab-green) 0%, var(--ab-accent) 100%) !important;
  border: none !important;
  color: var(--ab-white) !important;
  font-weight: 600 !important;
  font-family: var(--ab-font-primary) !important;
  border-radius: var(--ab-radius-pill) !important;
  padding: .65rem 1.75rem !important;
  box-shadow: var(--ab-shadow-green) !important;
  transition: all .25s ease !important;
  letter-spacing: .01em;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--ab-green-dark) 0%, var(--ab-green) 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 40px rgba(23,141,114,.30) !important;
  color: var(--ab-white) !important;
}

/* Navbar Demo Button */
.uc-navbar-right .btn {
  background: linear-gradient(135deg, var(--ab-green) 0%, var(--ab-accent) 100%) !important;
  color: var(--ab-white) !important;
  border: none !important;
  font-weight: 600 !important;
  font-size: .875rem !important;
  letter-spacing: .04em;
  border-radius: var(--ab-radius-pill) !important;
  padding: .5rem 1.4rem !important;
  box-shadow: var(--ab-shadow-green) !important;
  transition: all .25s ease !important;
}
.uc-navbar-right .btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(23,141,114,.35) !important;
}

/* Ghost / Secondary Buttons */
.btn-ghost-primary {
  background: transparent !important;
  border: 2px solid var(--ab-green) !important;
  color: var(--ab-green) !important;
  font-weight: 600 !important;
  border-radius: var(--ab-radius-pill) !important;
  transition: all .25s ease !important;
}
.btn-ghost-primary:hover {
  background: var(--ab-green) !important;
  color: var(--ab-white) !important;
  transform: translateY(-2px) !important;
}

/* ── Hero Section ─────────────────────────────────────────── */
#hero_header {
  background: linear-gradient(160deg, var(--ab-off-white) 0%, var(--ab-green-light) 50%, var(--ab-teal-light) 100%) !important;
  position: relative;
  overflow: hidden;
}

#hero_header .section-outer {
  background: transparent !important;
}

/* Decorative circles – subtle green tones */
#hero_header .rounded-circle.border-dashed {
  border-color: rgba(23,141,114,.12) !important;
}

#hero_header .position-cover {
  background: linear-gradient(to bottom, rgba(248,250,251,.3), transparent, rgba(248,250,251,.5)) !important;
}

#hero_header .position-absolute.bg-secondary-300,
#hero_header .position-absolute.bg-white {
  background: rgba(52,201,138,.08) !important;
}

/* Hero Badge */
#hero_header .rounded-pill.bg-dark {
  background: linear-gradient(135deg, var(--ab-green) 0%, var(--ab-teal) 100%) !important;
  color: var(--ab-white) !important;
  font-weight: 600 !important;
  font-size: .8rem !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .4rem 1.2rem !important;
  border: none !important;
  box-shadow: var(--ab-shadow-green) !important;
}

/* Hero Headline */
#hero_header h1 {
  font-size: clamp(2.2rem, 5vw, 3.8rem) !important;
  font-weight: 800 !important;
  color: var(--ab-gray-900) !important;
  letter-spacing: -.03em !important;
  line-height: 1.1 !important;
}

#hero_header .text-tertiary,
#hero_header .text-primary {
  color: var(--ab-green) !important;
  background: linear-gradient(135deg, var(--ab-green) 0%, var(--ab-teal) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hero Subtext */
#hero_header p.fs-5,
#hero_header p.fs-4 {
  color: var(--ab-gray-600) !important;
  font-size: 1.1rem !important;
  line-height: 1.7 !important;
  max-width: 640px;
  margin: 0 auto !important;
}

#hero_header p a {
  color: var(--ab-green) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(23,141,114,.3) !important;
  text-underline-offset: 3px;
}

/* Hero Trust line */
#hero_header .desc {
  color: var(--ab-gray-600) !important;
  font-size: .9rem !important;
  font-style: italic;
}

/* Floating DSGVO Icons */
#hero_header .position-absolute.rounded-circle.border {
  background: var(--ab-white) !important;
  border-color: var(--ab-gray-100) !important;
  box-shadow: var(--ab-shadow) !important;
}

/* ── How It Works (Feature Icons) ─────────────────────────── */
#how_it_works {
  background: var(--ab-white) !important;
  padding: 3rem 0 !important;
}

#how_it_works .section-outer {
  background: transparent !important;
}

#how_it_works .vstack.border {
  background: var(--ab-white) !important;
  border: 1px solid var(--ab-gray-100) !important;
  border-radius: var(--ab-radius-lg) !important;
  padding: 1.75rem !important;
  box-shadow: var(--ab-shadow-sm) !important;
  transition: all .3s ease !important;
}

#how_it_works .vstack.border:hover {
  border-color: rgba(23,141,114,.3) !important;
  box-shadow: var(--ab-shadow-green) !important;
  transform: translateY(-4px) !important;
}

#how_it_works .icon.bg-primary {
  background: linear-gradient(135deg, var(--ab-green) 0%, var(--ab-accent) 100%) !important;
  border: none !important;
  border-radius: var(--ab-radius) !important;
  width: 52px !important;
  height: 52px !important;
  box-shadow: var(--ab-shadow-green) !important;
}

#how_it_works .fs-6.fw-bold {
  color: var(--ab-gray-900) !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

/* Dark mode overrides for how-it-works */
.uc-dark #how_it_works .vstack.border,
#how_it_works .dark\:bg-gradient-45 {
  background: var(--ab-white) !important;
  color: var(--ab-gray-900) !important;
}
.uc-dark #how_it_works .text-dark,
#how_it_works .dark\:text-white {
  color: var(--ab-gray-900) !important;
}

/* ── Brand Logos (Schnittstellen) ─────────────────────────── */
#companies_sponsores {
  background: var(--ab-gray-50) !important;
  border-radius: var(--ab-radius-xl) !important;
  margin: 0 1rem !important;
}

#companies_sponsores .section-outer {
  background: transparent !important;
}

#companies_sponsores p.fs-6 {
  color: var(--ab-gray-600) !important;
  font-weight: 500 !important;
  font-size: .9rem !important;
  text-transform: uppercase;
  letter-spacing: .08em;
}

#companies_sponsores img {
  opacity: .65 !important;
  filter: grayscale(30%) !important;
  transition: all .3s ease !important;
}

#companies_sponsores img:hover {
  opacity: 1 !important;
  filter: grayscale(0%) !important;
}

/* ── Main Features Section ────────────────────────────────── */
#main_features {
  background: var(--ab-gray-50) !important;
  border-radius: var(--ab-radius-xl) !important;
  margin: 0 .75rem !important;
  border: 1px solid var(--ab-gray-100) !important;
}

#main_features .section-outer {
  background: transparent !important;
}

/* Section Heading */
#main_features h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
  color: var(--ab-gray-900) !important;
  font-weight: 800 !important;
}

#main_features h2 .text-tertiary,
#main_features h2 .text-primary {
  color: var(--ab-green) !important;
  -webkit-text-fill-color: initial !important;
  background: none !important;
}

#main_features p.opacity-70 {
  color: var(--ab-gray-600) !important;
  opacity: 1 !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
}

/* Feature Cards */
#main_features .panel.vstack.lg\:hstack,
#main_features .panel.vstack.lg\:hstack.gap-2 {
  background: var(--ab-white) !important;
  border: 1px solid var(--ab-gray-100) !important;
  border-radius: var(--ab-radius-lg) !important;
  box-shadow: var(--ab-shadow-sm) !important;
  overflow: hidden !important;
  transition: all .3s ease !important;
  color: var(--ab-gray-900) !important;
}

#main_features .panel.vstack.lg\:hstack:hover {
  border-color: rgba(23,141,114,.25) !important;
  box-shadow: var(--ab-shadow-green) !important;
  transform: translateY(-3px) !important;
}

#main_features .panel.vstack.lg\:hstack h4 {
  color: var(--ab-gray-900) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
}

#main_features .panel.vstack.lg\:hstack p {
  color: var(--ab-gray-600) !important;
  opacity: 1 !important;
  font-size: .9rem !important;
  line-height: 1.6 !important;
}

#main_features .panel.vstack.lg\:hstack p a {
  color: var(--ab-green) !important;
  font-weight: 500 !important;
}

/* Feature card images */
#main_features img.rounded-1-5 {
  border-radius: var(--ab-radius) !important;
  border: 1px solid var(--ab-gray-100) !important;
}

/* Feature card CTA */
#main_features .btn.btn-sm.btn-primary {
  background: linear-gradient(135deg, var(--ab-green) 0%, var(--ab-accent) 100%) !important;
  border: none !important;
  color: var(--ab-white) !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  padding: .45rem 1rem !important;
  border-radius: var(--ab-radius-pill) !important;
  box-shadow: 0 4px 12px rgba(23,141,114,.2) !important;
}

/* ── Ratgeber Section ─────────────────────────────────────── */
#ratgeber_teaser {
  background: var(--ab-white) !important;
}

#ratgeber_teaser .section-outer {
  background: transparent !important;
}

#ratgeber_teaser h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
  color: var(--ab-gray-900) !important;
}

#ratgeber_teaser p.opacity-70 {
  color: var(--ab-gray-600) !important;
  opacity: 1 !important;
}

/* Ratgeber Cards */
#ratgeber_teaser .panel.vstack.gap-2.p-3 {
  background: var(--ab-white) !important;
  border: 1px solid var(--ab-gray-100) !important;
  border-radius: var(--ab-radius-lg) !important;
  box-shadow: var(--ab-shadow-sm) !important;
  transition: all .3s ease !important;
  padding: 1.5rem !important;
}

#ratgeber_teaser .panel.vstack.gap-2.p-3:hover {
  border-color: rgba(23,141,114,.25) !important;
  box-shadow: var(--ab-shadow) !important;
  transform: translateY(-3px) !important;
}

#ratgeber_teaser h3.h5 a {
  color: var(--ab-gray-900) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

#ratgeber_teaser h3.h5 a:hover {
  color: var(--ab-green) !important;
}

#ratgeber_teaser p.opacity-70 {
  color: var(--ab-gray-600) !important;
  font-size: .9rem !important;
}

#ratgeber_teaser ul.nav-y li a {
  color: var(--ab-green) !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s ease !important;
}

#ratgeber_teaser ul.nav-y li a:hover {
  color: var(--ab-green-dark) !important;
  text-decoration: underline !important;
}

/* ── FAQ Section ──────────────────────────────────────────── */
#faq {
  background: var(--ab-gray-50) !important;
  border-top: 1px solid var(--ab-gray-100) !important;
}

#faq .section-outer {
  background: transparent !important;
}

#faq h2 {
  color: var(--ab-gray-900) !important;
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
}

#faq .uc-accordion-title {
  color: var(--ab-gray-900) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  padding: 1rem 0 !important;
  display: block !important;
  border: none !important;
  background: none !important;
  transition: color .2s ease !important;
}

#faq .uc-accordion-title:hover {
  color: var(--ab-green) !important;
}

#faq .uc-accordion-content p {
  color: var(--ab-gray-600) !important;
  font-size: .95rem !important;
  line-height: 1.7 !important;
  opacity: 1 !important;
}

#faq .uc-accordion li {
  border-bottom: 1px solid var(--ab-gray-100) !important;
}

/* ── Footer ───────────────────────────────────────────────── */
#uc-footer {
  background: var(--ab-gray-900) !important;
  color: rgba(255,255,255,.8) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}

#uc-footer .footer-outer {
  background: linear-gradient(160deg, var(--ab-gray-900) 0%, var(--ab-teal) 100%) !important;
}

#uc-footer p,
#uc-footer a,
#uc-footer li {
  color: rgba(255,255,255,.75) !important;
}

#uc-footer a:hover {
  color: var(--ab-accent) !important;
}

#uc-footer h6,
#uc-footer .h6 {
  color: rgba(255,255,255,.4) !important;
  font-size: .7rem !important;
  letter-spacing: .1em;
  text-transform: uppercase;
}

#uc-footer .uc-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.5) !important;
}

#uc-footer .uc-footer-bottom p,
#uc-footer .uc-footer-bottom a {
  color: rgba(255,255,255,.5) !important;
  font-size: .85rem !important;
}

#uc-footer .uc-footer-bottom a:hover {
  color: var(--ab-accent) !important;
}

/* Footer Logo */
#uc-footer img[alt*="Logo"] {
  filter: brightness(0) invert(1) !important;
  opacity: .85 !important;
}

/* Footer description */
#uc-footer p.fw-medium {
  color: rgba(255,255,255,.65) !important;
  font-size: .9rem !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
}

/* Footer Hinweise */
#uc-footer .fs-7 {
  color: rgba(255,255,255,.4) !important;
  font-size: .78rem !important;
  line-height: 1.6 !important;
}

/* ── Sticky Header Adjustments ────────────────────────────── */
.uc-navbar-sticky .uc-navbar-container {
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,.08) !important;
}

/* ── Utility Overrides ────────────────────────────────────── */
/* Remove dark mode backgrounds globally */
.dark\:bg-tertiary-700,
.dark\:bg-gradient-45 {
  background: var(--ab-white) !important;
}

.dark\:text-white {
  color: var(--ab-gray-900) !important;
}

.dark\:border-white {
  border-color: var(--ab-gray-100) !important;
}

/* ── Responsive Adjustments ───────────────────────────────── */
@media (max-width: 768px) {
  #hero_header h1 {
    font-size: 2rem !important;
  }

  #hero_header p.fs-5 {
    font-size: 1rem !important;
  }

  #main_features {
    margin: 0 .5rem !important;
    border-radius: var(--ab-radius-lg) !important;
  }

  #companies_sponsores {
    margin: 0 .5rem !important;
    border-radius: var(--ab-radius-lg) !important;
  }

  .btn-primary {
    padding: .6rem 1.4rem !important;
    font-size: .9rem !important;
  }
}

/* ── Smooth Scroll ────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ── Section Padding Normalization ────────────────────────── */
.section-outer.py-6 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

.section-outer.py-8 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

.section-outer.py-10 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}

/* ── Animations ───────────────────────────────────────────── */
@keyframes ab-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

@keyframes ab-pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(23,141,114,.3); }
  50%       { box-shadow: 0 0 0 12px rgba(23,141,114,.0); }
}

/* ── Trust Badges / DSGVO Icons ───────────────────────────── */
.position-absolute.rounded-circle.border.cstack {
  background: var(--ab-white) !important;
  border-color: var(--ab-gray-100) !important;
  box-shadow: var(--ab-shadow) !important;
  animation: ab-float 4s ease-in-out infinite !important;
}

/* ── Pre-CTA Section ──────────────────────────────────────── */
.pre-cta {
  background: linear-gradient(135deg, var(--ab-green-light) 0%, var(--ab-teal-light) 100%) !important;
  border-radius: var(--ab-radius-xl) !important;
  padding: 3rem 2rem !important;
  border: 1px solid rgba(23,141,114,.15) !important;
  margin-top: 2rem !important;
}

/* ── Scrollbar Styling ────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--ab-gray-50);
}
::-webkit-scrollbar-thumb {
  background: var(--ab-gray-200);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ab-green);
}

/* ── Focus Styles (Accessibility) ────────────────────────── */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ab-green) !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
}

/* ── Section Dividers ─────────────────────────────────────── */
.border-top {
  border-top-color: var(--ab-gray-100) !important;
}

/* ── Overrides for bg-secondary and related ───────────────── */
.bg-secondary {
  background-color: var(--ab-gray-50) !important;
}

.bg-secondary-300 {
  background-color: var(--ab-white) !important;
}

/* ── Text Opacity Fixes ───────────────────────────────────── */
.opacity-70 {
  opacity: 1 !important;
  color: var(--ab-gray-600) !important;
}

/* ── Neue Hero-Statistiken Leiste ─────────────────────────── */
.ab-stats-bar {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  padding: 1.5rem 2rem;
  background: var(--ab-white);
  border-radius: var(--ab-radius-xl);
  border: 1px solid var(--ab-gray-100);
  box-shadow: var(--ab-shadow);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.ab-stats-bar .ab-stat {
  text-align: center;
}

.ab-stats-bar .ab-stat-number {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--ab-green);
  font-family: var(--ab-font-heading);
  line-height: 1;
}

.ab-stats-bar .ab-stat-label {
  display: block;
  font-size: .78rem;
  color: var(--ab-gray-600);
  font-weight: 500;
  margin-top: .25rem;
  letter-spacing: .02em;
}

/* ── Neue Feature-Highlights ──────────────────────────────── */
.ab-feature-highlight {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--ab-green-light);
  color: var(--ab-green-dark);
  font-size: .8rem;
  font-weight: 600;
  padding: .3rem .85rem;
  border-radius: var(--ab-radius-pill);
  border: 1px solid rgba(23,141,114,.2);
  margin-bottom: .75rem;
}

.ab-feature-highlight::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--ab-green);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Checkmark List ───────────────────────────────────────── */
.ab-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ab-check-list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .35rem 0;
  font-size: .9rem;
  color: var(--ab-gray-700);
}

.ab-check-list li::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--ab-green);
  color: white;
  border-radius: 50%;
  font-size: .65rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Neue Trust-Bar ───────────────────────────────────────── */
.ab-trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1rem 1.5rem;
  background: rgba(23,141,114,.06);
  border-radius: var(--ab-radius-lg);
  border: 1px solid rgba(23,141,114,.12);
  margin-top: 1.5rem;
}

.ab-trust-bar .ab-trust-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  color: var(--ab-gray-700);
  font-weight: 500;
}

.ab-trust-bar .ab-trust-item .ab-trust-icon {
  font-size: 1rem;
  color: var(--ab-green);
}