/* =============================================================================
   JoinData — Homepage Polish Layer
   -----------------------------------------------------------------------------
   Loaded AFTER main.css so selectors here win without !important abuse.
   Targets the public landing page (super-admin/saas/home.blade.php) and its
   section partials (header, client, feature, testimonial, cta).

   Strategy:
     - Modernise typography (display hero, consistent rhythm)
     - Replace flat buttons with gradient / lifted buttons
     - Add subtle motion (hero blobs, hover lift)
     - Upgrade testimonials to proper cards
     - Tighten spacing on mobile
   ============================================================================= */

:root {
  /* Brand palette rebased to the JoinData logo cyan theme (matches joindataai.com). */
  --jd-primary: #0284c7;       /* sky-600 — primary link/button */
  --jd-primary-600: #0369a1;   /* sky-700 — hover/pressed */
  --jd-primary-800: #075985;   /* sky-800 — deepest accent */
  --jd-accent: #06b6d4;        /* cyan-500 */
  --jd-ink: #0c4a6e;           /* sky-900 — heading ink (reads on cyan backgrounds) */
  --jd-ink-2: #1e293b;         /* slate-800 — body ink */
  --jd-muted: #475569;         /* slate-600 */
  --jd-bg-soft: #f5f7fb;       /* matches --main-home-background fallback */
  --jd-border: #e5e7eb;

  --jd-shadow-sm: 0 4px 12px rgba(12, 74, 110, .06);
  --jd-shadow-md: 0 12px 28px rgba(12, 74, 110, .08);
  --jd-shadow-lg: 0 24px 60px rgba(12, 74, 110, .12);

  /* Hero sweep mirrors the existing saas-app.blade variables:
     --logo-blue-light #6DCBFF, --logo-blue-mid #edf0f5, --logo-blue-dark #8EE6FF */
  --jd-gradient-hero: linear-gradient(90deg, #6DCBFF 0%, #edf0f5 48%, #8EE6FF 100%);
  --jd-gradient-cta:  linear-gradient(135deg, #0284c7 0%, #0ea5e9 55%, #06b6d4 100%);
  --jd-gradient-text: linear-gradient(90deg,  #0c4a6e 0%, #0369a1 55%, #0284c7 100%);
}

html { scroll-behavior: smooth; }
::selection { background: rgba(2, 132, 199, .14); color: var(--jd-ink); }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--jd-ink-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6,
.banner-text, .sec-title, .feature-box, .navigation-bar {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* =========================================================================
   HERO — respect the existing logo cyan sweep from saas-app.blade.php:
   .section-hero .banner::after already applies var(--gradient-hero) which is
   the #6DCBFF → #edf0f5 → #8EE6FF left-to-right sweep. We do NOT redefine
   the ::after here. We add padding, ensure content sits above the pseudo,
   and vertically center the text column with the image on desktop.
   A faint dot-pattern overlay adds depth without fighting the cyan sweep.
   ========================================================================= */
.section-hero .banner {
  position: relative;
  padding: clamp(60px, 9vw, 120px) 0 clamp(56px, 8vw, 100px);
  min-height: clamp(420px, 60vh, 640px);
  display: flex;
  align-items: center;
  background-image: radial-gradient(rgba(12, 74, 110, .12) 1px, transparent 1px);
  background-size: 26px 26px;
  background-position: 0 0;
}
.section-hero .banner > * { position: relative; z-index: 2; }
.section-hero .banner .container { width: 100%; }

/* Small scroll hint at the very bottom of the banner (desktop only). */
@media (min-width: 992px) {
  .section-hero .banner::before {
    content: "";
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    border-right: 2px solid rgba(12, 74, 110, .35);
    border-bottom: 2px solid rgba(12, 74, 110, .35);
    transform-origin: center;
    transform: translateX(-50%) rotate(45deg);
    animation: jd-scroll-hint 2s ease-in-out infinite;
    pointer-events: none;
    opacity: .7;
    z-index: 1;
  }
  @keyframes jd-scroll-hint {
    0%, 100% { transform: translateX(-50%) rotate(45deg) translateY(0); opacity: .3; }
    50%      { transform: translateX(-50%) rotate(45deg) translateY(6px); opacity: .85; }
  }
}

/* Left column of hero: consistent rhythm, centered vertically with the image */
.section-hero .banner-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (max-width: 991.98px) {
  .section-hero .banner-text { align-items: center; }
}

/* Widen the gap between the intro text column and the hero image on desktop. */
@media (min-width: 992px) {
  .section-hero .banner .row > .col-lg-6:first-child  { padding-right: 3rem; }
  .section-hero .banner .row > .col-lg-6:last-child   { padding-left:  3rem; }
}
@media (min-width: 1200px) {
  .section-hero .banner .row > .col-lg-6:first-child  { padding-right: 4.5rem; }
  .section-hero .banner .row > .col-lg-6:last-child   { padding-left:  4.5rem; }
}

/* Title — smaller on desktop so "JoinData Commerce Insights" sits on one line
   inside the col-lg-6 width. Mobile keeps a slightly bigger relative size. */
.section-hero .banner-text h1,
.section-hero .banner-text h2,
.section-hero .banner-text h3 {
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: .85rem;
  color: var(--jd-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
  position: relative;
}
@media (min-width: 992px) {
  .section-hero .banner-text h1,
  .section-hero .banner-text h2,
  .section-hero .banner-text h3 {
    white-space: nowrap;   /* force single line on desktop */
  }
}

/* Small gradient accent bar right under the hero heading */
.section-hero .banner-text h1::after,
.section-hero .banner-text h2::after,
.section-hero .banner-text h3::after {
  content: "";
  display: block;
  width: 3rem;
  height: 4px;
  border-radius: 999px;
  background: var(--jd-gradient-cta);
  margin: .75rem 0 .25rem;
  box-shadow: 0 4px 10px rgba(2, 132, 199, .22);
}
@media (max-width: 991.98px) {
  .section-hero .banner-text h1::after,
  .section-hero .banner-text h2::after,
  .section-hero .banner-text h3::after {
    margin-left: auto;
    margin-right: auto;
  }
}

.section-hero .banner-text .ql-editor,
.section-hero .banner-text p {
  font-size: clamp(1.02rem, 1.2vw, 1.15rem);
  line-height: 1.7;
  color: #334155;          /* slate-700 — one shade deeper than --jd-muted for better contrast on the cyan sweep */
  max-width: 52ch;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}
.section-hero .banner-text .ql-editor { margin-top: .25rem; }
@media (max-width: 991.98px) {
  .section-hero .banner-text .ql-editor,
  .section-hero .banner-text p { margin-left: auto; margin-right: auto; }
}

/* Hero eyebrow — added inline via view edit */
.jd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--jd-primary);
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(2, 132, 199, .18);
  backdrop-filter: saturate(1.2) blur(6px);
  -webkit-backdrop-filter: saturate(1.2) blur(6px);
  padding: .4rem .85rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 12px rgba(2, 132, 199, .08);
}
.jd-eyebrow::before {
  content: "";
  width: .4rem; height: .4rem;
  border-radius: 50%;
  background: var(--jd-primary);
  box-shadow: 0 0 0 4px rgba(2, 132, 199, .18);
  animation: jd-eyebrow-pulse 2s ease-in-out infinite;
}
@keyframes jd-eyebrow-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(2, 132, 199, .18); }
  50%      { box-shadow: 0 0 0 7px rgba(2, 132, 199, .05); }
}

/* Trust microcopy row under CTA */
.jd-trust {
  display: inline-flex;
  gap: 1.25rem;
  margin-top: 1rem;
  color: var(--jd-muted);
  font-size: .85rem;
  flex-wrap: wrap;
}
.jd-trust i,
.jd-trust svg { color: #10b981; }

/* Hero image — unframed PNG, with a soft cyan radial glow behind it for depth
   and a floating LIVE chip at the top-right. */
.section-hero .banner-img {
  position: relative;
  overflow: visible !important;
  box-shadow: none !important;
  filter: none;
  transition: transform .35s ease;
}

/* Soft cyan glow behind the image. Blurred radial, extends past image bounds. */
.section-hero .banner-img::before {
  content: "";
  position: absolute;
  inset: -12% -10%;
  background: radial-gradient(ellipse at center,
      rgba(109, 203, 255, .45) 0%,
      rgba(109, 203, 255, .18) 35%,
      transparent 65%);
  filter: blur(30px);
  z-index: 0;
  pointer-events: none;
  opacity: .9;
  animation: jd-glow-drift 8s ease-in-out infinite;
}
@keyframes jd-glow-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-8px, 6px, 0) scale(1.04); }
}

