/* ============================================================
   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); }