/* WEB SOLUTIONS MATRIX — "Maya Jaal" (prefix: wjx-). Loaded only by websolutions.html.
   Palette on theme: navy #080A2B · magenta #B217BA · violet #7B2FF7 · blue #2A7BFF · cyan #43D2E0 · gold #F0A400 */
.wjx-hero, .wjx-matrix, .wjx-desc, .wjx-net, .wjx-truth, .wjx-portal {
    --ink: #17093c; --mute: rgba(255, 255, 255, .74); --gold: #f0a400; --cyan: #43d2e0;
    --mag: #b217ba; --blue: #2a7bff; --grad: linear-gradient(90deg, #b217ba, #2a7bff);
    position: relative; overflow: hidden; color: #fff;
}
.wjx-wrap { width: min(88%, 1280px); margin-inline: auto; position: relative; z-index: 1; }
.wjx-eyebrow { display: inline-block; font-size: .82rem; letter-spacing: .26em; text-transform: uppercase; color: var(--cyan); margin-bottom: 1rem; }
.wjx-head { text-align: center; margin-bottom: 3rem; }
.wjx-head h2, .wjx-portal h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.1; margin: 0 0 .8rem; }
.wjx-hero em, .wjx-head em, .wjx-portal em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wjx-head p { color: var(--mute); margin: 0; }

/* pills (blue / red-pill nod) */
.wjx-pill { display: inline-flex; align-items: center; gap: .7rem; padding: .85rem 1.6rem; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 600; border: 1px solid rgba(255, 255, 255, .3); transition: transform .3s, box-shadow .3s; }
.wjx-pill span { width: 22px; height: 10px; border-radius: 10px; background: var(--blue); box-shadow: 0 0 14px var(--blue); }
.wjx-pill--red { background: var(--grad); border-color: transparent; }
.wjx-pill--red span { background: #fff; box-shadow: 0 0 14px #fff; }
.wjx-pill:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(123, 47, 247, .45); }

