*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --gold: #efc824;
      --gold-glow: rgba(239, 200, 36, 0.15);
      --bg: #0a0a0a;
      --bg-card: #111111;
      --border: rgba(255,255,255,0.06);
      --text: #f0ede6;
      --text-muted: #888780;
      --font-heading: "Space Grotesk", sans-serif;
      --font-body: "Inter", sans-serif;
    }

    html { scroll-behavior: smooth; overflow-x: hidden; }
    body { font-family: var(--font-body); background-color: var(--bg); color: var(--text-muted); overflow-x: hidden; line-height: 1.6; }

    /* Grid background */
    .grid-bg {
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background-image:
        linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 60px 60px;
    }

    /* Radial glows */
    .glow-1 { position: fixed; top: -10%; left: -5%; width: 600px; height: 600px;
      background: radial-gradient(circle, rgba(239,200,36,0.12) 0%, transparent 70%);
      border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; animation: float1 20s ease-in-out infinite; }
    .glow-2 { position: fixed; bottom: -15%; right: -10%; width: 500px; height: 500px;
      background: radial-gradient(circle, rgba(239,200,36,0.08) 0%, transparent 70%);
      border-radius: 50%; filter: blur(100px); pointer-events: none; z-index: 0; animation: float2 25s ease-in-out infinite; }
    .glow-3 { position: fixed; top: 50%; left: 20%; width: 400px; height: 400px;
      background: radial-gradient(circle, rgba(239,200,36,0.05) 0%, transparent 70%);
      border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 0; animation: float3 30s ease-in-out infinite; }
    @keyframes float1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px,30px); } }
    @keyframes float2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-30px,-40px); } }
    @keyframes float3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(20px,-20px); } }

    .page { position: relative; z-index: 1; }
    .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
    @media (min-width: 640px) { .container { padding: 0 48px; } }

    /* Nav */
    .nav {
      display: flex; align-items: center; justify-content: space-between;
      padding: 24px 32px; margin-top: 16px; border-radius: 12px;
      background: rgba(255,255,255,0.03); backdrop-filter: blur(16px);
      border: 1px solid rgba(255,255,255,0.06);
    }
    .nav-logo img { height: 28px; width: auto; }
    .nav-links { display: flex; gap: 36px; }
    .nav-links a { font-family: var(--font-heading); font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
    .nav-links a:hover { color: var(--text); }
    .nav-links a.active { color: var(--gold); }
    @media (max-width: 640px) { .nav-links { display: none; } .nav { padding: 16px 18px; } .nav-logo img { height: 22px; } }

    /* Pills */
    .pill {
      font-family: var(--font-heading); font-size: 11px; font-weight: 500;
      letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold);
      border: 1px solid rgba(239,200,36,0.20); background: rgba(239,200,36,0.05);
      padding: 6px 16px; border-radius: 100px; display: inline-block; margin-right: 8px;
    }

    /* Hero */
    .hero { padding: 100px 0 60px; display: flex; flex-direction: column; gap: 36px; }
    @media (min-width: 768px) { .hero { padding: 140px 0 80px; gap: 44px; } }
    .hero-pills { display: flex; gap: 12px; flex-wrap: wrap; }
    .hero h1 {
      font-family: var(--font-heading); font-size: clamp(3rem, 9vw, 7rem);
      font-weight: 400; line-height: 1; letter-spacing: -0.03em;
      color: var(--text); text-transform: uppercase;
    }
    .hero-sub { font-size: 1.25rem; line-height: 1.6; max-width: 680px; color: var(--text-muted); }
    .hero-meta { font-family: var(--font-heading); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); }
    .hero-meta .v { color: var(--text); }

    /* Stat strip */
    .stat-strip {
      display: grid; grid-template-columns: 1fr; gap: 16px;
      padding: 32px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 32px 0;
    }
    @media (min-width: 768px) { .stat-strip { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
    .stat .num {
      font-family: var(--font-heading); font-size: clamp(2.5rem, 5vw, 4rem);
      font-weight: 500; color: var(--gold); line-height: 1; letter-spacing: -0.02em;
    }
    .stat .num .small { font-size: 50%; color: var(--text); margin-left: 4px; }
    .stat .lbl { font-family: var(--font-heading); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin-top: 14px; }

    /* Sections */
    .section { padding: 80px 0; border-top: 1px solid var(--border); }
    .section-label { font-family: var(--font-heading); font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
    .section h2 {
      font-family: var(--font-heading); font-size: clamp(1.75rem, 4vw, 3rem);
      font-weight: 400; line-height: 1.1; letter-spacing: -0.02em;
      color: var(--text); text-transform: uppercase; margin-bottom: 32px; max-width: 800px;
    }
    .section p { font-size: 1.0625rem; line-height: 1.75; color: var(--text-muted); margin-bottom: 18px; max-width: 760px; }
    .section p strong, .text-light { color: var(--text); font-weight: 500; }
    .lead { font-size: 1.25rem; line-height: 1.6; color: var(--text); font-weight: 300; max-width: 760px; margin-bottom: 28px; }

    /* Callout */
    .callout {
      border-left: 3px solid var(--gold); background: rgba(239,200,36,0.04);
      padding: 20px 26px; margin: 28px 0; color: var(--text);
      font-size: 1.125rem; line-height: 1.6; max-width: 820px;
    }

    /* Quote */
    .quote-big {
      font-family: var(--font-heading); font-size: clamp(1.5rem, 3vw, 2.25rem);
      font-weight: 400; line-height: 1.25; letter-spacing: -0.01em;
      color: var(--text); margin: 32px 0; max-width: 900px;
    }
    .quote-big .gold { color: var(--gold); }

    /* Cards 2-up */
    .two-col {
      display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 28px;
    }
    @media (min-width: 768px) { .two-col { grid-template-columns: 1fr 1fr; gap: 20px; } }
    .card {
      background: rgba(255,255,255,0.03); backdrop-filter: blur(16px);
      border: 1px solid var(--border); border-radius: 16px; padding: 32px 28px;
    }
    .card .label { font-family: var(--font-heading); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
    .card ul { list-style: none; padding: 0; }
    .card ul li { position: relative; padding-left: 22px; margin-bottom: 12px; color: var(--text-muted); font-size: 1rem; line-height: 1.55; }
    .card ul li::before { content: ''; position: absolute; left: 0; top: 13px; width: 10px; height: 1px; background: var(--gold); }
    .card ul li strong { color: var(--text); }

    /* Steps */
    .steps { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
    @media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
    .step {
      background: rgba(255,255,255,0.03); backdrop-filter: blur(16px);
      border: 1px solid var(--border); border-radius: 14px; padding: 24px 22px;
    }
    .step .n { font-family: var(--font-heading); font-size: 11px; color: var(--gold); letter-spacing: 2px; margin-bottom: 12px; }
    .step .t { font-family: var(--font-heading); color: var(--text); font-size: 1.125rem; text-transform: uppercase; line-height: 1.2; margin-bottom: 12px; }
    .step .d { font-size: 0.95rem; color: var(--text-muted); line-height: 1.55; }

    /* CTA */
    .cta-section {
      padding: 96px 0; text-align: center; border-top: 1px solid var(--border);
    }
    .cta-section h2 { margin-left: auto; margin-right: auto; }
    .btn-primary {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: var(--font-heading); font-size: 13px; font-weight: 500;
      letter-spacing: 1.5px; text-transform: uppercase; color: var(--bg);
      background: var(--gold); padding: 16px 36px; border: none; border-radius: 4px;
      cursor: pointer; text-decoration: none; transition: opacity 0.2s;
    }
    .btn-primary:hover { opacity: 0.85; }
    .btn-outline {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: var(--font-heading); font-size: 13px; font-weight: 500;
      letter-spacing: 1.5px; text-transform: uppercase; color: var(--text);
      background: transparent; padding: 16px 36px; border: 1px solid rgba(255,255,255,0.12);
      border-radius: 4px; cursor: pointer; text-decoration: none; transition: all 0.2s; margin-left: 12px;
    }
    .btn-outline:hover { border-color: var(--gold); color: var(--gold); }

    /* Footer */
    .footer { padding: 60px 0 40px; border-top: 1px solid var(--border); margin-top: 40px; }
    .footer-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 36px; border-bottom: 1px solid var(--border); }
    .footer-top img { height: 24px; }
    .footer-bottom { padding-top: 24px; display: flex; justify-content: space-between; font-family: var(--font-heading); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); }
    .footer-bottom a { color: var(--text-muted); text-decoration: none; margin-right: 12px; }
    .footer-bottom a:hover { color: var(--gold); }

    /* Reveal animations */
    .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }
  
/* Video placeholder */
.video-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 32px 0 48px;
  position: relative;
  gap: 18px;
}
.video-placeholder .play {
  width: 84px; height: 84px; border-radius: 50%;
  background: rgba(239,200,36,0.12); border: 1px solid rgba(239,200,36,0.30);
  display: flex; align-items: center; justify-content: center;
}
.video-placeholder .play::after {
  content: ''; width: 0; height: 0;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 26px solid var(--gold);
  margin-left: 6px;
}
.video-placeholder .vp-label {
  font-family: var(--font-heading); font-size: 13px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--text);
}
.video-placeholder .vp-sub {
  font-family: var(--font-heading); font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────
   Section motion graphics — contextual animated illustrations
   ───────────────────────────────────────────────────────────── */
.section-illust {
  position: relative;
  width: 100%;
  height: 180px;
  margin: 16px 0 28px;
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) { .section-illust { height: 220px; } }

/* ── 01 · Visibility / unread messages stream ── */
.mg-stream { width: 92%; max-width: 720px; height: 100%; padding: 18px 24px;
  display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.mg-stream .row {
  display: flex; align-items: center; gap: 12px;
  opacity: 0; transform: translateX(-12px);
  animation: streamRow 5s linear infinite;
}
.mg-stream .row .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(37,211,102,0.55); flex-shrink: 0;
}
.mg-stream .row .bar {
  height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
}
.mg-stream .row:nth-child(1) { animation-delay: 0s; }
.mg-stream .row:nth-child(2) { animation-delay: 0.5s; }
.mg-stream .row:nth-child(3) { animation-delay: 1.0s; }
.mg-stream .row:nth-child(4) { animation-delay: 1.5s; }
.mg-stream .row:nth-child(5) { animation-delay: 2.0s; }
.mg-stream .row:nth-child(6) { animation-delay: 2.5s; }
.mg-stream .row:nth-child(7) { animation-delay: 3.0s; }
.mg-stream .row:nth-child(1) .bar { width: 60%; }
.mg-stream .row:nth-child(2) .bar { width: 45%; }
.mg-stream .row:nth-child(3) .bar { width: 70%; }
.mg-stream .row:nth-child(4) .bar { width: 38%; }
.mg-stream .row:nth-child(5) .bar { width: 55%; }
.mg-stream .row:nth-child(6) .bar { width: 72%; }
.mg-stream .row:nth-child(7) .bar { width: 48%; }
@keyframes streamRow {
  0%   { opacity: 0; transform: translateX(-20px); }
  10%  { opacity: 1; transform: translateX(0); }
  85%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(20px); }
}
.mg-stream .lost {
  position: absolute; right: 28px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-heading); font-size: 11px; letter-spacing: 2px;
  color: var(--gold); text-transform: uppercase; opacity: 0;
  animation: lostBlink 5s ease-in-out infinite;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(239,200,36,0.3);
  padding: 8px 14px; border-radius: 100px;
}
@keyframes lostBlink {
  0%, 30% { opacity: 0; }
  50%, 80% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── 02 · Two doors: locked form vs open QR ── */
.mg-doors { display: flex; gap: 32px; align-items: center; }
.mg-door {
  width: 130px; height: 150px; border-radius: 10px;
  border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  position: relative;
}
.mg-door .label {
  font-family: var(--font-heading); font-size: 9px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text-muted); position: absolute; bottom: 12px;
}
.mg-door.fail { background: rgba(239,68,68,0.04); border-color: rgba(239,68,68,0.20); }
.mg-door.fail .icon {
  width: 38px; height: 38px; border: 2px solid rgba(239,68,68,0.55); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(239,68,68,0.75); font-size: 22px;
  animation: shake 4s ease-in-out infinite;
}
.mg-door.fail .icon::before { content: '×'; line-height: 1; }
.mg-door.fail .stack {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.mg-door.fail .stack span {
  width: 56px; height: 5px; border-radius: 2px;
  background: rgba(239,68,68,0.20);
}
@keyframes shake {
  0%, 90%, 100% { transform: translateX(0); }
  92% { transform: translateX(-3px); }
  94% { transform: translateX(3px); }
  96% { transform: translateX(-3px); }
  98% { transform: translateX(3px); }
}
.mg-door.win { background: rgba(239,200,36,0.04); border-color: rgba(239,200,36,0.25); }
.mg-door.win .qr {
  width: 56px; height: 56px;
  background-image:
    linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold));
  background-size: 12px 12px, 12px 12px, 12px 12px, 8px 8px, 12px 12px, 8px 8px, 10px 10px, 6px 6px, 8px 8px;
  background-position: 0 0, 22px 0, 44px 0, 0 22px, 22px 22px, 44px 22px, 0 44px, 22px 44px, 44px 44px;
  background-repeat: no-repeat;
  position: relative;
  animation: qrScan 4s ease-in-out infinite;
}
.mg-door.win .qr::after {
  content: ''; position: absolute; left: -4px; right: -4px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(239,200,36,0.9), transparent);
  animation: qrLine 2.4s ease-in-out infinite;
}
@keyframes qrLine {
  0% { top: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@keyframes qrScan { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.mg-door.win .check {
  font-family: var(--font-heading); color: var(--gold); font-size: 18px;
  animation: checkPop 4s ease-in-out infinite;
}
.mg-door.win .check::before { content: '\2713'; }
@keyframes checkPop {
  0%, 35% { opacity: 0; transform: scale(0.6); }
  50% { opacity: 1; transform: scale(1.1); }
  80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

  65%, 90% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-5px); }
}


/* ── 05 · Live dashboard ticker ── */
.mg-dash { display: flex; gap: 16px; }
.mg-dash .tile {
  width: 120px; height: 130px; padding: 16px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: space-between;
}
.mg-dash .tile .top {
  font-family: var(--font-heading); font-size: 8.5px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text-muted);
}
.mg-dash .tile .top .live::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80; margin-right: 6px; vertical-align: middle;
  animation: liveBlink 1.5s ease-in-out infinite;
}
@keyframes liveBlink { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
.mg-dash .tile .val {
  font-family: var(--font-heading); font-size: 28px; font-weight: 500;
  color: var(--gold); line-height: 1; letter-spacing: -0.02em;
}
.mg-dash .tile .spark {
  display: flex; align-items: flex-end; gap: 3px; height: 22px;
}
.mg-dash .tile .spark span {
  flex: 1; background: rgba(239,200,36,0.45); border-radius: 1px;
  animation: sparkRise 2.6s ease-in-out infinite;
}
.mg-dash .tile .spark span:nth-child(1) { animation-delay: 0s; }
.mg-dash .tile .spark span:nth-child(2) { animation-delay: 0.15s; }
.mg-dash .tile .spark span:nth-child(3) { animation-delay: 0.3s; }
.mg-dash .tile .spark span:nth-child(4) { animation-delay: 0.45s; }
.mg-dash .tile .spark span:nth-child(5) { animation-delay: 0.6s; }
.mg-dash .tile .spark span:nth-child(6) { animation-delay: 0.75s; }
.mg-dash .tile .spark span:nth-child(7) { animation-delay: 0.9s; }
@keyframes sparkRise {
  0%, 100% { height: 20%; }
  50% { height: 90%; }
}

  55%, 95% { opacity: 1; }
  100% { opacity: 0.4; }
}

  65%, 90% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-5px); }
}

