/* Custom-system landing page (pages/custom-system, 2026-10-13). Needs public/css/rt-hue.css (tokens, .hx-*).
   1. hero: a build preview that assembles eight kinds of product one after another (public/js/cs-page.js)
   2. (the eight types now live in the showcase, partials/hx-show)
   3. steps, AI add-on, integrations. The frame follows the site theme (no dark block in light mode). */

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

.cs-wrap{max-width:1500px;margin:0 auto;padding:clamp(18px,2.4vw,34px) clamp(16px,3vw,48px) 0}
.cs-sec{padding:clamp(56px,6.4vw,96px) 0 0;scroll-margin-top:calc(var(--nav-h) + 16px)}

/* ================= 1. HERO ================= */
.cs-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:18px;overflow:hidden;isolation:isolate;background:var(--chrome);
  box-shadow:0 34px 80px -46px rgba(0,0,0,.85),0 0 110px -60px var(--cc)}
.cs-frame{position:relative;height:max(560px,44cqw);overflow:hidden;isolation:isolate;background:var(--hx-stage);color:var(--hx-text)}
.cs-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%)}
.cs-fx{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
.cs-aura{position:absolute;inset:-25%;z-index:0;pointer-events:none;
  background:radial-gradient(34% 40% at 74% 44%,color-mix(in srgb,var(--cc) 30%,transparent),transparent 70%),
             radial-gradient(26% 32% at 16% 88%,color-mix(in srgb,var(--hx-sub) 16%,transparent),transparent 70%),
             radial-gradient(24% 28% at 30% 8%,color-mix(in srgb,var(--hx-ai) 16%,transparent),transparent 70%);
  animation:cs-drift 20s ease-in-out infinite alternate}
@keyframes cs-drift{to{transform:translate3d(-3%,2%,0) scale(1.06)}}
.cs-body{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:3.2cqw;padding:3.6cqw 3.8cqw 3.6cqw 4.6cqw}

/* copy */
.cs-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;padding:7px 15px;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 13px/1.25 var(--font-mono);letter-spacing:.06em;color:var(--hx-text-2)}
.cs-kicker i{width:8px;height:8px;border-radius:50%;background:var(--cc);box-shadow:0 0 10px var(--cc);animation:cs-blink 1.8s ease-in-out infinite}
@keyframes cs-blink{50%{opacity:.25}}
.cs-hero h1{margin:0;font-size:clamp(36px,4.3cqw,66px);line-height:1.12;letter-spacing:-.035em;font-weight:900;color:var(--hx-text);word-break:keep-all;text-wrap:balance}
.cs-hero h1 span{display:block}
.cs-hero h1 .g{margin-top:.16em;font-size:.66em;line-height:1.25;letter-spacing:-.02em;background:linear-gradient(100deg,var(--hx-web) 0%,var(--hx-ai) 48%,var(--hx-sub) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cs-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)}
.cs-now b{display:inline-flex;align-items:center;gap:9px;min-width:7.2em;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}
.cs-now b::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--cc)}
.cs-now b.is-swap{animation:cs-swap .5s cubic-bezier(.2,.8,.2,1)}
@keyframes cs-swap{from{opacity:0;transform:translateY(10px)}}
.cs-lead{margin:18px 0 0;max-width:31em;font-size:clamp(16px,1.3cqw,18.5px);line-height:1.8;color:var(--hx-text-2)}
.cs-hero .actions{margin-top:28px;gap:12px}

/* visual: code pane behind, browser in front, two floating feature chips */
.cs-visual{position:relative;height:min(100%,36cqw);min-height:380px;perspective:1300px}
.cs-code{position:absolute;left:0;top:4%;width:44%;height:52%;--c:var(--cc);transform:rotateY(16deg) translateZ(-80px);transform-origin:left center;opacity:.95}
.cs-code .hx-win-body{padding:12px 4px 0 0;font:clamp(10.5px,.95cqw,13px)/2 var(--font-mono);color:var(--hx-text-2);overflow:hidden}
.cs-code p{display:flex;gap:12px;margin:0;white-space:nowrap}
.cs-code p>span{flex:none;width:2.2em;text-align:right;color:var(--dim)}
.cs-code code{font:inherit;color:inherit;overflow:hidden;text-overflow:clip}
.cs-code code .s{color:var(--cc)}
.cs-code code .k{color:var(--kw)}
.cs-code p.is-typing code::after{content:"";display:inline-block;width:.55em;height:1.05em;margin-left:1px;vertical-align:-.18em;background:var(--cc);animation:cs-blink 1s steps(2) infinite}
.cs-code .dim i{display:inline-block;height:.5em;border-radius:3px;background:var(--line);vertical-align:middle}
.cs-browser{position:absolute;right:0;top:11%;width:80%;height:80%;--c:var(--cc);
  transform:rotateY(var(--ry,-8deg)) rotateX(var(--rx,3deg));transform-style:preserve-3d;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) 65%,transparent)}
