/* /hubspot landing page (pages/hubspot, 2026-10-14). Needs public/css/rt-hue.css (tokens, .hx-*). JS: public/js/pg-hubspot.js.
   1. hero: customer data from four sources flows into one CRM; the root's data-step (0 collect, 1 merge, 2 assign, 3 remind)
      drives every state. One looping animation with a corner pause button (no chapter bar, owner 2026-10-14). Each state is written as its final look and the animation (fill both) plays the entrance, so a
      paused or reduced-motion frame still reads correctly.
   2. three jobs with looping mini pictures ([data-ph-loop] runs only on screen), 3. chooser, 4. AI films, 5. pipeline.
   Colours are tokens only; light-theme tweaks sit at the end. */

@property --cc{syntax:'<color>';inherits:true;initial-value:#3CC6F2}

.ph-wrap{max-width:1500px;margin:0 auto;padding:clamp(18px,2.4vw,34px) clamp(16px,3vw,48px) 0}
.ph-sec{padding:clamp(56px,6.4vw,96px) 0 0;scroll-margin-top:calc(var(--nav-h) + 16px)}
[data-ph-loop]:not(.is-live),[data-ph-loop]:not(.is-live) *{animation-play-state:paused!important}

/* ================= 1. HERO ================= */
.ph-hero{--c:var(--hx-web);--cc:var(--c);transition:--cc .9s ease;position:relative;container-type:inline-size;border:1px solid var(--line);border-radius:20px;overflow:hidden;isolation:isolate;background:var(--chrome);
  box-shadow:0 34px 80px -46px rgba(0,0,0,.85),0 0 110px -60px var(--cc)}
.ph-frame{position:relative;display:grid;min-height:max(560px,42cqw);overflow:hidden;isolation:isolate;background:var(--hx-stage);color:var(--hx-text)}
.ph-frame::before{content:"";position:absolute;inset:0;z-index:0;background-image:radial-gradient(var(--hx-grid) 1.2px,transparent 1.6px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(80% 90% at 70% 45%,#000 30%,transparent 85%);mask-image:radial-gradient(80% 90% at 70% 45%,#000 30%,transparent 85%)}
.ph-fx{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
.ph-aura{position:absolute;inset:-25%;z-index:0;pointer-events:none;
  background:radial-gradient(34% 40% at 76% 46%,color-mix(in srgb,var(--cc) 28%,transparent),transparent 70%),
             radial-gradient(26% 32% at 14% 88%,color-mix(in srgb,var(--hx-teal) 14%,transparent),transparent 70%),
             radial-gradient(24% 28% at 32% 6%,color-mix(in srgb,var(--hx-sub) 14%,transparent),transparent 70%);
  animation:ph-drift 20s ease-in-out infinite alternate}
@keyframes ph-drift{to{transform:translate3d(-3%,2%,0) scale(1.06)}}
.ph-body{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:center;gap:3cqw;padding:3.6cqw 3.6cqw 3.6cqw 4.6cqw}

/* copy */
.ph-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;padding:7px 16px;border:1px solid color-mix(in srgb,var(--cc) 45%,var(--line));border-radius:99px;background:color-mix(in srgb,var(--cc) 9%,transparent);font:600 14.5px/1.3 var(--font-sans);letter-spacing:.04em;color:var(--hx-text-2)}
.ph-kicker i{width:8px;height:8px;border-radius:50%;background:var(--cc);box-shadow:0 0 10px var(--cc);animation:ph-blink 1.8s ease-in-out infinite}
@keyframes ph-blink{50%{opacity:.25}}
.ph-hero h1{margin:0;font-size:clamp(34px,3.9cqw,60px);line-height:1.14;letter-spacing:-.035em;font-weight:900;color:var(--hx-text);word-break:keep-all;text-wrap:balance}
.ph-hero h1 span{display:block}
.ph-hero h1 .g{margin-top:.2em;font-size:.68em;line-height:1.25;letter-spacing:-.02em;background:linear-gradient(100deg,var(--hx-teal) 0%,var(--hx-web) 40%,var(--hx-sub) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ph-now{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin:24px 0 0;font-size:clamp(17px,1.5cqw,21px);font-weight:700;color:var(--hx-text-2)}
.ph-now b{display:inline-flex;align-items:center;gap:9px;min-width:6.4em;padding:7px 15px;border-radius:11px;background:color-mix(in srgb,var(--cc) 15%,transparent);border:1px solid color-mix(in srgb,var(--cc) 50%,transparent);color:var(--cc);font-weight:800}
.ph-now b::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--cc)}
.ph-now b.is-swap{animation:ph-swap .5s cubic-bezier(.2,.8,.2,1)}
@keyframes ph-swap{from{opacity:0;transform:translateY(10px)}}
.ph-lead{margin:18px 0 0;max-width:30em;font-size:18px;line-height:1.8;color:var(--hx-text-2)}
.ph-hero .actions{margin-top:28px;gap:12px}

/* visual: sources | lanes | CRM window */
.ph-visual{position:relative;display:grid;grid-template-columns:clamp(112px,10.5cqw,148px) minmax(30px,.62fr) minmax(0,2.6fr);height:clamp(420px,38cqw,540px)}
.ph-src{position:relative;z-index:3;display:grid;grid-template-rows:repeat(4,1fr);margin:0;padding:0;list-style:none}
.ph-src li{display:flex;align-items:center;gap:10px;min-width:0}
.ph-src .ic{position:relative;flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;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 -14px var(--c)}
.ph-src .ic svg{width:24px;height:24px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.ph-src .ic::after{content:"";position:absolute;inset:-3px;border-radius:16px;border:2px solid var(--c);opacity:0}
.ph-hero[data-step="0"] .ph-src .ic::after{animation:ph-ping 1.1s ease-out both;animation-delay:calc(var(--l) * .35s + .15s)}
@keyframes ph-ping{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.45)}}
.ph-src b{font-size:14.5px;font-weight:800;color:var(--hx-text);white-space:nowrap}
.ph-lanes{position:relative;z-index:1;display:grid;grid-template-rows:repeat(4,1fr);margin-left:-8px}
.ph-lane{position:relative}
.ph-lane::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:2px;
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--c) 60%,transparent) 0 7px,transparent 7px 13px);background-size:26px 2px;animation:ph-dash 1.3s linear infinite;opacity:.65}
@keyframes ph-dash{to{background-position:26px 0}}
.ph-pk{position:absolute;inset:0;pointer-events:none;opacity:0}
.ph-pk::before{content:"";position:absolute;left:0;top:50%;width:24px;height:12px;margin-top:-6px;border-radius:99px;background:var(--c);box-shadow:0 0 14px var(--c),0 0 0 3px color-mix(in srgb,var(--c) 25%,transparent)}
.ph-hero[data-step="0"] .ph-pk{animation:ph-travel .9s cubic-bezier(.55,0,.45,1) both;animation-delay:calc(var(--n) * .8s + .3s)}
@keyframes ph-travel{0%{opacity:0;transform:translateX(0)}12%,88%{opacity:1}100%{opacity:0;transform:translateX(calc(100% - 24px))}}

