/* ============================================================================
   MARVIX LABS — mx-enhance-v9.css
   ----------------------------------------------------------------------------
   RULE FOR THIS FILE: every selector begins with #mx- or .mx-.
   Nothing here can reach the host page's html, body, p, h1, video, .reveal or
   anything else it owns. Previous versions broke the frame by doing exactly
   that. If the layout is still wrong after this file, the cause is NOT here.
   ========================================================================== */

/* ============================ CONTACT DOCK (left) ======================== */
#mx-dock{
  position:fixed; left:18px; right:auto; bottom:18px; z-index:99999;
  display:flex; flex-direction:column; gap:11px; align-items:flex-start;
  font-family:Inter,system-ui,-apple-system,Arial,sans-serif;
  max-width:calc(100vw - 36px);
}
#mx-dock a{
  display:flex; align-items:center; gap:9px; text-decoration:none;
  border-radius:40px; padding:12px 18px; font-size:14px; font-weight:800;
  letter-spacing:.2px; line-height:1; white-space:nowrap;
  transition:transform .18s ease, filter .18s ease;
}
#mx-dock a:hover{ transform:translateY(-2px); filter:brightness(1.08); }
#mx-dock a svg{ width:17px; height:17px; flex:0 0 17px; }

#mx-dock a.mx-wa{
  background:#00D200; color:#fff;
  border:1px solid rgba(255,255,255,.42);
  text-shadow:0 1px 2px rgba(0,0,0,.28);
  animation:mxBlinkWa 1.6s ease-in-out infinite;
}
#mx-dock a.mx-call{
  background:transparent; color:#fff;
  border:1.5px solid rgba(255,255,255,.55);
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  animation:mxBlinkCall 1.6s ease-in-out infinite; animation-delay:.8s;
}
@keyframes mxBlinkWa{
  0%,100%{ box-shadow:0 6px 20px rgba(0,0,0,.30), 0 0 0 0 rgba(0,210,0,.85); filter:brightness(1); }
  48%    { box-shadow:0 8px 34px rgba(0,210,0,.70), 0 0 0 17px rgba(0,210,0,0); filter:brightness(1.22); }
}
@keyframes mxBlinkCall{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,.55); border-color:rgba(255,255,255,.55); }
  48%    { box-shadow:0 0 0 15px rgba(255,255,255,0); border-color:rgba(255,255,255,.95); }
}

#mx-audio-btn{
  order:-1; display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:rgba(14,14,16,.55); color:#fff;
  border:1px solid rgba(255,255,255,.35);
  transition:transform .18s ease, background .18s ease;
}
#mx-audio-btn:hover{ transform:translateY(-2px); background:rgba(254,60,0,.85); }
#mx-audio-btn svg{ width:18px; height:18px; }

@media(max-width:640px){
  #mx-dock{ left:12px; bottom:12px; gap:9px; }
  #mx-dock a{ padding:12px; border-radius:50%; }
  #mx-dock .mx-lbl{ display:none; }
}

/* ================================ ALIEN BOT ============================== */
#mx-bot{ position:fixed; right:20px; bottom:20px; z-index:99999;
         font-family:Inter,system-ui,-apple-system,Arial,sans-serif; }
#mx-bot-orb{
  position:relative; width:158px; height:212px; border:0; padding:0;
  background:transparent; cursor:pointer; display:block;
  filter:drop-shadow(0 0 18px rgba(150,225,255,.34)) drop-shadow(0 0 52px rgba(90,180,255,.20));
  animation:mxOrbFloat 5.4s ease-in-out infinite;
}
#mx-bot-orb svg{ width:100%; height:100%; display:block; overflow:visible; }
@keyframes mxOrbFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

#mx-bot-badge{
  position:absolute; top:6px; right:0; background:#FE3C00; color:#fff;
  font-size:9px; font-weight:900; letter-spacing:.16em; padding:4px 9px;
  border-radius:20px; text-transform:uppercase; pointer-events:none;
  box-shadow:0 4px 14px rgba(254,60,0,.5);
}

.mx-head{ animation:mxHeadTilt 7s ease-in-out infinite; transform-box:fill-box; transform-origin:50% 88%; }
@keyframes mxHeadTilt{ 0%,100%{transform:rotate(-1.6deg)} 50%{transform:rotate(1.6deg)} }

.mx-lid{ animation:mxLid 5.4s infinite; transform-box:fill-box; transform-origin:50% 0; }
.mx-lid.l2{ animation-delay:.06s; }
@keyframes mxLid{ 0%,90%,100%{transform:scaleY(0)} 93%,95%{transform:scaleY(1)} }