/* Floating "LIVE" chip at top-right of the image */
.section-hero .banner-img::after {
  content: "LIVE DASHBOARD";
  position: absolute;
  top: -8px;
  right: -4px;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: #fff;
  color: var(--jd-primary);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .12em;
  box-shadow: 0 6px 18px rgba(2, 132, 199, .22);
  border: 1px solid rgba(2, 132, 199, .18);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  z-index: 3;
  animation: jd-live-breath 2.4s ease-in-out infinite;
}
@keyframes jd-live-breath {
  0%, 100% { box-shadow: 0 6px 18px rgba(2, 132, 199, .22); }
  50%      { box-shadow: 0 6px 22px rgba(2, 132, 199, .36); }
}
@media (max-width: 767.98px) {
  .section-hero .banner-img::after { right: 8px; top: -4px; font-size: .6rem; }
}

/* Floating stats pill at bottom-left of image — reinforces "dashboard" feel.
   Injected purely via CSS pseudo on a helper element added to banner-img
   wrapper via Blade (see header.blade.php .jd-stat-chip).
   Kept as plain selector so it works even without the wrapper. */
.jd-stat-chip {
  position: absolute;
  bottom: -14px;
  left: -10px;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .85rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(2, 132, 199, .14);
  box-shadow: 0 10px 24px rgba(12, 74, 110, .12);
  z-index: 3;
  font-size: .8rem;
  color: var(--jd-ink-2);
  font-weight: 600;
  animation: jd-stat-float 4.5s ease-in-out infinite;
}
.jd-stat-chip .jd-stat-chip__spark {
  display: inline-block;
  width: 26px; height: 14px;
  background:
    linear-gradient(90deg, transparent 0 3px, var(--jd-primary) 3px 4px, transparent 4px 6px,
                     var(--jd-primary) 6px 7px, transparent 7px 10px, var(--jd-primary) 10px 11px,
                     transparent 11px 14px, var(--jd-primary) 14px 15px, transparent 15px 18px,
                     var(--jd-primary) 18px 19px, transparent 19px 22px, var(--jd-primary) 22px 23px,
                     transparent 23px 26px) 0 100% / 100% 100% no-repeat,
    linear-gradient(to top, rgba(2, 132, 199, .12), transparent) 0 0 / 100% 100% no-repeat;
  border-radius: 3px;
}
.jd-stat-chip .jd-stat-chip__num {
  color: var(--jd-primary);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}
