/* rt-hue (2026-10-13): shared palette + visual building blocks for the home page (pages/home-v4) and the
   custom-system landing page (pages/custom-system). The IDE chrome stays; what changes is colour and density:
   three service hues (web = cyan, AI = violet, subscription = gold, same as the RoamerHost brand gold) plus
   five extra hues for product types, bigger type and fewer words for older readers.
   Both themes follow the site toggle (site rule 2026-09-25: no dark blocks inside the light theme).
   Hue on any element: data-hue="web|ai|sub|teal|pink|blue|orange|rose" sets --c for it and its children. */

html[data-theme="dark"]{
  --hx-web:#3CC6F2; --hx-ai:#B39BFF; --hx-sub:#F5B942;
  --hx-teal:#2DD4BF; --hx-pink:#F98AC4; --hx-blue:#7AA8FF; --hx-orange:#FF9F5A; --hx-rose:#FF8A9A;
  --hx-on:#06111D;
  --hx-stage:#06121F; --hx-stage-2:#0A1A2C; --hx-surface:#0E2136; --hx-surface-2:#132A42;
  --hx-grid:rgba(120,190,230,.075); --hx-text:#EAF3FA; --hx-text-2:#C3D3E0; --hx-shadow:0 22px 50px -30px rgba(0,0,0,.85);
}
html[data-theme="light"]{
  --hx-web:#0A74AE; --hx-ai:#6D3FD9; --hx-sub:#A86300;
  --hx-teal:#0F766E; --hx-pink:#B4236E; --hx-blue:#1D4ED8; --hx-orange:#B84A0B; --hx-rose:#B91C3C;
  --hx-on:#FFFFFF;
  --hx-stage:#F3F7FB; --hx-stage-2:#FFFFFF; --hx-surface:#FFFFFF; --hx-surface-2:#F2F6FA;
  --hx-grid:rgba(10,80,130,.07); --hx-text:#0B1B2B; --hx-text-2:#33475B; --hx-shadow:0 22px 44px -30px rgba(15,40,70,.38);
}
[data-hue="web"]{--c:var(--hx-web)}[data-hue="ai"]{--c:var(--hx-ai)}[data-hue="sub"]{--c:var(--hx-sub)}
[data-hue="teal"]{--c:var(--hx-teal)}[data-hue="pink"]{--c:var(--hx-pink)}[data-hue="blue"]{--c:var(--hx-blue)}
[data-hue="orange"]{--c:var(--hx-orange)}[data-hue="rose"]{--c:var(--hx-rose)}

/* ---------- section heading: eyebrow, big h2 with a gold second line, one short sentence ---------- */
.hx-head{max-width:900px;margin:0 0 clamp(26px,3vw,42px)}
.hx-head .eyebrow{font-size:12px;letter-spacing:.12em;margin-bottom:12px}
.hx-head h2{font-size:clamp(27px,2.8vw,42px);line-height:1.28;letter-spacing:-.03em;font-weight:800}
.hx-head h2 .hl{color:var(--hx-sub)}
.hx-head p{margin:14px 0 0;font-size:clamp(16px,1.2vw,18.5px);line-height:1.75;color:var(--fg-2)}
.hx-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;margin-bottom:clamp(26px,3vw,42px)}
.hx-head-row .hx-head{margin-bottom:0}
.hx-more{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--accent);white-space:nowrap}
.hx-more:hover{text-decoration:underline;text-underline-offset:4px}

/* gold call-to-action (the primary button on these two pages) */
.action.hx-go{background:var(--hx-sub);border-color:var(--hx-sub);color:var(--hx-on);font-size:16px;padding:15px 24px;border-radius:10px;
  box-shadow:0 14px 30px -16px color-mix(in srgb,var(--hx-sub) 85%,transparent)}
.action.hx-go:hover{filter:brightness(1.06)}
.action.hx-ghost{font-size:16px;padding:15px 22px;border-radius:10px;background:var(--panel);color:var(--fg)}