.ph-crm{position:relative;z-index:2;align-self:center;height:94%;--c:var(--cc);
  transform:perspective(1400px) rotateY(var(--ry,-7deg)) rotateX(var(--rx,2deg));transition:transform .7s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 44px 90px -44px rgba(0,0,0,.9),0 0 0 1px color-mix(in srgb,var(--cc) 30%,transparent),0 0 70px -24px color-mix(in srgb,var(--cc) 60%,transparent)}
.ph-crm .hx-win-bar{height:30px;font-size:12px}
.ph-demo{margin-left:10px;padding:2px 9px;border-radius:99px;border:1px solid var(--line);font:600 12px/1.4 var(--font-sans);font-style:normal;color:var(--hx-text-2)}
.ph-crm .hx-win-body{display:flex;flex-direction:column;padding:12px 14px 14px;overflow:hidden}
.ph-cols,.ph-row .in{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) minmax(0,.85fr) 20px;gap:10px;align-items:center}
.ph-cols{padding:2px 10px 9px;border-bottom:1px solid var(--line-soft);font:600 12px/1 var(--font-mono);letter-spacing:.04em;color:var(--hx-text-2)}
.ph-rows{margin:0;padding:0;list-style:none}
.ph-row{max-height:64px;overflow:hidden;border-bottom:1px solid var(--line-soft)}
.ph-row .in{position:relative;padding:9px 10px;border-radius:10px}
.ph-row .nm{display:flex;align-items:center;gap:10px;min-width:0}
.ph-row .av{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--c) 22%,var(--hx-surface));border:1px solid color-mix(in srgb,var(--c) 45%,transparent);color:var(--c);font-style:normal;font-size:13px;font-weight:800}
.ph-row .nm>span{display:flex;flex-direction:column;min-width:0}
.ph-row .nm b{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:800;color:var(--hx-text);white-space:nowrap}
.ph-row .nm small{font-size:12px;color:var(--hx-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-row .src{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:12.5px;font-weight:700;color:var(--c);white-space:nowrap;overflow:hidden}
.ph-row .src svg{flex:none;width:15px;height:15px}
.ph-row .own i{display:inline-block;padding:4px 9px;border-radius:99px;background:color-mix(in srgb,var(--hx-sub) 18%,var(--hx-surface));border:1px solid color-mix(in srgb,var(--hx-sub) 50%,transparent);color:var(--hx-sub);font-style:normal;font-size:12px;font-weight:800;white-space:nowrap}
.ph-row .bell{display:grid;place-items:center;color:var(--hx-orange)}
.ph-row .bell svg{width:17px;height:17px;opacity:0}
.mg{display:inline-block;padding:2px 7px;border-radius:99px;background:var(--hx-ai);color:var(--hx-on);font-style:normal;font-size:12px;font-weight:800;line-height:1.4;opacity:0;transform:scale(.6)}

/* step 0: rows arrive one after another, each right after its packet */
.ph-hero[data-step="0"] .ph-row{animation:ph-row .55s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:calc(var(--n) * .8s + 1.12s)}
.ph-hero[data-step="0"] .ph-row .in{animation:ph-flash 1.3s ease both;animation-delay:calc(var(--n) * .8s + 1.12s)}
@keyframes ph-row{from{opacity:0;transform:translateX(-22px) scale(.97)}}
@keyframes ph-flash{0%{background:color-mix(in srgb,var(--c) 24%,transparent)}100%{background:transparent}}
/* step 1: the two 陳先生 light up, one folds away, the other says 合併 2 筆 */
.ph-hero:not([data-step="0"]) .ph-row.dup-b{max-height:0;opacity:0;border-bottom-color:transparent}
.ph-hero[data-step="1"] .ph-row.dup-b{animation:ph-fold .6s cubic-bezier(.6,0,.3,1) 1.6s both}
@keyframes ph-fold{from{max-height:64px;opacity:1;border-bottom-color:var(--line-soft)}}
.ph-hero[data-step="1"] .ph-row.is-dup .in{animation:ph-dup 1.6s ease .2s both}
@keyframes ph-dup{0%,100%{box-shadow:inset 0 0 0 0 transparent;background:transparent}25%,80%{box-shadow:inset 0 0 0 2px var(--hx-ai);background:color-mix(in srgb,var(--hx-ai) 12%,transparent)}}
.ph-hero:not([data-step="0"]) .mg{opacity:1;transform:none}
.ph-hero[data-step="1"] .mg{animation:ph-pop .45s cubic-bezier(.2,.9,.3,1.4) 2s both}
@keyframes ph-pop{from{opacity:0;transform:scale(.5)}}
/* step 2: owners pop in */
.ph-row .own i{opacity:0;transform:scale(.6)}
.ph-hero:is([data-step="2"],[data-step="3"]) .ph-row .own i{opacity:1;transform:none}
.ph-hero[data-step="2"] .ph-row .own i{animation:ph-pop .45s cubic-bezier(.2,.9,.3,1.4) both;animation-delay:calc(var(--k) * .4s + .35s)}
/* step 3: the follow-up row rings, a notification slides in */
.ph-hero[data-step="3"] .ph-row.is-remind .bell svg{opacity:1;animation:ph-ring .9s ease .35s 2 both}
@keyframes ph-ring{0%{transform:rotate(0)}15%{transform:rotate(18deg)}30%{transform:rotate(-15deg)}45%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}75%,100%{transform:rotate(0)}}
.ph-hero[data-step="3"] .ph-row.is-remind .in{background:color-mix(in srgb,var(--hx-orange) 13%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--hx-orange) 60%,transparent);animation:ph-remind .5s ease .3s both}
@keyframes ph-remind{from{background:transparent;box-shadow:inset 0 0 0 0 transparent}}
.ph-toast{position:absolute;left:14px;right:14px;bottom:14px;z-index:3;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--hx-surface);border:1px solid color-mix(in srgb,var(--hx-orange) 55%,var(--line));box-shadow:var(--hx-shadow);opacity:0;transform:translateY(18px);pointer-events:none}
.ph-toast .ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--hx-orange);color:var(--hx-on)}
.ph-toast .ic svg{width:19px;height:19px}
.ph-toast b{display:block;font-size:14.5px;font-weight:800;color:var(--hx-text)}
.ph-toast small{display:block;margin-top:2px;font-size:12.5px;color:var(--hx-text-2)}
.ph-hero[data-step="3"] .ph-toast{opacity:1;transform:none;animation:ph-toast .55s cubic-bezier(.2,.9,.3,1.15) .95s both}
@keyframes ph-toast{from{opacity:0;transform:translateY(18px)}}

