.page-home .section-label{color:#6B4500}
.page-home .section-subtitle{color:rgba(10,51,40,0.85)}
.page-home .clients-bar-label,.page-home .agg-bar-pct,.page-home .agg-platforms-label,.page-home .platform-chip{color:#475569}
.page-home .reviews-agg-row>p,.page-home .reviews-agg-row span:not(.agg-bar-fill):not(.platform-chip){color:#475569}
.page-home .review-date{color:#4B5563}
@keyframes shimmer{0%{transform:translateX(-200%)}100%{transform:translateX(200%)}}
.hamburger span::before{top:0;left:0;transform:translateX(-200%)}
@keyframes logo-shimmer{0%,100%{opacity:1}50%{opacity:.88}}
@keyframes kd-nav-border-shimmer{0%,100%{opacity:.5}50%{opacity:1}}
img[src*="clients/client-1.webp"],img[src*="clients/client-2.webp"],img[src*="clients/client-3.webp"]{display:none}
.blog-card{min-height:44px !important}
.btn-outline-gold,.btn-gold{min-height:44px !important;padding-top:.65rem !important;padding-bottom:.65rem !important}
.faq-question{min-height:44px !important;padding-top:.75rem !important;padding-bottom:.75rem !important}
.map-contact-list li{min-height:48px !important;display:flex !important;align-items:center !important}
.map-contact-list li a{display:block !important;padding:12px 0 !important;line-height:1.4 !important}
.hero-radial-vignette{position:absolute !important;inset:0 !important;pointer-events:none !important;contain:layout style !important;will-change:auto !important}
.section-nav{position:fixed!important;top:0!important;left:0!important;right:0!important;transform:translateY(-100%);transition:transform .3s ease;z-index:10001!important}
.section-nav.visible{transform:translateY(0)!important}
#backToTop{z-index:10000!important}
.kd-btt--visible{opacity:1!important;transform:translateY(0)!important;pointer-events:auto!important}
@media(max-width:767px){.section-nav-inner{padding:0 .75rem;gap:0}.snav-link{font-size:.7rem;padding:.55rem .5rem;white-space:nowrap}.section-nav{font-size:.7rem}}


/* ═══════════════════════════════════════════════════════════════════════════
   NAVBAR RESPONSIVE SYSTEM — full rewrite of mobile fixes
   Breakpoints:
     ≥ 1280px  — full desktop: nav links + all action buttons visible
     768–1279px — medium: hamburger + compact WhatsApp CTA only
     ≤ 767px   — mobile: hamburger + logo only (compact CTA hidden too)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base: hide compact CTA everywhere by default ─────────────────────────── */
/* (shown only by the 768–1279px media query below; this avoids any flash)    */
.nav-compact-cta { display: none; }

/* ── 1. Wide desktop (≥ 1280px): show everything ─────────────────────────── */
@media (min-width: 1280px) {
  .nav-center           { display: flex         !important; }
  .nav-brand            { display: inline-block !important; }
  .desktop-buttons      { display: flex         !important; align-items: center; }
  .hamburger            { display: none         !important; }
  .nav-compact-cta      { display: none         !important; }
  .mobile-login-buttons { display: none         !important; }
  .nav-logo             { height: 65px          !important; }
  .nav-container        { padding: 18px 6%      !important; }
}

/* ── 2. Medium screens (768px – 1279px): AI Mode | WhatsApp | Hamburger ───── */
@media (min-width: 768px) and (max-width: 1279px) {
  /* Hide desktop-only elements */
  .nav-center      { display: none !important; }
  .nav-brand       { display: none !important; }
  .desktop-buttons { display: none !important; }

  /* Compact nav container */
  .nav-container { padding: 10px 4% !important; }
  .nav-logo      { height: 48px     !important; }

  /* Compact CTA (AI Mode + WhatsApp) — sits left of hamburger via DOM order */
  .nav-compact-cta {
    display:     flex   !important;
    align-items: center !important;
    gap:         8px    !important;
    margin-left: auto   !important;   /* pushes the whole group to the right */
    margin-right: 10px  !important;
  }

  /* Hamburger stays at far right (last child in nav-right) */
  .hamburger {
    display:     flex !important;
    flex-shrink: 0    !important;
  }

  /* Mobile fullscreen menu */
  .mobile-menu {
    top:     0         !important;
    height:  100dvh    !important;
    padding: 72px 6% 40px !important;
  }

  /* Auth buttons inside mobile menu */
  .mobile-login-buttons {
    display:        flex    !important;
    flex-direction: column  !important;
    gap:            12px    !important;
    margin-top:     30px    !important;
    padding:        0 4px   !important;
  }
}

/* ── 3. Small mobile (≤ 767px): logo + hamburger only ────────────────────── */
@media (max-width: 767px) {
  .nav-center      { display: none !important; }
  .nav-brand       { display: none !important; }
  .desktop-buttons { display: none !important; }
  .nav-compact-cta { display: none !important; }
  .nav-logo        { height: 42px  !important; }
  .nav-container   { padding: 10px 5% !important; }
  .hamburger       { display: flex  !important; }

  .mobile-menu {
    top:     0         !important;
    height:  100dvh    !important;
    padding: 72px 6% 40px !important;
  }

  .mobile-login-buttons {
    display:        flex    !important;
    flex-direction: column  !important;
    gap:            12px    !important;
    margin-top:     30px    !important;
    padding:        0 4px   !important;
  }
}


/* ── Compact CTA button styles ────────────────────────────────────────────── */

/* AI Mode pill (medium screens) */
.nav-compact-cta .compact-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(212,175,55,0.1);
  border: 1px solid rgba(212,175,55,0.35);
  color: #D4AF37;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease;
  min-height: 38px;
}
.nav-compact-cta .compact-ai-btn:hover {
  background: rgba(212,175,55,0.18);
  border-color: rgba(212,175,55,0.6);
}
.nav-compact-cta .compact-ai-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ddc3d;
  box-shadow: 0 0 6px rgba(61,220,61,0.8);
  display: inline-block;
  flex-shrink: 0;
}

/* WhatsApp pill (medium screens) */
.nav-compact-cta .compact-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--kd-gold, #D4AF37);
  color: #0A3328;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.2s ease;
  min-height: 40px;
}
.nav-compact-cta .compact-wa-btn:hover {
  background: #C9A437;
  transform: translateY(-1px);
}

/* ── Mobile auth button styles ────────────────────────────────────────────── */
.mobile-btn {
  display: flex         !important;
  align-items: center;
  justify-content: center;
  padding: 13px 20px    !important;
  border-radius: 10px   !important;
  font-size: 0.95rem    !important;
  font-weight: 700      !important;
  text-decoration: none;
  text-align: center;
  min-height: 48px      !important;
  transition: all .2s ease !important;
  font-family: inherit;
}
.mobile-btn.outline-btn {
  background: transparent                          !important;
  border: 1.5px solid rgba(212,175,55,.45)         !important;
  color: #D4AF37                                   !important;
}
.mobile-btn.outline-btn:hover {
  background: rgba(212,175,55,.08)                 !important;
  border-color: rgba(212,175,55,.7)                !important;
}
.mobile-btn.gold-btn {
  background: linear-gradient(90deg,#B8942F,#D4AF37,#F0D87D,#D4AF37) !important;
  background-size: 250% 100%                       !important;
  color: #0A3328                                   !important;
  border: none                                     !important;
  box-shadow: 0 4px 16px rgba(212,175,55,.3)       !important;
}
.mobile-btn.gold-btn:hover {
  background-position: 100% 0 !important;
  transform: translateY(-1px) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   HERO MOBILE FIXES  (unchanged)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero — single-column layout on mobile (≤ 860px) ───────────────────── */
@media (max-width: 860px) {
  .page-home .hero-premium {
    grid-template-columns: 1fr !important;
    gap: 0                     !important;
    min-height: auto           !important;
    padding: 5.5rem 1.25rem 3.5rem !important;
  }
  .page-home .hero-right,
  .page-home .hero-dashboard-wrap { display: none !important; }
  .page-home .hero-left           { text-align: center; }
  .page-home .hero-badge,
  .page-home .hero-rating-badge   { margin-left: auto; margin-right: auto; }
  .page-home .hero-ctas           { justify-content: center; }
  .page-home .hero-trust-chips    { justify-content: center; }
  .page-home .hero-subtext        { margin-left: auto; margin-right: auto; }
  .page-home .hero-rotate-container {
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }
  .page-home .hero-rotate-track {
    min-width: 0   !important;
    flex: 1;
    max-width: calc(100% - 4rem);
  }
  .page-home .hero-metrics {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .6rem                            !important;
  }
  .page-home .hero-bg-layer { overflow: hidden; }
  .page-home .hero-glow-1   { width: 260px !important; height: 260px !important; top: -60px !important; }
  .page-home .hero-glow-2   { width: 190px !important; height: 190px !important; }
  .page-home .hero-glow-3   { display: none !important; }
  .page-home .hero-title     { font-size: clamp(1.8rem, 7.5vw, 2.4rem) !important; }
  .page-home .hero-title-sub { font-size: clamp(.9rem, 3.5vw, 1.1rem)  !important; }
}

/* ── Small phones (≤ 480px) ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  .page-home .hero-premium {
    padding: 5rem 1rem 3rem !important;
  }
  .page-home .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .page-home .hero-ctas a {
    justify-content: center !important;
    text-align: center      !important;
    width: 100%             !important;
  }
  .page-home .hero-rotate-container { padding: .4rem .75rem !important; }
  .page-home .hero-rotate-word      { font-size: 1.1rem    !important; }
  .page-home .hero-metrics          { gap: .45rem          !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP AI MODE BUTTON — nav-ai-mode-btn
   FIX: class was used in navbar.php HTML but had no CSS anywhere — the button
   rendered as nearly invisible plain text on the dark #0D1F1A navbar.
   These rules are duplicated here from navbar.php embedded <style> so they
   survive even if the inline block is removed during future edits.
   ═══════════════════════════════════════════════════════════════════════════ */
.nav-ai-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, rgba(212,175,55,.13), rgba(212,175,55,.04));
  border: 1px solid rgba(212,175,55,.55);
  color: #D4AF37;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 8px 16px;
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
  min-height: 40px;
  box-shadow: 0 0 14px rgba(212,175,55,.1), inset 0 1px 0 rgba(212,175,55,.12);
  transition: background .25s ease, border-color .25s ease,
              box-shadow .25s ease, transform .2s ease;
}
.nav-ai-mode-btn:hover {
  background: linear-gradient(135deg, rgba(212,175,55,.26), rgba(212,175,55,.12));
  border-color: rgba(212,175,55,.85);
  box-shadow: 0 0 22px rgba(212,175,55,.28), inset 0 1px 0 rgba(212,175,55,.18);
  transform: translateY(-1px);
}

/* Live green dot on desktop AI button */
.nav-ai-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ddc3d;
  box-shadow: 0 0 8px rgba(61,220,61,.95);
  flex-shrink: 0;
  animation: ai-dot-pulse 2s ease-in-out infinite;
}
@keyframes ai-dot-pulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%       { transform: scale(1.6); opacity: .65; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   NAVBAR SPACING — desktop button gap + visual separator
   FIX: .desktop-buttons had display:flex but no gap property — all four
   buttons (AI Mode · WhatsApp · Login · Register) were pressed together.
   Also bumps .nav-right gap from 15px to 20px for breathing room.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {

  /* Gap between the four right-side nav buttons */
  .desktop-buttons {
    gap: 12px !important;
    align-items: center !important;
  }

  /* Slight breathing room between the nav-right flex children */
  .nav-right { gap: 20px !important; }

  /* Visual separator between AI Mode pill and Chat WhatsApp —
     a thin 20px gold line to signal these are different action types */
  .desktop-buttons .cta-btn.desktop-btn {
    position: relative;
    margin-left: 4px !important;   /* extra nudge after separator */
  }
  .desktop-buttons .cta-btn.desktop-btn::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background: rgba(212,175,55,0.3);
    pointer-events: none;
  }

  /* Login button: a touch more left margin so Register doesn't crowd it */
  .desktop-buttons .desktop-login-btn  { margin-left: 2px !important; }
  .desktop-buttons .desktop-register-btn { margin-left: 0 !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   HERO AI BUTTON — .cta-ai-hero  (gold restyle for visibility)

   Problem:  background #0d4422→#081c14 (near-black dark green) with
             #D4AF37 gold text — colour contrast ~3.2:1, fails on dark
             hero backgrounds and any screen with colour compression.
   Fix:      Solid gold fill with dark green (#0A3328) text — contrast
             ratio ~8.4:1 (WCAG AAA). The button now pops unmistakably
             against the dark hero section at all viewport sizes.
   ═══════════════════════════════════════════════════════════════════════════ */

.cta-ai-hero {
  background: linear-gradient(135deg, #D4AF37 0%, #C09B2C 100%) !important;
  border: 1.5px solid rgba(212,175,55,0.25)                      !important;
  color: #0A3328                                                  !important;
  font-weight: 800                                                !important;
  padding: 14px 28px                                             !important;
  border-radius: 11px                                            !important;
  box-shadow:
    0 4px 24px rgba(212,175,55,0.45),
    0 0  40px rgba(212,175,55,0.18),
    inset 0 1px 0 rgba(255,255,255,0.25)                        !important;
  margin-top: 8px                                                !important;
  /* Keep the shimmer but in a gold-on-gold tone */
}

/* Shimmer overlay: brighter gold sweep instead of the old faint transparent one */
.cta-ai-hero::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.22),
    transparent
  ) !important;
}

.cta-ai-hero:hover {
  background: linear-gradient(135deg, #E2BC3E 0%, #D4AF37 100%) !important;
  border-color: rgba(212,175,55,0.6)                             !important;
  box-shadow:
    0 6px 36px rgba(212,175,55,0.6),
    0 0  50px rgba(212,175,55,0.28),
    inset 0 1px 0 rgba(255,255,255,0.3)                         !important;
  transform: translateY(-2px)                                    !important;
  color: #0A3328                                                 !important;
}

/* Green "live" dot — keep green but deepen glow so it reads on gold bg */
.cta-ai-hero-dot {
  background: #1a9e1a                   !important;   /* darker green, readable on gold */
  box-shadow: 0 0 8px rgba(26,158,26,0.85) !important;
}

/* Star glyph + SVG arrow: inherit dark text colour */
.cta-ai-hero-star  { color: #0A3328 !important; }
.cta-ai-hero-arrow { stroke: #0A3328 !important; color: #0A3328 !important; }
.cta-ai-hero:hover .cta-ai-hero-arrow { transform: translateX(4px) !important; }

/* Mobile: full-width gold button */
@media (max-width: 767px) {
  .cta-ai-hero {
    width: 100%         !important;
    justify-content: center !important;
    padding: 13px 20px  !important;
    margin-top: 12px    !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE PATCH  —  kissordigital.com  (2026-07-31)
   Appended to fixes.css
   Covers:
     1. Strategy-call page  — hero font/padding overflow on mobile
     2. Blog single          — top padding and title font overflow
     3. Footer clearance     — content hidden behind fixed kd-mobile-nav
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. STRATEGY HERO — font-size + padding reduction ───────────────────── */
@media (max-width: 768px) {
  .strategy-hero {
    padding: 100px 20px 60px !important;
  }
  .strategy-hero h1 {
    font-size: 36px !important;
    line-height: 1.2 !important;
  }
  .strategy-hero p {
    font-size: 17px !important;
    margin-bottom: 28px !important;
  }
}
@media (max-width: 480px) {
  .strategy-hero {
    padding: 80px 16px 48px !important;
  }
  .strategy-hero h1 {
    font-size: 28px !important;
  }
  .strategy-hero p {
    font-size: 15px !important;
  }
}

/* ── 2. STRATEGY — qualified / process / form section padding ────────────── */
@media (max-width: 768px) {
  .strategy-qualified {
    padding: 60px 20px !important;
  }
  .strategy-process {
    padding: 60px 20px !important;
  }
  .strategy-form {
    padding: 60px 20px !important;
  }
}

/* ── 3. BLOG SINGLE — reduce top/bottom padding & title font ─────────────── */
@media (max-width: 768px) {
  .blog-single {
    padding: 72px 0 48px !important;
  }
  .blog-title {
    font-size: 28px !important;
    line-height: 1.25 !important;
    margin: 20px 0 12px !important;
  }
}
@media (max-width: 480px) {
  .blog-single {
    padding: 56px 0 36px !important;
  }
  .blog-title {
    font-size: 24px !important;
  }
}

/* ── 4. FOOTER CLEARANCE — push footer above fixed kd-mobile-nav (~60px) ── */
/* kd-footer already has padding-bottom:0; kd-footer__bottom adds ~30px.     */
/* On ≤991px the fixed bottom nav is visible, so we need ≥62px clearance.    */
@media (max-width: 991px) {
  .kd-footer {
    padding-bottom: 4.5rem !important; /* ≈ 72px — clears 60px nav + gutter */
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PATCH 2  —  kissordigital.com  (2026-07-31)
   Covers:
     1. Sticky top navbar   — was position:relative, scrolled out of view
     2. AI widget launcher  — #kai-launcher (ai.kissordigital.com) sat at
                              bottom:28px, inside the 60px kd-mobile-nav
     3. AI label pill       — floated over page CTAs; hidden on mobile
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. STICKY TOP NAVBAR ────────────────────────────────────────────────── */
/* nav-container had position:relative so it scrolled with the page.          */
/* Making it sticky keeps it at top:0 on every page once the user scrolls.   */
.nav-container {
  position: sticky !important;
  top: 0           !important;
  z-index: 10002   !important;   /* above section-nav (10001) and kd-mobile-nav */
}

/* ── 2. AI WIDGET LAUNCHER — clear the fixed mobile bottom nav (~60px) ───── */
/* Widget is served from ai.kissordigital.com/widget.js and injects its own  */
/* <style> into <head>. CSS !important here wins per cascade rules (author    */
/* !important beats author normal regardless of source order).                */
@media (max-width: 991px) {
  /* Push launcher above the 60px mobile nav + 22px breathing room = 82px   */
  #kai-launcher { bottom: 82px !important; right: 1rem  !important; }
  /* Move chat panel up accordingly (launcher bottom + button height + gap)  */
  #kai-panel    { bottom: 160px !important; }
  /* Hide the floating label pill — it overlaps page CTA buttons while open  */
  #kai-label    { display: none !important; }
}
@media (max-width: 430px) {
  /* Extra small screens: keep 82px bottom, snap edges to 16px/8px           */
  #kai-launcher { right: 16px !important; bottom: 82px !important; }
  #kai-panel    { right: 8px  !important; left: 8px !important; bottom: 160px !important; }
}