/* ==========================================================================
   MT Task Management Themes – task-management-themes.css
   Realm overrides for .realm--glitch and .realm--arcade.
   Only colour values change — layout, spacing and structure stay identical.
   ========================================================================== */


/* ████████████████████████████████████████████████████████████████████████████
   GLITCH THEME
   ████████████████████████████████████████████████████████████████████████████ */

/* ── Page wrapper ─────────────────────────────────────────────────────────── */
.realm--glitch .tm-wrapper {
    background: #040512;
    color: #fff;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.realm--glitch .tm-hero {
    background: none;
}

.realm--glitch .tm-hero__bg-img {
    background-image: url('../images/task-management/realm-page-bg.png');
}

.realm--glitch .tm-hero__grid-bg {
    background-image:
        linear-gradient(rgba(113,57,209,0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(113,57,209,0.12) 1px, transparent 1px);
}

.realm--glitch .tm-hero__heading { color: #fff; }
.realm--glitch .tm-hero__subtext { color: #fff; }

/* ── Core Capabilities ────────────────────────────────────────────────────── */
.realm--glitch .tm-capabilities__eyebrow { color: #fff; }
.realm--glitch .tm-cap-card--pink {
    border-radius: 1.62013rem;
    background:
        linear-gradient(180deg, rgba(247, 69, 4, 0.17) 0%, rgba(247, 89, 4, 0.12) 50.5%, rgba(247, 28, 4, 0.00) 98.24%),
        linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 69.03%);
}
.realm--glitch .tm-cap-card--blue {
    border-radius: 1.91469rem;
    background:
        linear-gradient(180deg, rgba(16, 90, 255, 0.27) 0%, rgba(84, 137, 254, 0.19) 50.5%, rgba(84, 137, 254, 0.00) 98.24%),
        linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 69.03%);
}
.realm--glitch .tm-cap-card--purple {
    border-radius: 1.84106rem;
    background:
        linear-gradient(180deg, #C7B9FF 0%, rgba(199, 185, 255, 0.72) 50.5%, rgba(199, 185, 255, 0.00) 98.24%),
        linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 69.03%);
}
.realm--glitch .tm-cap-card--yellow {
    border-radius: 1.76744rem;
    background:
        linear-gradient(180deg, rgba(247, 165, 4, 0.17) 0%, rgba(247, 165, 4, 0.12) 50.5%, rgba(247, 165, 4, 0.00) 98.24%),
        linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 69.03%);
}
.realm--glitch .tm-cap-card__body { color: #fff; }
.realm--glitch .tm-cap-card__title { color: #fff; }
.realm--glitch .tm-cap-card__desc  { color: #fff; }

/* ── Pillars ──────────────────────────────────────────────────────────────── */
.realm--glitch .tm-pillars {
    background: #040512;
    border-color: rgba(113,57,209,0.2);
}

.realm--glitch .tm-pillars__item { color: #fff; }

/* ── Team Flow ────────────────────────────────────────────────────────────── */
.realm--glitch .tm-team-flow { background: #080618; }

.realm--glitch .tm-team-flow__heading { color: #fff; }

.realm--glitch .tm-team-flow__item-title { color: #fff; }

.realm--glitch .tm-team-flow__item-desc { color: #fff; }

.realm--glitch .tm-team-flow__screen-wrap { background: #1a0a2e; }

/* ── Execution divider ────────────────────────────────────────────────────── */
.realm--glitch .tm-exec-divider__heading { color: #7139D1; }

/* ── Alternating features ─────────────────────────────────────────────────── */
.realm--glitch .tm-features { background: #040512; }

.realm--glitch .tm-feat-row { border-color: rgba(113,57,209,0.15); }

.realm--glitch .tm-feat-row__title { color: #fff; }

.realm--glitch .tm-feat-row__desc { color: #fff; }

.realm--glitch .tm-feat-row__visual { background: #1a0a2e; }

/* ── Built Different ──────────────────────────────────────────────────────── */
.realm--glitch .tm-built-diff {
    background: linear-gradient(135deg, #040512 0%, #150838 50%, #040512 100%);
}

/* ── How ──────────────────────────────────────────────────────────────────── */
.realm--glitch .tm-how { background: #040512; }

.realm--glitch .tm-how-step { border-color: rgba(113,57,209,0.2); }

.realm--glitch .tm-how-step__btn { color: #fff; }

.realm--glitch .tm-how-step.active .tm-how-step__btn { color: #7139D1; }

.realm--glitch .tm-how-step__body p { color: #fff; }

.realm--glitch .tm-how__screen-wrap { background: #1a0a2e; }

/* ── Comparison ───────────────────────────────────────────────────────────── */
.realm--glitch .tm-comparison { }

.realm--glitch .tm-comparison__table {
    border-radius: 1.5625rem;
    border: 3px solid #C3ACF2;
    background: #2F1856;
}

.realm--glitch .tm-comparison__col--left { border-color: rgba(113,57,209,0.2); }

.realm--glitch .tm-comparison__col-heading { color: #fff; }
.realm--glitch .tm-comparison__col--right .tm-comparison__col-heading { color: #7139D1; }

.realm--glitch .tm-comparison__item { color: #fff; }

.realm--glitch .tm-comparison__item--good .tm-comparison__icon,
.realm--arcade .tm-comparison__item--good .tm-comparison__icon {
    background-image: url('../images/productivity/process-center-icon-page2.png');
}

/* ── Feature Grid ─────────────────────────────────────────────────────────── */
.realm--glitch .tm-feature-grid { background: #040512; }

.realm--glitch .tm-feature-grid .tm-eyebrow { color: #fff; }

.realm--glitch .tm-feature-grid__heading { color: #7139D1; }

.realm--glitch .tm-fg-card {
    border-radius: 1.5625rem;
    border: 3px solid rgba(241, 241, 241, 0.24);
    background: linear-gradient(180deg, #1F054B 0%, #1B063E 100%);
}

.realm--glitch .tm-fg-card__img-placeholder { background: rgba(113,57,209,0.12); }

.realm--glitch .tm-fg-card__title { color: #7139D1; }

.realm--glitch .tm-fg-card__desc { color: #fff; }

/* ── Works For ────────────────────────────────────────────────────────────── */
.realm--glitch .tm-works-for { background: #080618; }

.realm--glitch .tm-wf-eyebrow { color: #fff; }

.realm--glitch .tm-works-for__heading { color: #7139D1; }

.realm--glitch .tm-wf-tab {
    border-radius: 1.25rem;
    background: rgba(102, 105, 254, 0.06);
}

.realm--glitch .tm-wf-tab.active {
    border-radius: 1.75rem;
    background: #0C031C;
}

.realm--glitch .tm-wf-tab__bar { background: #7139D1; }


.realm--glitch .tm-wf-tab__label { color: #fff; }

.realm--glitch .tm-wf-tab.active .tm-wf-tab__label { color: #7139D1; }

.realm--glitch .tm-wf-tab__desc { color: #fff; }


/* ── CTA ──────────────────────────────────────────────────────────────────── */
.realm--glitch .tm-cta { background: #040512; }

.realm--glitch .tm-cta__glow-left {
    width: 51.60475rem;
    height: 51.60475rem;
    background: rgba(113, 57, 209, 0.40);
    opacity: 0.18;
}

.realm--glitch .tm-cta__pill {
    background: linear-gradient(180deg, rgba(113, 57, 209, 0.11) 0%, rgba(187, 147, 255, 0.11) 100%);
    box-shadow: 0 -6.163px 24.651px 0 rgba(255, 255, 255, 0.16) inset;
}

.realm--glitch .tm-cta__heading { color: #fff; }


/* ████████████████████████████████████████████████████████████████████████████
   ARCADE THEME
   ████████████████████████████████████████████████████████████████████████████ */

/* ── Page wrapper ─────────────────────────────────────────────────────────── */
.realm--arcade .tm-wrapper {
    background: #1B1C48;
    color: #fff;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.realm--arcade .tm-hero {
    background: #1B1C48;
}

.realm--arcade .tm-hero__bg-img {
    background-image: url('../images/task-management/Frame 2147237506.png');
}

.realm--arcade .tm-hero__grid-bg {
    background-image:
        linear-gradient(rgba(155,127,247,0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(155,127,247,0.1) 1px, transparent 1px);
}

.realm--arcade .tm-hero__heading { color: #fff; }
.realm--arcade .tm-hero__heading-accent { color: #7139D1; }
.realm--arcade .tm-hero__subtext { color: #fff; }

/* ── Core Capabilities ────────────────────────────────────────────────────── */
.realm--arcade .tm-capabilities__eyebrow { color: #fff; }
.realm--arcade .tm-cap-card__body        { color: #fff; }
.realm--arcade .tm-cap-card__title       { color: #fff; }
.realm--arcade .tm-cap-card__desc        { color: #fff; }

.realm--arcade .tm-cap-card--pink {
    border-radius: 1.62013rem;
    background:
        linear-gradient(180deg, rgba(247, 69, 4, 0.17) 0%, rgba(247, 89, 4, 0.12) 50.5%, rgba(247, 28, 4, 0.00) 98.24%),
        linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 69.03%);
}
.realm--arcade .tm-cap-card--blue {
    border-radius: 1.91469rem;
    background:
        linear-gradient(180deg, rgba(16, 90, 255, 0.27) 0%, rgba(84, 137, 254, 0.19) 50.5%, rgba(84, 137, 254, 0.00) 98.24%),
        linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 69.03%);
}
.realm--arcade .tm-cap-card--purple {
    border-radius: 1.84106rem;
    background:
        linear-gradient(180deg, #C7B9FF 0%, rgba(199, 185, 255, 0.72) 50.5%, rgba(199, 185, 255, 0.00) 98.24%),
        linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 69.03%);
}
.realm--arcade .tm-cap-card--yellow {
    border-radius: 1.76744rem;
    background:
        linear-gradient(180deg, rgba(247, 165, 4, 0.17) 0%, rgba(247, 165, 4, 0.12) 50.5%, rgba(247, 165, 4, 0.00) 98.24%),
        linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 69.03%);
}

/* ── Pillars ──────────────────────────────────────────────────────────────── */
.realm--arcade .tm-pillars {
    background: #1B1C48;
    border-color: rgba(155,127,247,0.15);
}

.realm--arcade .tm-pillars__item { color: #fff; }

/* ── Team Flow ────────────────────────────────────────────────────────────── */
.realm--arcade .tm-team-flow { background: #1B1C48; }

.realm--arcade .tm-team-flow__heading { color: #fff; }

.realm--arcade .tm-team-flow__item-title { color: #fff; }

.realm--arcade .tm-team-flow__item-desc { color: #fff; }

.realm--arcade .tm-team-flow__screen-wrap { background: #1e0d38; }

/* ── Execution divider ────────────────────────────────────────────────────── */
.realm--arcade .tm-exec-divider__heading { color: #7139D1; }
.realm--arcade .tm-text-accent { color: #7139D1; }

/* ── Alternating features ─────────────────────────────────────────────────── */
.realm--arcade .tm-features { background: #1B1C48; }

.realm--arcade .tm-feat-row { border-color: rgba(155,127,247,0.12); }

.realm--arcade .tm-feat-row__title { color: #fff; }

.realm--arcade .tm-feat-row__desc { color: #fff; }

.realm--arcade .tm-feat-row__visual { background: #1e0d38; }

/* ── Built Different ──────────────────────────────────────────────────────── */
.realm--arcade .tm-built-diff {
    background: #1B1C48;
}

/* ── How ──────────────────────────────────────────────────────────────────── */
.realm--arcade .tm-how { background: #1B1C48; }

.realm--arcade .tm-how-step { border-color: rgba(155,127,247,0.15); }

.realm--arcade .tm-how-step__btn { color: #fff; }

.realm--arcade .tm-how-step.active .tm-how-step__btn { color: #7139D1; }

.realm--arcade .tm-how-step__body p { color: #fff; }

.realm--arcade .tm-how__screen-wrap { background: #1e0d38; }

/* ── Comparison ───────────────────────────────────────────────────────────── */
.realm--arcade .tm-comparison { }

.realm--arcade .tm-comparison__table {
    border-radius: 1.5625rem;
    border: 3px solid #C3ACF2;
    background: #2F1856;
}

.realm--arcade .tm-comparison__col--left { border-color: rgba(155,127,247,0.15); }

.realm--arcade .tm-comparison__col-heading { color: #fff; }
.realm--arcade .tm-comparison__col--right .tm-comparison__col-heading { color: #7139D1; }

.realm--arcade .tm-comparison__item { color: #fff; }

/* ── Feature Grid ─────────────────────────────────────────────────────────── */
.realm--arcade .tm-feature-grid { background: #1B1C48; }

.realm--arcade .tm-feature-grid .tm-eyebrow { color: #fff; }

.realm--arcade .tm-feature-grid__heading { color: #7139D1; }

.realm--arcade .tm-fg-card {
    border-radius: 1.5625rem;
    border: 3px solid rgba(241, 241, 241, 0.24);
    background: linear-gradient(180deg, #1F054B 0%, #1B063E 100%);
}

.realm--arcade .tm-fg-card__title { color: #7139D1; }

.realm--arcade .tm-fg-card__img-placeholder { background: rgba(155,127,247,0.1); }

.realm--arcade .tm-fg-card__desc { color: #fff; }

/* ── Works For ────────────────────────────────────────────────────────────── */
.realm--arcade .tm-works-for { background: #1B1C48; }

.realm--arcade .tm-wf-eyebrow { color: #fff; }

.realm--arcade .tm-works-for__heading { color: #7139D1; }

.realm--arcade .tm-wf-tab {
    border-radius: 1.25rem;
    background: rgba(102, 105, 254, 0.06);
}

.realm--arcade .tm-wf-tab.active {
    border-radius: 1.75rem;
    background: #0C031C;
}

.realm--arcade .tm-wf-tab__bar { background: #7139D1; }


.realm--arcade .tm-wf-tab__label { color: #fff; }

.realm--arcade .tm-wf-tab.active .tm-wf-tab__label { color: #7139D1; }

.realm--arcade .tm-wf-tab__desc { color: #fff; }


/* ── CTA ──────────────────────────────────────────────────────────────────── */
.realm--arcade .tm-cta { background: #1B1C48; }

.realm--arcade .tm-cta__pill {
    background: linear-gradient(180deg, rgba(113, 57, 209, 0.11) 0%, rgba(187, 147, 255, 0.11) 100%);
    box-shadow: 0 -6.163px 24.651px 0 rgba(255, 255, 255, 0.3);
}

.realm--arcade .tm-cta__heading { color: #fff; }