.ph-chip{position:absolute;z-index:4;right:0;top:-30px;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;background:var(--hx-surface);border:1px solid color-mix(in srgb,var(--cc) 50%,var(--line));
  box-shadow:var(--hx-shadow);font-size:clamp(12.5px,1.05cqw,14px);font-weight:800;color:var(--hx-text);white-space:nowrap}
.ph-chip svg{width:16px;height:16px;flex:none;color:var(--cc)}
.ph-chip.is-pop{animation:ph-chip .6s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes ph-chip{from{opacity:0;transform:translateY(12px) scale(.85)}}

/* corner pause button (the four steps are one looping animation, so no chapter bar) */
.ph-tog{position:absolute;right:14px;bottom:14px;z-index:5;width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:99px;
  background:color-mix(in srgb,var(--panel) 82%,transparent);color:var(--fg);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .2s,color .2s}
.ph-tog:hover{border-color:var(--cc);color:var(--cc)}
.ph-tog svg{width:15px;height:15px;fill:currentColor}
.ph-tog .i-play,.ph-hero.is-paused .ph-tog .i-pause{display:none}
.ph-hero.is-paused .ph-tog .i-play{display:block}
.ph-hero:is(.is-paused,.is-away) *,.ph-hero:is(.is-paused,.is-away) *::before,.ph-hero:is(.is-paused,.is-away) *::after{animation-play-state:paused!important}
.ph-hero :is(button,a):focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ================= 2. THREE JOBS ================= */
.ph-jobs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0;padding:0;list-style:none}
.ph-job{display:flex;flex-direction:column;min-width:0;border:1px solid color-mix(in srgb,var(--c) 28%,var(--line));border-radius:16px;background:var(--panel);overflow:hidden;box-shadow:var(--card-shadow);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.ph-job:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 55%,var(--line));box-shadow:0 28px 54px -32px color-mix(in srgb,var(--c) 70%,transparent)}
.ph-job-art{position:relative;height:254px;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line-soft);
  background:radial-gradient(60% 70% at 50% 55%,color-mix(in srgb,var(--c) 15%,transparent),transparent 75%),var(--hx-stage)}