@keyframes jd-stat-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -4px, 0); }
}
@media (max-width: 767.98px) {
  .jd-stat-chip { bottom: 6px; left: 6px; font-size: .72rem; padding: .4rem .7rem; }
}

/* Staggered fade-up entrance for hero content on load. Respects reduced motion. */
@keyframes jd-fade-up {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.section-hero .banner-text > * {
  animation: jd-fade-up .7s cubic-bezier(.2, .7, .2, 1) both;
}
.section-hero .banner-text > .jd-eyebrow { animation-delay: 0s; }
.section-hero .banner-text > h1,
.section-hero .banner-text > h2,
.section-hero .banner-text > h3 { animation-delay: .08s; }
.section-hero .banner-text > .ql-editor,
.section-hero .banner-text > p { animation-delay: .16s; }
.section-hero .banner-text > .btn,
.section-hero .banner-text > a.btn-custom { animation-delay: .24s; }
.section-hero .banner-text > .jd-trust { animation-delay: .32s; }

/* Image gets a gentle rise + fade alongside the text */
.section-hero .banner-img img {
  animation: jd-fade-up .9s cubic-bezier(.2, .7, .2, 1) .1s both;
}

@media (prefers-reduced-motion: reduce) {
  .section-hero .banner-text > *,
  .section-hero .banner-img img,
  .section-hero .banner-img::before,
  .section-hero .banner-img::after,
  .jd-stat-chip,
  .jd-eyebrow::before {
    animation: none !important;
  }
}

.section-hero .banner-img img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0 !important;    /* overrides main.css .banner-img img { border-radius: 5px } */
  filter: none !important;        /* overrides main.css drop-shadow */
  -webkit-filter: none !important;
  -moz-filter: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.section-hero .banner-img:hover {
  transform: translate3d(0, -2px, 0);
}

/* =========================================================================
   BUTTONS — replace flat outlines with lifted gradient buttons
   ========================================================================= */
.btn-custom,
.btn.btn-custom,
.btn.btn-lg.btn-custom {
  background-image: var(--jd-gradient-cta);
  color: #fff !important;
  border: 0;
  border-radius: 999px;
  padding: .85rem 1.75rem;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 10px 24px rgba(2, 132, 199, .28);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-custom:hover,
.btn-custom:focus-visible {
  color: #fff !important;
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 16px 34px rgba(2, 132, 199, .34);
  filter: brightness(1.05);
}
.btn-custom:active { transform: translate3d(0, 0, 0); filter: brightness(.98); }

/* Any remaining "outline" CTA — turn into ghost with real hover */
.btn-outline,
.btn.btn-outline {
  background: transparent;
  color: var(--jd-primary) !important;
  border: 1px solid rgba(2, 132, 199, .3);
  border-radius: 999px;
  padding: .8rem 1.65rem;
  font-weight: 600;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-outline:hover,
.btn-outline:focus-visible {
  background: rgba(2, 132, 199, .08);
  border-color: rgba(2, 132, 199, .45);
}

/* Normalise focus rings across brand */
.btn:focus-visible,
a:focus-visible {
  outline: 2px solid rgba(2, 132, 199, .4);
  outline-offset: 2px;
}

/* =========================================================================
   CLIENT LOGOS — neutral band, full-color logos (matches the hero palette)
   ========================================================================= */
.clients {
  background: #f5f7fb !important;       /* matches the --main-home-background default in saas-app.blade */
  padding: clamp(50px, 6vw, 80px) 0 !important;
  border-top: 1px solid rgba(15, 23, 42, .04);
  border-bottom: 1px solid rgba(15, 23, 42, .04);
}
.clients .c-blue {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--jd-primary);
}
.clients h4 {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 600;
  color: var(--jd-ink);
}
/* Partner logos render in their real brand colors (no grayscale); only a subtle
   hover lift to hint interactivity. */
.clients .client-img .img-holder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}
.clients .client-img .img-holder img {
  filter: none;
  opacity: 1;
  transition: transform .25s ease;
}
.clients .client-img:hover .img-holder img {
  transform: scale(1.05);
}

/* =========================================================================
   FEATURES — alternating image + copy blocks
   ========================================================================= */
.saas-features { padding-top: clamp(50px, 6vw, 70px); padding-bottom: clamp(50px, 6vw, 70px); }
.saas-features .sp-100 { padding: clamp(40px, 5vw, 80px) 0 !important; }

.saas-features h3 {
  font-size: clamp(1.5rem, 3vw, 2.125rem) !important;
  font-weight: 700 !important;
  line-height: 1.2;
  color: var(--jd-ink);
  margin-bottom: 1rem;
  letter-spacing: -.01em;
}
.saas-features p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--jd-muted);
}

