/* ============================================================
   Keen Flows, website UI kit styles. Composes the design tokens.
   Layout is fully static; animations live only in DS components.
   ============================================================ */

.kfsite { background: var(--color-bg-base); color: var(--color-text-body);
  /* Slightly deeper, cooler off-white so white cards read with more contrast */
  --color-bg-base: #eaecf1;
  --color-bg-panel: #e0e3ea;
  --color-bg-raised: #e4e7ed; }

/* ---------- Cursor-proximity glow ring (mirrors the DS feature cards) ----------
   Rests invisible (--kf-on:0); the small engine in index.html raises it toward 1
   as the cursor nears and places the shine at the nearest point. Masked to a thin
   border ring, orange band only, so it never covers the card content. */
.kfsite-glowcard { --kf-on: 0; --kf-mx: 50%; --kf-my: 50%; --kf-hue: 22; }
.kfsite-glowcard::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.4px; pointer-events: none; z-index: 4;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  background: radial-gradient(180px 180px at var(--kf-mx) var(--kf-my),
    hsl(var(--kf-hue) 100% 56% / calc(var(--kf-on) * 0.95)) 0%, transparent 62%);
  filter: brightness(1.2);
}

/* ---------- Nav ---------- */
.kfsite-nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  transition: background var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              backdrop-filter var(--duration-base) var(--ease-standard);
  border-bottom: 1px solid transparent;
}
.kfsite-nav.is-scrolled {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: var(--color-border);
}
.kfsite-nav__inner { display: flex; align-items: center; gap: var(--space-6); height: 72px; }
.kfsite-brand { display: inline-flex; align-items: center; gap: 10px; }
.kfsite-brand__mark { height: 30px; width: auto; display: block; }
.kfsite-brand__word { font-family: var(--font-display); font-weight: 800; font-size: 19px;
  color: var(--color-text-strong); letter-spacing: -0.01em; }
.kfsite-nav__links { display: flex; align-items: center; gap: var(--space-6); margin-left: var(--space-4); }
.kfsite-nav__link { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-secondary);
  transition: color var(--duration-fast) var(--ease-standard); }
.kfsite-nav__link:hover { color: var(--color-text-strong); }
.kfsite-nav__actions { display: flex; align-items: center; gap: var(--space-5); margin-left: auto; }
.kfsite-nav__burger { display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 9px; margin-left: auto; }
.kfsite-nav__burger span { display: block; height: 2px; width: 100%; border-radius: 2px;
  background: var(--color-text-body);
  transition: transform var(--duration-base) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); }
.kfsite-nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kfsite-nav__burger.is-open span:nth-child(2) { opacity: 0; }
.kfsite-nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.kfsite-nav__mobile { display: none; }

/* ---------- Eyebrow ---------- */
.kfsite-eyebrow { display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-accent); }
.kfsite-eyebrow__dot { width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent); box-shadow: 0 0 10px var(--color-accent); }

/* ---------- Hero ---------- */
.kfsite-hero { position: relative; overflow: hidden; padding: clamp(3rem, 9vw, 7rem) 0 clamp(4rem, 8vw, 6.5rem); }
.kfsite-hero__glow { position: absolute; left: 50%; top: -10%; width: 1100px; height: 700px;
  transform: translateX(-50%); background: var(--gradient-glow); pointer-events: none; z-index: var(--z-base); }
.kfsite-hero__dots { position: absolute; inset: 0; pointer-events: none; z-index: var(--z-base);
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 92%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 92%); }
.kfsite-hero__inner { position: relative; z-index: var(--z-content); text-align: center;
  display: flex; flex-direction: column; align-items: center; }
.kfsite-hero__title { font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1.04; letter-spacing: -0.015em;
  color: var(--color-text-strong); margin: var(--space-5) 0 0; }
