:root{
  /* Layout idea: the animated night-sky network stays fixed behind; all text sits on soft white sheets in one centred column. */
  --ink:#050824;        /* background base */
  --royal:#3b55f0;      /* background glow */
  --navy:#ffffff;       /* headings, straight on the dark background */
  --red:#e8b650;        /* gold accent, same as the travelling lights */
  --body:#e1e6ff;       /* running text on the sheets */
  --muted:#b4c1ff;
  --sheet:transparent;
  --font-display:"Sora","Hind Siliguri",system-ui,"Segoe UI",sans-serif;
  --font-body:"Hind Siliguri","Sora",system-ui,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--body);font-family:var(--font-body);font-size:17px;line-height:1.6;min-height:100vh}

/* ---------- animated background ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:
  radial-gradient(60% 55% at 50% 50%, rgba(59,85,240,.38), transparent 70%),
  radial-gradient(45% 45% at 12% 18%, rgba(59,85,240,.22), transparent 70%),
  radial-gradient(40% 40% at 30% 100%, rgba(224,173,69,.10), transparent 70%),
  linear-gradient(160deg, #0b1248 0%, var(--ink) 55%, #03051a 100%);
}
.bg::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(169,187,255,.07) 1px, transparent 1px),linear-gradient(90deg, rgba(169,187,255,.07) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 50%, #000 20%, transparent 85%);
          mask-image:radial-gradient(80% 70% at 50% 50%, #000 20%, transparent 85%);}
.bg::after{content:"";position:absolute;inset:-75%;
  background:conic-gradient(from 210deg at 50% 50%, transparent 0 40%, rgba(59,85,240,.16) 48%, transparent 56% 100%);
  animation:sweep 38s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
#fx{position:absolute;inset:0;width:100%;height:100%;display:block}
.vignette{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(2,3,16,.75) 100%);pointer-events:none}

/* ---------- white sheets ---------- */
.page{position:relative;z-index:1;width:100%;padding:108px clamp(16px,4vw,64px) 40px;display:flex;flex-direction:column;gap:28px}
.sheet{background:var(--sheet);text-shadow:0 1px 3px rgba(3,5,26,.9),0 0 14px rgba(3,5,26,.85)}