.saas-features .mock-img.mock-img--modern {
  box-shadow: var(--jd-shadow-md) !important;
  border: 1px solid var(--jd-border) !important;
  transition: transform .35s ease, box-shadow .35s ease;
}
.saas-features .mock-img.mock-img--modern:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: var(--jd-shadow-lg) !important;
}

/* Icon-grid features — card lift + gradient icon tile */
.features {
  background: var(--jd-bg-soft) !important;
  padding: clamp(60px, 7vw, 100px) 0 clamp(40px, 5vw, 70px) !important;
}
.features .sec-title h3 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem) !important;
  font-weight: 700 !important;
  color: var(--jd-ink);
  letter-spacing: -.01em;
  margin-bottom: .65rem;
}
.features .sec-title p {
  font-size: 1.02rem;
  color: var(--jd-muted);
  max-width: 640px;
  margin: 0 auto;
}
.features .feature-box {
  padding: 2rem 1.5rem !important;
  border-radius: 1rem !important;
  border: 1px solid var(--jd-border) !important;
  box-shadow: var(--jd-shadow-sm) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  height: 100%;
}
.features .feature-box:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: var(--jd-shadow-md) !important;
  border-color: rgba(2, 132, 199, .22) !important;
}
.features .feature-box .icon {
  width: 3.25rem !important;
  height: 3.25rem !important;
  border-radius: .85rem !important;
  background: linear-gradient(135deg, rgba(2, 132, 199, .12), rgba(14, 165, 233, .12)) !important;
  color: var(--jd-primary) !important;
  margin-bottom: 1.1rem !important;
  font-size: 1.35rem;
}
.features .feature-box h5 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--jd-ink);
  margin-bottom: .45rem;
}
.features .feature-box p {
  color: var(--jd-muted);
  font-size: .95rem;
  line-height: 1.55;
  margin-bottom: 0;
}

/* =========================================================================
   TESTIMONIALS — single spotlight card, cleanly centered.
   Rather than a cluttered peek/rail, we clip the slick-list and let the
   currently active card take the stage. Card width is capped so it doesn't
   stretch to the full 690px that slick assigns to each slide — instead it
   sits centered on a subtle tinted backdrop.
   ========================================================================= */
.section-testimonial {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  padding: clamp(60px, 7vw, 100px) 0 clamp(70px, 8vw, 110px) !important;
  overflow: hidden;
}
.section-testimonial .sec-title {
  margin-bottom: 2.5rem !important;
}
.section-testimonial .sec-title h3 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem) !important;
  font-weight: 700 !important;
  color: var(--jd-ink);
  letter-spacing: -.01em;
  margin: 0;
}

/* Multi-card rail — up to 3 tiles visible on desktop, 2 on tablet, 1 on mobile.
   Slides rotate together (autoplay), with soft gap + hover lift on each tile. */
.testimonial-slider {
  position: relative;
  margin: 0 auto !important;
  padding: 0 !important;
}
.testimonial-slider .slick-list {
  overflow: hidden !important;
  padding: 20px 0 !important;
  margin: 0 -12px !important;
}
.testimonial-slider .slick-track { display: flex; align-items: stretch; }
.testimonial-slider .slick-slide {
  height: auto;
  display: flex !important;
  padding: 0 12px;
  opacity: .55;
  transform: scale(.98);
  transition: opacity .5s ease, transform .5s ease;
}
.testimonial-slider .slick-slide > div { width: 100%; display: flex; }
.testimonial-slider .slick-slide.slick-active {
  opacity: 1;
  transform: scale(1);
}

