/**
 * OpsIQ Commerce — shared device hardware for the Commerce scenes.
 *
 * @package   OpsIQ
 * @author    Nabtech Digitalnet Limited
 * @copyright Copyright (c) 2026 Nabtech Digitalnet Limited. All rights reserved.
 * @license   Proprietary Commercial Licence (see LICENCE)
 *
 * The laptop, the phone, the room they stand in, the browser frame and the
 * three-phone channel fleet. Extracted from opsiq-commerce.css so /chat-ai and
 * the home page show the SAME shop and the SAME signed card as /commerce
 * rather than a second drawing that drifts. Pairs with
 * partials/commerce-scenes.php.
 *
 * A page echoing one of those scenes loads this sheet AND puts `cm-scope` on
 * the element wrapping them: that is what neutralises the shared .m3d-stage
 * panel, which otherwise paints a navy slab behind every framed scene.
 */

/* ============================================================= *
 * 3. SCENE FRAMING — a scene is never a bare SVG.
 *    Ground shadow + a framed product window with a chrome bar
 *    naming the real screen + floating annotation cards.
 * ============================================================= */
.cm-scene{position:relative;display:grid;place-items:center;min-height:430px;isolation:isolate}
.cm-scene-glow{
  position:absolute;inset:10% 6% 8%;border-radius:44% 56% 52% 48%;z-index:-1;filter:blur(20px);
  background:radial-gradient(circle at 46% 40%,rgba(11,187,212,.28),transparent 40%),
             radial-gradient(circle at 70% 68%,rgba(118,87,248,.3),transparent 46%);
  animation:cmGlow 8s ease-in-out infinite alternate;
}
@keyframes cmGlow{from{transform:scale(.96) translateY(4px);opacity:.75}to{transform:scale(1.04) translateY(-6px);opacity:1}}

/* The ground shadow every stage stands on. */
.cm-stage-shadow{
  position:absolute;left:5%;right:-3%;bottom:16px;height:96px;border-radius:50%;z-index:-1;
  background:radial-gradient(ellipse,rgba(23,40,84,.26),transparent 68%);filter:blur(6px);
}

