/* ============================================================
   mg-components.css — Javed IT Solution MOTION-GRAPHICS components
   Neo-brutalist sticker system add-on. Loaded AFTER ls-system.css.
   Tokens: black #090a0a · mint #befabe · blue #c8e1fa · purple #f0d1ff
           orange #ffd6c2 · yellow #fff1b8 · green2 #d7f5df
   Hard offset shadows only (never blurred). GPU-safe animation targets.
   ============================================================ */

/* ---------- base safety ---------- */
[data-mg-scene] svg, .mg-scene-frame svg { width: 100%; height: auto; display: block; }
.mg-word { display: inline-block; will-change: transform; }
[data-mg-tilt] { transform-style: preserve-3d; will-change: transform; }
[data-mg-bar-fill] { will-change: transform; }

/* ---------- scene frame (white bordered stage for animated SVGs) ---------- */
.mg-scene-frame {
  background: #fff; border: 1px solid #090a0a; border-radius: 1rem;
  box-shadow: 4px 4px 0 0 #090a0a; padding: clamp(1rem, 2.2vw, 1.75rem);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}

/* ---------- browser window mockup ---------- */
.mg-window {
  background: #fff; border: 1.5px solid #090a0a; border-radius: .9rem;
  box-shadow: 4px 4px 0 0 #090a0a; overflow: hidden;
}
.mg-window__bar {
  display: flex; align-items: center; gap: .45rem;
  padding: .55rem .8rem; border-bottom: 1.5px solid #090a0a; background: #f3f6f3;
}
.mg-window__dot { width: .62rem; height: .62rem; border-radius: 50%; border: 1.5px solid #090a0a; flex: 0 0 auto; }
.mg-window__dot:nth-child(1) { background: #ffd6c2; }
.mg-window__dot:nth-child(2) { background: #fff1b8; }
.mg-window__dot:nth-child(3) { background: #befabe; }
.mg-window__url {
  flex: 1; margin-left: .5rem; background: #fff; border: 1px solid #090a0a;
  border-radius: 99px; padding: .18rem .8rem; font-size: .72rem; font-weight: 600;
  color: #3e4042; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mg-window__body { padding: 1rem; }

/* ---------- phone frame mockup ---------- */
.mg-phone {
  background: #fff; border: 2px solid #090a0a; border-radius: 1.6rem;
  box-shadow: 4px 4px 0 0 #090a0a; padding: .55rem; width: min(240px, 100%);
  margin: 0 auto;
}
.mg-phone__screen {
  border: 1.5px solid #090a0a; border-radius: 1.15rem; overflow: hidden;
  background: #fff; min-height: 300px; display: flex; flex-direction: column;
}
.mg-phone__notch { width: 38%; height: .95rem; margin: .3rem auto .15rem; background: #090a0a; border-radius: 99px; }

/* ---------- stat band ---------- */
.mg-statband {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
  max-width: 1180px; margin: 0 auto;
}
.mg-stat {
  background: #fff; border: 1px solid #090a0a; border-radius: 1.25rem;
  box-shadow: 4px 4px 0 0 #090a0a; padding: clamp(1.1rem, 2vw, 1.6rem) 1rem;
  text-align: center; transition: box-shadow .2s cubic-bezier(.25,.46,.45,.94);
}
.mg-stat:hover { box-shadow: 7px 7px 0 0 #090a0a; }
.mg-stat:nth-child(4n+1) { background: #befabe; }
.mg-stat:nth-child(4n+2) { background: #c8e1fa; }
.mg-stat:nth-child(4n+3) { background: #fff1b8; }
.mg-stat:nth-child(4n+4) { background: #ffd6c2; }
.mg-stat__num {
  display: block; font-family: 'Sabbir Sorolota', 'Hind Siliguri', sans-serif;
  font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.6rem); color: #090a0a; line-height: 1.15;
}
.mg-stat__label { display: block; font-size: .92rem; font-weight: 600; color: #1f2421; margin-top: .3rem; line-height: 1.4; }

/* ---------- process steps (horizontal rail, mobile 2-col) ---------- */
.mg-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
  position: relative; counter-reset: mgstep; max-width: 1180px; margin: 0 auto;
}
.mg-steps--3 { grid-template-columns: repeat(3, 1fr); }
.mg-steps--5 { grid-template-columns: repeat(5, 1fr); }
.mg-step {
  background: #fff; border: 1px solid #090a0a; border-radius: 1.25rem;
  box-shadow: 4px 4px 0 0 #090a0a; padding: 1.4rem 1.2rem; position: relative;
  transition: box-shadow .2s cubic-bezier(.25,.46,.45,.94);
}
.mg-step:hover { box-shadow: 7px 7px 0 0 #090a0a; }
.mg-step__num {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #090a0a; color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 1.05rem;
  font-family: 'Sabbir Sorolota', 'Hind Siliguri', sans-serif; margin-bottom: .8rem;
  border: 1.5px solid #090a0a; box-shadow: 2px 2px 0 0 #befabe;
}
.mg-step__icon { width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: #befabe;
  border: 1px solid #090a0a; box-shadow: 2px 2px 0 0 #090a0a; display: grid; place-items: center; margin-bottom: .8rem; }
.mg-step__icon svg { width: 1.3rem; height: 1.3rem; color: #090a0a; }
.mg-step__title { font-weight: 700; color: #090a0a; font-size: 1.02rem; margin: 0 0 .35rem; line-height: 1.35; }
.mg-step__desc { color: #3e4042; font-size: .9rem; line-height: 1.55; margin: 0; }

/* connector rail (SVG line drawn by data-mg-draw) */
.mg-steps__rail { position: absolute; top: 2.6rem; left: 4%; right: 4%; height: 3px; z-index: -1; pointer-events: none; }
.mg-steps__rail svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* ---------- progress bars / skill bars ---------- */
.mg-bar {
  background: #fff; border: 1.5px solid #090a0a; border-radius: 99px;
  height: 1.05rem; overflow: hidden; position: relative;
}
.mg-bar + .mg-bar { margin-top: .9rem; }
[data-mg-bar-fill] {
  position: absolute; inset: 0; border-radius: 99px; background: #befabe;
  transform-origin: 0 50%; border-right: 1.5px solid #090a0a;
}
.mg-bar--blue [data-mg-bar-fill] { background: #c8e1fa; }
.mg-bar--purple [data-mg-bar-fill] { background: #f0d1ff; }
.mg-bar--orange [data-mg-bar-fill] { background: #ffd6c2; }
.mg-bar--yellow [data-mg-bar-fill] { background: #fff1b8; }
.mg-bar-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .35rem; }
.mg-bar-row__label { font-weight: 600; color: #090a0a; font-size: .95rem; }
.mg-bar-row__val { font-family: 'Sabbir Sorolota', 'Hind Siliguri', sans-serif; font-weight: 700; color: #090a0a; }

/* ============================================================
   LAYOUT SAFETY — CSS grid/flex "min-content blowout" guard
   A grid/flex item defaults to min-width:auto, so a wide max-content
   descendant (marquee track, nowrap chip row, wide SVG) can force the
   whole 1fr column past the viewport → horizontal page overflow.
   min-width:0 on every layout item lets it shrink & clip instead.
   ============================================================ */
.sp-content, .sp-grid, .sp-grid > *, .sp-main, .sp-sidebar,
.mg-section, .mg-section__inner,
.mg-compare, .mg-compare > *, .mg-statband, .mg-statband > *,
.mg-steps, .mg-steps > *, .mg-checks, .mg-checks > *,
.mg-window, .mg-window__body, .mg-phone, .mg-phone__screen {
  min-width: 0;
}
/* never let any added motion section create a horizontal scrollbar */
.mg-section, .mg-section__inner { max-width: 100%; overflow-x: clip; }
/* service-page main content: clip stray horizontal overflow (sticky-safe; these
   pages have no position:sticky). Kills phantom mobile scroll from grid rounding. */
.sp-content { overflow-x: clip; }
/* breadcrumb trail must never force the page wider than the viewport */
.sp-breadcrumb { max-width: 100%; }
.sp-breadcrumb__inner { flex-wrap: wrap; }
/* FINAL NET: only service pages (they contain .sp-content) clip the body's
   horizontal axis. index.html has no .sp-content so its sticky product stack
   is untouched. overflow-x:clip does not create a scroll container → sticky-safe. */
body:has(.sp-content) { overflow-x: clip; }

/* ---------- marquee ---------- */
/* width:100% + max-width:100% + min-width:0 keep the container from shrink-wrapping
   to its (very wide) track content inside flex/grid/inline parents — otherwise the
   clone loop below can blow the container up to millions of px and break the page. */
.mg-marquee, [data-mg-marquee] {
  overflow: hidden; position: relative;
  display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
}
.mg-marquee__track {
  display: flex; align-items: center; gap: 1rem; width: max-content; max-width: none;
  padding: .9rem .5rem; will-change: transform;
}
.mg-chip {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  background: #fff; border: 1px solid #090a0a; border-radius: 99px;
  box-shadow: 2px 2px 0 0 #090a0a; padding: .5rem 1.1rem;
  font-weight: 600; font-size: .9rem; color: #090a0a;
}
.mg-chip svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; color: #090a0a; }
.mg-chip:nth-child(5n+1) { background: #befabe; }
.mg-chip:nth-child(5n+2) { background: #c8e1fa; }
.mg-chip:nth-child(5n+3) { background: #fff1b8; }
.mg-chip:nth-child(5n+4) { background: #f0d1ff; }
.mg-chip:nth-child(5n+5) { background: #ffd6c2; }
/* black ticker variant */
.mg-marquee--dark { background: #090a0a; border-top: 1.5px solid #090a0a; border-bottom: 1.5px solid #090a0a; }
.mg-marquee--dark .mg-chip { background: #090a0a; border-color: #ffffff44; box-shadow: none; color: #fff; }
.mg-marquee--dark .mg-chip svg { color: #befabe; }

/* ---------- before / after comparison ---------- */
.mg-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch; min-width: 0; }
.mg-compare__panel {
  border: 1px solid #090a0a; border-radius: 1.25rem; box-shadow: 4px 4px 0 0 #090a0a;
  padding: 1.5rem 1.4rem; background: #fff; min-width: 0; box-sizing: border-box; overflow-wrap: anywhere;
}
.mg-compare__list, .mg-compare__list li { min-width: 0; }
.mg-compare__list li { overflow-wrap: anywhere; }
.mg-compare__panel--before { background: #ffd6c2; }
.mg-compare__panel--after { background: #befabe; }
.mg-compare__tag {
  display: inline-block; background: #090a0a; color: #fff; border-radius: 99px;
  padding: .28rem .95rem; font-size: .8rem; font-weight: 700; margin-bottom: .9rem;
}
.mg-compare__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.mg-compare__list li { display: flex; align-items: flex-start; gap: .55rem; color: #090a0a; font-size: .95rem; line-height: 1.5; }
.mg-compare__list li svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; margin-top: .18em; }

/* ---------- checklist grid (animated) ---------- */
.mg-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem 1.25rem; }
.mg-check {
  display: flex; align-items: flex-start; gap: .6rem; background: #fff;
  border: 1px solid #090a0a; border-radius: .9rem; box-shadow: 2px 2px 0 0 #090a0a;
  padding: .75rem .95rem; color: #090a0a; font-weight: 500; font-size: .95rem; line-height: 1.5;
}
.mg-check svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; margin-top: .14em; color: #090a0a; }

/* ---------- typing caret ---------- */
.mg-caret {
  display: inline-block; width: 2px; height: 1em; background: #090a0a;
  vertical-align: -0.12em; margin-left: 2px; animation: mg-caret-blink .85s steps(1) infinite;
}
@keyframes mg-caret-blink { 50% { opacity: 0; } }

/* ---------- decorative drift shapes (flat stickers, engine floats them) ---------- */
.mg-drift { position: absolute; pointer-events: none; z-index: 0; }
.mg-drift svg { width: 100%; height: 100%; }

/* ---------- dot-grid background (static, cheap) ---------- */
.mg-dots-bg {
  background-image: radial-gradient(#090a0a22 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}

/* ---------- section rhythm helpers ---------- */
.mg-section { padding: clamp(2.75rem, 6vw, 4.5rem) 1.25rem; }
.mg-section--tight { padding: clamp(1.75rem, 4vw, 2.75rem) 1.25rem; }
.mg-section__inner { max-width: 1180px; margin: 0 auto; }

/* ---------- pinned scroll-story stage ---------- */
.mg-pin-vh { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }

/* ---------- big statement (scrub words) ---------- */
.mg-statement {
  font-size: clamp(1.5rem, 3.6vw, 2.7rem); font-weight: 700; color: #090a0a;
  line-height: 1.45; max-width: 980px; margin: 0 auto; text-align: center;
}

/* ---------- number badge sticker ---------- */
.mg-numbadge {
  display: inline-grid; place-items: center; min-width: 3.2rem; height: 3.2rem;
  padding: 0 .8rem; background: #fff1b8; border: 1.5px solid #090a0a; border-radius: 99px;
  box-shadow: 3px 3px 0 0 #090a0a; font-family: 'Sabbir Sorolota', 'Hind Siliguri', sans-serif;
  font-weight: 800; font-size: 1.25rem; color: #090a0a;
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .mg-statband { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .mg-steps, .mg-steps--5 { grid-template-columns: repeat(2, 1fr); }
  .mg-steps__rail { display: none; }
  .mg-compare { grid-template-columns: 1fr 1fr; gap: 1rem; }
}
@media (max-width: 700px) {
  .mg-compare { grid-template-columns: 1fr; }
  .mg-checks { grid-template-columns: repeat(2, 1fr); gap: .6rem .7rem; }
  .mg-check { font-size: .85rem; padding: .6rem .7rem; }
  .mg-stat__num { font-size: 1.55rem; }
}
@media (max-width: 560px) {
  .mg-statband { grid-template-columns: repeat(2, 1fr); }
  .mg-steps, .mg-steps--3, .mg-steps--5 { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .mg-step { padding: 1rem .85rem; }
}

/* ============================================================
   NAVBAR service-tile ICONS — meaningful, continuously-looping mini
   motion graphics (pure CSS keyframes → run even inside the hover
   dropdown, never depend on JS/ScrollTrigger, never stop). Transparent.
   ============================================================ */
.ls-navtile svg [class^="ni-"] { transform-box: fill-box; transform-origin: center; }
@keyframes ni-blink { 0%,42%,58%,100% { opacity: 1; } 50% { opacity: .12; } }
@keyframes ni-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.22); opacity: .55; } }
@keyframes ni-bob   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes ni-grow  { 0%,100% { transform: scaleY(.55); } 50% { transform: scaleY(1); } }
@keyframes ni-spin  { to { transform: rotate(360deg); } }
@keyframes ni-flow  { to { stroke-dashoffset: -16; } }
@keyframes ni-scan  { 0%,100% { transform: translateY(-2.5px); } 50% { transform: translateY(3px); } }
@keyframes ni-type  { 0%,100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
.ls-navtile svg .ni-blink  { animation: ni-blink 2.4s ease-in-out infinite; }
.ls-navtile svg .ni-blink2 { animation: ni-blink 2.4s ease-in-out .3s infinite; }
.ls-navtile svg .ni-pulse  { animation: ni-pulse 2.1s ease-in-out infinite; }
.ls-navtile svg .ni-bob    { animation: ni-bob 2.2s ease-in-out infinite; }
.ls-navtile svg .ni-grow   { transform-origin: center bottom; animation: ni-grow 1.8s ease-in-out infinite; }
.ls-navtile svg .ni-grow2  { transform-origin: center bottom; animation: ni-grow 1.8s ease-in-out .3s infinite; }
.ls-navtile svg .ni-grow3  { transform-origin: center bottom; animation: ni-grow 1.8s ease-in-out .6s infinite; }
.ls-navtile svg .ni-spin   { animation: ni-spin 5.5s linear infinite; }
.ls-navtile svg .ni-flow   { stroke-dasharray: 4 4; animation: ni-flow 1.1s linear infinite; }
.ls-navtile svg .ni-scan   { animation: ni-scan 2.6s ease-in-out infinite; }
.ls-navtile svg .ni-type   { animation: ni-type 1.6s steps(2,end) infinite; }
.ls-navtile svg .ni-d1 { animation-delay: 0s; } .ls-navtile svg .ni-d2 { animation-delay: .4s; }
.ls-navtile svg .ni-d3 { animation-delay: .8s; } .ls-navtile svg .ni-d4 { animation-delay: 1.2s; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .mg-caret { animation: none; }
  .mg-marquee__track { transform: none !important; }
  .ls-navtile svg [class^="ni-"] { animation: none !important; }
}

/* ============================================================
   BLACK-MODE re-skin of the neo-brutalist sticker system.
   Maps the light sticker palette (white cards · #090a0a ink · hard
   black offset shadow · pastel fills) onto the unified dark slate
   ramp so it reads as one cohesive dark theme — no bright islands.
   Stages/mockups (.mg-scene-frame · .mg-window · .mg-phone) stay
   light ON PURPOSE: they frame black-line SVG art / represent real
   device screens and must keep a white stage.
   Slate ramp: frame #0A0B10 · card #1B1D26 · line #4A5060 · offset
   #363B46 · ink var(--color-text-*).
   ============================================================ */

/* --- BUG FIX (dark + hacker): text/dots that sat on the transparent body
       used near-black #090a0a → invisible on the dark page. Token-drive it. --- */
[data-theme="dark"]  .mg-statement,   [data-theme="hacker"] .mg-statement,
[data-theme="dark"]  .mg-bar-row__label, [data-theme="hacker"] .mg-bar-row__label,
[data-theme="dark"]  .mg-bar-row__val,   [data-theme="hacker"] .mg-bar-row__val,
[data-theme="dark"]  .mg-caret,       [data-theme="hacker"] .mg-caret {
  color: var(--color-text-primary);
}
[data-theme="dark"]  .mg-caret,       [data-theme="hacker"] .mg-caret { background: var(--color-accent); }
[data-theme="dark"]  .mg-dots-bg,     [data-theme="hacker"] .mg-dots-bg {
  background-image: radial-gradient(rgba(255, 255, 255, .10) 1.5px, transparent 1.5px);
}

/* --- Content sticker cards → dark slate cards (DARK only; hacker handled later) --- */
[data-theme="dark"] .mg-stat,
[data-theme="dark"] .mg-step,
[data-theme="dark"] .mg-chip,
[data-theme="dark"] .mg-compare__panel,
[data-theme="dark"] .mg-check {
  background: #1B1D26;
  border-color: #4A5060;
  box-shadow: 4px 4px 0 0 #363B46;
  color: var(--color-text-primary);
}
[data-theme="dark"] .mg-stat:hover,
[data-theme="dark"] .mg-step:hover { box-shadow: 7px 7px 0 0 #363B46; }

/* neutralise the pastel FULL-CARD fills (kept the patchwork look "AI-generated"
   on dark); the palette survives as small accents below */
[data-theme="dark"] .mg-stat:nth-child(4n+1),
[data-theme="dark"] .mg-stat:nth-child(4n+2),
[data-theme="dark"] .mg-stat:nth-child(4n+3),
[data-theme="dark"] .mg-stat:nth-child(4n+4),
[data-theme="dark"] .mg-chip:nth-child(5n+1),
[data-theme="dark"] .mg-chip:nth-child(5n+2),
[data-theme="dark"] .mg-chip:nth-child(5n+3),
[data-theme="dark"] .mg-chip:nth-child(5n+4),
[data-theme="dark"] .mg-chip:nth-child(5n+5) { background: #1B1D26; }
[data-theme="dark"] .mg-compare__panel--before,
[data-theme="dark"] .mg-compare__panel--after { background: #1B1D26; }

/* card text ramp */
[data-theme="dark"] .mg-stat__num,
[data-theme="dark"] .mg-step__title,
[data-theme="dark"] .mg-chip,
[data-theme="dark"] .mg-check,
[data-theme="dark"] .mg-compare__list li,
[data-theme="dark"] .mg-numbadge { color: var(--color-text-primary); }
[data-theme="dark"] .mg-stat__label,
[data-theme="dark"] .mg-step__desc,
[data-theme="dark"] .mg-window__url { color: var(--color-text-secondary); }
[data-theme="dark"] .mg-chip svg,
[data-theme="dark"] .mg-check svg { color: var(--color-text-primary); }

/* accent elements keep the electric-blue pop */
[data-theme="dark"] .mg-step__num {
  background: var(--color-accent); border-color: var(--color-accent);
  color: #fff; box-shadow: 2px 2px 0 0 #363B46;
}
[data-theme="dark"] .mg-step__icon {
  background: rgba(10, 132, 255, .14); border-color: #4A5060; box-shadow: 2px 2px 0 0 #363B46;
}
[data-theme="dark"] .mg-step__icon svg { color: var(--color-accent); }
[data-theme="dark"] .mg-numbadge {
  background: rgba(10, 132, 255, .14); border-color: #4A5060;
  box-shadow: 3px 3px 0 0 #363B46; color: var(--color-text-primary);
}
[data-theme="dark"] .mg-compare__tag { background: var(--color-accent); color: #fff; }
[data-theme="dark"] .mg-compare__panel--before .mg-compare__tag { background: var(--color-destructive); }
[data-theme="dark"] .mg-compare__panel--after  .mg-compare__tag { background: var(--color-success); color: #0B0B0F; }

/* progress bars → dark track, pastel fills read fine as data colours on dark */
[data-theme="dark"] .mg-bar { background: #0A0B10; border-color: #4A5060; }
[data-theme="dark"] [data-mg-bar-fill] { border-right-color: #4A5060; }

/* ── HACKER (Matrix) — same re-skin, phosphor-green slate.
     Invisible-text fixes (.mg-statement / bar labels / dots) already cover
     hacker above. White stages (.mg-scene-frame/.mg-window/.mg-phone) stay
     light on purpose. ── */
[data-theme="hacker"] .mg-stat,
[data-theme="hacker"] .mg-step,
[data-theme="hacker"] .mg-chip,
[data-theme="hacker"] .mg-compare__panel,
[data-theme="hacker"] .mg-check {
  background: #0C140C;
  border-color: rgba(0, 255, 65, .30);
  box-shadow: 4px 4px 0 0 rgba(0, 255, 65, .18);
  color: #C6FFD4;
}
[data-theme="hacker"] .mg-stat:hover,
[data-theme="hacker"] .mg-step:hover { box-shadow: 7px 7px 0 0 rgba(0, 255, 65, .18); }
[data-theme="hacker"] .mg-stat:nth-child(4n+1),
[data-theme="hacker"] .mg-stat:nth-child(4n+2),
[data-theme="hacker"] .mg-stat:nth-child(4n+3),
[data-theme="hacker"] .mg-stat:nth-child(4n+4),
[data-theme="hacker"] .mg-chip:nth-child(5n+1),
[data-theme="hacker"] .mg-chip:nth-child(5n+2),
[data-theme="hacker"] .mg-chip:nth-child(5n+3),
[data-theme="hacker"] .mg-chip:nth-child(5n+4),
[data-theme="hacker"] .mg-chip:nth-child(5n+5) { background: #0C140C; }
[data-theme="hacker"] .mg-compare__panel--before,
[data-theme="hacker"] .mg-compare__panel--after { background: #0C140C; }
[data-theme="hacker"] .mg-stat__num,
[data-theme="hacker"] .mg-step__title,
[data-theme="hacker"] .mg-chip,
[data-theme="hacker"] .mg-check,
[data-theme="hacker"] .mg-compare__list li,
[data-theme="hacker"] .mg-numbadge { color: #C6FFD4; }
[data-theme="hacker"] .mg-stat__label,
[data-theme="hacker"] .mg-step__desc,
[data-theme="hacker"] .mg-window__url { color: #6FCF88; }
[data-theme="hacker"] .mg-chip svg,
[data-theme="hacker"] .mg-check svg { color: #00FF41; }
[data-theme="hacker"] .mg-step__num {
  background: #00FF41; border-color: #00FF41; color: #04120A; box-shadow: 2px 2px 0 0 rgba(0, 255, 65, .25);
}
[data-theme="hacker"] .mg-step__icon {
  background: rgba(0, 255, 65, .12); border-color: rgba(0, 255, 65, .30); box-shadow: 2px 2px 0 0 rgba(0, 255, 65, .18);
}
[data-theme="hacker"] .mg-step__icon svg { color: #00FF41; }
[data-theme="hacker"] .mg-numbadge {
  background: rgba(0, 255, 65, .12); border-color: rgba(0, 255, 65, .30);
  box-shadow: 3px 3px 0 0 rgba(0, 255, 65, .18); color: #C6FFD4;
}
[data-theme="hacker"] .mg-compare__tag { background: #00FF41; color: #04120A; }
[data-theme="hacker"] .mg-bar { background: #050A05; border-color: rgba(0, 255, 65, .30); }
[data-theme="hacker"] [data-mg-bar-fill] { border-right-color: rgba(0, 255, 65, .30); }

/* ============================================================
   PRE-BOOT / NO-JS ambient loops (CSS compositor keyframes).
   mg-engine.js now drives [data-mg-loop] with GSAP on EVERY device,
   phones included — same amp, same durations, same phase offsets as
   desktop. These CSS keyframes are only the safety net: they animate
   in the window before GSAP boots, and stay on forever if GSAP never
   loads at all (CDN blocked / JS error). The moment the engine boots it
   puts `.mg-live` on <html> and this block switches off, so CSS and
   GSAP can never animate the same element at the same time (a CSS
   animation outranks GSAP's inline transform and would fight it).
   NOTE: no width cap — the fallback is just as useful on desktop.
   ============================================================ */
@keyframes mgm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes mgm-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes mgm-blink { 0%, 100% { opacity: 1; } 50% { opacity: .22; } }
@keyframes mgm-spin  { to { transform: rotate(360deg); } }
@keyframes mgm-flow  { to { stroke-dashoffset: -64; } }
html:not(.mg-live) [data-mg-loop] { transform-box: fill-box; transform-origin: center; }
html:not(.mg-live) [data-mg-loop="float"] { animation: mgm-float 3s   ease-in-out infinite; }
html:not(.mg-live) [data-mg-loop="pulse"] { animation: mgm-pulse 1.7s ease-in-out infinite; }
html:not(.mg-live) [data-mg-loop="blink"] { animation: mgm-blink 1.4s ease-in-out infinite; }
html:not(.mg-live) [data-mg-loop="dots"]  { animation: mgm-blink 1.2s ease-in-out infinite; }
html:not(.mg-live) [data-mg-loop="spin"]  { animation: mgm-spin  7s   linear      infinite; }
html:not(.mg-live) [data-mg-loop="flow"]  { stroke-dasharray: 6 8; animation: mgm-flow 1.3s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  [data-mg-loop] { animation: none !important; }
}