/* ---------- mini window (browser / app frame used inside illustrations) ---------- */
.hx-win{position:relative;display:flex;flex-direction:column;border:1px solid color-mix(in srgb,var(--c,var(--hx-web)) 30%,var(--line));border-radius:12px;background:var(--hx-surface);overflow:hidden;box-shadow:var(--hx-shadow)}
.hx-win-bar{flex:none;display:flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-bottom:1px solid var(--line-soft);background:var(--hx-surface-2);font:10px/1 var(--font-mono);color:var(--muted);white-space:nowrap;overflow:hidden}
.hx-win-bar>i{flex:none;width:7px;height:7px;border-radius:50%;background:#FF7A7A}
.hx-win-bar>i+i{background:#FFC857}.hx-win-bar>i+i+i{background:#58D68D}
.hx-win-bar>span{margin-left:8px;overflow:hidden;text-overflow:ellipsis}
.hx-win-body{position:relative;flex:1;min-height:0}

/* ---------- case cards (partials/hx-cases): big picture on top, one line of result ---------- */
.hx-cases{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:18px}
.hx-case{--c:var(--hx-web);display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:var(--panel);overflow:hidden;box-shadow:var(--card-shadow);transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.hx-case:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 55%,var(--line));box-shadow:0 26px 50px -30px color-mix(in srgb,var(--c) 60%,transparent)}
.hx-case-art{position:relative;height:172px;overflow:hidden;border-bottom:1px solid var(--line-soft);
  background:radial-gradient(70% 90% at 80% 0%,color-mix(in srgb,var(--c) 20%,transparent),transparent 70%),var(--hx-stage)}
.hx-case-art::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--hx-grid) 1px,transparent 1px),linear-gradient(90deg,var(--hx-grid) 1px,transparent 1px);background-size:22px 22px}
.hx-case-body{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px;flex:1}
.hx-case-body small{font:600 12px/1.4 var(--font-mono);letter-spacing:.04em;color:var(--c)}
.hx-case-body h3{font-size:19px;line-height:1.4;font-weight:800}
.hx-case-body p{margin:2px 0 0;font-size:15.5px;line-height:1.7;color:var(--fg-2)}
.hx-case-go{margin-top:auto;padding-top:10px;font-size:14.5px;font-weight:700;color:var(--c)}

/* case art 1: risk band chart (blue) */
.hxa-band svg{position:absolute;inset:18px 18px 22px;width:calc(100% - 36px);height:calc(100% - 40px);overflow:visible}
.hxa-band .band{fill:color-mix(in srgb,var(--c) 22%,transparent);stroke:none;opacity:0;transition:opacity .9s ease .6s}
.hxa-band .mid{fill:none;stroke:var(--c);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1)}
.hxa-band .tag{position:absolute;right:16px;top:14px;padding:4px 9px;border-radius:99px;background:color-mix(in srgb,var(--c) 16%,var(--hx-surface));border:1px solid color-mix(in srgb,var(--c) 40%,transparent);font:600 11px/1.2 var(--font-mono);color:var(--c)}
.in-view .hxa-band .band{opacity:1}.in-view .hxa-band .mid{stroke-dashoffset:0}
/* case art 2: timetable that fills itself (teal) */
.hxa-grid{display:grid;place-items:center}
.hxa-grid .tt{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:4px;width:min(78%,250px)}
.hxa-grid .tt i{height:17px;border-radius:4px;background:var(--hx-surface-2);border:1px solid var(--line-soft)}
.hxa-grid .tt i.f{background:color-mix(in srgb,var(--c) var(--a,55%),var(--hx-surface));border-color:transparent;transform:scale(.4);opacity:0;transition:transform .4s cubic-bezier(.2,.9,.3,1.3),opacity .4s;transition-delay:calc(var(--d,0) * 70ms + .3s)}
.in-view .hxa-grid .tt i.f{transform:none;opacity:1}
.hxa-grid .ok{position:absolute;right:14px;bottom:12px;padding:4px 10px;border-radius:99px;background:var(--c);color:var(--hx-on);font:700 11.5px/1.2 var(--font-sans)}
/* case art 3: chat bubble builds a page (gold) */
.hxa-chat{display:grid;grid-template-columns:1fr 1.1fr;gap:12px;align-items:center;padding:18px}
.hxa-chat .say{justify-self:start;max-width:100%;padding:9px 12px;border-radius:12px 12px 12px 3px;background:var(--c);color:var(--hx-on);font-size:13px;font-weight:700;line-height:1.45}
.hxa-chat .pg{height:118px;border-radius:9px;border:1px solid var(--line);background:var(--hx-surface);padding:9px;display:flex;flex-direction:column;gap:6px}
.hxa-chat .pg i{display:block;height:9px;border-radius:3px;background:var(--line)}
.hxa-chat .pg i.h{height:30px;background:linear-gradient(110deg,color-mix(in srgb,var(--c) 40%,var(--hx-surface)),color-mix(in srgb,var(--hx-pink) 30%,var(--hx-surface)))}
.hxa-chat .pg i.new{height:24px;background:transparent;border:1.5px dashed var(--c);clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.4,0,.2,1) .7s}
.in-view .hxa-chat .pg i.new{clip-path:inset(0)}
/* case art 4: steady climb with checkpoints (web) */
.hxa-climb svg{position:absolute;inset:20px 20px 24px;width:calc(100% - 40px);height:calc(100% - 44px);overflow:visible}
.hxa-climb .ln{fill:none;stroke:var(--c);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1)}
.hxa-climb .pt{fill:var(--hx-surface);stroke:var(--c);stroke-width:2.2;opacity:0;transition:opacity .3s}
.in-view .hxa-climb .ln{stroke-dashoffset:0}
.in-view .hxa-climb .pt{opacity:1}
.in-view .hxa-climb .pt:nth-of-type(1){transition-delay:.7s}.in-view .hxa-climb .pt:nth-of-type(2){transition-delay:1s}.in-view .hxa-climb .pt:nth-of-type(3){transition-delay:1.35s}