/* ── 03 · Terminal — natural-language query → verified answer ── */
.mg-term {
  width: 88%; max-width: 540px; height: 170px;
  border-radius: 10px; border: 1px solid var(--border);
  background: rgba(0,0,0,0.4);
  font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
  display: flex; flex-direction: column; overflow: hidden;
}
.mg-term .bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.mg-term .bar .dot { width: 8px; height: 8px; border-radius: 50%; }
.mg-term .bar .dot.r { background: rgba(239,68,68,0.6); }
.mg-term .bar .dot.y { background: rgba(239,200,36,0.7); }
.mg-term .bar .dot.g { background: rgba(74,222,128,0.6); }
.mg-term .bar .title {
  margin-left: 8px; font-family: var(--font-heading);
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted);
}
.mg-term .body {
  flex: 1; padding: 14px 16px; font-size: 12px;
  color: var(--text-muted); line-height: 1.7; position: relative;
}
.mg-term .line { display: block; white-space: nowrap; overflow: hidden; }
.mg-term .prompt { color: var(--gold); }
.mg-term .q {
  display: inline-block; overflow: hidden; white-space: nowrap;
  border-right: 2px solid var(--gold);
  width: 0;
  animation: typeQ 6s steps(40, end) infinite;
  color: var(--text);
  vertical-align: bottom;
}
@keyframes typeQ {
  0% { width: 0; border-right-color: var(--gold); }
  20% { width: 22ch; }
  35% { width: 22ch; border-right-color: var(--gold); }
  40% { width: 22ch; border-right-color: transparent; }
  100% { width: 22ch; border-right-color: transparent; }
}
.mg-term .step {
  opacity: 0; color: var(--text-muted);
  animation: termStep 6s ease-in-out infinite;
}
.mg-term .step .tag { color: rgba(96,165,250,0.85); }
.mg-term .step.s1 { animation-delay: 2.4s; }
.mg-term .step.s2 { animation-delay: 3.0s; }
.mg-term .step.s3 { animation-delay: 3.8s; }
.mg-term .step .check { color: rgba(74,222,128,0.9); }
.mg-term .answer-line {
  opacity: 0; color: var(--text);
  animation: termAnswer 6s ease-in-out infinite 4.4s;
}
.mg-term .answer-line .ok { color: var(--gold); }
@keyframes termStep {
  0%, 30% { opacity: 0; transform: translateY(2px); }
  40%, 90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0.4; }
}
@keyframes termAnswer {
  0%, 40% { opacity: 0; }
  55%, 95% { opacity: 1; }
  100% { opacity: 0.4; }
}

