/* Koda animated phone mockup - shared styles (dark mode + turquoise) */
.km-phone { width:260px; max-width:82vw; background:#000; border-radius:3rem; padding:0.55rem; box-shadow:0 40px 80px -12px rgba(21,168,199,0.30); position:relative; }
@media (min-width:400px){ .km-phone{ width:280px; } }
.km-screen { background:#0F1115; border-radius:2.4rem; overflow:hidden; height:540px; position:relative; }
.km-notch { position:absolute; top:9px; left:50%; transform:translateX(-50%); width:96px; height:24px; background:#000; border-radius:9999px; z-index:50; }
.km-homebar { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:110px; height:4px; background:rgba(255,255,255,0.2); border-radius:9999px; }
.km-inner { position:relative; width:100%; height:100%; padding:2.5rem 1.1rem 1.5rem; display:flex; flex-direction:column; color:#fff; }

.km-header { display:flex; justify-content:space-between; align-items:center; padding-bottom:0.75rem; margin-bottom:0.9rem; border-bottom:1px solid rgba(255,255,255,0.06); }
.km-brand { display:flex; align-items:center; gap:0.5rem; }
.km-brand img { height:12px; width:auto; }
.km-brand span { font-size:9px; font-weight:900; letter-spacing:0.12em; color:rgba(255,255,255,0.6); }
.km-live { display:flex; align-items:center; gap:0.4rem; }
.km-live span:last-child { font-size:8px; font-weight:700; color:rgba(255,255,255,0.4); }

.km-scenes { position:relative; flex:1; min-height:340px; }
.km-scene { position:absolute; inset:0; opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity 0.45s ease, transform 0.45s ease; }
.km-scene.is-active { opacity:1; transform:translateY(0); pointer-events:auto; }
.km-scene.is-leaving { opacity:0; transform:translateY(-8px); }

.km-eyebrow { font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:0.12em; color:#15A8C7; margin-bottom:0.6rem; }
.km-eyebrow i { margin-right:4px; }
.km-label { font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:0.12em; color:rgba(255,255,255,0.3); margin-bottom:0.5rem; }
.km-card { border-radius:1rem; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); padding:0.85rem; margin-bottom:0.6rem; }
.km-card-title { font-size:9px; font-weight:900; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:0.5rem; }
.km-rows { display:flex; flex-direction:column; gap:0.4rem; }
.km-row { display:flex; justify-content:space-between; }
.km-k { font-size:9px; color:rgba(255,255,255,0.5); }
.km-v { font-size:10px; font-weight:700; color:#fff; }
.km-pill { display:flex; align-items:center; gap:0.5rem; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:0.6rem; padding:0.5rem 0.75rem; margin-bottom:0.6rem; }
.km-ico { color:#15A8C7; font-size:11px; }
.km-pill-t { font-size:10px; font-weight:700; color:#fff; }
.km-qty { margin-left:auto; font-size:8px; font-weight:700; color:rgba(255,255,255,0.4); }
.km-flex { display:flex; align-items:center; gap:0.5rem; }

.km-status { display:flex; align-items:center; gap:0.5rem; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:0.75rem; padding:0.6rem; margin-bottom:0.6rem; }
.km-status-t { font-size:9px; font-weight:700; color:#fff; }
.km-bid { padding:0.6rem 0.85rem; }
.km-bid-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.25rem; }
.km-price { font-size:11px; font-weight:900; color:#15A8C7; }
.km-price.muted { color:rgba(255,255,255,0.7); }
.km-sub { font-size:8px; color:rgba(255,255,255,0.4); }
.km-sub2 { font-size:9px; color:rgba(255,255,255,0.7); }
.km-tag { font-size:8px; font-weight:900; text-transform:uppercase; color:#15A8C7; }
.km-banner { background:rgba(21,168,199,0.15); border:1px solid rgba(21,168,199,0.30); border-radius:0.75rem; padding:0.5rem 0.75rem; text-align:center; margin-bottom:0.6rem; }
.km-banner { font-size:10px; font-weight:900; color:#15A8C7; }
.km-banner i { margin-right:4px; }

.km-cta { display:flex; align-items:center; justify-content:center; gap:0.4rem; font-size:10px; font-weight:800; color:#15A8C7; background:rgba(21,168,199,0.12); border:1px solid rgba(21,168,199,0.30); border-radius:0.65rem; padding:0.55rem; }
.km-cta.solid { color:#fff; background:linear-gradient(135deg,#15A8C7 0%,#0E8AA5 100%); border-color:transparent; }

.km-dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
.km-dot.green { background:#22c55e; animation:kmPulseG 2s infinite; }
.km-dot.amber { background:#f59e0b; animation:kmPulseA 2s infinite 0.5s; }
.km-dot.blue { background:#60a5fa; animation:kmPulseB 2s infinite 1s; }
@keyframes kmPulseG { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,0.4);} 50%{opacity:.8;box-shadow:0 0 0 6px rgba(34,197,94,0);} }
@keyframes kmPulseA { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(245,158,11,0.4);} 50%{opacity:.8;box-shadow:0 0 0 6px rgba(245,158,11,0);} }
@keyframes kmPulseB { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(96,165,250,0.4);} 50%{opacity:.8;box-shadow:0 0 0 6px rgba(96,165,250,0);} }

.km-typing { display:inline-flex; align-items:center; gap:3px; margin-left:auto; }
.km-td { width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,0.7); display:inline-block; animation:kmTd 1.1s infinite ease-in-out; }
.km-td:nth-child(2){ animation-delay:0.18s; }
.km-td:nth-child(3){ animation-delay:0.36s; }
@keyframes kmTd { 0%,60%,100%{opacity:0.25;transform:translateY(0);} 30%{opacity:1;transform:translateY(-2px);} }

.km-pdots { display:flex; justify-content:center; gap:0.4rem; padding-top:0.5rem; }
.km-pdot { width:5px; height:5px; border-radius:9999px; background:rgba(255,255,255,0.2); transition:all 0.3s ease; }
.km-pdot.is-active { background:#15A8C7; width:16px; }

@keyframes kmShake { 0%{transform:translateX(0) rotate(0);} 15%{transform:translateX(-3px) rotate(-0.6deg);} 30%{transform:translateX(4px) rotate(0.7deg);} 45%{transform:translateX(-3px) rotate(-0.5deg);} 60%{transform:translateX(2px) rotate(0.4deg);} 100%{transform:translateX(0) rotate(0);} }
.km-shake { animation:kmShake 0.5s cubic-bezier(0.36,0.07,0.19,0.97); }
@media (prefers-reduced-motion: reduce){ .km-scene{ transition:none; } .km-shake{ animation:none; } .km-td{ animation:none; } }