/* ixorax home — the journey (ixora -> ixorax): story chapters, live connection map, charts, quotes. Light/dark + RTL. */
.jsec{position:relative}
.jsec .sec-head{margin-bottom:clamp(22px,3vw,40px)}

/* equation banner: cluster + X = ixorax */
.jeq{display:flex;align-items:flex-start;justify-content:center;gap:clamp(10px,3vw,40px);margin:0 auto clamp(28px,4vw,52px);flex-wrap:wrap}
.jeq .eqi{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;width:clamp(120px,22vw,220px)}
.jeq .eqv{height:112px;display:grid;place-items:center;position:relative;width:100%}
.jeq .eqi b{font-size:clamp(1.05rem,1.8vw,1.4rem);font-weight:800;letter-spacing:-.01em;margin-top:6px}
.jeq .eqi small{font-size:12.5px;line-height:1.45;color:var(--ink-3);max-width:190px}
.jeq .eqs{font-size:2.2rem;font-weight:300;color:var(--ink-3);align-self:flex-start;margin-top:30px}
.jeq .flower{width:112px}
.jeq .eqt{position:absolute;inset-inline-start:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;transform:rotate(var(--r)) translateY(-34px) rotate(calc(var(--r) * -1));filter:drop-shadow(0 6px 10px rgba(14,26,43,.18));animation:eqBloom 5s var(--ease) infinite;animation-delay:calc(var(--i) * 120ms)}
[dir=rtl] .jeq .eqt{margin:-20px -20px 0 0}
.jeq .eqt img{width:100%;height:100%;display:block;border-radius:22%}
.jeq .xv svg{width:76px;height:76px;filter:drop-shadow(0 12px 22px rgba(123,97,217,.35));animation:eqSpin 14s linear infinite}
.jeq .wmv .wm{height:44px;width:auto;color:var(--ink)}
@keyframes eqBloom{0%,100%{transform:rotate(var(--r)) translateY(-34px) rotate(calc(var(--r) * -1)) scale(1)}50%{transform:rotate(calc(var(--r) + 14deg)) translateY(-37px) rotate(calc((var(--r) + 14deg) * -1)) scale(1.06)}}
@keyframes eqSpin{to{transform:rotate(360deg)}}