/* The framed product window. The chrome bar must name a real screen. */
.cm-window{
  width:min(100%,660px);border:1px solid rgba(128,158,216,.34);border-radius:24px;overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(241,247,255,.93));
  box-shadow:0 38px 92px rgba(28,54,116,.24),inset 0 1px 0 #fff;
  color:#0a1730;transform:perspective(1400px) rotateY(-5deg) rotateX(2deg);
  transition:transform .45s ease;
}
.cm-window:hover{transform:perspective(1400px) rotateY(-1deg) rotateX(0) translateY(-5px)}
.cm-window.flat{transform:none}
.cm-window-bar{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-bottom:1px solid rgba(128,158,216,.26);
  background:linear-gradient(180deg,#fff,#f2f6ff);
}
.cm-window-bar i{width:10px;height:10px;border-radius:50%;background:#c3cede;flex:none}
.cm-window-bar i:nth-child(2){background:#e7c66a}
.cm-window-bar i:nth-child(3){background:#8fd6a6}
.cm-window-bar b{margin-left:6px;font-size:12.5px;font-weight:900;color:#28374f;letter-spacing:.01em}
.cm-window-bar em{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-style:normal;
  font-size:10.5px;font-weight:900;color:#1f7a5c;
  background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.26);
  padding:4px 10px;border-radius:999px;
}
.cm-window-bar em i{width:6px;height:6px;background:#10b981;animation:cmPulse 1.7s ease-in-out infinite}
@keyframes cmPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.cm-window-body{padding:0}
.cm-window-body svg{display:block;width:100%;height:auto}

/* Floating annotation cards. */
.cm-float{
  position:absolute;z-index:3;display:flex;align-items:center;gap:10px;
  padding:12px 15px;border-radius:16px;
  background:rgba(255,255,255,.82);border:1px solid rgba(128,158,216,.3);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 22px 52px rgba(28,54,116,.2);
  animation:cmFloat 5.5s ease-in-out infinite;
}
.cm-float i{
  width:30px;height:30px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--cm-blue),var(--cm-cyan));
}
.cm-float i::before{content:"";width:12px;height:12px;border-radius:4px;background:rgba(255,255,255,.92)}
.cm-float span{display:block;font-size:10.5px;font-weight:800;color:#65769a;line-height:1.25}
.cm-float b{display:block;font-size:15px;font-weight:950;color:#0b1a38;line-height:1.2}
.cm-float.a{top:12px;left:-10px}
.cm-float.b{bottom:34px;right:-12px;animation-delay:-2.6s}
.cm-float.c{bottom:120px;left:-22px;animation-delay:-1.3s}
.cm-float.green i{background:linear-gradient(135deg,#10b981,#0bbbd4)}
.cm-float.violet i{background:linear-gradient(135deg,#7657f8,#e35bd0)}
.cm-float.amber i{background:linear-gradient(135deg,#f59e0b,#e35bd0)}
@keyframes cmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}


/* ============================================================= *
 * 10. THE PREMIUM LAYER (owner, 2026-09-15: "sleek, aggressive,
 *     modern, premium, hover effects, realistic 3D")
 *
 *     Three things make a scene read as REAL rather than drawn:
 *       a) a device shell with thickness, bezel, hinge and a
 *          specular highlight that is not symmetrical;
 *       b) a floor the device stands on — contact shadow plus a
 *          mirrored, fading reflection of the screen itself;
 *       c) perspective that RESPONDS, so the object has volume:
 *          the stage rotates a little under the pointer.
 * ============================================================= */

/* --- The 3D room every hero device stands in --------------------- */
.cm-room{
  position:relative;width:100%;
  perspective:1800px;perspective-origin:50% 42%;
  transform-style:preserve-3d;
}
.cm-room-floor{
  position:absolute;left:50%;bottom:-2%;width:132%;height:230px;translate:-50% 0;
  pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse at 50% 0,rgba(35,130,239,.2),transparent 62%),
    radial-gradient(ellipse at 28% 12%,rgba(118,87,248,.16),transparent 58%),
    radial-gradient(ellipse at 74% 16%,rgba(11,187,212,.14),transparent 56%);
  filter:blur(28px);
}
.cm-room-grid{
  position:absolute;left:50%;bottom:0;width:180%;height:300px;translate:-50% 0;
  pointer-events:none;z-index:0;opacity:.34;
  background-image:
    linear-gradient(rgba(90,124,190,.4) 1px,transparent 1px),
    linear-gradient(90deg,rgba(90,124,190,.4) 1px,transparent 1px);
  background-size:62px 62px;
  transform:rotateX(74deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000,transparent 78%);
  mask-image:linear-gradient(to top,#000,transparent 78%);
}

/* The stage itself: volume that answers the pointer. */
.cm-tilt{
  position:relative;z-index:2;transform-style:preserve-3d;
  transform:rotateX(9deg) rotateY(-13deg) rotateZ(.6deg);
  transition:transform .85s cubic-bezier(.16,.84,.34,1);
  will-change:transform;
}
.cm-room:hover .cm-tilt{transform:rotateX(3deg) rotateY(-4deg) rotateZ(0) translateY(-10px) scale(1.012)}
.cm-tilt.cm-tilt-r{transform:rotateX(9deg) rotateY(13deg) rotateZ(-.6deg)}
.cm-room:hover .cm-tilt.cm-tilt-r{transform:rotateX(3deg) rotateY(4deg) rotateZ(0) translateY(-10px) scale(1.012)}

/* --- The laptop ------------------------------------------------- */
.cm-laptop{position:relative;width:min(100%,940px);margin:0 auto;transform-style:preserve-3d}
.cm-laptop-lid{
  position:relative;border-radius:20px 20px 7px 7px;padding:13px 13px 15px;
  background:
    linear-gradient(158deg,#e9eef8 0%,#c4cede 14%,#8f9cb4 34%,#b9c4d6 55%,#e4eaf4 76%,#a8b4c8 100%);
  box-shadow:
    0 2px 0 rgba(255,255,255,.7) inset,
    0 -1px 0 rgba(0,0,0,.24) inset,
    0 48px 90px rgba(18,36,82,.34),
    0 12px 26px rgba(18,36,82,.22);
}
.cm-laptop-lid::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;
  background:linear-gradient(118deg,rgba(255,255,255,.44) 0%,rgba(255,255,255,.08) 22%,transparent 42%,transparent 62%,rgba(255,255,255,.14) 82%,transparent 100%);
}
.cm-laptop-cam{
  position:absolute;top:6px;left:50%;translate:-50% 0;width:52px;height:5px;border-radius:3px;
  background:rgba(12,20,40,.55);z-index:3;
}
.cm-laptop-cam::after{content:"";position:absolute;top:1px;left:50%;translate:-50% 0;width:3px;height:3px;border-radius:50%;background:#2c3b57;box-shadow:0 0 3px rgba(120,200,255,.7)}
.cm-laptop-screen{
  position:relative;border-radius:9px;overflow:hidden;background:#07122a;
  box-shadow:0 0 0 1px rgba(10,20,44,.7) inset,0 20px 44px rgba(4,12,32,.5) inset;
}
.cm-laptop-screen>svg{display:block;width:100%;height:auto}
/* screen glare: a soft diagonal sheet that drifts */
.cm-laptop-screen::after{
  content:"";position:absolute;inset:-40% -10%;pointer-events:none;z-index:5;
  background:linear-gradient(104deg,transparent 34%,rgba(255,255,255,.14) 46%,rgba(255,255,255,.04) 54%,transparent 64%);
  animation:cmGlare 9s ease-in-out infinite;
}
@keyframes cmGlare{0%,100%{transform:translateX(-14%)}50%{transform:translateX(14%)}}
/* the base: a wedge with a lip, not a rectangle */
.cm-laptop-base{
  position:relative;height:17px;margin:0 auto;width:104%;translate:-2% 0;
  border-radius:0 0 15px 15px;
  background:linear-gradient(180deg,#aab5c8 0%,#8895ad 36%,#6c7a94 62%,#soft 62%,#4d5a72 100%);
  background:linear-gradient(180deg,#aab5c8 0%,#8895ad 36%,#6c7a94 62%,#4d5a72 100%);
  box-shadow:0 22px 40px rgba(18,36,82,.34),0 1px 0 rgba(255,255,255,.5) inset;
}
.cm-laptop-base::after{
  content:"";position:absolute;top:0;left:50%;translate:-50% 0;width:128px;height:7px;
  border-radius:0 0 7px 7px;background:linear-gradient(180deg,#6a778f,#93a0b6);
}
/* contact shadow + mirrored reflection */
.cm-laptop-shadow{
  position:absolute;left:6%;right:6%;bottom:-30px;height:58px;border-radius:50%;z-index:-1;
  background:radial-gradient(ellipse,rgba(16,30,68,.44),transparent 70%);filter:blur(16px);
}
.cm-reflect{
  position:relative;margin-top:5px;height:120px;overflow:hidden;pointer-events:none;
  transform:scaleY(-1);opacity:.2;filter:blur(1.4px) saturate(.75);
  -webkit-mask-image:linear-gradient(to top,transparent 6%,#000 96%);
  mask-image:linear-gradient(to top,transparent 6%,#000 96%);
}
.cm-reflect>svg{display:block;width:100%;height:auto}

/* --- The phone -------------------------------------------------- */
.cm-phone{
  position:relative;width:250px;border-radius:38px;padding:9px;
  background:linear-gradient(152deg,#dfe6f2 0%,#9aa7bd 20%,#59657e 46%,#8e9bb2 70%,#d8e0ee 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.72) inset,
    0 -1px 0 rgba(0,0,0,.3) inset,
    0 44px 74px rgba(16,32,74,.4),
    0 10px 20px rgba(16,32,74,.26);
  transform-style:preserve-3d;
}
.cm-phone::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;
  background:linear-gradient(124deg,rgba(255,255,255,.4) 0%,transparent 34%,transparent 66%,rgba(255,255,255,.16) 92%);
}
.cm-phone-screen{position:relative;border-radius:31px;overflow:hidden;background:#0a1330}
.cm-phone-screen>svg{display:block;width:100%;height:auto}
.cm-phone-notch{
  position:absolute;top:15px;left:50%;translate:-50% 0;width:80px;height:20px;border-radius:12px;
  background:#0a1330;z-index:7;box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
}
.cm-phone-notch::after{content:"";position:absolute;top:7px;right:16px;width:6px;height:6px;border-radius:50%;background:#1d2b4c;box-shadow:0 0 4px rgba(120,200,255,.6)}
.cm-phone-shadow{
  position:absolute;left:-6%;right:-6%;bottom:-26px;height:46px;border-radius:50%;z-index:-1;
  background:radial-gradient(ellipse,rgba(16,30,68,.46),transparent 70%);filter:blur(14px);
}
/* the phone sits in front of the laptop, slightly rotated */
.cm-phone-front{
  position:absolute;right:-2%;bottom:-8%;z-index:5;
  transform:rotateY(-15deg) rotateX(5deg) rotateZ(-3deg) translateZ(90px);
  transition:transform .85s cubic-bezier(.16,.84,.34,1);
}
.cm-room:hover .cm-phone-front{transform:rotateY(-7deg) rotateX(2deg) rotateZ(-1deg) translateZ(120px) translateY(-14px)}

/* --- Premium hover across the page ------------------------------ */
/* A sheen that sweeps a card once on hover, plus a lit border. */
.cm-card,.cm-step,.cm-rung,.cm-gw-region,.cm-sec-item{isolation:isolate}
.cm-card::after,.cm-rung::before,.cm-gw-region::after,.cm-sec-item::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:linear-gradient(112deg,transparent 28%,rgba(255,255,255,.5) 46%,rgba(255,255,255,.14) 54%,transparent 70%);
  transform:translateX(-120%);opacity:0;
}
.cm-card:hover::after,.cm-rung:hover::before,.cm-gw-region:hover::after,.cm-sec-item:hover::after{
  opacity:1;transform:translateX(120%);transition:transform .95s cubic-bezier(.22,.7,.3,1),opacity .2s ease;
}
.cm-rung,.cm-gw-region,.cm-sec-item{transition:transform .4s cubic-bezier(.16,.84,.34,1),box-shadow .4s ease,border-color .4s ease}
.cm-rung:hover,.cm-gw-region:hover{transform:translateY(-6px);box-shadow:var(--cm-shadow-lg);border-color:rgba(35,130,239,.42)}
.cm-sec-item:hover{transform:translateY(-6px);border-color:rgba(11,187,212,.52)}
.cm-step{transition:transform .4s cubic-bezier(.16,.84,.34,1),box-shadow .4s ease}
.cm-step:hover{transform:translateY(-5px) scale(1.008);box-shadow:var(--cm-shadow-lg)}
.cm-step>span{transition:transform .45s cubic-bezier(.16,.84,.34,1),box-shadow .45s ease}
.cm-step:hover>span{transform:rotate(-6deg) scale(1.1);box-shadow:0 12px 26px rgba(118,87,248,.4)}
.cm-card:hover .cm-card-ico{transform:rotate(-7deg) scale(1.12);border-color:rgba(118,87,248,.5)}
.cm-card-ico{transition:transform .45s cubic-bezier(.16,.84,.34,1),border-color .45s ease}

/* An animated gradient hairline on the page's strongest cards. */
.cm-rung::after{
  background:linear-gradient(180deg,var(--cm-blue),var(--cm-cyan),var(--cm-violet),var(--cm-blue));
  background-size:100% 300%;animation:cmRail 7s linear infinite;
}
@keyframes cmRail{0%{background-position:0 0}100%{background-position:0 300%}}

/* Buttons pick up a moving glow. */
.op-commerce-page .op-btn{position:relative;overflow:hidden;transition:transform .34s cubic-bezier(.16,.84,.34,1),box-shadow .34s ease}
.op-commerce-page .op-btn:hover{transform:translateY(-3px)}
.op-commerce-page .op-btn::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(108deg,transparent 30%,rgba(255,255,255,.4) 48%,transparent 66%);
  transform:translateX(-130%);
}
.op-commerce-page .op-btn:hover::after{transform:translateX(130%);transition:transform .8s cubic-bezier(.22,.7,.3,1)}

/* Chips lift in sequence rather than as a block. */
.cm-chips span{transition:transform .32s cubic-bezier(.16,.84,.34,1),background .32s ease,border-color .32s ease}
.cm-chips span:hover{transform:translateY(-3px);border-color:rgba(35,130,239,.45)}

/* A gateway row lights its own accent on hover. */
.cm-gw{position:relative;overflow:hidden}
.cm-gw::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--cm-cyan),var(--cm-violet));
  transform:scaleY(0);transform-origin:50% 0;transition:transform .42s cubic-bezier(.16,.84,.34,1);
}
.cm-gw:hover::after{transform:scaleY(1)}

/* --- Responsive for the room ------------------------------------ */
@media(max-width:1180px){
  .cm-phone{width:210px}
  .cm-phone-front{right:-4%;bottom:-10%}
}
@media(max-width:900px){
  .cm-room{perspective:none}
  .cm-tilt,.cm-tilt.cm-tilt-r{transform:none}
  .cm-room:hover .cm-tilt,.cm-room:hover .cm-tilt.cm-tilt-r{transform:translateY(-6px)}
  .cm-phone-front{position:relative;right:auto;bottom:auto;margin:22px auto 0;transform:none}
  .cm-room:hover .cm-phone-front{transform:translateY(-6px)}
  .cm-room-grid{display:none}
  .cm-reflect{height:70px}
}
@media(max-width:680px){
  .cm-reflect{display:none}
  .cm-laptop-lid{padding:8px 8px 10px;border-radius:14px 14px 5px 5px}
  .cm-phone{width:min(100%,230px)}
}
@media (prefers-reduced-motion:reduce){
  .cm-laptop-screen::after,.cm-rung::after{animation:none}
  .cm-card::after,.cm-rung::before,.cm-gw-region::after,.cm-sec-item::after,.op-commerce-page .op-btn::after{display:none}
}

/* Dark theme: the metal goes cooler, the floor goes deeper. */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .cm-laptop-lid{
  background:linear-gradient(158deg,#5c6880 0%,#3b465e 16%,#222c42 38%,#3f4a62 58%,#606d86 78%,#333d54 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 -1px 0 rgba(0,0,0,.5) inset,0 48px 90px rgba(0,0,0,.6),0 12px 26px rgba(0,0,0,.44);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .cm-laptop-base{
  background:linear-gradient(180deg,#4b5670,#333d54 38%,#222b3e 64%,#161d2c 100%);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .cm-phone{
  background:linear-gradient(152deg,#59657e 0%,#333d54 22%,#1b2335 48%,#3d4860 72%,#5b6780 100%);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .cm-room-grid{
  background-image:linear-gradient(rgba(140,175,255,.34) 1px,transparent 1px),linear-gradient(90deg,rgba(140,175,255,.34) 1px,transparent 1px);
}


/* ============================================================= *
 * 13. THE CHANNEL FLEET — the chat section's own signature.
 *     Three phones, fanned, each a different channel carrying the
 *     identical signed card. Nothing else on the page fans.
 * ============================================================= */
.cm-fleet{
  position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;
  gap:clamp(6px,2.4vw,34px);padding:26px 0 8px;perspective:1700px;
}
.cm-fleet-phone{position:relative;transition:transform .8s cubic-bezier(.16,.84,.34,1);z-index:2}
/* Four channels (owner 2026-09-15: "add messenger to make it 4"), so the fan
 * is symmetrical about the gap between f2 and f3 rather than about a centre
 * phone. Outer pair sits further back and lower; inner pair leans forward. */
/* Owner 2026-09-15: adding the fourth channel must NOT shrink the phones.
 * Four at 252px is 1,008px, which fits the 1,180px container on its own, so
 * the fan tightens the gaps instead of reducing the hardware. Below 1,180 the
 * deck overlaps rather than scaling down. */
.cm-fleet-phone .cm-phone{width:252px}
.cm-fleet-phone.f1{transform:rotateY(22deg) rotateZ(-3.5deg) translateZ(-96px) translateY(30px);z-index:2}
.cm-fleet-phone.f2{transform:rotateY(9deg) rotateZ(-1.4deg) translateZ(-16px) translateY(8px);z-index:3}
.cm-fleet-phone.f3{transform:rotateY(-9deg) rotateZ(1.4deg) translateZ(-16px) translateY(8px);z-index:3}
.cm-fleet-phone.f4{transform:rotateY(-22deg) rotateZ(3.5deg) translateZ(-96px) translateY(30px);z-index:2}
.cm-fleet:hover .cm-fleet-phone.f1{transform:rotateY(11deg) rotateZ(-1.6deg) translateZ(-40px) translateY(10px)}
.cm-fleet:hover .cm-fleet-phone.f2{transform:rotateY(4deg) rotateZ(-.6deg) translateZ(30px) translateY(-12px)}
.cm-fleet:hover .cm-fleet-phone.f3{transform:rotateY(-4deg) rotateZ(.6deg) translateZ(30px) translateY(-12px)}
.cm-fleet:hover .cm-fleet-phone.f4{transform:rotateY(-11deg) rotateZ(1.6deg) translateZ(-40px) translateY(10px)}
.cm-fleet-phone:hover{z-index:5!important}

.cm-fleet-label{
  position:absolute;left:50%;bottom:-16px;translate:-50% 0;white-space:nowrap;
  padding:7px 15px;border-radius:999px;font-size:12px;font-weight:900;
  color:#dbe8ff;background:rgba(255,255,255,.1);border:1px solid rgba(150,180,255,.26);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
/* the light the three phones stand in */
.cm-fleet-seam{
  position:absolute;left:50%;bottom:-6px;translate:-50% 0;width:min(96%,900px);height:170px;
  z-index:0;pointer-events:none;filter:blur(36px);
  background:
    radial-gradient(ellipse at 22% 40%,rgba(37,211,102,.26),transparent 58%),
    radial-gradient(ellipse at 50% 30%,rgba(227,91,208,.24),transparent 56%),
    radial-gradient(ellipse at 78% 40%,rgba(42,171,238,.26),transparent 58%);
}
.cm-fleet-note{
  position:relative;z-index:2;flex-basis:100%;margin:48px 0 0;text-align:center;
  font-size:14.5px;font-weight:700;color:#a9bedd;
}

@media(max-width:1180px){
  /* Overlap the deck instead of scaling the phones: they tuck behind each
     other the way a real fan of devices does. */
  .cm-fleet{gap:0}
  .cm-fleet-phone+.cm-fleet-phone{margin-left:clamp(-58px,-4.4vw,-14px)}
}
@media(max-width:1020px){
  .cm-fleet-phone+.cm-fleet-phone{margin-left:-76px}
}
@media(max-width:900px){
  .cm-fleet{perspective:none;flex-wrap:wrap;gap:46px 18px;padding-top:10px}
  .cm-fleet-phone.f1,.cm-fleet-phone.f2,.cm-fleet-phone.f3,.cm-fleet-phone.f4{transform:none}
  .cm-fleet:hover .cm-fleet-phone.f1,.cm-fleet:hover .cm-fleet-phone.f2,.cm-fleet:hover .cm-fleet-phone.f3,.cm-fleet:hover .cm-fleet-phone.f4{transform:translateY(-8px)}
  .cm-fleet-phone .cm-phone{width:min(44vw,228px)!important}
  .cm-fleet-note{margin-top:34px}
}
@media(max-width:680px){
  .cm-fleet-phone .cm-phone{width:min(74vw,250px)!important}
  .cm-fleet-seam{display:none}
}


/* ============================================================= *
 * 14. THE STAGE IS A MOUNT, NOT A CARD, ON THIS PAGE.
 *
 * opsiq-marketing-3d.css gives .m3d-stage its own dark panel
 * (`background-color:#0a1024 !important`, padding, border, radius)
 * because on other pages a bare SVG is dropped straight into it.
 * Every scene here brings its OWN frame — a browser window, a
 * laptop, a phone — so that panel showed as a navy slab sticking
 * out behind each one. Neutralise it and keep only what the stage
 * is actually for here: the float animation and the 3D context.
 * The !important is required to answer the sheet's own.
 * ============================================================= */
/* TWO rules set this background and both carry !important:
 *   .op-spot-art .m3d-stage{background:…}                  (0,2,0)
 *   html[data-theme="dark"] .m3d-stage{background-color:…}  (0,2,1)
 * The second outranks a plain `.op-commerce-page .m3d-stage` (0,2,0), so the
 * page looked right in light theme and showed the stage's own #0a1024 fill in
 * dark — most visibly around the rotated windows, whose receding edge exposes
 * whatever sits behind them. Lead with `html` so this wins both. */
html .op-commerce-page .m3d-stage,
html .cm-scope .m3d-stage,
.op-commerce-page .m3d-stage,
.cm-scope .m3d-stage{
  background:none!important;background-color:transparent!important;
  border:0!important;box-shadow:none!important;
  padding:0!important;border-radius:0!important;
  min-height:0!important;width:100%!important;max-width:100%!important;
  display:block!important;overflow:visible!important;
  transform:none!important;
}
.op-commerce-page .m3d-stage>.m3d-tag,
.cm-scope .m3d-stage>.m3d-tag{z-index:7}
html .op-commerce-page .m3d-stage::before,html .op-commerce-page .m3d-stage::after,
html .cm-scope .m3d-stage::before,html .cm-scope .m3d-stage::after{display:none!important}
.op-commerce-page .cm-window,
.cm-scope .cm-window{width:100%;margin-inline:auto}
.op-commerce-page .cm-scene>.op-spot-art,.op-commerce-page .cm-scene>.m3d-stage,
.cm-scope .cm-scene>.op-spot-art,.cm-scope .cm-scene>.m3d-stage{width:100%}

/* Moved out of opsiq-commerce.css 2026-09-15: the home page shows this same
 * shop-and-phone pairing, and while these rules lived in the commerce-only
 * sheet the duo rendered static there, so the phone sat in the flow instead
 * of standing in front of the shop. */
/* ============================================================= *
 * 11. THE HERO ART — the shop and the order, one in front of the
 *     other. The hero SECTION keeps the house background (owner,
 *     2026-09-15: a custom ground on the first section spoils the
 *     cinema card), so nothing here paints a section ground.
 * ============================================================= */
.cm-hero-duo{position:relative;width:min(100%,660px);perspective:1500px;transform-style:preserve-3d}

/* The shop, sitting back and turned slightly away. */
.cm-hero-shopcard{
  position:relative;border-radius:20px;overflow:hidden;
  border:1px solid rgba(128,158,216,.34);
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(241,247,255,.94));
  box-shadow:0 40px 90px rgba(24,48,108,.26),inset 0 1px 0 #fff;
  transform:perspective(1500px) rotateY(-9deg) rotateX(3deg) translateZ(-40px);
  transform-origin:80% 50%;
  transition:transform .85s cubic-bezier(.16,.84,.34,1),box-shadow .85s ease;
}
.cm-hero-shopcard .cm-window-body{position:relative}
.cm-hero-shopcard .cm-window-body::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 36%,rgba(255,255,255,.28) 48%,transparent 62%);
  animation:cmGlare 9s ease-in-out infinite;
}
.cm-hero-duo:hover .cm-hero-shopcard{
  transform:perspective(1500px) rotateY(-3deg) rotateX(1deg) translateZ(0) translateY(-8px);
  box-shadow:0 52px 110px rgba(24,48,108,.32),inset 0 1px 0 #fff;
}

/* The phone, standing in front of it and catching the light. */
.cm-hero-phone{
  position:absolute;right:-34px;bottom:-56px;z-index:4;
  transform:rotateY(-13deg) rotateX(4deg) rotateZ(-3deg) translateZ(70px);
  transition:transform .85s cubic-bezier(.16,.84,.34,1);
  animation:cmFloat 6.5s ease-in-out infinite;
}
.cm-hero-duo:hover .cm-hero-phone{
  transform:rotateY(-6deg) rotateX(1deg) rotateZ(-1deg) translateZ(110px) translateY(-14px) scale(1.03);
}
.cm-hero-phone .cm-phone{width:216px}

@media(max-width:1180px){
  .cm-hero-phone{right:-18px;bottom:-40px}
  .cm-hero-phone .cm-phone{width:186px}
}
@media(max-width:900px){
  .cm-hero-duo{perspective:none}
  .cm-hero-shopcard{transform:none}
  .cm-hero-duo:hover .cm-hero-shopcard{transform:translateY(-6px)}
  .cm-hero-phone{position:relative;right:auto;bottom:auto;margin:-46px auto 0;display:block;width:max-content;transform:none;animation:none}
  .cm-hero-duo:hover .cm-hero-phone{transform:translateY(-6px)}
}
@media(max-width:680px){
  .cm-hero-phone{margin-top:-30px}
  .cm-hero-phone .cm-phone{width:172px}
}


/* ============================================================= *
 * DARK MODE REACHES INSIDE THE SCENES (2026-09-15)
 *
 * Owner: "you can't have light theme in dark mode." Right. Keeping the
 * scene light and only darkening the frame around it is a half measure:
 * the product screens are the largest thing on the page and they were
 * still glowing white on a navy ground.
 *
 * HOW, WITHOUT TOUCHING A SINGLE SVG.
 * A presentation attribute (fill="#fff") has lower priority than ANY CSS
 * declaration, so an attribute selector can repaint it. That means the
 * scene sources keep their readable literals and the theme is expressed
 * once, here, for every scene on both pages.
 *
 * THE ELEMENT MATTERS, NOT JUST THE COLOUR. `#fff` is a light card when
 * it is on a <rect> and white lettering when it is on a <text> sitting in
 * a coloured header. Remapping it everywhere turned those labels black.
 * So surfaces are matched on rect/circle/ellipse, and inks on text.
 *
 * Brand colour is deliberately untouched: gradients, the greens, ambers,
 * reds and violets all carry meaning and read correctly on either ground.
 * ============================================================= */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window-body,.cm-hero-shopcard,.fx-window-body,.cm-laptop-screen,.ch-demo-desk) svg{

  --sc-ground:#0c1730;   /* the screen's own page */
  --sc-card:#152244;     /* a card sitting on it */
  --sc-soft:#1b2a52;     /* a quieter panel */
  --sc-ink:#eaf2ff;      /* primary lettering */
  --sc-muted:#9fb4d8;    /* secondary lettering */
  --sc-faint:#7e93b6;    /* tertiary lettering */
  --sc-line:rgba(150,180,255,.24);
  --sc-line-soft:rgba(150,180,255,.14);
}

/* ---- surfaces ------------------------------------------------ */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window-body,.cm-hero-shopcard,.fx-window-body,.cm-laptop-screen) svg
:is(rect,circle,ellipse):is([fill="#fbfdff"],[fill="#fbfcff"],[fill="#fbfbff"],[fill="#fbfeff"],[fill="#fffdfa"],[fill="#fdfbff"]){
  fill:var(--sc-ground);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window-body,.cm-hero-shopcard,.fx-window-body,.cm-laptop-screen) svg
:is(rect,circle,ellipse):is([fill="#fff"],[fill="#ffffff"]){
  fill:var(--sc-card);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window-body,.cm-hero-shopcard,.fx-window-body,.cm-laptop-screen) svg
:is(rect,circle,ellipse):is([fill="#f2f6ff"],[fill="#eef4ff"],[fill="#eef3fd"],[fill="#f8fafe"],[fill="#f7f9ff"],[fill="#f2f4ff"],[fill="#f1f6ff"],[fill="#f2f7ff"],[fill="#eef7ff"],[fill="#e2e9f7"],[fill="#e6ecf9"],[fill="#f0f4fd"],[fill="#e8eefb"]){
  fill:var(--sc-soft);
}

/* ---- lettering ----------------------------------------------- */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window-body,.cm-hero-shopcard,.fx-window-body,.cm-laptop-screen) svg
text:is([fill="#0d1a38"],[fill="#12203f"],[fill="#07111f"],[fill="#10203f"],[fill="#0a1730"],[fill="#1e2a4a"],[fill="#28374f"],[fill="#1b2a52"]){
  fill:var(--sc-ink);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window-body,.cm-hero-shopcard,.fx-window-body,.cm-laptop-screen) svg
text:is([fill="#7186a8"],[fill="#7b8aa8"],[fill="#5b6d8e"],[fill="#6d82a6"],[fill="#66789a"],[fill="#64729a"],[fill="#4a5c80"],[fill="#4a6b9c"],[fill="#6b7d9e"],[fill="#8595b4"],[fill="#52627a"],[fill="#5a6c8e"],[fill="#5d6f92"]){
  fill:var(--sc-muted);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window-body,.cm-hero-shopcard,.fx-window-body,.cm-laptop-screen) svg
text:is([fill="#93a8cc"],[fill="#94a3c4"],[fill="#9aa8c2"],[fill="#9aa9c6"],[fill="#a3825a"],[fill="#8a6c2f"],[fill="#6b6088"],[fill="#4f7a6c"],[fill="#8d5757"]){
  fill:var(--sc-faint);
}

/* ---- hairlines ----------------------------------------------- */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window-body,.cm-hero-shopcard,.fx-window-body,.cm-laptop-screen) svg
[stroke^="rgba(120,150,210"]{stroke:var(--sc-line)}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window-body,.cm-hero-shopcard,.fx-window-body,.cm-laptop-screen) svg
:is(rect,line,path):is([fill="#e2e9f7"],[fill="#e6ecf9"],[fill="#dce7f6"]){fill:var(--sc-line-soft)}

/* A white keyline drawn ON a coloured chip stays white; one drawn as a
   divider on a light card would vanish, so only the dividers move. */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window-body,.cm-hero-shopcard,.fx-window-body,.cm-laptop-screen) svg
rect[fill="#fff"][height="1"]{fill:var(--sc-line)}

/* ---- the frames that sit around them ------------------------- */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window,.cm-hero-shopcard,.fx-window){
  border-color:rgba(138,166,222,.26)!important;
  background:linear-gradient(145deg,#152244,#101b3a)!important;
  box-shadow:0 38px 92px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.07)!important;
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window-bar,.fx-window-bar){
  background:linear-gradient(180deg,#1b2a52,#152244)!important;
  border-bottom-color:rgba(138,166,222,.22)!important;
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window-bar,.fx-window-bar) b{color:#e6eeff!important}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window-bar,.fx-window-bar) i:first-child{background:#5c6a86}

/* THE GROUND IS OFTEN A GRADIENT, NOT A FLAT FILL.
 * The storefront screen, the operator inbox and the capability player all
 * paint their page with a two-stop light gradient, so the flat-fill remap
 * above did not reach them and those screens stayed white. The gradients are
 * addressable by their id prefix, which is stable because every scene suffixes
 * its ids with the variant rather than renaming them. */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(linearGradient,radialGradient):is([id^="sfpage-"],[id^="aiapp-"],[id^="cpapp-"]) stop{
  stop-color:#0c1730;
}
/* The product-photo plates behind each item keep a lift off the ground. */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window-body,.cm-hero-shopcard,.fx-window-body,.cm-laptop-screen) svg
rect[fill="#f0f4fd"]{fill:#1b2a52}

/* =============================================================
 * DARK — the glass caption cards that float beside a device
 *
 * `.cm-float` is frosted white glass over a light page. In dark mode the
 * page behind it is navy, so the card reads as a bright paper rectangle and
 * its near-black value text disappears against it. The card keeps the same
 * job: a translucent pane lifted off the ground, just built from the dark
 * palette instead of the light one.
 *
 * The icon chips are deliberately untouched. Their greens, violets and
 * ambers carry meaning and read correctly on either ground.
 * ============================================================= */
/* THE FLOAT STAYS CONSTANT, like .cm-window above it. It is a frosted white
   chip that sits ON TOP of scene art, and every scene now paints its own
   opaque dark ground, so white-with-dark-text reads in both themes. While
   it flipped with the theme it could land in a split state -- a white chip
   carrying the dark theme's light text, i.e. invisible -- because its
   background and its text colours are set in two different stylesheets and
   only one of them had to lose the cascade for the pair to disagree. One
   appearance cannot disagree with itself. */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .cm-float{
  background:rgba(255,255,255,.88);
  border-color:rgba(128,158,216,.3);
  box-shadow:0 22px 52px rgba(0,0,0,.5);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .cm-float span{color:#65769a}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .cm-float b{color:#0b1a38}