/* ============================================================
   HRIA — Professional UI Layer v4
   Brand Palette: Orange #F58120 · Navy #0C1627 · White #FFFFFF
   Recruit accent: Green #E8FCED · WhatsApp #25D366
   ============================================================ */

/* ── 0. DESIGN TOKEN MASTER OVERRIDE ────────────────────────
   Single source of truth — overrides every page's :root vars  */
:root {
  --primary-navy:    #0C1627 !important;
  --primary-blue:    #0C1627 !important;   /* unify to single navy */
  --accent-orange:   #F58120 !important;
  --accent-orange2:  #F58120 !important;   /* remove dual-orange */
  --accent-cyan:     #F58120 !important;   /* redirect cyan → orange */
  --accent-emerald:  #F58120 !important;   /* redirect emerald → orange */
  --accent-green:    #25d366 !important;   /* WhatsApp green (recruit only) */
  --green-dark:      #16a34a !important;   /* dark green text (recruit only) */
  --recruit-bg:      #E8FCED !important;   /* mint bg (recruit only) */
}

/* ── Gradient text: single-tone orange (no multi-color clash) */
.hria-gradient,
.gradient-text {
  background: #F58120 !important;
  background: linear-gradient(135deg, #F58120 0%, #F9A040 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Section label: solid orange, no gradient text ─────────── */
.section-label {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  color: #F58120 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

/* ── Scroll progress bar: solid orange ─────────────────────── */
#hria-progress-bar {
  background: #F58120 !important;
}

/* ── Nav underline: solid orange ────────────────────────────── */
.nav-link::before, .footer-links a::before {
  background: #F58120 !important;
}

/* ── Section title underbar: solid orange ───────────────────── */
.section-title::after,
.section-header h2::after {
  background: #F58120 !important;
}

/* ── Kinfolk loader progress bar: solid orange ──────────────── */
#kf-loader-progress-bar {
  background: #F58120 !important;
}

/* ── Kinfolk sticky eyebrow dot ─────────────────────────────── */
.kf-sticky-eyebrow-dot { background: #F58120 !important; }
.kf-sticky-eyebrow-text { color: #F58120 !important; }

/* ── Recruit-page mint green bg for hero ─────────────────────── */
/* Applied via .recruit-hero class added inline or page class */
.recruit-hero,
.split-card-recruit {
  background: #E8FCED !important;
}
.split-card-recruit .label-pill-text,
.split-card-recruit .subcategory-title { color: #16a34a !important; }

/* ============================================================

/* ── 1. SCROLL PROGRESS BAR ─────────────────────────────── */
#hria-progress-bar {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, #F58120, #F58120);
  z-index: 99999;
  transition: width 0.1s linear;
}

/* ── 2. CURSOR GLOW: REMOVED ───────────────────────────── */
#hria-cursor-glow { display: none !important; }

/* ── 3. GRADIENT MESH OVERLAY: REMOVED ─────────────────── */
.hria-mesh { display: none !important; }

/* ── 4. FLOATING ORBS: STATIC ONLY ─────────────────────── */
.orb, .hria-orb {
  animation: none !important;
  filter: blur(80px) !important;
  pointer-events: none;
}

/* ── 5. SCROLL REVEAL ───────────────────────────────────── */
.hria-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
  will-change: opacity, transform;
}
.hria-reveal.hria-visible { opacity: 1; transform: translateY(0); }
.hria-reveal.delay-1 { transition-delay: 0.06s; }
.hria-reveal.delay-2 { transition-delay: 0.12s; }
.hria-reveal.delay-3 { transition-delay: 0.18s; }
.hria-reveal.delay-4 { transition-delay: 0.24s; }
.hria-reveal.delay-5 { transition-delay: 0.30s; }
.hria-reveal.delay-6 { transition-delay: 0.36s; }

/* ── 6. NAVIGATION ─────────────────────────────────────── */
.nav-wrapper, nav#navbar {
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: saturate(180%) blur(16px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(16px) !important;
  border-bottom: 1px solid rgba(229,231,235,0.6) !important;
  transition: box-shadow 0.3s ease !important;
}
.nav-wrapper.scrolled, nav#navbar.scrolled {
  background: #ffffff !important;
  box-shadow: 0 1px 0 rgba(229,231,235,0.8),
              0 4px 24px rgba(12,22,39,0.06) !important;
}

/* Logo mix-blend for video */
.logo { mix-blend-mode: normal !important; }
.logo video { mix-blend-mode: multiply !important; }

/* ── 7. NAV LINK UNDERLINE ──────────────────────────────── */
.nav-link, .footer-links a {
  position: relative;
  display: inline-block;
}
.nav-link::before, .footer-links a::before {
  content: '';
  position: absolute; bottom: -2px; left: 0;
  width: 0; height: 1.5px; border-radius: 2px;
  background: #F58120;
  transition: width 0.22s ease-out;
}
.nav-link:hover::before,
.footer-links a:hover::before { width: 100%; }

/* ── 8. SECTION TITLE ACCENT ────────────────────────────── */
/* Static elegant underbar — no shimmer animation */
.section-title::after,
.section-header h2::after {
  content: '';
  display: block;
  width: 36px; height: 3px; border-radius: 99px;
  background: linear-gradient(90deg, #F58120, #F58120);
  margin: 14px auto 0;
  animation: none !important;
  background-size: unset !important;
}

/* ── 9. CHIP / EYEBROW BADGE ────────────────────────────── */
.chip {
  backdrop-filter: none;
  animation: chipFadeIn 0.4s ease-out both;
}
@keyframes chipFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Remove the bouncy chipPop */
@keyframes chipPop {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 10. CARD HOVER — controlled lift ───────────────────── */
.use-case-card, .feature-card, .category-segment,
.platform-showcase-card {
  transition:
    transform    0.24s ease-out,
    box-shadow   0.24s ease-out,
    border-color 0.24s ease !important;
}
.use-case-card:hover {
  transform: translateY(-5px) !important;
  box-shadow:
    0 10px 32px rgba(12,22,39,0.09),
    0 2px  8px  rgba(12,22,39,0.05) !important;
}
.feature-card:hover,
.category-segment:hover {
  transform: translateY(-4px) !important;
}

/* ── 11. ICON CONTAINERS ────────────────────────────────── */
.hria-icon {
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: rgba(245,129,32,0.07);
  border: 1px solid rgba(245,129,32,0.13);
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  position: relative;
}
.hria-icon:hover,
.use-case-card:hover .hria-icon,
.feature-card:hover .hria-icon,
.category-segment:hover .hria-icon {
  background: rgba(245,129,32,0.11);
  border-color: rgba(245,129,32,0.25);
  box-shadow: 0 4px 14px rgba(245,129,32,0.13);
  transform: none !important; /* no rotation, no scale */
}
.hria-icon svg { transition: none; }
/* Remove ::before hover overlay */
.hria-icon::before { display: none !important; }

/* ── 12. CTA BUTTONS ────────────────────────────────────── */
.btn-orange, .btn-primary,
.btn-hero-primary, .btn-demo-primary,
.kf-hero-cta {
  position: relative; overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.btn-orange:hover, .btn-primary:hover,
.btn-hero-primary:hover, .kf-hero-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 26px rgba(245,129,32,0.38) !important;
}
/* Remove the ::after gloss overlay */
.btn-orange::after,
.btn-hero-primary::after { display: none !important; }
/* Remove ripple — looks cheap */
.hria-btn-ripple { display: none !important; }

/* ── 13. GRADIENT BORDER CARDS: REMOVED ─────────────────── */
.hria-gradient-border::before { display: none !important; }
@keyframes gradientBorderFlow { to {} }

/* ── 14. FLOAT CARDS ────────────────────────────────────── */
.float-card {
  animation: floatGentle 5s ease-in-out infinite !important;
  background: rgba(255,255,255,0.97) !important;
  border: 1px solid rgba(229,231,235,0.9) !important;
  box-shadow: 0 8px 28px rgba(12,22,39,0.09), 0 2px 6px rgba(12,22,39,0.05) !important;
  backdrop-filter: none !important;
}
.float-card.fc2 { animation-delay: 2.2s !important; }
@keyframes floatGentle {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}
/* Remove the rotation variants */
@keyframes floatBadge {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}

/* ── 15. LIVE PULSE (useful signal — keep) ───────────────── */
.live-dot, .status-indicator,
.integ-label-dot, .chip .dot {
  animation: pulseLive 2s ease-in-out infinite !important;
}
@keyframes pulseLive {
  0%, 100% { box-shadow: 0 0 0 0   rgba(245,129,32,0.35); }
  50%       { box-shadow: 0 0 0 5px rgba(245,129,32,0); }
}

/* ── 16. STEPS CONNECTOR ────────────────────────────────── */
.steps-grid::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(245,129,32,0.25) 20%,
    rgba(245,129,32,0.35) 50%,
    rgba(245,129,32,0.25) 80%,
    transparent 100%) !important;
  animation: none !important;
  background-size: unset !important;
}

/* ── 17. CATEGORY ICON HOVER ────────────────────────────── */
.category-icon, .security-icon {
  transition: box-shadow 0.22s ease !important;
}
.category-segment:hover .category-icon,
.security-card:hover .security-icon {
  box-shadow: 0 0 0 6px rgba(245,129,32,0.07),
              0 4px 14px rgba(245,129,32,0.12) !important;
  transform: none !important;
}

/* ── 18. SOCIAL ICONS ───────────────────────────────────── */
.social-icon {
  transition: transform 0.2s ease, opacity 0.2s ease !important;
}
.social-icon:hover {
  transform: translateY(-3px) !important;
  opacity: 0.85 !important;
  /* Remove the rotation and orange glow */
  box-shadow: none !important;
}

/* ── 19. PLATFORM BENEFIT HOVER ─────────────────────────── */
.platform-benefit {
  transition: background 0.2s ease, padding-left 0.2s ease !important;
}
.platform-benefit:hover {
  transform: none !important;
  background: rgba(12,22,39,0.03) !important;
  box-shadow: none !important;
}

/* ── 20. MODAL ──────────────────────────────────────────── */
#bookDemoModal .modal-inner {
  box-shadow: 0 20px 60px rgba(12,22,39,0.22),
              0 0 0 1px rgba(229,231,235,0.5) !important;
  animation: modalIn 0.3s cubic-bezier(0.16,1,0.3,1) both !important;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Remove the bouncy modalBounceIn */
@keyframes modalBounceIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 21. FEATURED CARD ──────────────────────────────────── */
.feature-card.featured {
  box-shadow:
    0 16px 48px rgba(12,22,39,0.26),
    0 0 0 1px rgba(245,129,32,0.1),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
.feature-card.featured:hover {
  box-shadow:
    0 22px 56px rgba(12,22,39,0.32),
    0 0 0 1px rgba(245,129,32,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* ── 22. STAT NUMBERS ───────────────────────────────────── */
.stat-number, .s-num, .stat-val {
  font-variant-numeric: tabular-nums;
}
.stat-number.hria-counted,
.s-num.hria-counted,
.stat-val.hria-counted {
  /* Remove the glowing filter animation */
  animation: none !important;
  filter: none !important;
}

/* ── 23. GRADIENT TEXT ──────────────────────────────────── */
.hria-gradient, .gradient-text {
  /* Static gradient — no shifting animation */
  background-size: 100% 100% !important;
  animation: none !important;
}

/* ── 24. ANNOUNCEMENT TICKER ────────────────────────────── */
.announce-bar .announce-ticker {
  display: flex; gap: 3rem;
  animation: tickerScroll 24s linear infinite;
  white-space: nowrap;
}
@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── 25. PAGE ENTER ─────────────────────────────────────── */
body {
  animation: pageEnter 0.25s ease both;
}
@keyframes pageEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── 26. BACK BUTTON ────────────────────────────────────── */
.back-btn:hover {
  box-shadow: 0 2px 12px rgba(245,129,32,0.2),
              0 0 0 3px rgba(245,129,32,0.08) !important;
}

/* ── 27. USE CASE CARD LINK ─────────────────────────────── */
a.use-case-card {
  color: inherit !important;
  text-decoration: none !important;
}

/* ── 28. SECTION TRANSITION ─────────────────────────────── */
section { transition: none; } /* Remove background transition */

/* ── 29. "SOON" BADGE ───────────────────────────────────── */
.card-badge.soon { animation: none; }

/* ── 30. SCROLLBAR ──────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ── 31. TILT CARD ──────────────────────────────────────── */
.hria-tilt {
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

/* ─────────────────────────────────────────────────────────
   PREMIUM "WOW" LAYER
   Genuine visual distinction for an enterprise product
   ───────────────────────────────────────────────────────── */

/* ── W1. HERO — premium grid pattern overlay ─────────────── */
.hero::before {
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px) !important;
  background-size: 60px 60px !important;
  background-position: center center !important;
  pointer-events: none;
}

/* ── W2. HERO — radial vignette to focus centre ─────────── */
.hero .container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 40%, rgba(6,11,22,0.35) 100%);
  pointer-events: none;
  z-index: 0;
}

/* ── W3. STAT NUMBERS — bold orange, full weight ─────────── */
.hero-stats-strip .s-num {
  font-size: clamp(2.6rem, 4.5vw, 3.6rem) !important;
  letter-spacing: -0.04em !important;
  font-weight: 900 !important;
}
.hero-stats-strip .s-label {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #374151 !important;
  letter-spacing: 0 !important;
}
.hero-stats-strip .s-sub {
  font-size: 0.75rem !important;
  color: #9ca3af !important;
  margin-top: 4px !important;
}

/* ── W4. SECTION LABEL — sharper uppercase ───────────────── */
.section-label {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
}

/* ── W5. SECTION TITLE — tighter, bolder ─────────────────── */
.section-title {
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
}

/* ── W6. CARDS — sharper borders, refined radius ─────────── */
.category-segment,
.use-case-card,
.feature-card:not(.featured) {
  border-radius: 16px !important;
  border: 1px solid rgba(229,231,235,0.8) !important;
}
.category-segment {
  border: 1px solid rgba(245,129,32,0.12) !important;
}

/* ── W7. HERO STATS STRIP — refined divider ──────────────── */
.hero-stats-strip {
  padding: 52px 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
}
.hero-stats-strip .stat-col + .stat-col::before {
  background: linear-gradient(to bottom, transparent, #e5e7eb, transparent) !important;
}

/* ── W8. FOOTER — refined typography ────────────────────── */
footer {
  background: #0C1627 !important;
}
.footer-section h4 {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.35) !important;
  margin-bottom: 1.25rem !important;
}
.footer-links a {
  color: rgba(255,255,255,0.62) !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  transition: color 0.18s ease !important;
}
.footer-links a:hover { color: #ffffff !important; }

/* ── W9. NAV — refined link typography ───────────────────── */
.nav-links a, .nav-link {
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  letter-spacing: 0 !important;
  transition: color 0.18s ease !important;
}
.nav-links a:hover, .nav-link:hover { color: #0C1627 !important; }

/* ── W10. SUBCATEGORY CARDS — polished ───────────────────── */
.subcategory-card {
  border-left-width: 3px !important;
  border-radius: 10px !important;
}
.subcategory-title {
  font-size: 1.05rem !important;
  letter-spacing: -0.01em !important;
}

/* ── W11. ANNOUNCEMENT BAR — cleaner ────────────────────── */
.announce-bar {
  font-size: 0.8rem !important;
  letter-spacing: 0.01em !important;
}

/* ── W12. BUTTON REFINEMENT ─────────────────────────────── */
.btn {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  border-radius: 8px !important;
}
.btn-primary, .btn-orange {
  box-shadow: 0 2px 8px rgba(245,129,32,0.25) !important;
}

/* ── W13. HERO EYEBROW — refined ────────────────────────── */
.hero-eyebrow {
  font-size: clamp(0.78rem, 1vw, 0.9rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  color: rgba(255,255,255,0.55) !important;
}

/* ── W14. DARK SECTION STATS ────────────────────────────── */
.stats .stat-number,
.stats .stat-val,
.stats-section .stat-number {
  font-size: clamp(2.8rem, 5vw, 4rem) !important;
  letter-spacing: -0.04em !important;
}

/* ── W15. SMOOTH SCROLL HIGHLIGHT ──────────────────────── */
::selection {
  background: rgba(245,129,32,0.18);
  color: #0C1627;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */
@media (min-width: 1400px) {
  .coming-soon-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) and (min-width: 769px) {
  .coming-soon-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .use-case-card { padding: 2rem 1.5rem; }
}
@media (max-width: 768px) {
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; }
  .coming-soon-grid { grid-template-columns: 1fr !important; }
  .use-case-card { padding: 1.75rem 1.25rem; }
  .hria-icon { width: 48px !important; height: 48px !important; }
}
@media (max-width: 380px) {
  .use-case-card { padding: 1.5rem 1rem; }
}
@media (hover: none) {
  .hria-tilt, .use-case-card,
  .feature-card, .category-segment {
    transform: none !important;
  }
}

/* ── Subtitle centering ─────────────────────────────────── */
.subtitle-text {
  text-align: center !important;
  width: 100% !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── 32. SPLIT CARD HOVER (replaces inline onmouseover) ──── */
.split-card-core,
.split-card-recruit {
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.35s cubic-bezier(0.16,1,0.3,1) !important;
}
.split-card-core:hover,
.split-card-recruit:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.28) !important;
}

/* ── 33. VIDEO WRAP 3D HOVER (replaces inline onmouseover) ── */
.split-card-video-wrap:hover {
  transform: perspective(1200px) rotateY(0deg) rotateX(0deg) !important;
}

/* ── 34. FOOTER LINK HOVER ──────────────────────────────── */
.footer-powered a:hover { opacity: 0.8 !important; }
.footer-copyright a { text-decoration: none !important; }
.footer-copyright a:hover { text-decoration: underline !important; }

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hria-reveal, .float-card,
  .announce-ticker, .chip,
  .live-dot, .status-indicator,
  .integ-label-dot {
    animation: none !important;
    transition: none !important;
  }
  .hria-reveal { opacity: 1 !important; transform: none !important; }
  body { animation: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   DEEP PROFESSIONAL LAYER — v4
   Stop visual noise · Fix font hierarchy · Add genuine wow
   ═══════════════════════════════════════════════════════════ */

/* ── N1. STOP heroShimmer on hero::before ─────────────────── */
.hero::before {
  animation: none !important;
  opacity: 0.5 !important;
}
@keyframes heroShimmer { to {} } /* neutralise */

/* ── N2. STOP neural network node / line / drift animations ── */
.neural-node   { animation: none !important; opacity: 0.18 !important; }
.neural-line   { animation: none !important; }
.ai-element    { animation: none !important; opacity: 0.12 !important; }
.neural-network-bg { opacity: 0.18 !important; }

/* ── N3. FIX hero font hierarchy (core & recruit only) ──────── */
/* index.html hero already overridden by hria-kinfolk.css       */
.hero h1:not(.hero-text h1) {
  font-family: 'Inter', sans-serif !important;
  letter-spacing: -0.04em !important;
  line-height: 1.06 !important;
}
/* Core / Recruit product page hero h1 */
.hero h1 {
  font-family: 'Inter', sans-serif !important;
  letter-spacing: -0.04em !important;
  line-height: 1.06 !important;
}
.hero h1 .gradient-text {
  font-family: 'Inter', sans-serif !important;
}
/* Suppress Playfair import font from showing in any headline */
h1, h2, h3 {
  font-family: 'Inter', sans-serif !important;
}

/* ── N4. PLATFORM SHOWCASE CARDS — refined hover & shape ──── */
.platform-showcase-card.platform-left,
.platform-showcase-card.platform-right {
  border-radius: 24px !important;
}
.platform-showcase-card:hover {
  transform: translateY(-5px) !important;
  box-shadow:
    0 16px 48px rgba(12,22,39,0.14),
    0 0 0 1px rgba(12,22,39,0.1) !important;
}
.platform-showcase-card:hover .platform-showcase-description {
  border-left-color: transparent !important;
  padding-left: var(--spacing-md, 1rem) !important;
}

/* ── N5. SECURITY CARDS — controlled hover ────────────────── */
.security-card:hover .security-card-inner {
  transform: translateY(-5px) !important;
  box-shadow:
    0 14px 40px rgba(245,129,32,0.16),
    0 0 0 1px rgba(245,129,32,0.22) !important;
}
.security-card-inner {
  transition:
    transform 0.28s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.28s cubic-bezier(0.16,1,0.3,1) !important;
}

/* ── N6. HRIA GRADIENT LINK — no scale/glow on hover ─────── */
.hria-gradient:hover {
  transform: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* ── N7. PROBLEM-SOLUTION BOX — lighter, cleaner border ───── */
.problem-solution-body {
  border: 1px solid rgba(245,129,32,0.15) !important;
  border-top: 3px solid #F58120 !important;
  box-shadow: 0 8px 32px rgba(12,22,39,0.06) !important;
}

/* ── N8. HERO EXTENDED DESC — remove duplicate glow line ───── */
.hero-extended-description::before {
  display: none !important;
}
.hero-extended-description {
  background: rgba(255,255,255,0.055) !important;
  border-left: 3px solid rgba(245,129,32,0.75) !important;
  border-radius: 0 8px 8px 0 !important;
  box-shadow: none !important;
}

/* ── N9. CATEGORY SEGMENT — no jump hover ────────────────── */
.category-segment:hover {
  transform: none !important;
  box-shadow: 0 6px 22px rgba(245,129,32,0.1) !important;
}

/* ── N10. PLATFORM BENEFITS — no translateX slide ────────── */
.platform-benefit {
  border-radius: 12px !important; /* remove the 16px 4px alternating radius */
}
.platform-benefit:hover {
  transform: none !important;
  padding-left: 1.35rem !important;
  box-shadow: none !important;
  background: rgba(12,22,39,0.04) !important;
}

/* ── N11. CATEGORY SEGMENT — uniform radius ─────────────── */
.category-segment { border-radius: 16px !important; }

/* ── N12. PLATFORM CARD DESCRIPTION HOVER — no jump ────────── */
.platform-showcase-card:hover .platform-showcase-description {
  border-left-color: transparent !important;
}

/* ── N13. SECTION TITLE — stop shimmer underbar ──────────── */
.section-title::after,
.section-header h2::after {
  animation: none !important;
}

/* ── N14. HERO STATS STRIP NUMBERS — crisper rendering ────── */
.hero-stats-strip .s-num {
  -webkit-text-fill-color: transparent !important;
  font-variant-numeric: tabular-nums !important;
}

/* ── N15. ANNOUNCE BAR — cleaner ticker spacing ─────────── */
.announce-bar { gap: 0 !important; }

/* ────────────────────────────────────────────────────────────
   GENUINE "WOW" ADDITIONS — Premium enterprise B2B grade
   ──────────────────────────────────────────────────────────── */

/* ── P1. HERO — dark glass texture on the gradient bg ───── */
.hero {
  background:
    linear-gradient(135deg, #080F1C 0%, #0C1627 40%, #0C1627 70%, #0C1627 100%) !important;
}

/* ── P2. HERO — CTA button gets a stronger presence ─────── */
.hero-cta .btn-hero-primary,
.kf-hero-cta {
  font-size: 0.95rem !important;
  padding: 15px 30px !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 22px rgba(245,129,32,0.38) !important;
  letter-spacing: 0.01em !important;
}

/* ── P3. HERO STATS STRIP — premium border style ────────── */
.hero-stats-strip {
  border-top: none !important;
  border-bottom: 1px solid #ebebeb !important;
  background: #fff !important;
}

/* ── P4. SECTION HEADERS — tighter, more confident ─────── */
.section-header h2,
.section-title {
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.12 !important;
}
.section-description,
.section-header p {
  font-size: 1rem !important;
  color: #6b7280 !important;
  line-height: 1.7 !important;
  max-width: 580px !important;
}

/* ── P5. USE CASE / FEATURE CARDS — clean white elevation ── */
.use-case-card,
.feature-card {
  border: 1px solid rgba(229,231,235,0.7) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(12,22,39,0.05) !important;
  transition:
    transform    0.24s cubic-bezier(0.16,1,0.3,1),
    box-shadow   0.24s cubic-bezier(0.16,1,0.3,1),
    border-color 0.24s ease !important;
}
.use-case-card:hover,
.feature-card:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    0 12px 36px rgba(12,22,39,0.10),
    0 2px 8px rgba(12,22,39,0.05) !important;
  border-color: rgba(245,129,32,0.18) !important;
}

/* ── P6. CTA SECTION — richer dark bg ───────────────────── */
.cta-section {
  background: linear-gradient(135deg, #080F1C 0%, #0C1627 60%, #080F1C 100%) !important;
}
.cta-section h2 {
  letter-spacing: -0.035em !important;
  font-weight: 900 !important;
}

/* ── P7. FOOTER — editorial layout refinement ───────────── */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  padding-top: 1.5rem !important;
}
.footer-copyright {
  font-size: 0.82rem !important;
  color: rgba(255,255,255,0.38) !important;
}

/* ── P8. NAV — sharper presence ─────────────────────────── */
.nav-wrapper, nav#navbar, nav {
  border-bottom: 1px solid rgba(229,231,235,0.55) !important;
}
.nav-wrapper.scrolled, nav#navbar.scrolled, nav.scrolled {
  box-shadow: 0 1px 0 rgba(229,231,235,0.8),
              0 2px 16px rgba(12,22,39,0.05) !important;
}

/* ── P9. INTEGRATION CARDS — cleaner look ───────────────── */
.integ-segment {
  border-radius: 14px !important;
  border: 1px solid rgba(229,231,235,0.8) !important;
  box-shadow: 0 2px 8px rgba(12,22,39,0.05) !important;
  overflow: hidden !important;
}
.integ-segment-header {
  border-bottom: none !important;
}

/* ── P10. PRODUCT SPLIT CARDS — static top border accent ── */
/* The animated stripe divs remain in HTML but animation stopped */
.split-card-core   [style*="stripeSlide"],
.split-card-recruit [style*="stripeSlide"] {
  animation: none !important;
  background: linear-gradient(90deg, #F58120, #F58120) !important;
  background-size: 100% !important;
}

/* ── P11. STEP CARDS — sharper look ─────────────────────── */
.step-card { transition: none !important; }
.step-icon-wrap {
  border-radius: 20px !important;
  transition: box-shadow 0.22s ease !important;
}

/* ── P12. LIVE / STATUS DOT — refined pulse ─────────────── */
.live-dot, .status-indicator {
  box-shadow: 0 0 0 0 rgba(245,129,32, 0.4);
  animation: livePulseRefined 2.2s ease-in-out infinite !important;
}
@keyframes livePulseRefined {
  0%   { box-shadow: 0 0 0 0   rgba(245,129,32, 0.35); }
  60%  { box-shadow: 0 0 0 6px rgba(245,129,32, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(245,129,32, 0);    }
}

/* ── P13. FLOAT CARDS on product pages — cleaner ────────── */
.float-card {
  backdrop-filter: none !important;
  background: #ffffff !important;
  border: 1px solid rgba(229,231,235,0.9) !important;
  box-shadow:
    0 6px 24px rgba(12,22,39,0.09),
    0 1px 4px rgba(12,22,39,0.06) !important;
}

/* ── P14. PROBLEM-SOLUTION SECTION — refined bg ─────────── */
.problem-solution {
  background: #ffffff !important;
}
.solution-shift {
  background: rgba(245,129,32,0.05) !important;
  border-left: 3px solid #F58120 !important;
  border-radius: 0 12px 12px 0 !important;
}

/* ── P15. PLATFORM SHOWCASE HEADER — remove inner line ─── */
.platform-showcase-header::after {
  display: none !important;
}

/* ── P16. SECURITY ICON — refined icon bg ───────────────── */
.security-icon {
  background: rgba(245,129,32,0.07) !important;
  border-radius: 18px !important;
}

/* ── P17. HERO-STATS — precise number rendering ─────────── */
.s-num {
  font-feature-settings: 'tnum' 1 !important;
}

/* ── P18. SECTION BACKGROUNDS — subtle banding ──────────── */
.use-cases,
.platforms { background: #fafafa !important; }
.features  { background: #ffffff !important; }

/* ── P19. KINFOLK STICKY SECTION DOT BG — subtler ────────── */
.kf-sticky-section {
  background-image: radial-gradient(circle, rgba(12,22,39,0.04) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
}

/* ── P20. GLOBAL HEADINGS — tighter tracking ─────────────── */
h1, h2 {
  letter-spacing: -0.03em;
  font-weight: 800;
}


/* ── N16. CORE.HTML — stop stats section blob ────────────── */
.stats-section::before {
  opacity: 0.08 !important;
}
/* ── N17. CTA GLOW DIV — softer ──────────────────────────── */
.cta-glow {
  opacity: 0.25 !important;
  filter: blur(100px) !important;
}
/* ── N18. STEP ICON WRAP — remove glow ring animations ───── */
.step-icon-wrap::before,
.step-icon-wrap::after {
  display: none !important;
}
/* ── N19. FEATURE CARD PSEUDO BORDERS — simplify ────────── */
.feature-card::before {
  opacity: 0 !important;
  transition: opacity 0.22s ease !important;
}
.feature-card:hover::before { opacity: 0.7 !important; }
/* ── N20. PLATFORM SHOWCASE HEADER LINE — remove ─────────── */
.platform-showcase-header::after { display: none !important; }


/* ═══════════════════════════════════════════════════════════
   FONT & TEXT COLOR SYSTEM — Clean Professional Hierarchy
   ═══════════════════════════════════════════════════════════ */

/* ── T1. GLOBAL HEADING COLORS ─────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif !important;
  color: #0C1627;
}
/* On dark backgrounds, headings are white */
.hero h1, .hero h2,
.stats h1, .stats h2, .stats h3,
.stats-section h1, .stats-section h2,
.cta-section h1, .cta-section h2,
footer h1, footer h2, footer h3, footer h4 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
/* Stat numbers on dark — orange gradient */
.stats .stat-number,
.stats-section .stat-val,
.stats-section .stat-number {
  background: linear-gradient(135deg, #F58120, #F9A040) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── T2. BODY TEXT COLORS ───────────────────────────────────── */
body { color: #374151; }
p    { color: #374151; }

/* ── T3. HERO TEXT ──────────────────────────────────────────── */
.hero-text p,
.hero p {
  color: rgba(255,255,255,0.72) !important;
}
.hero-eyebrow {
  color: rgba(255,255,255,0.60) !important;
}
/* Hero stat strip numbers */
.hero-stats-strip .s-num {
  background: linear-gradient(135deg, #F58120, #F9A040) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.hero-stats-strip .s-label { color: #374151 !important; }
.hero-stats-strip .s-sub   { color: #9ca3af !important; }

/* ── T4. SECTION DESCRIPTIONS ───────────────────────────────── */
.section-description,
.section-header p {
  color: #6b7280 !important;
}

/* ── T5. NAV LINKS ──────────────────────────────────────────── */
.nav-link, .nav-links a {
  color: #6b7280 !important;
}
.nav-link:hover, .nav-links a:hover {
  color: #0C1627 !important;
}

/* ── T6. FOOTER TEXT ────────────────────────────────────────── */
footer { color: rgba(255,255,255,0.65); }
.footer-mission { color: rgba(255,255,255,0.55) !important; }
.footer-links a { color: rgba(255,255,255,0.62) !important; }
.footer-links a:hover { color: #ffffff !important; }
.footer-section h4 {
  color: rgba(255,255,255,0.35) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
.footer-copyright {
  color: rgba(255,255,255,0.35) !important;
  font-size: 0.8rem !important;
}
.footer-copyright a { color: #F58120 !important; }

/* ── T7. CARD TEXT ──────────────────────────────────────────── */
.use-case-card h3, .use-case-card .card-title { color: #0C1627 !important; }
.use-case-card p,  .use-case-card .card-desc  { color: #6b7280 !important; }
.feature-card h3, .feature-card .feature-title { color: #0C1627 !important; }
.feature-card.featured h3 { color: #ffffff !important; }
.security-title { color: #0C1627 !important; }
.security-description { color: #6b7280 !important; }

/* ── T8. SUBCATEGORY TEXT ───────────────────────────────────── */
.subcategory-title { color: #F58120 !important; }
.subcategory-description { color: #374151 !important; }
.category-title { color: #0C1627 !important; }

/* ── T9. CHIP / BADGE TEXT ──────────────────────────────────── */
.chip { color: #F58120 !important; border-color: rgba(245,129,32,0.3) !important; }
.chip .dot { background: #F58120 !important; }

/* ── T10. ANNOUNCE BAR ──────────────────────────────────────── */
.announce-bar { background: #0C1627 !important; color: rgba(255,255,255,0.80) !important; }
.announce-bar strong { color: #ffffff !important; }
.announce-bar a.announce-cta { color: #F58120 !important; }

/* ── T11. PRODUCT BAR (core/recruit pages) ──────────────────── */
.product-bar {
  background: linear-gradient(90deg, #0C1627, #14243F) !important;
  color: rgba(255,255,255,0.72) !important;
}
.product-bar strong { color: #F58120 !important; }
.product-bar a { color: rgba(255,255,255,0.88) !important; }
.product-bar a:hover { color: #F58120 !important; }

/* ── T12. PLATFORM SHOWCASE ─────────────────────────────────── */
.platform-showcase-title { color: #0C1627 !important; }
.platform-showcase-description { color: #6b7280 !important; }
.platform-showcase-tagline {
  background: linear-gradient(135deg, #0C1627, #1A2E52) !important;
  color: #ffffff !important;
}
.benefit-number {
  background: linear-gradient(135deg, #0C1627, #1A2E52) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.benefit-content h4 { color: #0C1627 !important; }
.benefit-content p  { color: #6b7280 !important; }

/* ── T13. INTEGRATION SEGMENT LABELS ───────────────────────── */
.integ-segment-label { color: #ffffff !important; }
.integ-icon-name { color: #374151 !important; }

/* ── T14. STATS SECTION (dark) ──────────────────────────────── */
.stat-label  { color: #ffffff !important; }
.stat-detail { color: rgba(255,255,255,0.65) !important; }
.roi-title   { color: #ffffff !important; }
.roi-subtitle { color: rgba(255,255,255,0.65) !important; }

/* ── T15. PROBLEM-SOLUTION ──────────────────────────────────── */
.problem-text { color: #374151 !important; }
.shift-label  { color: #F58120 !important; }
.shift-text   { color: #374151 !important; }
.shift-text strong { color: #0C1627 !important; }

/* ── T16. USE CASE SECTION LABEL ────────────────────────────── */
.status-text { color: rgba(255,255,255,0.65) !important; }

/* ── T17. RECRUIT — GREEN SYSTEM ────────────────────────────── */
/* WhatsApp-specific elements keep brand green */
.live-badge { 
  background: rgba(245,129,32,0.1) !important;
  border-color: rgba(245,129,32,0.2) !important;
  color: #F58120 !important;
}
/* On recruit.html, override live-badge to green */

/* ── T18. CTA SECTION TEXT ──────────────────────────────────── */
.cta-section p { color: rgba(255,255,255,0.75) !important; }

/* ── T19. KINFOLK HEADLINE ──────────────────────────────────── */
#kf-loader-text {
  background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.7) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
#kf-loader-sub { color: rgba(255,255,255,0) !important; }
#kf-loader-sub.kf-visible { color: rgba(255,255,255,0.45) !important; }

/* ── T20. HRIA HEADLINE GRADIENT (hero "HRIA,") ─────────────── */
.hria-headline-font {
  font-family: 'TAN Ashford', 'Georgia', serif !important;
}
a.hria-gradient {
  background: linear-gradient(135deg, #F58120, #F9A040) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}