.mx-aura{ animation:mxAura 4.2s ease-in-out infinite; }
@keyframes mxAura{ 0%,100%{opacity:.20} 50%{opacity:.55} }

.mx-halo{ animation:mxHalo 3.6s ease-in-out infinite; }
@keyframes mxHalo{ 0%,100%{opacity:.30} 50%{opacity:.72} }

.mx-sig{ animation:mxSignal 3.2s ease-out infinite; transform-box:fill-box; transform-origin:center; }
.mx-sig.s2{ animation-delay:1.6s; }
@keyframes mxSignal{ 0%{opacity:.85;transform:scale(.62)} 70%,100%{opacity:0;transform:scale(1.5)} }

.mx-bolt{ opacity:0; animation:mxBolt 4.2s linear infinite; }
.mx-bolt.b2{ animation-delay:1.5s; }
.mx-bolt.b3{ animation-delay:2.9s; }
@keyframes mxBolt{ 0%,86%{opacity:0} 88%{opacity:1} 90%{opacity:.15} 92%{opacity:.95} 96%,100%{opacity:0} }

.mx-spark{ animation:mxSpark 2.8s ease-in-out infinite; }
.mx-spark.s2{ animation-delay:.7s } .mx-spark.s3{ animation-delay:1.4s } .mx-spark.s4{ animation-delay:2.1s }
@keyframes mxSpark{ 0%,100%{opacity:.15;transform:translateY(0)} 50%{opacity:1;transform:translateY(-7px)} }

.mx-eye-glow{ animation:mxEyeGlow 3.4s ease-in-out infinite; }
@keyframes mxEyeGlow{ 0%,100%{opacity:.35} 50%{opacity:.9} }

.mx-scanline{ animation:mxScanBot 3.6s linear infinite; }
@keyframes mxScanBot{ 0%{transform:translateY(-14px);opacity:0} 12%,88%{opacity:.85} 100%{transform:translateY(150px);opacity:0} }

.mx-fing{ animation:mxFing 5s ease-in-out infinite; transform-box:fill-box; transform-origin:top center; }
.mx-fing.f2{ animation-delay:.6s } .mx-fing.f3{ animation-delay:1.2s }
@keyframes mxFing{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(4deg)} }

.mx-arm { animation:mxArm 4.4s ease-in-out infinite; transform-box:fill-box; transform-origin:75px 116px; }
.mx-arm2{ animation:mxArm 4.4s ease-in-out infinite reverse; transform-box:fill-box; transform-origin:75px 116px; }
@keyframes mxArm{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(5deg)} }

@media(max-width:640px){
  #mx-bot{ right:12px; bottom:12px; }
  #mx-bot-orb{ width:112px; height:150px; }
}

/* ================================ CHAT PANEL ============================= */
#mx-chat{
  position:fixed; right:20px; bottom:238px; z-index:99999;
  width:min(360px, calc(100vw - 40px)); max-height:min(60vh, 520px);
  display:none; flex-direction:column; overflow:hidden;
  background:rgba(9,12,18,.94); color:#EAF2FF;
  border:1px solid rgba(120,200,255,.22); border-radius:18px;
  box-shadow:0 26px 70px rgba(0,0,0,.62);
  font-size:14px; font-family:Inter,system-ui,-apple-system,Arial,sans-serif;
}
#mx-chat.mx-open{ display:flex; animation:mxChatIn .32s cubic-bezier(.16,1,.3,1); }
@keyframes mxChatIn{ from{opacity:0;transform:translateY(16px) scale(.97)} to{opacity:1;transform:none} }
#mx-chat header{ display:flex; align-items:center; gap:10px; padding:14px 16px;
  border-bottom:1px solid rgba(120,200,255,.16);
  background:linear-gradient(90deg,rgba(254,60,0,.16),transparent); }