/* stage: chapter card + connection map */
.jstage{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(22px,4vw,56px);align-items:start}
.jchs{display:grid}
.jch{grid-area:1/1;position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1);padding:clamp(22px,3vw,34px);opacity:0;visibility:hidden;transform:translateY(16px) scale(.985);transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s .5s}
.jch.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.jch .jnum{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.jch .jnum b{font-size:clamp(2.6rem,5vw,3.8rem);font-weight:300;line-height:1;background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.04em}
.jch .jnum small{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.jch h3{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:700;letter-spacing:-.02em;margin:10px 0 10px;line-height:1.15}
.jch>p{color:var(--ink-2);margin:0 0 18px}
.jq{position:relative;margin:0;padding:16px 18px 14px;border-radius:var(--r);background:var(--card-2);border:1px solid var(--line-2);border-inline-start:4px solid var(--brand)}
.jq .qm,.gq .qm{position:absolute;inset-inline-end:14px;top:-4px;font-size:54px;line-height:1;font-family:Georgia,serif;color:color-mix(in srgb,var(--brand) 40%,transparent)}
.jq p{margin:0;font-weight:600;font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.5;color:var(--ink)}
.jq footer{margin-top:8px;font-size:12.5px;font-weight:700;color:var(--ink-3)}
.jq footer::before{content:"— "}
.jchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.jchip{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:99px;background:var(--c-soft,var(--card-2));border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--ink);transition:transform .3s var(--spring),box-shadow .3s}
[dir=rtl] .jchip{padding:5px 5px 5px 12px}
.jchip:hover{transform:translateY(-2px);box-shadow:var(--sh-1)}
.jchip .tile{width:26px;height:26px;display:block;flex:none}.jchip .tile img{width:100%;height:100%;display:block;border-radius:22%}
.jchip.more{padding:5px 12px;color:var(--ink-3)}
html.no-js .jch{grid-area:auto;opacity:1;visibility:visible;transform:none;margin-bottom:14px}

.jctl{display:flex;align-items:center;gap:10px;margin-top:16px}
.jplay{gap:8px}.jplay svg{width:16px;height:16px;display:block}
.jplay .ic-pause{display:none}.jplay[data-state=playing] .ic-pause{display:inline-flex}.jplay[data-state=playing] .ic-play{display:none}
.jplay em{font-style:normal}
.jarrow{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:transform .3s var(--spring),background .2s}
.jarrow:hover{background:var(--card-2);transform:scale(1.07)}.jarrow svg{width:18px;height:18px}
.jarrow .flip{transform:scaleX(-1)}[dir=rtl] .jarrow .ic{transform:scaleX(-1)}[dir=rtl] .jarrow .flip{transform:none}

/* connection map */
.jright{display:flex;flex-direction:column;gap:14px}
.jmap{position:relative;width:100%;max-width:640px;margin-inline:auto;direction:ltr}
.jboard{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.jfam{padding:14px 14px 10px;border-radius:var(--r-l);background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1);position:relative;overflow:hidden}
.jfam::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--c);opacity:.28;transition:opacity .4s}
.jfam.on::before{opacity:1}
.jfam header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.jfam header i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.jfam header b{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);line-height:1.2}
.jfam header em{margin-inline-start:auto;font-style:normal;font-size:11.5px;font-weight:800;color:var(--ink-3);font-variant-numeric:tabular-nums}
.jfam.on header em{color:var(--c)}
.jtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 6px}
.jn{position:relative;padding:4px 2px 6px;border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;border-radius:14px;opacity:.28;transform:scale(.94);transition:opacity .35s,transform .35s var(--spring)}
.jn img{width:clamp(40px,5.2vw,54px);aspect-ratio:1;display:block;border-radius:22%}
.jn.lit{opacity:1;transform:none}
.jn:hover,.jn:focus-visible{transform:translateY(-2px);outline:none}
.jn:focus-visible{box-shadow:0 0 0 2px var(--brand)}
.jn.sel{background:color-mix(in srgb,var(--c) 14%,transparent);box-shadow:inset 0 0 0 1.5px var(--c)}
.jn.nb{background:color-mix(in srgb,var(--c) 9%,transparent)}
.jl{font-size:10.5px;font-weight:700;line-height:1.1;color:var(--ink-2);text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jhub{position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);z-index:3;border-radius:14px;box-shadow:0 0 0 5px var(--bg),0 8px 20px rgba(123,97,217,.35)}
.jhub .hubt,.jhub .hubt svg{width:100%;height:100%;display:block}
.jphone{position:absolute;inset-inline-end:2px;top:2px;width:17px;height:17px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);transform:scale(0);transition:transform .35s var(--spring)}
[dir=rtl] .jphone{inset-inline-end:auto;left:auto;right:auto}
.jphone svg{width:62%;height:62%;display:block}
.jstage.apps .jphone{transform:scale(1)}