html[data-theme="light"] .cs-browser{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)}
.cs-browser .hx-win-bar{height:30px;font-size:11.5px}
.cs-url{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding:3px 12px;border-radius:99px;background:var(--hx-surface);border:1px solid var(--line-soft);color:var(--hx-text-2);transition:color .4s}
.cs-url::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cc)}
.cs-box{position:absolute;inset:0;container-type:size;overflow:hidden;background:var(--hx-surface)}
.cs-chip{position:absolute;z-index:4;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(12px,1.05cqw,14px);font-weight:800;color:var(--hx-text);white-space:nowrap}
.cs-chip svg{width:16px;height:16px;flex:none;color:var(--cc)}
.cs-chip[hidden]{display:none}
.cs-chip.c1{left:2%;bottom:6%}
.cs-chip.c2{right:-1%;top:2%}
.cs-chip.is-pop{animation:cs-chip .6s cubic-bezier(.2,.9,.3,1.3) both}
.cs-chip.c2.is-pop{animation-delay:.18s}
@keyframes cs-chip{from{opacity:0;transform:translateY(12px) scale(.85)}}

/* status bar (follows the site theme like the home film bar) */
.cs-bar{display:flex;align-items:center;gap:14px;padding:8px 14px 9px;border-top:1px solid var(--line);font:12px/1 var(--font-mono);color:var(--muted)}
.cs-tog{flex:none;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--fg);cursor:pointer}
.cs-tog svg{width:13px;height:13px;fill:currentColor}
.cs-tog .i-play,.cs-hero.is-paused .cs-tog .i-pause{display:none}
.cs-hero.is-paused .cs-tog .i-play{display:block}
.cs-file{flex:none;color:var(--fg-2)}
.cs-file::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--cc);box-shadow:0 0 8px var(--cc);vertical-align:1px}
.cs-chaps{flex:1;display:flex;gap:6px;margin:0;padding:0;list-style:none;min-width:0}
.cs-chaps li{flex:1 1 0;min-width:0}
.cs-chaps button{display:block;width:100%;padding:5px 0 3px;border:0;background:none;color:var(--muted);font:inherit;font-size:12px;text-align:left;cursor:pointer}
.cs-chaps i{position:relative;display:block;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.cs-chaps i::after{content:"";position:absolute;inset:0;background:var(--c);transform:scaleX(0);transform-origin:left}
.cs-chaps .is-done i::after{transform:none}
.cs-chaps .is-on i::after{animation:cs-fill var(--dur,4.6s) linear forwards}
.cs-hero.is-paused .cs-chaps .is-on i::after,.cs-hero.is-away .cs-chaps .is-on i::after{animation-play-state:paused}
@keyframes cs-fill{to{transform:none}}
.cs-chaps span{display:block;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.cs-chaps button:hover span,.cs-chaps .is-on span{color:var(--fg)}
.cs-chaps .is-on span{font-weight:700}
.cs-hero :is(button,a):focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ================= SCREENS (partials/cs-screen) ================= */
.cs-scr{--s-bar:color-mix(in srgb,var(--hx-text) 13%,transparent);--s-soft:color-mix(in srgb,var(--c) 16%,var(--hx-surface));--s-mid:color-mix(in srgb,var(--c) 45%,var(--hx-surface));
  position:absolute;inset:0;display:flex;flex-direction:column;gap:3.4cqw;padding:4.4cqw 4.8cqw;opacity:0;visibility:hidden;transform:scale(.975);
  transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s linear .45s;font-family:var(--font-sans);color:var(--hx-text)}
.cs-scr.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.cs-scr i,.cs-scr em,.cs-scr b{display:block;font-style:normal}
.cs-scr.is-on .rv{animation:cs-pop .6s cubic-bezier(.2,.9,.3,1.15) both;animation-delay:calc(var(--i,0) * 110ms + 120ms)}
@keyframes cs-pop{from{opacity:0;transform:translateY(3cqw) scale(.94)}}
.cs-scr .pill{width:13cqw;height:4.6cqw;border-radius:99px;background:var(--c)}
.cs-scr .logo{width:5.6cqw;height:5.6cqw;border-radius:1.6cqw;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 40%,var(--hx-sub)))}