.ph-job-art::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(var(--hx-grid) 1.2px,transparent 1.6px);background-size:20px 20px}
.mj-demo{position:absolute;right:12px;bottom:10px;padding:2px 9px;border-radius:99px;border:1px solid var(--line);background:var(--hx-surface);font-size:12px;font-weight:700;color:var(--hx-text-2)}
.ph-job-body{display:flex;flex-direction:column;gap:14px;flex:1;padding:24px 26px 26px}
.ph-job-title{display:flex;align-items:center;gap:14px}
.ph-ti{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;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)}
.ph-ti svg{width:26px;height:26px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.ph-job-title h3{font-size:21px;font-weight:800;line-height:1.35;color:var(--fg)}
.ph-job-title p{margin:3px 0 0;font-size:16px;font-weight:700;color:var(--c)}
.ph-job-text{margin:0;font-size:16.5px;line-height:1.75;color:var(--fg-2)}
.ph-tags{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0;padding:0;list-style:none}
.ph-tags li{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:9px;background:var(--panel-2);border:1px solid var(--line-soft);font-size:15.5px;font-weight:600;color:var(--fg)}
.ph-tags svg{width:14px;height:14px;color:var(--c)}
.ph-job-body>.hx-more{align-self:flex-start;min-height:40px;margin-top:auto}

/* mini 1: three records fold into one */
.mj-recs{position:absolute;left:9%;right:9%;top:24px;display:flex;flex-direction:column;gap:10px}
.mj-recs .rec{position:relative;display:flex;align-items:center;gap:11px;height:52px;padding:0 14px;border-radius:13px;background:var(--hx-surface);border:1px solid var(--line-soft);box-shadow:var(--hx-shadow)}
.mj-recs .av{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--c) 20%,var(--hx-surface));color:var(--c);font-style:normal;font-size:13px;font-weight:800}
.mj-recs span{display:flex;flex-direction:column;min-width:0}
.mj-recs b{font-size:14px;font-weight:800;color:var(--hx-text);white-space:nowrap}
.mj-recs small{font-size:12px;color:var(--hx-text-2);white-space:nowrap}
.mj-recs small.miss{color:var(--hx-orange);font-weight:700}
.mj-recs .ok{position:absolute;right:10px;top:50%;display:inline-flex;align-items:center;gap:5px;margin-top:-12px;padding:4px 10px;border-radius:99px;background:var(--c);color:var(--hx-on);font-style:normal;font-size:12px;font-weight:800}
.mj-recs .ok svg{width:12px;height:12px}
.mj-recs .rec.a{z-index:2;border-color:color-mix(in srgb,var(--c) 55%,var(--line));animation:mj-a 6.5s ease infinite}
.mj-recs .rec.b{animation:mj-b 6.5s cubic-bezier(.6,0,.3,1) infinite}
.mj-recs .rec.c{animation:mj-c 6.5s cubic-bezier(.6,0,.3,1) infinite}
.mj-recs .ok{animation:mj-ok 6.5s cubic-bezier(.2,.9,.3,1.3) infinite}
@keyframes mj-a{0%,30%{border-color:var(--line-soft);box-shadow:var(--hx-shadow)}45%,88%{border-color:color-mix(in srgb,var(--c) 55%,var(--line));box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 18%,transparent),var(--hx-shadow)}100%{border-color:var(--line-soft)}}
@keyframes mj-b{0%,22%{transform:none;opacity:1}40%,92%{transform:translateY(-62px) scale(.92);opacity:0}100%{transform:none;opacity:1}}
@keyframes mj-c{0%,26%{transform:none;opacity:1}44%,92%{transform:translateY(-124px) scale(.9);opacity:0}100%{transform:none;opacity:1}}
@keyframes mj-ok{0%,44%{opacity:0;transform:scale(.5)}52%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.8)}}

