/* ---------------------------------------------------------- hero map */
.ab-map { position: relative; width: 100%; aspect-ratio: 1.36; justify-self: end; }
.ab-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------------------------------------------------------- key facts */
.ab-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--kz-border); border-bottom: 1px solid var(--kz-border); }
.ab-facts div { display: grid; gap: 8px; padding: 28px 28px 28px 0; }
.ab-facts div + div { padding-left: 28px; border-left: 1px solid var(--kz-border); }
.ab-facts strong { color: var(--kz-strong); font: 600 clamp(28px, 3vw, 40px)/1 "Space Grotesk", sans-serif; letter-spacing: -.04em; }
.ab-facts span { color: var(--kz-muted); font-size: 15px; }

/* ---------------------------------------------------------- bento: why work with us */
.ab-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(230px, auto); gap: 16px; margin-top: 48px; }
.ab-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: 26px; border: 1px solid var(--kz-border); border-radius: 24px; background: radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 65%), var(--kz-panel-strong); transition: opacity .7s ease, transform .5s ease, border-color .35s ease; }
.ab-tile::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .6; }
.ab-tile:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.ab-tile h3 { margin: 0; color: var(--kz-strong); font-size: clamp(20px, 1.7vw, 24px); line-height: 1.15; letter-spacing: -.03em; }
.ab-tile p { margin: 8px 0 0; color: var(--kz-muted); font-size: 14px; line-height: 1.55; }
.ab-tile--chat { grid-column: span 2; grid-row: span 2; }
.ab-tile--chat h3 { font-size: clamp(28px, 2.8vw, 40px); }
.ab-tile--chat p { font-size: 16px; }
.ab-why-note { margin-top: 18px; }

/* Chat: the conversation replays every 9 seconds. */
.ab-chat { display: grid; gap: 10px; align-content: end; }
.ab-msg { max-width: 82%; margin: 0; padding: 12px 16px; border-radius: 18px; font-size: 14px; line-height: 1.45; opacity: 0; animation: ab-msg 9s ease infinite both; }
.ab-msg b { display: block; margin-bottom: 4px; font: 500 10px/1 "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.ab-msg--you { justify-self: start; border-bottom-left-radius: 6px; background: #151c2c; color: var(--kz-text); }
.ab-msg--us { justify-self: end; border-bottom-right-radius: 6px; background: linear-gradient(135deg, #2f6dff, #1e52e0); color: #fff; animation-delay: 2.6s; }
.ab-msg--typing { justify-self: end; display: flex; gap: 5px; padding: 14px 16px; background: #151c2c; animation-name: ab-typing; animation-delay: 1s; }
.ab-msg--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--kz-muted); animation: ab-dot 1s ease-in-out infinite; }
.ab-msg--typing i:nth-child(2) { animation-delay: .15s; }
.ab-msg--typing i:nth-child(3) { animation-delay: .3s; }
.ab-msg--late { animation-delay: 4.4s; }
@keyframes ab-msg { 0% { opacity: 0; transform: translateY(10px); } 6%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
@keyframes ab-typing { 0% { opacity: 0; } 4%, 16% { opacity: 1; } 19%, 100% { opacity: 0; height: 0; padding-block: 0; margin-top: -10px; } }
@keyframes ab-dot { 50% { transform: translateY(-3px); opacity: .4; } }

/* Clock ring sweeping round. */
.ab-clock { position: relative; width: 112px; height: 112px; }
.ab-clock svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ab-clock-track { fill: none; stroke: var(--kz-border-strong); stroke-width: 3; }
.ab-clock-sweep { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px var(--accent)); animation: ab-sweep 4s ease-in-out infinite; }
@keyframes ab-sweep { 0% { stroke-dashoffset: 1; } 70%, 100% { stroke-dashoffset: 0; } }
.ab-clock strong { position: absolute; inset: 0; display: grid; place-items: center; color: var(--kz-strong); font: 600 26px/1 "Space Grotesk", sans-serif; letter-spacing: -.03em; }

/* Checklist ticking off. */
.ab-checks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ab-checks li { display: flex; align-items: center; gap: 10px; color: var(--kz-soft); font-size: 14px; }
.ab-checks li::before { content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--kz-border-strong); border-radius: 7px; color: transparent; font-size: 12px; animation: ab-check 6s ease infinite; }
.ab-checks li:nth-child(2)::before { animation-delay: .5s; }
.ab-checks li:nth-child(3)::before { animation-delay: 1s; }
@keyframes ab-check { 0%, 8% { color: transparent; border-color: var(--kz-border-strong); background: none; } 14%, 85% { color: #05070d; border-color: var(--accent); background: var(--accent); } 95%, 100% { color: transparent; border-color: var(--kz-border-strong); background: none; } }

/* Ownership chips. */
.ab-own { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-own span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 99px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font: 500 12px/1 "IBM Plex Mono", monospace; }
.ab-own span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }

/* Padlock that opens. */
.ab-lock { width: 64px; height: 64px; overflow: visible; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }
.ab-lock rect { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
.ab-lock circle { fill: var(--accent); stroke: none; }
/* Closed most of the time; the shackle lifts, tilts open on its left leg, then clicks shut. */
.ab-lock-shackle { transform-box: view-box; transform-origin: 20px 31px; animation: ab-unlock 5s ease-in-out infinite; }
@keyframes ab-unlock { 0%, 40% { transform: none; } 52% { transform: translateY(-9px); } 60%, 80% { transform: translateY(-9px) rotate(-12deg); } 88% { transform: translateY(-9px); } 96%, 100% { transform: none; } }

.ab-bento .ab-tile:nth-child(2) { transition-delay: .05s, 0s, 0s; }
.ab-bento .ab-tile:nth-child(3) { transition-delay: .1s, 0s, 0s; }
.ab-bento .ab-tile:nth-child(4) { transition-delay: .15s, 0s, 0s; }
.ab-bento .ab-tile:nth-child(5) { transition-delay: .2s, 0s, 0s; }

/* ---------------------------------------------------------- tools marquee */
.ab-marquee { display: grid; gap: 14px; margin-top: 44px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ab-marquee-row { display: flex; width: max-content; gap: 14px; margin: 0; padding: 0; list-style: none; animation: ab-marquee 48s linear infinite; }
.ab-marquee-row--reverse { animation-direction: reverse; animation-duration: 56s; }
.ab-marquee:hover .ab-marquee-row { animation-play-state: paused; }
@keyframes ab-marquee { to { transform: translateX(-50%); } }
.ab-marquee li { padding: 16px 26px; border: 1px solid var(--kz-border); border-radius: 99px; background: var(--kz-panel); color: var(--kz-soft); font: 600 clamp(18px, 1.8vw, 24px)/1 "Space Grotesk", sans-serif; letter-spacing: -.02em; white-space: nowrap; transition: color .25s ease, border-color .25s ease; }
.ab-marquee li:hover { color: var(--kz-strong); border-color: var(--kz-border-strong); }

@media (max-width: 960px) {
  .ab-map { justify-self: stretch; }
  .ab-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .ab-facts { grid-template-columns: 1fr; }
  .ab-facts div, .ab-facts div + div { padding: 20px 0; border-left: 0; }
  .ab-facts div + div { border-top: 1px solid var(--kz-border); }
  .ab-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .ab-tile--chat { grid-column: auto; grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-marquee-row, .ab-msg, .ab-clock-sweep, .ab-checks li::before, .ab-lock-shackle { animation: none; opacity: 1; }
  .ab-msg--typing { display: none; }
}