/* Shared KuraChat components: glass, pill buttons, photo frames, industry
   cards and the chat widget mock-up. Used by the homepage and the marketing
   pages (inc/marketing-render.php). */
/* ---------- cinematic SaaS layer (Higgsfield photography) ---------- */
@keyframes kcKen { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes kcRiseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes kcFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.kc-frame { position: relative; isolation: isolate; margin: 0 12px; border-radius: 28px; overflow: hidden; background: #0b0f1a; }
.kc-frame > img.kc-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; display: block; }
.kc-glass { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); color: #fff; }
.kc-pill-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14.5px; padding: 13px 24px; border-radius: 999px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.kc-pill-btn:hover { transform: translateY(-1px); }
.kc-pill-blue, .kc-pill-blue:hover { color: #fff; }
.kc-pill-blue { background: #2563eb; box-shadow: 0 10px 30px rgba(37,99,235,.42); }
.kc-pill-blue:hover { background: #1d4ed8; box-shadow: 0 14px 34px rgba(37,99,235,.5); }
.kc-glass.kc-pill-btn:hover { background: rgba(255,255,255,.2); color: #fff; }
.kc-ai { display: inline-flex; align-items: center; background: #eaf2ff; color: #1d4ed8; font-size: 9.5px; font-weight: 600; letter-spacing: .05em; padding: 2px 6px; border-radius: 999px; line-height: 1.3; }
.kc-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* hero */
.kc-hero { margin-top: 12px; min-height: clamp(580px, 84vh, 780px); display: flex; align-items: flex-end; }
.kc-hero > img.kc-bg { object-position: 64% 45%; animation: kcKen 2.2s cubic-bezier(.2,.7,.2,1) both; }
.kc-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4,7,15,.88) 0%, rgba(4,7,15,.6) 34%, rgba(4,7,15,.06) 62%, rgba(4,7,15,0) 100%), linear-gradient(0deg, rgba(4,7,15,.7) 0%, rgba(4,7,15,0) 42%); }
.kc-hero-inner { width: 100%; max-width: 1320px; margin: 0 auto; padding: 132px 48px 52px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.kc-hero-copy { max-width: 640px; color: #fff; }
.kc-hero-copy > * { animation: kcRiseIn .9s cubic-bezier(.2,.7,.2,1) both; }
.kc-hero-copy > :nth-child(2) { animation-delay: .08s; }
.kc-hero-copy > :nth-child(3) { animation-delay: .16s; }
.kc-hero-copy > :nth-child(4) { animation-delay: .24s; }
.kc-hero-copy > :nth-child(5) { animation-delay: .32s; }
.kc-bubbles { flex: none; width: 330px; display: flex; flex-direction: column; gap: 10px; animation: kcRiseIn 1s .55s cubic-bezier(.2,.7,.2,1) both; }
.kc-bubbles > div { animation: kcFloat 7s ease-in-out infinite; }
.kc-bubbles > div:nth-child(2) { animation-delay: -2.5s; }
/* The visitor's message: a solid brand bubble with a tail, like the real
   widget, so it can't be mistaken for the glass pill or the glass button. */
.kc-bubble-me { align-self: flex-end; max-width: 250px; border-radius: 18px 18px 4px 18px; padding: 10px 14px; font-size: 13.5px; line-height: 1.45; background: #2563eb; color: #fff; font-weight: 500; box-shadow: 0 18px 40px -12px rgba(0,0,0,.55); }
.kc-bubble-ai { background: rgba(255,255,255,.96); color: #09090b; border-radius: 18px 18px 18px 4px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.kc-facts { max-width: 1320px; margin: 0 auto; padding: 28px 48px 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.kc-fact { border-left: 1px solid #e4e4e7; padding-left: 16px; }
.kc-fact b { display: block; font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500; font-size: 15px; letter-spacing: -.01em; color: #09090b; }
.kc-fact span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.45; color: #71717a; }

/* who it's for */
.kc-cases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kc-case { position: relative; isolation: isolate; aspect-ratio: 3 / 4.3; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; color: #fff; background: #18181b; }
.kc-case > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.kc-case::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 42%, rgba(0,0,0,.85) 100%); }
.kc-case:hover > img { transform: scale(1.05); }
.kc-case-tag { align-self: flex-start; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.kc-mini { background: rgba(255,255,255,.95); color: #09090b; border-radius: 16px; padding: 12px; font-size: 12px; line-height: 1.45; box-shadow: 0 18px 40px rgba(0,0,0,.35); margin-bottom: 16px; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.kc-case:hover .kc-mini { transform: translateY(-4px); }
.kc-case h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.015em; color: #fff; }
.kc-case p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.74); }

/* handoff */
.kc-team { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 80px; align-items: center; }
.kc-team-photo { position: relative; }
.kc-shot { border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 4.4; background: #e4e4e7; }
.kc-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; display: block; }
.kc-team-widget { position: absolute; left: -48px; bottom: 36px; width: 318px; background: #fff; border-radius: 22px; border: 1px solid rgba(9,9,11,.06); box-shadow: 0 1px 2px rgba(9,9,11,.06), 0 32px 80px -24px rgba(9,9,11,.45); overflow: hidden; font-size: 13px; }
.kc-w-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid #f4f4f5; }
.kc-w-stack { display: flex; flex: none; }
.kc-w-stack > * { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; display: block; }
.kc-w-stack > * + * { margin-left: -10px; }
.kc-w-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; line-height: 1.45; }
.kc-w-me { align-self: flex-end; max-width: 78%; background: #2563eb; color: #fff; padding: 9px 13px; border-radius: 18px 18px 6px 18px; }
.kc-w-who { display: flex; align-items: center; gap: 6px; margin: 0 0 5px 2px; font-size: 11px; font-weight: 600; color: #3f3f46; }
.kc-w-tag { font-size: 9px; font-weight: 600; letter-spacing: .06em; color: #71717a; border: 1px solid #e4e4e7; border-radius: 999px; padding: 0 5px; line-height: 15px; }
.kc-w-them { display: inline-block; max-width: 86%; background: #f4f4f5; color: #09090b; padding: 9px 13px; border-radius: 18px 18px 18px 6px; }
.kc-w-join { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #a1a1aa; }
.kc-w-join span { flex: 1; height: 1px; background: #ececee; }
.kc-w-join img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.kc-w-compose { margin: 0 12px 12px; display: flex; align-items: center; justify-content: space-between; background: #f4f4f5; border-radius: 999px; padding: 6px 6px 6px 14px; font-size: 12.5px; color: #a1a1aa; }
.kc-w-send { width: 28px; height: 28px; border-radius: 50%; background: #2563eb; color: #fff; display: grid; place-items: center; }
.kc-checks { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.kc-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: #3f3f46; }
.kc-checks svg { flex: none; margin-top: 3px; color: #2563eb; }

/* night band */
.kc-band { padding: 96px 72px 380px; text-align: left; color: #fff; }
.kc-band > img.kc-bg { object-position: center 62%; }
.kc-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4,7,15,.72) 0%, rgba(4,7,15,.3) 50%, rgba(4,7,15,0) 100%); }

@media (max-width: 1000px) {
	.kc-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kc-team { grid-template-columns: 1fr; gap: 48px; }
	.kc-team-widget { left: 16px; }
	.kc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.kc-hero-inner { flex-direction: column; align-items: flex-start; padding: 120px 24px 28px; }
	.kc-hero::before { background: linear-gradient(0deg, rgba(4,7,15,.92) 0%, rgba(4,7,15,.6) 55%, rgba(4,7,15,.25) 100%); }
	.kc-bubbles { width: min(330px, 100%); }
}
@media (max-width: 640px) {
	.kc-frame { margin: 0 8px; border-radius: 22px; }
	.kc-cases { grid-template-columns: 1fr; }
	.kc-facts { padding: 22px 20px 4px; }
	.kc-bubbles { display: none; }
	.kc-band { padding: 88px 20px 240px; }
}
@media (prefers-reduced-motion: reduce) {
	.kc-hero > img.kc-bg, .kc-hero-copy > *, .kc-bubbles, .kc-bubbles > div { animation: none !important; }
	.kc-case > img, .kc-mini, .kc-pill-btn { transition: none !important; }
}