/* MessageFlowQ — Bubble Light v2 marketing theme (A-056).
   Light sky→violet bubble field behind the marketing pages
   (homepage + 4 system sub-pages). Loads AFTER each page's inline
   styles so it wins the cascade. Reduced-motion safe. No webfonts. */

/* Base pastel stack lives on html, NOT body — z-index:-1 orbs paint
   behind the body's own background otherwise (learned A-048u28). */
html{
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(167,139,250,.20), transparent 60%),
    radial-gradient(900px 460px at -10% 0%, rgba(125,211,252,.22), transparent 55%),
    linear-gradient(180deg, #f3f5ff, #eef1fd);
  background-attachment:fixed;
}
body{ background:transparent !important; }

/* Drifting glow orbs — big sky + violet pair on body, pink + sky
   accents on html. The pink bloom overlaps the card rows
   (left 56vw top 26vh): blur transmits nothing over pale empty wash. */
body::before, body::after{
  content:""; position:fixed; z-index:-1; border-radius:50%;
  filter:blur(60px); opacity:.95; pointer-events:none;
}
body::before{
  width:56vw; height:56vw; left:-12vw; top:-14vw;
  background:radial-gradient(circle at 35% 35%, rgba(125,211,252,.95), rgba(125,211,252,0) 72%);
  animation:mfq-drift1 26s ease-in-out infinite alternate;
}
body::after{
  width:62vw; height:62vw; right:6vw; bottom:2vh;
  background:radial-gradient(circle at 60% 60%, rgba(167,139,250,.9), rgba(167,139,250,0) 72%);
  animation:mfq-drift2 32s ease-in-out infinite alternate;
}
html::before{
  content:""; position:fixed; z-index:-1; width:26vw; height:26vw;
  left:56vw; top:26vh; border-radius:50%; filter:blur(50px); opacity:.95;
  background:radial-gradient(circle at 40% 40%, rgba(244,114,182,.8), rgba(244,114,182,0) 72%);
  animation:mfq-drift1 30s ease-in-out infinite alternate;
}
html::after{
  content:""; position:fixed; z-index:-1; width:22vw; height:22vw;
  right:30vw; bottom:14vh; border-radius:50%; filter:blur(45px); opacity:.9;
  background:radial-gradient(circle at 40% 40%, rgba(125,211,252,.9), rgba(125,211,252,0) 72%);
  animation:mfq-drift2 24s ease-in-out infinite alternate;
}
@keyframes mfq-drift1{ to{ transform:translate(6vw,4vh) scale(1.08); } }
@keyframes mfq-drift2{ to{ transform:translate(-5vw,-6vh) scale(1.06); } }
@media (prefers-reduced-motion:reduce){
  body::before,body::after,html::before,html::after{ animation:none; }
}

/* Frosted glass cards (true glass: alpha .6, blur24+saturate, white
   border, inset top highlight + violet bloom inset) */
.plan,.mods li,.pricerow{
  background:rgba(255,255,255,.62) !important;
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  backdrop-filter:blur(24px) saturate(160%);
  border:1px solid rgba(124,58,237,.20) !important;
  box-shadow:0 20px 54px rgba(79,70,229,.18),
             inset 0 1px 0 rgba(255,255,255,.85),
             inset 0 0 60px rgba(180,120,255,.16);
}
header.top{
  background:rgba(255,255,255,.85) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid rgba(79,70,229,.14) !important;
}
footer{
  border-top:1px solid rgba(79,70,229,.12);
  padding-top:18px;
}

/* AI automation strip (homepage) */
.aibar{
  display:flex;
  align-items:center;
  gap:10px;
  margin:14px 0 6px;
  padding:8px 14px;
  border:1px solid rgba(255,255,255,.6);
  border-radius:999px;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  backdrop-filter:blur(24px) saturate(160%);
  box-shadow:0 18px 50px rgba(79,70,229,.14), inset 0 1px 0 rgba(255,255,255,.75);
  overflow:hidden;
  white-space:nowrap;
}
.aiimg{
  flex:none;
  width:44px;height:44px;
  border-radius:12px;
  object-fit:cover;
  box-shadow:0 0 0 1px rgba(79,70,229,.18);
  transition:opacity .38s ease;
}
.aiimg.swap{opacity:0}
@media (prefers-reduced-motion:reduce){
  .aiimg{transition:none}
}
.aibar .pulse{
  flex:none;
  width:9px;height:9px;border-radius:50%;
  background:#34d399;
  box-shadow:0 0 0 0 rgba(52,211,153,.55);
  animation:mfq-pulse 2.2s ease-out infinite;
}
@keyframes mfq-pulse{
  0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}
  70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}
  100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}
}
.ailabel{
  flex:none;
  font-size:.68rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#047857;
  font-weight:700;
}
.aifeed{
  color:#3f4577;
  font-size:.95rem;
  opacity:1;
  transition:opacity .38s ease;
  overflow:hidden;
  text-overflow:ellipsis;
}
.aifeed.swap{opacity:0}
.aifeed b{color:#23264d;font-weight:600}
@media (prefers-reduced-motion:reduce){
  .aibar .pulse{animation:none}
  .aifeed{transition:none}
}
@media (max-width:560px){
  .ailabel{display:none}
}

/* Live cursor aura (all pages) */
.cursor-dot,.cursor-glow{
  position:fixed;
  top:0;left:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s ease;
  will-change:transform;
  z-index:9999;
}
.cursor-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:#34d399;
  box-shadow:0 0 14px 4px rgba(52,211,153,.75), 0 0 4px 1px rgba(52,211,153,.9);
}
.cursor-glow{
  width:240px;height:240px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(52,211,153,.34) 0%, rgba(52,211,153,.16) 40%, transparent 70%);
  mix-blend-mode:screen;
}
.cursor-dot.on,.cursor-glow.on{opacity:1}
.cursor-dot.big{transform-origin:center;box-shadow:0 0 16px 4px rgba(52,211,153,.7)}