/* 1 · hero */
.wjx-hero { background: linear-gradient(165deg, #26084f 0%, #080a2b 60%, #05061c 100%); padding: 7rem 0 6rem; min-height: 88vh; display: flex; align-items: center; }
.wjx-rain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .42; }
.wjx-hero__in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.wjx-crumb { font-size: .9rem; color: rgba(255, 255, 255, .5); margin: 0 0 1.4rem; }
.wjx-crumb a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.wjx-crumb i { margin: 0 .3rem; font-style: normal; } .wjx-crumb b { color: var(--cyan); font-weight: 500; }
.wjx-hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.7rem); line-height: 1.1; margin: 0 0 1.3rem; }
.wjx-lead { max-width: 52ch; font-size: 1.15rem; line-height: 1.7; color: var(--mute); margin: 0 0 2rem; }
.wjx-pills { display: flex; flex-wrap: wrap; gap: 1rem; }
/* Hero living weave — a responsive system map rather than a literal spider web */
.wjx-weave {
    width: min(100%, 600px);
    justify-self: center;
    position: relative;
    isolation: isolate;
    --weave-x: 0px;
    --weave-y: 0px;
}
.wjx-weave::before {
    content: "";
    position: absolute;
    inset: 12% 8%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, rgba(123,47,247,.28), rgba(67,210,224,.08) 46%, transparent 72%);
    filter: blur(24px);
    pointer-events: none;
    z-index: -1;
}
.wjx-weave__stage {
    position: relative;
    aspect-ratio: 1;
    width: 100%;
    transform: translate3d(var(--weave-x), var(--weave-y), 0);
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.wjx-weave__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wjx-weave__orbit { fill: none; stroke: rgba(255,255,255,.13); stroke-width: 1.2; stroke-dasharray: 3 14; transform-origin: 300px 300px; }
.wjx-weave__orbit--outer { animation: wjxWeaveOrbit 42s linear infinite; }
.wjx-weave__orbit--inner { stroke: rgba(67,210,224,.18); stroke-dasharray: 2 11; animation: wjxWeaveOrbit 30s linear infinite reverse; }
.wjx-weave__aura { fill: url(#wjxWeaveCore); stroke: rgba(255,255,255,.16); stroke-width: 1.2; opacity: .9; animation: wjxWeaveBreathe 4.8s ease-in-out infinite; transform-origin: 300px 300px; }
.wjx-weave__routes path {
    fill: none;
    stroke: url(#wjxWeaveLine);
    stroke-width: 1.6;
    stroke-linecap: round;
    opacity: .28;
    transition: opacity .35s ease, stroke-width .35s ease, filter .35s ease;
}
.wjx-weave__routes path::after { content: ""; }
.wjx-weave__routes path.is-active { opacity: 1; stroke-width: 3; filter: drop-shadow(0 0 8px rgba(123,47,247,.75)); }
.wjx-weave__sparks circle { fill: #fff; opacity: 0; filter: drop-shadow(0 0 7px #43d2e0); }
.wjx-weave__sparks circle.is-active { opacity: 1; }
.wjx-weave__core {
    position: absolute;
    left: 50%; top: 50%;
    width: 176px; min-height: 176px;
    transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    padding: 1.35rem;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 25%, rgba(67,210,224,.24), transparent 36%), linear-gradient(145deg, rgba(39,17,95,.97), rgba(9,11,47,.98));
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 22px 70px rgba(0,0,0,.38), inset 0 0 34px rgba(123,47,247,.18);
    z-index: 4;
}
.wjx-weave__core::before { content: ""; position: absolute; inset: -13px; border-radius: inherit; border: 1px solid rgba(123,47,247,.36); animation: wjxWeaveRing 3.4s ease-in-out infinite; }
.wjx-weave__core span { font-size: .62rem; text-transform: uppercase; letter-spacing: .18em; color: var(--cyan); margin-bottom: .35rem; }
.wjx-weave__core strong { font-size: 2rem; line-height: 1; letter-spacing: -.04em; margin-bottom: .5rem; background: linear-gradient(92deg, #b217ba, #7b2ff7 48%, #43d2e0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wjx-weave__core small { color: rgba(255,255,255,.66); font-size: .72rem; line-height: 1.45; max-width: 18ch; }
.wjx-weave__node {
    position: absolute;
    min-width: 138px;
    padding: .72rem .9rem;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(11,12,48,.78);
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    backdrop-filter: blur(12px);
    box-shadow: 0 14px 34px rgba(0,0,0,.22);
    transition: transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;
    z-index: 5;
}
.wjx-weave__node::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .48rem; vertical-align: .08em; background: var(--cyan); box-shadow: 0 0 13px var(--cyan); }
.wjx-weave__node span { font-weight: 700; font-size: .9rem; }
.wjx-weave__node small { display: block; padding-left: 1.28rem; margin-top: .16rem; color: rgba(255,255,255,.55); font-size: .68rem; white-space: nowrap; }
.wjx-weave__node.is-active,
.wjx-weave__node:hover,
.wjx-weave__node:focus-visible {
    transform: translateY(-4px) scale(1.025);
    border-color: rgba(67,210,224,.6);
    background: linear-gradient(135deg, rgba(123,47,247,.34), rgba(11,12,48,.94));
    box-shadow: 0 18px 46px rgba(33,16,90,.44), 0 0 0 1px rgba(67,210,224,.1);
}
.wjx-weave__node:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.wjx-weave__node--design { left: 5%; top: 13%; }
.wjx-weave__node--code { right: 4%; top: 13%; }
.wjx-weave__node--systems { right: -1%; top: 54%; }
.wjx-weave__node--care { right: 12%; bottom: 6%; }
.wjx-weave__node--data { left: 3%; bottom: 14%; }
.wjx-weave__caption { margin: -.2rem 0 0; display: flex; justify-content: center; align-items: center; gap: .55rem; color: rgba(255,255,255,.6); font-size: .76rem; letter-spacing: .03em; }
.wjx-weave__caption i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: wjxWeaveDot 1.8s ease-in-out infinite; }
@keyframes wjxSpin { to { transform: rotate(360deg); } }
@keyframes wjxWeaveOrbit { to { transform: rotate(360deg); } }
@keyframes wjxWeaveBreathe { 0%,100% { transform: scale(.96); opacity: .7; } 50% { transform: scale(1.05); opacity: 1; } }
@keyframes wjxWeaveRing { 0%,100% { transform: scale(.94); opacity: .2; } 50% { transform: scale(1.07); opacity: .75; } }
@keyframes wjxWeaveDot { 0%,100% { opacity: .4; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }

@media (max-width: 1120px) {
    .wjx-weave { width: min(100%, 540px); }
    .wjx-weave__node { min-width: 124px; }
}
@media (max-width: 1000px) {
    .wjx-weave { margin-top: 1rem; width: min(100%, 620px); }
}
@media (max-width: 620px) {
    .wjx-weave__node { min-width: 0; padding: .58rem .65rem; border-radius: 13px; }
    .wjx-weave__node span { font-size: .77rem; }
    .wjx-weave__node small { display: none; }
    .wjx-weave__node::before { width: 6px; height: 6px; margin-right: .35rem; }
    .wjx-weave__core { width: 138px; min-height: 138px; padding: 1rem; }
    .wjx-weave__core strong { font-size: 1.55rem; }
    .wjx-weave__core small { font-size: .62rem; }
    .wjx-weave__node--systems { right: 0; }
}

/* 2 · matrix (light band) */
.wjx-matrix { background: linear-gradient(180deg, #f6f1ff, #e9efff); color: var(--ink); padding: 7rem 0; }
.wjx-matrix .wjx-eyebrow { color: #7b2ff7; }
.wjx-m { display: grid; grid-template-columns: 220px minmax(280px, 460px) 1fr; gap: 2.4rem; align-items: center; }
.wjx-m__tabs { display: flex; flex-direction: column; gap: .7rem; }
.wjx-m__tabs button { text-align: left; padding: .9rem 1.1rem; border-radius: 16px; border: 1px solid rgba(81, 19, 150, .2); background: rgba(255, 255, 255, .7); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; transition: .3s; }
.wjx-m__tabs button[aria-selected="true"] { background: var(--grad); color: #fff; border-color: transparent; transform: translateX(8px); box-shadow: 0 12px 28px rgba(123, 47, 247, .3); }
.wjx-m__svg { width: 100%; height: auto; overflow: visible; }
.wjx-m__svg text { font-size: 11.5px; fill: var(--ink); font-weight: 600; }
.wjx-m__info h3 { font-size: 1.7rem; margin: 0 0 .6rem; }
.wjx-m__info p { line-height: 1.65; color: #4a3b66; margin: 0 0 1.2rem; }
.wjx-m__axes { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.wjx-m__axes li { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.wjx-pips { display: inline-flex; gap: 5px; } .wjx-pips i { width: 22px; height: 7px; border-radius: 7px; background: rgba(81, 19, 150, .15); transition: background .4s; } .wjx-pips i.on { background: var(--grad); }

/* 3 · maya -> satya */
.wjx-truth { background: radial-gradient(60% 50% at 80% 10%, rgba(178, 23, 186, .22), transparent 70%), linear-gradient(180deg, #14093c, #0a0b2e); padding: 7rem 0 8rem; }
.wjx-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.wjx-card { position: relative; min-height: 280px; padding: 0; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); color: #fff; font: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.wjx-card span { position: absolute; inset: 0; padding: 1.8rem 1.5rem; font-size: 1.25rem; line-height: 1.45; transition: opacity .6s, filter .6s, clip-path .7s, transform .6s; }
.wjx-card small { display: block; margin-bottom: 1rem; font-size: .75rem; letter-spacing: .24em; text-transform: uppercase; color: var(--cyan); }
.wjx-card__maya { filter: blur(0); clip-path: inset(0 0 0 0); }
.wjx-card__satya { opacity: 0; font-size: 1.08rem; color: #fff; background: linear-gradient(160deg, rgba(240, 164, 0, .22), rgba(123, 47, 247, .3)); transform: scale(1.04); }
.wjx-card__satya small { color: var(--gold); }
.wjx-card:hover .wjx-card__maya, .wjx-card:focus-visible .wjx-card__maya, .wjx-card.is-open .wjx-card__maya { opacity: 0; filter: blur(10px); clip-path: inset(0 0 100% 0); transform: translateY(-14px); }
.wjx-card:hover .wjx-card__satya, .wjx-card:focus-visible .wjx-card__satya, .wjx-card.is-open .wjx-card__satya { opacity: 1; transform: none; }
.wjx-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* 4 · portal (light band) */
.wjx-portal { background: linear-gradient(180deg, #e9efff, #f6f1ff); color: var(--ink); padding: 8rem 0; text-align: center; }
.wjx-portal .wjx-eyebrow { color: #7b2ff7; }
.wjx-portal__in { position: relative; z-index: 1; }
.wjx-portal__rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.wjx-portal__rings i { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(123, 47, 247, .35); animation: wjxSpin 40s linear infinite; }
.wjx-portal__rings i:nth-child(1) { width: 320px; height: 320px; } .wjx-portal__rings i:nth-child(2) { width: 520px; height: 520px; border-color: rgba(240, 164, 0, .45); animation-duration: 60s; animation-direction: reverse; }
.wjx-portal__rings i:nth-child(3) { width: 760px; height: 760px; animation-duration: 80s; } .wjx-portal__rings i:nth-child(4) { width: 1040px; height: 1040px; border-color: rgba(67, 210, 224, .4); animation-duration: 110s; animation-direction: reverse; }

@media (max-width: 1000px) {
    .wjx-hero__in, .wjx-m { grid-template-columns: 1fr; }
    .wjx-m__tabs { flex-direction: row; flex-wrap: wrap; } .wjx-m__tabs button[aria-selected="true"] { transform: none; }
    .wjx-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) { .wjx-cards { grid-template-columns: 1fr; } .wjx-card { min-height: 230px; } }
@media (prefers-reduced-motion: reduce) { .wjx-weave__orbit, .wjx-weave__aura, .wjx-weave__core::before, .wjx-weave__caption i, .wjx-portal__rings i { animation: none; } }

/* 2b · descent through four layers (flat stack by default; JS adds .is-3d for the scroll tunnel) */
.wjx-desc { overflow-x: clip; overflow-y: visible; background: radial-gradient(70% 60% at 50% 40%, rgba(123, 47, 247, .3), transparent 70%), linear-gradient(180deg, #0a0b2e, #14093c); padding: 6rem 0; }
.wjx-desc__stick { width: min(88%, 1100px); margin-inline: auto; }
.wjx-desc__scene { display: grid; gap: 1.2rem; }
.wjx-layer { padding: 2.4rem 2.6rem; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .18); background: linear-gradient(150deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)); backdrop-filter: blur(8px); }
.wjx-layer small { display: block; color: var(--gold); letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; margin-bottom: .6rem; }
.wjx-layer h3 { font-size: 2.6rem; line-height: 1.1; margin: 0 0 .5rem; }
.wjx-layer p { color: var(--mute); margin: 0 0 1rem; max-width: 46ch; }
.wjx-layer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.wjx-layer li { padding: .4rem .9rem; border-radius: 999px; border: 1px solid rgba(67, 210, 224, .5); background: rgba(67, 210, 224, .1); font-size: .92rem; }
.wjx-desc__gauge { display: none; }
.wjx-desc.is-3d { height: 420vh; padding: 0; }
.wjx-desc.is-3d .wjx-desc__stick { position: sticky; top: 0; height: 100vh; width: 100%; display: grid; grid-template-rows: auto 1fr; justify-items: center; padding-top: 6.5rem; box-sizing: border-box; overflow: hidden; }
.wjx-desc.is-3d .wjx-desc__head { margin-bottom: 0; }
.wjx-desc.is-3d .wjx-desc__scene { position: relative; width: min(90%, 880px); perspective: 900px; transform-style: preserve-3d; display: block; }
.wjx-desc.is-3d .wjx-layer { position: absolute; left: 0; right: 0; top: 3%; background: linear-gradient(150deg, rgba(40, 14, 90, .92), rgba(10, 11, 46, .92)); border-color: rgba(240, 164, 0, .55); box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 60px rgba(123, 47, 247, .3); will-change: transform, opacity; }
.wjx-desc.is-3d .wjx-desc__gauge { display: block; position: absolute; right: 5%; top: 30%; bottom: 20%; width: 3px; background: rgba(255, 255, 255, .15); border-radius: 3px; }
.wjx-desc__gauge i { position: absolute; left: -5px; top: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 16px var(--gold); }

/* 2c · Indra's net: hanging jewel strands (light band) */
.wjx-net { background: linear-gradient(180deg, #f6f1ff, #e9efff); color: var(--ink); padding: 7rem 0 6rem; }
.wjx-net .wjx-eyebrow { color: #7b2ff7; } .wjx-net .wjx-head p { color: #4a3b66; }
.wjx-strands { display: flex; justify-content: space-between; gap: .6rem; border-top: 3px solid var(--ink); padding-top: 0; min-height: 420px; }
.wjx-strand { --amp: 0deg; flex: 1; display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--ink); transform-origin: 50% 0; animation: wjxIdle 6s ease-in-out infinite alternate; }
.wjx-strand:nth-child(even) { animation-delay: -2.5s; } .wjx-strand:nth-child(3n) { animation-delay: -4s; }
.wjx-strand::before { content: ""; width: 1.5px; height: var(--h); background: linear-gradient(var(--ink), var(--c)); }
.wjx-strand b { width: 52px; height: 52px; border-radius: 50%; margin-bottom: .9rem; background: radial-gradient(circle at 30% 28%, #fff 0 12%, transparent 13%), conic-gradient(from 20deg, var(--c), #fff, var(--c), #f0a400, var(--c)); box-shadow: 0 10px 28px color-mix(in srgb, var(--c) 55%, transparent); transition: transform .6s cubic-bezier(.22, .61, .36, 1), box-shadow .6s cubic-bezier(.22, .61, .36, 1); }
.wjx-strand span { text-align: center; font-size: .92rem; color: #4a3b66; max-width: 130px; line-height: 1.4; opacity: .75; transition: opacity .5s ease, transform .6s cubic-bezier(.22, .61, .36, 1); }
.wjx-strand strong { display: block; color: var(--ink); font-size: 1.02rem; margin-bottom: .2rem; }
.wjx-strand:hover b, .wjx-strand:focus-visible b { transform: scale(1.25); box-shadow: 0 14px 40px var(--c); }
.wjx-strand:hover span, .wjx-strand:focus-visible span { opacity: 1; }
.wjx-strand:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; border-radius: 12px; }
.wjx-strand.is-sway { animation: wjxSway 1.6s ease-out; }
@keyframes wjxIdle { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
@keyframes wjxSway { 0% { transform: rotate(0); } 20% { transform: rotate(var(--amp)); } 45% { transform: rotate(calc(var(--amp) * -.7)); } 70% { transform: rotate(calc(var(--amp) * .35)); } 100% { transform: rotate(0); } }
@media (max-width: 800px) { .wjx-strands { flex-wrap: wrap; justify-content: center; border-top: 0; min-height: 0; row-gap: 2rem; } .wjx-strand { flex: 0 0 44%; } .wjx-strand::before { height: calc(var(--h) / 2); } }
@media (prefers-reduced-motion: reduce) { .wjx-strand, .wjx-strand.is-sway { animation: none; } }

/* descent: moving background + richer cards */
.wjx-desc__fx { position: absolute; top: 0; left: 50%; width: 100vw; height: 100%; transform: translateX(-50%); pointer-events: none; opacity: .9; }
.wjx-desc__head, .wjx-desc__scene { position: relative; z-index: 1; }
.wjx-layer__lead { font-size: 1.3rem; color: #fff !important; max-width: 52ch !important; margin-bottom: .7rem !important; }
.wjx-layer p { font-size: 1.05rem; line-height: 1.65; max-width: 62ch; }
.wjx-layer ul { margin-top: 1.1rem; }
.wjx-layer__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px dashed rgba(240, 164, 0, .45); font-size: .98rem; line-height: 1.5; color: var(--mute); }
.wjx-layer__foot b { display: block; margin-bottom: .25rem; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); }
@media (max-width: 760px) { .wjx-layer { padding: 1.7rem 1.4rem; } .wjx-layer h3 { font-size: 2rem; } .wjx-layer__foot { grid-template-columns: 1fr; } }

/* Indra's net: smoothness — physics loop drives the sway; hover only eases the jewel + label */
.wjx-strands--phys .wjx-strand { animation: none; will-change: transform; }
.wjx-strand:hover span, .wjx-strand:focus-visible span { transform: translateY(4px); }

/* Indra's net: hover/click only on the jewel + its text (not the thread or the empty column) */
.wjx-strand { pointer-events: none; }
.wjx-strand b, .wjx-strand span { pointer-events: auto; cursor: pointer; }
.wjx-strand b { margin-bottom: 0; }
.wjx-strand span { padding: .9rem .4rem .2rem; }