/* mini 2: a timeline fills, the bell rings, a note slides in */
.mj-tl{position:absolute;left:8%;right:8%;top:30px;display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0;list-style:none}
.mj-tl::before,.mj-tl::after{content:"";position:absolute;left:16.6%;right:16.6%;top:15px;height:4px;border-radius:4px;background:var(--line)}
.mj-tl::after{background:var(--c);transform-origin:left;animation:mj-line 6.5s cubic-bezier(.4,0,.2,1) infinite}
@keyframes mj-line{0%,8%{transform:scaleX(0)}48%,92%{transform:none}100%{transform:scaleX(0)}}
.mj-tl li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.mj-tl i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--hx-surface);border:3px solid var(--c);color:var(--c);font-style:normal;box-shadow:var(--hx-shadow);animation:mj-dot 6.5s ease infinite;animation-delay:calc(var(--i) * .9s)}
.mj-tl .ring i{width:40px;height:40px;margin-top:-3px;background:var(--c);color:var(--hx-on)}
.mj-tl .ring i svg{width:20px;height:20px;animation:mj-bell 6.5s ease infinite}
@keyframes mj-dot{0%,6%{transform:scale(.7);opacity:.5}14%,90%{transform:none;opacity:1}100%{transform:scale(.7);opacity:.5}}
@keyframes mj-bell{0%,46%{transform:none}50%{transform:rotate(18deg)}54%{transform:rotate(-15deg)}58%{transform:rotate(10deg)}62%,100%{transform:none}}
.mj-tl b{margin-top:6px;font-size:13.5px;font-weight:800;color:var(--hx-text)}
.mj-tl small{font-size:12px;color:var(--hx-text-2)}
.mj-note{position:absolute;left:10%;right:10%;bottom:38px;display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:13px;background:var(--hx-surface);border:1px solid color-mix(in srgb,var(--c) 55%,var(--line));box-shadow:var(--hx-shadow);animation:mj-note 6.5s cubic-bezier(.2,.9,.3,1.15) infinite}
.mj-note>svg{flex:none;width:30px;height:30px;padding:6px;border-radius:9px;background:var(--c);color:var(--hx-on)}
.mj-note span{display:flex;flex-direction:column}
.mj-note b{font-size:14px;font-weight:800;color:var(--hx-text)}
.mj-note small{font-size:12px;color:var(--hx-text-2)}
@keyframes mj-note{0%,52%{opacity:0;transform:translateY(16px)}60%,90%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(8px)}}

/* mini 3: a message becomes a filled record */
.mj-say{position:absolute;left:7%;top:16px;max-width:70%;margin:0;padding:9px 13px;border-radius:13px 13px 13px 3px;background:var(--hx-surface);border:1px solid var(--line-soft);box-shadow:var(--hx-shadow);font-size:13px;font-weight:600;line-height:1.5;color:var(--hx-text);animation:mj-say 7s ease infinite}
@keyframes mj-say{0%{opacity:0;transform:translateY(10px)}8%,92%{opacity:1;transform:none}100%{opacity:0}}
.mj-card{position:absolute;right:7%;bottom:36px;display:grid;grid-template-columns:1fr 1fr;gap:6px;width:66%;padding:9px;border-radius:13px;background:var(--hx-surface);border:1px solid color-mix(in srgb,var(--c) 50%,var(--line));box-shadow:var(--hx-shadow)}
.mj-card span{display:flex;flex-direction:column;gap:1px;padding:4px 9px;border-radius:8px;background:var(--hx-surface-2);border:1px solid var(--line-soft);min-width:0}
.mj-card small{font-size:12px;font-weight:700;color:var(--hx-text-2)}
.mj-card b{font-size:13px;font-weight:800;color:var(--c);white-space:nowrap;overflow:hidden;animation:mj-fill 7s steps(1) infinite;animation-delay:calc(var(--i) * .45s)}
.mj-card span{animation:mj-cell 7s ease infinite;animation-delay:calc(var(--i) * .45s)}
@keyframes mj-fill{0%,24%{opacity:0}25%,94%{opacity:1}100%{opacity:0}}
@keyframes mj-cell{0%,22%{border-color:var(--line-soft)}25%{border-color:var(--c);background:color-mix(in srgb,var(--c) 14%,var(--hx-surface-2))}40%,100%{border-color:var(--line-soft)}}

/* ================= 3. CHOOSER ================= */
.ph-pick{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(18px,2.4vw,34px);align-items:start}
.ph-pick-ask{margin:0 0 14px;font-size:clamp(19px,1.6vw,22px);font-weight:900;color:var(--fg)}
.ph-opts{display:flex;flex-direction:column;gap:12px}
.ph-opt{display:flex;align-items:center;gap:16px;width:100%;min-height:80px;padding:18px 22px;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--fg);text-align:left;font:inherit;cursor:pointer;
  transition:border-color .25s,background .25s,box-shadow .25s,transform .25s}