/* ── 04 · Chat bubbles (homepage-card style) — CEO asks, AI surfaces ── */
.mg-chat {
  display: flex; flex-direction: column; justify-content: center;
  width: 88%; max-width: 480px; height: 100%; padding: 20px 28px; gap: 8px;
}
.mg-chat .bubble {
  padding: 8px 14px; border-radius: 10px; font-size: 12px; line-height: 1.4;
  max-width: 80%; font-family: var(--font-body);
  animation: chatRoll 6s ease-in-out infinite;
  opacity: 0;
}
.mg-chat .bubble.in {
  background: rgba(37,211,102,0.10); color: rgba(255,255,255,0.85);
  align-self: flex-start; border: 1px solid rgba(37,211,102,0.18);
  border-bottom-left-radius: 3px;
}
.mg-chat .bubble.ai {
  background: rgba(239,200,36,0.10); color: var(--text);
  align-self: flex-end; border: 1px solid rgba(239,200,36,0.25);
  border-bottom-right-radius: 3px;
}
.mg-chat .bubble.ai .flag { color: var(--gold); font-weight: 500; }
.mg-chat .bubble:nth-child(1) { animation-delay: 0.2s; }
.mg-chat .bubble:nth-child(2) { animation-delay: 1.4s; }
.mg-chat .bubble:nth-child(3) { animation-delay: 2.6s; }
.mg-chat .bubble:nth-child(4) { animation-delay: 3.8s; }
@keyframes chatRoll {
  0%, 10% { opacity: 0; transform: translateY(8px); }
  20%, 90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* ═══════════════════════════════════════════════════════════════
   Motion graphics for LeParfum / Egasca / TSG case studies
   ═══════════════════════════════════════════════════════════════ */

/* ── Glitching / broken agent text ── */
.mg-glitch {
  font-family: var(--font-heading); font-size: 28px;
  letter-spacing: 4px; color: var(--text); text-transform: uppercase;
  position: relative; padding: 6px 18px;
  border: 1px solid rgba(239,68,68,0.30); border-radius: 6px;
  background: rgba(239,68,68,0.04);
  animation: glitchShake 0.6s steps(2) infinite;
}
.mg-glitch::before, .mg-glitch::after {
  content: attr(data-text); position: absolute; left: 0; right: 0; padding: inherit;
  text-align: center;
}
.mg-glitch::before { color: rgba(239,68,68,0.7); transform: translate(-1px, 0); }
.mg-glitch::after { color: rgba(96,165,250,0.7); transform: translate(1px, 0); }
.mg-glitch .blink { color: rgba(239,68,68,0.9); animation: blink 0.8s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes glitchShake {
  0%, 100% { transform: translate(0,0); }
  20% { transform: translate(-0.5px, 0.5px); }
  40% { transform: translate(0.5px, -0.5px); }
  60% { transform: translate(-0.5px, -0.5px); }
  80% { transform: translate(0.5px, 0.5px); }
}

/* ── Audit clipboard with ticking checks ── */
.mg-audit { display: flex; gap: 18px; align-items: center; }
.mg-audit .clipboard {
  width: 110px; height: 150px;
  border: 1px solid var(--border); border-radius: 8px;
  background: rgba(255,255,255,0.03); padding: 16px 14px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.mg-audit .clipboard::before {
  content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 12px; border-radius: 3px;
  background: var(--gold); opacity: 0.7;
}
.mg-audit .row {
  display: flex; align-items: center; gap: 8px;
  opacity: 0; animation: auditTick 5s linear infinite;
}
.mg-audit .row .box {
  width: 12px; height: 12px; border-radius: 2px;
  border: 1px solid rgba(239,200,36,0.6); flex-shrink: 0;
  position: relative;
}
.mg-audit .row.done .box::after {
  content: ''; position: absolute; inset: 2px;
  background: var(--gold); border-radius: 1px;
}
.mg-audit .row .line {
  flex: 1; height: 5px; border-radius: 2px;
  background: rgba(255,255,255,0.15);
}
.mg-audit .row:nth-child(1) { animation-delay: 0.2s; }
.mg-audit .row:nth-child(2) { animation-delay: 0.7s; }
.mg-audit .row:nth-child(3) { animation-delay: 1.2s; }
.mg-audit .row:nth-child(4) { animation-delay: 1.7s; }
.mg-audit .row:nth-child(5) { animation-delay: 2.2s; }
@keyframes auditTick {
  0%, 10% { opacity: 0; transform: translateX(-6px); }
  20%, 90% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(6px); }
}

/* ── Brand tone waveform ── */
.mg-wave {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  height: 100%; padding: 0 32px;
}
.mg-wave span {
  width: 5px; border-radius: 3px;
  background: linear-gradient(to top, rgba(239,200,36,0.3), var(--gold));
  animation: waveBar 1.6s ease-in-out infinite;
}
.mg-wave span:nth-child(1)  { animation-delay: 0.0s; }
.mg-wave span:nth-child(2)  { animation-delay: 0.05s; }
.mg-wave span:nth-child(3)  { animation-delay: 0.10s; }
.mg-wave span:nth-child(4)  { animation-delay: 0.15s; }
.mg-wave span:nth-child(5)  { animation-delay: 0.20s; }
.mg-wave span:nth-child(6)  { animation-delay: 0.25s; }
.mg-wave span:nth-child(7)  { animation-delay: 0.30s; }
.mg-wave span:nth-child(8)  { animation-delay: 0.35s; }
.mg-wave span:nth-child(9)  { animation-delay: 0.40s; }
.mg-wave span:nth-child(10) { animation-delay: 0.45s; }
.mg-wave span:nth-child(11) { animation-delay: 0.50s; }
.mg-wave span:nth-child(12) { animation-delay: 0.55s; }
.mg-wave span:nth-child(13) { animation-delay: 0.60s; }
.mg-wave span:nth-child(14) { animation-delay: 0.65s; }
.mg-wave span:nth-child(15) { animation-delay: 0.70s; }
.mg-wave span:nth-child(16) { animation-delay: 0.75s; }
.mg-wave span:nth-child(17) { animation-delay: 0.80s; }
.mg-wave span:nth-child(18) { animation-delay: 0.85s; }
.mg-wave span:nth-child(19) { animation-delay: 0.90s; }
.mg-wave span:nth-child(20) { animation-delay: 0.95s; }
.mg-wave span:nth-child(21) { animation-delay: 1.00s; }
.mg-wave span:nth-child(22) { animation-delay: 1.05s; }
.mg-wave span:nth-child(23) { animation-delay: 1.10s; }
.mg-wave span:nth-child(24) { animation-delay: 1.15s; }
.mg-wave span:nth-child(25) { animation-delay: 1.20s; }
.mg-wave .label {
  position: absolute; bottom: 12px; right: 14px;
  font-family: var(--font-heading); font-size: 9px; letter-spacing: 2px;
  color: var(--text-muted); text-transform: uppercase;
}
@keyframes waveBar {
  0%, 100% { height: 14px; }
  50% { height: 80px; }
}

/* ── NFC tap with ripples ── */
.mg-nfc { position: relative; width: 240px; height: 160px; display: flex; align-items: center; justify-content: center; gap: 28px; }
.mg-nfc .card {
  width: 100px; height: 64px; border-radius: 8px;
  background: linear-gradient(135deg, rgba(239,200,36,0.18), rgba(239,200,36,0.04));
  border: 1px solid rgba(239,200,36,0.30);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.mg-nfc .card::before {
  content: ''; width: 12px; height: 12px;
  border: 1.5px solid var(--gold); border-radius: 50%;
  box-shadow: 0 0 0 4px transparent, 0 0 0 8px transparent;
  animation: nfcPulse 2s ease-out infinite;
}
@keyframes nfcPulse {
  0% { box-shadow: 0 0 0 0 rgba(239,200,36,0.4), 0 0 0 0 rgba(239,200,36,0.2); }
  100% { box-shadow: 0 0 0 12px rgba(239,200,36,0), 0 0 0 20px rgba(239,200,36,0); }
}
.mg-nfc .commission {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-heading); font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted);
}
.mg-nfc .commission .amt {
  font-size: 24px; color: var(--gold); letter-spacing: -0.02em;
  animation: commCount 3s ease-in-out infinite;
}
@keyframes commCount {
  0%, 30% { opacity: 0; transform: translateY(6px); }
  50%, 90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* ── Rising line chart ── */
.mg-chart { position: relative; width: 360px; height: 160px; padding: 14px 18px; }
.mg-chart .grid {
  position: absolute; inset: 14px 18px;
  background-image: linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
                    linear-gradient(to top, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 24px;
}
.mg-chart svg { position: absolute; inset: 14px 18px; width: calc(100% - 36px); height: calc(100% - 28px); }
.mg-chart .path {
  fill: none; stroke: var(--gold); stroke-width: 2;
  stroke-dasharray: 600; stroke-dashoffset: 600;
  animation: chartDraw 4s ease-out infinite;
  filter: drop-shadow(0 0 6px rgba(239,200,36,0.4));
}
.mg-chart .fill { fill: url(#mg-grad); opacity: 0; animation: chartFill 4s ease-out infinite; }
@keyframes chartDraw {
  0%, 10% { stroke-dashoffset: 600; }
  60%, 100% { stroke-dashoffset: 0; }
}
@keyframes chartFill {
  0%, 30% { opacity: 0; }
  70%, 100% { opacity: 0.3; }
}
.mg-chart .endpoint {
  position: absolute; right: 22px; top: 22px;
  font-family: var(--font-heading); font-size: 22px; color: var(--gold);
  letter-spacing: -0.02em;
  opacity: 0; animation: endpointPop 4s ease-out infinite;
}
@keyframes endpointPop {
  0%, 65% { opacity: 0; transform: scale(0.8); }
  75%, 95% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; }
}

/* ── Corporate tower ── */
.mg-tower { display: flex; align-items: flex-end; gap: 8px; height: 100%; padding: 20px; }
.mg-tower .build {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  position: relative;
}
.mg-tower .build::before {
  content: ''; position: absolute; inset: 6px;
  background-image:
    linear-gradient(rgba(239,200,36,0.45), rgba(239,200,36,0.45)),
    linear-gradient(rgba(239,200,36,0.45), rgba(239,200,36,0.45)),
    linear-gradient(rgba(239,200,36,0.45), rgba(239,200,36,0.45)),
    linear-gradient(rgba(239,200,36,0.45), rgba(239,200,36,0.45)),
    linear-gradient(rgba(239,200,36,0.45), rgba(239,200,36,0.45)),
    linear-gradient(rgba(239,200,36,0.45), rgba(239,200,36,0.45));
  background-size: 6px 6px;
  background-repeat: no-repeat;
  background-position: 0 0, 12px 0, 0 12px, 12px 12px, 0 24px, 12px 24px;
  animation: windowsBlink 4s steps(8) infinite;
}
.mg-tower .build.t1 { width: 38px; height: 60%; }
.mg-tower .build.t2 { width: 46px; height: 100%; background: rgba(239,200,36,0.05); border-color: rgba(239,200,36,0.20); }
.mg-tower .build.t3 { width: 38px; height: 75%; }
.mg-tower .build.t4 { width: 30px; height: 50%; }
.mg-tower .build.t2::after {
  content: 'EGASCA'; position: absolute; top: 8px; left: 0; right: 0; text-align: center;
  font-family: var(--font-heading); font-size: 7px; letter-spacing: 1.5px;
  color: var(--gold);
}
@keyframes windowsBlink {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.4; }
}

/* ── Messy paper / scattered docs ── */
.mg-papers { position: relative; width: 280px; height: 160px; }
.mg-papers .doc {
  position: absolute; width: 80px; height: 100px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 8px 10px;
}
.mg-papers .doc::before, .mg-papers .doc::after {
  content: ''; display: block; height: 3px; margin-bottom: 4px;
  background: rgba(255,255,255,0.18); border-radius: 1px;
}
.mg-papers .doc::after { width: 60%; }
.mg-papers .doc .lines {
  display: flex; flex-direction: column; gap: 3px; margin-top: 8px;
}
.mg-papers .doc .lines span {
  height: 2px; background: rgba(255,255,255,0.10); border-radius: 1px;
}
.mg-papers .doc .lines span:nth-child(odd) { width: 80%; }
.mg-papers .doc .lines span:nth-child(even) { width: 60%; }
.mg-papers .doc.d1 { left: 10px; top: 10px; transform: rotate(-8deg); }
.mg-papers .doc.d2 { left: 90px; top: 30px; transform: rotate(4deg); background: rgba(239,200,36,0.06); border-color: rgba(239,200,36,0.20); }
.mg-papers .doc.d3 { left: 180px; top: 20px; transform: rotate(-3deg); }
.mg-papers .x {
  position: absolute; right: 14px; top: 110px;
  font-family: var(--font-heading); font-size: 11px;
  letter-spacing: 2px; color: rgba(239,68,68,0.85); text-transform: uppercase;
  border: 1px solid rgba(239,68,68,0.30); background: rgba(239,68,68,0.05);
  padding: 5px 10px; border-radius: 100px;
  animation: lostBlink 4s ease-in-out infinite;
}
.mg-papers .x::before { content: '\2715 \00a0 unlogged'; }

/* ── Voice → ticket → invoice pipeline ── */
.mg-pipeline { display: flex; align-items: center; gap: 14px; }
.mg-pipeline .stage {
  width: 88px; height: 110px; border-radius: 10px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.03);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px 6px; gap: 8px; position: relative;
}
.mg-pipeline .stage .icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 18px; color: var(--gold);
}
.mg-pipeline .stage .lbl {
  font-family: var(--font-heading); font-size: 9px; letter-spacing: 1.5px;
  color: var(--text-muted); text-transform: uppercase; text-align: center;
}
.mg-pipeline .arrow {
  width: 24px; height: 2px; background: rgba(239,200,36,0.30);
  position: relative;
}
.mg-pipeline .arrow .dot {
  position: absolute; left: 0; top: -3px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--gold);
  animation: pipeFlow 2.4s linear infinite;
}
.mg-pipeline .arrow.a2 .dot { animation-delay: 0.8s; }
@keyframes pipeFlow {
  0% { left: -4px; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { left: calc(100% - 4px); opacity: 0; }
}
.mg-pipeline .stage.active { border-color: rgba(239,200,36,0.40); background: rgba(239,200,36,0.05); }

/* ── Big counter ticker ── */
.mg-counter {
  font-family: var(--font-heading); font-size: 56px; font-weight: 500;
  color: var(--gold); letter-spacing: -0.03em; line-height: 1;
  display: flex; align-items: baseline; gap: 4px;
}
.mg-counter .pre { font-size: 28px; color: var(--text); }
.mg-counter .suf { font-size: 24px; color: var(--text); }
.mg-counter .digits {
  display: inline-flex; overflow: hidden;
}
.mg-counter .digit {
  width: 36px; height: 56px; overflow: hidden; position: relative;
  display: inline-block;
}
.mg-counter .digit .roll {
  display: flex; flex-direction: column;
  animation: digitRoll 4s ease-out infinite;
}
.mg-counter .digit .roll span { height: 56px; line-height: 56px; }
@keyframes digitRoll {
  0% { transform: translateY(0); }
  85%, 100% { transform: translateY(-90%); }
}
.mg-counter .sublabel {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-heading); font-size: 10px; letter-spacing: 2px;
  color: var(--text-muted); text-transform: uppercase;
}