/* ---------- showcase (partials/hx-show): coloured icon tiles switch a big panel; feel borrowed from the
   /roamerhost showcase (tile glide, page turn, light sweep, outline number), layout our own. JS: public/js/rt-hue.js ---------- */
.hxs{container:hxs/inline-size;position:relative}
.hxs-tabs{position:relative;display:flex;justify-content:space-between;gap:6px;margin:0 0 6px;padding:4px 2px 0}
.hxs-tab{position:relative;flex:1 1 0;min-width:76px;display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 2px 16px;border:0;background:none;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent}
.hxs-ti{position:relative;display:grid;place-items:center;width:62px;height:62px;border-radius:18px;color:#fff;
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 78%,#fff) 0%,var(--c) 45%,color-mix(in srgb,var(--c) 62%,#04101C) 100%);
  box-shadow:0 12px 26px -16px var(--c),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .35s cubic-bezier(.16,.84,.3,1),box-shadow .3s,filter .3s;filter:saturate(.72) brightness(.92)}
.hxs-ti svg{width:30px;height:30px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.hxs-tn{font-size:14px;font-weight:700;line-height:1.35;white-space:nowrap;transition:color .25s}
.hxs-prog{position:absolute;left:50%;bottom:3px;width:34px;height:3px;margin-left:-17px;border-radius:2px;background:var(--line);overflow:hidden;opacity:0;transition:opacity .3s}
.hxs-prog::after{content:"";position:absolute;inset:0;background:var(--c);transform:scaleX(0);transform-origin:left}
.hxs-tab:hover .hxs-ti{transform:translateY(-3px);filter:none}
.hxs-tab:hover .hxs-tn{color:var(--fg)}
.hxs-tab[aria-selected="true"] .hxs-ti{transform:translateY(-4px) scale(1.06);filter:none;box-shadow:0 0 0 2px var(--panel),0 0 0 4.5px var(--c),0 16px 34px -14px var(--c)}
.hxs-tab[aria-selected="true"] .hxs-tn{color:var(--fg);font-weight:800}
.hxs-tab[aria-selected="true"] .hxs-prog{opacity:1}
.hxs-tab[aria-selected="true"] .hxs-prog::after{transform:none}
.hxs.is-auto .hxs-tab[aria-selected="true"] .hxs-prog::after{transform:scaleX(0);animation:hxs-fill var(--auto,7000ms) linear forwards}
.hxs.is-hold .hxs-tab[aria-selected="true"] .hxs-prog::after,.hxs.is-away .hxs-tab[aria-selected="true"] .hxs-prog::after{animation-play-state:paused}
@keyframes hxs-fill{to{transform:none}}
.hxs-tab:focus-visible{outline:none}
.hxs-tab:focus-visible .hxs-ti{outline:2px solid var(--c);outline-offset:5px}
.hxs-tab.is-hop .hxs-ti{animation:hxs-hop .6s ease-out}
@keyframes hxs-hop{45%{transform:translateY(-11px) scale(1.14) rotate(-7deg)}75%{transform:translateY(-3px) scale(1.02) rotate(2deg)}}

.hxs-stage{position:relative;margin-top:18px}
.hxs-stage.is-morph{transition:height .55s cubic-bezier(.16,.84,.3,1)}
.hxs-panel{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(26px,3.4vw,52px);padding:clamp(14px,1.6vw,22px);border:1px solid var(--line);border-radius:24px;overflow:hidden;
  background:radial-gradient(60% 80% at 100% 100%,color-mix(in srgb,var(--c) 9%,transparent),transparent 70%),var(--panel);box-shadow:var(--card-shadow)}
.hxs-panel[hidden]{display:none}
.hxs-body{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:10px clamp(4px,1.6vw,22px) 10px 0}
.hxs-title{display:flex;align-items:center;gap:16px}
.hxs-title .hxs-ti{width:58px;height:58px;filter:none;flex:none}
.hxs-title h3{font-size:clamp(24px,2.3vw,32px);font-weight:900;line-height:1.25;letter-spacing:-.02em;color:var(--fg)}
.hxs-title p{margin:4px 0 0;font-size:15px;font-weight:600;color:var(--c)}
.hxs-desc{margin:20px 0 0;max-width:34em;font-size:clamp(16px,1.25vw,17.5px);line-height:1.85;color:var(--fg-2)}
.hxs-tags{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 0;padding:0;list-style:none}
.hxs-tags li{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:9px;background:var(--panel-2);border:1px solid var(--line-soft);font-size:14.5px;font-weight:600;color:var(--fg)}
.hxs-tags svg{width:14px;height:14px;color:var(--c)}
.hxs-fit{margin-top:22px;padding:4px 0 4px 16px;border-left:3px solid var(--c)}
.hxs-fit b{display:block;font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--c)}
.hxs-fit p{margin:5px 0 0;font-size:16px;font-weight:700;line-height:1.7;color:var(--fg)}
.hxs-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:26px}
.hxs-no{position:absolute;right:22px;bottom:-34px;font-size:clamp(120px,13cqw,190px);font-weight:900;line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--c) 26%,transparent);pointer-events:none;z-index:0}

