/* Home v4 (pages/home-v4, 2026-10-13). Needs rt-hue.css (tokens, .hx-*, .hxs-*) and cs-page.css (the .cs-scr screens).
   Hero: three services side by side, each with a live picture (website builds itself / AI assistant ticks tasks /
   subscription tools switch on), joined by "+" and merging into one pill. public/js/hm-v4.js lights them in turn.
   Sections below: fewer words, bigger type, no "// eyebrow" labels. Everything follows the theme toggle. */

.hm4 .section-body{padding-top:clamp(56px,6vw,92px);padding-bottom:0}
.hm4:last-of-type .section-body{padding-bottom:clamp(56px,6vw,92px)}
.hm4-hero .section-body{padding-top:40px}

/* ---------- headline + trio live in one centred column (2026-10-14: full width felt too big) ---------- */
.hm4-wrap{max-width:1400px;margin:0 auto}
/* 2026-10-14: centred headline block, lead and buttons stacked under it, more air (owner: two columns felt cramped) */
.hm4-head{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:980px;margin:34px auto 64px}
.hm4-head>div{display:flex;flex-direction:column;align-items:center}
.hm4-head h1{font-size:clamp(40px,4.6vw,68px);line-height:1.12;letter-spacing:-.045em;font-weight:900;word-break:keep-all}
.hm4-head h1 .g{display:inline-block;margin-top:.08em;background:linear-gradient(100deg,var(--hx-web) 0%,var(--hx-ai) 50%,var(--hx-sub) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hm4-lead{margin:28px 0 0;max-width:46em;font-size:clamp(17px,1.35vw,20px);line-height:1.85;color:var(--fg-2);text-wrap:pretty}
.hm4-head .actions{justify-content:center;gap:14px;align-items:center;margin-top:34px}
.hm4-quest{display:inline-flex;margin-top:20px;font-size:15.5px;font-weight:700;color:var(--accent)}
.hm4-quest:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- three services ---------- */
.hm4-trio{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr) 40px minmax(0,1fr);align-items:stretch}
.hm4-plus{align-self:center;justify-self:center;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--panel);border:1px solid var(--line);color:var(--hx-sub);font:900 22px/1 var(--font-sans);box-shadow:var(--card-shadow);z-index:1}
.hm4-trio.is-all .hm4-plus{animation:hm4-beat .9s ease}
@keyframes hm4-beat{40%{transform:scale(1.25);box-shadow:0 0 0 8px color-mix(in srgb,var(--hx-sub) 22%,transparent)}}
.hm4-svc{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid color-mix(in srgb,var(--c) 28%,var(--line));border-radius:22px;overflow:hidden;background:var(--panel);color:inherit;box-shadow:var(--card-shadow);
  transition:transform .4s cubic-bezier(.16,.84,.3,1),box-shadow .4s,border-color .4s}
.hm4-svc:hover,.hm4-svc.is-lit{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 70%,transparent);box-shadow:0 34px 64px -36px color-mix(in srgb,var(--c) 80%,transparent),0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent)}
.hm4-art{position:relative;height:200px;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line-soft);
  background:radial-gradient(80% 90% at 70% 0%,color-mix(in srgb,var(--c) 26%,transparent),transparent 70%),var(--hx-stage)}
.hm4-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}
.hm4-svc-body{display:flex;flex-direction:column;gap:6px;flex:1;padding:18px 20px 20px}
.hm4-no{display:flex;align-items:center;gap:10px;font:800 13px/1 var(--font-mono);letter-spacing:.12em;color:var(--c)}
.hm4-no i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.hm4-svc h2{font-size:clamp(20px,1.6vw,24px);line-height:1.25;font-weight:900;letter-spacing:-.02em}
.hm4-svc p{margin:0;font-size:15.5px;line-height:1.7;color:var(--fg-2)}
.hm4-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px;font-size:15.5px;font-weight:800;color:var(--c)}
.hm4-go svg{width:16px;height:16px;transition:transform .25s}
.hm4-svc:hover .hm4-go svg{transform:translateX(4px)}