.jsel{min-height:132px;padding:16px 18px;border-radius:var(--r-l);background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1);transition:border-color .3s}
.jsel .jpick{margin:0;display:flex;align-items:center;gap:10px;color:var(--ink-3);font-size:14px;font-weight:600;min-height:96px}
.jsel .jpick::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 6px color-mix(in srgb,var(--brand) 22%,transparent);}
@keyframes jpulseDot{50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--brand) 0%,transparent)}}
.jsel .sh{display:flex;align-items:center;gap:12px}.jsel .sh .tile{width:44px;height:44px;flex:none}.jsel .sh .tile img{width:100%;height:100%;display:block;border-radius:22%}
.jsel .sh b{font-size:1.05rem;font-weight:800;line-height:1.2}.jsel .sh small{display:block;color:var(--ink-3);font-size:12.5px;font-weight:600}
.jsel .sq{margin:12px 0 4px;font-weight:600;font-size:1.02rem;line-height:1.5;border-inline-start:3px solid var(--c,var(--brand));padding-inline-start:12px}
.jsel .sd{margin:0 0 10px;color:var(--ink-2);font-size:13.5px}
.jsel .sl{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.jsel .sl>span{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-inline-end:4px}
.jsel .sl button{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:99px;border:1px solid var(--line);background:var(--card-2);font:700 12px var(--font);color:var(--ink);cursor:pointer}
[dir=rtl] .jsel .sl button{padding:3px 3px 3px 10px}
.jsel .sl button img{width:20px;height:20px;border-radius:6px;display:block}.jsel .sl button:hover{background:var(--c-soft,var(--card))}
.jsel .go{display:inline-flex;margin-top:12px;font-weight:800;font-size:13.5px;color:var(--brand);gap:6px;align-items:center}.jsel .go svg{width:16px;height:16px}

/* chapter stepper */
.jsteps{position:relative;display:flex;justify-content:space-between;gap:6px;margin:clamp(26px,4vw,44px) auto 0;max-width:980px;padding-top:6px;overflow-x:auto;scrollbar-width:none}
.jsteps::-webkit-scrollbar{display:none}
.jsteps::before{content:"";position:absolute;inset-inline:7%;top:20px;height:3px;border-radius:3px;background:var(--line)}
.jsteps::after{content:"";position:absolute;inset-inline-start:7%;top:20px;height:3px;border-radius:3px;background:var(--brand-grad);width:calc((100% - 14%) * var(--p,0));transition:width .8s var(--ease)}
.jstage{--p:0}
.jstep{position:relative;z-index:1;flex:1 0 96px;display:flex;flex-direction:column;align-items:center;gap:10px;background:none;border:0;cursor:pointer;color:var(--ink-3);font:700 12.5px/1.3 var(--font);padding:0 4px 4px;text-align:center}
.jstep i{width:30px;height:30px;border-radius:50%;background:var(--card);border:3px solid var(--line);display:block;transition:all .4s var(--spring);margin-top:-1px}
.jstep.done i{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 22%,var(--card))}
.jstep.on i{border-color:var(--brand);background:var(--brand);transform:scale(1.22);box-shadow:0 0 0 7px color-mix(in srgb,var(--brand) 22%,transparent)}
.jstep.on,.jstep:hover{color:var(--ink)}
.jstep span{max-width:120px}

