/* KlinMind — головна сторінка-банер. Палітра з логотипу. */
:root {
  --km-petrol: #062E38;
  --km-petrol-2: #0A3D4C;
  --km-deep: #041F26;
  --km-teal: #0F7C7C;
  --km-mint: #7FD1B5;
  --km-mint-soft: #D7F2E8;
  --km-mint-bg: #F2FAF7;
  --km-amber: #F2B35B;
  --km-on-dark: #CFE3E0;
  --km-ink-soft: #3F5F66;
}
.kd { font-family: 'Unbounded', 'Manrope', sans-serif; letter-spacing: -0.01em; }
.home { color: var(--km-petrol); overflow-x: hidden; }
.home h1, .home h2, .home h3 { letter-spacing: -0.015em; }

/* pill buttons */
.btn-pill { border-radius: 999px; min-height: 52px; padding: 0 1.6rem; font-weight: 800; }
.btn-pill.btn-lg { min-height: 58px; font-size: 1.06rem; }
.btn-mint { --bs-btn-bg: var(--km-mint); --bs-btn-color: var(--km-petrol); --bs-btn-border-color: var(--km-mint);
  --bs-btn-hover-bg: #9BDDC6; --bs-btn-hover-color: var(--km-petrol); --bs-btn-hover-border-color: #9BDDC6;
  --bs-btn-active-bg: #6BC3A6; --bs-btn-active-color: var(--km-petrol); }
.btn-ghost-light { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.5); --bs-btn-hover-bg: rgba(255,255,255,.1);
  --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #fff; --bs-btn-active-bg: rgba(255,255,255,.18); --bs-btn-active-color: #fff; border-width: 1.5px; }
.btn-petrol { --bs-btn-bg: var(--km-petrol); --bs-btn-color: #fff; --bs-btn-border-color: var(--km-petrol);
  --bs-btn-hover-bg: var(--km-petrol-2); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--km-petrol-2);
  --bs-btn-active-bg: var(--km-deep); --bs-btn-active-color: #fff; }

/* hero */
.hero { position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(55% 70% at 88% 30%, rgba(127,209,181,.38) 0%, rgba(127,209,181,0) 62%),
              radial-gradient(45% 60% at 0% 100%, rgba(15,124,124,.55) 0%, rgba(15,124,124,0) 70%), var(--km-petrol); }
.hero-leaf { position: absolute; right: -120px; bottom: -160px; width: 520px; opacity: .14; pointer-events: none; }
.hero .navbar .nav-link { color: #fff; font-weight: 600; border-radius: 999px; padding: .55rem 1rem; }
.hero .navbar .nav-link:hover, .hero .navbar .nav-link:focus-visible { background: rgba(255,255,255,.1); color: #fff; }
.hero-navpill { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 6px; }
.logo-disc { width: 48px; height: 48px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 4px rgba(127,209,181,.25); flex-shrink: 0; }
.logo-disc img { width: 78%; height: 78%; }
.hero .navbar-toggler { border-color: rgba(255,255,255,.35); border-radius: 12px; }
.hero .navbar-toggler-icon { filter: invert(1); }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: rgba(127,209,181,.16); border: 1px solid rgba(127,209,181,.4); font-size: .875rem; font-weight: 700; color: #BFEBDB; }
.dot-amber { width: 8px; height: 8px; border-radius: 50%; background: var(--km-amber); display: inline-block; }
.hero h1 { font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: 1.06; font-weight: 700; }
.hero h1 em { font-style: normal; color: var(--km-mint); }
.hero-lead { font-size: 1.2rem; line-height: 1.6; color: var(--km-on-dark); max-width: 540px; }
.hero-trust { color: var(--km-on-dark); font-size: .9rem; }
.hero-trust svg { width: 18px; height: 18px; stroke: var(--km-mint); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* art */
.hero-art { position: relative; height: 540px; }
.hero-art-inner { position: absolute; inset: 0; }
.art-ring, .art-core, .art-leaves { position: absolute; left: 50%; top: 50%; border-radius: 50%; }
.art-ring { width: 440px; height: 440px; margin: -220px 0 0 -220px; background: conic-gradient(from 210deg, #7FD1B5, #0F7C7C, #0A3D4C, #7FD1B5); }
.art-core { width: 400px; height: 400px; margin: -200px 0 0 -200px; background: var(--km-petrol-2); }
.art-leaves { width: 400px; height: 400px; margin: -200px 0 0 -200px; border-radius: 0; }
.art-logo { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -150px 0 0 20px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 40px rgba(0,0,0,.25); }
.art-logo img { width: 88px; height: 88px; }
.float-card { position: absolute; padding: 16px; border-radius: 18px; background: #fff; color: var(--km-petrol); box-shadow: 0 24px 50px rgba(0,0,0,.25); }
.float-card .lbl { font-size: .75rem; font-weight: 700; color: var(--km-ink-soft); }
.chip { display: inline-block; padding: 6px 10px; border-radius: 8px; font-weight: 800; font-size: .875rem; }
.chip-free { border: 1.5px solid var(--km-teal); color: var(--km-teal); }
.chip-sel { background: var(--km-teal); color: #fff; }
.chip-busy { background: #E9EEF0; color: #5C7076; text-decoration: line-through; font-weight: 500; }
.bubble { position: absolute; max-width: 230px; padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: var(--km-mint);
  color: var(--km-petrol); font-size: .875rem; font-weight: 700; box-shadow: 0 20px 40px rgba(0,0,0,.2); }
@keyframes kmFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
.floaty { animation: kmFloat 6s ease-in-out infinite; }
.floaty-2 { animation: kmFloat 7s ease-in-out infinite; animation-delay: -3s; }

/* ticker */
.ticker { background: var(--km-mint); color: var(--km-petrol); overflow: hidden; padding: 18px 0; }
.ticker-track { display: flex; gap: 40px; white-space: nowrap; width: max-content; animation: kmTick 40s linear infinite; font-size: 1.1rem; font-weight: 600; }
@keyframes kmTick { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* sections */
.eyebrow-teal { font-size: .875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--km-teal); }
.sec-title { font-size: clamp(1.75rem, 3vw, 2.65rem); line-height: 1.15; font-weight: 700; }
.dir-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 18px; min-height: 420px; height: 100%;
  padding: 40px; border-radius: 28px; text-decoration: none; transition: transform .2s ease; }
.dir-card:hover { transform: translateY(-4px); }
.dir-card .num { font-size: 4rem; font-weight: 700; line-height: 1; }
.dir-card h3 { font-size: 2rem; font-weight: 700; margin: 0; }
.dir-dark { background: var(--km-petrol); color: #fff; }
.dir-dark:hover { color: #fff; }
.dir-dark .num { color: var(--km-mint); }
.dir-dark p { color: var(--km-on-dark); }
.dir-light { background: var(--km-mint-soft); color: var(--km-petrol); }
.dir-light:hover { color: var(--km-petrol); }
.dir-light .num { color: var(--km-teal); }
.dir-light p { color: #24474F; }
.tag-dark { padding: 8px 14px; border-radius: 999px; background: rgba(127,209,181,.16); color: #BFEBDB; font-size: .875rem; font-weight: 700; }
.tag-light { padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--km-teal); font-size: .875rem; font-weight: 800; }
.tag-light.on { background: var(--km-teal); color: #fff; }
.dir-cta { margin-top: auto; align-self: flex-start; min-height: 52px; display: inline-flex; align-items: center; padding: 0 24px; border-radius: 999px; font-weight: 800; }
.dir-dark .dir-cta { background: var(--km-mint); color: var(--km-petrol); }
.dir-light .dir-cta { background: var(--km-petrol); color: #fff; }
.deco { position: absolute; pointer-events: none; }

.sup-banner { position: relative; overflow: hidden; border-radius: 28px; background: var(--km-amber); color: var(--km-petrol); padding: 48px; }
.feat { padding: 28px; border-radius: 22px; background: var(--km-mint-bg); height: 100%; }
.feat-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--km-mint); display: flex; align-items: center; justify-content: center; }
.feat-ico svg { width: 24px; height: 24px; stroke: var(--km-petrol); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.feat p, .step p { color: var(--km-ink-soft); }
.step-num { display: inline-flex; width: 64px; height: 64px; border-radius: 50%; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; }
.ann-card { border-radius: 22px; border: 1px solid #DCEFE8; padding: 24px; height: 100%; background: #fff; }
.ann-date { font-weight: 800; color: var(--km-teal); font-size: .875rem; }
.cta-band { position: relative; overflow: hidden; border-radius: 32px; padding: 64px 48px; text-align: center; color: #fff;
  background: radial-gradient(60% 80% at 50% 0%, rgba(127,209,181,.45) 0%, rgba(127,209,181,0) 70%), var(--km-petrol); }
.cta-band p { color: var(--km-on-dark); }
.home-footer { background: var(--km-deep); color: var(--km-on-dark); }
.home-footer a { color: #fff; }

@media (max-width: 991.98px) {
  .hero .navbar-collapse { background: #fff; border-radius: 18px; padding: 8px 16px 16px; margin-top: 12px; }
  .hero .navbar-collapse .nav-link { color: var(--km-petrol); min-height: 48px; display: flex; align-items: center; border-radius: 0; border-bottom: 1px solid #E3F4EE; }
  .hero-navpill { background: transparent; border: 0; padding: 0; }
  .hero .navbar-collapse .btn-ghost-light { --bs-btn-color: var(--km-petrol); --bs-btn-border-color: #C5D9D5; }
}
@media (max-width: 767.98px) {
  .hero-art { height: 290px; overflow: hidden; }
  .hero-art-inner { height: 540px; transform: scale(.54); transform-origin: center top; }
  .hero-art .float-card, .hero-art .bubble { display: none; }
  .dir-card { min-height: 0; padding: 24px; border-radius: 24px; }
  .dir-card .deco { display: none; }
  .dir-card .num { font-size: 2.5rem; }
  .dir-card h3 { font-size: 1.4rem; }
  .sup-banner, .cta-band { padding: 28px 22px; border-radius: 24px; }
  .btn-pill.btn-lg { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track, .floaty, .floaty-2 { animation: none; }
  .dir-card { transition: none; }
}

/* ---------- v3: two audiences ---------- */
.hero-eyebrow { font-size: .8rem; font-weight: 600; letter-spacing: .18em; color: var(--km-mint); }
.hero h1 .l2 { color: var(--km-mint); display: block; }
.cta-2 { min-height: 64px; display: inline-flex; flex-direction: column; justify-content: center; padding: 8px 28px; border-radius: 20px;
  text-decoration: none; color: var(--km-petrol); transition: transform .15s ease; }
.cta-2:hover { transform: translateY(-2px); color: var(--km-petrol); }
.cta-2 b { font-weight: 800; font-size: 1.06rem; }
.cta-2 small { font-size: .8rem; font-weight: 600; }
.cta-2.mint { background: var(--km-mint); }
.cta-2.white { background: #fff; }
.cta-2.white small { color: var(--km-ink-soft); }
.who { position: relative; z-index: 3; margin-top: -44px; }
.who-inner { background: #fff; border-radius: 24px; box-shadow: 0 20px 50px rgba(6,46,56,.14); padding: 12px; }
.who a { min-height: 72px; display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-radius: 16px; text-decoration: none; color: var(--km-petrol); height: 100%; }
.who a:hover { color: var(--km-petrol); filter: brightness(.98); }
.who .ico { flex: 0 0 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.who .ico svg { width: 22px; height: 22px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.who-acad { background: var(--km-mint-bg); }
.who-acad .ico { background: var(--km-petrol); } .who-acad .ico svg { stroke: var(--km-mint); }
.who-cons { background: #FFF6E8; }
.who-cons .ico { background: var(--km-amber); } .who-cons .ico svg { stroke: var(--km-petrol); }
.aud-block { position: relative; overflow: hidden; border-radius: 32px; padding: 56px; }
.aud-acad { background: var(--km-petrol); color: #fff; }
.aud-cons { background: #FFF6E8; color: var(--km-petrol); }
.aud-eyebrow { font-size: .8rem; font-weight: 600; letter-spacing: .16em; }
.aud-acad .aud-eyebrow { color: var(--km-mint); }
.aud-cons .aud-eyebrow { color: #8A4B00; }
.aud-acad .lead-txt { color: var(--km-on-dark); }
.aud-cons .lead-txt { color: var(--km-ink-soft); }
.offer { height: 100%; padding: 28px; border-radius: 22px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.aud-acad .offer { background: rgba(255,255,255,.06); border: 1px solid rgba(127,209,181,.25); color: #fff; }
.aud-acad .offer:hover { background: rgba(255,255,255,.1); color: #fff; }
.aud-acad .offer p { color: var(--km-on-dark); }
.aud-acad .offer .big { font-size: 2.2rem; font-weight: 700; color: var(--km-mint); }
.aud-cons .offer { background: #fff; color: var(--km-petrol); }
.aud-cons .offer:hover { color: var(--km-petrol); box-shadow: 0 10px 30px rgba(6,46,56,.08); }
.aud-cons .offer p { color: var(--km-ink-soft); }
.offer h3 { font-size: 1.25rem; font-weight: 800; margin: 0; }
.offer p { margin: 0; font-size: .95rem; line-height: 1.55; }
.cons-trust { color: var(--km-ink-soft); font-size: .95rem; }
.cons-trust svg { width: 18px; height: 18px; fill: none; stroke: var(--km-teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-amber { --bs-btn-bg: var(--km-amber); --bs-btn-color: var(--km-petrol); --bs-btn-border-color: var(--km-amber);
  --bs-btn-hover-bg: #F5C27A; --bs-btn-hover-color: var(--km-petrol); --bs-btn-hover-border-color: #F5C27A;
  --bs-btn-active-bg: #E8A33F; --bs-btn-active-color: var(--km-petrol); }
@media (max-width: 767.98px) {
  .aud-block { padding: 24px; border-radius: 24px; }
  .cta-2 { width: 100%; border-radius: 18px; }
  .who a { padding: 10px 12px; gap: 10px; }
  .who .ico { flex-basis: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .cta-2 { transition: none; } }

/* bell and logo on the dark hero */
.hero .km-bell { color: #fff; }
.hero .km-bell:hover, .hero .km-bell:focus-visible { background: rgba(255,255,255,.12); color: #fff; }
.hero .km-bell-count { box-shadow: 0 0 0 2px var(--km-petrol); }
.art-logo img { width: 84px; height: 84px; }