/* art 1: a browser that keeps building different sites */
.hm4-win{position:absolute;left:9%;right:9%;top:13%;bottom:-8%;box-shadow:0 26px 50px -26px rgba(0,0,0,.7)}
.hm4-win .hx-win-bar{height:24px}
.hm4-win .cs-box{position:absolute;inset:0;container-type:size;overflow:hidden;background:var(--hx-surface)}
.hm4-label{position:absolute;right:6%;top:6%;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px;background:var(--hx-surface);border:1px solid color-mix(in srgb,var(--c) 45%,var(--line));box-shadow:var(--hx-shadow);font-size:13px;font-weight:800;color:var(--hx-text)}
.hm4-label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.hm4-label.is-swap{animation:hm4-swap .45s cubic-bezier(.2,.9,.3,1.2)}
@keyframes hm4-swap{from{opacity:0;transform:translateY(8px) scale(.9)}}

/* art 2: an AI assistant working down a list; the last step waits for you */
.hm4-agent{position:absolute;left:9%;right:9%;top:12%;bottom:-8%;box-shadow:0 26px 50px -26px rgba(0,0,0,.7)}
.hm4-agent .hx-win-bar{height:26px;font-size:11px}
.hm4-agent .hx-win-bar b{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--c)}
.hm4-agent .hx-win-bar b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--hx-teal);box-shadow:0 0 8px var(--hx-teal)}
.hm4-tasks{display:flex;flex-direction:column;gap:5px;margin:0;padding:8px 10px;list-style:none}
.hm4-tasks li{display:flex;align-items:center;gap:9px;padding:5px 9px;border-radius:10px;background:var(--hx-surface-2);border:1px solid var(--line-soft);font-size:12.5px;font-weight:700;color:var(--hx-text)}
.hm4-tasks .st{position:relative;flex:none;width:16px;height:16px;border-radius:50%;border:2px solid var(--line)}
.hm4-tasks .st::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid var(--hx-on);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0)}
.hm4-tasks em{margin-left:auto;padding:3px 8px;border-radius:99px;background:var(--hx-sub);color:var(--hx-on);font-size:11.5px;font-style:normal;font-weight:800;opacity:0}
.hm4-art.is-run .hm4-tasks li{animation:hm4-in .45s cubic-bezier(.2,.9,.3,1.15) both;animation-delay:calc(var(--d) * .7s + .2s)}
.hm4-art.is-run .hm4-tasks .st{animation:hm4-spin .5s linear calc(var(--d) * .7s + .4s) 1,hm4-done .3s ease calc(var(--d) * .7s + .9s) forwards}
.hm4-art.is-run .hm4-tasks .st::after{animation:hm4-tick .3s ease calc(var(--d) * .7s + .95s) forwards}
.hm4-art.is-run .hm4-tasks li.ask .st{animation:hm4-spin 1s linear calc(var(--d) * .7s + .4s) infinite}
.hm4-art.is-run .hm4-tasks li.ask .st::after{animation:none}
.hm4-art.is-run .hm4-tasks em{animation:hm4-ask .4s ease calc(var(--d) * .7s + .9s) forwards,hm4-pulse 1.4s ease-in-out calc(var(--d) * .7s + 1.4s) infinite}
@keyframes hm4-in{from{opacity:0;transform:translateX(-14px)}}
@keyframes hm4-spin{from{border-top-color:var(--c);transform:rotate(0)}to{border-top-color:var(--c);transform:rotate(360deg)}}
@keyframes hm4-done{to{background:var(--c);border-color:var(--c)}}
@keyframes hm4-tick{to{transform:rotate(45deg) scale(1)}}
@keyframes hm4-ask{to{opacity:1}}
@keyframes hm4-pulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--hx-sub) 25%,transparent)}}
.hm4-art.is-run .hm4-tasks li.ask .st{border-style:dashed}