/* left: a scene in a dotted stage — a browser window with a real screenshot, two feature chips and a case label */
.hxs-scene{position:relative;display:block;min-height:clamp(300px,30cqw,430px);border-radius:18px;overflow:hidden;isolation:isolate;color:var(--fg);
  background:radial-gradient(80% 90% at 75% 0%,color-mix(in srgb,var(--c) 26%,transparent),transparent 70%),radial-gradient(50% 60% at 0% 100%,color-mix(in srgb,var(--hx-sub) 12%,transparent),transparent 70%),var(--hx-stage);border:1px solid var(--line-soft)}
.hxs-scene::before{content:"";position:absolute;inset:0;z-index:0;background-image:radial-gradient(var(--hx-grid) 1.2px,transparent 1.6px);background-size:22px 22px}
.hxs-win{position:absolute;left:9%;right:7%;top:11%;bottom:-6%;z-index:1;box-shadow:0 30px 60px -30px rgba(0,0,0,.7),0 0 0 1px color-mix(in srgb,var(--c) 22%,transparent)}
.hxs-win .hx-win-bar{height:28px;font-size:11.5px}
.hxs-url{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding:3px 11px;border-radius:99px;background:var(--hx-surface);border:1px solid var(--line-soft);color:var(--hx-text-2)}
.hxs-url svg{width:11px;height:11px;color:var(--c)}
.hxs-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;transform-origin:50% 0}
.hxs-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:13px;background:var(--hx-surface);border:1px solid color-mix(in srgb,var(--c) 45%,var(--line));
  box-shadow:var(--hx-shadow);font-size:14px;font-weight:800;color:var(--hx-text);white-space:nowrap}
.hxs-chip svg{width:16px;height:16px;flex:none;color:var(--c)}
.hxs-chip.c1{left:3%;bottom:14%}
.hxs-chip.c2{right:3%;top:22%}
.hxs-case{position:absolute;z-index:3;left:3%;top:4%;display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 9px;border-radius:99px;background:var(--c);color:var(--hx-on);font-size:12.5px;font-weight:800;box-shadow:0 10px 24px -12px var(--c)}
.hxs-case svg{width:14px;height:14px}