#mx-chat header b{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; }
#mx-chat header small{ font-size:10px; color:#7FE0A0; letter-spacing:.14em; text-transform:uppercase; }
#mx-chat .mx-x{ margin-left:auto; background:none; border:0; color:#8FA3BC; font-size:20px; cursor:pointer; line-height:1; }
#mx-chat .mx-log{ padding:14px 16px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
#mx-chat .mx-msg{ padding:10px 13px; border-radius:13px; line-height:1.55; max-width:88%; }
#mx-chat .mx-msg.bot{ background:rgba(120,200,255,.10); border:1px solid rgba(120,200,255,.16); align-self:flex-start; }
#mx-chat .mx-msg.me{ background:#FE3C00; color:#fff; align-self:flex-end; font-weight:600; }
#mx-chat .mx-msg a{ color:#FFB489; }
#mx-chat .mx-chips{ display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 12px; }
#mx-chat .mx-chips button{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  color:#CFE0F5; border-radius:20px; padding:7px 12px; font-size:12px; cursor:pointer; }
#mx-chat .mx-chips button:hover{ background:rgba(254,60,0,.22); border-color:rgba(254,60,0,.5); }
#mx-chat form{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid rgba(120,200,255,.16); }
#mx-chat input{ flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:22px; padding:11px 15px; color:#fff; font-size:14px; outline:none; }
#mx-chat input:focus{ border-color:rgba(254,60,0,.65); }
#mx-chat form button{ background:#FE3C00; border:0; color:#fff; border-radius:22px;
  padding:0 18px; font-weight:800; cursor:pointer; font-size:13px; }
@media(max-width:640px){ #mx-chat{ right:12px; left:12px; bottom:176px; width:auto; } }

/* ================================== INTRO ================================ */
#mx-intro{
  position:fixed; inset:0; z-index:2147483000; background:#000; color:#fff;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  font-family:Inter,system-ui,-apple-system,Arial,sans-serif;
  opacity:1; transition:opacity 1s cubic-bezier(.4,0,.2,1); overflow:hidden;
}
#mx-intro.mx-gone{ opacity:0; pointer-events:none; }
#mx-intro canvas.mx-stars{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#mx-intro .mx-vignette{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 50%,transparent 30%,rgba(0,0,0,.86) 100%); }
#mx-intro .mx-scan{ position:absolute; left:0; right:0; height:170px; pointer-events:none; z-index:3;
  background:linear-gradient(180deg,transparent,rgba(120,190,255,.055),transparent);
  animation:mxScan 5.2s linear infinite; }
@keyframes mxScan{ 0%{top:-180px} 100%{top:100%} }

#mx-intro .mx-core{ position:relative; text-align:center; padding:0 22px; z-index:2; }
#mx-intro .mx-core::before{
  content:""; position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  width:min(760px,92vw); height:min(420px,52vh); pointer-events:none; z-index:-1;
  background:radial-gradient(closest-side, rgba(255,255,255,.26), transparent 70%),
             radial-gradient(closest-side, rgba(255,255,255,.14), transparent 76%);
  filter:blur(26px); animation:mxPool 2.6s ease-in-out infinite;
}
@keyframes mxPool{ 0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.94)}
                   50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)} }

#mx-intro .mx-alien{
  width:120px; height:150px; margin:0 auto 26px; display:block;
  filter:drop-shadow(0 0 16px rgba(150,225,255,.5)) drop-shadow(0 0 44px rgba(90,180,255,.28));
  animation:mxAlienIn 1.5s cubic-bezier(.16,1,.3,1) both, mxAlienFloat 4.6s 1.5s ease-in-out infinite;
}
@keyframes mxAlienIn{ from{opacity:0;transform:translateY(26px) scale(.82)} to{opacity:1;transform:none} }
@keyframes mxAlienFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

#mx-intro .mx-eyebrow{
  font-size:11px; letter-spacing:.62em; text-transform:uppercase; color:#7f8b99;
  margin-bottom:26px; opacity:0; animation:mxFade .9s 1.25s forwards;
}
#mx-intro .mx-word{
  font-family:Anton,Inter,system-ui,sans-serif; text-transform:uppercase;
  font-size:clamp(46px,12.5vw,150px); line-height:.92; letter-spacing:-.03em;
  display:block; color:#fff;
  animation:mxNeon 2.2s ease-in-out infinite;
}
#mx-intro .mx-word span{
  display:inline-block; opacity:0; transform:translateY(46px) rotateX(-58deg);
  transform-origin:50% 100%;
  animation:mxLetter .95s cubic-bezier(.16,1,.3,1) forwards,
            mxFlicker 6s 2.6s steps(1,end) infinite;
  animation-delay:calc(1.45s + var(--i,0) * .055s), calc(2.6s + var(--i,0) * .11s);
}
#mx-intro .mx-word.mx-accent{ color:#fff; animation-delay:.4s; }
#mx-intro .mx-word.mx-accent span{ color:#fff; }