/* Card — generous padding, clear type hierarchy, hover lift. */
.testimonial-slider .testimonial-item {
  position: relative;
  background: #fff;
  border: 1px solid var(--jd-border);
  border-radius: 1.25rem;
  padding: 2.5rem 1.75rem 1.75rem;
  box-shadow: var(--jd-shadow-sm);
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.testimonial-slider .testimonial-item:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: var(--jd-shadow-md);
  border-color: rgba(2, 132, 199, .22);
}

/* Decorative quote mark — top-left corner badge.
   Uses FontAwesome 5 free solid quote-left so the glyph is optically centered
   inside the circle (the Unicode "\201C" character sits high in its em box
   and looks off-centre even with flex/grid centering). */
.testimonial-slider .testimonial-item::before {
  content: "\f10d";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: -1.1rem;
  left: 1.5rem;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--jd-gradient-cta);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  box-shadow: 0 10px 22px rgba(2, 132, 199, .28);
}

/* Kill the legacy centered quote glyph injected by main.css:.testimonial-item::after
   (a big circled F1B2 from Material-Design-Iconic-Font). With our top-left badge
   already doing the decorative lift, the second icon reads as a bug. */
.testimonial-slider .testimonial-item::after,
.section-testimonial .testimonial-item::after {
  content: none !important;
  display: none !important;
}

.testimonial-slider .client-info {
  margin-top: .25rem;
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.testimonial-slider .client-info p {
  font-size: .98rem;
  line-height: 1.65;
  color: var(--jd-ink-2);
  margin: 0 0 1.25rem;
  flex: 1 1 auto;
}
.testimonial-slider .client-info h5 {
  font-size: .92rem;
  font-weight: 700;
  color: var(--jd-ink);
  margin: 0;
  text-transform: capitalize;
  letter-spacing: .02em;
}
.testimonial-slider .rating {
  font-size: 1rem;
  letter-spacing: 2px;
  margin-top: .4rem;
  text-align: left;
}
.testimonial-slider .rating i { display: inline-block; color: #f59e0b; }
.testimonial-slider .rating .zmdi-star-border { color: rgba(245, 158, 11, .28); }

/* Pill-style dot nav under the card */
.testimonial-slider .slick-dots {
  position: static !important;
  margin-top: 2rem;
  display: flex !important;
  justify-content: center;
  gap: .4rem;
  padding: 0;
  list-style: none;
}
.testimonial-slider .slick-dots li { width: auto; height: auto; margin: 0; }
.testimonial-slider .slick-dots li button {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 999px;
  background: rgba(2, 132, 199, .28);
  border: 0;
  transition: width .2s ease, background .2s ease;
  cursor: pointer;
}
.testimonial-slider .slick-dots li button::before { content: none; }
.testimonial-slider .slick-dots li.slick-active button {
  width: 26px;
  background: var(--jd-primary);
}

@media (max-width: 767.98px) {
  .testimonial-slider .slick-list { margin: 0 -8px !important; }
  .testimonial-slider .slick-slide { padding: 0 8px; }
  .testimonial-slider .testimonial-item {
    padding: 2rem 1.25rem 1.25rem;
    border-radius: 1rem;
  }
  .testimonial-slider .client-info p { font-size: .95rem; }
}

/* =========================================================================
   CTA SECTION — gradient card. Also balances correctly when the CTA button
   column is missing (e.g. registration disabled) by centering the single column.
   ========================================================================= */
.cta-section {
  padding: clamp(60px, 7vw, 90px) 0 !important;
  overflow: hidden;
}
.cta-section .container {
  background: var(--jd-gradient-cta);
  border-radius: 1.5rem;
  padding: clamp(2.25rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem);
  color: #fff;
  box-shadow: var(--jd-shadow-lg);
  position: relative;
  overflow: hidden;
  /* Faint mesh pattern overlay */
  background-image:
    radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
    var(--jd-gradient-cta);
  background-size: 22px 22px, auto;
  background-position: 0 0, 0 0;
}
/* Top-right soft glow */
.cta-section .container::before {
  content: "";
  position: absolute;
  top: -60%;
  right: -20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,.22), transparent 60%);
  pointer-events: none;
  animation: jd-cta-glow 9s ease-in-out infinite alternate;
}
/* Bottom-left counter-glow for balance */
.cta-section .container::after {
  content: "";
  position: absolute;
  bottom: -55%;
  left: -15%;
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 60%);
  pointer-events: none;
  animation: jd-cta-glow 11s ease-in-out infinite alternate-reverse;
}
@keyframes jd-cta-glow {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: .85; }
  100% { transform: translate3d(12px, -10px, 0) scale(1.08); opacity: 1; }
}

