/* V8900 CRITICAL FIX
   Real fix: the old styles.css contains unclosed @media blocks. This file is loaded last and defines the critical layout at top level.
   It prevents the secret menu from rendering inline, fixes the bottom dock, and keeps the home usable on desktop and mobile.
*/

:root {
  --kora-ink: #2d3f5d;
  --kora-muted: #667c9a;
  --kora-glass: rgba(255,255,255,.34);
  --dock-h: 112px;
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: none !important;
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100% !important;
}

body {
  margin: 0 !important;
  min-height: 100svh !important;
  overflow-x: hidden !important;
  color: var(--kora-ink);
  background:
    radial-gradient(circle at 16% 8%, rgba(255,255,255,.86), transparent 18%),
    radial-gradient(circle at 82% 18%, rgba(189,218,255,.72), transparent 24%),
    radial-gradient(circle at 50% 58%, rgba(255,255,255,.38), transparent 35%),
    linear-gradient(180deg,#f8fbff 0%,#e6f0ff 35%,#d6e5ff 72%,#c9dcff 100%) !important;
  -webkit-overflow-scrolling: touch !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.64), transparent 22%),
    radial-gradient(circle at 85% 28%, rgba(205,226,255,.58), transparent 28%);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

img {
  display: block;
  max-width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

/* Top logo */
.logo-float {
  position: fixed !important;
  top: calc(14px + env(safe-area-inset-top)) !important;
  left: calc(14px + env(safe-area-inset-left)) !important;
  z-index: 120 !important;
  display: grid !important;
  place-items: center !important;
  width: 82px !important;
  height: 82px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.logo-float img {
  width: 74px !important;
  height: 74px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 16px 26px rgba(64,103,172,.22)) saturate(1.05) !important;
}

/* Top CTA */
.top-cta {
  position: fixed !important;
  top: calc(24px + env(safe-area-inset-top)) !important;
  right: calc(18px + env(safe-area-inset-right)) !important;
  z-index: 122 !important;
  width: min(318px, 46vw) !important;
  min-width: 188px !important;
  display: block !important;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-16px) scale(.98);
  transition: opacity .34s ease, transform .34s ease, filter .22s ease;
}

.top-cta.show {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

.top-cta-bg,
.top-cta > img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 18px 30px rgba(70,110,178,.16)) !important;
}

.top-cta span {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-weight: 950 !important;
  font-size: clamp(12px, 1.2vw, 16px) !important;
  letter-spacing: -.035em !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.24) !important;
}

/* Home scenes */
.experience {
  position: relative !important;
  z-index: 5 !important;
  width: 100% !important;
  min-height: 100svh !important;
  overflow-x: hidden !important;
}

.scene {
  position: relative !important;
  min-height: 100svh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 92px 20px calc(var(--dock-h) + 52px) !important;
  overflow: hidden !important;
  scroll-snap-align: none !important;
  visibility: visible !important;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 50% 48%, rgba(255,255,255,.18), transparent 32%);
}

.character-wrap {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 8 !important;
  width: min(88vw,480px,48svh) !important;
  aspect-ratio: 1/1.28 !important;
  margin: 0 auto 16px !important;
  filter: drop-shadow(0 26px 40px rgba(43,70,116,.16)) !important;
  cursor: pointer !important;
}

.kora {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: 0;
  transform: translateY(12px) scale(.985);
  transition: opacity .72s cubic-bezier(.2,.7,.2,1), transform .72s cubic-bezier(.2,.7,.2,1);
}

.kora.visible,
.scene.active .kora.visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.copy-wrap {
  position: relative !important;
  z-index: 20 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  width: min(94vw,780px) !important;
  padding: 0 8px !important;
  opacity: 1 !important;
  transform: none !important;
}

