/* =========================================================
   FIRSTFINTECH — PRODUCT VISUALS & MOTION
   Code-drawn product scenes (no raster assets required)
   ========================================================= */

.vis { position: relative; width: 100%; overflow: hidden; isolation: isolate; }
.vis * { box-sizing: border-box; }
.vis-frame { height: 380px; }
.vis-frame.tall { height: 520px; }
.duo-media.vis-host { padding: 0; margin-top: auto; }
.split-media.vis-host { background: var(--cream); aspect-ratio: 5 / 4; display: grid; place-items: center; }
.split-media.vis-host.dark { background: #0F2236; }
.fc-media.vis-host { max-width: 100%; }

/* Pause all loops until visible (JS toggles .playing) */
.vis:not(.playing) *, .vis:not(.playing) { animation-play-state: paused !important; }

/* ---------- 1. Payment scheme tiles ---------- */
.vis-tiles { height: 360px; }
.tiles-plane {
    position: absolute; left: -30%; top: 6%; width: 160%;
    display: grid; gap: 18px;
    transform: perspective(1400px) rotateX(24deg) rotateZ(-11deg);
    transform-origin: 50% 50%;
}
.tiles-row { display: flex; gap: 18px; width: max-content; animation: tilesDrift 38s linear infinite; }
.tiles-row:nth-child(2) { animation-direction: reverse; animation-duration: 44s; margin-left: -70px; }
.tiles-row:nth-child(3) { animation-duration: 52s; margin-left: -30px; }
@keyframes tilesDrift { to { transform: translateX(-50%); } }
.tile {
    flex: 0 0 auto; width: 116px; height: 116px; border-radius: 26px;
    display: grid; place-items: center; position: relative;
    box-shadow: 0 18px 30px -18px rgba(18,17,16,.45), inset 0 -3px 0 rgba(0,0,0,.08);
    background: #fff;
}
.tile img { max-width: 72%; max-height: 46%; object-fit: contain; }
.tile .material-symbols-outlined { font-size: 44px; color: #fff; }
.tile .material-symbols-outlined svg { stroke-width: 1.8; }
.tile b { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: -.01em; }
.tile.has-label .material-symbols-outlined { margin-bottom: 14px; }
.t-orange { background: linear-gradient(145deg, #2F7DB0, #1a5580); color: #fff; }
.t-ink { background: linear-gradient(145deg, #22344B, #0B1624); color: #fff; }
.t-green { background: linear-gradient(145deg, #3FA34D, #1E681D); color: #fff; }
.t-blue { background: linear-gradient(145deg, #3B82F6, #1D4ED8); color: #fff; }
.t-pink { background: linear-gradient(145deg, #FBC2D8, #F59BBF); color: #5b1231; }
.t-pink .material-symbols-outlined { color: #5b1231; }
.t-yellow { background: linear-gradient(145deg, #FDE68A, #F7C948); color: #4a3500; }
.t-yellow .material-symbols-outlined { color: #4a3500; }
.t-violet { background: linear-gradient(145deg, #8B5CF6, #5B21B6); color: #fff; }
.t-cream { background: linear-gradient(145deg, #fff, #E8EEF3); }

/* ---------- 2. Holographic card ---------- */
.vis-card { height: 440px; display: grid; place-items: center; perspective: 1200px; }
.holo-wrap { position: relative; animation: holoFloat 7s ease-in-out infinite; }
@keyframes holoFloat { 0%, 100% { transform: translateY(-8px); } 50% { transform: translateY(10px); } }
.holo {
    --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
    position: relative; width: 340px; height: 214px; border-radius: 20px;
    transform: rotateZ(-24deg) rotateX(var(--rx)) rotateY(var(--ry));
    transform-style: preserve-3d;
    background:
        radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.75), rgba(255,255,255,0) 42%),
        conic-gradient(from 210deg at 45% 55%, #F9D3E6, #CFE6FF, #D3F6E6, #F1D6FF, #FFE3C8, #CFE6FF, #F9D3E6);
    box-shadow: 0 50px 60px -30px rgba(80,40,90,.45), inset 0 0 0 1px rgba(255,255,255,.6);
    overflow: hidden;
    transition: transform .25s ease;
}
.holo::after {
    content: ""; position: absolute; inset: 0; mix-blend-mode: overlay; opacity: .55;
    background: repeating-linear-gradient(115deg, rgba(255,255,255,0) 0 10px, rgba(255,255,255,.35) 12px, rgba(255,255,255,0) 16px);
    animation: holoSheen 6s linear infinite;
    background-size: 200% 200%;
}
@keyframes holoSheen { to { background-position: 200% 0; } }
.holo-logo { position: absolute; left: 22px; bottom: 22px; width: 118px; filter: brightness(0); opacity: .82; }
.holo-chip {
    position: absolute; left: 24px; top: 70px; width: 44px; height: 34px; border-radius: 7px;
    background: linear-gradient(135deg, #E9D8A6, #C9A94E 55%, #EBDDB0);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.holo-chip::before { content: ""; position: absolute; inset: 8px 6px; border: 1px solid rgba(0,0,0,.18); border-radius: 4px; }
.holo-net { position: absolute; right: 22px; top: 20px; display: flex; }
.holo-net i { width: 30px; height: 30px; border-radius: 50%; display: block; background: #3B3A3A; opacity: .85; }
.holo-net i + i { margin-left: -12px; background: #8E8C8B; opacity: .8; }
.holo-num { position: absolute; right: 22px; bottom: 26px; font-family: var(--mono); font-size: 14px; letter-spacing: .12em; color: rgba(18,17,16,.75); }
.holo-type { position: absolute; left: 24px; top: 22px; font-size: 12px; font-weight: 600; color: rgba(18,17,16,.6); letter-spacing: .02em; }
.holo-shadow {
    position: absolute; left: 50%; bottom: -70px; width: 260px; height: 40px; margin-left: -130px;
    background: radial-gradient(closest-side, rgba(160,110,200,.35), transparent);
    filter: blur(8px); animation: holoShadow 7s ease-in-out infinite;
}
@keyframes holoShadow { 0%, 100% { transform: scale(.9); opacity: .7; } 50% { transform: scale(1.05); opacity: 1; } }
.holo.back {
    position: absolute; left: 90px; top: -60px; z-index: -1; transform: rotateZ(-14deg) scale(.86);
    background: linear-gradient(135deg, #22344B, #0B1624); box-shadow: 0 40px 50px -30px rgba(0,0,0,.6);
}
.holo.back::after { opacity: .15; }
.holo.back .holo-logo { filter: brightness(0) invert(1); opacity: .9; }
.holo.back .holo-num { color: rgba(255,255,255,.7); }
.holo.back .holo-type { color: rgba(255,255,255,.55); }

/* ---------- 3. Phone ---------- */
.vis-phone { display: grid; place-items: center; padding: 36px 0; }
.phone {
    position: relative; width: 272px; height: 556px; border-radius: 46px; padding: 11px;
    background: linear-gradient(145deg, #3a3633, #172C45);
    box-shadow: 0 50px 80px -40px rgba(18,17,16,.55), inset 0 0 0 1.5px rgba(255,255,255,.08);
}
.phone::before { content: ""; position: absolute; top: 20px; left: 50%; width: 84px; height: 24px; margin-left: -42px; border-radius: 14px; background: #0B1624; z-index: 3; }
.screen {
    position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden;
    background: #F4F7FA; color: var(--ink); font-size: 12px;
    padding: 48px 16px 16px;
}
.sb { position: absolute; top: 16px; left: 26px; right: 26px; display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; }
.ph-top { display: flex; justify-content: space-between; align-items: center; }
.ph-hi { font-size: 13px; color: var(--muted); }
.ph-hi strong { display: block; color: var(--ink); font-size: 15px; font-weight: 600; }
.ph-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #9de8cc, #1F6694); display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 12px; }
.ph-balance { margin-top: 18px; border-radius: 20px; padding: 16px; background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.ph-balance::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, #3B8FC4 0%, rgba(59,143,196,0) 70%); opacity: .7; }
.ph-balance small { font-size: 11px; opacity: .65; }
.ph-balance strong { display: block; font-size: 24px; font-weight: 500; letter-spacing: -.03em; margin-top: 4px; }
.ph-balance .delta { font-size: 11px; color: #9BD89A; }
.ph-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.ph-actions span { display: grid; justify-items: center; gap: 5px; font-size: 10.5px; color: var(--muted); }
.ph-actions .material-symbols-outlined { width: 42px; height: 42px; border-radius: 14px; background: #fff; font-size: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.ph-actions .material-symbols-outlined svg { width: 18px; height: 18px; }
.ph-title { margin: 18px 0 8px; font-size: 12px; font-weight: 600; display: flex; justify-content: space-between; }
.ph-title em { font-style: normal; color: var(--orange); font-weight: 500; }
.tx { display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: #fff; border-radius: 14px; margin-bottom: 6px;
    opacity: 0; transform: translateY(10px); animation: txIn .6s var(--ease) forwards; }
.tx:nth-of-type(1) { animation-delay: .3s; } .tx:nth-of-type(2) { animation-delay: .5s; }
.tx:nth-of-type(3) { animation-delay: .7s; } .tx:nth-of-type(4) { animation-delay: .9s; }
@keyframes txIn { to { opacity: 1; transform: none; } }
.tx .material-symbols-outlined { width: 32px; height: 32px; border-radius: 10px; background: var(--cream); font-size: 16px; }
.tx .material-symbols-outlined svg { width: 16px; height: 16px; }
.tx div { flex: 1; min-width: 0; }
.tx b { display: block; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx small { font-size: 10.5px; color: var(--grey); }
.tx i { font-style: normal; font-size: 12px; font-weight: 600; }
.tx i.plus { color: var(--green); }
.toast {
    position: absolute; left: 12px; right: 12px; top: 44px; z-index: 4;
    display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 18px;
    background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 16px 30px -12px rgba(18,17,16,.35);
    transform: translateY(-140%); opacity: 0;
    animation: toastLoop 9s var(--ease) 2s infinite;
}
.toast .material-symbols-outlined { width: 30px; height: 30px; border-radius: 9px; background: var(--green); color: #fff; font-size: 16px; }
.toast .material-symbols-outlined svg { width: 16px; height: 16px; stroke-width: 2.2; }
.toast b { display: block; font-size: 12px; }
.toast small { font-size: 10.5px; color: var(--muted); }
@keyframes toastLoop {
    0% { transform: translateY(-140%); opacity: 0; }
    6%, 38% { transform: none; opacity: 1; }
    46%, 100% { transform: translateY(-140%); opacity: 0; }
}
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 6px; margin-top: 16px; }
.svc { display: grid; justify-items: center; gap: 6px; font-size: 10px; color: var(--ink-2);
    opacity: 0; transform: scale(.6); animation: popIn .5s var(--ease) forwards; }
.svc .material-symbols-outlined { width: 48px; height: 48px; border-radius: 16px; font-size: 22px; color: #fff; }
.svc .material-symbols-outlined svg { width: 22px; height: 22px; stroke-width: 1.8; }
@keyframes popIn { to { opacity: 1; transform: none; } }
.ph-banner { margin-top: 16px; border-radius: 18px; padding: 14px; background: linear-gradient(135deg, #E3F0F8, #CFE4F1); display: flex; align-items: center; gap: 10px; }
.ph-banner .material-symbols-outlined { width: 36px; height: 36px; border-radius: 12px; background: #fff; }
.ph-banner b { display: block; font-size: 12.5px; }
.ph-banner small { font-size: 10.5px; color: var(--muted); }
.tier { margin-top: 14px; background: #fff; border-radius: 16px; padding: 12px; }
.tier-row { display: flex; justify-content: space-between; font-size: 11px; }
.tier-row b { font-weight: 600; }
.bar { height: 8px; border-radius: 99px; background: var(--cream); margin-top: 8px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #9de8cc, #1F6694); animation: barFill 2.4s var(--ease) .6s forwards; }
@keyframes barFill { to { width: var(--w, 72%); } }

/* ---------- 4. SoftPOS terminal ---------- */
.vis-pos { height: 440px; display: grid; place-items: center; }
.pos {
    position: relative; width: 210px; height: 360px; border-radius: 34px; padding: 14px;
    background: linear-gradient(160deg, #F1EFED 0%, #CFCBC7 55%, #B9B4AF 100%);
    box-shadow: 0 40px 60px -30px rgba(18,17,16,.5), inset 0 2px 0 rgba(255,255,255,.8), inset 0 -3px 0 rgba(0,0,0,.08);
    transform: rotate(-8deg);
}
.pos-screen { position: relative; height: 250px; border-radius: 22px; background: #0B1624; color: #fff; overflow: hidden; text-align: center; padding-top: 30px; }
.pos-screen small { font-size: 11px; opacity: .55; letter-spacing: .02em; }
.pos-amt { font-size: 30px; font-weight: 500; letter-spacing: -.03em; margin-top: 4px; }
.pos-tap { position: relative; width: 70px; height: 70px; margin: 26px auto 0; display: grid; place-items: center; }
.pos-tap .material-symbols-outlined { font-size: 34px; color: #fff; }
.pos-tap::before, .pos-tap::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.4);
    animation: ring 2.4s ease-out infinite;
}
.pos-tap::after { animation-delay: 1.2s; }
@keyframes ring { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.pos-ok {
    position: absolute; inset: 0; background: #1E681D; display: grid; place-content: center; gap: 8px; justify-items: center;
    opacity: 0; animation: posOk 6s ease infinite;
}
.pos-ok .material-symbols-outlined { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.18); font-size: 34px; }
.pos-ok .material-symbols-outlined svg { stroke-width: 2.4; }
.pos-ok b { font-size: 16px; font-weight: 500; }
@keyframes posOk { 0%, 44% { opacity: 0; } 50%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
.pos-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.pos-keys i { height: 14px; border-radius: 6px; background: rgba(255,255,255,.6); box-shadow: inset 0 -1px 0 rgba(0,0,0,.08); }
.pos-card {
    position: absolute; right: -150px; top: 70px; width: 170px; height: 107px; border-radius: 12px;
    background: conic-gradient(from 210deg at 45% 55%, #F9D3E6, #CFE6FF, #D3F6E6, #F1D6FF, #FFE3C8, #F9D3E6);
    box-shadow: 0 30px 40px -20px rgba(18,17,16,.45);
    animation: cardTap 6s var(--ease) infinite;
}
.pos-card::before { content: ""; position: absolute; left: 14px; top: 36px; width: 26px; height: 20px; border-radius: 4px; background: linear-gradient(135deg, #E9D8A6, #C9A94E); }
@keyframes cardTap {
    0% { transform: translate(120px, 40px) rotate(18deg); opacity: 0; }
    14% { opacity: 1; }
    34%, 50% { transform: translate(-40px, 10px) rotate(-6deg); opacity: 1; }
    70%, 100% { transform: translate(140px, 40px) rotate(18deg); opacity: 0; }
}

/* ---------- 5. AI chat ---------- */
.vis-chat { display: grid; place-items: center; padding: 32px 28px; }
.chat {
    width: 100%; max-width: 440px; background: #fff; border-radius: 22px;
    box-shadow: 0 40px 60px -30px rgba(18,17,16,.35), 0 0 0 1px rgba(18,17,16,.05);
    overflow: hidden;
}
.chat-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.chat-head .material-symbols-outlined { width: 34px; height: 34px; border-radius: 11px; background: var(--ink); color: #fff; font-size: 18px; }
.chat-head .material-symbols-outlined svg { width: 18px; height: 18px; }
.chat-head b { display: block; font-size: 14px; font-weight: 500; }
.chat-head small { font-size: 12px; color: var(--green); display: inline-flex; align-items: center; gap: 5px; }
.chat-head small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chat-body { padding: 16px; display: grid; gap: 10px; min-height: 330px; align-content: start; }
.msg {
    max-width: 86%; padding: 10px 13px; border-radius: 16px; font-size: 13.5px; line-height: 1.45;
    opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.msg.show { opacity: 1; transform: none; }
.msg.me { justify-self: end; background: var(--ink); color: #fff; border-bottom-right-radius: 5px; }
.msg.ai { background: var(--cream); border-bottom-left-radius: 5px; }
.msg.ai b { font-weight: 600; }
.msg-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.msg-actions span { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 500; background: #fff; }
.msg-actions span.primary { background: var(--brown); color: #fff; border-color: var(--brown); }
.typing { display: inline-flex; gap: 4px; padding: 12px 14px; background: var(--cream); border-radius: 16px; border-bottom-left-radius: 5px; width: max-content; opacity: 0; transition: opacity .2s; }
.typing.show { opacity: 1; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--grey); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.msg .verify { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.msg .verify .material-symbols-outlined { width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; font-size: 13px; }
.msg .verify .material-symbols-outlined svg { width: 13px; height: 13px; stroke-width: 2.6; }

/* ---------- 6. Live feed (alerts) ---------- */
.vis-feed { display: grid; place-items: center; padding: 32px 24px; }
.feed { width: 100%; max-width: 420px; display: grid; gap: 10px; }
.feed-item {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px;
    background: #fff; box-shadow: 0 16px 30px -20px rgba(18,17,16,.3), 0 0 0 1px rgba(18,17,16,.05);
    transition: transform .6s var(--ease), opacity .6s var(--ease);
}
.feed-item.enter { animation: feedIn .7s var(--ease); }
@keyframes feedIn { from { opacity: 0; transform: translateY(-16px) scale(.97); } to { opacity: 1; transform: none; } }
.feed-item .material-symbols-outlined { width: 38px; height: 38px; border-radius: 12px; font-size: 19px; }
.feed-item .material-symbols-outlined svg { width: 19px; height: 19px; }
.feed-item div { flex: 1; min-width: 0; }
.feed-item b { display: block; font-size: 14px; font-weight: 500; }
.feed-item small { font-size: 12.5px; color: var(--muted); }
.feed-item time { font-size: 12px; color: var(--grey); font-family: var(--mono); }
.ic-red { background: #FDECEA; color: #B42318; }
.ic-green { background: var(--green-tint); color: var(--green); }
.ic-amber { background: var(--amber-tint); color: #7A5402; }
.ic-ink { background: var(--ink); color: #fff; }
.ic-orange { background: #E3F0F8; color: #1a5580; }
.feed-item:nth-child(n+5) { opacity: .0; }
.feed-item:nth-child(4) { opacity: .45; }

/* ---------- 7. Modules stack ---------- */
.vis-modules { display: grid; place-items: center; padding: 36px 24px; }
.modules { width: 100%; max-width: 460px; background: #fff; border-radius: 22px; padding: 18px; box-shadow: 0 40px 60px -30px rgba(18,17,16,.3), 0 0 0 1px rgba(18,17,16,.05); }
.modules-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 14px; font-size: 14px; font-weight: 500; }
.modules-head span { font-family: var(--mono); font-size: 11px; color: var(--grey); letter-spacing: .06em; text-transform: uppercase; }
.mod {
    display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; margin-top: 8px;
    background: var(--cream); position: relative;
}
.mod .material-symbols-outlined { width: 38px; height: 38px; border-radius: 12px; background: #fff; font-size: 19px; }
.mod .material-symbols-outlined svg { width: 19px; height: 19px; }
.mod div { flex: 1; }
.mod b { display: block; font-size: 14px; font-weight: 500; }
.mod small { font-size: 12px; color: var(--muted); }
.switch { width: 40px; height: 24px; border-radius: 99px; background: #D2DBE3; position: relative; transition: background .35s ease; flex-shrink: 0; }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .35s var(--ease); }
.mod.on .switch { background: var(--green); }
.mod.on .switch::after { transform: translateX(16px); }
.mod .state { font-size: 11.5px; color: var(--grey); width: 64px; text-align: right; transition: color .3s; }
.mod.on .state { color: var(--green); }
.modules-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 12px 4px 2px; border-top: 1px solid var(--line-soft); font-size: 12.5px; color: var(--muted); }
.modules-foot .bar { flex: 1; margin-top: 0; }
.modules-foot .bar i { animation: none; transition: width .5s var(--ease); }

/* ---------- 8. Chart ---------- */
.vis-chart { display: grid; place-items: center; padding: 32px 24px; }
.chart-card { width: 100%; max-width: 500px; background: #fff; border-radius: 22px; padding: 22px; box-shadow: 0 40px 60px -30px rgba(18,17,16,.3), 0 0 0 1px rgba(18,17,16,.05); }
.chart-top { display: flex; justify-content: space-between; align-items: flex-start; }
.chart-top small { font-size: 12.5px; color: var(--muted); }
.chart-top strong { display: block; font-size: 30px; font-weight: 400; letter-spacing: -.03em; margin-top: 2px; }
.chart-card svg.chart { width: 100%; height: 170px; margin-top: 12px; overflow: visible; }
.chart .line { fill: none; stroke: var(--brown); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 900; stroke-dashoffset: 900; }
.chart .area { opacity: 0; }
.chart .grid line { stroke: var(--line-soft); stroke-width: 1; }
.chart .dot { opacity: 0; }
.playing .chart .line { animation: draw 2.4s var(--ease) .2s forwards; }
.playing .chart .area { animation: fadeUp 1.2s ease 1.2s forwards; }
.playing .chart .dot { animation: fadeUp .4s ease 2.4s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadeUp { to { opacity: 1; } }
.chart-x { display: flex; justify-content: space-between; font-size: 11px; color: var(--grey); margin-top: 6px; font-family: var(--mono); }
.chart-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.chart-kpis div { background: var(--cream); border-radius: 12px; padding: 10px 12px; }
.chart-kpis b { display: block; font-size: 16px; font-weight: 500; letter-spacing: -.02em; }
.chart-kpis small { font-size: 11.5px; color: var(--muted); }
.chart-tip {
    position: absolute; transform: translate(-50%, -130%); background: var(--ink); color: #fff; font-size: 11.5px;
    padding: 5px 9px; border-radius: 8px; white-space: nowrap; opacity: 0;
}
.playing .chart-tip { animation: fadeUp .4s ease 2.6s forwards; }

/* ---------- 9. EV charge ring ---------- */
.vis-charge { display: grid; place-items: center; padding: 32px 24px; }
.charge-card { width: 100%; max-width: 420px; background: #0B1624; color: #fff; border-radius: 26px; padding: 22px; box-shadow: 0 40px 60px -30px rgba(0,0,0,.55); }
.charge-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.charge-head small { color: rgba(255,255,255,.55); display: block; font-size: 11.5px; }
.charge-ring { position: relative; width: 210px; height: 210px; margin: 18px auto 10px; }
.charge-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.charge-ring circle { fill: none; stroke-width: 12; }
.charge-ring .track { stroke: rgba(255,255,255,.08); }
.charge-ring .prog { stroke: url(#chargeGrad); stroke-linecap: round; stroke-dasharray: 578; stroke-dashoffset: 578; }
.playing .charge-ring .prog { animation: chargeFill 3.2s var(--ease) .3s forwards; }
@keyframes chargeFill { to { stroke-dashoffset: 127; } }
.charge-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.charge-center strong { font-size: 44px; font-weight: 400; letter-spacing: -.04em; line-height: 1; }
.charge-center small { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 6px; display: inline-flex; gap: 5px; align-items: center; justify-content: center; }
.charge-center .material-symbols-outlined { font-size: 15px; color: #9BD89A; animation: pulseBolt 1.4s ease-in-out infinite; }
@keyframes pulseBolt { 50% { opacity: .35; } }
.charge-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.charge-stats div { background: rgba(255,255,255,.06); border-radius: 12px; padding: 10px; }
.charge-stats b { display: block; font-size: 15px; font-weight: 500; }
.charge-stats small { font-size: 11px; color: rgba(255,255,255,.55); }
.loads { margin-top: 12px; display: grid; gap: 6px; }
.load { display: grid; grid-template-columns: 58px 1fr 44px; align-items: center; gap: 8px; font-size: 11.5px; color: rgba(255,255,255,.6); }
.load .bar { background: rgba(255,255,255,.08); margin: 0; height: 6px; }
.load .bar i { background: linear-gradient(90deg, #9BD89A, #3FA34D); }

/* ---------- 10. Checkout over photo ---------- */
.shot {
    position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 1400 / 620; min-height: 460px;
    background: var(--ink);
}
.shot > img { position: absolute; inset: 0; width: 100%; height: 115%; object-fit: cover; top: -7.5%; will-change: transform; }
.shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45)); }
.shot-caption { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 2; text-align: center; color: #fff; font-size: 18px; font-weight: 500; }
.shot-caption a { display: inline-flex; gap: 6px; align-items: center; }
.shot-caption .material-symbols-outlined { font-size: 18px; transition: transform .2s var(--ease); }
.shot-caption a:hover .material-symbols-outlined { transform: translateX(4px); }
.checkout {
    position: absolute; z-index: 2; left: 50%; top: 50%; width: 260px; margin: -170px 0 0 -130px;
    background: #F9FBFC; border-radius: 16px; padding: 18px 14px 12px; text-align: center;
    box-shadow: 0 40px 70px -20px rgba(0,0,0,.55);
    animation: checkoutFloat 6s ease-in-out infinite;
}
@keyframes checkoutFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.checkout small { font-size: 11px; color: var(--grey); }
.checkout h4 { font-size: 16px; font-weight: 500; margin-top: 2px; }
.checkout .amt { font-size: 13px; color: var(--muted); margin-top: 2px; }
.checkout .pay { margin: 14px 0 8px; height: 38px; border-radius: 9px; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 500; }
.co-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-top: 1px solid var(--line-soft); font-size: 12.5px; text-align: left; }
.co-row .material-symbols-outlined { width: 28px; height: 28px; border-radius: 7px; font-size: 15px; color: #fff; }
.co-row .material-symbols-outlined svg { width: 15px; height: 15px; }
.co-row span:nth-child(2) { flex: 1; }
.co-row .chev { color: var(--grey); width: auto; height: auto; background: none; }
.co-row .chev svg { width: 14px; height: 14px; }
.co-foot { font-size: 10px; color: var(--grey); margin-top: 6px; }
.co-foot b { color: var(--ink); }

/* ---------- Global motion ---------- */
.w { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(6px);
     transition: opacity .7s var(--ease), transform .8s var(--ease), filter .7s var(--ease); }
.words-in .w { opacity: 1; transform: none; filter: none; }
.stage-wrap .stage { transform-origin: 50% 0; will-change: transform; }
[data-parallax] { will-change: transform; }
.tilt-host { perspective: 1200px; }



/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .vis-tiles { height: 300px; }
    .tile { width: 96px; height: 96px; border-radius: 22px; }
}
@media (max-width: 640px) {
    .vis-card { height: 340px; }
    .holo { width: 260px; height: 164px; border-radius: 16px; }
    .holo-logo { width: 92px; }
    .holo-chip { top: 54px; }
    .holo.back { left: 50px; top: -40px; }
    .phone { width: 246px; height: 500px; }
    .vis-pos { height: 400px; }
    .pos { transform: rotate(-6deg) scale(.9); }
    .shot { min-height: 520px; aspect-ratio: auto; }
    .chat-body { min-height: 360px; }
}

/* Hosts size to their visual */
.split-media.vis-host { aspect-ratio: auto; min-height: 460px; border-radius: var(--radius); overflow: hidden; }
.split-media.vis-host > .vis { height: 100%; }

/* ---------- 11. Product showcase carousel ---------- */
.showcase { position: relative; }
.sc-viewport { overflow: hidden; padding: 8px 0 12px; }
.sc-track { display: flex; gap: 24px; will-change: transform; transition: transform .9s cubic-bezier(.65, 0, .25, 1); }
.sc-card {
    position: relative; flex: 0 0 430px; height: 640px; border-radius: 20px; overflow: hidden; isolation: isolate;
    background: var(--ink); color: #fff; cursor: pointer;
    transition: flex-basis .9s cubic-bezier(.65, 0, .25, 1), box-shadow .4s ease;
}
.sc-card.dark { background: #0F2236; }
.sc-card.is-active { box-shadow: 0 30px 60px -30px rgba(18,17,16,.5); }
.sc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), filter .6s ease; }
.sc-card:not(.is-active) .sc-img { filter: saturate(.85) brightness(.85); }
.sc-card.is-active:hover .sc-img { transform: scale(1.03); }
.sc-card::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.45)); }
.sc-inner { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; }
.sc-inner > .vis { width: 100%; height: 100%; display: grid; place-items: center; }
.sc-inner .checkout { position: relative; left: auto; top: auto; margin: 0; }
.sc-card.dark .sc-inner .chart-card { max-width: 440px; transform: translateX(8%); }
.sc-card.dark .sc-inner .vis-card { height: 100%; }
.sc-label { position: absolute; left: 24px; bottom: 22px; z-index: 3; font-size: 18px; font-weight: 500; letter-spacing: -.01em; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.sc-next {
    position: absolute; right: 20px; bottom: 16px; z-index: 3; width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    opacity: 0; transform: translateX(-6px); transition: opacity .4s ease, transform .4s var(--ease), background-color .2s;
}
.sc-next svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-card.is-active .sc-next { opacity: 1; transform: none; }
.sc-card.is-active:hover .sc-next { background: rgba(255,255,255,.26); }
.sc-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.sc-dots button { width: 8px; height: 8px; border-radius: 99px; background: var(--line); transition: width .4s var(--ease), background-color .3s; }
.sc-dots button.is-active { width: 28px; background: var(--ink); }
@media (max-width: 640px) {
    .sc-card { height: 520px; }
    .sc-inner .vis-phone { transform: scale(.86); }
    .sc-card.dark .sc-inner .chart-card { transform: scale(.9); }
}
.checkout { color: var(--ink); }

/* ---------- 12. Global network motion graphic ---------- */
.netblock {
    position: relative; overflow: hidden; isolation: isolate;
    background: #0B1624; color: #fff; border-radius: 24px;
    padding: 110px 48px 56px; text-align: center;
}
.netblock .eyebrow { color: rgba(255,255,255,.6); }
.netblock .h1 { max-width: 780px; margin: 0 auto; }
.netblock .lead { max-width: 620px; margin: 18px auto 0; color: rgba(255,255,255,.68); }
.net-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.net-glow.a { width: 520px; height: 520px; left: -120px; top: -200px; opacity: .55; background: radial-gradient(circle, #1F4E79, transparent 65%); animation: glowDrift 16s ease-in-out infinite alternate; }
.net-glow.b { width: 620px; height: 620px; right: -200px; bottom: -260px; opacity: .35; background: radial-gradient(circle, #3B8FC4, transparent 62%); animation: glowDrift 20s ease-in-out infinite alternate-reverse; }
@keyframes glowDrift { to { transform: translate(120px, 60px) scale(1.15); } }
.vis-network { margin-top: 48px; overflow: visible; }
.net-map { position: relative; max-width: 1200px; margin: 0 auto; }
.net-map svg { width: 100%; height: auto; display: block; overflow: visible; }
.net-land { fill: none; stroke: url(#landFade); stroke-width: 3.4; stroke-linecap: round; }
.net-scan { fill: url(#scanGrad); animation: scan 9s linear infinite; }
@keyframes scan { to { transform: translateX(1440px); } }
.net-arc { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 1.2; stroke-dasharray: 3 5; }
.net-coin { opacity: 0; }
.net-coin circle { fill: #3B8FC4; stroke: #BEF1DE; stroke-width: 1.5; filter: drop-shadow(0 4px 8px rgba(59,143,196,.35)); }
.net-coin text { fill: #fff; font-family: var(--font); font-size: 11.5px; font-weight: 600; text-anchor: middle; }
.net-node .core { fill: #3B8FC4; stroke: #0B1624; stroke-width: 2; }
.net-node.hub .core { fill: #fff; stroke: #3B8FC4; stroke-width: 3; }
.net-node .pulse { fill: none; stroke: #3B8FC4; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: nodePulse 2.8s ease-out infinite; }
.net-node .pulse.p2 { animation-delay: 1.4s; }
@keyframes nodePulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }
.net-node text { fill: rgba(255,255,255,.8); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.net-chip {
    position: absolute; transform: translate(-50%, -50%) scale(.92); opacity: 0;
    display: flex; align-items: center; gap: 10px; text-align: left; white-space: nowrap;
    padding: 9px 14px 9px 10px; border-radius: 14px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 20px 40px -20px rgba(0,0,0,.6);
    animation: netChip 13.2s var(--ease) infinite;
}
.net-chip .material-symbols-outlined { width: 30px; height: 30px; border-radius: 9px; background: #3B8FC4; font-size: 16px; color: #fff; }
.net-chip .material-symbols-outlined svg { width: 16px; height: 16px; }
.net-chip b { display: block; font-size: 13px; font-weight: 500; }
.net-chip small { font-size: 11.5px; color: rgba(255,255,255,.6); }
@keyframes netChip {
    0% { opacity: 0; transform: translate(-50%, -30%) scale(.92); }
    4%, 26% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    32%, 100% { opacity: 0; transform: translate(-50%, -70%) scale(.96); }
}
.netblock .stats { margin-top: 56px; text-align: left; }
.netblock .stat { border-color: rgba(255,255,255,.16); }
.netblock .stat span { color: #fff; }
.netblock .stat small { color: rgba(255,255,255,.55); }
@media (max-width: 991.98px) {
    .netblock { padding: 80px 20px 40px; }
    .net-chip { display: none; }
    .net-chip:nth-of-type(1), .net-chip:nth-of-type(2) { display: flex; }
    .net-node text { font-size: 18px; }
}
@media (max-width: 640px) {
    .net-chip { display: none !important; }
    .net-node text { font-size: 24px; }
    .vis-network { margin-top: 32px; }
}

.checkout { color: var(--ink); }
.net-coin text.sm { font-size: 8.5px; letter-spacing: -.02em; }

/* Product cut-out cards in the showcase */
.sc-card.product { background: radial-gradient(120% 90% at 50% 30%, #1B4A73 0%, #0F2236 55%, #0B1624 100%); }
.sc-card.product .sc-img { object-fit: contain; padding: 56px 40px 84px; filter: drop-shadow(0 40px 50px rgba(0,0,0,.45)); }
.sc-card.product:not(.is-active) .sc-img { filter: drop-shadow(0 40px 50px rgba(0,0,0,.45)) brightness(.9); }
.split-media.contain { background: radial-gradient(120% 90% at 50% 30%, #E3F0F8 0%, #F2F6F9 70%); }

/* Product cards: gentle floating motion */
.sc-card.product .sc-img { animation: productFloat 6s ease-in-out infinite; }
.sc-card.product:nth-child(2n) .sc-img { animation-duration: 7s; animation-delay: -2s; }
.sc-card.product:nth-child(3n) .sc-img { animation-duration: 6.5s; animation-delay: -4s; }
@keyframes productFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-14px) rotate(-.6deg); }
}
.sc-card.product.is-active .sc-img { animation-duration: 5s; }
.sc-card.product::before {
    content: ""; position: absolute; left: 50%; bottom: 70px; width: 55%; height: 30px; margin-left: -27.5%; z-index: 0;
    background: radial-gradient(closest-side, rgba(0,0,0,.45), transparent); filter: blur(6px);
    animation: productShadow 6s ease-in-out infinite;
}
@keyframes productShadow { 0%, 100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(.85); opacity: .55; } }

/* ---------- Real iPhone mockup frame for every phone ---------- */
.phone {
    position: relative; width: 272px; height: auto; aspect-ratio: 688 / 1416;
    padding: 0; border-radius: 0; background: none;
    box-shadow: none; filter: drop-shadow(0 40px 50px rgba(11,22,36,.35));
}
.phone::before { display: none; }
.phone .screen {
    position: absolute; left: 4.215%; top: 1.624%; width: 91.72%; height: 96.75%;
    border-radius: 15% / 6.9%; padding: 44px 14px 14px;
}
.phone-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }
.sb { top: 14px; left: 22px; right: 20px; }
.sb-ic { display: inline-flex; align-items: flex-end; gap: 2px; }
.sb-ic i { width: 3px; background: currentColor; border-radius: 1px; display: block; }
.sb-ic i:nth-child(1) { height: 5px; } .sb-ic i:nth-child(2) { height: 7px; } .sb-ic i:nth-child(3) { height: 9px; }
.sb-ic b { width: 18px; height: 9px; border-radius: 3px; border: 1.2px solid currentColor; margin-left: 5px; position: relative; }
.sb-ic b::after { content: ""; position: absolute; inset: 1.5px 4px 1.5px 1.5px; background: currentColor; border-radius: 1px; }
.toast { top: 40px; }
.sc-inner .vis-phone .phone { width: 300px; }
@media (max-width: 640px) { .phone { width: 240px; } }

/* Gallery screenshots in the mockup */
.phones figure.mock { position: relative; width: 250px; aspect-ratio: 688 / 1416; padding: 0; background: none; border-radius: 0; }
.mock-screen { position: absolute; left: 4.215%; top: 1.624%; width: 91.72%; height: 96.75%; border-radius: 15% / 6.9%; overflow: hidden; background: #fff; }
.mock-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 0 !important; }
.phones figure.mock .phone-frame { border-radius: 0; }

.sc-inner .vis-phone { padding: 0 0 40px; }
.sc-inner .vis-phone .phone { width: 255px; }
@media (max-width: 640px) { .sc-inner .vis-phone .phone { width: 210px; } }

@media (max-width: 640px) {
    .netblock .stats { text-align: center; margin-top: 40px; gap: 0; }
    .netblock .stat { border-left: 0; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.12); }
    .netblock .stat:first-child { border-top: 0; }
}

/* ---------- Bento grid ---------- */
.bento {
    display: grid; gap: 16px;
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
        "hero hero hero hero card card"
        "hero hero hero hero ai   ai"
        "stat stat pos  pos  ai   ai"
        "stat stat ev   ev   ev   ev";
    grid-auto-rows: 260px;
}
.bento-tile {
    position: relative; overflow: hidden; isolation: isolate; border-radius: 22px;
    background: var(--cream); color: var(--ink);
    display: flex; flex-direction: column;
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.bento-tile:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(23,44,69,.45); }
.bento-tile.dark { background: radial-gradient(120% 100% at 70% 0%, #1B4A73 0%, #0F2236 55%, #0B1624 100%); color: #fff; }
.bento-tile.dark .eyebrow { color: rgba(255,255,255,.6); }
.bento-tile.dark p { color: rgba(255,255,255,.7); }
.bento-text { position: relative; z-index: 2; padding: 26px 28px 0; max-width: 520px; }
.bento-text .eyebrow { margin-bottom: 10px; }
.bento-text h3 { font-size: 22px; font-weight: 400; letter-spacing: -.02em; line-height: 1.2; }
.bento-text p { margin-top: 8px; font-size: 15px; color: var(--muted); }
.bento-media { position: relative; flex: 1; min-height: 0; }
.bento-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.bento-tile:hover .bento-media img { transform: scale(1.04); }
.bento-go {
    position: absolute; right: 18px; top: 18px; z-index: 3; width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center; background: #fff; color: var(--ink);
    opacity: 0; transform: translate(-6px, 6px); transition: opacity .3s, transform .4s var(--ease);
}
.bento-tile.dark .bento-go { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.22); }
.bento-tile:hover .bento-go { opacity: 1; transform: none; }
.bento-go .material-symbols-outlined { font-size: 18px; }

.t-hero { grid-area: hero; }
.t-hero .bento-media img { object-position: 62% 50%; }
.t-card { grid-area: card; background: linear-gradient(160deg, #F7EEF7, #E8F1FA 60%, #F2F6F9); }
.t-card .bento-media .vis-card { height: 100%; transform: scale(.62); transform-origin: 50% 40%; }
.t-ai { grid-area: ai; }
.t-ai .vis-feed { padding: 16px 20px; place-items: start center; height: 100%; }
.t-ai .feed-item { padding: 11px 13px; }
.t-stats { grid-area: stat; }
.bento-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px 20px 22px; height: 100%; align-content: end; }
.bento-stats div { background: #fff; border-radius: 16px; padding: 16px; }
.bento-stats strong { display: block; font-size: 30px; font-weight: 400; letter-spacing: -.03em; line-height: 1; color: var(--orange); }
.bento-stats span { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; }
.t-pos { grid-area: pos; background: linear-gradient(160deg, #E3F0F8, #F2F6F9); }
.t-pos .bento-media img { object-fit: contain; padding: 10px 0 0; filter: drop-shadow(0 24px 30px rgba(23,44,69,.35)); animation: productFloat 6s ease-in-out infinite; }
.t-ev { grid-area: ev; }
.t-ev .bento-media { position: absolute; inset: 0; z-index: -1; }
.t-ev .bento-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,22,36,.85) 0%, rgba(11,22,36,.2) 60%, rgba(11,22,36,0)); }

.bento-ticker { margin-top: 16px; overflow: hidden; border-radius: 16px; background: var(--ink); padding: 14px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.bento-ticker-track { display: flex; gap: 12px; width: max-content; animation: marquee 40s linear infinite; }
.bento-ticker span { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #fff; font-size: 14px; white-space: nowrap; }
.bento-ticker .material-symbols-outlined { font-size: 17px; color: #BEF1DE; }

@media (max-width: 991.98px) {
    .bento { grid-template-columns: 1fr 1fr; grid-template-areas: "hero hero" "hero hero" "card ai" "stat ai" "pos ev"; grid-auto-rows: 240px; }
}
@media (max-width: 640px) {
    .bento { grid-template-columns: 1fr; grid-template-areas: "hero" "hero" "card" "ai" "ai" "stat" "pos" "ev"; grid-auto-rows: 230px; gap: 12px; }
    .bento-go { opacity: 1; transform: none; }
    .t-hero .bento-media img { object-position: 70% 50%; }
}
/* bento fixes */
.bento-media img { position: static; inset: auto; width: auto; height: auto; object-fit: initial; }
.bento-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t-pos .bento-media > img { object-fit: contain; }
.bento-tile .feed-item { color: var(--ink); }
.bento-ticker span { all: unset; }
.bento-ticker-track > span { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #fff; font-size: 14px; white-space: nowrap; }
.bento-ticker-track .material-symbols-outlined { display: inline-flex; width: 17px; height: 17px; font-size: 17px; color: #BEF1DE; }
.bento-stats { align-content: stretch; grid-auto-rows: 1fr; }
.bento-stats div { display: flex; flex-direction: column; justify-content: flex-end; }
.t-card .bento-media .vis-card { transform: scale(.5); transform-origin: 50% 30%; }
.bento-stats { align-content: end; grid-auto-rows: auto; }
@media (max-width: 640px) {
    .bento { grid-template-areas: "hero" "hero" "card" "ai" "ai" "stat" "stat" "pos" "ev"; }
    .t-card .bento-media .vis-card { transform: scale(.48); }
}
.t-card .bento-media .vis-card { overflow: visible; transform: scale(.5) translateY(-30px); transform-origin: 50% 50%; position: absolute; inset: -40px 0 -40px; height: auto; }
/* bento: restore card logo size, full-bleed hero image */
.bento-media .holo-logo { width: 118px; height: auto; }
.bento-media .holo-chip { width: 44px; }
.t-hero .bento-media { position: absolute; inset: 0; z-index: -1; }
.t-hero .bento-media > img { object-position: 60% 62%; transform: scale(1.12); transform-origin: 60% 80%; }
.t-hero:hover .bento-media > img { transform: scale(1.16); }
.t-hero .bento-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,22,36,.92) 0%, rgba(11,22,36,.55) 26%, rgba(11,22,36,0) 48%); }
@media (max-width: 640px) {
    .t-hero .bento-media > img { object-position: 70% 70%; transform: scale(1.25); }
    .bento-media .holo-logo { width: 92px; }
}
/* bento hero: image below text, top edge faded into tile (no seam) */
.t-hero .bento-media { position: relative; inset: auto; z-index: 0; margin-top: -40px; }
.t-hero .bento-media::after { display: none; }
.t-hero .bento-media > img {
    object-position: 60% 30%; transform: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
}
.t-hero:hover .bento-media > img { transform: scale(1.03); }
.t-hero.dark { background: radial-gradient(120% 100% at 60% 30%, #163B63 0%, #0D2138 50%, #081423 100%); }
@media (max-width: 640px) {
    .t-hero .bento-media { margin-top: -10px; }
    .t-hero .bento-media > img { object-position: 72% 20%; transform: none; }
}
/* bento hero tile: picture wrapper + phone layout */
.bento-media > picture { position: absolute; inset: 0; display: block; }
.bento-media > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%); transition: transform 1.2s var(--ease); }
.t-hero:hover .bento-media > picture > img { transform: scale(1.03); }
@media (max-width: 640px) {
    .bento { grid-template-areas: "hero" "hero" "hero" "card" "ai" "ai" "stat" "stat" "pos" "ev"; }
    .t-hero .bento-text { padding-right: 70px; }
    .t-hero .bento-media { margin-top: 8px; }
    .t-hero .bento-media > picture > img { object-fit: contain; object-position: center bottom;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%); mask-image: linear-gradient(180deg, transparent 0%, #000 12%); }
}
@media (max-width: 640px) {
    .t-hero.dark { background: radial-gradient(140% 80% at 55% 70%, #1A4068 0%, #0D2138 55%, #081423 100%); }
    .t-hero .bento-media > picture > img { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%); mask-image: linear-gradient(180deg, transparent 0%, #000 34%); }
    .t-hero .bento-media { margin-top: -30px; }
}
@media (max-width: 640px) { .t-hero .bento-media > picture > img { object-fit: cover; object-position: 50% 100%; } }
@media (max-width: 640px) { .t-hero .bento-media > picture { left: 50%; right: auto; width: min(100%, 400px); transform: translateX(-50%); } }
@media (max-width: 640px) {
    .t-hero .bento-media > picture > img {
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%), linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
        -webkit-mask-composite: source-in;
        mask-image: linear-gradient(180deg, transparent 0%, #000 34%), linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
        mask-composite: intersect;
    }
}

/* ===== Mobile image responsiveness pass ===== */
@media (max-width: 640px) {
    .cta2-visual { height: 420px; }
    .cta2-phone { width: 180px; margin: -190px 0 0 -90px; top: 52%; }
    .cta2-chip.c1 { top: 16px; } .cta2-chip.c2 { top: auto; bottom: 70px; }
    .mod .state { display: none; }
    .mod b { font-size: 13.5px; } .mod small { font-size: 12px; }
    .modules { padding: 14px; }
    .vis-phone { padding: 24px 0; }
    .vis-card { height: 300px; }
    .vis-tiles { height: 260px; }
    .tile { width: 84px; height: 84px; border-radius: 20px; }
    .shot { min-height: 0; aspect-ratio: 4 / 5; }
    .phones figure.mock { width: 210px; }
}