/* page turn: old panel slides off, new one slides in, a light sweeps the scene, the text rises in order */
.hxs-panel.is-wait .hxs-scene,.hxs-panel.is-wait .hxs-body>*,.hxs-panel.is-wait .hxs-no{opacity:0}
.hxs-panel.is-leave{position:absolute;left:0;right:0;top:0;z-index:2;pointer-events:none;animation:hxs-leave .45s cubic-bezier(.55,0,.75,.3) both}
.hxs-panel.is-show{animation:hxs-enter .7s cubic-bezier(.16,.84,.3,1) .05s both}
.hxs-panel.is-show .hxs-scene{animation:hxs-wipe .85s cubic-bezier(.77,0,.18,1) .1s both}
.hxs-panel.is-show.is-back .hxs-scene{animation-name:hxs-wipe-back}
.hxs-panel.is-show .hxs-scene::after{content:"";position:absolute;top:0;bottom:0;z-index:5;width:4px;background:linear-gradient(var(--c),var(--hx-sub));box-shadow:0 0 18px 4px color-mix(in srgb,var(--c) 55%,transparent);animation:hxs-sweep .85s cubic-bezier(.77,0,.18,1) .1s both}
.hxs-panel.is-show .hxs-win{animation:hxs-rise .9s cubic-bezier(.16,.84,.3,1) .25s both}
.hxs-panel.is-show .hxs-shot{animation:hxs-pan 9s ease-in-out 1s both}
.hxs-panel.is-show .hxs-chip{animation:hxs-pop .6s cubic-bezier(.2,.9,.3,1.3) .75s both}
.hxs-panel.is-show .hxs-chip.c2{animation-delay:.95s}
.hxs-panel.is-show .hxs-case{animation:hxs-pop .6s cubic-bezier(.2,.9,.3,1.3) .55s both}
.hxs-panel.is-show .hxs-body>*{animation:hxs-up .7s cubic-bezier(.16,.84,.3,1) .2s both}
.hxs-panel.is-show .hxs-body>:nth-child(2){animation-delay:.27s}.hxs-panel.is-show .hxs-body>:nth-child(3){animation-delay:.34s}
.hxs-panel.is-show .hxs-body>:nth-child(4){animation-delay:.41s}.hxs-panel.is-show .hxs-body>:nth-child(5){animation-delay:.48s}
.hxs-panel.is-show .hxs-title .hxs-ti{animation:hxs-logo .8s cubic-bezier(.34,1.56,.64,1) .25s both}
.hxs-panel.is-show .hxs-no{animation:hxs-no 1s cubic-bezier(.16,.84,.3,1) .15s both}
@keyframes hxs-leave{to{opacity:0;transform:translateX(calc(var(--dir,1) * -56px)) rotate(calc(var(--dir,1) * -1.2deg)) scale(.95)}}
@keyframes hxs-enter{from{opacity:0;transform:translateX(calc(var(--dir,1) * 48px)) scale(.97)}}
@keyframes hxs-wipe{from{clip-path:inset(0 100% 0 0 round 18px)}to{clip-path:inset(0 0 0 0 round 18px)}}
@keyframes hxs-wipe-back{from{clip-path:inset(0 0 0 100% round 18px)}to{clip-path:inset(0 0 0 0 round 18px)}}
@keyframes hxs-sweep{0%{left:0;opacity:1}85%{opacity:1}100%{left:calc(100% - 4px);opacity:0}}
@keyframes hxs-rise{from{opacity:0;transform:translateY(40px) scale(.96)}}
@keyframes hxs-pan{0%{transform:none}50%{transform:scale(1.07) translateY(-2%)}100%{transform:scale(1.03)}}
@keyframes hxs-pop{from{opacity:0;transform:translateY(12px) scale(.86)}}
@keyframes hxs-up{from{opacity:0;transform:translate(calc(var(--dir,1) * 22px),14px)}}
@keyframes hxs-logo{0%{transform:scale(.4) rotate(-14deg);opacity:0}}
@keyframes hxs-no{from{opacity:0;transform:translateX(calc(var(--dir,1) * 70px))}}