.scene-kicker {
  margin: 0 !important;
  color: #7487a4 !important;
  font-size: clamp(10px,1.1vw,12px) !important;
  font-weight: 950 !important;
  letter-spacing: .26em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

.scene-line {
  margin: 0 !important;
  text-align: center !important;
  text-wrap: balance !important;
  max-width: min(91vw,760px) !important;
  color: #2e405f !important;
  font-size: clamp(2.05rem,4.35vw,4.85rem) !important;
  line-height: .91 !important;
  font-weight: 950 !important;
  letter-spacing: -.078em !important;
  text-shadow: 0 3px 26px rgba(255,255,255,.82) !important;
}

.scene-subline {
  margin: 0 !important;
  max-width: min(86vw,620px) !important;
  text-align: center !important;
  color: #506784 !important;
  font-size: clamp(.98rem,1.45vw,1.16rem) !important;
  line-height: 1.25 !important;
  font-weight: 880 !important;
  letter-spacing: -.038em !important;
}

.signal-row,
.home-proof {
  position: relative !important;
  z-index: 15 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 10px !important;
  opacity: 1 !important;
  transform: none !important;
}

.signal-row span,
.home-proof span {
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.26) !important;
  color: #2e405f !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.58) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
}

.signal-row i {
  width: 16px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: rgba(67,90,120,.22) !important;
}

.float-icon {
  position: absolute !important;
  z-index: 2 !important;
  width: clamp(96px,10vw,128px) !important;
  height: auto !important;
  opacity: .56 !important;
  object-fit: contain !important;
  pointer-events: none !important;
  filter: drop-shadow(0 20px 32px rgba(70,108,172,.10)) saturate(1.03) !important;
}

.fi-left { left: 7% !important; top: 28% !important; }
.fi-right { right: 7% !important; top: 42% !important; }
.fi-bottom { right: 22% !important; bottom: 20% !important; }

.arrow-cta {
  position: relative !important;
  z-index: 30 !important;
  margin-top: 18px !important;
  display: grid !important;
  place-items: center !important;
  width: 120px !important;
  height: 120px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  cursor: pointer !important;
  opacity: 1 !important;
  transform: none !important;
}

.arrow-cta img {
  width: 108px !important;
  height: 108px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 20px 32px rgba(72,110,178,.20)) saturate(1.06) !important;
}

/* Bottom dock */
.dock,
.kora-unified-dock {
  position: fixed !important;
  left: 50% !important;
  bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  z-index: 180 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  width: min(640px, calc(100% - 28px)) !important;
  min-height: 96px !important;
  padding: 12px 18px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.08)) !important;
  backdrop-filter: blur(54px) saturate(230%) brightness(1.12) !important;
  -webkit-backdrop-filter: blur(54px) saturate(230%) brightness(1.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    inset 0 -1px 0 rgba(255,255,255,.12),
    0 28px 58px rgba(72,110,178,.12) !important;
  opacity: 1 !important;
}

.dock.hidden {
  transform: translateX(-50%) translateY(120%) !important;
  opacity: 0 !important;
}

.dock-item,
.dock a,
.dock button {
  display: grid !important;
  place-items: center !important;
  width: 78px !important;
  height: 78px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 50% !important;
  cursor: pointer !important;
}

.dock-item img,
.dock a img,
.dock button img {
  width: 74px !important;
  height: 74px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 16px 22px rgba(72,110,178,.12)) !important;
}

/* Business router */
.router {
  position: fixed !important;
  left: 50% !important;
  bottom: calc(124px + env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) translateY(24px) scale(.985) !important;
  z-index: 210 !important;
  width: min(560px, calc(100% - 28px)) !important;
  max-height: calc(100svh - 150px) !important;
  overflow: auto !important;
  padding: 18px !important;
  border-radius: 38px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.10)) !important;
  backdrop-filter: blur(48px) saturate(220%) brightness(1.12) !important;
  -webkit-backdrop-filter: blur(48px) saturate(220%) brightness(1.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 28px 68px rgba(63,96,160,.18) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .26s ease, transform .26s ease !important;
}

.router.open {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

.router-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.38) !important;
  color: #2e405f !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  z-index: 3 !important;
}

.router-card {
  position: relative !important;
  width: 100% !important;
  margin: 8px 0 16px !important;
}

.router-card img,
.router-primary img,
.router-pay img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

.router-copy {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 34px !important;
  color: #fff !important;
  text-shadow: 0 12px 24px rgba(0,0,0,.35) !important;
}

.router-copy span {
  color: #b9c9ff !important;
  font-size: 12px !important;
  letter-spacing: .26em !important;
  font-weight: 950 !important;
}

.router-copy strong {
  color: #fff !important;
  max-width: 15ch !important;
  font-size: clamp(1.35rem, 4vw, 2.1rem) !important;
  line-height: .98 !important;
  font-weight: 950 !important;
  letter-spacing: -.06em !important;
}

.router-options {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin: 0 0 14px !important;
}