/* Gradient applies to each animated word so the clip survives BlurText nesting */
.kfsite-hero__title .kf-gradient-text .kf-blurtext__word {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Rotating headline: the white + orange lines fade in, hold, and fade out with
   a tiny offset between them (--kf-delay on the orange line), then JS swaps to
   the next pair and the @keyframes restarts. Base (no-motion / print) state is
   fully visible so it never blanks; motion only adds on top. Animates only
   opacity/filter/transform, so the orbit graphic, dots, eyebrow and subtitle
   are untouched. */
.kf-hero-rotator { display: inline-block; }
.kf-hero-rotator__line { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .kf-hero-rotator__line {
    opacity: 0;
    animation: kf-hero-line var(--kf-cycle, 12270ms) var(--ease-blur) var(--kf-delay, 0ms) 1 both;
    will-change: opacity, filter, transform;
  }
}
@keyframes kf-hero-line {
  0%          { opacity: 0; filter: blur(12px); transform: translateY(0.22em) scale(0.985); }
  6.2%, 87.7% { opacity: 1; filter: blur(0);    transform: none; }
  /* fade-out completes at 93.9%, then a ~0.75s hidden pause holds to 100% */
  93.9%, 100% { opacity: 0; filter: blur(12px); transform: translateY(-0.12em) scale(0.99); }
}
/* Closed elliptical orbit (KFHeroOrbit), locked to the same KF_HERO_CYCLE
   (12270ms) as the words and remounted with them each cycle. It forms a COMPLETE
   ring: pathLength="1" normalizes the dash so the full perimeter always draws and
   closes no matter how wide the ellipse is stretched (no length cap). It waits
   for the words to fade in, draws its full round around them, holds, then fades
   out WITH the words. Capped to the viewport so the whole ellipse stays visible,
   and it sits UNDER all hero text (which carry z-index:2 below). Keep the cycle
   value in sync with KF_HERO_CYCLE in Hero.jsx. Reduced-motion shows it drawn. */
.kf-orbit { position: relative; display: inline-block; z-index: 1; margin-top: var(--space-5); }
.kf-orbit .kfsite-hero__title { margin-top: 0; }
.kf-orbit__svg {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 6.5rem);
  height: calc(100% + 2.8rem);
  max-width: 94vw;            /* never exceed the viewport, so the full ring shows */
  pointer-events: none; overflow: visible; z-index: 0;
}
.kf-orbit__path {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.5;
  /* --orbit-len is the true perimeter in px, set by JS after measuring the box
     (same 1:1 coordinate space the stroke renders in), so the dash equals the
     real perimeter and the ring always closes — no seam. Fallback 2000 until JS
     runs / for no-JS. No non-scaling-stroke or pathLength: the viewBox matches
     the box pixel size, so scaling is uniform 1:1. */
  stroke-dasharray: var(--orbit-len, 2000);
  stroke-dashoffset: 0;       /* reduced-motion / no-JS: fully drawn closed ring */
}
.kf-orbit__content { position: relative; z-index: 2; }
/* Keep every hero text element above the orbit so the ring stays UNDER the text
   even where it overlaps (e.g. dipping over the subtitle). */
.kfsite-hero .kfsite-eyebrow,
.kfsite-hero__sub,
.kfsite-hero__cta,
.kfsite-hero__trust { position: relative; z-index: 2; }
@media (prefers-reduced-motion: no-preference) {
  .kf-orbit__path {
    stroke-dashoffset: var(--orbit-len, 2000);
    opacity: 0;
    animation: kf-orbit-draw 12270ms var(--ease-draw) both;
  }
}
@keyframes kf-orbit-draw {
  0%, 6.2% { stroke-dashoffset: var(--orbit-len, 2000); opacity: 0; }  /* hidden while words fade in */
  24%      { stroke-dashoffset: 0; opacity: 0.5; }   /* full round drawn + closed (no seam) */
  87.7%    { stroke-dashoffset: 0; opacity: 0.5; }   /* holds while the words hold */
  93.9%    { stroke-dashoffset: 0; opacity: 0; }      /* fades out with the words */
  100%     { stroke-dashoffset: 0; opacity: 0; }      /* stays gone through the pause */
}
.kfsite-hero__sub { max-width: 600px; margin: var(--space-6) auto 0; font-size: var(--text-md);
  line-height: 1.6; color: var(--color-text-secondary); }