.ph-opt:hover{border-color:color-mix(in srgb,var(--c) 55%,var(--line));transform:translateX(3px)}
.ph-opt .ph-radio{position:relative;flex:none;width:24px;height:24px;border-radius:50%;border:2px solid color-mix(in srgb,var(--c) 70%,var(--line))}
.ph-opt .ph-radio::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--c);transform:scale(0);transition:transform .25s cubic-bezier(.2,.9,.3,1.4)}
.ph-opt b{display:block;font-size:17px;font-weight:800;line-height:1.45;color:var(--fg)}
.ph-opt small{display:block;margin-top:4px;font-size:15.5px;font-weight:700;color:var(--c)}
.ph-opt[aria-selected="true"]{border-color:var(--c);background:color-mix(in srgb,var(--c) 9%,var(--panel));box-shadow:0 0 0 1px var(--c),0 18px 36px -24px color-mix(in srgb,var(--c) 80%,transparent)}
.ph-opt[aria-selected="true"] .ph-radio::after{transform:none}
.ph-opt:focus-visible{outline:2px solid var(--c);outline-offset:3px}
.ph-way{display:grid;grid-template-rows:auto 1fr;border:1px solid color-mix(in srgb,var(--c) 28%,var(--line));border-radius:16px;background:radial-gradient(60% 80% at 100% 100%,color-mix(in srgb,var(--c) 8%,transparent),transparent 70%),var(--panel);overflow:hidden;box-shadow:var(--card-shadow)}
.ph-way[hidden]{display:none}
.ph-way.is-show{animation:ph-way .55s cubic-bezier(.16,.84,.3,1) both}
@keyframes ph-way{from{opacity:0;transform:translateX(26px)}}
.ph-way-art{position:relative;height:210px;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line-soft);background:radial-gradient(55% 70% at 60% 55%,color-mix(in srgb,var(--c) 15%,transparent),transparent 75%),var(--hx-stage)}
.ph-way-art::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(var(--hx-grid) 1.2px,transparent 1.6px);background-size:20px 20px}
.ph-way-body{padding:26px 28px 28px}
.ph-way-body h3{font-size:clamp(22px,1.9vw,26px);font-weight:800;line-height:1.3;color:var(--fg)}
.ph-way-body .sub{margin:4px 0 0;font-size:16px;font-weight:700;color:var(--c)}
.ph-way-body .txt{margin:14px 0 0;font-size:16.5px;line-height:1.75;color:var(--fg-2)}
.ph-way-body .ph-tags{margin-top:16px}
.ph-fit{margin:20px 0 22px;padding:4px 0 4px 16px;border-left:3px solid var(--c)}
.ph-fit b{display:block;font-size:14.5px;font-weight:800;letter-spacing:.08em;color:var(--c)}
.ph-fit p{margin:4px 0 0;font-size:16.5px;font-weight:700;line-height:1.7;color:var(--fg)}

/* chooser art: board (a deal walks across), link (pulses to a hub), build (pieces snap in) */
.mw-cols{position:absolute;left:6%;right:6%;top:20px;bottom:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mw-cols .col{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:12px;background:color-mix(in srgb,var(--hx-surface) 70%,transparent);border:1px solid var(--line-soft)}
.mw-cols small{font-size:12.5px;font-weight:800;color:var(--hx-text-2)}
.mw-cols i{height:34px;border-radius:9px;background:var(--hx-surface-2);border:1px solid var(--line-soft)}
.mw-cols i.s{height:24px;width:70%}
.mw-deal{position:absolute;top:58px;left:calc(6% + 10px);width:calc((88% - 24px) / 3 - 20px);display:flex;flex-direction:column;padding:8px 11px;border-radius:10px;background:var(--hx-surface);border:1.5px solid var(--c);box-shadow:0 14px 30px -14px var(--c);animation:mw-deal 7.5s cubic-bezier(.6,0,.3,1) infinite}
.mw-deal b{font-size:13px;font-weight:800;color:var(--hx-text)}
.mw-deal small{font-size:12px;color:var(--c);font-weight:700}
@keyframes mw-deal{0%,18%{transform:none;opacity:1}30%,52%{transform:translateX(calc(100% + 32px))}64%,88%{transform:translateX(calc(200% + 64px))}96%{opacity:0;transform:translateX(calc(200% + 64px))}100%{opacity:0;transform:none}}
.mw-net{position:absolute;inset:0}
.mw-net .nd{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:11px;background:var(--hx-surface);border:1px solid var(--line);box-shadow:var(--hx-shadow);font-size:13px;font-weight:800;color:var(--hx-text);transform:translate(-50%,-50%)}
.mw-net .nd.hub{padding:12px 18px;border:2px solid var(--c);color:var(--c);font-size:15px;box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 14%,transparent),var(--hx-shadow);animation:mw-hub 2.4s ease-in-out infinite}
.mw-net .nd.hub svg{width:17px;height:17px}
.mw-net .a{left:16%;top:28%}.mw-net .b{left:16%;top:72%}.mw-net .hub{left:50%;top:50%}.mw-net .c{left:84%;top:28%}.mw-net .d{left:84%;top:72%}
@keyframes mw-hub{50%{box-shadow:0 0 0 12px color-mix(in srgb,var(--c) 6%,transparent),var(--hx-shadow)}}
.mw-net>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mw-net .ln{fill:none;stroke:color-mix(in srgb,var(--c) 45%,var(--line));stroke-width:2;vector-effect:non-scaling-stroke}
.mw-net .pl{fill:none;stroke:var(--c);stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:7 200;stroke-dashoffset:7;animation:mw-pulse 2.6s ease-in-out infinite;animation-delay:calc(var(--d) * .65s)}
@keyframes mw-pulse{0%{stroke-dashoffset:7}85%,100%{stroke-dashoffset:-100}}
.mw-app{position:absolute;left:12%;right:12%;top:20px;bottom:-16px}
.mw-app .hx-win-body{display:grid;grid-template-columns:24% 1fr 1fr;grid-template-rows:26px 1fr 1fr 1fr;gap:8px;padding:12px}
.mw-app .pc{display:block;border-radius:7px;background:color-mix(in srgb,var(--c) 20%,var(--hx-surface-2));border:1px solid color-mix(in srgb,var(--c) 35%,transparent);animation:mw-snap 7s cubic-bezier(.2,.9,.3,1.25) infinite}
.mw-app .side{grid-row:1/5;background:color-mix(in srgb,var(--c) 32%,var(--hx-surface-2))}
.mw-app .top{grid-column:2/4;animation-delay:.35s}
.mw-app .r1{grid-column:2/3;animation-delay:.7s}.mw-app .r2{grid-column:2/3;animation-delay:.9s}.mw-app .r3{grid-column:2/3;animation-delay:1.1s}
.mw-app .chart{grid-column:3/4;grid-row:2/5;animation-delay:1.45s;background:linear-gradient(0deg,color-mix(in srgb,var(--c) 45%,var(--hx-surface-2)) 0 40%,color-mix(in srgb,var(--c) 14%,var(--hx-surface-2)) 40%)}
@keyframes mw-snap{0%,4%{opacity:0;transform:translateY(-16px) scale(.9)}12%,88%{opacity:1;transform:none}100%{opacity:0}}

