/* ==========================================================================
   MeshTack public site — 3D section scenes (2026-11-07).
   Markup: Views/Shared/_Scene3D.cshtml. Behaviour: js/public-3d.js (pointer
   parallax, fly-out on scroll, pause when off screen).

   Every scene is plain HTML in CSS 3D. Without JS it renders in its resting
   pose; under prefers-reduced-motion nothing moves.
   ========================================================================== */

/* ── Section layout: heading on the left, scene on the right ────────────── */
.mt-headrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; margin-bottom: 40px; }
.mt-headrow .mt-head { margin-bottom: 0; }
@media (max-width: 980px) { .mt-headrow { grid-template-columns: 1fr; gap: 8px; } }

/* ── Stage ──────────────────────────────────────────────────────────────── */
.x3 {
    --x3h: 400px; --spread: 1;
    position: relative; height: var(--x3h); perspective: 1200px; perspective-origin: 50% 40%;
    font-family: var(--mt-font, Inter, system-ui, sans-serif); user-select: none; pointer-events: none;
}
.x3__world {
    position: absolute; inset: 0; transform-style: preserve-3d;
    transform: rotateX(calc(var(--wx, 8deg) - var(--py, 0) * 12deg)) rotateY(calc(var(--wy, -16deg) + var(--px, 0) * 22deg));
    transition: transform .9s cubic-bezier(.2,.7,.3,1);
}
.x3 i, .x3 b, .x3 small, .x3 span { font-style: normal; }

/* Any object in the scene: centred on the stage, placed with --x/--y/--z. */
.x3-o {
    position: absolute; left: 50%; top: 50%; transform-style: preserve-3d;
    transform: translate(-50%, -50%) translate3d(var(--x, 0px), var(--y, 0px), var(--z, 0px))
               rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) scale(var(--s, 1));
}

/* Chips that fly out of the device when the scene comes into view. */
.x3-pop {
    --x: calc(var(--fx, 0px) * var(--spread)); --y: var(--fy, 0px); --z: var(--fz, 0px);
    transition: transform 1.1s cubic-bezier(.16,.84,.3,1) var(--d, 0ms), opacity .6s ease var(--d, 0ms);
    animation: x3-bob 6s ease-in-out infinite; animation-delay: calc(var(--d, 0ms) * -4);
}
.mt3d .x3:not(.is-in) .x3-pop { --x: var(--ox, 0px); --y: var(--oy, 0px); --z: -30px; opacity: 0; }
@keyframes x3-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

/* Soft shadow on the floor under everything. */
.x3-floor {
    position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; margin: -210px 0 0 -210px;
    transform: translateY(180px) rotateX(90deg);
    background: radial-gradient(closest-side, rgba(15,23,42,.24), rgba(15,23,42,.08) 55%, transparent);
}