/* pure white neon — the glow is white on white, no colour cast at all */
@keyframes mxNeon{
  0%,100%{
    text-shadow:
      0 0 6px  rgba(255,255,255,1),
      0 0 14px rgba(255,255,255,.92),
      0 0 30px rgba(255,255,255,.55),
      0 0 62px rgba(255,255,255,.28),
      0 0 120px rgba(255,255,255,.12);
    filter:brightness(1);
  }
  50%{
    text-shadow:
      0 0 10px rgba(255,255,255,1),
      0 0 26px rgba(255,255,255,1),
      0 0 58px rgba(255,255,255,.85),
      0 0 118px rgba(255,255,255,.5),
      0 0 210px rgba(255,255,255,.24);
    filter:brightness(1.28);
  }
}
/* a real neon tube stutter — brief, irregular, never a steady blink */
@keyframes mxFlicker{
  0%,3%,6%,100%{ opacity:1 }
  4%  { opacity:.28 }
  5%  { opacity:.92 }
  41% { opacity:.35 }
  42% { opacity:1 }
  73% { opacity:.5 }
  74% { opacity:1 }
}
@keyframes mxLetter{ to{opacity:1;transform:translateY(0) rotateX(0)} }
@keyframes mxFade{ to{opacity:1} }

#mx-intro .mx-sub{ margin-top:24px; font-size:11px; letter-spacing:.46em;
  text-transform:uppercase; color:#9aa6b4; opacity:0; animation:mxFade 1s 2.5s forwards; }
#mx-intro .mx-demo{ margin:18px 0 0; font-family:ui-monospace,Consolas,monospace;
  font-size:12px; letter-spacing:.5em; text-transform:uppercase; color:#8FE23C;
  opacity:0; animation:mxFade .8s 2.9s forwards; }

#mx-intro .mx-bar{ margin:26px auto 0; width:min(320px,62vw); height:2px;
  background:rgba(255,255,255,.13); overflow:hidden; border-radius:2px; }
#mx-intro .mx-bar i{ display:block; height:100%; width:0;
  background:linear-gradient(90deg,#FE3C00,#FFB03A);
  box-shadow:0 0 16px rgba(254,60,0,.8); transition:width .35s ease; }
#mx-intro .mx-pct{ margin-top:12px; font-family:ui-monospace,Consolas,monospace;
  font-size:11px; letter-spacing:.3em; color:#6f7c8b; }

#mx-intro .mx-enter{
  position:relative; margin-top:34px; cursor:pointer;
  background:rgba(10,14,20,.82); border:1px solid rgba(190,235,255,.30);
  color:#EAF4FF; letter-spacing:.34em; font-weight:700; font-size:13px;
  text-transform:uppercase; padding:16px 40px; border-radius:44px;
  opacity:0; pointer-events:none;
  transition:background .25s ease, transform .25s ease, border-color .25s ease;
}
#mx-intro .mx-enter.mx-on{ opacity:1; pointer-events:auto; }
#mx-intro .mx-enter:hover{ background:rgba(18,26,36,.92);
  border-color:rgba(210,245,255,.65); transform:translateY(-2px); }
#mx-intro .mx-enter::before{
  content:""; position:absolute; inset:-26px; z-index:-1; border-radius:70px;
  background:radial-gradient(closest-side, rgba(150,225,255,.42), transparent 72%),
             radial-gradient(closest-side, rgba(120,180,255,.24), transparent 78%);
  filter:blur(16px); animation:mxEnterGlow 2.4s ease-in-out infinite;
}
#mx-intro .mx-enter::after{
  content:""; position:absolute; inset:-6px; border-radius:52px; z-index:-1;
  border:1px solid rgba(180,235,255,.55); animation:mxEnterRing 2.4s ease-out infinite;
}
@keyframes mxEnterGlow{ 0%,100%{opacity:.45;transform:scale(.94)} 50%{opacity:1;transform:scale(1.08)} }
@keyframes mxEnterRing{ 0%{opacity:.75;transform:scale(.96)} 70%,100%{opacity:0;transform:scale(1.22)} }

/* ============================ REDUCED MOTION ============================= */
@media (prefers-reduced-motion: reduce){
  #mx-dock a, #mx-bot-orb, #mx-audio-btn,
  .mx-head, .mx-lid, .mx-aura, .mx-halo, .mx-sig, .mx-bolt, .mx-spark,
  .mx-eye-glow, .mx-scanline, .mx-fing, .mx-arm, .mx-arm2,
  #mx-intro .mx-alien, #mx-intro .mx-word, #mx-intro .mx-word span,
  #mx-intro .mx-eyebrow, #mx-intro .mx-sub, #mx-intro .mx-demo,
  #mx-intro .mx-core::before, #mx-intro .mx-enter::before,
  #mx-intro .mx-enter::after, #mx-intro .mx-scan{
    animation:none !important;
  }
  #mx-intro .mx-word span, #mx-intro .mx-eyebrow,
  #mx-intro .mx-sub, #mx-intro .mx-demo{ opacity:1; transform:none; }
}


