/* ================================================================
   GREAT LEAP — Homepage Design Refresh
   Modern tech-driven aesthetic • Blues & Greens palette • Max whitespace
   Linked ONLY in index.html — zero impact on other pages
   ================================================================ */

/* ─────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
───────────────────────────────────────────────────────────────*/
:root {
  /* Blue scale */
  --hb-950:  #04090f;
  --hb-900:  #0a1628;
  --hb-800:  #0d2137;
  --hb-700:  #0e3460;
  --hb-600:  #1a4b7a;
  --hb-500:  #2563eb;   /* primary blue */
  --hb-400:  #3b82f6;
  --hb-300:  #60a5fa;
  --hb-200:  #bae6fd;
  --hb-100:  #dbeafe;
  --hb-50:   #eff6ff;   /* ice blue section bg */

  /* Teal / Green scale */
  --ht-700:  #0f766e;
  --ht-600:  #0d9488;   /* teal accent */
  --ht-500:  #14b8a6;
  --hg-700:  #047857;
  --hg-600:  #059669;   /* primary green */
  --hg-500:  #10b981;   /* bright emerald */
  --hg-400:  #34d399;   /* sage — hero highlight */
  --hg-100:  #d1fae5;
  --hg-50:   #ecfdf5;   /* mint green section bg */

  /* Gradients */
  --hgrad-hero:   linear-gradient(135deg, #04090f 0%, #0d2137 50%, #0e3460 100%);
  --hgrad-accent: linear-gradient(90deg, #2563eb 0%, #0d9488 100%);
  --hgrad-cta:    linear-gradient(135deg, #1e3a5f 0%, #064e3b 100%);
  --hgrad-head:   linear-gradient(90deg, #2563eb 0%, #059669 100%);

  /* Whitespace scale */
  --section-v:  140px;
}

/* ─────────────────────────────────────────────────────────────
   2. GLOBAL WHITESPACE BOOST (homepage only)
───────────────────────────────────────────────────────────────*/
.section                    { padding: var(--section-v) 0; }
.section-header             { margin-bottom: 80px; }
.section-header h2::after   {
  background: var(--hgrad-head);
  height: 4px;
  width: 64px;
  margin-top: 18px;
  border-radius: 3px;
}
.section-header--center h2::after {
  margin-left: auto;
  margin-right: auto;
}

/* ─────────────────────────────────────────────────────────────
   3. NAVIGATION — Blue header bar
───────────────────────────────────────────────────────────────*/
.site-nav {
  background: #0e3460;
  box-shadow: 0 2px 20px rgba(14, 52, 96, 0.25);
}

/* Links: white text on blue nav */
.nav-links a {
  color: rgba(255, 255, 255, 0.82);
}
.nav-links a:hover,
.nav-links a.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

/* Hamburger bars: white on blue nav */
.nav-hamburger span { background: #ffffff; }

/* Tagline badge: teal on blue bg */
.nav-logo__tagline {
  background: rgba(13, 148, 136, 0.15);
  border-color: rgba(13, 148, 136, 0.5);
  color: #34d399;
}
.nav-logo__tagline::before { background: #34d399; }

/* Contact Us CTA: emerald */
.nav-links .nav-cta {
  background: #059669;
  color: #ffffff;
}
.nav-links .nav-cta:hover { background: #047857; }

/* Scrolled: slightly deeper blue */
.site-nav.scrolled {
  background: #081e3a;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.site-nav.scrolled .nav-links a       { color: rgba(255, 255, 255, 0.82); }
.site-nav.scrolled .nav-links a:hover,
.site-nav.scrolled .nav-links a.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}
.site-nav.scrolled .nav-hamburger span { background: #ffffff; }

/* Mobile nav CTA */
.nav-mobile .nav-cta {
  background: #059669;
  color: #ffffff;
}
.nav-mobile .nav-cta:hover { background: #047857; }

/* ─────────────────────────────────────────────────────────────
   4. HERO — Homepage only: white background, dark text, blue accents
      Inner page heroes keep their original dark navy from greatleap.css
───────────────────────────────────────────────────────────────*/
.hero--home {
  background: #ffffff;
  padding: 160px 24px 140px;
}

/* No decorative blobs on the white homepage hero */
.hero--home::after,
.hero--home::before { display: none; }

/* Hide geometric rings, dots and accent line on homepage hero */
.hero--home .hero__geo::before,
.hero--home .hero__geo::after  { border-color: transparent; }
.hero--home .hero__line        { display: none; }
.hero--home .hero__dot         { display: none; }

/* Two-column layout: stretch both columns to image height */
.hero--home .hero__inner,
.hero--home .hero__content {
  gap: 96px;
  align-items: stretch;
}

/* Left column: flex column so CTAs pin to the bottom edge */
.hero--home .hero__text {
  display: flex;
  flex-direction: column;
}

/* Spacing between text elements */
.hero--home .hero__badge  { margin-bottom: 16px; }
.hero--home .hero__title  { margin-bottom: 20px; }
.hero--home .hero__sub    { margin-bottom: 0; }

/* Push CTA buttons to the bottom of the column (= bottom of image) */
.hero--home .hero__ctas   { gap: 16px; margin-top: auto; }

/* Title and body text: dark on white background */
.hero--home .hero__title,
.hero--home h1,
.hero--home h2 { color: #0d2137; }

.hero--home .hero__title em,
.hero--home h1 em { color: #059669; }

/* Eyebrow line above H1 */
.hero__eyebrow {
  font-size: 1.05rem;
  font-weight: 600;
  color: #0d9488;
  letter-spacing: 0.01em;
  margin-bottom: 16px;
  line-height: 1.5;
}

/* HR services tagline row — sits below H1 */
.hero__services-tag {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0d9488;
  margin-bottom: 14px;
  line-height: 1.6;
}

.hero--home .hero__sub { color: #475569; }

/* Badge: blue accent on white */
.hero--home .badge--gold,
.hero--home .badge--navy {
  background: rgba(37, 99, 235, 0.07);
  border-color: rgba(37, 99, 235, 0.22);
  color: #2563eb;
}
.hero--home .badge--gold::before,
.hero--home .badge--navy::before { background: #2563eb; }

/* Primary CTA: solid blue */
.hero--home .btn--primary {
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.32);
}
.hero--home .btn--primary:hover {
  background: #1d4ed8;
  box-shadow: 0 8px 32px rgba(37, 99, 235, 0.45);
  transform: translateY(-2px);
}

/* Outline CTA: blue border on white */
.hero--home .btn--outline {
  border-color: rgba(37, 99, 235, 0.3);
  color: #2563eb;
}
.hero--home .btn--outline:hover {
  background: rgba(37, 99, 235, 0.06);
  border-color: #2563eb;
  color: #1d4ed8;
  transform: translateY(-2px);
}

/* Taller image panel */
.hero--home .hero__image img {
  height: 520px;
  box-shadow: 0 32px 80px rgba(37, 99, 235, 0.14);
}
.hero--home .hero__image::before { border-color: rgba(13, 148, 136, 0.3); }

/* Scroll indicator: dark on white */
.hero--home .hero__scroll { color: rgba(13, 33, 55, 0.32); }

/* ─────────────────────────────────────────────────────────────
   5. TRUST BAR — Ice blue strip
───────────────────────────────────────────────────────────────*/
.trust-bar {
  background: var(--hb-50);
  border-top: 1px solid var(--hb-100);
  border-bottom: 1px solid var(--hb-100);
  padding: 20px 24px;
}
.trust-bar__text { color: var(--hb-600); }
.trust-bar__logos img { filter: grayscale(40%) opacity(0.6); }

/* ─────────────────────────────────────────────────────────────
   6. PROBLEM SECTION — Pure white, lots of air
───────────────────────────────────────────────────────────────*/
.problem-section { background: #ffffff; }

.problem-grid {
  gap: 28px;
  margin-bottom: 64px;
}

.problem-card {
  background: #fafcff;
  border: 1px solid var(--hb-100);
  border-left: 4px solid var(--hb-500);
  border-radius: 14px;
  padding: 32px 28px;
}

/* Alternate left-border colours: blue / teal */
.problem-card:nth-child(1) { border-left-color: var(--hb-500); }
.problem-card:nth-child(2) { border-left-color: var(--ht-600); }
.problem-card:nth-child(3) { border-left-color: var(--hg-600); }
.problem-card:nth-child(4) { border-left-color: var(--hb-400); }
.problem-card:nth-child(5) { border-left-color: var(--ht-500); }
.problem-card:nth-child(6) { border-left-color: var(--hg-500); }

.problem-card:hover {
  box-shadow: 0 14px 44px rgba(37, 99, 235, 0.1);
  transform: translateY(-5px);
  border-top-color: var(--hb-200);
  border-right-color: var(--hb-200);
  border-bottom-color: var(--hb-200);
}

/* Icon: blue wash */
.problem-card__icon {
  background: var(--hb-50);
  color: var(--hb-500);
  border-radius: 10px;
}
.problem-card:nth-child(even) .problem-card__icon {
  background: var(--hg-50);
  color: var(--hg-600);
}

/* Closing callout box */
.problem-closer {
  background: linear-gradient(135deg, var(--hb-900) 0%, var(--hb-700) 100%);
  padding: 36px 44px;
  font-size: 1.1rem;
}
.problem-closer strong { color: #34d399; }

/* ─────────────────────────────────────────────────────────────
   7. SERVICES SECTION — Ice blue section background
───────────────────────────────────────────────────────────────*/
#home-services { background: var(--hb-50); }

/* Badge: blue */
#home-services .badge--gold {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.25);
  color: var(--hb-500);
}
#home-services .badge--gold::before { background: var(--hb-500); }

.services-grid { gap: 28px; }

.service-card {
  background: #ffffff;
  border: 1px solid var(--hb-100);
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.04);
}
.service-card:hover {
  box-shadow: 0 20px 56px rgba(37, 99, 235, 0.12);
  transform: translateY(-6px);
  border-color: var(--hb-200);
}

/* Gradient top strip on hover: blue → teal */
.service-card::before {
  background: var(--hgrad-accent);
  border-radius: 16px 16px 0 0;
  height: 3px;
}
.service-card:hover::before { opacity: 1; }

/* Icon: blue (odd) / green (even) */
.service-card__icon {
  background: var(--hb-50);
  color: var(--hb-500);
  border-radius: 14px;
  width: 56px;
  height: 56px;
  font-size: 1.4rem;
}
.service-card:nth-child(even) .service-card__icon {
  background: var(--hg-50);
  color: var(--hg-600);
}
.service-card:nth-child(3n) .service-card__icon {
  background: rgba(13, 148, 136, 0.08);
  color: var(--ht-600);
}

.service-card h3 { color: var(--hb-800); font-size: 1.15rem; margin-bottom: 14px; }
.service-card p  { color: #475569; font-size: 0.92rem; margin-bottom: 20px; }

.service-card__link { color: var(--hb-500); }
.service-card:nth-child(even) .service-card__link { color: var(--hg-600); }
.service-card__link:hover { gap: 12px; }

/* ─────────────────────────────────────────────────────────────
   8. STATS — White, large blue + green numbers
───────────────────────────────────────────────────────────────*/
.stats-section {
  background: #ffffff;
  border: none;
}

.stats-grid {
  border: 1px solid var(--hb-100);
  border-radius: 20px;
  box-shadow: 0 6px 48px rgba(37, 99, 235, 0.07);
}

.stat-item {
  padding: 76px 40px;
  border-right: 1px solid var(--hb-100);
}
.stat-item:last-child { border-right: none; }

/* Coloured counter numbers */
.stat-item:nth-child(1) .stat-item__number,
.stat-item:nth-child(1) .stat-item__num { color: var(--hb-500); }

.stat-item:nth-child(2) .stat-item__number,
.stat-item:nth-child(2) .stat-item__num { color: var(--hg-600); }

.stat-item:nth-child(3) .stat-item__number,
.stat-item:nth-child(3) .stat-item__num { color: var(--ht-600); }

.stat-item:nth-child(4) .stat-item__number,
.stat-item:nth-child(4) .stat-item__num { color: var(--hb-400); }

.stat-item__label {
  color: #64748b;
  text-transform: none;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

/* ─────────────────────────────────────────────────────────────
   9. WHY CHOOSE US — Mint green wash
───────────────────────────────────────────────────────────────*/
.section--grey { background: var(--hg-50) !important; }

/* Badge: green */
.section--grey .badge--gold {
  background: rgba(5, 150, 105, 0.08);
  border-color: rgba(5, 150, 105, 0.3);
  color: var(--hg-600);
}
.section--grey .badge--gold::before { background: var(--hg-600); }

/* Pillar cards */
.why-layout__pillar {
  border: 1px solid var(--hg-100);
  background: #ffffff;
  border-radius: 14px;
  padding: 28px 24px;
}
.why-layout__pillar:hover {
  border-color: var(--hg-500);
  box-shadow: 0 10px 32px rgba(5, 150, 105, 0.1);
}

/* Pillar icons: alternating blue / teal / green */
.why-layout__pillar:nth-child(1) .why-layout__pillar-icon {
  background: var(--hb-50);
}
.why-layout__pillar:nth-child(1) .why-layout__pillar-icon i { color: var(--hb-500); }

.why-layout__pillar:nth-child(2) .why-layout__pillar-icon {
  background: rgba(13, 148, 136, 0.08);
}
.why-layout__pillar:nth-child(2) .why-layout__pillar-icon i { color: var(--ht-600); }

.why-layout__pillar:nth-child(3) .why-layout__pillar-icon {
  background: var(--hg-50);
}
.why-layout__pillar:nth-child(3) .why-layout__pillar-icon i { color: var(--hg-600); }

/* Image quote overlay: teal left border */
.why-layout__quote { border-left-color: #10b981; }

/* ─────────────────────────────────────────────────────────────
   10. CLIENT LOGOS — Pure white
───────────────────────────────────────────────────────────────*/
.clients-section { background: #ffffff !important; }

.clients-logo-cell {
  background: #fafcff;
  border-color: var(--hb-100);
  border-radius: 14px;
}
.clients-logo-cell:hover {
  border-color: var(--hb-300);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.1);
}
.clients-logo-cell img { filter: grayscale(15%) opacity(0.82); }
.clients-logo-cell img:hover { filter: none; }

/* ─────────────────────────────────────────────────────────────
   11. PHOTO STRIP — Deep blue panel, teal highlights
───────────────────────────────────────────────────────────────*/
.photo-strip__content {
  background: linear-gradient(135deg, var(--hb-900) 0%, var(--hb-700) 100%);
}
.photo-strip__content .badge--gold {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.4);
  color: #34d399;
}
.photo-strip__content .badge--gold::before { background: #34d399; }

.photo-strip__content h3 em { color: #34d399; }
.photo-strip__stat-num { color: #34d399; }
.photo-strip__stats { border-top-color: rgba(255,255,255,0.1); }

/* ─────────────────────────────────────────────────────────────
   12. TESTIMONIALS — Ice blue wash
───────────────────────────────────────────────────────────────*/
.testimonials-section { background: var(--hb-50); }
.testimonials-section .section-header h2 { color: var(--hb-800); }

.testimonial-card {
  background: #ffffff;
  border-color: var(--hb-100);
  border-radius: 16px;
  padding: 36px;
  box-shadow: 0 2px 12px rgba(37, 99, 235, 0.05);
}
.testimonial-card:hover {
  border-color: var(--hb-300);
  box-shadow: 0 16px 48px rgba(37, 99, 235, 0.12);
}

/* Stars: alternating blue / green */
.testimonial-card:nth-child(odd)  .testimonial-card__stars { color: var(--hb-400); }
.testimonial-card:nth-child(even) .testimonial-card__stars { color: var(--hg-500); }

.testimonial-card__text { color: #475569; line-height: 1.8; }
.testimonial-card__author-info strong { color: var(--hb-800); }
.testimonial-card__author-info span   { color: var(--ht-600); }

/* ─────────────────────────────────────────────────────────────
   13. CTA BANNER — Blue-to-forest-green gradient
───────────────────────────────────────────────────────────────*/
.cta-banner {
  background: var(--hgrad-cta);
  padding: 120px 24px;
}
.cta-banner::before { background: var(--hgrad-accent); }

/* Badge in CTA */
.cta-banner .badge--gold {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.35);
  color: #34d399;
}
.cta-banner .badge--gold::before { background: #34d399; }

/* CTA primary: white button on coloured bg */
.cta-banner .btn--primary {
  background: #ffffff;
  color: var(--hb-800);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.cta-banner .btn--primary:hover {
  background: var(--hb-50);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.28);
}

/* CTA outline: white border → teal on hover */
.cta-banner .btn--outline {
  border-color: rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.9);
}
.cta-banner .btn--outline:hover {
  background: rgba(52, 211, 153, 0.12);
  border-color: #34d399;
  color: #34d399;
  transform: translateY(-2px);
}

/* ─────────────────────────────────────────────────────────────
   14. FOOTER — Very deep blue-black
───────────────────────────────────────────────────────────────*/
.site-footer { background: var(--hb-950); }

.footer-socials a:hover {
  border-color: #10b981;
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
}

.footer-col ul a:hover { color: #34d399; }
.footer-contact-item i { color: #10b981; }

.footer-tagline {
  background: transparent;
  border-color: rgba(13, 148, 136, 0.4);
  color: #34d399;
}
.footer-tagline::before { background: #34d399; }
.footer-bottom p { color: rgba(255,255,255,0.22); }

/* ─────────────────────────────────────────────────────────────
   15. RESPONSIVE
───────────────────────────────────────────────────────────────*/
@media (max-width: 1024px) {
  :root { --section-v: 110px; }
  .stat-item { padding: 56px 32px; }
  .hero--home { padding: 140px 24px 110px; }
  .hero--home .hero__inner,
  .hero--home .hero__content { gap: 64px; }
}

@media (max-width: 900px) {
  .hero--home { padding: 130px 24px 90px; }
  .hero--home .hero__inner,
  .hero--home .hero__content { gap: 40px; }
  .hero--home .hero__image img { height: 300px; }
  .hero--home .hero__sub { margin-bottom: 40px; }
}

@media (max-width: 768px) {
  :root { --section-v: 80px; }
  .section-header { margin-bottom: 52px; }
  .problem-grid { gap: 16px; }
  .services-grid { gap: 16px; }
  .service-card { padding: 28px 24px; }
  .testimonial-card { padding: 28px; }
  .stat-item { padding: 48px 24px; }
  .problem-closer { padding: 28px 24px; }
  .cta-banner { padding: 80px 24px; }
  .hero--home { padding: 110px 24px 80px; }
  .hero--home .hero__badge  { margin-bottom: 24px; }
  .hero--home .hero__title  { margin-bottom: 24px; }
  .hero--home .hero__sub    { margin-bottom: 36px; }
}

@media (max-width: 480px) {
  :root { --section-v: 64px; }
  .section-header { margin-bottom: 40px; }
  .hero--home { padding: 100px 20px 72px; }
}

/* ============================================================
   AUDIENCE INVITE — Two split sections inviting owners + HR pros
   ============================================================ */
.audience-invite { position: relative; overflow: hidden; }
.audience-invite--owners { background: linear-gradient(135deg, #fff8ec 0%, #ffffff 60%); }
.audience-invite--hrpros { background: var(--hg-50); }

.audience-invite__layout {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 64px;
  align-items: center;
}
.audience-invite__layout--reverse {
  grid-template-columns: 1fr 0.85fr;
}
.audience-invite__layout--reverse .audience-invite__visual { order: 2; }
.audience-invite__layout--reverse .audience-invite__content { order: 1; }

.audience-invite__content .badge { margin-bottom: 18px; }
.audience-invite__content h2 {
  color: var(--hb-800);
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  line-height: 1.2;
  margin-bottom: 16px;
}
.audience-invite__content h2 em {
  font-style: normal;
  color: var(--gold);
}
.audience-invite--hrpros .audience-invite__content h2 em { color: var(--hg-600); }
.audience-invite__lede {
  color: var(--text-mid);
  font-size: 1.02rem;
  line-height: 1.7;
  margin-bottom: 22px;
}
.audience-invite__list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.audience-invite__list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--text-dark);
  line-height: 1.55;
}
.audience-invite__list li i {
  color: #16a34a;
  font-size: 1.05rem;
  margin-top: 2px;
  flex-shrink: 0;
}
.audience-invite--owners .audience-invite__list li i { color: var(--gold); }
.audience-invite__cta {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.audience-invite__meta {
  color: var(--text-light);
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.audience-invite__meta i { color: var(--gold); }
.audience-invite--hrpros .audience-invite__meta i { color: var(--hg-600); }

/* Owners visual — mock scaleup score card */
.audience-invite__visual { display: flex; justify-content: center; }
.audience-invite__visual-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -25px rgba(15, 23, 42, 0.25), 0 8px 18px -8px rgba(15, 23, 42, 0.1);
  padding: 32px 28px;
  width: 100%;
  max-width: 380px;
  border: 1px solid rgba(214, 158, 46, 0.18);
  position: relative;
}
.audience-invite__visual-card::before {
  content: "";
  position: absolute; inset: -2px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(214,158,46,0.18), rgba(214,158,46,0));
  z-index: -1;
}
.audience-invite__visual-eyebrow {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--text-mid);
  margin-bottom: 16px;
}
.audience-invite__visual-eyebrow i { color: var(--gold); margin-right: 8px; }
.audience-invite__visual-num {
  font-size: 3.4rem;
  font-weight: 800;
  color: var(--hb-800);
  line-height: 1;
  margin-bottom: 4px;
}
.audience-invite__visual-num span {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-light);
  margin-left: 6px;
}
.audience-invite__visual-band {
  display: inline-block;
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 22px;
}
.audience-invite__visual-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.audience-invite__visual-bar {
  font-size: 0.78rem;
  color: var(--text-mid);
}
.audience-invite__visual-bar span { display: block; margin-bottom: 4px; }
.audience-invite__visual-bar i {
  display: block;
  height: 5px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gold), #34d399);
  width: var(--w);
}
.audience-invite__visual-foot {
  margin-top: 18px;
  font-size: 0.8rem;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 8px;
}
.audience-invite__visual-foot i { color: #dc2626; }

/* HR pros visual — tools grid */
.audience-invite__tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 400px;
  width: 100%;
}
.audience-invite__tool {
  background: #ffffff;
  border: 1px solid rgba(5, 150, 105, 0.18);
  border-radius: var(--radius);
  padding: 22px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 8px 20px -12px rgba(5, 150, 105, 0.25);
}
.audience-invite__tool:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -14px rgba(5, 150, 105, 0.35);
}
.audience-invite__tool i {
  font-size: 1.4rem;
  color: var(--hg-600);
  background: var(--hg-50);
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.audience-invite__tool span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.35;
}

@media (max-width: 900px) {
  .audience-invite__layout,
  .audience-invite__layout--reverse {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .audience-invite__layout--reverse .audience-invite__visual { order: 2; }
  .audience-invite__layout--reverse .audience-invite__content { order: 1; }
  .audience-invite__visual-card { max-width: 100%; }
  .audience-invite__tools-grid { max-width: 100%; }
}
@media (max-width: 480px) {
  .audience-invite__tools-grid { grid-template-columns: repeat(2, 1fr); }
  .audience-invite__visual-num { font-size: 2.8rem; }
  .audience-invite__cta { flex-direction: column; align-items: flex-start; gap: 14px; }
}