/* Keep content above the decorative layers */
.cta-section .container > .row { position: relative; z-index: 2; }

/* Floating 3D bubbles — layered radial gradients create a spherical look
   (main body + bright specular highlight + small glint). A wrapper animates
   the slow rise, while the inner bubble rotates and breathes for a living feel. */
.cta-section .jd-cta-bubbles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
  perspective: 900px;
}
.cta-section .jd-cta-bubble {
  position: absolute;
  display: block;
  border-radius: 50%;
  /* Three stacked radial gradients give the sphere its 3D look:
     1) a tiny white glint at top-left (strongest highlight),
     2) a softer top-left highlight for the light-side falloff,
     3) the main translucent body with a subtle rim shadow. */
  background:
    radial-gradient(circle at 26% 22%,
        rgba(255, 255, 255, .95) 0%,
        rgba(255, 255, 255, .55) 8%,
        rgba(255, 255, 255, 0) 14%),
    radial-gradient(circle at 32% 28%,
        rgba(255, 255, 255, .65) 0%,
        rgba(255, 255, 255, .22) 35%,
        rgba(255, 255, 255, 0) 55%),
    radial-gradient(circle at 70% 78%,
        rgba(2, 132, 199, .22) 0%,
        rgba(255, 255, 255, .1) 50%,
        rgba(255, 255, 255, 0) 75%);
  box-shadow:
    inset 0 -8px 18px rgba(2, 132, 199, .22),    /* darker bottom rim */
    inset 0 6px 14px rgba(255, 255, 255, .55),   /* bright top rim */
    0 6px 14px rgba(2, 132, 199, .18);           /* soft drop */
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  opacity: .9;
  transform-style: preserve-3d;
  animation: jd-cta-bubble-rise 14s linear infinite;
  will-change: transform, opacity;
}
/* Variable sway distance per-bubble — referenced by the rise keyframe. */
.cta-section .jd-cta-bubble { --sway: 22px; --wob: -8px; }

/* 16 bubbles spread across the container, with varied size, start position,
   speed and sway so the layer never feels uniform. */
.cta-section .jd-cta-bubble.b1  { width: 70px;  height: 70px;  left:  4%;  bottom: -90px;  animation-duration: 13s; animation-delay:  -1s; --sway:  26px; }
.cta-section .jd-cta-bubble.b2  { width: 20px;  height: 20px;  left: 10%;  bottom: -40px;  animation-duration: 17s; animation-delay:  -5s; opacity: .55; --sway: -14px; }
.cta-section .jd-cta-bubble.b3  { width: 96px;  height: 96px;  left: 17%;  bottom: -120px; animation-duration: 19s; animation-delay:  -9s; opacity: .6; --sway:  34px; }
.cta-section .jd-cta-bubble.b4  { width: 34px;  height: 34px;  left: 24%;  bottom: -60px;  animation-duration: 12s; animation-delay:  -3s; --sway: -18px; }
.cta-section .jd-cta-bubble.b5  { width: 54px;  height: 54px;  left: 31%;  bottom: -80px;  animation-duration: 15s; animation-delay: -11s; opacity: .75; --sway:  20px; }
.cta-section .jd-cta-bubble.b6  { width: 26px;  height: 26px;  left: 38%;  bottom: -50px;  animation-duration: 17s; animation-delay:  -2s; --sway: -24px; }
.cta-section .jd-cta-bubble.b7  { width: 82px;  height: 82px;  left: 46%;  bottom: -110px; animation-duration: 14s; animation-delay:  -7s; opacity: .55; --sway:  16px; }
.cta-section .jd-cta-bubble.b8  { width: 42px;  height: 42px;  left: 54%;  bottom: -70px;  animation-duration: 16s; animation-delay: -13s; --sway: -22px; }
.cta-section .jd-cta-bubble.b9  { width: 30px;  height: 30px;  left: 61%;  bottom: -55px;  animation-duration: 13s; animation-delay:  -6s; opacity: .65; --sway:  30px; }
.cta-section .jd-cta-bubble.b10 { width: 64px;  height: 64px;  left: 68%;  bottom: -95px;  animation-duration: 18s; animation-delay:  -4s; --sway: -28px; }
.cta-section .jd-cta-bubble.b11 { width: 18px;  height: 18px;  left: 74%;  bottom: -38px;  animation-duration: 11s; animation-delay: -10s; opacity: .5; --sway:  12px; }
.cta-section .jd-cta-bubble.b12 { width: 50px;  height: 50px;  left: 80%;  bottom: -75px;  animation-duration: 15s; animation-delay:  -8s; --sway: -20px; }
.cta-section .jd-cta-bubble.b13 { width: 72px;  height: 72px;  left: 86%;  bottom: -100px; animation-duration: 17s; animation-delay:  -2s; opacity: .6; --sway:  24px; }
.cta-section .jd-cta-bubble.b14 { width: 36px;  height: 36px;  left: 92%;  bottom: -58px;  animation-duration: 13s; animation-delay: -12s; --sway: -16px; }
.cta-section .jd-cta-bubble.b15 { width: 24px;  height: 24px;  left: 48%;  bottom: -42px;  animation-duration: 10s; animation-delay:  -3s; opacity: .55; --sway:  18px; }
.cta-section .jd-cta-bubble.b16 { width: 58px;  height: 58px;  left: 14%;  bottom: -85px;  animation-duration: 16s; animation-delay: -14s; opacity: .7; --sway: -26px; }