/* ============================================================================
   v10 — LIGHTNING behind the intro wordmark
   ========================================================================== */
#mx-intro .mx-bolts{
  position:absolute; inset:-14% -8%; pointer-events:none; z-index:-1;
  opacity:0; animation:mxFade .6s 2.4s forwards;
}
#mx-intro .mx-bolts svg{ width:100%; height:100%; display:block; overflow:visible; }
#mx-intro .mx-bolts path{
  fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.95)) drop-shadow(0 0 26px rgba(255,255,255,.55));
  opacity:0;
}
#mx-intro .mx-bolts path.b1{ animation:mxStrike 5.2s 3.0s linear infinite; }
#mx-intro .mx-bolts path.b2{ animation:mxStrike 5.2s 4.4s linear infinite; }
#mx-intro .mx-bolts path.b3{ animation:mxStrike 5.2s 6.1s linear infinite; }
@keyframes mxStrike{
  0%,92%{ opacity:0 }
  93%   { opacity:1 }
  94%   { opacity:.1 }
  95%   { opacity:.9 }
  97%,100%{ opacity:0 }
}
@media (prefers-reduced-motion: reduce){
  #mx-intro .mx-word, #mx-intro .mx-word span, #mx-intro .mx-bolts path{ animation:none !important; }
  #mx-intro .mx-word span{ opacity:1; transform:none; }
}

/* ============================================================================
   v11 — HOST HERO TOUCH-UPS
   ----------------------------------------------------------------------------
   These are the ONLY three rules in this file that name an element belonging to
   the page rather than to me. Each one sets colour, shadow or animation ONLY.
   No width, height, position, display, transform, margin or padding — so none
   of them can move the layout. That restriction is deliberate.
   ========================================================================== */

/* 1. Hero wordmark: blue gradient out, white neon in */
h1.reveal.d1 .grad{
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  -webkit-text-fill-color:#fff !important;
  color:#fff !important;
  text-shadow:
    0 0 8px  rgba(255,255,255,1),
    0 0 20px rgba(255,255,255,.95),
    0 0 44px rgba(255,255,255,.6),
    0 0 92px rgba(255,255,255,.32),
    0 0 170px rgba(255,255,255,.15);
  animation:mxHeroNeon 2.6s ease-in-out infinite;
}
h1.reveal.d1 .accent{
  color:#FFB03A !important; -webkit-text-fill-color:#FFB03A !important;
  text-shadow:0 0 18px rgba(255,176,58,.85);
}
@keyframes mxHeroNeon{
  0%,100%{
    text-shadow:
      0 0 6px  rgba(255,255,255,.9),
      0 0 16px rgba(255,255,255,.7),
      0 0 36px rgba(255,255,255,.4),
      0 0 74px rgba(255,255,255,.2),
      0 0 140px rgba(255,255,255,.09);
    filter:brightness(1);
  }
  50%{
    text-shadow:
      0 0 12px rgba(255,255,255,1),
      0 0 32px rgba(255,255,255,1),
      0 0 74px rgba(255,255,255,.82),
      0 0 150px rgba(255,255,255,.48),
      0 0 260px rgba(255,255,255,.24);
    filter:brightness(1.3);
  }
}

/* 2. A large soft white pool of light behind the wordmark, breathing with it.
      ::before on the h1 itself — it paints, it does not occupy space. */
h1.reveal.d1{ position:relative; }
h1.reveal.d1::before{
  content:""; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:150%; height:260%;
  pointer-events:none; z-index:-1;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.30), transparent 68%),
    radial-gradient(closest-side, rgba(255,255,255,.14), transparent 78%);
  filter:blur(30px);
  animation:mxHeroPool 2.6s ease-in-out infinite;
}
@keyframes mxHeroPool{
  0%,100%{ opacity:.45; transform:translate(-50%,-50%) scale(.9) }
  50%    { opacity:1;   transform:translate(-50%,-50%) scale(1.1) }
}

/* 3. The middle of "Human Vision. AI Acceleration. MARVIX Execution."
      was rendering almost black on a dark background, so it vanished.
      The <b> parts were styled; the plain text between them was not. */
p.tagline{
  color:#EAF4FF !important;
  text-shadow:0 0 14px rgba(160,220,255,.35);
}
p.tagline b{
  color:#7FE9FF !important;
  text-shadow:0 0 16px rgba(127,233,255,.55);
}

@media (prefers-reduced-motion: reduce){
  h1.reveal.d1 .grad, h1.reveal.d1::before{ animation:none !important; }
}