/* Kleverbrand — shared site styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700;800&display=swap');

html { scroll-behavior: smooth; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }

h1, h2, h3, .font-serif { font-family: 'Playfair Display', Georgia, serif; }

/* Hero / section soft background wash */
.kb-wash {
  background:
    radial-gradient(60% 60% at 85% 0%, rgba(46,144,217,0.10) 0%, rgba(46,144,217,0) 60%),
    linear-gradient(180deg, #F4F9FD 0%, #FFFFFF 70%);
}
.kb-wash-soft {
  background: linear-gradient(180deg, #F7FAFC 0%, #FFFFFF 100%);
}

/* Subtle "paper" texture for otherwise plain-white sections — keeps them from feeling clinical.
   White cards (kb-card) sit on top and pop slightly for added depth. */
.kb-paper {
  background-color: #fff;
  background-image:
    radial-gradient(rgba(21,115,185,0.06) 1.2px, transparent 1.5px),
    radial-gradient(60% 50% at 100% 0%, rgba(46,144,217,0.06) 0%, rgba(46,144,217,0) 60%);
  background-size: 24px 24px, 100% 100%;
  background-position: 0 0, 0 0;
}
/* Give kb-wash-soft sections a faint accent glow too */
.kb-wash-soft {
  background:
    radial-gradient(50% 40% at 0% 100%, rgba(21,115,185,0.05) 0%, rgba(21,115,185,0) 60%),
    linear-gradient(180deg, #F7FAFC 0%, #FFFFFF 100%);
}

/* Pill label */
.kb-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #1573B9; background: #E8F2FB; padding: .4rem .75rem; border-radius: 999px;
}

/* Cards */
.kb-card {
  background: #fff; border: 1px solid #E5EBF1; border-radius: 18px;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.kb-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px -20px rgba(14,39,64,0.28); border-color: #CFE0EE; }

/* Blue solid card */
.kb-card-blue {
  background: linear-gradient(160deg, #1573B9 0%, #0F5C95 100%);
  border-radius: 18px; color: #fff;
  transition: transform .35s ease, box-shadow .35s ease;
}
.kb-card-blue:hover { transform: translateY(-4px); box-shadow: 0 24px 55px -22px rgba(15,92,149,0.6); }

/* Buttons */
.kb-btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #1573B9; color: #fff; font-weight: 600; font-size: 15px;
  padding: .8rem 1.5rem; border-radius: 12px; transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 10px 24px -12px rgba(21,115,185,0.7);
}
.kb-btn-primary:hover { background: #0F5C95; transform: translateY(-1px); }
.kb-btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #fff; color: #0E2740; font-weight: 600; font-size: 15px;
  padding: .8rem 1.4rem; border-radius: 12px; border: 1px solid #D7E2EC; transition: border-color .25s ease, transform .25s ease;
}
.kb-btn-ghost:hover { border-color: #1573B9; transform: translateY(-1px); }

/* Nav */
.kb-nav-link { color: #48586A; font-size: 14.5px; font-weight: 500; transition: color .2s ease; }
.kb-nav-link:hover { color: #0E2740; }

/* Highlight word in headings */
.kb-hl { color: #1573B9; }

/* Reveal on scroll */
.kb-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.kb-reveal.kb-in { opacity: 1; transform: none; }

/* Marquee for logo carousel */
@keyframes kb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.kb-marquee { display: flex; width: max-content; animation: kb-marquee 38s linear infinite; }
.kb-marquee-wrap:hover .kb-marquee { animation-play-state: paused; }

/* Subtle grid texture */
.kb-grid-texture {
  background-image: linear-gradient(rgba(21,115,185,0.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(21,115,185,0.06) 1px, transparent 1px);
  background-size: 38px 38px;
}

/* Dashboard mock pieces */
.kb-bar { background: linear-gradient(180deg, #2E90D9, #1573B9); border-radius: 4px 4px 2px 2px; }
.kb-dot { width: 9px; height: 9px; border-radius: 999px; }

/* Dropdown */
.kb-dropdown { opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .2s ease; }
.kb-has-dropdown:hover .kb-dropdown { opacity: 1; visibility: visible; transform: none; }
/* Keyboard access: open dropdown when the trigger or its menu has focus */
.kb-has-dropdown:focus-within .kb-dropdown { opacity: 1; visibility: visible; transform: none; }

/* ===== Accessibility ===== */
:focus-visible { outline: 2px solid #1573B9; outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .kb-reveal { opacity: 1 !important; transform: none !important; }
  .kb-marquee { animation: none !important; }
}