/* ============================================================================
   Tovak — shared components: floating-pill nav (.nav2) + grid footer (.bf).
   Used by BOTH pages. Each page stylesheet themes these via CSS variables
   (--btn-radius, --nav-*, --bf-*). Edit layout here once; colour per page.
   ========================================================================== */

/* ---- nav2 (Cofactr floating-pill layout) --------------------------------- */
/* Overlays the hero (no background bar of its own) and stays pinned while
   scrolling. The first section needs enough top padding to clear it. */
.nav2 { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding-block: 14px; background: transparent; }
.nav2__inner { display: flex; align-items: center; gap: 16px; padding-inline: clamp(14px, 2.4vw, 26px); }
.nav2__logo {
  display: inline-flex; align-items: center; flex: none;
  background: var(--nav-chip-bg);
  border: 1px solid var(--nav-chip-border, transparent);
  border-radius: 14px; padding: 4px 8px;
}
.nav2__logo svg { height: 40px; width: auto; }
.nav2__logo svg path { fill: var(--nav-chip-logo); }
.nav2__pill {
  display: flex; align-items: center; gap: clamp(20px, 2.4vw, 38px);
  background: var(--nav-pill-bg); border: 1px solid var(--nav-pill-border);
  border-radius: var(--btn-radius); padding: 15px clamp(24px, 2.6vw, 38px);
  box-shadow: var(--nav-pill-shadow, none);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.nav2__pill a { color: var(--nav-pill-text); font-weight: 500; font-size: 0.95rem; white-space: nowrap; transition: color 0.2s; }
.nav2__pill a:hover { color: var(--nav-pill-hover); }
.nav2__pill a.is-active { color: var(--nav-pill-hover); font-weight: 700; }
.nav2__cta {
  margin-left: auto; flex: none;
  background: var(--nav-cta-bg); color: var(--nav-cta-text);
  border-radius: var(--btn-radius); padding: 14px 26px;
  font-weight: 600; font-size: 0.95rem; white-space: nowrap;
  box-shadow: var(--nav-cta-shadow, none);
  transition: transform 0.2s var(--ease, ease), filter 0.2s;
}
.nav2__cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
@media (max-width: 880px) { .nav2__pill { display: none; } }

/* ---- bf (big grid footer) ------------------------------------------------ */
.bf { background: var(--bf-bg); color: var(--bf-text); border-top: 1px solid var(--bf-line); }
.bf h4 { font-family: "Satoshi", sans-serif; text-transform: none; font-weight: 600; font-size: 0.92rem; letter-spacing: 0; color: var(--bf-head); margin-bottom: 24px; }

.bf__top { display: grid; grid-template-columns: 1.15fr 1fr 0.62fr; }
.bf__links { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; padding: 46px clamp(22px, 3vw, 48px); }
.bf__col { display: flex; flex-direction: column; }
.bf__col a { font-size: 1.06rem; color: var(--bf-link); margin-bottom: 11px; transition: color 0.2s; width: fit-content; }
.bf__col a:hover { color: var(--bf-link-hover); }

.bf__solutions { border-left: 1px solid var(--bf-line); padding: 46px clamp(22px, 3vw, 48px); }
.bf__solico { width: 64px; height: 64px; border-radius: 14px; background: var(--bf-solico-bg); display: grid; place-items: center; margin-bottom: 26px; }
.bf__solico svg { width: 34px; height: 34px; }
.bf__solico svg path { fill: var(--bf-solico-fill); }
.bf__sollist { display: flex; flex-direction: column; gap: 4px; }
.bf__sollist span { font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.25; color: var(--bf-dim); }
.bf__sollist span.on { color: var(--bf-link-hover); }
.bf__soldots { display: flex; gap: 8px; margin: 20px 0 18px; }
.bf__soldots i { width: 24px; height: 6px; border-radius: 3px; background: var(--bf-dim); opacity: 0.5; }
.bf__soldots i[data-on] { background: var(--bf-link-hover); opacity: 1; }
.bf__soldesc { color: var(--bf-dim); font-size: 0.95rem; max-width: 36ch; line-height: 1.5; }

.bf__blue { position: relative; display: grid; place-items: center; min-height: 460px; background: var(--bf-blue); color: #fff; overflow: hidden; }
.bf__blueart { position: absolute; inset: 0; margin: auto; width: 80%; max-width: 360px; opacity: 0.9; }
.bf__blueart, .bf__blueart * { vector-effect: non-scaling-stroke; stroke-width: 1px; }
/* "Get early access" stays dead-centre, above the animating outline */
.bf__bluetext { position: relative; z-index: 1; font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 500; }
.bf__blue:hover .bf__bluetext { text-decoration: underline; text-underline-offset: 4px; }

/* animated connector outline: lines flow, nodes pulse */
@media (prefers-reduced-motion: no-preference) {
  .bf__blueart path { stroke-dasharray: 5 7; animation: bfFlow 2.6s linear infinite; }
  .bf__blueart rect { transform-box: fill-box; transform-origin: center; animation: bfPulse 2.4s ease-in-out infinite; }
  .bf__blueart rect:nth-of-type(2n) { animation-delay: 0.5s; }
  .bf__blueart rect:nth-of-type(3n) { animation-delay: 1s; }
}
@keyframes bfFlow { to { stroke-dashoffset: -24; } }
@keyframes bfPulse { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }

/* slider bars + titles are clickable */
.bf__soldots i { cursor: pointer; }
.bf__sollist span { cursor: pointer; }

.bf__bottom { display: grid; grid-template-columns: 1.15fr 1.62fr; border-top: 1px solid var(--bf-line); }
.bf__cta { padding: 56px clamp(22px, 3vw, 48px); }
.bf__ctah { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.16; font-weight: 500; color: var(--bf-link); max-width: 15ch; margin: 14px 0 30px; }
.bf__btn { display: inline-flex; background: var(--bf-btn-bg); color: var(--bf-btn-text); border-radius: var(--btn-radius); padding: 15px 30px; font-weight: 600; transition: transform 0.2s var(--ease, ease); }
.bf__btn:hover { transform: translateY(-2px); }
.bf__brand { border-left: 1px solid var(--bf-line); display: flex; align-items: flex-end; justify-content: flex-start; padding: 44px clamp(22px, 3vw, 56px); }
.bf__wordmark { width: min(56%, 380px); height: auto; }
.bf__wordmark path { fill: var(--bf-wordmark); }

.bf__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding: 22px clamp(22px, 3vw, 48px); border-top: 1px solid var(--bf-line); font-size: 0.85rem; color: var(--bf-dim); }
.bf__legallinks { display: flex; gap: 26px; }
.bf__legallinks a { color: var(--bf-dim); transition: color 0.2s; }
.bf__legallinks a:hover { color: var(--bf-link-hover); }

@media (max-width: 900px) {
  .bf__top { grid-template-columns: 1fr; }
  .bf__solutions { border-left: 0; border-top: 1px solid var(--bf-line); }
  .bf__blue { min-height: 300px; border-top: 1px solid var(--bf-line); }
  .bf__bottom { grid-template-columns: 1fr; }
  .bf__brand { border-left: 0; border-top: 1px solid var(--bf-line); justify-content: center; padding-block: 36px; }
  .bf__wordmark { width: min(60%, 280px); }
}