/* ── Video frames with scan ── */
.mg-frames { display: flex; gap: 8px; position: relative; }
.mg-frames .frame {
  width: 60px; height: 80px; border-radius: 4px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.03);
  position: relative; overflow: hidden;
}
.mg-frames .frame::before {
  content: ''; position: absolute; left: 50%; top: 14px; width: 8px; height: 8px;
  background: rgba(239,200,36,0.4); border-radius: 50%; transform: translateX(-50%);
}
.mg-frames .frame::after {
  content: ''; position: absolute; left: 50%; top: 24px; width: 2px; height: 22px;
  background: rgba(239,200,36,0.3); transform: translateX(-50%);
}
.mg-frames .frame .bar {
  position: absolute; left: 10px; right: 10px; bottom: 18px; height: 2px;
  background: rgba(239,200,36,0.35); border-radius: 1px;
}
.mg-frames .frame:nth-child(1) .bar { transform: rotate(-18deg); }
.mg-frames .frame:nth-child(2) .bar { transform: rotate(-8deg); }
.mg-frames .frame:nth-child(3) .bar { transform: rotate(0deg); }
.mg-frames .frame:nth-child(4) .bar { transform: rotate(-8deg); }
.mg-frames .frame:nth-child(5) .bar { transform: rotate(-18deg); }
.mg-frames .scan {
  position: absolute; top: 0; bottom: 0; width: 60px;
  border: 1.5px solid var(--gold); border-radius: 4px;
  box-shadow: 0 0 12px rgba(239,200,36,0.4);
  animation: scanMove 3.6s ease-in-out infinite;
}
@keyframes scanMove {
  0%, 5% { left: 0; }
  20% { left: 68px; }
  40% { left: 136px; }
  60% { left: 204px; }
  80%, 100% { left: 272px; opacity: 0; }
}