@container hxs (max-width:980px){
  .hxs-tabs{justify-content:flex-start;gap:2px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:6px 4px 2px}
  .hxs-tabs::-webkit-scrollbar{display:none}
  .hxs-tab{flex:none;min-width:92px;scroll-snap-align:center}
}
@container hxs (max-width:820px){
  .hxs-panel{grid-template-columns:1fr;gap:22px;padding:12px}
  .hxs-body{padding:0 8px 12px}
  .hxs-scene{min-height:280px}
  .hxs-no{font-size:110px;bottom:-22px;right:12px}
}
@container hxs (max-width:520px){
  .hxs-ti{width:54px;height:54px;border-radius:15px}
  .hxs-ti svg{width:26px;height:26px}
  .hxs-tn{font-size:13px}
  .hxs-scene{min-height:240px}
  .hxs-win{left:5%;right:5%;top:15%}
  .hxs-chip{padding:8px 11px;font-size:12.5px}
  .hxs-chip.c2{top:auto;bottom:3%;right:3%}
  .hxs-chip.c1{bottom:15%}
  .hxs-ctas{flex-direction:column;align-items:stretch}
  .hxs-ctas .action{width:100%}
  .hxs-no{display:none}
}

/* ---------- client website wall (partials/hx-works) ---------- */
.hx-works{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.hx-work{display:block;border-radius:14px;color:inherit}
.hx-work-shot{position:relative;display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--hx-surface-2);box-shadow:var(--card-shadow);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.hx-work-shot::before{content:"";position:absolute;inset:0 0 auto;height:22px;z-index:1;border-bottom:1px solid var(--line-soft);
  background:radial-gradient(circle at 14px 11px,#FF7A7A 3.2px,transparent 3.8px),radial-gradient(circle at 26px 11px,#FFC857 3.2px,transparent 3.8px),radial-gradient(circle at 38px 11px,#58D68D 3.2px,transparent 3.8px),var(--hx-surface-2)}
.hx-work-shot img{position:absolute;inset:22px 0 0;width:100%;height:calc(100% - 22px);object-fit:cover;object-position:top;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.hx-work:hover .hx-work-shot{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 60%,var(--line));box-shadow:0 26px 50px -28px color-mix(in srgb,var(--c) 70%,transparent)}
.hx-work:hover .hx-work-shot img{transform:scale(1.05)}
.hx-work-meta{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:12px 4px 0}
.hx-work-meta b{font-size:16px;font-weight:800;color:var(--fg)}
.hx-work-meta small{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--c)}
.hx-work-meta small::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--c)}
[data-reveal] .hx-works li{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 70ms)}
[data-reveal].in-view .hx-works li{opacity:1;transform:none}

/* ---------- running chip band (integrations) ---------- */
.hx-marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hx-marquee+.hx-marquee{margin-top:12px}
.hx-marquee ul{display:flex;gap:12px;width:max-content;margin:0;padding:4px 0;list-style:none;animation:hx-run var(--dur,46s) linear infinite}
.hx-marquee.is-rev ul{animation-direction:reverse}
.hx-marquee:hover ul{animation-play-state:paused}
.hx-marquee li{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border:1px solid var(--line);border-radius:99px;background:var(--panel);font-size:15px;font-weight:600;color:var(--fg);white-space:nowrap}
.hx-marquee li i{width:9px;height:9px;border-radius:50%;background:var(--c,var(--hx-web));box-shadow:0 0 0 4px color-mix(in srgb,var(--c,var(--hx-web)) 18%,transparent)}
@keyframes hx-run{to{transform:translateX(calc(-50% - 6px))}}

@media (max-width:1180px){.hx-cases{grid-template-columns:repeat(2,minmax(0,1fr))}.hx-works{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* phones/tablets: the page-turn slide (hxs-enter/-leave/-no) pushed the panel ~48px past the viewport → brief sideways scroll */
@media (max-width:900px){.hxs-stage{overflow-x:clip}}
@media (max-width:640px){
  .hx-cases{grid-template-columns:1fr}
  .hx-works{gap:14px 12px}
  .hx-work-meta{flex-direction:column;gap:2px;padding-top:9px}
  .hx-work-meta b{font-size:14.5px}
  .hx-work-meta small{font-size:12.5px}
  .hx-case-art{height:150px}
  .hx-head h2{font-size:clamp(25px,7.2vw,32px)}
  .action.hx-go,.action.hx-ghost{font-size:15px;padding:14px 18px}
}
@media (prefers-reduced-motion:reduce){
  .hxs *,.hxs *::before,.hxs *::after{animation:none!important;transition:none!important}
  .hx-marquee ul{animation:none;flex-wrap:wrap;width:auto}
  .hxa-band .mid,.hxa-climb .ln{stroke-dashoffset:0!important;transition:none}
  .hxa-band .band,.hxa-climb .pt,.hxa-grid .tt i.f{opacity:1!important;transform:none!important;transition:none}
  .hxa-chat .pg i.new{clip-path:none;transition:none}
}