.kfsite-hero__aside { position: relative; z-index: 2; margin: var(--space-4) auto 0; font-size: var(--text-sm);
  color: var(--color-text-tertiary); }
.kfsite-hero__cta { display: flex; gap: var(--space-4); margin-top: var(--space-7); flex-wrap: wrap; justify-content: center; }
.kfsite-hero__trust { margin-top: var(--space-10); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.kfsite-hero__trust-label { font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-tertiary); }
.kfsite-hero__logos { display: flex; gap: var(--space-7); flex-wrap: wrap; justify-content: center; }
.kfsite-hero__logo { font-family: var(--font-display); font-weight: 700; font-size: 17px;
  color: var(--color-text-secondary); opacity: 0.6; letter-spacing: 0.01em;
  transition: opacity var(--duration-base) var(--ease-standard); }
.kfsite-hero__logo:hover { opacity: 1; }

/* ---------- Sections ---------- */
.kfsite-section { padding: var(--section-pad-y) 0; scroll-margin-top: 88px; }
.kfsite-section--tight { padding-block: var(--space-8); scroll-margin-top: 88px; }

/* ---------- Partnership Program (wide two-column panel) ---------- */
.kfsite-partner { position: relative; background: var(--color-surface-1);
  border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  padding: clamp(var(--space-6), 4vw, var(--space-9));
  display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-8) var(--space-10);
  align-items: center; }
.kfsite-partner__title { font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-2xl); color: var(--color-text-strong); letter-spacing: -0.01em;
  margin: var(--space-3) 0 var(--space-4); }
.kfsite-partner__body { font-size: var(--text-md); line-height: 1.65; color: var(--color-text-secondary); }
.kfsite-partner__list { list-style: none; padding: 0; margin: 0 0 var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4); }
.kfsite-partner__item { position: relative; padding-left: var(--space-5);
  font-size: var(--text-md); line-height: 1.5; color: var(--color-text-body); }
.kfsite-partner__item::before { content: ""; position: absolute; left: 0; top: 0.5em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }
.kfsite-partner__cta { font-weight: 600; color: var(--color-accent);
  transition: color var(--duration-fast) var(--ease-standard); }
.kfsite-partner__cta:hover { color: var(--color-accent-hover); }
@media (max-width: 720px) {
  .kfsite-partner { grid-template-columns: 1fr; gap: var(--space-6); }
}
.kfsite-section--panel { background: var(--color-bg-panel);
  border-top: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle); }
.kfsite-section__head { max-width: 640px; margin: 0 auto var(--space-9); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.kfsite-section__title { font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.12; letter-spacing: -0.015em; color: var(--color-text-strong); }
.kfsite-section__lede { font-size: var(--text-md); line-height: 1.6; color: var(--color-text-secondary); }

.kfsite-grid { display: grid; gap: var(--space-5); }
.kfsite-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- Steps ---------- */
.kfsite-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.kfsite-step { padding-top: var(--space-5); border-top: 2px solid var(--color-border-strong); }
.kfsite-step__n { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600;
  color: var(--color-accent); letter-spacing: 0.08em; }
.kfsite-step__t { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg);
  color: var(--color-text-strong); margin: var(--space-3) 0 var(--space-2); letter-spacing: -0.01em; }
.kfsite-step__d { font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-secondary); }

/* ---------- Metrics ---------- */
.kfsite-metrics { display: grid; grid-template-columns: repeat(4, 1fr); position: relative;
  border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  background: var(--color-glass-surface); backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%); overflow: hidden; }
.kfsite-metric { padding: var(--space-7) var(--space-6); text-align: center;
  border-right: 1px solid var(--color-border-subtle); }