/* ── Chip ───────────────────────────────────────────────────────────────── */
.x3-chip {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; white-space: nowrap;
    background: rgba(255,255,255,.96); border: 1px solid rgba(226,232,240,.9); border-radius: 14px;
    box-shadow: 0 1px 0 #fff inset, 0 3px 0 rgba(148,163,184,.35), 0 24px 40px -18px rgba(15,23,42,.5);
    font-size: 12px; line-height: 1.25; color: #475569;
}
.x3-chip b { display: block; color: #0f172a; font-size: 12.5px; font-weight: 700; font-family: var(--mt-font-head, Sora, sans-serif); }
.x3-chip small { display: block; font-size: 11px; color: #64748b; }
.x3-chip__i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; flex: none; }
.x3-chip--sm { padding: 8px 12px 8px 8px; }
.x3-chip--sm .x3-chip__i { width: 26px; height: 26px; font-size: 13px; border-radius: 8px; }
.x3-chip--dark { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); box-shadow: 0 3px 0 rgba(0,0,0,.25), 0 24px 40px -18px rgba(0,0,0,.7); backdrop-filter: blur(6px); }
.x3-chip--dark b { color: #fff; } .x3-chip--dark small { color: rgba(255,255,255,.7); }
.x3-chip--dark .x3-chip__i { background: rgba(255,255,255,.12); }

/* ── Phone ──────────────────────────────────────────────────────────────── */
.x3-phone {
    width: 172px; height: 344px; padding: 8px; border-radius: 30px;
    background: linear-gradient(160deg, #1e293b, #0f172a 60%); box-shadow: 0 0 0 1.5px #334155 inset;
}
.x3-phone--sm { --s: .8; }
.x3-phone__back, .x3-phone__mid { position: absolute; inset: 0; border-radius: inherit; }
.x3-phone__back { background: #020617; transform: translateZ(-14px); box-shadow: 0 40px 60px -20px rgba(2,6,23,.6); }
.x3-phone__mid  { background: #1e293b; transform: translateZ(-7px); }
.x3-phone__screen { position: relative; height: 100%; border-radius: 23px; overflow: hidden; background: #ece5dd; transform: translateZ(1px); display: flex; flex-direction: column; }
.x3-phone__screen::before { content: ""; position: absolute; top: 6px; left: 50%; width: 54px; height: 14px; margin-left: -27px; border-radius: 10px; background: #020617; z-index: 2; }

.x3-wa-head { display: flex; align-items: center; gap: 7px; padding: 26px 10px 9px; background: #075e54; color: #fff; font-size: 10.5px; }
.x3-wa-head b { font-weight: 700; } .x3-wa-head small { margin-left: auto; font-size: 8.5px; opacity: .75; }
.x3-av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; background: #25d366; color: #fff; flex: none; }
.x3-wa-body { flex: 1; padding: 10px 8px; display: flex; flex-direction: column; gap: 6px;
    background-image: radial-gradient(rgba(0,0,0,.05) 1px, transparent 1px); background-size: 12px 12px; }
.x3-msg { max-width: 84%; padding: 6px 8px; border-radius: 9px; font-size: 9.5px; line-height: 1.35; color: #111b21; box-shadow: 0 1px 1px rgba(0,0,0,.1); }
.x3-msg.in { align-self: flex-start; background: #fff; border-top-left-radius: 2px; }
.x3-msg.out { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 2px; }
.x3-prod, .x3-pdf { display: flex; gap: 7px; align-items: center; }
.x3-prod > span { width: 30px; height: 30px; border-radius: 6px; background: #dbeafe; display: grid; place-items: center; font-size: 16px; }
.x3-prod b, .x3-pdf b { display: block; font-size: 9.5px; } .x3-prod small, .x3-pdf small { font-size: 8.5px; color: #64748b; }
.x3-pdf > span { width: 26px; height: 32px; border-radius: 4px; background: #e8534b; color: #fff; font-size: 7.5px; font-weight: 800; display: grid; place-items: center; }
.x3-typing { align-self: flex-start; display: flex; gap: 3px; padding: 8px 10px; background: #fff; border-radius: 9px; }
.x3-typing i { width: 5px; height: 5px; border-radius: 50%; background: #94a3b8; animation: x3-dot 1.2s infinite; }
.x3-typing i:nth-child(2) { animation-delay: .15s; } .x3-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes x3-dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* Messages appear one after another once the scene is in view. */
.mt3d .x3 .x3-wa-body > * { transition: opacity .4s ease, transform .5s cubic-bezier(.2,.7,.3,1); }
.mt3d .x3:not(.is-in) .x3-wa-body > * { opacity: 0; transform: translateY(8px) scale(.96); }
.x3 .x3-wa-body > :nth-child(2) { transition-delay: .5s; } .x3 .x3-wa-body > :nth-child(3) { transition-delay: .9s; }
.x3 .x3-wa-body > :nth-child(4) { transition-delay: 1.3s; } .x3 .x3-wa-body > :nth-child(5) { transition-delay: 1.7s; }

/* ── Monitor (Tally PC) ─────────────────────────────────────────────────── */
.x3-monitor { width: 250px; height: 168px; padding: 9px; border-radius: 12px; background: linear-gradient(160deg, #334155, #0f172a); }
.x3-monitor__screen { position: relative; height: 100%; border-radius: 6px; background: #fffaf0; padding: 10px 12px; font-size: 10px; color: #475569; transform: translateZ(1px); overflow: hidden; }
.x3-monitor__back { position: absolute; inset: 0; border-radius: inherit; background: #1e293b; transform: translateZ(-12px); }
.x3-monitor__neck { position: absolute; left: 50%; bottom: -46px; width: 30px; height: 52px; margin-left: -15px; background: linear-gradient(90deg, #94a3b8, #cbd5e1, #94a3b8); transform: translateZ(-8px); }
.x3-monitor__base { position: absolute; left: 50%; bottom: -48px; width: 130px; height: 70px; margin-left: -65px; border-radius: 12px; background: linear-gradient(#cbd5e1, #94a3b8); transform-origin: 50% 0; transform: translateZ(-8px) rotateX(90deg) translateY(-35px); }
.x3-tally-bar { margin: -10px -12px 8px; padding: 6px 12px; background: #fdf1e0; color: #b45309; font-weight: 800; font-size: 8.5px; letter-spacing: .08em; }
.x3-tally-row, .x3-tally-total { display: flex; justify-content: space-between; padding: 2px 0; }
.x3-tally-row b { color: #0f172a; font-weight: 600; }
.x3-tally-total { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #e2c9a0; font-weight: 800; color: #0f172a; font-size: 11px; }
.x3-tally-save { position: absolute; right: 10px; bottom: 8px; font-size: 9px; font-weight: 800; color: #fff; background: #16a34a; padding: 3px 8px; border-radius: 999px; animation: x3-blink 3.6s ease-in-out infinite; }
@keyframes x3-blink { 0%, 20% { opacity: 0; transform: scale(.7); } 30%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* The invoice flying from the PC to the phone. */
.x3-fly { width: 0; height: 0; animation: x3-fly 3.6s cubic-bezier(.45,.05,.4,1) infinite; }
.x3-fly span { position: absolute; left: -17px; top: -21px; width: 34px; height: 42px; border-radius: 5px; background: #e8534b; color: #fff; font-size: 9px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 14px 24px -10px rgba(232,83,75,.8); }
@keyframes x3-fly {
    0%   { transform: translate3d(var(--ax), var(--ay), var(--az)) scale(.5); opacity: 0; }
    12%  { opacity: 1; }
    50%  { transform: translate3d(calc((var(--ax) + var(--bx)) / 2), calc((var(--ay) + var(--by)) / 2 - 110px), calc((var(--az) + var(--bz)) / 2 + 90px)) rotateZ(-14deg) scale(1.1); }
    88%  { opacity: 1; }
    100% { transform: translate3d(var(--bx), var(--by), var(--bz)) scale(.45); opacity: 0; }
}

/* ── SEO board with 3D bars ─────────────────────────────────────────────── */
.x3-board { --rx: 64deg; width: 300px; height: 210px; border-radius: 18px; background: linear-gradient(160deg, #ffffff, #eef4ff); border: 1px solid #dbe6fb; box-shadow: 0 50px 70px -40px rgba(30,64,175,.55); }
.x3-board__label { position: absolute; left: 16px; top: 12px; font-size: 11px; font-weight: 700; color: #1e3a8a; }
.x3-bar {
    position: absolute; bottom: 26px; left: var(--l); width: 30px; height: var(--h); transform-style: preserve-3d;
    background: linear-gradient(#60a5fa, #2563eb); transform-origin: 50% 100%; transform: rotateX(-90deg);
    transition: transform 1s cubic-bezier(.16,.84,.3,1) var(--dl, 0s);
}
.x3-bar::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 30px; background: #bfdbfe; transform-origin: 50% 0; transform: rotateX(-90deg); }
.x3-bar::after  { content: ""; position: absolute; right: 0; top: 0; width: 30px; height: 100%; background: linear-gradient(#3b82f6, #1e40af); transform-origin: 100% 50%; transform: rotateY(-90deg); }
.x3-bar:last-of-type { background: linear-gradient(#4ade80, #16a34a); }
.x3-bar:last-of-type::before { background: #bbf7d0; } .x3-bar:last-of-type::after { background: linear-gradient(#22c55e, #15803d); }
.mt3d .x3:not(.is-in) .x3-bar { transform: rotateX(-90deg) scaleY(.04); }

.x3-search { display: flex; align-items: center; gap: 10px; width: 270px; padding: 10px 16px; border-radius: 999px; background: #fff; border: 1px solid #e2e8f0; font-size: 13px; color: #0f172a; box-shadow: 0 3px 0 rgba(148,163,184,.35), 0 24px 40px -18px rgba(15,23,42,.45); }
.x3-search i { margin-left: auto; }
.x3-g { font: 800 17px/1 var(--mt-font-head, Sora, sans-serif); background: conic-gradient(from -45deg, #ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.x3-pin i { display: block; width: 38px; height: 38px; border-radius: 50% 50% 50% 0; background: #ea4335; transform: rotate(-45deg); box-shadow: 0 16px 24px -10px rgba(234,67,53,.8); animation: x3-drop 2.6s ease-in-out infinite; }
.x3-pin i::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: #fff; }
@keyframes x3-drop { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }

/* ── Social carousel ────────────────────────────────────────────────────── */
.x3-ring { width: 0; height: 0; --rx: -4deg; }
.x3-ring__spin { transform-style: preserve-3d; animation: x3-spinY 28s linear infinite; }
.x3-card {
    position: absolute; left: -56px; top: -78px; width: 112px; height: 150px; padding: 8px; border-radius: 16px;
    background: #fff; border: 1px solid #f1f5f9; text-align: center; font-size: 11px; color: #64748b;
    transform: rotateY(var(--a)) translateZ(215px); backface-visibility: hidden;
    box-shadow: 0 24px 40px -20px rgba(15,23,42,.5);
}
.x3-card__top { height: 78px; border-radius: 10px; display: grid; place-items: center; font: 800 26px/1 var(--mt-font-head, Sora, sans-serif); color: #fff; margin-bottom: 8px; }
.x3-card b { display: block; color: #0f172a; font-size: 12px; }
@keyframes x3-spinY { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }

.x3-composer { background: #fff; padding: 30px 12px 12px; gap: 9px; }
.x3-composer__h { font: 700 12px var(--mt-font-head, Sora, sans-serif); color: #0f172a; }
.x3-composer__img { height: 120px; border-radius: 12px; display: grid; place-items: center; font-size: 46px; background: linear-gradient(135deg, #fde68a, #f472b6 60%, #8b5cf6); }
.x3-composer__line { height: 8px; border-radius: 4px; background: #e2e8f0; }
.x3-composer__line.short { width: 60%; }
.x3-composer__go { margin-top: auto; padding: 9px; border-radius: 10px; text-align: center; font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(120deg, #ec4899, #8b5cf6); }

/* ── Cloud with features in orbit ───────────────────────────────────────── */
.x3--cloud { --wx: 4deg; --wy: 0deg; max-width: 640px; margin: -8px auto 36px; }
.x3-cloud { width: 250px; height: 130px; animation: x3-bob 7s ease-in-out infinite; filter: drop-shadow(0 20px 40px rgba(0,209,249,.35)); }
.x3-cloud > i { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffffff, #dbeafe 55%, #a5b4fc); }
.x3-cloud .c1 { left: 20px; top: 50px; width: 90px; height: 80px; }
.x3-cloud .c2 { left: 70px; top: 6px; width: 120px; height: 120px; }
.x3-cloud .c3 { left: 150px; top: 36px; width: 90px; height: 90px; }
.x3-cloud .c4 { left: 30px; top: 78px; width: 200px; height: 52px; border-radius: 30px; }
.x3-cloud__name { position: absolute; left: 0; right: 0; top: 66px; text-align: center; font: 800 21px/1 var(--mt-font-head, Sora, sans-serif); background: var(--mt-grad-btn, linear-gradient(120deg,#4f46e5,#7c3aed)); -webkit-background-clip: text; background-clip: text; color: transparent; transform: translateZ(2px); }
.x3-rain { position: absolute; left: 0; right: 0; top: 128px; display: flex; justify-content: center; gap: 46px; }
.x3-rain i { width: 6px; height: 6px; border-radius: 50%; background: #67e8f9; box-shadow: 0 0 10px #22d3ee; animation: x3-rain 1.8s linear infinite; }
.x3-rain i:nth-child(2) { animation-delay: .6s; } .x3-rain i:nth-child(3) { animation-delay: 1.2s; }
@keyframes x3-rain { from { transform: translateY(0); opacity: 1; } to { transform: translateY(110px); opacity: 0; } }

.x3-pad { --y: 150px; --rx: 90deg; width: 0; height: 0; }
.x3-pad i { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 2px solid rgba(103,232,249,.55); transform: translate(-50%, -50%); animation: x3-pulse 3.6s ease-out infinite; }
.x3-pad i:nth-child(1) { width: 140px; height: 140px; background: radial-gradient(circle, rgba(79,70,229,.45), transparent 70%); }
.x3-pad i:nth-child(2) { width: 240px; height: 240px; animation-delay: 1.2s; }
.x3-pad i:nth-child(3) { width: 340px; height: 340px; animation-delay: 2.4s; border-color: rgba(167,139,250,.4); }
@keyframes x3-pulse { 0% { opacity: .9; } 100% { opacity: .25; } }

.x3-orbit { --rx: 74deg; --R: 205px; width: 0; height: 0; }
.x3-orbit--wide { --R: 235px; }
.x3-orbit__spin { transform-style: preserve-3d; animation: x3-spinZ 26s linear infinite; }
.x3-orbit__arm { position: absolute; transform-style: preserve-3d; transform: rotateZ(var(--a)) translateX(var(--R)) rotateZ(calc(var(--a) * -1)); }
.x3-orbit__face { transform-style: preserve-3d; transform: rotateX(-74deg); animation: x3-counter 26s linear infinite; }
.x3-orbit__face span {
    position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap;
    padding: 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #0f172a;
    background: #fff; border: 2px solid var(--c, #a5b4fc); box-shadow: 0 3px 0 rgba(0,0,0,.18), 0 18px 30px -12px rgba(0,0,0,.6);
}
@keyframes x3-spinZ   { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } }
@keyframes x3-counter { from { transform: rotateZ(0deg) rotateX(-74deg); } to { transform: rotateZ(-360deg) rotateX(-74deg); } }

/* ── OTP digits ─────────────────────────────────────────────────────────── */
.x3-code { display: flex; gap: 5px; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 3px 0 rgba(148,163,184,.35), 0 24px 40px -18px rgba(15,23,42,.45); }
.x3-code span { width: 26px; height: 34px; border-radius: 7px; display: grid; place-items: center; font: 800 16px/1 var(--mt-font-head, Sora, sans-serif); color: #4f46e5; background: #eef2ff; }

/* ── Audit: a web page under a magnifying glass ─────────────────────────── */
.x3-page { width: 270px; height: 200px; border-radius: 14px; background: #fff; border: 1px solid #e2e8f0; overflow: hidden; box-shadow: 0 40px 60px -30px rgba(15,23,42,.45); }
.x3-page__bar { display: flex; align-items: center; gap: 4px; padding: 7px 10px; background: #f1f5f9; font-size: 9px; color: #64748b; }
.x3-page__bar i { width: 7px; height: 7px; border-radius: 50%; background: #cbd5e1; }
.x3-page__bar span { margin-left: 8px; padding: 2px 10px; background: #fff; border-radius: 999px; }
.x3-page__hero { height: 62px; margin: 10px; border-radius: 9px; background: linear-gradient(120deg, #c7d2fe, #a5f3fc); }
.x3-page__line { height: 8px; margin: 7px 10px; border-radius: 4px; background: #e2e8f0; }
.x3-page__line.short { width: 55%; }
.x3-page__cols { display: flex; gap: 8px; margin: 10px; }
.x3-page__cols i { flex: 1; height: 36px; border-radius: 7px; background: #f1f5f9; }
.x3-page__scan { position: absolute; left: 0; right: 0; top: 0; height: 36px; background: linear-gradient(transparent, rgba(34,211,238,.35), transparent); animation: x3-scan 3s ease-in-out infinite; }
@keyframes x3-scan { 0% { transform: translateY(20px); } 50% { transform: translateY(170px); } 100% { transform: translateY(20px); } }
.x3-lens { width: 76px; height: 76px; animation: x3-lens 6s ease-in-out infinite; }
.x3-lens i { position: absolute; inset: 0; border-radius: 50%; border: 7px solid #334155; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.75), rgba(186,230,253,.25)); box-shadow: 0 20px 30px -12px rgba(15,23,42,.6); }
.x3-lens i::after { content: ""; position: absolute; right: -30px; bottom: -14px; width: 36px; height: 11px; border-radius: 6px; background: #334155; transform: rotate(45deg); }
@keyframes x3-lens { 0%, 100% { translate: -70px -30px; } 33% { translate: 40px -10px; } 66% { translate: -20px 50px; } }
.x3-score { padding: 12px 14px; border-radius: 16px; background: #fff; text-align: center; box-shadow: 0 3px 0 rgba(148,163,184,.35), 0 24px 40px -18px rgba(15,23,42,.45); }
.x3-score__ring { width: 66px; height: 66px; margin: 0 auto 6px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#22c55e 0 82%, #e2e8f0 0); }
.x3-score__ring b { width: 50px; height: 50px; border-radius: 50%; background: #fff; display: grid; place-items: center; font: 800 22px/1 var(--mt-font-head, Sora, sans-serif); color: #16a34a; }
.x3-score small { font-size: 11px; font-weight: 700; color: #475569; }

/* ── Boxes: the Meshit cube and the connector pack ──────────────────────── */
.x3-box { position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d; animation: x3-tumble 16s linear infinite; }
.x3-box .f { position: absolute; left: 0; top: 0; display: grid; place-items: center; text-align: center; backface-visibility: hidden; }
.x3-box .fr, .x3-box .bk { width: var(--w); height: var(--h); }
.x3-box .fr { transform: translateZ(calc(var(--d) / 2)); }
.x3-box .bk { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.x3-box .lf, .x3-box .rt { width: var(--d); height: var(--h); left: calc((var(--w) - var(--d)) / 2); }
.x3-box .lf { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.x3-box .rt { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.x3-box .tp, .x3-box .bt { width: var(--w); height: var(--d); top: calc((var(--h) - var(--d)) / 2); }
.x3-box .tp { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.x3-box .bt { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }
@keyframes x3-tumble { from { transform: rotateX(-16deg) rotateY(0deg); } to { transform: rotateX(-16deg) rotateY(360deg); } }

.x3-box--cube { --w: 120px; --h: 120px; --d: 120px; }
.x3-box--cube .f { border-radius: 18px; font: 800 54px/1 var(--mt-font-head, Sora, sans-serif); color: #fff; border: 1px solid rgba(255,255,255,.35);
    background: linear-gradient(135deg, rgba(0,209,249,.9), rgba(79,70,229,.92) 50%, rgba(124,58,237,.95)); box-shadow: inset 0 0 30px rgba(255,255,255,.25); }
.x3-box--cube .lf, .x3-box--cube .rt { background: linear-gradient(135deg, rgba(124,58,237,.95), rgba(236,72,153,.9)); }
.x3-box--cube .tp { background: linear-gradient(135deg, #a5f3fc, #818cf8); }

.x3-box--pack { --w: 150px; --h: 196px; --d: 58px; animation-duration: 18s; }
.x3-box--pack .f { color: #fff; font-family: var(--mt-font-head, Sora, sans-serif); }
.x3-box--pack .fr, .x3-box--pack .bk { border-radius: 10px; background: linear-gradient(160deg, #4f46e5, #7c3aed 55%, #ec4899); border: 1px solid rgba(255,255,255,.3); padding: 18px 12px; align-content: center; gap: 8px; }
.x3-box--pack .fr img { width: 58px; height: 58px; margin: 0 auto; background: #fff; border-radius: 14px; padding: 6px; }
.x3-box--pack .fr b { font-size: 16px; line-height: 1.15; } .x3-box--pack .fr small { font-size: 11px; opacity: .85; }
.x3-box--pack .bk b { font-size: 15px; line-height: 1.25; }
.x3-box--pack .lf, .x3-box--pack .rt { background: linear-gradient(#312e81, #4c1d95); }
.x3-box--pack .lf span, .x3-box--pack .rt span { writing-mode: vertical-rl; font-size: 11px; font-weight: 800; letter-spacing: .25em; opacity: .85; }
.x3-box--pack .tp, .x3-box--pack .bt { background: #3730a3; }

/* ── Scenes in the centred heroes (/solutions, /download) ───────────────── */
.x3--suite, .x3--install { --x3h: 360px; --wx: 6deg; --wy: 0deg; max-width: 640px; margin: 12px auto -36px; }
.x3--suite .x3-orbit__face span, .x3--install .x3-orbit__face span { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); backdrop-filter: blur(6px); }

/* Per-scene stage angles. */
.x3--wa    { --wy: -20deg; }
.x3--books { --wy: -14deg; --x3h: 380px; margin-top: 28px; }
.x3--seo   { --wy: -14deg; --wx: 4deg; }
.x3--social { --wx: 6deg; --wy: 0deg; }
.x3--otp   { --x3h: 380px; margin-top: 24px; }
.x3--audit { --wy: -16deg; }

/* ── Small screens: pull chips in and shrink the world ──────────────────── */
@media (max-width: 760px) {
    .x3 { --x3h: 340px; --spread: .5; overflow: hidden; }
    .x3__world { scale: .78; }
    .x3--cloud { --x3h: 320px; }
    .x3-orbit { --R: 140px; } .x3-orbit--wide { --R: 160px; }
    .x3-card { transform: rotateY(var(--a)) translateZ(170px); }
}

/* ── Off screen: stop the clocks. Reduced motion: no animation at all. ──── */
.x3.is-paused, .x3.is-paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
    .x3, .x3 *, .x3 *::before, .x3 *::after { animation: none !important; transition: none !important; }
    .x3-fly { display: none; }
}
@media print { .x3 { display: none; } }