/* BYC introduction and the balanced BTP × CYA signature. */
.kontable-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(156px, 12vw, 184px) var(--gutter) 92px;
  border-bottom: 1px solid #b4b9eb16;
  background: radial-gradient(ellipse at 50% 42%, #343a6c24, transparent 65%), #080a14;
  text-align: center;
}
.kontable-hero-inner {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}
.kontable-hero-eyebrow {
  --byc-union-gap: 16px;
  --byc-union-inward: calc(1.8em + var(--byc-union-gap) + 7px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.6em 14px 3.6em minmax(0, 1fr);
  align-items: center;
  gap: var(--byc-union-gap);
  max-width: 370px;
  margin: 0 auto 30px;
  color: #c7cee6;
  font: 500 11px/1.6 'DM Sans', sans-serif;
  letter-spacing: 1.5px;
}
.kontable-hero-eyebrow::before,
.kontable-hero-eyebrow::after {
  content: '';
  height: 1px;
  background: #aab6e528;
}
.kontable-hero-eyebrow b {
  color: #b6c0f5;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
}
.kontable-hero h1 {
  margin: 0;
  color: #f2f3fa;
  font: 800 clamp(104px, 12vw, 164px)/1 'Manrope', sans-serif;
  letter-spacing: -.075em;
}
.kontable-hero-description {
  max-width: 430px;
  margin: 26px auto 0;
  color: #a7afc6;
  font: 400 22px/1.5 'DM Sans', sans-serif;
  text-wrap: pretty;
}
@media (max-width: 850px) {
  .kontable-hero { padding-top: 156px; padding-bottom: 76px; }
  .kontable-hero h1 { font-size: clamp(100px, 16vw, 136px); }
}
@media (max-width: 560px) {
  .kontable-hero { padding-top: 132px; padding-bottom: 60px; }
  .kontable-hero-eyebrow { --byc-union-gap: 12px; margin-bottom: 24px; font-size: 10px; letter-spacing: 1.4px; }
  .kontable-hero h1 { font-size: clamp(96px, 27vw, 136px); }
  .kontable-hero-description { max-width: 330px; margin-top: 24px; font-size: 18px; }
}
@media (max-width: 360px) {
  .kontable-hero { padding-top: 123px; padding-bottom: 48px; }
  .kontable-hero-eyebrow { margin-bottom: 22px; }
  .kontable-hero-description { margin-top: 22px; }
}

/* Two teams meet in a brief glow, then return to their shared signature. */
.kontable-hero { overflow: hidden; --byc-union-travel: clamp(32px, 8vw, 112px); }
.kontable-hero-inner { position: relative; z-index: 1; }
.byc-union-atmosphere { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.byc-union-atmosphere::before {
  content: ''; position: absolute; left: calc(50% - 340px); top: 12%;
  width: 680px; height: 460px;
  background: radial-gradient(ellipse, #718df850, #6578d51c 38%, transparent 67%);
  opacity: 0; pointer-events: none;
}
.byc-union-cross { position: relative; }
.byc-union-cross::before { content: ''; position: absolute; pointer-events: none; opacity: 0; }
.byc-union-cross::before {
  left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%;
  background: #eff3ff; box-shadow: 0 0 18px #c0cfff, 0 0 48px #8e9eff;
  transform: translate(-50%, -50%);
}
.byc-partner-bitpointer, .byc-partner-cya { text-align: center; }
.byc-title-word {
  display: inline-grid; grid-template-columns: repeat(3, .6em);
  position: relative; white-space: nowrap; letter-spacing: 0;
  /* Equal columns center Y below ×, including before JavaScript or fonts load. */
  padding-inline: .12em; margin-inline: -.12em;
}
.byc-title-word > span { min-width: 0; text-align: center; }
.byc-union-playing .byc-partner-bitpointer { animation: byc-union-left 4300ms cubic-bezier(.45,0,.2,1) both; }
.byc-union-playing .byc-partner-cya { animation: byc-union-right 4300ms cubic-bezier(.45,0,.2,1) both; }
.byc-union-playing .kontable-hero-eyebrow::before { transform-origin: right; animation: byc-union-line 4300ms ease both; }
.byc-union-playing .kontable-hero-eyebrow::after { transform-origin: left; animation: byc-union-line 4300ms ease both; }
.byc-union-playing .byc-union-cross { animation: byc-union-cross 4300ms ease both; }
.byc-union-playing .byc-union-cross::before { animation: byc-union-meet 1600ms 1300ms ease both; }
.byc-union-playing .byc-title-word {
  background-image: linear-gradient(#f2f3fa, #f2f3fa);
  background-repeat: no-repeat; background-position: center; background-size: 0% 100%;
  background-clip: text; -webkit-background-clip: text;
  animation: byc-union-form 4600ms cubic-bezier(.4,0,.2,1) both;
}
.byc-union-playing .kontable-hero-description { animation: byc-union-description 1100ms 3050ms ease-out both; }
.byc-union-ambient .byc-union-atmosphere::before { animation: byc-union-atmosphere 5400ms ease-in-out both; }
@keyframes byc-union-left {
  0%, 12% { transform: translateX(calc(-1 * var(--byc-union-travel))) scale(1.16); opacity: 1; }
  38% { transform: translateX(0) scale(1.08); opacity: 1; }
  53%, 60% { transform: translateX(var(--byc-union-inward)) scale(.7); opacity: 0; }
  70% { transform: translateX(0); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes byc-union-right {
  0%, 12% { transform: translateX(var(--byc-union-travel)) scale(1.16); opacity: 1; }
  38% { transform: translateX(0) scale(1.08); opacity: 1; }
  53%, 60% { transform: translateX(calc(-1 * var(--byc-union-inward))) scale(.7); opacity: 0; }
  70% { transform: translateX(0); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes byc-union-line {
  0%, 15% { transform: scaleX(.18); opacity: .25; }
  42% { transform: scaleX(1.1); opacity: 1; }
  56%, 68% { transform: scaleX(.08); opacity: 0; }
  100% { transform: scaleX(1); opacity: 1; }
}
@keyframes byc-union-cross {
  0%, 22% { color: transparent; }
  32% { color: #b6c0f5; }
  45%, 70% { color: transparent; }
  100% { color: #b6c0f5; }
}
@keyframes byc-union-meet {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  42% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
  65% { opacity: .8; transform: translate(-50%, -50%) scale(.8); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
}
@keyframes byc-union-form {
  0%, 32% { opacity: .35; color: transparent; -webkit-text-stroke: 1px #c5d0f580; background-size: 0% 100%; }
  42% { opacity: 1; color: transparent; -webkit-text-stroke: 1px #c5d0f5a6; background-size: 0% 100%; }
  82% { opacity: 1; color: transparent; -webkit-text-stroke: 1px #c5d0f5a6; background-size: 100% 100%; }
  90%, 100% { opacity: 1; color: #f2f3fa; -webkit-text-stroke: 0 transparent; background-size: 100% 100%; }
}
@keyframes byc-union-description {
  from { opacity: .25; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes byc-union-atmosphere {
  0%, 15% { opacity: 0; transform: scale(.7); }
  42% { opacity: .95; }
  70% { opacity: .45; }
  100% { opacity: 0; transform: scale(1.16); }
}
@media (max-width: 560px) { .kontable-hero { --byc-union-travel: 28px; } }
@media (max-width: 360px) { .kontable-hero { --byc-union-travel: 16px; } }
@media (prefers-reduced-motion: reduce) {
  .byc-union-playing *, .byc-union-playing *::before, .byc-union-playing *::after,
  .byc-union-ambient .byc-union-atmosphere::before { animation: none !important; }
  .byc-union-playing .byc-title-word { color: #f2f3fa; -webkit-text-stroke: 0; }
}

/* Persistent contact without competing with the intro or covering a dialog. */
.byc-whatsapp-float {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 50;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid #ffffff30;
  border-radius: 50%;
  background: #16844b;
  color: #fff;
  box-shadow: 0 6px 24px #00000030;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.byc-whatsapp-float svg { display: block; width: 28px; height: 28px; fill: currentColor; }
.byc-whatsapp-float:hover { background: #11713e; transform: translateY(-2px); box-shadow: 0 8px 26px #00000040; }
.byc-whatsapp-float:focus-visible { outline: 3px solid #f2f3fa; outline-offset: 4px; }
body:has(dialog[open]) .byc-whatsapp-float { visibility: hidden; pointer-events: none; }
.site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (max-width: 560px) {
  .byc-whatsapp-float { right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .byc-whatsapp-float { transition: none; }
  .byc-whatsapp-float:hover { transform: none; }
}