/* charts */
.jcharts{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:clamp(14px,2vw,22px);margin-top:clamp(28px,4vw,52px)}
.jcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(18px,2.4vw,26px);box-shadow:var(--sh-1)}
.jcard h3{font-size:1rem;font-weight:800;margin:0 0 14px;letter-spacing:-.005em}
.donut{position:relative;width:min(190px,60%);margin:2px auto 14px}.donut svg{width:100%;display:block}
.donut .arc{transition:stroke-width .9s var(--ease),opacity .6s}
.jc-donut:not(.in) .arc{stroke-width:0;opacity:0}
.donut .arc:nth-child(2){transition-delay:.15s}.donut .arc:nth-child(3){transition-delay:.3s}.donut .arc:nth-child(4){transition-delay:.45s}
.donut .dc{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1}
.donut .dc b{font-size:2.2rem;font-weight:300;letter-spacing:-.03em}.donut .dc span{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.legend{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.legend li{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--ink-2)}.legend i{width:10px;height:10px;border-radius:3px;background:var(--k);flex:none}.legend span{flex:1}.legend b{color:var(--ink)}
.bars{display:grid;gap:13px}
.brow{display:grid;grid-template-columns:86px 1fr 26px;align-items:center;gap:10px;font-size:13px;font-weight:700;color:var(--ink-2)}
.brow b{color:var(--ink);text-align:end}
.btrack{height:12px;border-radius:99px;background:var(--line-2);overflow:hidden}.btrack i{display:block;height:100%;width:var(--w);border-radius:99px;background:var(--k);transform-origin:left;transition:transform 1.1s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
[dir=rtl] .btrack i{transform-origin:right}
.jc-bars:not(.in) .btrack i{transform:scaleX(0)}
.cnote{margin:16px 0 0;font-size:12.5px;color:var(--ink-3)}
.jc-steps svg{width:100%;display:block;direction:ltr;overflow:visible}
.jc-steps .grid line{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}.jc-steps .grid text{fill:var(--ink-3);font-size:8px;font-weight:700}
.jc-steps .ln{stroke:var(--brand);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset 1.8s var(--ease)}
.jc-steps:not(.in) .ln{stroke-dashoffset:100}.jc-steps .area{transition:opacity 1.2s .6s}.jc-steps:not(.in) .area{opacity:0}
.jc-steps .pt circle{fill:var(--card);stroke:var(--brand);stroke-width:2;transition:all .4s var(--spring);transform-box:fill-box;transform-origin:center}
.jc-steps .pt.on circle{fill:var(--brand);transform:scale(1.25)}
.jc-steps .vt{fill:var(--ink);font-size:8.5px;font-weight:800}.jc-steps .xt{fill:var(--ink-3);font-size:8.5px;font-weight:700}

/* quotes band */
.jquotes{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(18px,3vw,40px);align-items:center;margin-top:clamp(18px,2.4vw,28px);padding:clamp(24px,3.4vw,44px);border-radius:var(--r-xl);color:#fff;background:linear-gradient(135deg,#2A1F6B,#5B45C9 55%,#2E86D6);position:relative;overflow:hidden}
.jquotes::after{content:"";position:absolute;inset-inline-end:-60px;top:-60px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%)}
.jq-h h3{font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:300;letter-spacing:-.02em;margin:0 0 8px;color:#fff}.jq-h p{margin:0;color:rgba(255,255,255,.78)}
.jq-b{position:relative;display:grid;min-height:150px}
.gq{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .6s var(--ease),transform .7s var(--ease),visibility 0s .6s;align-self:center}
.gq.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease),transform .7s var(--ease)}
.gq .qm{position:static;display:block;font-size:84px;height:46px;color:rgba(255,255,255,.35)}
.gq blockquote{margin:0;font-size:clamp(1.3rem,2.5vw,2rem);font-weight:300;line-height:1.35;letter-spacing:-.01em;color:#fff}
.gq figcaption{margin-top:12px;font-size:13px;font-weight:800;letter-spacing:.1em;color:rgba(255,255,255,.75)}.gq figcaption::before{content:"— "}
.gdots{position:absolute;inset-inline-end:0;bottom:-6px;display:flex;gap:7px}
.gdot{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.4);cursor:pointer;padding:0;transition:all .3s}.gdot.on{width:26px;border-radius:9px;background:#fff}
html.no-js .gq{grid-area:auto;opacity:1;visibility:visible;transform:none;margin-bottom:18px}

@media (max-width:980px){
  .jstage{grid-template-columns:1fr}
  .jchs{display:block}.jch{display:none;grid-area:auto}.jch.on{display:block;animation:jIn .55s var(--ease)}
  .jgq{display:none}
  .jcharts{grid-template-columns:1fr 1fr}.jc-steps{grid-column:1/-1}
  .jquotes{grid-template-columns:1fr}
}
@media (max-width:640px){
  .jcharts{grid-template-columns:1fr}
  .jeq .eqs{display:none}.jeq .eqi{width:42%}.jeq .eqi:last-child{width:100%}
  .jn img{width:38px}.jl{font-size:9.5px}.jfam{padding:12px 10px 8px}.jfam header b{font-size:10px;letter-spacing:.05em}.jboard{gap:8px}.jn.sel .jl{display:block;opacity:1}
  .jsteps::before,.jsteps::after{inset-inline:9%}
  .brow{grid-template-columns:74px 1fr 24px}
}
@media (prefers-reduced-motion:reduce){
  .jeq .eqt,.jeq .xv svg,.jhub .pulse,.jsel .jpick::before{animation:none}
  .jch,.jn,.jstep i,.btrack i,.jc-steps .ln,.donut .arc{transition:none}
}

@keyframes jIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* guided tour: the solution card replaces the chapter cards */
.jchs-old,.jsteps,.jsel{display:none!important}
.jsol{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1);padding:clamp(22px,3vw,34px);min-height:420px;border-top:3px solid var(--c,var(--brand))}
.jsol>*{opacity:0;transform:translateY(10px)}
.jsol.in>*{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .7s var(--ease)}
.jsol.in>*:nth-child(2){transition-delay:.05s}.jsol.in>*:nth-child(3){transition-delay:.1s}.jsol.in>*:nth-child(4){transition-delay:.2s}.jsol.in>*:nth-child(5){transition-delay:.3s}.jsol.in>*:nth-child(6){transition-delay:.4s}.jsol.in>*:nth-child(7){transition-delay:.5s}
.jsol .jnum{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.jsol .jnum b{font-size:clamp(2.6rem,5vw,3.6rem);font-weight:300;line-height:1;color:var(--c);letter-spacing:-.04em}
.jsol .jnum small{font-size:13px;font-weight:800;color:var(--ink-3);letter-spacing:.08em}
.jsol .eyebrow{color:var(--c)}
.jsol .jh{display:flex;align-items:center;gap:14px;margin:12px 0 14px}
.jsol .jh .tile{width:58px;height:58px;flex:none}.jsol .jh .tile img{width:100%;height:100%;display:block;border-radius:22%}
.jsol .jh h3{margin:0;font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.jsol .jh small{display:block;margin-top:3px;color:var(--ink-3);font-size:12.5px;font-weight:700}
.jsol .jq{margin:0 0 12px;border:0;border-inline-start:3px solid var(--c);padding:2px 0 2px 14px;padding-inline-start:14px;font-weight:600;font-size:clamp(1.05rem,1.7vw,1.25rem);line-height:1.45;background:none;box-shadow:none}
.jsol .jd{margin:0 0 16px;color:var(--ink-2);font-size:.97rem}
.jsol .sl{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:6px}.jsol .sl>span{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-inline-end:4px}
.jsol .sl button{display:inline-flex;align-items:center;gap:6px;padding:3px 11px 3px 3px;border-radius:99px;border:1px solid var(--line);background:var(--card-2);font:700 12.5px var(--font);color:var(--ink);cursor:pointer;transition:background .2s,transform .25s var(--spring)}
[dir=rtl] .jsol .sl button{padding:3px 3px 3px 11px}
.jsol .sl button:hover{background:color-mix(in srgb,var(--c) 14%,var(--card));transform:translateY(-1px)}
.jsol .sl button img{width:22px;height:22px;border-radius:7px;display:block}
.jsol .go{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-weight:800;color:var(--c)}.jsol .go svg{width:17px;height:17px}
.jbar{height:3px;border-radius:3px;background:var(--line);margin-top:14px;overflow:hidden}
.jbar i{display:block;height:100%;background:var(--brand-grad);transform:scaleX(0);transform-origin:left}
[dir=rtl] .jbar i{transform-origin:right}
.jboard.focus .jn:not(.sel):not(.nb){opacity:.55}
.jn.sel{opacity:1;transform:scale(1.06)}.jn.nb{opacity:1}
@media (prefers-reduced-motion:reduce){.jsol>*{transition:none!important}}