/* art 3: subscription tools switch on one by one */
.hm4-apps{position:absolute;left:8%;right:8%;top:7%;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.hm4-app{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px 5px;border-radius:14px;background:var(--hx-surface);border:1px solid var(--line-soft);box-shadow:var(--hx-shadow);font-size:11px;font-weight:700;color:var(--hx-text-2);white-space:nowrap}
.hm4-app img{width:24px;height:24px;border-radius:9px;background:#fff;padding:3px;object-fit:contain;filter:grayscale(1);opacity:.45;transition:filter .4s,opacity .4s}
.hm4-app .ok{position:absolute;right:-6px;top:-6px;width:20px;height:20px;border-radius:50%;background:var(--c);color:var(--hx-on);font:900 12px/20px var(--font-sans);text-align:center;font-style:normal;transform:scale(0)}
.hm4-art.is-run .hm4-app img{animation:hm4-color .4s ease calc(var(--d) * .45s + .3s) forwards}
.hm4-art.is-run .hm4-app .ok{animation:hm4-pop .45s cubic-bezier(.2,.9,.3,1.6) calc(var(--d) * .45s + .45s) forwards}
.hm4-art.is-run .hm4-app{animation:hm4-lift .5s ease calc(var(--d) * .45s + .3s)}
@keyframes hm4-color{to{filter:none;opacity:1}}
@keyframes hm4-pop{to{transform:scale(1)}}
@keyframes hm4-lift{40%{transform:translateY(-5px);border-color:var(--c)}}
.hm4-bill{position:absolute;left:8%;right:8%;bottom:5%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 12px;border-radius:12px;background:var(--hx-surface);border:1px solid color-mix(in srgb,var(--c) 45%,var(--line));box-shadow:var(--hx-shadow)}
.hm4-bill small{font-size:12px;font-weight:700;color:var(--muted)}
.hm4-bill b{font-size:14px;font-weight:900;color:var(--hx-text)}
.hm4-bill b em{font-style:normal;color:var(--c);font-size:17px}

/* the three lines merge into one pill */
.hm4-merge{position:relative;height:72px;margin-top:-1px}
.hm4-merge svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hm4-merge path{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:4 10;vector-effect:non-scaling-stroke;opacity:.85;animation:hm4-flow 1.4s linear infinite}
.hm4-merge .l1{stroke:var(--hx-web)}.hm4-merge .l2{stroke:var(--hx-ai)}.hm4-merge .l3{stroke:var(--hx-sub)}
@keyframes hm4-flow{to{stroke-dashoffset:-28}}
.hm4-pill-row{display:flex;justify-content:center;margin-top:-4px;margin-bottom:56px} /* 2026-10-14: keep the pill and its glow off the section divider */
.hm4-pill{display:inline-flex;align-items:center;gap:12px;padding:13px 24px;border-radius:99px;border:1.5px solid transparent;font-size:clamp(16px,1.4vw,19px);font-weight:900;color:var(--fg);
  background:linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(100deg,var(--hx-web),var(--hx-ai),var(--hx-sub)) border-box;box-shadow:0 18px 40px -24px color-mix(in srgb,var(--hx-ai) 70%,transparent)}
.hm4-pill small{font-size:15px;font-weight:700;color:var(--fg-2)}
.hm4-trio.is-all~.hm4-pill-row .hm4-pill{animation:hm4-glow 1.2s ease}
@keyframes hm4-glow{40%{transform:scale(1.05);box-shadow:0 0 0 8px color-mix(in srgb,var(--hx-ai) 18%,transparent),0 18px 40px -20px color-mix(in srgb,var(--hx-ai) 80%,transparent)}}

/* ---------- AI assistants: coloured tiles, picture + name + one request (descriptions dropped) ---------- */
.hm4-roster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hm4-roster .hm-agent{border-color:color-mix(in srgb,var(--c) 28%,var(--line))}
.hm4-roster .hm-agent:hover{border-color:color-mix(in srgb,var(--c) 65%,transparent)}
.hm4-roster .hm-mini{height:132px;background:radial-gradient(80% 100% at 80% 0%,color-mix(in srgb,var(--c) 16%,transparent),transparent 70%),var(--editor)}
.hm4-roster .hm-agent-body h3{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800}
.hm4-roster .hm-agent-body h3 svg{width:22px;height:22px;padding:4px;border-radius:7px;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c)}
.hm4-roster .hm-cmd{margin-top:12px;font-size:16px}

/* ---------- start ---------- */
.hm4-start{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px}
.hm4-card{display:flex;flex-direction:column;gap:8px;padding:24px;border:1px solid color-mix(in srgb,var(--c) 28%,var(--line));border-radius:20px;background:radial-gradient(70% 90% at 100% 0%,color-mix(in srgb,var(--c) 12%,transparent),transparent 70%),var(--panel);color:inherit;box-shadow:var(--card-shadow);transition:transform .3s cubic-bezier(.16,.84,.3,1),border-color .3s}
.hm4-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 65%,transparent)}
.hm4-card .ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;margin-bottom:6px;color:#fff;background:linear-gradient(150deg,color-mix(in srgb,var(--c) 78%,#fff),var(--c) 45%,color-mix(in srgb,var(--c) 62%,#04101C))}
.hm4-card .ic svg{width:24px;height:24px}
.hm4-card h3{font-size:21px;font-weight:900}
.hm4-card p{margin:0;font-size:16px;line-height:1.7;color:var(--fg-2)}
.hm4-card .go{margin-top:auto;padding-top:10px;font-size:16px;font-weight:800;color:var(--c)}
.hm4-card.is-main .go{align-self:flex-start;padding:12px 20px;border-radius:10px;background:var(--hx-sub);color:var(--hx-on)}
.hm4-notes{display:grid;grid-template-columns:1fr 1fr;gap:16px 40px;margin-top:40px;padding-top:30px;border-top:1px solid var(--line-soft)}
.hm4-notes h3{margin-bottom:10px;font-size:17px;font-weight:800}
.hm4-notes ul{margin:0;padding:0;list-style:none}
.hm4-notes li a{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:15.5px;line-height:1.55;color:var(--fg-2)}
.hm4-notes li a:hover{color:var(--accent)}
.hm4-notes time{flex:none;font:600 14px/1.9 var(--font-mono);color:var(--muted)}

@media (max-width:1180px){
  .hm4-head{margin:22px auto 48px}
  .hm4-lead br{display:none}
  .hm4-trio{grid-template-columns:1fr;gap:0}
  .hm4-plus{margin:-8px 0;transform:none}
  .hm4-art{height:210px}
  .hm4-merge{display:none}
  .hm4-pill-row{margin-top:22px;margin-bottom:36px}
  .hm4-roster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm4-start{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hm4-head h1{font-size:clamp(36px,10.5vw,46px)}
  .hm4-head .actions .action{flex:1 1 100%}
  .hm4-art{height:200px}
  .hm4-roster{grid-template-columns:1fr}
  .hm4-notes{grid-template-columns:1fr}
  .hm4-pill{flex-direction:column;gap:2px;text-align:center;border-radius:18px}
}
@media (prefers-reduced-motion:reduce){
  .hm4 *,.hm4 *::before,.hm4 *::after{animation:none!important;transition:none!important}
  .hm4-tasks .st{background:var(--c);border-color:var(--c)}.hm4-tasks .st::after{transform:rotate(45deg) scale(1)}.hm4-tasks em{opacity:1}
  .hm4-app img{filter:none;opacity:1}.hm4-app .ok{transform:scale(1)}
}