/* shared top bar */
.s-top{display:flex;align-items:center;gap:3cqw}
.s-top>i{width:9cqw;height:1.8cqw;border-radius:99px;background:var(--s-bar)}
.s-top>.pill,.s-top>.cart{margin-left:auto}

/* brand: big photo hero + three cards */
.s-hero{flex:1;display:grid;grid-template-columns:1fr 1.15fr;gap:4cqw;align-items:center;min-height:0}
.s-hero .tx{display:flex;flex-direction:column;gap:2.2cqw}
.s-hero .tx i{height:3.4cqw;border-radius:1cqw;background:var(--hx-text);opacity:.85}
.s-hero .tx .l1{width:92%}.s-hero .tx .l2{width:70%;background:var(--c);opacity:1}
.s-hero .tx .l3{width:84%;height:1.6cqw;opacity:.25}
.s-hero .tx .pill{margin-top:1.4cqw}
.s-hero .ph{position:relative;height:100%;min-height:22cqw;border-radius:2.4cqw;overflow:hidden;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 70%,#fff) 0%,color-mix(in srgb,var(--c) 55%,var(--hx-ai)) 55%,color-mix(in srgb,var(--hx-ai) 60%,#000) 100%)}
.s-hero .ph .sun{position:absolute;right:16%;top:18%;width:11cqw;height:11cqw;border-radius:50%;background:color-mix(in srgb,var(--hx-sub) 85%,#fff);box-shadow:0 0 6cqw color-mix(in srgb,var(--hx-sub) 70%,transparent)}
.s-hero .ph .hill{position:absolute;inset:auto -10% -30% -10%;height:62%;border-radius:50% 50% 0 0;background:color-mix(in srgb,var(--c) 40%,#06121F)}
.cs-scr.is-on .s-hero .ph .sun{animation:cs-sun 6s ease-in-out infinite alternate}
@keyframes cs-sun{to{transform:translateY(3cqw)}}
.s-row3{display:grid;grid-template-columns:repeat(3,1fr);gap:3cqw}
.s-row3 i{height:12cqw;border-radius:2cqw;background:var(--s-soft);border:1px solid color-mix(in srgb,var(--c) 22%,transparent)}

/* dynamic: CMS editor types a title, the news list picks it up */
.s-split{flex:1;display:grid;grid-template-columns:.9fr 1.1fr;gap:4cqw;min-height:0}
.s-cms{display:flex;flex-direction:column;gap:1.6cqw;padding:3.4cqw;border-radius:2.4cqw;background:var(--hx-surface-2);border:1px solid var(--line-soft)}
.s-cms small{font-size:2.6cqw;font-weight:700;color:var(--muted)}
.s-cms .field{display:flex;align-items:center;height:6.6cqw;padding:0 2cqw;border-radius:1.4cqw;background:var(--hx-surface);border:1px solid color-mix(in srgb,var(--c) 45%,var(--line));font-size:3cqw;font-weight:800}
.s-cms .field.img{height:12cqw;border-style:dashed;background:var(--s-soft)}
.s-cms .typed{overflow:hidden;white-space:nowrap;width:0}
.s-cms .caret{width:.3cqw;height:3.6cqw;background:var(--c);animation:cs-blink 1s steps(2) infinite}
.s-cms .go{align-self:flex-start;width:auto;height:auto;margin-top:auto;padding:1.2cqw 3.4cqw;font-size:2.8cqw;font-weight:800;color:var(--hx-on);text-align:center}
.cs-scr.is-on .s-cms .typed{animation:cs-type 1.5s steps(6) .9s forwards}
@keyframes cs-type{to{width:6em}}
.cs-scr.is-on .s-cms .go{animation:cs-press .5s ease 2.6s both}
@keyframes cs-press{50%{transform:scale(.9);filter:brightness(1.2)}}
.s-news{display:flex;flex-direction:column;gap:2.4cqw}
.s-news .n{display:grid;grid-template-columns:13cqw 1fr;gap:2.4cqw;align-items:center;padding:1.8cqw;border-radius:2cqw;background:var(--hx-surface-2);border:1px solid var(--line-soft)}
.s-news .th{height:10cqw;border-radius:1.4cqw;background:var(--s-soft)}
.s-news .bar{height:2.2cqw;width:80%;border-radius:99px;background:var(--s-bar)}
.s-news .fresh b{font-size:3cqw;font-weight:800;color:var(--c);opacity:0}
.s-news .fresh .th{background:var(--s-mid)}
.cs-scr.is-on .s-news .fresh{animation:cs-pop .6s cubic-bezier(.2,.9,.3,1.15) both,cs-flash 1.2s ease 3s}
.cs-scr.is-on .s-news .fresh b{animation:cs-show .4s ease 3s forwards}
@keyframes cs-show{to{opacity:1}}
@keyframes cs-flash{30%{border-color:var(--c);box-shadow:0 0 0 .8cqw color-mix(in srgb,var(--c) 25%,transparent)}}

/* motion: morphing blobs, pulse ring, play button */
.s-stage{position:relative;flex:1;border-radius:2.6cqw;overflow:hidden;background:radial-gradient(70% 90% at 30% 30%,color-mix(in srgb,var(--c) 22%,var(--hx-surface)),var(--hx-surface-2))}
.s-stage .blob{position:absolute;border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;filter:blur(.2cqw);mix-blend-mode:normal;opacity:.9}
.s-stage .b1{width:34cqw;height:34cqw;left:8%;top:12%;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 50%,var(--hx-ai)))}
.s-stage .b2{width:24cqw;height:24cqw;right:12%;top:8%;background:linear-gradient(135deg,var(--hx-sub),color-mix(in srgb,var(--hx-sub) 50%,var(--c)));opacity:.8}
.s-stage .b3{width:18cqw;height:18cqw;right:24%;bottom:6%;background:linear-gradient(135deg,var(--hx-web),var(--hx-teal));opacity:.75}
.cs-scr.is-on .s-stage .b1{animation:cs-morph 7s ease-in-out infinite alternate}
.cs-scr.is-on .s-stage .b2{animation:cs-morph 6s ease-in-out -2s infinite alternate-reverse}
.cs-scr.is-on .s-stage .b3{animation:cs-morph 5s ease-in-out -1s infinite alternate}
@keyframes cs-morph{50%{border-radius:58% 42% 38% 62% / 55% 61% 39% 45%;transform:translate(3cqw,-2cqw) rotate(25deg)}100%{border-radius:40% 60% 52% 48% / 62% 38% 62% 38%;transform:translate(-2cqw,2cqw) rotate(-15deg)}}
.s-stage .ring{position:absolute;left:50%;top:50%;width:16cqw;height:16cqw;margin:-8cqw 0 0 -8cqw;border-radius:50%;border:.5cqw solid var(--hx-surface)}
.cs-scr.is-on .s-stage .ring{animation:cs-ring 2s ease-out infinite}
@keyframes cs-ring{from{transform:scale(.7);opacity:.9}to{transform:scale(1.9);opacity:0}}
.s-stage .play{position:absolute;left:50%;top:50%;width:13cqw;height:13cqw;margin:-6.5cqw 0 0 -6.5cqw;border-radius:50%;background:var(--hx-surface);box-shadow:0 2cqw 5cqw -2cqw rgba(0,0,0,.5)}
.s-stage .play::after{content:"";position:absolute;left:40%;top:30%;border-left:4.6cqw solid var(--c);border-top:2.8cqw solid transparent;border-bottom:2.8cqw solid transparent}
.s-stage .hint{position:absolute;left:50%;bottom:5cqw;width:4.4cqw;height:7cqw;margin-left:-2.2cqw;border:.45cqw solid var(--hx-text);border-radius:99px;opacity:.6}
.s-stage .hint i{width:.9cqw;height:1.6cqw;margin:1.2cqw auto 0;border-radius:99px;background:var(--hx-text)}
.cs-scr.is-on .s-stage .hint i{animation:cs-scroll 1.6s ease-in-out infinite}
@keyframes cs-scroll{60%{transform:translateY(2.2cqw);opacity:.2}}

/* shop: product grid, the cart badge bumps */
.s-top .cart{position:relative;width:6.4cqw;height:6.4cqw;display:grid;place-items:center;border-radius:1.6cqw;background:var(--s-soft);color:var(--c)}
.s-top .cart svg{width:4cqw;height:4cqw;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.s-top .cart .badge{position:absolute;right:-1.4cqw;top:-1.4cqw;min-width:3.8cqw;height:3.8cqw;padding:0 .8cqw;border-radius:99px;background:var(--c);color:var(--hx-on);font-size:2.4cqw;font-weight:800;line-height:3.8cqw;text-align:center}
.cs-scr.is-on .s-top .cart .badge{animation:cs-bump .5s cubic-bezier(.2,.9,.3,1.6) 1.7s both}
@keyframes cs-bump{0%{transform:scale(0)}70%{transform:scale(1.35)}100%{transform:none}}
.s-grid6{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:2.6cqw;min-height:0}
.s-grid6 .p{display:flex;flex-direction:column;gap:1.2cqw;padding:1.6cqw;border-radius:2cqw;background:var(--hx-surface-2);border:1px solid var(--line-soft);min-height:0}
.s-grid6 .im{flex:1;min-height:0;border-radius:1.4cqw;background:linear-gradient(140deg,hsl(var(--h) 70% 72%),hsl(calc(var(--h) + 40) 60% 52%))}
html[data-theme="dark"] .s-grid6 .im{background:linear-gradient(140deg,hsl(var(--h) 55% 58%),hsl(calc(var(--h) + 40) 50% 36%))}
.s-grid6 .nm{height:1.8cqw;width:76%;border-radius:99px;background:var(--s-bar)}
.s-grid6 .pr{height:2.2cqw;width:40%;border-radius:99px;background:var(--c)}
.cs-scr.is-on .s-grid6 .p:nth-child(2){animation:cs-pop .6s cubic-bezier(.2,.9,.3,1.15) both,cs-flash 1s ease 1.3s;animation-delay:calc(2 * 110ms + 120ms),1.3s}

/* member: profile card + booking calendar + toast */
.s-split.m{grid-template-columns:.8fr 1.2fr}
.s-prof{display:flex;flex-direction:column;align-items:center;gap:2cqw;padding:4cqw 3cqw;border-radius:2.4cqw;background:var(--hx-surface-2);border:1px solid var(--line-soft)}
.s-prof .av{width:13cqw;height:13cqw;border-radius:50%;background:radial-gradient(circle at 50% 38%,var(--hx-surface) 0 22%,transparent 23%),radial-gradient(circle at 50% 100%,var(--hx-surface) 0 42%,transparent 43%),var(--s-mid)}
.s-prof .nm{width:60%;height:2.4cqw;border-radius:99px;background:var(--hx-text);opacity:.75}
.s-prof .pts{display:flex;flex-direction:column;align-items:center;margin:1cqw 0}
.s-prof .pts small{font-size:2.4cqw;color:var(--muted);font-weight:700}
.s-prof .pts b{font-size:5.4cqw;font-weight:900;color:var(--c);line-height:1.1}
.s-prof .bar{width:86%;height:2cqw;border-radius:99px;background:var(--s-bar)}
.s-prof .bar.s{width:62%}
.s-cal{position:relative;display:flex;flex-direction:column;gap:2cqw;padding:3cqw;border-radius:2.4cqw;background:var(--hx-surface-2);border:1px solid var(--line-soft)}
.s-cal small{font-size:2.6cqw;font-weight:800;color:var(--hx-text-2)}
.s-cal .days{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:1.4cqw}
.s-cal .days i{border-radius:1.2cqw;background:var(--hx-surface);border:1px solid var(--line-soft);min-height:5cqw}
.s-cal .days i.off{background:transparent;border-style:dashed}
.s-cal .days i.sel{border-color:var(--c)}
.cs-scr.is-on .s-cal .days i.sel{animation:cs-sel .5s ease 1.3s forwards}
@keyframes cs-sel{to{background:var(--c);box-shadow:0 0 0 .7cqw color-mix(in srgb,var(--c) 25%,transparent)}}
.s-cal .toast{position:absolute;left:50%;bottom:3cqw;transform:translateX(-50%);padding:1.6cqw 3cqw;border-radius:99px;background:var(--hx-text);color:var(--hx-surface);font-size:2.6cqw;font-weight:800;white-space:nowrap;opacity:0}
.cs-scr.is-on .s-cal .toast{animation:cs-toast .5s cubic-bezier(.2,.9,.3,1.2) 1.9s forwards}
@keyframes cs-toast{from{opacity:0;transform:translate(-50%,3cqw)}to{opacity:1;transform:translate(-50%,0)}}

/* admin: side menu, approval flow, table rows */
.s-admin{flex:1;display:grid;grid-template-columns:20cqw 1fr;gap:3.4cqw;min-height:0}
.s-admin .side{display:flex;flex-direction:column;gap:2.2cqw;padding:3cqw 2.4cqw;border-radius:2.4cqw;background:var(--hx-surface-2);border:1px solid var(--line-soft)}
.s-admin .side b{width:7cqw;height:7cqw;border-radius:1.8cqw;background:var(--c);margin-bottom:1cqw}
.s-admin .side i{height:2.6cqw;border-radius:99px;background:var(--s-bar)}
.s-admin .side i.on{background:var(--c)}
.s-admin .main{display:flex;flex-direction:column;gap:2.6cqw;min-width:0}
.s-admin .flow{display:flex;gap:2cqw}
.s-admin .flow span{position:relative;flex:1;padding:1.6cqw 0;border-radius:1.4cqw;border:1px solid var(--line-soft);background:var(--hx-surface-2);font-size:2.7cqw;font-weight:800;text-align:center;color:var(--hx-text-2)}
.s-admin .flow span::after{content:"✓";position:absolute;right:-1.2cqw;top:-1.6cqw;width:4.2cqw;height:4.2cqw;border-radius:50%;background:var(--c);color:var(--hx-on);font-size:2.5cqw;line-height:4.2cqw;text-align:center;transform:scale(0)}
.cs-scr.is-on .s-admin .flow span::after{animation:cs-bump .45s cubic-bezier(.2,.9,.3,1.6) forwards}
.cs-scr.is-on .s-admin .flow span:nth-child(1)::after{animation-delay:1.1s}
.cs-scr.is-on .s-admin .flow span:nth-child(2)::after{animation-delay:1.6s}
.cs-scr.is-on .s-admin .flow span:nth-child(3)::after{animation-delay:2.1s}
.s-admin .tbl{flex:1;display:flex;flex-direction:column;gap:1.6cqw;min-height:0}
.s-admin .r{display:grid;grid-template-columns:7cqw 1fr auto;gap:2.4cqw;align-items:center;padding:1.8cqw 2.2cqw;border-radius:1.6cqw;background:var(--hx-surface-2);border:1px solid var(--line-soft)}
.s-admin .r i{height:2.2cqw;border-radius:99px;background:var(--s-bar)}
.s-admin .r i.w{width:70%}
.s-admin .st{padding:.8cqw 2cqw;border-radius:99px;font-size:2.4cqw;font-weight:800;background:var(--s-soft);color:var(--c)}
.s-admin .st.wait{background:color-mix(in srgb,var(--hx-sub) 20%,var(--hx-surface));color:var(--hx-sub)}
.cs-scr.is-on .s-admin .st.wait{animation:cs-approve .01s linear 2.4s forwards}
@keyframes cs-approve{to{background:var(--c);color:var(--hx-on)}}

/* data: KPI tiles, growing bars, donut */
.s-dash{flex:1;display:flex;flex-direction:column;gap:3cqw;min-height:0}
.s-dash .kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6cqw}
.s-dash .kpi span{display:flex;flex-direction:column;gap:.6cqw;padding:2.4cqw 2.8cqw;border-radius:2cqw;background:var(--hx-surface-2);border:1px solid var(--line-soft)}
.s-dash .kpi small{font-size:2.4cqw;font-weight:700;color:var(--muted)}
.s-dash .kpi b{font-size:4.6cqw;font-weight:900;line-height:1.1;color:var(--hx-blue)}
.s-dash .kpi span:last-child b{color:var(--hx-text)}
.s-dash .charts{flex:1;display:grid;grid-template-columns:1.6fr 1fr;gap:3cqw;min-height:0}
.s-dash .bars{display:flex;align-items:flex-end;gap:2cqw;padding:3cqw 3cqw 2.4cqw;border-radius:2.4cqw;background:var(--hx-surface-2);border:1px solid var(--line-soft)}
.s-dash .bars i{flex:1;height:var(--h);border-radius:1cqw 1cqw .4cqw .4cqw;background:linear-gradient(var(--c),color-mix(in srgb,var(--c) 45%,var(--hx-surface)));transform-origin:bottom;transform:scaleY(0)}
.cs-scr.is-on .s-dash .bars i{animation:cs-grow .8s cubic-bezier(.2,.9,.3,1.1) forwards}
.s-dash .bars i:nth-child(1){animation-delay:.6s}.s-dash .bars i:nth-child(2){animation-delay:.7s}.s-dash .bars i:nth-child(3){animation-delay:.8s}.s-dash .bars i:nth-child(4){animation-delay:.9s}.s-dash .bars i:nth-child(5){animation-delay:1s}.s-dash .bars i:nth-child(6){animation-delay:1.1s}.s-dash .bars i:nth-child(7){animation-delay:1.2s}
@keyframes cs-grow{to{transform:none}}
.s-dash .pie{display:grid;place-items:center;border-radius:2.4cqw;background:var(--hx-surface-2);border:1px solid var(--line-soft)}
.s-dash .pie svg{width:70%;max-height:90%;transform:rotate(-90deg)}
.s-dash .pie circle{fill:none;stroke-width:5}
.s-dash .pie .bg{stroke:var(--s-bar)}
.s-dash .pie .fg{stroke:var(--c);stroke-linecap:round;stroke-dasharray:88;stroke-dashoffset:88}
.cs-scr.is-on .s-dash .pie .fg{animation:cs-donut 1.4s cubic-bezier(.4,0,.2,1) 1s forwards}
@keyframes cs-donut{to{stroke-dashoffset:24}}

/* startup: phone mockup + version chips + launch progress */
.s-launch{flex:1;display:grid;grid-template-columns:auto 1fr;gap:6cqw;align-items:center;padding:0 4cqw;min-height:0}
.s-launch .phone{position:relative;display:flex;flex-direction:column;gap:2cqw;width:27cqw;height:100%;max-height:52cqh;min-height:0;padding:5cqw 2.6cqw 3cqw;border-radius:5cqw;border:.7cqw solid var(--hx-text);background:var(--hx-surface-2)}
.s-launch .notch{position:absolute;top:1.4cqw;left:50%;width:9cqw;height:2cqw;margin-left:-4.5cqw;border-radius:99px;background:var(--hx-text)}
.s-launch .card{flex:1;border-radius:2cqw;background:var(--s-soft)}
.s-launch .card.c1{flex:1.4;background:linear-gradient(140deg,var(--c),color-mix(in srgb,var(--c) 50%,var(--hx-sub)))}
.cs-scr.is-on .s-launch .card{animation:cs-pop .6s cubic-bezier(.2,.9,.3,1.15) both}
.cs-scr.is-on .s-launch .card.c2{animation-delay:.5s}.cs-scr.is-on .s-launch .card.c3{animation-delay:.65s}
.s-launch .ver{display:flex;flex-direction:column;gap:3cqw}
.s-launch .chips{display:flex;align-items:center;gap:2cqw;font-size:3.4cqw}
.s-launch .chips i{color:var(--muted);font-weight:800}
.s-launch .v{padding:1.2cqw 3cqw;border-radius:99px;border:1px solid var(--line);font-weight:800;color:var(--hx-text-2)}
.s-launch .v2{border-color:var(--c);color:var(--c)}
.cs-scr.is-on .s-launch .v2{animation:cs-approve .01s linear 2.6s forwards}
.s-launch .prog{height:3cqw;border-radius:99px;background:var(--s-bar);overflow:hidden}
.s-launch .prog i{height:100%;width:100%;border-radius:99px;background:linear-gradient(90deg,var(--c),var(--hx-sub));transform:scaleX(0);transform-origin:left}
.cs-scr.is-on .s-launch .prog i{animation:cs-fill 1.8s cubic-bezier(.4,0,.2,1) .8s forwards}
.s-launch small{font-size:3cqw;font-weight:800;color:var(--hx-text-2)}

/* ================= 3. STEPS ================= */
.cs-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin:0;padding:0;list-style:none}
.cs-steps::before{content:"";position:absolute;left:12.5%;right:12.5%;top:39px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--hx-web),var(--hx-teal),var(--hx-ai),var(--hx-sub));opacity:.3}
.cs-steps::after{content:"";position:absolute;left:12.5%;top:34px;width:13px;height:13px;border-radius:50%;background:var(--hx-sub);box-shadow:0 0 16px var(--hx-sub);opacity:0}
.in-view .cs-steps::after{animation:cs-travel 4.8s cubic-bezier(.6,0,.4,1) .4s infinite}
@keyframes cs-travel{0%{left:12.5%;opacity:0;background:var(--hx-web)}8%{opacity:1}33%{background:var(--hx-teal)}66%{background:var(--hx-ai)}88%{opacity:1}100%{left:calc(87.5% - 13px);opacity:0;background:var(--hx-sub)}}
.cs-step{position:relative;text-align:center}
.cs-step .ic{position:relative;z-index:1;display:grid;place-items:center;width:80px;height:80px;margin:0 auto 18px;border-radius:24px;color:var(--c);
  background:color-mix(in srgb,var(--c) 13%,var(--panel));border:1px solid color-mix(in srgb,var(--c) 48%,transparent);box-shadow:0 14px 34px -18px color-mix(in srgb,var(--c) 85%,transparent)}