/* Combined rise: translate (S-curve sway + vertical climb) + subtle rotate +
   small scale pulse so the 3D sphere feels alive. All transform compositing
   happens in a single animation so the matrix never gets clobbered. */
@keyframes jd-cta-bubble-rise {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(.92);  opacity: 0; }
  8%   { opacity: 1; }
  25%  { transform: translate3d(calc(var(--sway) * .5), -30%, 0) rotate(6deg)  scale(1.04); }
  50%  { transform: translate3d(var(--sway),             -60%, 0) rotate(-4deg) scale(1.08); }
  75%  { transform: translate3d(calc(var(--sway) * .3), -90%, 0) rotate(3deg)  scale(1.02); }
  92%  { opacity: .35; }
  100% { transform: translate3d(var(--wob), -120%, 0) rotate(-2deg) scale(.9); opacity: 0; }
}

/* Respect the reduced-motion guard already defined for the hero. */
@media (prefers-reduced-motion: reduce) {
  .cta-section .jd-cta-bubble { animation: none !important; opacity: .5; }
}

/* Eyebrow tag above the CTA title — injected via ::before so the blade stays unchanged */
.cta-section h3 {
  color: #fff !important;
  font-size: clamp(1.5rem, 3vw, 2.125rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  margin-bottom: .75rem !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.12);
  position: relative;
}
.cta-section h3::before {
  content: "Ready when you are";
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: .35rem .8rem;
  border-radius: 999px;
  margin-bottom: 1rem;
  text-shadow: none;
  vertical-align: middle;
}
.cta-section p {
  color: rgba(255, 255, 255, .92) !important;
  font-size: 1.05rem;
  line-height: 1.65;
}

/* Meta row — small trust pills to replace whitespace when the signup button column
   is disabled. Renders after the paragraph via ::after on the first column. */