/* ================= 4. AI SCENARIOS (violet panel around the films) ================= */
.ph-ai{position:relative;border:1px solid color-mix(in srgb,var(--hx-ai) 28%,var(--line));border-radius:20px;padding:clamp(24px,3vw,40px);
  background:radial-gradient(45% 55% at 78% 30%,color-mix(in srgb,var(--hx-ai) 10%,transparent),transparent 72%),color-mix(in srgb,var(--hx-ai) 5%,var(--panel))}
.ph-ai .hx-head h2 .hl{color:var(--hx-ai)}
.ph-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:7px 15px;border-radius:99px;background:var(--hx-ai);color:var(--hx-on);font-size:15px;font-weight:800;letter-spacing:.04em}
.ph-badge svg{width:15px;height:15px;fill:currentColor}
.ph-ai .scenario-buttons.sv-tabs button{min-height:44px;font-size:16px}
.ph-scene-copy{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px 40px;align-items:start;margin:6px 0 20px}
.ph-scene-copy h3{font-size:22px;font-weight:800;line-height:1.35;color:var(--fg)}
.ph-scene-copy p{margin:8px 0 0;font-size:16.5px;line-height:1.75;color:var(--fg-2)}
.ph-scene-copy .ph-tags{--c:var(--hx-ai);flex-direction:column;align-items:flex-start}
.ph-scene-go{margin-top:16px;min-height:40px}

/* ================= 5. PIPELINE ================= */
.ph-pipe{position:relative;--gap:20px;--w:calc((100% - 3 * var(--gap)) / 4)}
.ph-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin:0;padding:0;list-style:none}
.ph-stage{display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:16px;border:1px solid color-mix(in srgb,var(--c) 28%,var(--line));background:color-mix(in srgb,var(--c) 6%,var(--panel));box-shadow:var(--card-shadow);animation:ph-col 12s ease infinite;animation-delay:calc(var(--i) * 3s)}
@keyframes ph-col{0%,22%{border-color:var(--c);box-shadow:0 0 0 1px var(--c),0 20px 40px -26px var(--c)}26%,100%{border-color:color-mix(in srgb,var(--c) 28%,var(--line));box-shadow:var(--card-shadow)}}
.ph-stage .slot{display:block;height:64px;border:1.5px dashed color-mix(in srgb,var(--c) 40%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--panel) 60%,transparent)}
.ph-stage .hd{display:flex;align-items:center;gap:12px}
.ph-stage .ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--c);color:var(--hx-on)}
.ph-stage .ic svg{width:22px;height:22px}
.ph-stage .hd div{display:flex;flex-direction:column;gap:4px;min-width:0}
.ph-stage .hd b{align-self:flex-start;padding:2px 9px;border-radius:99px;background:color-mix(in srgb,var(--c) 16%,transparent);font:800 14.5px/1.3 var(--font-mono);color:var(--c)}
.ph-stage h3{font-size:20px;font-weight:800;line-height:1.3;color:var(--fg)}
.ph-stage p{margin:0;font-size:16.5px;line-height:1.75;color:var(--fg-2)}
.ph-mover{position:absolute;z-index:2;top:20px;left:20px;width:calc(var(--w) - 40px);height:64px;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 14px;border-radius:14px;background:var(--panel);border:2px solid var(--hx-sub);
  box-shadow:0 16px 34px -18px color-mix(in srgb,var(--hx-sub) 90%,transparent);animation:ph-move 12s cubic-bezier(.65,0,.35,1) infinite}
.ph-mover small{font-size:13.5px;font-weight:800;color:var(--fg)}
.ph-mover b{display:flex;gap:5px}
.ph-mover b i{flex:1;height:5px;border-radius:3px;background:var(--line)}
.ph-mover b i:nth-child(1){animation:ph-seg 12s steps(1) infinite}
.ph-mover b i:nth-child(2){animation:ph-seg2 12s steps(1) infinite}
.ph-mover b i:nth-child(3){animation:ph-seg3 12s steps(1) infinite}
.ph-mover b i:nth-child(4){animation:ph-seg4 12s steps(1) infinite}
@keyframes ph-seg{0%,100%{background:var(--hx-sub)}}
@keyframes ph-seg2{0%{background:var(--line)}25%,100%{background:var(--hx-sub)}}
@keyframes ph-seg3{0%{background:var(--line)}50%,100%{background:var(--hx-sub)}}
@keyframes ph-seg4{0%{background:var(--line)}75%,100%{background:var(--hx-sub)}}
@keyframes ph-move{0%,20%{left:20px;opacity:1}25%,45%{left:calc(var(--w) + var(--gap) + 20px)}50%,70%{left:calc(2 * (var(--w) + var(--gap)) + 20px)}75%,93%{left:calc(3 * (var(--w) + var(--gap)) + 20px);opacity:1}97%{opacity:0}100%{left:20px;opacity:0}}