.cs-step .ic svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cs-step .ic b{position:absolute;right:-8px;top:-8px;width:28px;height:28px;border-radius:50%;background:var(--c);color:var(--hx-on);font:800 12px/28px var(--font-mono)}
.cs-step h3{font-size:21px;font-weight:800;line-height:1.35}
.cs-step p{margin:8px auto 0;max-width:15em;font-size:15.5px;line-height:1.7;color:var(--fg-2)}

/* ================= 4. AI ADD-ON (violet panel around the scenario films) ================= */
.cs-ai{position:relative;border:1px solid color-mix(in srgb,var(--hx-ai) 38%,var(--line));border-radius:24px;padding:clamp(22px,3vw,44px);
  background:radial-gradient(60% 70% at 100% 0%,color-mix(in srgb,var(--hx-ai) 15%,transparent),transparent 70%),radial-gradient(40% 60% at 0% 100%,color-mix(in srgb,var(--hx-sub) 8%,transparent),transparent 70%),var(--panel)}
.cs-ai .hx-head h2 .hl{color:var(--hx-ai)}
.cs-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:6px 13px;border-radius:99px;background:var(--hx-ai);color:var(--hx-on);font-size:13px;font-weight:800;letter-spacing:.04em}
.cs-badge svg{width:15px;height:15px;fill:currentColor}
.cs-ai-pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 28px;padding:0;list-style:none}
.cs-ai-pts li{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:14px;background:var(--editor);border:1px solid var(--line-soft)}
.cs-ai-pts svg{flex:none;width:26px;height:26px;padding:5px;border-radius:8px;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c)}
.cs-ai-pts b{display:block;font-size:16.5px;font-weight:800;color:var(--fg)}
.cs-ai-pts span{display:block;margin-top:3px;font-size:14.5px;line-height:1.6;color:var(--fg-2)}
.cs-ai .sv-scene{margin-top:4px}
.cs-ai-more{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:22px}