.kfsite-metric:last-child { border-right: none; }
.kfsite-metric__v { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  color: var(--color-text-strong); letter-spacing: -0.02em; }
.kfsite-metric__l { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: var(--space-2); line-height: 1.45; }

/* ---------- CTA band ---------- */
.kfsite-cta { position: relative; overflow: hidden; text-align: center;
  background: var(--color-glass-card); backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid var(--color-border); border-radius: var(--radius-2xl);
  padding: clamp(3rem, 6vw, 5rem) var(--space-6); }
.kfsite-cta__glow { position: absolute; left: 50%; bottom: -60%; width: 700px; height: 500px;
  transform: translateX(-50%); background: var(--gradient-glow); pointer-events: none; }
.kfsite-cta__title { position: relative; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.7rem); color: var(--color-text-strong); letter-spacing: -0.015em; }
.kfsite-cta__sub { position: relative; max-width: 520px; margin: var(--space-4) auto var(--space-7);
  font-size: var(--text-md); line-height: 1.6; color: var(--color-text-secondary); }
.kfsite-cta .kf-btn { position: relative; }
.kfsite-cta .kfsite-eyebrow { position: relative; display: flex; width: 100%; justify-content: center;
  margin-bottom: var(--space-4); white-space: nowrap; }
.kfsite-cta__form { position: relative; max-width: 400px; margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--space-3); text-align: left; }
.kfsite-cta__form .kf-btn { margin-top: var(--space-2); }
.kfsite-cta__error { font-size: var(--text-sm); color: var(--color-danger); margin-top: var(--space-1); text-align: center; }
.kfsite-cta__done { position: relative; display: flex; flex-direction: column; align-items: center; }

/* ---------- Footer ---------- */
.kfsite-footer { background: var(--color-bg-raised); border-top: 1px solid var(--color-border); }
.kfsite-footer__inner { display: grid; grid-template-columns: 1.4fr 2fr; gap: var(--space-9);
  padding-block: var(--space-10) var(--space-8); }
.kfsite-footer__inner--simple { display: flex; flex-direction: column; align-items: center;
  text-align: center; padding-bottom: var(--space-7); }
.kfsite-footer__tag { margin-top: var(--space-4); max-width: 360px; font-size: var(--text-sm);
  line-height: 1.6; color: var(--color-text-secondary); }
.kfsite-footer__social { display: flex; gap: var(--space-5); margin-top: var(--space-5); }
.kfsite-footer__social-link { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-text-secondary);
  transition: color var(--duration-fast) var(--ease-standard); }
.kfsite-footer__social-link:hover { color: var(--color-accent); }
.kfsite-footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.kfsite-footer__col { display: flex; flex-direction: column; gap: var(--space-3); }
.kfsite-footer__h { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--color-text-tertiary); margin-bottom: var(--space-1); }
.kfsite-footer__link { font-size: var(--text-sm); color: var(--color-text-secondary);
  transition: color var(--duration-fast) var(--ease-standard); }
.kfsite-footer__link:hover { color: var(--color-text-strong); }
.kfsite-footer__base { display: flex; justify-content: space-between; align-items: center;
  padding-block: var(--space-5); border-top: 1px solid var(--color-border-subtle);
  font-size: var(--text-sm); color: var(--color-text-tertiary); }
.kfsite-footer__base-links { display: flex; gap: var(--space-5); }
.kfsite-footer__base-links a { color: var(--color-text-tertiary); }
.kfsite-footer__base-links a:hover { color: var(--color-text-body); }

/* ---------- Contact modal ---------- */
.kfsite-modal { position: fixed; inset: 0; z-index: var(--z-overlay); display: flex;
  align-items: center; justify-content: center; padding: var(--space-5);
  background: rgba(28, 30, 38, 0.45); backdrop-filter: blur(6px);
  animation: kfsite-fade var(--duration-base) var(--ease-standard); }