.cta-section .row > [class*="col-"]:first-child::after {
  content: "Free trial   •   No credit card   •   30-min setup";
  display: inline-block;
  margin-top: 1.25rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: pre;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
@media (max-width: 575.98px) {
  .cta-section .row > [class*="col-"]:first-child::after {
    font-size: .72rem;
    padding: .45rem .75rem;
  }
}
.cta-section .btn-custom,
.cta-section .btn.btn-custom,
.cta-section .btn.btn-lg.btn-custom {
  background: #ffffff !important;
  color: var(--jd-primary) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
}
.cta-section .btn-custom:hover {
  color: var(--jd-primary-600) !important;
  box-shadow: 0 18px 34px rgba(15, 23, 42, .25);
}

/* When register is disabled, the right CTA column is not rendered. Balance the
   remaining single column by centering + using the full width. */
.cta-section .container .row > [class*="col-"]:only-child {
  flex: 0 0 100%;
  max-width: 100%;
  margin-bottom: 0 !important;
  text-align: center;
  padding-right: 15px !important;
}
.cta-section .container .row > [class*="col-"]:only-child h3 {
  margin-bottom: 1rem !important;
}
.cta-section .container .row > [class*="col-"]:only-child p {
  margin: 0 auto !important;
  max-width: 640px;
  padding-right: 0 !important;
}

/* =========================================================================
   MOBILE RHYTHM
   ========================================================================= */
@media (max-width: 767.98px) {
  .section-hero .banner { padding: 56px 0 40px; }
  .section-hero .banner-text { text-align: center; }
  .section-hero .banner-text .ql-editor { text-align: center; }
  .section-hero .banner-img { margin-top: 2rem; }

  .jd-trust { justify-content: center; }
  .btn-custom, .btn-outline { width: 100%; text-align: center; }

  .features .feature-box { padding: 1.5rem 1.25rem !important; }
  .cta-section .container { padding: 2rem 1.5rem; }
}

/* =========================================================================
   Header / navbar — tighter, subtle translucency
   ========================================================================= */
.navigation-bar {
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
          backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--jd-border);
}
.navigation-bar .navbar-nav .nav-link {
  color: var(--jd-ink-2);
  font-weight: 500;
  padding-left: .9rem !important;
  padding-right: .9rem !important;
  transition: color .15s ease;
}
.navigation-bar .navbar-nav .nav-link:hover {
  color: var(--jd-primary);
}
.navigation-bar .btn-border {
  border-radius: 999px;
  padding: .55rem 1.25rem;
  font-weight: 600;
  /* Soft cyan boundary instead of the legacy #222 hard black border. */
  border: 1.5px solid rgba(2, 132, 199, .22) !important;
  color: var(--jd-primary-600, #0369a1) !important;
  background: rgba(255, 255, 255, .55) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.15);
          backdrop-filter: blur(6px) saturate(1.15);
  box-shadow: 0 2px 8px rgba(2, 132, 199, .06);
  transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.navigation-bar .btn-border:hover,
.navigation-bar .btn-border:focus-visible {
  border-color: rgba(2, 132, 199, .55) !important;
  background: #fff !important;
  color: var(--jd-primary-600, #0369a1) !important;
  box-shadow: 0 8px 18px rgba(2, 132, 199, .14);
  transform: translate3d(0, -1px, 0);
}
/* Kill the legacy ::after color flicker from main.css that briefly flashes a fill on hover. */
.navigation-bar .btn-border::after,
.navigation-bar .btn-border:hover::after { background-color: transparent !important; }
.navigation-bar .btn-menu-signup {
  border-radius: 999px;
  padding: .55rem 1.2rem;
  font-weight: 600;
  background: var(--jd-gradient-cta);
  color: #fff;
  border: 0;
  box-shadow: 0 8px 20px rgba(2, 132, 199, .22);
}
.navigation-bar .btn-menu-signup:hover {
  color: #fff;
  filter: brightness(1.05);
  transform: translate3d(0, -1px, 0);
}

/* =========================================================================
   "My Account" pill — shown in the navbar when the user is signed in.
   Replaces the legacy plain bordered button with a glassmorphic pill that
   mirrors the brand cyan and pairs the avatar + label + chevron in one
   focusable target.
   ========================================================================= */
.jd-account-pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .3rem .9rem .3rem .35rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .005em;
  color: var(--jd-ink, #0c4a6e);
  /* Solid fill: white → light-blue diagonal gradient, so the pill reads
     cleanly on any navbar background instead of relying on backdrop blur. */
  background:
    linear-gradient(135deg, #ffffff 0%, #f0f9ff 55%, #dbeafe 100%) padding-box,
    linear-gradient(135deg, #6dcbff 0%, #06b6d4 50%, #0284c7 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow:
    0 6px 16px rgba(2, 132, 199, .10),
    0 1px 3px rgba(2, 132, 199, .12),
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -8px 14px rgba(186, 230, 253, .35);
  text-decoration: none;
  transition: transform .2s cubic-bezier(.2,.7,.2,1),
              box-shadow .2s ease,
              background .2s ease;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
}
.jd-account-pill:hover,
.jd-account-pill:focus-visible {
  color: var(--jd-primary-600, #0369a1);
  background:
    linear-gradient(135deg, #ffffff 0%, #e0f2fe 55%, #bae6fd 100%) padding-box,
    linear-gradient(135deg, #0284c7 0%, #06b6d4 50%, #0ea5e9 100%) border-box;
  box-shadow:
    0 14px 28px rgba(2, 132, 199, .22),
    0 2px 6px rgba(2, 132, 199, .18),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -8px 14px rgba(186, 230, 253, .45);
  transform: translate3d(0, -1px, 0);
  text-decoration: none;
}
.jd-account-pill:active { transform: translate3d(0, 0, 0); }

.jd-account-pill__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: 0 0 30px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--jd-gradient-cta, linear-gradient(135deg, #0284c7, #06b6d4));
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  position: relative;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px rgba(2, 132, 199, .35),
    0 4px 10px rgba(2, 132, 199, .25);
}
.jd-account-pill__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.jd-account-pill__avatar--initial {
  /* fallback when no image — gradient bg + initial; nothing extra */
}
/* Tiny green online dot */
.jd-account-pill__avatar::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 9px;
  height: 9px;
  background: #10b981;
  border: 2px solid #fff;
  border-radius: 50%;
}

.jd-account-pill__label {
  line-height: 1;
  letter-spacing: .01em;
}
.jd-account-pill__chev {
  font-size: .65rem;
  color: var(--jd-primary, #0284c7);
  opacity: .55;
  transition: transform .18s ease, opacity .18s ease;
}
.jd-account-pill:hover .jd-account-pill__chev,
.jd-account-pill:focus-visible .jd-account-pill__chev {
  transform: translateX(2px);
  opacity: 1;
}

@media (max-width: 575.98px) {
  .jd-account-pill { padding: .25rem .7rem .25rem .3rem; font-size: .85rem; }
  .jd-account-pill__avatar { width: 26px; height: 26px; flex-basis: 26px; font-size: .75rem; }
}