/* ================= responsive ================= */
@media (max-width:1180px){
  .ph-frame{min-height:0}
  .ph-body{grid-template-columns:1fr;gap:34px;padding:42px 36px 34px}
  .ph-visual{height:480px}
  .ph-hero h1{font-size:clamp(32px,5.6cqw,54px)}
  .ph-jobs{grid-template-columns:1fr;max-width:720px}
  .ph-job{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .ph-job-art{height:auto;min-height:250px;border-bottom:0;border-right:1px solid var(--line-soft)}
  .ph-pick{grid-template-columns:1fr}
  .ph-stages{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ph-mover,.ph-stage .slot{display:none}
  .ph-stage{animation:none}
}
@media (max-width:720px){
  .ph-wrap{padding-top:14px}
  .ph-hero{border-radius:14px}
  .ph-body{padding:28px 18px 22px;gap:24px}
  .ph-hero h1{font-size:clamp(29px,8.6cqw,38px)}
  .ph-hero h1 .g{font-size:.7em}
  .ph-now{margin-top:18px}
  .ph-hero .actions .action{flex:1 1 100%}
  .ph-visual{grid-template-columns:44px 18px minmax(0,1fr);height:330px}
  .ph-src .ic{width:40px;height:40px;border-radius:12px}
  .ph-src .ic svg{width:20px;height:20px}
  .ph-src b{display:none}
  .ph-lanes{margin-left:0}
  .ph-crm{height:100%;transform:none}
  .ph-crm .hx-win-body{padding:8px 8px 10px}
  .ph-cols,.ph-row .in{grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr) minmax(0,.9fr);gap:6px}
  .ph-cols span:last-child,.ph-row .bell{display:none}
  .ph-row .in{padding:7px 6px}
  .ph-row .nm small,.ph-row .src svg{display:none}
  .ph-row .av{width:24px;height:24px;font-size:12px}
  .ph-row .nm{gap:7px}
  .ph-row .nm b{font-size:13px}
  .ph-row .src{font-size:12px}
  .ph-row .own i{padding:3px 7px;font-size:12px}
  .mg{display:none}
  .ph-toast{left:8px;right:8px;bottom:8px;padding:9px 11px}
  .ph-toast .ic{width:30px;height:30px}
  .ph-toast b{font-size:13.5px}
  .ph-toast small{font-size:12px}
  .ph-visual{grid-template-rows:330px auto;height:auto}
  .ph-chip{position:relative;right:auto;top:auto;grid-column:1/-1;justify-self:start;margin-top:12px;padding:8px 13px;font-size:14.5px}
  .ph-job{display:flex}
  .ph-job-art{min-height:0;height:252px;border-right:0;border-bottom:1px solid var(--line-soft)}
  .ph-job-body{padding:20px}
  .mj-recs{left:6%;right:6%}
  .mj-say{max-width:78%}
  .mj-card{width:80%;right:5%}
  .ph-opt{padding:16px 18px}
  .ph-opt b{font-size:16px}
  .ph-way-art{height:190px}
  .ph-way-body .action{width:100%}
  .mw-net .nd{font-size:12px;padding:7px 10px}
  .mw-net .nd.hub{font-size:14px;padding:10px 14px}
  .ph-scene-copy{grid-template-columns:1fr}
  .ph-stages{grid-template-columns:1fr}
  .ph-ai{padding:22px 18px}
  .ph-way-body{padding:20px}
  .ph-stage{padding:20px}
  .ph-lead{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .ph-hero *,.ph-hero *::before,.ph-hero *::after,.ph-job-art *,.ph-job-art *::before,.ph-job-art *::after,.ph-way-art *,.ph-way-art *::after,.mw-net .pl,.ph-stage,.ph-mover,.ph-mover *,.ph-way{animation:none!important;transition:none!important}
  .ph-mover{display:none}
  .mj-tl::after{transform:none}
}

/* ================= light theme ================= */
html[data-theme="light"] .ph-hero{box-shadow:0 30px 64px -42px rgba(15,40,70,.4),0 0 110px -60px var(--cc)}
html[data-theme="light"] .ph-crm{box-shadow:0 40px 70px -40px rgba(15,40,70,.45),0 0 0 1px color-mix(in srgb,var(--cc) 30%,transparent),0 0 60px -26px color-mix(in srgb,var(--cc) 55%,transparent)}
html[data-theme="light"] .ph-lane::before{opacity:.8}
html[data-theme="light"] .mw-cols .col{background:color-mix(in srgb,var(--hx-surface) 85%,transparent)}
html[data-theme="light"] .ph-badge{background:color-mix(in srgb,var(--hx-ai) 12%,var(--panel));color:var(--hx-ai);border:1px solid color-mix(in srgb,var(--hx-ai) 40%,transparent)}