@keyframes kfsite-fade { from { opacity: 0; } to { opacity: 1; } }
.kfsite-modal__panel { position: relative; width: 100%; max-width: 460px;
  background: var(--color-glass-card); backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); padding: var(--space-7);
  animation: kfsite-rise var(--duration-slow) var(--ease-out); }
.kfsite-modal__panel--wide { max-width: 600px; }
.kfsite-modal__panel--wide .kfsite-partner__list { margin: var(--space-6) 0; }
.kfsite-footer__cta { margin-top: var(--space-5); }
@keyframes kfsite-rise { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
.kfsite-modal__close { position: absolute; top: 16px; right: 16px; background: none; border: none;
  color: var(--color-text-secondary); cursor: pointer; padding: 6px; border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-standard); }
.kfsite-modal__close:hover { color: var(--color-text-strong); }
.kfsite-modal__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl);
  color: var(--color-text-strong); letter-spacing: -0.01em; margin: var(--space-4) 0 var(--space-2); }
.kfsite-modal__sub { font-size: var(--text-sm); line-height: 1.55; color: var(--color-text-secondary); }
.kfsite-modal__form { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-6) 0; }
.kfsite-modal__fine { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-top: var(--space-4); text-align: center; }
.kfsite-modal__done { text-align: center; display: flex; flex-direction: column; align-items: center; padding: var(--space-4) 0; }
.kfsite-modal__check { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; background: var(--color-accent-soft); border: 1px solid var(--color-border-accent);
  margin-bottom: var(--space-5); }
.kfsite-modal__check img { width: 34px; height: 34px; display: block; }

/* ---------- Close X (CSS, no icon) ---------- */
.kfsite-x { position: relative; display: block; width: 16px; height: 16px; }
.kfsite-x::before, .kfsite-x::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px;
  background: currentColor; border-radius: 2px; }
.kfsite-x::before { transform: rotate(45deg); }
.kfsite-x::after { transform: rotate(-45deg); }

/* ---------- Wave separator ---------- */
.kfsite-sep { margin-top: var(--space-9); padding: var(--space-7) 0 var(--space-2); }

/* ---------- Bottom wave-dots zone ---------- */
.kfsite-bottom { position: relative; overflow: hidden; }
.kfsite-bottom__waves { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 48%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 48%); }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .kfsite-grid--3 { grid-template-columns: 1fr 1fr; }
  .kfsite-steps { grid-template-columns: 1fr 1fr; }
  .kfsite-metrics { grid-template-columns: 1fr 1fr; }
  .kfsite-metric:nth-child(2) { border-right: none; }
  .kfsite-metric:nth-child(1), .kfsite-metric:nth-child(2) { border-bottom: 1px solid var(--color-border-subtle); }
  .kfsite-footer__inner { grid-template-columns: 1fr; gap: var(--space-7); padding-bottom: var(--space-6); }
}
@media (max-width: 720px) {
  .kfsite-nav__links, .kfsite-nav__signin { display: none; }
  .kfsite-nav__actions { margin-left: auto; }
  .kfsite-nav__actions .kf-btn { display: none; }
  .kfsite-nav__burger { display: flex; }
  .kfsite-nav__mobile { display: flex; flex-direction: column; gap: var(--space-4);
    padding: var(--space-5); background: rgba(255,255,255,0.97); border-bottom: 1px solid var(--color-border); }
  .kfsite-grid--3 { grid-template-columns: 1fr; }
  .kfsite-steps { grid-template-columns: 1fr; }
  .kfsite-metrics { grid-template-columns: 1fr; }
  .kfsite-metric { border-right: none; border-bottom: 1px solid var(--color-border-subtle); }
  .kfsite-metric:last-child { border-bottom: none; }
  .kfsite-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-5); }
  .kfsite-footer__tag { max-width: none; }
  .kfsite-footer__base { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}
@media (max-width: 430px) {
  .kfsite-footer__cols { grid-template-columns: 1fr; gap: var(--space-6); }
}