/* ── Stopwatch / time compression ── */
.mg-clock {
  display: flex; align-items: center; gap: 30px;
}
.mg-clock .dial {
  width: 100px; height: 100px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15); position: relative;
}
.mg-clock .dial .hand {
  position: absolute; left: 50%; bottom: 50%; transform-origin: bottom center;
  width: 2px; height: 38px; background: var(--gold); margin-left: -1px;
  animation: clockSpin 2.4s linear infinite;
}
.mg-clock .dial .center {
  position: absolute; top: 50%; left: 50%; width: 8px; height: 8px;
  margin: -4px 0 0 -4px; border-radius: 50%; background: var(--gold);
}
@keyframes clockSpin { to { transform: rotate(360deg); } }
.mg-clock .dial.slow .hand { animation-duration: 8s; }
.mg-clock .dial .lbl {
  position: absolute; bottom: -22px; left: 0; right: 0; text-align: center;
  font-family: var(--font-heading); font-size: 10px; letter-spacing: 2px;
  color: var(--text-muted); text-transform: uppercase;
}
.mg-clock .arrow {
  font-family: var(--font-heading); font-size: 24px; color: var(--gold);
}

/* ── Recovery curve (muscle %) ── */
.mg-recovery { position: relative; width: 360px; height: 160px; padding: 16px 18px; }
.mg-recovery .row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.mg-recovery .row .lbl {
  width: 80px; font-family: var(--font-heading); font-size: 10px;
  letter-spacing: 1.5px; color: var(--text-muted); text-transform: uppercase;
}
.mg-recovery .row .bar {
  flex: 1; height: 12px; border-radius: 6px;
  background: rgba(255,255,255,0.06); position: relative; overflow: hidden;
}
.mg-recovery .row .bar .fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--gold); border-radius: 6px;
  animation: recoveryFill 5s ease-in-out infinite;
}
.mg-recovery .row .pct {
  font-family: var(--font-heading); font-size: 12px; color: var(--gold);
  width: 36px; text-align: right;
}
.mg-recovery .r1 .bar .fill { animation-name: rFill1; }
.mg-recovery .r2 .bar .fill { animation-name: rFill2; }
.mg-recovery .r3 .bar .fill { animation-name: rFill3; }
@keyframes rFill1 {
  0% { width: 25%; } 50% { width: 38%; } 100% { width: 45%; }
}
@keyframes rFill2 {
  0% { width: 70%; } 50% { width: 50%; } 100% { width: 30%; }
}
@keyframes rFill3 {
  0% { width: 25%; } 50% { width: 25%; } 100% { width: 25%; }
}