header.sheet{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;position:fixed;top:0;left:0;right:0;z-index:10;padding:8px clamp(16px,4vw,64px);background:rgba(5,8,36,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(169,187,255,.2)}
.logo{background:#fff;border-radius:10px;padding:6px 14px;display:block}
.logo img{display:block;height:52px;width:auto}
nav{display:flex;gap:clamp(14px,2.6vw,34px);flex-wrap:wrap}
nav a{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--body);text-decoration:none;padding:6px 2px;border-bottom:2px solid transparent}
nav a:hover,nav a:focus-visible{border-bottom-color:var(--red);outline:none}

section.sheet{padding:clamp(16px,3vw,32px) 0;scroll-margin-top:110px}
.kicker{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
h1,h2{font-family:var(--font-display);font-weight:800;color:var(--navy);letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(34px,5vw,56px)}
h2{font-size:clamp(28px,3.6vw,40px)}
h1::after,h2::after{content:"";display:block;width:64px;height:4px;border-radius:2px;background:var(--red);margin-top:14px}

.who{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.who .text{display:flex;flex-direction:column;gap:18px}
.who p{max-width:none}
.who p.lead{font-size:clamp(18px,1.7vw,21px);color:#fff;font-weight:500}
.facts{display:flex;flex-direction:column;gap:0;border-left:2px solid rgba(169,187,255,.3);padding-left:clamp(18px,3vw,36px);list-style:none;margin:0}
.facts li{padding:14px 0;border-bottom:1px solid rgba(169,187,255,.22)}
.facts li:last-child{border-bottom:0}
.facts b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(30px,3.4vw,42px);line-height:1;color:var(--red);font-variant-numeric:tabular-nums}
.facts span{color:var(--muted);font-size:15px}

.services-head{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.services-head p{color:var(--muted);max-width:60ch}
.services-head p.kicker{color:var(--red)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:1250px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:12px;background:rgba(5,8,36,.30);border:1px solid rgba(169,187,255,.28);border-top:3px solid rgba(169,187,255,.6)}
.card:hover{border-top-color:var(--red)}
.card .icon{width:46px;height:46px;border-radius:10px;background:rgba(232,182,80,.12);border:1px solid var(--red);display:grid;place-items:center;color:var(--red)}
.card .type{font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.card h3{font-family:var(--font-display);font-weight:700;font-size:23px;color:var(--navy);line-height:1.2}
.card p{font-size:16px}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin-top:auto;padding-top:6px}
.tags li{font-size:13.5px;font-weight:500;color:var(--body);background:rgba(169,187,255,.14);border:1px solid rgba(169,187,255,.3);border-radius:999px;padding:3px 12px}

footer.sheet{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 0;border-top:1px solid rgba(169,187,255,.25);font-size:15px;color:var(--muted);scroll-margin-top:110px}
footer b{color:var(--navy);font-family:var(--font-display)}

/* ---------- page 2: Jewellery ERP 360 ---------- */
main{display:flex;flex-direction:column;gap:28px}
main[hidden]{display:none}
@keyframes viewIn{from{opacity:0}to{opacity:1}}
#view-jewellery{min-height:calc(100vh - 100px);align-items:center;justify-content:center;position:relative;padding:20px 0}
.anchor{position:absolute;top:-96px}
#fx{transition:opacity 1s ease}
body.jw #fx{opacity:.38}          /* calm the background so the diagram leads */
.stage{position:relative;width:min(1100px,100%);aspect-ratio:1100/560;container-type:inline-size}
.jw-title{position:absolute;left:0;right:0;top:0;text-align:center;font-family:var(--font-display);font-weight:600;
  font-size:clamp(15px,2.1cqw,24px);color:#fff;letter-spacing:.01em;text-shadow:0 2px 14px rgba(3,5,26,.9);opacity:0}
.jw-title::after{content:"";display:block;width:56px;height:3px;border-radius:2px;background:var(--red);margin:10px auto 0}

.orbit{position:absolute;left:50%;top:53.57%;border-radius:50%;translate:-50% -50%;opacity:0;pointer-events:none}
.orbit.o1{width:31cqw;height:31cqw;border:1px solid rgba(169,187,255,.28);animation:spin 40s linear infinite}
.orbit.o2{width:44cqw;height:44cqw;border:1px dashed rgba(232,182,80,.38);animation:spin 70s linear infinite reverse}
.orbit i{position:absolute;left:50%;top:0;width:9px;height:9px;margin:-5px 0 0 -5px;border-radius:50%;background:#f3d48a;box-shadow:0 0 14px 4px rgba(232,182,80,.7)}
@keyframes spin{to{rotate:360deg}}

.links{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.links path{fill:none;vector-effect:non-scaling-stroke}
.links .base path{stroke:rgba(169,187,255,.35);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1}
.links .flow path{stroke:#f6d98f;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:.3 .7;stroke-dashoffset:1;opacity:0;filter:drop-shadow(0 0 5px rgba(240,190,90,.95))}

.core{position:absolute;left:50%;top:53.57%;width:21cqw;aspect-ratio:1;translate:-50% -50%;opacity:0;z-index:2}
.core .halo{position:absolute;inset:-7px;border-radius:50%;
  background:conic-gradient(from 0deg, rgba(232,182,80,0) 0 12%, #f6d98f 30%, rgba(232,182,80,0) 48% 62%, #a9bbff 80%, rgba(232,182,80,0) 96%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation:spin 7s linear infinite}
.core .pulse{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(246,217,143,.8);animation:pulse 3.6s ease-out infinite}
@keyframes pulse{from{scale:1;opacity:.8}to{scale:1.55;opacity:0}}
.core .disc{position:absolute;inset:0;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3cqw;text-align:center;
  background:none;border:1.5px solid rgba(246,217,143,.75)}
.core svg{width:26%;margin-bottom:.4cqw;filter:drop-shadow(0 0 8px rgba(246,217,143,.7))}
.core small{font-family:var(--font-display);font-weight:600;color:#fff;font-size:clamp(12px,2cqw,22px);letter-spacing:.06em;line-height:1.1;text-shadow:0 2px 12px rgba(3,5,26,.95)}
.core strong{font-family:var(--font-display);font-weight:800;font-size:clamp(17px,3.1cqw,34px);line-height:1.05;
  color:transparent;background:linear-gradient(180deg,#fbe7b0,#e0ad45);-webkit-background-clip:text;background-clip:text;text-shadow:none}

.node{position:absolute;display:flex;align-items:center;gap:1.6cqw;translate:0 -50%;opacity:0;z-index:2}
.node.left{right:64.5%;flex-direction:row-reverse;text-align:right}
.node.right{left:64.5%}
.n1,.n2{top:25.5%} .n3,.n4{top:81.6%}
.hex{flex:none;width:11cqw;aspect-ratio:1.1547/1;position:relative;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f6d98f'/%3E%3Cstop offset='.55' stop-color='%23a9bbff'/%3E%3Cstop offset='1' stop-color='%23e0ad45'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='25,1.500 75,1.500 98.700,50 75,98.500 25,98.500 1.300,50' fill='none' stroke='url(%23g)' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;transition:scale .25s ease}
.hex>div{position:absolute;inset:0;display:grid;place-items:center;color:#f6d98f}
.hex svg{width:38%;filter:drop-shadow(0 1px 6px rgba(3,5,26,.9))}
.node:hover .hex{scale:1.08}
.label{max-width:21cqw}
.label h3{font-family:var(--font-display);font-weight:700;color:#fff;font-size:clamp(15px,1.9cqw,21px);line-height:1.2;text-shadow:0 2px 12px rgba(3,5,26,.95)}
.label p{color:var(--muted);font-size:clamp(13px,1.45cqw,16px);line-height:1.45;margin-top:4px;text-shadow:0 1px 8px rgba(3,5,26,.95)}

/* entrance: the centre first, then light runs out along the links and each part fades up from hidden */
.stage.play .core{animation:coreIn 1.1s cubic-bezier(.2,.9,.25,1.15) both}
.stage.play .orbit{animation:fadeIn 1.4s ease .7s both, spin 40s linear infinite}
.stage.play .orbit.o2{animation:fadeIn 1.4s ease .9s both, spin 70s linear infinite reverse}
.stage.play .links .base path{animation:draw .9s ease 1.1s both}
.stage.play .links .flow path{animation:fadeIn .4s ease 2s both, flow 2.6s linear 2s infinite}
.stage.play .node{animation:nodeIn 1.5s ease both;animation-delay:calc(1.5s + var(--i) * .4s)}
.stage.play .jw-title{animation:fadeIn 1.2s ease 3.2s both}
@keyframes coreIn{from{opacity:0;scale:.35;filter:blur(12px)}to{opacity:1;scale:1;filter:blur(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes flow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes nodeIn{from{opacity:0;scale:.7;filter:blur(10px)}to{opacity:1;scale:1;filter:blur(0)}}
/* ---------- cloud: the same screens on three devices ---------- */
.cloud{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px);align-items:center}
.cloud .text{display:flex;flex-direction:column;gap:18px}
.cloud .lead{font-size:clamp(18px,1.7vw,21px);color:#fff;font-weight:500}
.os{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.os li{display:flex;align-items:center;gap:8px;font:600 14.500px var(--font-display);color:#fff;border:1px solid rgba(169,187,255,.35);background:rgba(5,8,36,.35);border-radius:999px;padding:7px 15px 7px 12px}
.os svg{width:18px;height:18px;color:var(--red)}
.devices{position:relative;width:100%;aspect-ratio:16/11;container-type:inline-size}
.dv{opacity:0}
.devices.play .dv{animation:nodeIn 1s ease both;animation-delay:calc(var(--i) * .35s)}
.laptop{position:absolute;left:11%;top:2%;width:78%}
.lap-screen{aspect-ratio:16/9.800;border:.9cqw solid #161b45;border-bottom-width:1.2cqw;border-radius:1.5cqw 1.5cqw 0 0;overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px rgba(169,187,255,.55),0 0 60px rgba(59,85,240,.55)}
.lap-screen img{display:block;width:118%;max-width:none}
.lap-base{height:1.9cqw;width:118%;margin-left:-9%;border-radius:.3cqw .3cqw 2cqw 2cqw;background:linear-gradient(180deg,#d7dcf5,#8088b9);position:relative;box-shadow:0 1.5cqw 3cqw rgba(2,3,20,.6)}
.lap-base::after{content:"";position:absolute;left:50%;top:0;width:14%;height:.6cqw;translate:-50% 0;border-radius:0 0 .6cqw .6cqw;background:#6a72a3}
.tablet,.phone{position:absolute;bottom:0;overflow:hidden;background:#e9ecf6;box-shadow:0 0 0 1px rgba(169,187,255,.6),0 1.5cqw 4cqw rgba(2,3,20,.7),0 0 40px rgba(232,182,80,.25)}
.tablet{left:0;width:29%;aspect-ratio:3/4;border:.9cqw solid #161b45;border-radius:2cqw}
.phone{right:3%;width:16.500%;aspect-ratio:9/18.500;border:.65cqw solid #161b45;border-radius:2.4cqw}
.scroll{display:block;width:100%;animation:pan 16s ease-in-out infinite alternate}
.tablet .scroll{--end:-41.900%}
.phone .scroll{--end:-10.400%}
@keyframes pan{0%,12%{translate:0 0}88%,100%{translate:0 var(--end)}}

/* ---------- jewellery retail: the four-step flow ---------- */
.flowblock{display:flex;flex-direction:column;gap:20px}
.flow-title{font-family:var(--font-display);font-weight:600;font-size:clamp(18px,1.9vw,24px);color:#fff;line-height:1.35;max-width:none}
.flow-title b{color:var(--red);font-weight:700;padding:0 .15em}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.steps li{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:12px;background:rgba(5,8,36,.34);
  border:1px solid color-mix(in srgb, var(--c) 45%, transparent);border-top:3px solid var(--c);opacity:0}
.steps li:not(:last-child)::after{content:"\2192";position:absolute;right:-22px;top:34px;font:700 20px var(--font-display);color:var(--red);text-shadow:0 0 10px rgba(232,182,80,.8)}
.st-top{display:flex;align-items:center;justify-content:space-between}
.st-ico{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;color:var(--c);border:1px solid var(--c);background:color-mix(in srgb, var(--c) 14%, transparent)}
.st-ico svg{width:24px;height:24px}
.st-no{font:800 34px var(--font-display);color:color-mix(in srgb, var(--c) 55%, transparent);line-height:1}
.steps h3{font-family:var(--font-display);font-weight:700;font-size:21px;color:var(--c);line-height:1.2}
.steps p{font-size:15.500px;color:var(--body)}
.tag-img{display:block;width:100%;height:auto;border-radius:8px;margin-top:auto;box-shadow:0 0 0 1px rgba(183,155,255,.6),0 8px 24px rgba(2,3,20,.6)}
.steps.play li{animation:nodeIn .9s ease both;animation-delay:calc(var(--i) * .22s)}
.comb-note{color:var(--muted)}
@media (max-width:1099px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.steps li::after{display:none}.comb-note{display:none}}
@media (max-width:620px){.steps{grid-template-columns:1fr}}

/* ---------- owner dashboard: laptop and phone ---------- */
.cloud.flip .devices.od{max-width:1000px;margin:0 auto;aspect-ratio:16/10.200}
.devices.od .laptop{left:5%;width:80%}
.devices.od .lap-screen img{width:100%}
.devices.od .lap-screen .scroll{--end:-13.200%}
.devices.od .phone{right:1%;width:18.500%;bottom:1%}

/* ---------- multi-branch: branch selector, phone dashboard, transfer ---------- */
.cloud.flip{grid-template-columns:1fr;gap:clamp(24px,3vw,40px)}
.cloud.flip .text{order:-1}
.cloud.flip .text p{max-width:90ch}
.cloud.flip .mb-art{max-width:920px;margin:0 auto;aspect-ratio:16/7.300}
.mb-art{position:relative;width:100%;aspect-ratio:16/11;container-type:inline-size}
.mb-art.play .dv{animation:nodeIn 1s ease both;animation-delay:calc(var(--i) * .28s)}
.mb-phone{left:39.500%;right:auto;top:0;bottom:auto;width:21%;aspect-ratio:9/18.500;border-width:.7cqw;border-radius:3cqw;z-index:2}
.mb-phone img{display:block;width:100%}
.mb-card{position:absolute;border:1px solid rgba(169,187,255,.45);border-radius:1.6cqw;background:rgba(8,12,52,.88);padding:1.8cqw;box-shadow:0 1.5cqw 4cqw rgba(2,3,20,.6);text-shadow:none}
.mb-cap{font:700 clamp(10px,1.5cqw,13px) var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:1.2cqw}
.mb-card.sel{left:0;top:7%;width:36%}
.mb-pill{display:inline-flex;gap:.8cqw;align-items:center;font:700 clamp(11px,1.9cqw,16px) var(--font-display);color:#fff;border:1.5px solid #a9bbff;border-radius:999px;padding:.6cqw 1.6cqw;margin-bottom:1cqw}
.mb-card ul{list-style:none;padding:0;margin:0}
.mb-card.sel li{display:flex;align-items:center;gap:1cqw;font:500 clamp(11px,1.8cqw,15.500px) var(--font-body);color:#e1e6ff;padding:.9cqw 1cqw;border-radius:.8cqw}
.mb-card.sel li.on{background:rgba(232,182,80,.16);color:#fff;font-weight:600}
.mb-card.sel li svg{width:2.4cqw;min-width:14px;color:var(--red)}
.mb-card.sel{top:10%}
.mb-tree{width:100%;container-type:inline-size;text-shadow:none}
.mb-tree .mb-cap{font-size:13px;margin-bottom:14px}
.mb-tree{--line:#f2bd4b;order:0}
.cloud.flip .mb-art{order:1}
.mb-comb{position:relative;width:100%;aspect-ratio:100/42}
.mb-comb>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mb-comb path{fill:none;vector-effect:non-scaling-stroke}
.mb-comb .ring{stroke:rgba(242,189,75,.5);stroke-width:1.3}
.mb-comb .ringflow{stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-dasharray:.02 .1467;filter:drop-shadow(0 0 6px var(--line));animation:flow 9s linear infinite}
.mb-comb .base path{stroke:var(--line);stroke-width:1.600}
.mb-comb .flow path{stroke:#fff;stroke-width:3.500;stroke-linecap:round;stroke-dasharray:.1 .9;filter:drop-shadow(0 0 6px var(--line));animation:flow 2.8s linear infinite}
.mb-comb .flow path:nth-child(2){animation-delay:-.45s}
.mb-comb .flow path:nth-child(3){animation-delay:-.9s}
.mb-comb .flow path:nth-child(4){animation-delay:-1.35s}
.mb-comb .flow path:nth-child(5){animation-delay:-1.8s}
.mb-comb .flow path:nth-child(6){animation-delay:-2.25s}
.bx{position:absolute;translate:-50% -50%;aspect-ratio:1/1.1547;opacity:0;filter:drop-shadow(0 0 8px rgba(242,189,75,.5))}
.bx>b{position:absolute;inset:0;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--line)}
.bx>b>div{position:absolute;inset:2.500px;clip-path:inherit;background:#0a1048 center/cover no-repeat}
.bx span{position:absolute;left:0;right:0;bottom:16%;text-align:center;font:700 clamp(8px,1.05cqw,14px) var(--font-display);color:#fff;line-height:1.15;
  background:rgba(5,8,36,.82);padding:.5cqw 0}
.bx.br{width:10.500%}
.bx.hq{width:14.500%;filter:drop-shadow(0 0 16px rgba(242,189,75,.85))}
.bx.hq>b>div{inset:4px}
.bx.hq span{font-size:clamp(9px,1.3cqw,17px);background:var(--line);color:#0a0d33;bottom:17%;padding:.7cqw 0}
.mb-tree.play .dv{animation:nodeIn .9s ease both;animation-delay:calc(var(--i) * .15s)}
.mb-kpi{position:absolute;right:0;top:12%;width:31%;list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1.7cqw}
.mb-kpi li{display:flex;align-items:center;gap:1.1cqw;font:600 clamp(11px,1.8cqw,15.500px) var(--font-display);color:#fff;border:1px solid rgba(169,187,255,.4);background:rgba(8,12,52,.85);border-radius:999px;padding:1cqw 1.6cqw;text-shadow:none}
.mb-kpi svg{width:2.6cqw;min-width:15px;color:var(--red);flex:none}

/* ---------- Jewellery Retail: colour-coded honeycomb ---------- */
#jewellery-retail{display:flex;flex-direction:column;gap:26px}
.retail-head{display:flex;flex-direction:column;gap:12px}
.retail-head p:last-child{color:var(--muted);max-width:70ch}
.legend{display:flex;flex-wrap:wrap;gap:10px 14px}
.legend button{display:flex;align-items:center;gap:8px;font:600 14px var(--font-display);color:#fff;background:rgba(5,8,36,.35);border:1px solid rgba(169,187,255,.3);border-radius:999px;padding:6px 14px;cursor:pointer}
.legend button::before{content:"";width:12px;height:12px;border-radius:3px;background:var(--c)}
.legend button:hover,.legend button.on{border-color:var(--c)}
.legend button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.combwrap{position:relative;width:100%;container-type:inline-size}
.comb{position:relative;margin:0 auto}
.sub-h{font-family:var(--font-display);font-weight:800;color:#fff;font-size:clamp(24px,2.8vw,34px);line-height:1.1}
.sub-h::after{content:"";display:block;width:64px;height:4px;border-radius:2px;background:var(--red);margin-top:14px}
#retail-reports{scroll-margin-top:110px;margin-top:26px}
.hx{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:var(--h);opacity:0;transition:scale .2s ease,filter .3s}
.hx>b{position:absolute;inset:0;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--c)}
.hx>b>div{position:absolute;inset:1.5px;clip-path:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25cqw;text-align:center;padding:0 .7cqw;
  background:color-mix(in srgb, var(--c) 15%, #060a30)}
.hx span{font-family:var(--font-body);font-weight:600;color:#fff;font-size:clamp(8.5px,.8cqw,13px);line-height:1.18;text-shadow:none;overflow-wrap:anywhere}
.hx.centre>b{background:linear-gradient(160deg,#fbe7b0,#e0ad45)}
.hx.centre>b>div{inset:2.5px;background:radial-gradient(circle at 35% 25%,#2a3aa8,#0a0f48 80%)}
.hx.centre span{font-family:var(--font-display);font-weight:800;font-size:clamp(9.5px,.98cqw,16px);color:#f6d98f}
.hx.centre svg{width:24%;color:#f6d98f}
.hx:hover{scale:1.08;z-index:3}

/* main modules: larger, solid colour, white rim, and a slow pulsing glow */
.hx.main{scale:1.13;z-index:2;cursor:pointer}
.hx.main>b{background:#fff}
.hx.main>b>div{inset:2px;background:linear-gradient(160deg, color-mix(in srgb, var(--c) 92%, #fff) 0%, color-mix(in srgb, var(--c) 70%, #060a30) 100%)}
.hx.main span{font-family:var(--font-display);font-weight:800;font-size:clamp(9.5px,1cqw,16px);color:#0a0d33}
.hx.main svg{width:24%;color:#0a0d33}
.hx.main>b>div::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);translate:-120% 0;animation:shine 4.5s ease-in-out infinite;animation-delay:calc(var(--g) * .5s)}
.hx.main:hover{scale:1.2}
@keyframes shine{0%,55%{translate:-120% 0}85%,100%{translate:120% 0}}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 3px var(--c))}50%{filter:drop-shadow(0 0 16px var(--c)) drop-shadow(0 0 5px #fff)}}

.comb.play .hx{animation:nodeIn .8s ease both;animation-delay:calc(var(--d) * .08s)}
.comb.done .hx{animation:none;opacity:1}
.comb.done .hx.main{animation:glow 2.6s ease-in-out infinite;animation-delay:calc(var(--g) * .35s)}
.comb.done.focus .hx:not(.hit):not(.centre){animation:none;filter:saturate(.2) brightness(.45)}
.grp-title{font-family:var(--font-display);font-weight:800;font-size:22px;color:#fff}
.groups{display:none}
.grp{border-left:3px solid var(--c);padding-left:14px;display:flex;flex-direction:column;gap:10px}
.grp h3{font-family:var(--font-display);font-weight:800;font-size:19px;color:var(--c)}
.grp ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.grp li{font-size:14px;font-weight:500;color:#fff;border:1px solid var(--c);background:color-mix(in srgb, var(--c) 14%, transparent);border-radius:999px;padding:5px 13px}
@media (max-width:1099px){
  .combwrap,.legend{display:none}
  .groups{display:flex;flex-direction:column;gap:24px}
}
a.node{text-decoration:none;cursor:pointer}
.label .more{display:inline-block;margin-top:6px;font-family:var(--font-display);font-weight:600;font-size:clamp(12px,1.3cqw,14.5px);color:var(--red)}
body.rt #fx{opacity:.38}

nav a.active{border-bottom-color:var(--red)}

@media (max-width:760px){
  .stage{aspect-ratio:auto;display:flex;flex-direction:column;gap:22px;padding-bottom:10px}
  .jw-title{position:static;font-size:17px;order:-1}
  .orbit,.links{display:none}
  .core{position:relative;left:auto;top:auto;translate:none;width:170px;margin:14px auto 16px}
  .core small{font-size:15px} .core strong{font-size:24px}
  .node,.node.left,.node.right{position:static;translate:none;flex-direction:row;text-align:left;gap:16px}
  .hex{width:84px}
  .label{max-width:none}
  .label h3{font-size:17px} .label p{font-size:14.5px}
  .who{grid-template-columns:1fr}
  .cloud,.cloud.flip{grid-template-columns:1fr}
  .cloud.flip .text{order:-1}

  .facts{border-left:0;padding-left:0;border-top:2px solid rgba(169,187,255,.3);flex-direction:row;flex-wrap:wrap;gap:0 28px}
  .facts li{border-bottom:0}
  .grid{grid-template-columns:1fr !important}
  .logo img{height:40px}
  nav{gap:12px;flex-wrap:nowrap}
  nav a{font-size:13px;white-space:nowrap;padding:2px 0}
  header.sheet{gap:6px}
  .page{padding-top:140px}
}

/* ---------- headlines: gold-to-white shimmer, light running along the rule, pill label ---------- */
h1,h2,.sub-h{font-size:clamp(34px,4.8vw,62px);font-weight:800;letter-spacing:-.025em;line-height:1.08;text-shadow:none;width:fit-content;max-width:100%;
  color:transparent;background:linear-gradient(100deg,#ffffff 0%,#ffffff 30%,#ffe9ad 42%,#f2bd4b 50%,#ffe9ad 58%,#ffffff 70%,#ffffff 100%) 0 0/250% 100%;
  -webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 3px 14px rgba(3,5,26,.9)) drop-shadow(0 0 22px rgba(242,189,75,.28));
  animation:headshine 6s ease-in-out infinite}
@keyframes headshine{0%,15%{background-position:100% 0}85%,100%{background-position:0 0}}
h1::after,h2::after,.sub-h::after{width:100%;min-width:140px;height:3px;margin-top:16px;border-radius:3px;
  background:linear-gradient(90deg,#f2bd4b 0,#f2bd4b 90px,rgba(242,189,75,.25) 60%,transparent 100%),linear-gradient(90deg,transparent,#fff,transparent);
  background-size:100% 100%,90px 100%;background-repeat:no-repeat;background-position:0 0,-90px 0;background-blend-mode:normal;
  box-shadow:0 0 14px rgba(242,189,75,.55);animation:rulelight 3.6s linear infinite}
h1::after,h2::after,.sub-h::after{background-image:linear-gradient(90deg,transparent,#fff,transparent),linear-gradient(90deg,#f2bd4b 0,#f2bd4b 90px,rgba(242,189,75,.25) 60%,transparent 100%);background-size:90px 100%,100% 100%;background-position:-90px 0,0 0}
@keyframes rulelight{from{background-position:-90px 0,0 0}to{background-position:calc(100% + 90px) 0,0 0}}
.kicker{display:inline-flex;align-items:center;gap:9px;width:fit-content;font-weight:700;font-size:12.500px;letter-spacing:.2em;color:#ffe9ad;text-shadow:none;
  border:1px solid rgba(242,189,75,.6);background:rgba(242,189,75,.1);border-radius:999px;padding:6px 16px 6px 12px}
.kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:#f2bd4b;box-shadow:0 0 0 0 rgba(242,189,75,.7);animation:kdot 2s ease-out infinite}
@keyframes kdot{to{box-shadow:0 0 0 9px rgba(242,189,75,0)}}
.services-head p.kicker,.mb-cap{color:#ffe9ad}