/* ============================================================
   Neuvexa — showcase tabs + illustrative interfaces (v3)
   Used by the home page (showcase, Asset Tracker) and products.html.
   ============================================================ */
.sc-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:34px;}
.sc-tab{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:12px;border:1.5px solid var(--line);background:rgba(255,255,255,.04);color:#B9C8E2;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:15px;transition:.25s;}
.sc-tab svg{width:18px;height:18px;stroke:currentColor;}
.sc-tab:hover{border-color:var(--teal);color:#fff;}
.sc-tab.on{background:linear-gradient(100deg,var(--teal),var(--teal-d));border-color:transparent;color:#04141b;}
.sc-tab.timing::after{content:"";position:absolute;left:0;bottom:0;height:3px;background:var(--gold);animation:sc-time 6.5s linear forwards;}
@keyframes sc-time{from{width:0}to{width:100%}}
.sc-panel{display:grid;grid-template-columns:.75fr 1.25fr;gap:48px;align-items:center;min-height:440px;}
.sc-copy{display:grid;gap:14px;animation:sc-in .5s cubic-bezier(.2,.7,.2,1) both;}
.sc-copy h3{font-size:28px;font-weight:800;line-height:1.2;color:#fff;}
.sc-copy p{color:var(--muted);font-size:16.5px;}
.sc-link{color:var(--teal);font-weight:700;font-size:15px;}
.sc-stage{min-width:0;animation:sc-in .6s cubic-bezier(.2,.7,.2,1) both;}
@keyframes sc-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sc-note{text-align:center;font-size:13px;color:#7E94B8;margin-top:22px;}
@media(max-width:920px){.sc-panel{grid-template-columns:1fr;min-height:0;gap:28px;}}
@media(prefers-reduced-motion:reduce){.sc-copy,.sc-stage{animation:none;}}

/* ============ Mock building blocks ============ */
.mk-browser { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06); color: #0A1A33; font-size: 12px; line-height: 1.4; max-width: 100%; }
.mk-browser__bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #EEF0F7; }
.mk-dots { display: flex; gap: 6px; }
.mk-dots i { width: 9px; height: 9px; border-radius: 50%; background: #D3D6E6; }
.mk-url { flex: 1; background: #fff; border-radius: 6px; padding: 4px 10px; color: #5B6675; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-browser__body { background: #fff; }
.mk-pill { font-size: 10px; background: #E3F6F8; color: #1E8E9A; padding: 2px 8px; border-radius: 99px; font-weight: 600; }
.mk-status { justify-self: start; font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 99px; background: #EEF0F7; color: #5B6675; white-space: nowrap; }
.mk-status--delivered, .mk-status--in-use { background: #E3F6EC; color: #1B7A48; }
.mk-status--dispatched, .mk-status--in-transit { background: #E3F6F8; color: #1E8E9A; }
.mk-status--processing, .mk-status--repair { background: #FFF1DC; color: #8A4B00; }

/* dashboard */
.mk-dash { display: grid; grid-template-columns: 120px 1fr; min-height: 340px; }
.mk-side { background: #0A1A33; padding: 16px 12px; display: grid; gap: 4px; align-content: start; color: #9DB0CC; }
.mk-side__logo { width: 26px; height: 26px; border-radius: 7px; background: #2EC5D3; margin-bottom: 12px; }
.mk-side span:not(.mk-side__logo) { padding: 6px 8px; border-radius: 6px; }
.mk-side .is-on { background: #10254A; color: #fff; }
.mk-main { padding: 16px; display: grid; gap: 12px; background: #F4F7FB; min-width: 0; }
.mk-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mk-kpi { background: #fff; border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; }
.mk-kpi span { color: #5B6675; font-size: 10px; }
.mk-kpi strong { font-size: 15px; font-family: var(--sans); font-weight: 600; }
.mk-kpi em { font-style: normal; font-size: 10px; color: #1B7A48; font-weight: 600; }
.mk-chart { background: #fff; border-radius: 10px; padding: 12px; display: grid; gap: 10px; }
.mk-chart__head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.mk-bars { height: 96px; display: flex; align-items: flex-end; gap: 6px; }
.mk-bars i { flex: 1; background: #A9E6EC; border-radius: 4px 4px 0 0; transform-origin: bottom; animation: mk-grow .7s cubic-bezier(.2,.7,.2,1) both; }
.mk-bars i.is-hi { background: #E9B14C; }
@keyframes mk-grow { from { transform: scaleY(0); } to { transform: none; } }
.mk-rows { background: #fff; border-radius: 10px; padding: 4px 12px; }
.mk-row { display: grid; grid-template-columns: 60px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #EEF0F7; }
.mk-row:last-child { border-bottom: 0; }
.mk-row span:first-child { color: #5B6675; }

/* phones */
.mk-phones { position: relative; display: flex; justify-content: center; padding-block: 10px; min-height: 420px; }
.mk-phone { position: relative; z-index: 2; width: 220px; height: 440px; border-radius: 34px; background: #0B0C24; padding: 10px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08); }
.mk-phone--back { position: absolute; z-index: 1; transform: translateX(130px) rotate(6deg) scale(.9); opacity: .9; }
.mk-phone__notch { position: absolute; top: 14px; left: 50%; width: 70px; height: 18px; border-radius: 12px; background: #0B0C24; transform: translateX(-50%); z-index: 2; }
.mk-app { height: 100%; border-radius: 26px; background: #F4F7FB; padding: 40px 16px 16px; display: grid; gap: 12px; align-content: start; color: #0A1A33; font-size: 11px; }
.mk-app__hello { color: #5B6675; }
.mk-app__title { font-family: var(--sans); font-size: 16px; font-weight: 600; }
.mk-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mk-days span { background: #fff; border-radius: 10px; padding: 6px 0; display: grid; justify-items: center; font-weight: 700; font-size: 13px; }
.mk-days small { font-weight: 500; font-size: 9px; color: #5B6675; }
.mk-days .is-on { background: #0A1A33; color: #fff; }
.mk-days .is-on small { color: #9DB0CC; }
.mk-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mk-slots span { text-align: center; padding: 7px 0; border-radius: 8px; background: #fff; font-weight: 600; }
.mk-slots .is-on { background: #2EC5D3; color: #0A1A33; }
.mk-slots .is-off { color: #B9BCD3; text-decoration: line-through; }
.mk-guests { display: flex; justify-content: space-between; background: #fff; padding: 10px 12px; border-radius: 10px; }
.mk-app__cta { margin-top: 8px; text-align: center; background: #E9B14C; border-radius: 12px; padding: 11px 0; font-weight: 700; }
.mk-card { background: #0A1A33; color: #fff; border-radius: 14px; padding: 14px; display: grid; gap: 6px; }
.mk-card small { color: #9DB0CC; font-size: 10px; }
.mk-card b { font-family: var(--sans); font-size: 22px; }
.mk-progress { height: 6px; border-radius: 6px; background: rgba(120,160,210,.25); overflow: hidden; }
.mk-progress i { display: block; width: 72%; height: 100%; background: #E9B14C; }
.mk-notif { background: #fff; border-radius: 12px; padding: 10px; display: flex; gap: 8px; align-items: center; }
.mk-notif__dot { width: 8px; height: 8px; border-radius: 50%; background: #1E8E9A; flex: none; }
@media (max-width: 520px) { .mk-phone--back { display: none; } }

/* chat */
.mk-chat { background: #fff; border-radius: 18px; overflow: hidden; max-width: 460px; margin-inline: auto; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6); color: #0A1A33; font-size: 13px; }
.mk-chat__head { display: flex; gap: 10px; align-items: center; padding: 14px 16px; background: #0A1A33; color: #fff; }
.mk-chat__head small { display: block; color: #9DB0CC; font-size: 11px; }
.mk-chat__avatar { width: 34px; height: 34px; border-radius: 10px; background: #2EC5D3; color: #0A1A33; display: grid; place-items: center; font-family: var(--sans); font-weight: 700; }
.mk-chat__body { padding: 16px; display: grid; gap: 10px; background: #F4F7FB; }
.mk-msg { max-width: 82%; padding: 10px 12px; border-radius: 14px; line-height: 1.45; }
.mk-msg--me { justify-self: end; background: #1E8E9A; color: #fff; border-bottom-right-radius: 4px; }
.mk-msg--bot { background: #fff; border-bottom-left-radius: 4px; }
.mk-chat__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-chip { font-size: 11px; font-weight: 600; padding: 6px 10px; border-radius: 99px; border: 1px solid #E3E9F0; background: #fff; }
.mk-chip--hi { background: #E9B14C; border-color: #E9B14C; }
.mk-typing { display: flex; gap: 4px; padding: 10px 12px; background: #fff; border-radius: 14px; width: fit-content; }
.mk-typing i { width: 6px; height: 6px; border-radius: 50%; background: #5B6675; animation: mk-dot 1.2s infinite; }
.mk-typing i:nth-child(2) { animation-delay: .15s; }
.mk-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes mk-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* website */
.mk-site { padding: 14px 18px 18px; display: grid; gap: 16px; }
.mk-site__nav { display: flex; align-items: center; gap: 14px; }
.mk-site__brand { width: 70px; height: 12px; border-radius: 4px; background: #0A1A33; }
.mk-site__links { display: flex; gap: 10px; margin-left: auto; }
.mk-site__links i { width: 34px; height: 6px; border-radius: 3px; background: #D9DCEB; }
.mk-site__btn { font-size: 10px; font-weight: 700; padding: 6px 10px; border-radius: 6px; background: #0A1A33; color: #fff; }
.mk-site__hero { display: grid; grid-template-columns: 1fr .9fr; gap: 16px; align-items: center; }
.mk-site__hero > div { display: grid; gap: 10px; justify-items: start; }
.mk-site__hero b { font-family: var(--sans); font-size: 20px; line-height: 1.15; }
.mk-lines { display: grid; gap: 6px; width: 100%; }
.mk-lines i { height: 6px; border-radius: 3px; background: #E3E5F0; }
.mk-lines i:last-child { width: 70%; }
.mk-site__cta { font-size: 11px; font-weight: 700; padding: 8px 14px; border-radius: 8px; background: #E9B14C; }
.mk-site__img { aspect-ratio: 4 / 3; border-radius: 12px; background: radial-gradient(circle at 70% 30%, #FFBC5C, transparent 45%), linear-gradient(140deg, #8E9BFF, #0A1A33); }
.mk-site__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mk-site__cards span { display: grid; gap: 6px; padding: 10px; border-radius: 10px; background: #F4F7FB; font-weight: 600; font-size: 11px; }
.mk-site__cards i { width: 22px; height: 22px; border-radius: 6px; background: #E3F6F8; }
.mk-site__score { display: flex; gap: 8px; flex-wrap: wrap; }
.mk-site__score span { display: inline-flex; gap: 6px; align-items: center; font-size: 10px; color: #5B6675; padding: 4px 10px 4px 4px; border-radius: 99px; background: #E3F6EC; }
.mk-site__score b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #1B7A48; color: #fff; font-size: 10px; }

/* asset tracker */
.mk-assets { padding: 16px; display: grid; gap: 12px; background: #F4F7FB; }
.mk-assets__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: baseline; }
.mk-assets__top strong { font-family: var(--sans); font-size: 15px; }
.mk-assets__tenant { font-size: 10px; color: #5B6675; background: #fff; padding: 4px 8px; border-radius: 6px; }
.mk-assets__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mk-assets__stats span { background: #fff; border-radius: 10px; padding: 8px 10px; display: grid; }
.mk-assets__stats small { font-size: 9.5px; color: #5B6675; }
.mk-assets__stats b { font-family: var(--sans); font-size: 15px; }
.mk-assets__table { background: #fff; border-radius: 10px; padding: 4px 12px; overflow-x: auto; }
.mk-assets__row { display: grid; grid-template-columns: 64px 1.8fr 1fr 1fr 80px; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid #EEF0F7; min-width: 480px; }
.mk-assets__row:last-child { border-bottom: 0; }
.mk-assets__row--head { color: #5B6675; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.mk-tag { font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; color: #1E8E9A; font-weight: 600; }
@media (max-width: 560px) { .mk-assets__stats { grid-template-columns: 1fr 1fr; } .mk-dash { grid-template-columns: 1fr; } .mk-side { display: none; } .mk-kpis { grid-template-columns: 1fr 1fr; } .mk-kpi:last-child { display: none; } }