/* ================= 5. WORK + INTEGRATIONS ================= */
.cs-sub{display:flex;align-items:center;gap:14px;margin:42px 0 18px;font-size:18px;font-weight:800;color:var(--fg)}
.cs-sub::after{content:"";flex:1;height:1px;background:var(--line)}

/* ================= responsive ================= */
@media (max-width:1180px){
  .cs-frame{height:auto;min-height:0}
  .cs-body{grid-template-columns:1fr;gap:34px;padding:42px 36px 34px}
  .cs-visual{height:420px;min-height:0}
  .cs-hero h1{font-size:clamp(34px,6cqw,56px)}
  .cs-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
  .cs-steps::before,.cs-steps::after{display:none}
  .cs-ai-pts{grid-template-columns:1fr}
  .cs-chaps span{font-size:11px}
}
@media (max-width:720px){
  .cs-wrap{padding-top:14px}
  .cs-hero{border-radius:14px}
  .cs-body{padding:28px 20px 24px;gap:26px}
  .cs-hero h1{font-size:clamp(31px,9cqw,40px)}
  .cs-hero h1 .g{font-size:.7em}
  .cs-now{margin-top:18px}
  .cs-hero .actions .action{flex:1 1 100%}
  .cs-visual{height:300px;perspective:none}
  .cs-code{display:none}
  .cs-browser{width:100%;height:92%;top:4%;transform:none}
  .cs-chip.c1{left:-4px;bottom:-6px}.cs-chip.c2{right:-4px;top:-10px}
  .cs-chaps span,.cs-file{display:none}
  .cs-chaps button{padding:9px 0}
  .cs-steps{grid-template-columns:1fr}
  .cs-step{display:grid;grid-template-columns:64px 1fr;gap:4px 16px;text-align:left;align-items:center}
  .cs-step .ic{grid-row:span 2;width:64px;height:64px;margin:0;border-radius:18px}
  .cs-step .ic svg{width:28px;height:28px}
  .cs-step p{margin:0;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .cs-hero *,.cs-hero *::before,.cs-hero *::after,.cs-steps::after{animation:none!important;transition:none!important}
  .cs-scr .typed{width:auto}.s-news .fresh b,.s-cal .toast{opacity:1}
  .s-dash .bars i,.s-launch .prog i{transform:none}.s-dash .pie .fg{stroke-dashoffset:24}
}