.router-option {
  min-height: 58px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.33) !important;
  color: #2e405f !important;
  font-weight: 950 !important;
  font-size: 15px !important;
}

.router-option.active {
  background: #4b82f4 !important;
  color: #fff !important;
}

.router-proof {
  width: min(560px,100%) !important;
  margin: 0 auto 12px !important;
  padding: 14px 16px !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.18) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5) !important;
}

.router-proof span {
  display: block !important;
  margin-bottom: 4px !important;
  color: #7086a6 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
}

.router-proof b {
  display: block !important;
  color: #2e405f !important;
  font-size: 13px !important;
  line-height: 1.22 !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
}

.router-primary,
.router-pay {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin-top: 8px !important;
  min-height: 58px !important;
  color: #fff !important;
}

.router-primary span,
.router-pay span {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: clamp(14px,3.4vw,19px) !important;
  font-weight: 950 !important;
  letter-spacing: -.04em !important;
}

/* Secret app launcher. Default must be hidden, otherwise desktop looks completely broken. */
.secret-nav {
  position: fixed !important;
  inset: 0 !important;
  z-index: 260 !important;
  display: none !important;
  place-items: end center !important;
  padding: 18px 14px calc(18px + env(safe-area-inset-bottom)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.secret-nav.open {
  display: grid !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.secret-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(220,235,255,.24) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
}

.secret-panel {
  position: relative !important;
  width: min(620px, 100%) !important;
  max-height: calc(100svh - 32px - env(safe-area-inset-bottom)) !important;
  overflow: auto !important;
  border-radius: 36px !important;
  padding: 18px !important;
  background: linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08)) !important;
  backdrop-filter: blur(58px) saturate(250%) brightness(1.16) !important;
  -webkit-backdrop-filter: blur(58px) saturate(250%) brightness(1.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76), inset 0 -1px 0 rgba(255,255,255,.05), 0 34px 82px rgba(72,110,178,.18) !important;
}

.secret-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.secret-head img {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain !important;
}

.secret-head p {
  margin: 0 0 2px !important;
  color: #7086a6 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
}

.secret-head h2 {
  margin: 0 !important;
  color: #2e405f !important;
  font-size: 2rem !important;
  line-height: .9 !important;
  font-weight: 950 !important;
  letter-spacing: -.07em !important;
}

.secret-close {
  margin-left: auto !important;
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.34) !important;
  color: #2e405f !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

.secret-launcher {
  position: relative !important;
  width: min(640px,100%) !important;
  min-height: clamp(380px,58vh,520px) !important;
  overflow: hidden !important;
  touch-action: pan-y !important;
  border-radius: 36px !important;
}

.secret-page {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 12px !important;
  align-content: start !important;
  padding-top: 22px !important;
  opacity: 0 !important;
  transform: translateX(22px) scale(.985) !important;
  pointer-events: none !important;
  transition: opacity .28s ease, transform .28s cubic-bezier(.2,.7,.2,1) !important;
}

.secret-page.active {
  opacity: 1 !important;
  transform: translateX(0) scale(1) !important;
  pointer-events: auto !important;
}

.secret-section {
  grid-column: 1/-1 !important;
  margin: 0 0 2px !important;
  color: #7185a4 !important;
  text-shadow: none !important;
  font-size: 11px !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
  font-weight: 950 !important;
}

.secret-page a {
  min-height: 112px !important;
  border-radius: 30px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 4px !important;
  padding: 10px !important;
  background: rgba(255,255,255,.20) !important;
  backdrop-filter: blur(26px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(160%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.68), 0 16px 30px rgba(64,103,172,.055) !important;
}

.secret-page a img {
  width: 54px !important;
  height: 54px !important;
  object-fit: contain !important;
}

.secret-page a span {
  color: #2e405f !important;
  text-shadow: none !important;
  font-size: 12px !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  letter-spacing: -.035em !important;
}

.secret-page a small {
  color: #7086a6 !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
}

.secret-dots {
  display: flex !important;
  justify-content: center !important;
  gap: 7px !important;
  margin: 12px 0 !important;
}

.secret-dots button {
  width: 8px !important;
  height: 8px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: rgba(46,64,95,.22) !important;
}

.secret-dots button.active {
  width: 24px !important;
  border-radius: 999px !important;
  background: #4b82f4 !important;
}

.secret-whatsapp {
  position: relative !important;
  display: block !important;
  width: min(360px,100%) !important;
  margin: 8px auto 0 !important;
}

.secret-whatsapp img {
  width: 100% !important;
  height: auto !important;
}

.secret-whatsapp span {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-weight: 950 !important;
  font-size: 14px !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.22) !important;
}

