/* Kaleso landing page only (hero, stats, steps, features). Shared styling lives in site.css. */
/* ---------- hero scene ---------- */
.hero-wrap { perspective: 1200px; position: relative; }
.hero-scroll { will-change: transform, opacity; transform-origin: 50% 0; }
.hero-card { transform-style: preserve-3d; transition: transform .25s ease-out; will-change: transform; overflow: hidden; }
.scene-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.07); font-size: .78rem; }
.lights { display: flex; gap: .35rem; }
.lights i { width: .6rem; height: .6rem; border-radius: 50%; background: rgba(255,255,255,.16); }
.timer { font-variant-numeric: tabular-nums; color: #e5e7eb; }
.live { display: inline-flex; align-items: center; gap: .4rem; color: #6ee7b7; font-weight: 600; }
.live i { width: .5rem; height: .5rem; border-radius: 50%; background: #34d399; animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.endpoints { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; padding: 1.4rem 1.4rem 1.1rem; }
.node { position: relative; width: 4.2rem; height: 4.2rem; display: grid; place-items: center; }
.node .core { position: relative; z-index: 2; width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center; color: #fff; transition: transform .35s var(--ease), box-shadow .35s; }
.node.caller .core { background: linear-gradient(145deg, #3b82f6, #1d4ed8); }
.node.agent .core { background: linear-gradient(145deg, #a78bfa, #6d28d9); }
.node.speaking .core { transform: scale(1.1); }
.node.caller.speaking .core { box-shadow: 0 0 30px 2px rgba(59,130,246,.65); }
.node.agent.speaking .core { box-shadow: 0 0 30px 2px rgba(139,92,246,.7); }
.node .ring { position: absolute; inset: .5rem; border-radius: 50%; border: 2px solid currentColor; opacity: 0; }
.node.caller { color: #60a5fa; } .node.agent { color: #a78bfa; }
.node.speaking .ring { animation: ring 1.9s var(--ease) infinite; }
.node.speaking .ring:nth-child(2) { animation-delay: .6s; }
.node.speaking .ring:nth-child(3) { animation-delay: 1.2s; }
@keyframes ring { 0% { transform: scale(.8); opacity: .75; } 100% { transform: scale(1.7); opacity: 0; } }
.node-label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); font-size: .68rem; color: #9ca3af; white-space: nowrap; margin-top: -.1rem; }
.link-line { position: relative; height: 2px; margin: 0 .25rem; background-image: linear-gradient(90deg, rgba(148,163,184,.55) 50%, transparent 50%); background-size: 12px 2px; animation: dash 1.2s linear infinite; opacity: .7; }
@keyframes dash { to { background-position: 12px 0; } }
.link-line .pkt { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #93c5fd; box-shadow: 0 0 10px #60a5fa; will-change: transform; }
.wave-wrap { padding: .9rem 1rem .4rem; }
#wave { display: block; width: 100%; height: 96px; }
.transcript { padding: .5rem 1.1rem 1.2rem; height: 11.5rem; display: flex; flex-direction: column; justify-content: flex-end; gap: .55rem; font-size: .86rem; line-height: 1.4; overflow: hidden; }
.tline { display: flex; gap: .6rem; align-items: flex-start; animation: tin .4s var(--ease) both; }
@keyframes tin { from { opacity: 0; transform: translate3d(0, 8px, 0); } }
.tline .who { flex: none; font-size: .66rem; font-weight: 700; letter-spacing: .06em; padding: .15rem .45rem; border-radius: 6px; margin-top: .12rem; }
.tline.caller .who { background: rgba(59,130,246,.18); color: #93c5fd; }
.tline.agent .who { background: rgba(139,92,246,.2); color: #c4b5fd; }
.tline .txt { color: #e5e7eb; }
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.15em; background: #a5b4fc; animation: blink 1s steps(1) infinite; }
.scene-foot { display: flex; flex-wrap: wrap; gap: .5rem; padding: .8rem 1.1rem; border-top: 1px solid rgba(255,255,255,.07); }
.chip { font-size: .7rem; padding: .22rem .6rem; border-radius: 999px; color: #cbd5e1; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.float-badge { position: absolute; z-index: 3; font-size: .72rem; font-weight: 600; padding: .45rem .75rem; border-radius: .8rem; background: rgba(17,24,39,.88); border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: bob 5s ease-in-out infinite alternate; box-shadow: 0 12px 30px -10px rgba(0,0,0,.7); }
.float-badge.fb2 { animation-delay: -2.5s; animation-duration: 6s; }
@keyframes bob { to { transform: translateY(-9px); } }
.scroll-cue { width: 1.4rem; height: 2.2rem; border: 2px solid rgba(255,255,255,.25); border-radius: 999px; position: relative; }
.scroll-cue::after { content: ''; position: absolute; left: 50%; top: .35rem; width: 3px; height: 6px; margin-left: -1.5px; background: #cbd5e1; border-radius: 2px; animation: cue 1.8s infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }

/* ---------- stats ---------- */
.stat-num { white-space: nowrap; font-size: clamp(1.6rem, 4vw, 2.8rem); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ---------- how it works ---------- */
.steps { position: relative; max-width: 52rem; margin: 0 auto; padding-left: 3.5rem; list-style: none; }
.steps-track, .steps-fill { position: absolute; left: 1.15rem; top: 2.3rem; bottom: var(--tb, 1.5rem); width: 3px; border-radius: 3px; }
.steps-track { background: rgba(255,255,255,.08); }
.steps-fill { background: linear-gradient(#3b82f6, #8b5cf6, #22d3ee); transform-origin: top; box-shadow: 0 0 16px rgba(139,92,246,.7); will-change: transform; }
.js .steps-fill { transform: scaleY(0); }
.step { position: relative; padding: 0 0 1.6rem; }
.step:last-child { padding-bottom: 0; }
.step .badge { position: absolute; left: -3.5rem; top: 1.1rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .9rem; color: #94a3b8; background: #0b1220; border: 2px solid rgba(255,255,255,.14); transition: all .45s var(--ease); }
.step.active .badge, html:not(.js) .step .badge { color: #fff; border-color: transparent; background: linear-gradient(135deg, #2563eb, #7c3aed); box-shadow: 0 0 0 6px rgba(99,102,241,.18), 0 0 24px rgba(139,92,246,.6); }
.step.active .badge { transform: scale(1.08); }
.step .glass { padding: 1.4rem 1.5rem; }
.js .step .glass { opacity: .55; transition: opacity .5s; }
.js .step.active .glass { opacity: 1; }

/* ---------- features (sticky panel) ---------- */
.feat-grid { display: grid; gap: 1.2rem; max-width: 72rem; margin: 0 auto; }
.feat-list { display: grid; gap: 1.2rem; }
.feat-panel { display: none; }
.feat-item { padding: 1.5rem; }
.feat-item .icon { width: 2.6rem; height: 2.6rem; border-radius: .8rem; display: grid; place-items: center; margin-bottom: .9rem; color: #c4b5fd; background: rgba(139,92,246,.14); border: 1px solid rgba(139,92,246,.3); }
.feat-vis { display: block; margin-top: 1.1rem; }
@media (min-width: 640px) and (max-width: 1023px) { .feat-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
    .feat-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3rem; align-items: start; }
    .feat-list { display: flex; flex-direction: column; gap: 0; }
    .feat-item { min-height: 58vh; display: flex; flex-direction: column; justify-content: center; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 1rem 0; }
    .js .feat-item { opacity: .35; transition: opacity .4s; }
    .js .feat-item.active { opacity: 1; }
    .feat-item::before, .feat-item::after { display: none; }
    .feat-item .feat-vis { display: none; }
    .feat-panel { display: block; position: sticky; top: 6.5rem; height: min(30rem, 72vh); }
    .feat-stage { position: relative; height: 100%; overflow: hidden; }
    .vis { position: absolute; inset: 0; padding: 1.6rem; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translate3d(0, 24px, 0) scale(.97); transition: opacity .5s var(--ease), transform .6s var(--ease); pointer-events: none; }
    .vis.active, html:not(.js) .vis:first-child { opacity: 1; transform: none; pointer-events: auto; }
}
.vis-card { padding: 1.1rem; font-size: .8rem; }
.kv { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .7rem; border-radius: .6rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); margin-bottom: .45rem; }
.kv span:first-child { color: #9ca3af; } .kv span:last-child { color: #e5e7eb; text-align: right; }
.bar-row { display: flex; align-items: flex-end; gap: 4px; height: 70px; }
.bar-row i { flex: 1; height: 100%; border-radius: 3px; background: linear-gradient(#60a5fa, #8b5cf6); animation: eq 1.2s ease-in-out infinite alternate; transform-origin: bottom; }
@keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.tl-row { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; }
.tl-row b { width: .6rem; height: .6rem; border-radius: 50%; flex: none; background: #34d399; box-shadow: 0 0 10px #34d399; }
.tl-row.err b { background: #f87171; box-shadow: 0 0 10px #f87171; }
.tl-row em { margin-left: auto; font-style: normal; color: #6b7280; font-size: .72rem; }
.lanes { display: grid; gap: .55rem; }
.lane { height: .85rem; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.lane i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #3b82f6, #8b5cf6); transform-origin: left; animation: lane 3.2s var(--ease) infinite; }
.lane:nth-child(2) i { animation-delay: .4s; } .lane:nth-child(3) i { animation-delay: .8s; }
@keyframes lane { 0% { transform: scaleX(0); } 45%, 85% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }


@media (prefers-reduced-motion: reduce) {
    .js .steps-fill { transform: scaleY(1); }
    .js .step .glass, .js .feat-item { opacity: 1; }
    .bar-row i { transform: scaleY(.6); }
    .lane i { transform: none; opacity: 1; }
}
@media (max-width: 640px) {
    .steps { padding-left: 3rem; }
    .step .badge { left: -3rem; width: 2.1rem; height: 2.1rem; }
    .steps-track, .steps-fill { left: .98rem; }
    .float-badge { display: none; }
    .endpoints { padding: 1.2rem 1rem .9rem; }
}