.kv,.vcard{--brand:#173b6c;--brand-2:#4473b4;--brand-light:#8db6e8;--ease:cubic-bezier(.16,1,.3,1);--night-grad:radial-gradient(900px 520px at 88% -10%,rgba(92,140,205,.38),transparent 62%),linear-gradient(160deg,#143563 0%,#0c2445 100%);--shadow:0 30px 70px -35px rgba(14,35,64,.28);font-family:"InterLocal","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}.kv *,.vcard *{box-sizing:border-box}.kv button,.vcard{cursor:pointer;font:inherit}.kv .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.vcard {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; isolation: isolate;
  border-radius: 26px; text-align: left; color: #fff; background: var(--night-grad); box-shadow: var(--shadow);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.vcard:hover { transform: translateY(-5px); box-shadow: 0 40px 80px -36px rgba(9, 30, 60, .55); }
.vcard:focus-visible { outline: 3px solid var(--brand-2); outline-offset: 4px; }
.vcard__grid { position: absolute; inset: 0; z-index: -1; opacity: .5; background: linear-gradient(to right, transparent calc(100% - 1px), rgba(255,255,255,.08) 0) 0 0 / 25% 100%, linear-gradient(to bottom, transparent calc(100% - 1px), rgba(255,255,255,.06) 0) 0 0 / 100% 25%; }
.vcard__call { position: absolute; left: 20px; top: 20px; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); }
.vcard__avatar { position: relative; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--brand); display: grid; place-items: center; font-size: .78rem; font-weight: 700; }
.vcard__avatar::before, .vcard__avatar::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(141,182,232,.7); animation: vring 2.2s var(--ease) infinite; }
.vcard__avatar::after { animation-delay: .7s; }
.vcard__call small { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-light); }
.vcard__call strong { font-size: .88rem; font-weight: 600; }
.vcard__chips { position: absolute; right: 18px; top: 22px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.vcard__chips span { padding: 6px 11px; border-radius: 999px; font-size: .72rem; font-weight: 600; background: #fff; color: var(--brand); box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); opacity: 0; transform: translateY(8px); animation: vchip 7.5s var(--ease) infinite; }
.vcard__chips span:nth-child(2) { animation-delay: 1.4s; }
.vcard__chips span:nth-child(3) { animation-delay: 2.8s; background: #e6f4ea; color: #1e6b3a; }
.vcard__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 78px; height: 78px; border-radius: 50%; background: #fff; color: var(--brand); display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(255,255,255,.14), 0 18px 40px -12px rgba(0,0,0,.5); transition: transform .5s var(--ease); }
.vcard__play svg { width: 26px; height: 26px; margin-left: 4px; }
.vcard:hover .vcard__play { transform: scale(1.08); }
.vcard__wave { position: absolute; left: 50%; top: calc(50% + 62px); translate: -50% 0; display: flex; gap: 4px; align-items: center; height: 22px; }
.vcard__wave i { width: 4px; height: 30%; border-radius: 2px; background: var(--brand-light); animation: kvwave 1s ease-in-out infinite; }
.vcard__wave i:nth-child(2) { animation-delay: .1s; } .vcard__wave i:nth-child(3) { animation-delay: .2s; } .vcard__wave i:nth-child(4) { animation-delay: .3s; } .vcard__wave i:nth-child(5) { animation-delay: .4s; } .vcard__wave i:nth-child(6) { animation-delay: .25s; } .vcard__wave i:nth-child(7) { animation-delay: .15s; }
.vcard__meta { position: absolute; left: 20px; right: 20px; bottom: 18px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.vcard__meta small { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-light); margin-bottom: 4px; }
.vcard__meta strong { display: block; font-size: 1.15rem; letter-spacing: -.02em; line-height: 1.2; }
.vcard__meta em { font-style: normal; font-size: .78rem; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.12); white-space: nowrap; }
@keyframes vring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
@keyframes vchip { 0%, 6% { opacity: 0; transform: translateY(8px); } 12%, 70% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes kvwave { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(2.4); } }

html.kv-open { overflow: hidden; }
.kv { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: clamp(8px, 2.5vw, 36px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s var(--ease), visibility 0s .4s; }
.kv.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .4s var(--ease), visibility 0s; }
.kv__backdrop { position: absolute; inset: 0; background: rgba(5, 16, 34, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.kv__window { position: relative; width: min(1240px, 100%, calc((100vh - 130px) * 16 / 9)); display: flex; flex-direction: column; gap: 12px; transform: translateY(16px) scale(.97); transition: transform .6s var(--ease); }
.kv.is-open .kv__window { transform: none; }
.kv svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.kv__stage {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 22px; color: #eaf1fb; container-type: inline-size;
  font-size: 1.12cqw; line-height: 1.4;
  background: radial-gradient(70% 60% at 85% 0%, rgba(92,140,205,.35), transparent 60%), radial-gradient(60% 50% at 0% 100%, rgba(68,115,180,.25), transparent 60%), linear-gradient(160deg, #10305a 0%, #091c37 100%);
  box-shadow: 0 50px 120px -40px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.08);
}
.kv__stage::before { content: ""; position: absolute; inset: 0; opacity: .35; pointer-events: none; background: linear-gradient(to right, transparent calc(100% - 1px), rgba(255,255,255,.05) 0) 0 0 / 8.333% 100%; }
.kv-top { position: absolute; left: 2.2em; right: 2.2em; top: 1.6em; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1em; }
.kv-brand { display: flex; align-items: center; gap: .6em; font-weight: 700; letter-spacing: .06em; }
.kv-brand svg { width: 1.8em; height: 1.8em; }
.kv-brand small { font-weight: 500; letter-spacing: .02em; color: #a9bfdc; margin-left: .3em; }
.kv-chapter { text-align: center; }
.kv-chapter small { display: block; font-size: .72em; letter-spacing: .16em; text-transform: uppercase; color: #8db6e8; }
.kv-chapter span { font-size: 1.35em; font-weight: 600; letter-spacing: -.02em; }
.kv-clock { justify-self: end; padding: .4em .9em; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); font-variant-numeric: tabular-nums; font-weight: 600; }
.kv-clock.is-flip { animation: kvflip .6s var(--ease); }
@keyframes kvflip { 0% { transform: rotateX(90deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.kv-main { position: absolute; left: 2.2em; right: 2.2em; top: 5.4em; bottom: 7.4em; display: grid; grid-template-columns: 25% minmax(0, 1fr) 31%; gap: 1.4em; }
.kv-panel { min-height: 0; display: flex; flex-direction: column; padding: 1.3em; border-radius: 1.2em; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); }
.kv-plabel { display: flex; justify-content: space-between; align-items: center; gap: .6em; margin: 0 0 1em; font-size: .72em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #a9bfdc; }
.kv-plabel span { display: inline-flex; align-items: center; gap: .5em; white-space: nowrap; }
.kv-plabel span:last-child { color: #dce6f4; }

/* Telefon */
.kv-people { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em; }
.kv-person { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .2em; transition: opacity .4s; }
.kv-person.is-empty { opacity: .35; }
.kv-person strong { font-size: .98em; font-weight: 600; margin-top: .4em; }
.kv-person small { font-size: .74em; color: #a9bfdc; min-height: 1.2em; }
.kv-avatar { position: relative; width: 4.8em; height: 4.8em; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1.05em; }
.kv-avatar--ki { background: linear-gradient(135deg, #2f5d9c, #4473b4); box-shadow: 0 0 0 .3em rgba(141,182,232,.2); }
.kv-avatar--ki svg { width: 2.4em; height: 2.4em; }
.kv-avatar--other { background: #fff; color: #173b6c; }
.kv-person.is-ringing .kv-avatar::before, .kv-person.is-ringing .kv-avatar::after { content: ""; position: absolute; inset: -.4em; border-radius: 50%; border: .18em solid #8db6e8; animation: vring 1.2s var(--ease) infinite; }
.kv-person.is-ringing .kv-avatar::after { animation-delay: .4s; }
.kv-person.is-ringing .kv-avatar { animation: kvshake .5s ease-in-out infinite; }
@keyframes kvshake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
.kv-wave { display: flex; gap: .22em; align-items: center; height: 1.8em; margin-top: .3em; opacity: .25; transition: opacity .3s; }
.kv-wave i { width: .26em; height: 35%; border-radius: .2em; background: #8db6e8; }
.kv-person.is-talking .kv-wave { opacity: 1; }
.kv.kv-voiced .kv-person.is-talking .kv-wave i { animation: none; transition: height .07s linear; }
.kv-person.is-talking .kv-wave i { animation: kvwave .8s ease-in-out infinite; }
.kv-person.is-talking .kv-wave i:nth-child(2) { animation-delay: .12s; } .kv-person.is-talking .kv-wave i:nth-child(3) { animation-delay: .24s; } .kv-person.is-talking .kv-wave i:nth-child(4) { animation-delay: .06s; } .kv-person.is-talking .kv-wave i:nth-child(5) { animation-delay: .3s; } .kv-person.is-talking .kv-wave i:nth-child(6) { animation-delay: .18s; } .kv-person.is-talking .kv-wave i:nth-child(7) { animation-delay: .09s; }
.kv-link { display: flex; flex-direction: column; align-items: center; gap: .3em; color: #8db6e8; opacity: .35; }
.kv-link span { width: 2px; height: 1.1em; background: repeating-linear-gradient(to bottom, currentColor 0 3px, transparent 3px 6px); }
.kv-call.is-live .kv-link { opacity: 1; }
.kv-call.is-live .kv-link span { animation: kvflow 1s linear infinite; }
@keyframes kvflow { to { background-position: 0 6px; } }
.kv-timer { margin: .6em 0 0; text-align: center; font-variant-numeric: tabular-nums; font-size: .9em; color: #a9bfdc; }
.kv-call.is-live .kv-timer { color: #fff; }

/* Gespräch & Nachrichten */
.kv-feed { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .7em; overflow: hidden; }
.kv-item { animation: kvin .55s var(--ease); }
@keyframes kvin { from { opacity: 0; transform: translateY(.8em); } to { opacity: 1; transform: none; } }
.kv-item small { display: block; font-size: .72em; letter-spacing: .04em; opacity: .75; margin-bottom: .25em; }
.kv-item p { margin: 0; }
.kv-msg { max-width: 88%; padding: .75em 1em; border-radius: 1em; font-size: .96em; }
.kv-msg--ki { align-self: flex-start; background: linear-gradient(135deg, #2f5d9c, #3f6fb0); border-bottom-left-radius: .3em; }
.kv-msg--other { align-self: flex-end; background: #fff; color: #0e2340; border-bottom-right-radius: .3em; }
.kv-doc { background: #fff; color: #0e2340; border-radius: 1em; padding: .9em 1.1em; font-size: .9em; box-shadow: 0 1em 2em -1.4em rgba(0,0,0,.6); }
.kv-doc.is-out { border-left: .3em solid #4473b4; }
.kv-doc.is-in { border-left: .3em solid #1e6b3a; }
.kv-doc__head { display: flex; align-items: center; gap: .5em; font-size: .82em; color: #56657b; margin-bottom: .4em; }
.kv-doc__head svg { color: #4473b4; width: 1.2em; height: 1.2em; }
.kv-doc__head em { margin-left: auto; font-style: normal; font-size: .9em; padding: .15em .6em; border-radius: 999px; background: #eef3fa; color: #173b6c; }
.kv-doc.is-in .kv-doc__head em { background: #e6f4ea; color: #1e6b3a; }
.kv-doc strong { display: block; font-size: .95em; margin-bottom: .25em; }
.kv-doc p { color: #26364d; line-height: 1.45; }
.kv-doc--sms { max-width: 85%; }
.kv-doc--sms.is-in { align-self: flex-end; }

/* System */
.kv-cards { display: flex; flex-direction: column; gap: .8em; min-height: 0; overflow: hidden; }
.kv-card { background: #fff; color: #0e2340; border-radius: 1em; padding: .95em 1.1em; animation: kvin .55s var(--ease); }
.kv-card h4 { display: flex; align-items: center; gap: .5em; margin: 0 0 .5em; font-size: .92em; letter-spacing: -.01em; }
.kv-card h4 svg { color: #4473b4; width: 1.25em; height: 1.25em; }
.kv-row { display: flex; justify-content: space-between; gap: 1em; padding: .32em 0; border-bottom: 1px solid #e6ebf2; font-size: .8em; color: #56657b; opacity: 0; transform: translateX(.6em); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.kv-row b { color: #173b6c; text-align: right; }
.kv-row.is-in { opacity: 1; transform: none; }
.kv-chip { display: inline-flex; margin-top: .6em; padding: .3em .8em; border-radius: 999px; font-size: .74em; font-weight: 700; opacity: 0; transform: scale(.8); transition: opacity .4s, transform .5s var(--ease); }
.kv-chip.is-in { opacity: 1; transform: none; }
.kv-chip--ok { background: #e6f4ea; color: #1e6b3a; }
.kv-chip--wait { background: #fff6e0; color: #8a5a00; }
.kv-chip--info { background: #eef3fa; color: #173b6c; }
.kv-notes { margin-top: auto; padding-top: .8em; display: flex; flex-direction: column; gap: .5em; }
.kv-note { display: flex; gap: .6em; align-items: flex-start; padding: .6em .8em; border-radius: .8em; font-size: .78em; line-height: 1.4; background: rgba(141,182,232,.14); border: 1px solid rgba(141,182,232,.3); color: #dce6f4; animation: kvin .55s var(--ease); }
.kv-note svg { width: 1.3em; height: 1.3em; color: #8db6e8; margin-top: .05em; }
.kv-note.is-ok { background: rgba(102,201,140,.14); border-color: rgba(102,201,140,.35); }
.kv-note.is-ok svg { color: #7fd6a0; }

/* Prozess-Leiste */
.kv-flow { position: absolute; left: 2.2em; right: 2.2em; bottom: 1.8em; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(10, 1fr); }
.kv-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: .45em; font-size: .72em; color: #7f97b8; transition: color .4s; }
.kv-node::before { content: ""; position: absolute; top: 1.1em; left: -50%; right: 50%; height: 2px; background: rgba(255,255,255,.14); }
.kv-node:first-child::before { display: none; }
.kv-node.is-done::before, .kv-node.is-current::before { background: #4473b4; }
.kv-node i { position: relative; z-index: 1; width: 2.3em; height: 2.3em; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; background: #0d2648; border: 2px solid rgba(255,255,255,.22); transition: background-color .4s, border-color .4s, box-shadow .4s, color .4s; }
.kv-node.is-done i { background: #4473b4; border-color: #4473b4; color: #fff; }
.kv-node.is-current { color: #fff; }
.kv-node.is-current i { background: #fff; border-color: #fff; color: #173b6c; box-shadow: 0 0 0 .45em rgba(255,255,255,.14); }

/* Titel-/Abspann-Ebene */
.kv-title { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: .9em; padding: 3em; text-align: center; background: radial-gradient(60% 60% at 50% 40%, rgba(68,115,180,.5), transparent 70%), rgba(7, 22, 44, .9); opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s .6s; }
.kv-title.is-show { opacity: 1; visibility: visible; transition: opacity .6s var(--ease), visibility 0s; }
.kv-eyebrow { margin: 0; font-size: .8em; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #8db6e8; }
.kv-title h3 { margin: 0; font-size: 3.6em; line-height: 1.05; letter-spacing: -.045em; font-weight: 600; max-width: 18ch; }
.kv-title h3 span { color: #8db6e8; }
.kv-title p { margin: 0; font-size: 1.25em; color: #c3d3ea; max-width: 46ch; }
.kv-title.is-show h3, .kv-title.is-show p, .kv-title.is-show .kv-stats, .kv-title.is-show .kv-cta { animation: kvin .8s var(--ease) both; }
.kv-title.is-show h3 { animation-delay: .1s; } .kv-title.is-show p:last-of-type { animation-delay: .25s; } .kv-title.is-show .kv-cta { animation-delay: .4s; }
.kv-stats { margin: .4em 0; padding: 0; list-style: none; display: flex; gap: 1.2em; flex-wrap: wrap; justify-content: center; }
.kv-stats li { min-width: 7.5em; padding: .8em 1em; border-radius: 1em; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); font-size: .9em; color: #c3d3ea; }
.kv-stats b { display: block; font-size: 2.2em; line-height: 1; color: #fff; letter-spacing: -.04em; }
.kv-cta { display: flex; gap: .8em; flex-wrap: wrap; justify-content: center; margin-top: .4em; }
.kv-cta a, .kv-cta button { font: inherit; font-size: 1em; font-weight: 600; padding: .85em 1.5em; border-radius: 999px; cursor: pointer; }
.kv-cta__main { background: #fff; color: #173b6c; }
.kv-cta button { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); }

/* Erzähler-Untertitel */
.kv-caption { position: absolute; left: 50%; bottom: 6.6em; z-index: 6; width: max-content; max-width: min(60em, 78%); margin: 0; padding: .7em 1.2em; border-radius: .9em; background: rgba(7, 22, 44, .92); border: 1px solid rgba(141, 182, 232, .35); box-shadow: 0 1em 2.5em rgba(0, 0, 0, .35); color: #fff; font-size: 1.22em; line-height: 1.4; text-align: center; text-wrap: balance; pointer-events: none; opacity: 0; visibility: hidden; translate: -50% .6em; transition: opacity .35s var(--ease), translate .35s var(--ease), visibility 0s .35s; }
.kv-caption.is-show { opacity: 1; visibility: visible; translate: -50% 0; transition: opacity .35s var(--ease), translate .35s var(--ease), visibility 0s; }
/* Im Abspann steht die Botschaft schon auf der Karte – Untertitel würde die Buttons verdecken */
.kv-title.is-outro.is-show ~ .kv-caption { opacity: 0; visibility: hidden; }

/* Steuerleiste */
.kv__controls { display: flex; align-items: center; gap: 10px; color: #fff; }
.kv-btn { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); transition: background-color .25s; }
.kv-btn:hover { background: rgba(255,255,255,.22); }
.kv-btn svg { width: 18px; height: 18px; }
.kv-btn--main { width: 52px; height: 52px; background: #fff; color: #173b6c; }
.kv-btn--main:hover { background: #dce6f4; }
.kv-progress { position: relative; flex: 1; height: 8px; border-radius: 99px; background: rgba(255,255,255,.18); cursor: pointer; }
.kv-progress > span { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #4473b4, #8db6e8); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.kv-tick { position: absolute; top: 50%; width: 12px; height: 12px; translate: -50% -50%; border-radius: 50%; background: #fff; border: 2px solid #10305a; opacity: .75; transition: transform .2s, opacity .2s; }
.kv-tick:hover { opacity: 1; transform: scale(1.35); }
.kv-label { flex: none; min-width: 9.5em; font-size: .86rem; color: #c3d3ea; font-variant-numeric: tabular-nums; }
.kv-hint { margin: 0; font-size: .78rem; color: #8da3c2; text-align: center; }
.kv.is-paused .kv-wave i, .kv.is-paused .kv-avatar::before, .kv.is-paused .kv-avatar::after, .kv.is-paused .kv-link span { animation-play-state: paused !important; }

@media (max-width: 760px) {
  .hero__top { grid-template-columns: 1fr; }
  .vcard { aspect-ratio: 16 / 10; }
  .kv { padding: 8px; }
  .kv__window { width: min(100%, calc((100vh - 120px) * 9 / 16)); }
  .kv__stage { aspect-ratio: 9 / 16; font-size: 3.15cqw; }
  .kv-top { grid-template-columns: 1fr auto; left: 1.2em; right: 1.2em; top: 1.2em; }
  .kv-brand { display: none; }
  .kv-chapter { text-align: left; }
  .kv-main { left: 1.2em; right: 1.2em; top: 5em; bottom: 1.2em; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1.2fr) minmax(0, 1fr); gap: .8em; }
  .kv-panel { padding: .9em; }
  .kv-plabel { margin-bottom: .6em; }
  .kv-people { flex-direction: row; justify-content: space-between; }
  .kv-link { flex-direction: row; }
  .kv-link span { width: 1.4em; height: 2px; background: repeating-linear-gradient(to right, currentColor 0 3px, transparent 3px 6px); }
  .kv-avatar { width: 3.2em; height: 3.2em; }
  .kv-person small { display: none; }
  .kv-timer { display: none; }
  .kv-flow { display: none; }
  .kv-title h3 { font-size: 2.4em; }
  .kv-caption { bottom: 1.4em; max-width: 92%; font-size: 1.1em; }
  .kv-label { display: none; }
  .kv__controls { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .vcard__chips span { opacity: 1; transform: none; animation: none; }
  .vcard__avatar::before, .vcard__avatar::after, .vcard__wave i { animation: none; }
}

/* Five compact previews; the original KPC window opens only after a click. */
.sc-examples{position:relative;padding-top:65px;padding-bottom:80px}
.sc-heading{display:grid;grid-template-columns:1.3fr 1fr;gap:70px;align-items:end;margin-bottom:42px}
.sc-heading h2,.sc-personal h2{font-size:clamp(32px,3.7vw,55px);font-weight:500;line-height:1.08;letter-spacing:-.045em;margin:22px 0 0}
.sc-heading h2 span,.sc-personal h2 span{color:var(--dlx-blue)}
.sc-heading>p,.sc-personal>div>p:last-child{font-size:16px;line-height:1.8;color:var(--dlx-muted);max-width:490px}
.sc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:42px 26px}
.sc-grid .vcard{aspect-ratio:4/3;border:0;border-radius:18px;padding:0}
.sc-grid .vcard__call{left:16px;top:16px;gap:9px;padding:8px;border-radius:12px;max-width:calc(100% - 32px)}
.sc-grid .vcard__call small{font-size:9px}.sc-grid .vcard__call strong{font-size:11px}.sc-grid .vcard__avatar{width:30px;height:30px;font-size:11px;flex-shrink:0}
.sc-grid .vcard__chips{right:14px;top:83px;gap:6px}.sc-grid .vcard__chips span{font-size:9px;padding:5px 8px}
.sc-grid .vcard__play{width:56px;height:56px;left:28%;top:54%;box-shadow:0 0 0 8px #ffffff17,0 18px 40px -12px #0006}.sc-grid .vcard__play svg{width:22px;height:22px}
.sc-grid .vcard__wave{left:28%;top:calc(54% + 42px);height:13px;gap:3px}.sc-grid .vcard__wave i{width:3px}
.sc-grid .vcard__meta{left:16px;right:16px;bottom:16px;gap:10px}.sc-grid .vcard__meta small{font-size:9px;letter-spacing:.1em}.sc-grid .vcard__meta strong{font-size:15px}.sc-grid .vcard__meta em{font-size:10px}
.sc-example:nth-child(2) .vcard__chips span{animation-delay:.4s}.sc-example:nth-child(3) .vcard__chips span{animation-delay:.8s}
.sc-example-copy{padding:19px 3px 0}.sc-example-copy>p{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dlx-blue);gap:15px}.sc-example-copy>p span{color:var(--dlx-muted);white-space:nowrap}
.sc-example h3{font-weight:500;font-size:24px;line-height:1.15;letter-spacing:-.035em;margin:13px 0}.sc-example-copy>div{font-size:14px;line-height:1.75;color:var(--dlx-muted)}
.sc-example-note{max-width:760px;margin-top:35px!important;font-size:11px;line-height:1.8;color:var(--dlx-muted)}
.sc-personal{padding-top:62px;padding-bottom:90px;border-top:1px solid var(--dlx-line);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:70px}.sc-personal h2{font-size:clamp(32px,3.2vw,45px);margin-bottom:20px}.sc-personal-open{margin-top:18px;background:none;border:0;padding:0;font-size:14px;cursor:pointer}
.sc-personal-open[hidden]{display:none}.kv{z-index:1100}.kv .kv__stage{font-family:"InterLocal","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}.kv .kv-plabel{line-height:1.4}.kv .kv-btn:focus-visible,.kv .kv-tick:focus-visible{outline:3px solid #a1dfed;outline-offset:4px}.kv .kv-cta a{display:inline-block;text-decoration:none}.kv button{border-style:solid}.kv .kv-btn{padding:0}.kv .kv-tick{padding:0}.kv .kv-title.is-outro h3{font-size:3em}
@media(max-width:1000px){.sc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sc-heading,.sc-personal{gap:35px}.sc-heading h2{font-size:39px}.sc-personal .ss-input-row{flex-wrap:wrap}.sc-personal .ss-input-row input{flex:1}.sc-personal .ss-input-row .dlx-btn{width:100%;justify-content:space-between}}
@media(max-width:700px){.sc-examples{padding-top:40px;padding-bottom:50px}.sc-heading{grid-template-columns:1fr;gap:22px;margin-bottom:28px}.sc-heading h2{font-size:35px}.sc-heading>p{font-size:15px}.sc-grid{gap:30px 18px}.sc-example h3{font-size:21px}.sc-example-copy>div{font-size:13px}.sc-personal{grid-template-columns:1fr;gap:30px;padding-top:45px;padding-bottom:65px}.sc-personal h2{font-size:37px}.sc-personal>div>p:last-child{font-size:15px}.kv__window{width:min(100%,calc((100dvh - 122px)*9/16))}.kv .kv-title.is-outro h3{font-size:2.1em}.kv-hint{font-size:10px;line-height:1.5}.kv__stage{font-size:3.15cqw}.kv__controls{gap:6px}.kv-btn{width:40px;height:40px}.kv-btn--main{width:44px;height:44px}}
@media(max-width:520px){.sc-grid{grid-template-columns:1fr}.sc-grid .vcard{aspect-ratio:16/10}.sc-grid .vcard__play{top:52%}.sc-grid .vcard__wave{top:calc(52% + 38px)}.sc-grid .vcard__chips{top:70px}.sc-example-copy{padding-top:16px}.sc-example h3{font-size:25px}.sc-example-copy>div{font-size:14px}}
@media(prefers-reduced-motion:reduce){.kv *{animation:none!important;transition:none!important}.vcard{transition:none}.vcard:hover{transform:none}}