.secret-open {
  overflow: hidden !important;
}

/* Generic pages safety */
.shell, main {
  visibility: visible !important;
}

@media (max-width: 900px) {
  :root { --dock-h: 96px; }

  .logo-float {
    width: 74px !important;
    height: 74px !important;
    top: calc(12px + env(safe-area-inset-top)) !important;
    left: calc(12px + env(safe-area-inset-left)) !important;
  }

  .logo-float img {
    width: 66px !important;
    height: 66px !important;
  }

  .top-cta {
    top: calc(18px + env(safe-area-inset-top)) !important;
    right: calc(14px + env(safe-area-inset-right)) !important;
    width: 188px !important;
    min-width: 188px !important;
  }

  .top-cta span {
    font-size: 11.5px !important;
  }

  .scene {
    min-height: 100svh !important;
    padding: calc(98px + env(safe-area-inset-top)) 16px calc(116px + env(safe-area-inset-bottom)) !important;
  }

  .character-wrap {
    width: min(86vw,420px,47svh) !important;
    margin-bottom: 12px !important;
  }

  .scene-line {
    max-width: 348px !important;
    font-size: clamp(2rem,10.5vw,3.35rem) !important;
    line-height: .91 !important;
  }

  .scene-subline {
    max-width: 330px !important;
    font-size: clamp(.9rem,3.6vw,1.02rem) !important;
  }

  .signal-row {
    max-width: 340px !important;
    gap: 6px !important;
  }

  .signal-row span,
  .home-proof span {
    min-height: 28px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }

  .signal-row i {
    width: 12px !important;
  }

  .home-proof {
    max-width: 330px !important;
    gap: 6px !important;
    margin-top: 8px !important;
  }

  .float-icon {
    width: clamp(76px,20vw,108px) !important;
    opacity: .48 !important;
  }

  .arrow-cta {
    width: 104px !important;
    height: 104px !important;
    margin-top: 8px !important;
  }

  .arrow-cta img {
    width: 98px !important;
    height: 98px !important;
  }

  .dock,
  .kora-unified-dock {
    width: min(560px, calc(100% - 28px)) !important;
    min-height: 78px !important;
    padding: 8px 14px !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    gap: 10px !important;
  }

  .dock-item,
  .dock a,
  .dock button {
    width: 60px !important;
    height: 60px !important;
  }

  .dock-item img,
  .dock a img,
  .dock button img {
    width: 56px !important;
    height: 56px !important;
  }

  .router {
    bottom: calc(94px + env(safe-area-inset-bottom)) !important;
    max-height: calc(100svh - 116px - env(safe-area-inset-bottom)) !important;
    padding: 14px !important;
    border-radius: 34px !important;
  }

  .router-copy {
    padding: 26px 28px !important;
  }

  .secret-panel {
    border-radius: 30px !important;
    padding: 18px !important;
  }

  .secret-launcher {
    min-height: 410px !important;
  }

  .secret-page {
    gap: 10px !important;
  }

  .secret-page a {
    min-height: 98px !important;
    border-radius: 26px !important;
  }

  .secret-page a img {
    width: 46px !important;
    height: 46px !important;
  }

  .secret-page a span {
    font-size: 11px !important;
  }

  .secret-page a small {
    font-size: 9px !important;
  }
}

@media (max-width: 390px), (max-height: 700px) and (max-width: 900px) {
  .scene {
    padding-top: 78px !important;
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }

  .character-wrap {
    width: min(82vw,360px,39svh) !important;
  }

  .scene-line {
    font-size: clamp(1.55rem,8.4vw,2.42rem) !important;
  }

  .scene-subline {
    font-size: .86rem !important;
  }

  .signal-row {
    display: none !important;
  }

  .home-proof {
    display: none !important;
  }

  .float-icon {
    width: 76px !important;
    opacity: .42 !important;
  }

  .arrow-cta {
    width: 84px !important;
    height: 84px !important;
  }

  .arrow-cta img {
    width: 78px !important;
    height: 78px !important;
  }
}