/* ==========================================================================
   Envision animated illustrations (v1.26.1): Custom Website Development hero, four story visuals and the six-card board.
   Rules that make them robust:
   - shared styles apply to BOTH .ill (stages) and .ill-cards (the board);
   - sizes are em of the stage, every window is sized to fit its content (checked by an automatic clip test);
   - the default state of every animation is the finished picture; JS adds .pre (start state) and .on (play) when it scrolls into view.
   ========================================================================== */
.ill-box{container-type:inline-size;width:100%}
:is(.ill,.ill-cards){--y:#F1C91C;--ink:#15181f;font-family:var(--disp);color:#0a0b0e}
:is(.ill,.ill-cards) *{box-sizing:border-box}
:is(.ill,.ill-cards) :is(b,em,small,p,span,pre,code,h3,u,s){margin:0}
:is(.ill,.ill-cards) svg{display:block;flex:none}
.ill{position:relative;font-size:calc(100cqw/88);width:100cqw;aspect-ratio:1524/1032;overflow:hidden;border-radius:2.2em;background:#FBF6EA}
.ill>*{position:absolute}
.ill-dark{background:transparent;overflow:visible;aspect-ratio:1512/1040;border-radius:0;font-size:calc(138cqw/110);width:138cqw;margin-left:-19cqw}
/* ---- shared parts ---- */
:is(.ill,.ill-cards) .win{background:var(--ink);border-radius:1.5em;box-shadow:0 1.3em 2.6em -1.3em rgba(10,11,14,.6);overflow:hidden;color:#fff;display:flex;flex-direction:column}
:is(.ill,.ill-cards) .bar{display:flex;align-items:center;gap:.6em;height:2.8em;padding:0 1.3em;flex:none}
:is(.ill,.ill-cards) .bar i{width:.9em;height:.9em;border-radius:50%;background:var(--y);flex:none}
:is(.ill,.ill-cards) .bar i:nth-child(3){background:#6b707c}
:is(.ill,.ill-cards) .bar em{font:600 1em/1 var(--disp);font-style:normal;color:#d7dae2;margin-left:.8em}
:is(.ill,.ill-cards) .bar span{margin-left:auto;color:#9aa0ac;font-size:1em;letter-spacing:.1em}
:is(.ill,.ill-cards) .chip{display:grid;place-items:center;width:5em;height:5em;border-radius:1.4em;background:var(--ink);color:var(--y);box-shadow:0 .8em 1.6em -.8em rgba(0,0,0,.55);flex:none}
:is(.ill,.ill-cards) .chip svg{width:54%;height:54%;stroke-width:2}
:is(.ill,.ill-cards) .pill{background:var(--y);color:#0a0b0e;font:800 1.7em/1 var(--disp);padding:.62em 1.7em;border-radius:99em;white-space:nowrap;box-shadow:0 .8em 1.6em -.8em rgba(241,201,28,.7)}
:is(.ill,.ill-cards) .cta{display:inline-block;background:var(--y);color:#0a0b0e;font:800 1.2em/1 var(--disp);padding:.62em 1.3em;border-radius:.7em;white-space:nowrap}
:is(.ill,.ill-cards) pre{white-space:pre;font:500 .95em/1.55 ui-monospace,Menlo,Consolas,monospace;color:#e6e9f2;padding:.6em 1.3em 1em;overflow:hidden;flex:1;min-height:0}
:is(.ill,.ill-cards) pre b{color:#6b707c;font-weight:400;margin-right:.6em}
:is(.ill,.ill-cards) .bb{display:block;flex:1;max-width:13em;height:.75em;border-radius:1em;background:#3a3f4b;overflow:hidden}
:is(.ill,.ill-cards) .bb u{display:block;height:100%;width:var(--w);background:var(--y);border-radius:1em;transform-origin:left}
:is(.ill,.ill-cards) .tk{display:block;width:1.8em;height:1.8em;border-radius:.45em;background:var(--y);position:relative;flex:none}
:is(.ill,.ill-cards) .tk::after{content:"";position:absolute;left:.58em;top:.22em;width:.5em;height:.98em;border:solid #0a0b0e;border-width:0 .22em .22em 0;transform:rotate(45deg)}
:is(.ill,.ill-cards) .card{background:#fff;color:#0a0b0e;border-radius:1.5em;box-shadow:0 1.3em 2.6em -1.3em rgba(10,11,14,.55)}
:is(.ill,.ill-cards) .cur{width:2.6em;height:2.6em;filter:drop-shadow(0 .3em .4em rgba(0,0,0,.35));z-index:6;pointer-events:none}
/* mock website */
.ill .site{background:#fff;color:#0a0b0e;border-radius:1em;position:relative;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;gap:1em;padding:1.3em 1.6em;min-height:0}
.ill .site .nv{display:flex;align-items:center;gap:1em}
.ill .site .nv .lg{width:4.6em;height:.9em;border-radius:1em;background:#c9ccd3}.ill .site .nv .lk{width:5em;height:.7em;border-radius:1em;background:#d7dadf;margin-left:auto}.ill .site .nv .lk+.lk{margin-left:0}.ill .site .nv .bt{width:7em;height:1.5em;border-radius:1em;background:var(--y)}
.ill .site .hr{position:relative;display:flex;align-items:center;min-height:0;overflow:hidden}
.ill .site .hr .tx{position:relative;z-index:2;display:grid;gap:1.1em;justify-items:start;width:60%}
.ill .site .hr b{font:800 3.3em/1 var(--disp);letter-spacing:-.035em;color:#0a0b0e;display:block}
.ill .site .wedge{position:absolute;right:0;bottom:0;width:62%;height:100%;background:var(--y);clip-path:polygon(0 100%,100% 6%,100% 100%)}
.ill .site .cs{display:grid;grid-template-columns:repeat(3,1fr);gap:1em}
.ill .site .cs span{display:grid;gap:.5em;background:#1b1f27;border-radius:.8em;padding:1em}
.ill .site .cs u{display:block;width:34%;height:.7em;border-radius:1em;background:var(--y)}.ill .site .cs s{display:block;height:.5em;border-radius:1em;background:#5a606c}.ill .site .cs s+s{width:70%}
.ill .win-site{padding:0 1.1em 1.1em}.ill .win-site .site{flex:1}
/* ==== v1.27 interactive components (shared by stages and the board) ==== */
:is(.ill,.ill-cards) .sw{display:inline-block;width:3.4em;height:1.9em;border-radius:99em;background:#3a3f4b;border:0;padding:0;position:relative;cursor:pointer;flex:none;transition:background .3s}
:is(.ill,.ill-cards) .sw i{position:absolute;left:.25em;top:.25em;width:1.4em;height:1.4em;border-radius:50%;background:#fff;transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .3s}
:is(.ill,.ill-cards) .sw.on{background:var(--y)}:is(.ill,.ill-cards) .sw.on i{transform:translateX(1.5em);background:#0a0b0e}
:is(.ill,.ill-cards) button{font:inherit;font-size:1em;line-height:1;font-family:var(--disp);margin:0;color:inherit}
:is(.ill,.ill-cards) button:focus-visible{outline:.2em solid var(--y);outline-offset:.15em}
:is(.ill,.ill-cards) .prod{background:#fff;color:#0a0b0e;border-radius:1em;padding:.8em;display:grid;gap:.5em;box-shadow:0 .6em 1.2em -.8em rgba(10,11,14,.4);min-width:0}
:is(.ill,.ill-cards) .prod .pic{display:block;aspect-ratio:1.3;border-radius:.7em;background:linear-gradient(135deg,#F1C91C,#C9A112)}
:is(.ill,.ill-cards) .prod .p2{background:linear-gradient(135deg,#1b1f27,#3a3f4b)}:is(.ill,.ill-cards) .prod .p3{background:linear-gradient(135deg,#fbe7a3,#F1C91C)}:is(.ill,.ill-cards) .prod .p4{background:linear-gradient(135deg,#2a2f3a,#15181f)}
:is(.ill,.ill-cards) .prod .nm{display:block;height:.55em;border-radius:1em;background:#d3d6dc}:is(.ill,.ill-cards) .prod .nm.s{width:60%}
:is(.ill,.ill-cards) .prod .pbar{display:flex;align-items:center;justify-content:space-between;gap:.6em}:is(.ill,.ill-cards) .prod .pbar u{display:block;width:40%;height:.7em;border-radius:1em;background:var(--y)}
:is(.ill,.ill-cards) .prod .add{font:800 1.5em/1 var(--disp);width:1.4em;height:1.4em;border-radius:.35em;border:0;background:#0a0b0e;color:var(--y);cursor:pointer;display:grid;place-items:center;padding:0;transition:transform .2s,background .2s}
:is(.ill,.ill-cards) .prod .add:hover{background:var(--y);color:#0a0b0e;transform:scale(1.12)}
:is(.ill,.ill-cards) .cartb{display:inline-flex;align-items:center;gap:.5em;background:var(--ink);color:var(--y);border-radius:.8em;padding:.5em .8em;flex:none}
:is(.ill,.ill-cards) .cartb svg{width:1.9em;height:1.9em}:is(.ill,.ill-cards) .cartb em{font:800 1.1em/1 var(--disp);font-style:normal;background:var(--y);color:#0a0b0e;border-radius:99em;padding:.25em .55em}
:is(.ill,.ill-cards) .cartb.bump{animation:illbump .45s cubic-bezier(.34,1.56,.64,1)}
:is(.ill,.ill-cards) .prg{height:.8em;border-radius:1em;background:#d9dce2;overflow:hidden}:is(.ill,.ill-cards) .prg u{display:block;height:100%;width:var(--p,50%);background:var(--y);border-radius:1em;transition:width .7s cubic-bezier(.2,.8,.2,1)}
:is(.ill,.ill-cards) .lessons{display:grid;gap:.7em;align-content:start}
:is(.ill,.ill-cards) .les{display:flex;align-items:center;gap:.8em;border:0;background:rgba(255,255,255,.07);border-radius:.7em;padding:.7em .9em;cursor:pointer;transition:background .25s;min-width:0}
:is(.ill,.ill-cards) .les u{display:block;height:.55em;border-radius:1em;background:#5a606c;flex:1}
:is(.ill,.ill-cards) .les .tk{background:#5a606c;transition:background .3s,transform .3s}:is(.ill,.ill-cards) .les .tk::after{opacity:0;transition:opacity .2s}
:is(.ill,.ill-cards) .les.done .tk{background:var(--y)}:is(.ill,.ill-cards) .les.done .tk::after{opacity:1}:is(.ill,.ill-cards) .les:hover{background:rgba(255,255,255,.13)}
.pane .les{background:#eef0f3}.pane .les u{background:#cfd3da}.pane .les:hover{background:#e4e7ec}.pane .les .tk{background:#cfd3da}.pane .les.done .tk{background:var(--y)}
:is(.ill,.ill-cards) .pm{display:flex;align-items:center;gap:.6em;border:.14em solid #d9dce2;background:#fff;color:#0a0b0e;border-radius:.9em;padding:.6em .9em;cursor:pointer;transition:background .25s,border-color .25s,transform .25s;min-width:0}
:is(.ill,.ill-cards) .pm svg{width:2em;height:2em}:is(.ill,.ill-cards) .pm em{font:700 1.2em/1 var(--disp);font-style:normal}
:is(.ill,.ill-cards) .pm:hover{transform:translateY(-.15em)}:is(.ill,.ill-cards) .pm.on{background:var(--y);border-color:#0a0b0e}
:is(.ill,.ill-cards) .paybtn{border:0;background:#0a0b0e;color:#fff;border-radius:.9em;font:800 1.3em/1 var(--disp);cursor:pointer;position:relative;overflow:hidden;height:2.6em;min-width:7em;padding:0 1em}
:is(.ill,.ill-cards) .paybtn .b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.4em;background:var(--y);color:#0a0b0e;transform:translateY(105%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
:is(.ill,.ill-cards) .paybtn .b svg{width:1.3em;height:1.3em;stroke-width:3}:is(.ill,.ill-cards) .payarea.paid .paybtn .b{transform:none}:is(.ill,.ill-cards) .payarea.paying .paybtn .a{opacity:.45}
:is(.ill,.ill-cards) .runbtn{background:var(--y);color:#0a0b0e;border:0;border-radius:.8em;font:800 1.2em/1 var(--disp);padding:.7em 1.1em;cursor:pointer;transition:transform .2s}:is(.ill,.ill-cards) .runbtn:hover{transform:translateY(-.12em)}
:is(.ill,.ill-cards) .fl{position:absolute;display:block;height:.3em;background:repeating-linear-gradient(90deg,var(--y) 0 .7em,transparent .7em 1.3em);background-size:1.3em 100%}
:is(.ill,.ill-cards) .fl.v{width:.3em;height:auto;background:repeating-linear-gradient(180deg,var(--y) 0 .7em,transparent .7em 1.3em);background-size:100% 1.3em}
:is(.ill,.ill-cards) .dt{position:absolute;width:1em;height:1em;border-radius:50%;background:#fff;border:.22em solid var(--y);opacity:0;z-index:4}
.ill .bch{display:inline-flex;align-items:center;gap:.6em;background:rgba(21,24,31,.94);color:#fff;border:.1em solid rgba(255,255,255,.22);border-radius:99em;padding:.55em 1.1em;font:700 1.25em/1 var(--disp);white-space:nowrap;z-index:5;box-shadow:0 .8em 1.6em -.8em #000}
.ill .bch i{display:block;width:.6em;height:.6em;border-radius:50%;background:var(--y)}
.ill .d1{transform:translate(calc(var(--mx,0)*-.6em),calc(var(--my,0)*-.4em));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ill .d2{transform:translate(calc(var(--mx,0)*.5em),calc(var(--my,0)*.35em));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ill .d3{transform:translate(calc(var(--mx,0)*1.1em),calc(var(--my,0)*.8em));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
/* ---- HERO (WordPress workspace) ---- */
.ill-hero .wpside{left:2%;top:15%;width:20%;height:60%;background:var(--ink);border-radius:1.8em;box-shadow:0 1.6em 3em -1.4em #000,0 0 0 .1em rgba(255,255,255,.12);padding:1.4em 1.2em 1.2em;display:flex;flex-direction:column;gap:.9em;z-index:3;color:#fff;overflow:hidden}
.ill-hero .wph{display:flex;align-items:center;gap:.8em;flex:none}.ill-hero .wph i{display:block;width:2em;height:2em;border-radius:50%;background:var(--y)}.ill-hero .wph b{font:800 1.4em/1 var(--disp)}
.ill-hero .wpside .tabs{display:grid;gap:.5em;margin-top:.5em;flex:1;align-content:start}
.ill-hero .tb{display:flex;align-items:center;gap:.9em;border:0;background:transparent;color:#aeb3c0;padding:.85em .9em;border-radius:.9em;cursor:pointer;text-align:left;position:relative;transition:background .3s,color .3s}
.ill-hero .tb svg{width:2.2em;height:2.2em;stroke-width:1.7}.ill-hero .tb em{font:700 1.3em/1 var(--disp);font-style:normal}
.ill-hero .tb:hover{background:rgba(255,255,255,.06);color:#fff}.ill-hero .tb.on{background:rgba(241,201,28,.15);color:#fff}.ill-hero .tb.on svg{color:var(--y)}
.ill-hero .tb.on::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:.3em;border-radius:1em;background:var(--y)}
.ill-hero .prog{display:block;height:.3em;border-radius:1em;background:rgba(255,255,255,.14);position:relative;overflow:hidden;flex:none}
.ill-hero .prog::after{content:"";position:absolute;inset:0;background:var(--y);transform-origin:left;transform:scaleX(0)}
.ill-hero.on:not(.hold) .prog::after{animation:illprog 4.4s linear infinite}
.ill-hero .brw{left:24%;top:12%;width:66%;height:62%;background:#fff;border-radius:1.7em;box-shadow:0 0 0 .32em var(--ink),0 0 0 .62em #fff,0 2em 4em -1.4em #000;overflow:hidden;z-index:2;display:flex;flex-direction:column}
.ill-hero .url{display:flex;align-items:center;gap:.6em;height:3.2em;padding:0 1.3em;background:#eceef1;color:#2b2f3a;font:600 1.2em/1 var(--disp);flex:none}
.ill-hero .url i{width:.95em;height:.95em;border-radius:50%;background:#c9ccd3}.ill-hero .url i:nth-child(2){background:#c9ccd3}.ill-hero .url i:nth-child(3){background:#c9ccd3}.ill-hero .url .adr{margin-left:1em;background:#fff;border-radius:99em;padding:.45em 1.4em;width:36%}
.ill-hero .panes{position:relative;flex:1;min-height:0;background:#f6f4ee}
.ill-hero .pane{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s;padding:1.8em 2.2em;color:#0a0b0e;overflow:hidden}
.ill-hero .pane.on{opacity:1;visibility:visible;animation:illpane .6s cubic-bezier(.2,.8,.2,1)}
@keyframes illpane{from{transform:translateY(1.4em)}to{transform:none}}
.ill-hero .p0,.ill-hero .p3{padding:0}.ill-hero .p0{background:#111}
.ill-hero .shot{position:absolute;inset:0;overflow:hidden}.ill-hero .shot img{display:block;width:100%;height:auto;transform:translateY(0)}
.ill-hero .pane.on .shot img{animation:illshot 22s ease-in-out infinite alternate}
.ill-hero .p0 .tag{position:absolute;left:1.6em;bottom:1.6em;display:inline-flex;align-items:center;gap:.6em;background:rgba(21,24,31,.94);color:#fff;border-radius:99em;padding:.55em 1.1em;font:700 1.25em/1 var(--disp);z-index:2}.ill-hero .p0 .tag i{display:block;width:.6em;height:.6em;border-radius:50%;background:var(--y)}
.ill-hero .shop{display:grid;grid-template-rows:auto 1fr;gap:1.6em;height:100%}.ill-hero .sh{display:flex;align-items:center;gap:1.4em}.ill-hero .sn{font:800 2.4em/1 var(--disp)}.ill-hero .nl{display:block;width:5em;height:.7em;border-radius:1em;background:#d7dadf}.ill-hero .sh .cartb{margin-left:auto}
.ill-hero .pg{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6em;align-content:start}
.ill-hero .lms{display:grid;grid-template-columns:1fr 1.15fr;gap:2.4em;align-items:start;height:100%}
.ill-hero .crs{background:#fff;border-radius:1.2em;padding:1.3em;display:grid;gap:1em;box-shadow:0 1em 2em -1.4em rgba(10,11,14,.45)}
.ill-hero .cover{display:block;height:11.5em;border-radius:.9em;background:linear-gradient(135deg,#F1C91C,#C9A112)}.ill-hero .crs .ct{font:800 1.8em/1 var(--disp)}.ill-hero .crs .nm{display:block;height:.6em;border-radius:1em;background:#d3d6dc;width:70%}
.ill-hero .ll .lt{display:block;font:800 1.9em/1 var(--disp);margin-bottom:.9em}.ill-hero .lessons{gap:.9em}.ill-hero .les{padding:1em 1.2em}.ill-hero .les .tk{width:2em;height:2em}
.ill-hero .auto{position:absolute;inset:0}
.ill-hero .auto .nd{position:absolute;display:flex;align-items:center;gap:.8em;background:var(--ink);color:#fff;border-radius:1.2em;padding:.9em 1.2em;box-shadow:0 1em 2em -1.2em #000;z-index:2}
.ill-hero .auto .nd svg{width:2.2em;height:2.2em;color:var(--y)}.ill-hero .auto .nd em{font:700 1.4em/1 var(--disp);font-style:normal}
.ill-hero .n-in{left:3em;top:17.2em;width:13em;height:6.6em}.ill-hero .n-o1{left:56em;top:6em;width:14em;height:6.6em}.ill-hero .n-o2{left:56em;top:18em;width:14em;height:6.6em}.ill-hero .n-o3{left:56em;top:30em;width:14em;height:6.6em}
.ill-hero .n-pl{left:26em;top:8em;width:20em;height:26em;flex-direction:column;align-items:stretch;justify-content:center;gap:1.1em;padding:1.4em}
.ill-hero .n-pl b{font:800 1.7em/1 var(--disp);color:#fff;display:block;margin-bottom:.2em}.ill-hero .n-pl .tg{display:flex;align-items:center;justify-content:space-between;gap:1em;background:rgba(255,255,255,.07);border-radius:.8em;padding:.7em .9em}.ill-hero .n-pl .tg em{font:600 1.25em/1 var(--disp);font-style:normal}
.ill-hero .auto .f1{left:16em;top:20.3em;width:10em}.ill-hero .auto .f2{left:46em;top:21em;width:10em}.ill-hero .auto .f3{left:50em;top:9.2em;height:24.8em}.ill-hero .auto .f4{left:50em;top:9.2em;width:6em}.ill-hero .auto .f5{left:50em;top:33.8em;width:6em}
.ill-hero .auto .d1{left:16em;top:19.8em}.ill-hero .auto .d2{left:46em;top:20.5em}.ill-hero .auto .d3{left:50em;top:8.7em}
.ill-hero .chk{display:grid;grid-template-columns:1fr 1fr;gap:2.6em;height:100%;align-items:start}
.ill-hero .ord{background:#fff;border-radius:1.2em;padding:1.5em;display:grid;gap:1em;box-shadow:0 1em 2em -1.4em rgba(10,11,14,.45)}.ill-hero .ord b{font:800 1.8em/1 var(--disp)}
.ill-hero .ord p{display:flex;align-items:center;gap:.9em;margin:0}.ill-hero .ord p i{display:block;width:3.2em;height:3.2em;border-radius:.7em;background:linear-gradient(135deg,#F1C91C,#C9A112);flex:none}.ill-hero .ord p u{display:block;flex:1;height:.6em;border-radius:1em;background:#d3d6dc}
.ill-hero .ord .tot{display:flex;justify-content:space-between;align-items:center;border-top:.1em solid #e5e7eb;padding-top:.9em}.ill-hero .ord .tot em{font:800 1.5em/1 var(--disp);font-style:normal}.ill-hero .ord .tot u{display:block;width:6em;height:.9em;border-radius:1em;background:#0a0b0e}
.ill-hero .payarea.big{display:grid;gap:1.4em;align-content:start}.ill-hero .payarea.big .pms{display:grid;gap:.9em}.ill-hero .payarea.big .pm{padding:1em 1.2em}.ill-hero .payarea.big .paybtn{height:3em;font-size:1.5em}
.ill-hero .bc1{left:57%;top:2.5%}.ill-hero .bc2{left:67%;top:80%}
.ill-hero .cod{left:6%;top:77%;width:38%;height:21%;background:var(--ink);border-radius:1.5em;box-shadow:0 0 0 .3em var(--ink),0 0 0 .55em #fff,0 1.4em 2.6em -1em #000;z-index:4;overflow:hidden;color:#fff;display:flex;flex-direction:column}
.ill-hero .ctabs{display:flex;background:#0e1016;flex:none}.ill-hero .ctabs span{padding:.7em 1.3em;font:600 1.05em/1 var(--disp);color:#9aa0ac}.ill-hero .ctabs .on{background:var(--ink);color:#fff;border-bottom:.2em solid var(--y)}.ill-hero .ctabs em{font-style:normal;margin-left:.6em;opacity:.6}
.ill-hero .cod pre{font-size:.92em;line-height:1.5;padding:.7em 1.3em .8em}.ill-hero .cod .k{color:var(--y);font-style:normal}.ill-hero .cod .s{color:#F6DF86;font-style:normal}
/* ---- ROWS ---- */
.ill-r1 .stack{left:3%;top:16%;width:27%;height:54%;background:var(--ink);border-radius:2em;padding:1.8em 1.5em;display:flex;flex-direction:column;gap:1.2em;color:#fff;box-shadow:0 1.3em 2.6em -1.3em rgba(10,11,14,.6);z-index:2}
.ill-r1 .stack b{font:800 2em/1 var(--disp);margin-bottom:.5em}
.ill-r1 .lnk{position:relative;display:flex;align-items:center;gap:1.1em;height:6.2em;border:.1em solid rgba(255,255,255,.22);border-radius:1.2em;padding:0 1.5em;flex:none}
.ill-r1 .lnk em{font:700 1.6em/1 var(--disp);font-style:normal}.ill-r1 .lnk svg{width:3em;height:3em;color:var(--y);stroke-width:1.8}
.ill-r1 .lnk::after{content:"";position:absolute;left:calc(100% + .1em);top:50%;height:.3em;margin-top:-.15em;width:calc(5.3em + 1.5em);background:repeating-linear-gradient(90deg,var(--y) 0 .7em,transparent .7em 1.3em);background-size:1.3em 100%;z-index:3}
.ill-r1 .lnk::before{content:"";position:absolute;left:calc(100% + 6.6em);top:50%;width:1em;height:1em;margin-top:-.5em;border-radius:50%;background:var(--y);z-index:3}
.ill-r1 .c-top{left:51%;top:4%;z-index:4}.ill-r1 .c-db{left:37%;top:75%;z-index:4}
.ill-r1 .win-site{left:36%;top:15%;width:60%;height:66%;z-index:2}
.ill-r1 .pill{left:50%;top:88%;transform:translateX(-50%);z-index:4}.ill-r1 .bc1{left:3%;top:87%}.ill-r1 .bc2{left:74%;top:87%}
.ill-r2 .wc{left:4%;top:5%;width:44%;height:46%;z-index:2}.ill-r2 .lp{left:52%;top:5%;width:44%;height:46%;z-index:2}
.ill-r2 .win .bar em{font-size:1.1em}.ill-r2 .win .bar .cartb{margin-left:auto;padding:.3em .6em}.ill-r2 .win .bar .cartb svg{width:1.5em;height:1.5em}
.ill-r2 .wc .pg{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:1em;padding:.3em 1.3em 1.3em;align-content:center}
.ill-r2 .lpb{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:1.4em;padding:.3em 1.3em 1.3em;align-items:center}
.ill-r2 .crs{background:#fff;color:#0a0b0e;border-radius:1em;padding:1em;display:grid;gap:.9em}.ill-r2 .cover{display:block;height:7em;border-radius:.7em;background:linear-gradient(135deg,#F1C91C,#C9A112)}.ill-r2 .crs .ct{font:800 1.5em/1 var(--disp)}
.ill-r2 .vl{position:absolute;display:block;width:.3em;height:7%;top:51%;background:repeating-linear-gradient(180deg,var(--y) 0 .7em,transparent .7em 1.3em);background-size:100% 1.3em;z-index:1}.ill-r2 .v1{left:26%}.ill-r2 .v2{left:74%}
.ill-r2 .pay{left:10%;top:58%;width:80%;padding:1.3em 1.8em;display:grid;gap:1em;z-index:2}.ill-r2 .pay>b{font:800 1.8em/1 var(--disp)}
.ill-r2 .payarea.wide{display:flex;align-items:center;gap:1.4em}.ill-r2 .payarea.wide .pms{display:flex;gap:1em;flex:1}.ill-r2 .payarea.wide .pm{flex:1;justify-content:center}.ill-r2 .payarea.wide .paybtn{height:3em;min-width:9em}
.ill-r2 .pill{left:50%;top:90%;transform:translateX(-50%);z-index:3}
.ill-r3 .col{display:grid;gap:1.1em;align-content:start;z-index:2}.ill-r3 .col>b{font:800 1.7em/1 var(--disp);margin-bottom:.2em}
.ill-r3 .trg{left:3%;top:12%;width:23%}.ill-r3 .tls{left:75%;top:10%;width:22%}
.ill-r3 .col .nd{display:flex;align-items:center;gap:.8em;background:var(--ink);color:#fff;border-radius:1.1em;padding:0 1.1em;height:5.4em;box-shadow:0 1em 2em -1.2em rgba(10,11,14,.6)}
.ill-r3 .col .nd svg{width:2.4em;height:2.4em;color:var(--y);stroke-width:1.8}.ill-r3 .col .nd em{font:700 1.35em/1 var(--disp);font-style:normal}
.ill-r3 .plug{left:34%;top:14%;width:32%;height:60%;z-index:2}.ill-r3 .plug .bar em{font-size:1.1em}
.ill-r3 .pb{flex:1;display:grid;gap:1em;padding:1em 1.6em 1.6em;align-content:center}.ill-r3 .pb .tg{display:flex;align-items:center;justify-content:space-between;gap:1em;background:rgba(255,255,255,.07);border-radius:.9em;padding:.9em 1.1em}.ill-r3 .pb .tg em{font:600 1.35em/1 var(--disp);font-style:normal}.ill-r3 .pb .runbtn{justify-self:start;font-size:1.3em;margin-top:.4em}
.ill-r3 .q1{left:26%;top:44%;width:8%}.ill-r3 .q2{left:66%;top:44%;width:9%}.ill-r3 .e1{left:26%;top:43.3%}.ill-r3 .e2{left:66%;top:43.3%}
.ill-r3 .pill{left:50%;top:88%;transform:translateX(-50%);z-index:3}
.ill-r4 .win-site{left:18%;top:4%;width:70%;height:70%;z-index:1}
.ill-r4 .site-b{background:#fff;grid-template-rows:auto 1fr auto;padding:0;gap:0;border-radius:.8em}.ill-r4 .site-b .hd{background:var(--ink);color:#fff;font:800 1.5em/1 var(--disp);padding:1em 1.1em}
.ill-r4 .site-b .hr{background:#fff;margin:0 1.2em;border-radius:.8em}.ill-r4 .site-b .hr b{font-size:3.4em}.ill-r4 .site-b .hr .tx{margin-left:14%;width:46%}
.ill-r4 .site-b .bld{position:absolute;right:0;top:0;width:50%;height:100%;background:linear-gradient(115deg,transparent 0 34%,#1b1f27 34% 100%)}
.ill-r4 .site-b .bld::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 1.6em,rgba(255,255,255,.12) 1.6em 1.7em),repeating-linear-gradient(25deg,transparent 0 1.2em,rgba(255,255,255,.08) 1.2em 1.3em)}
.ill-r4 .site-b .wedge{right:0;top:0;bottom:auto;width:15em;height:7em;clip-path:polygon(40% 0,100% 0,100% 100%);background:var(--y)}.ill-r4 .site-b .cs{margin:1em 1.2em 1.2em}
.ill-r4 .cod{left:3%;top:32%;width:23%;height:36%;z-index:3}.ill-r4 .cod pre{font-size:.95em}.ill-r4 .cod .r{color:#F1C91C;font-style:normal}.ill-r4 .cod .y{color:var(--y);font-style:normal}.ill-r4 .cod .s{color:#F6DF86;font-style:normal}
.ill .ed{display:grid;gap:1em;align-content:start;padding:1.6em 1.8em;z-index:4}.ill .ed .top{display:flex;justify-content:space-between;align-items:center}.ill .ed .top b{font:800 2em/1 var(--disp)}.ill .ed .top span{color:#6b707c;letter-spacing:.1em;font-size:1.3em}
.ill .ed .inp{display:flex;align-items:center;gap:.9em;border:.13em solid #d9dce2;border-radius:.9em;padding:.55em .8em;font:600 1.4em/1.2 var(--disp);min-width:0}
.ill .ed .inp em{display:grid;place-items:center;width:1.7em;height:1.7em;border:.1em solid #0a0b0e;border-radius:.3em;font:800 1em/1 Georgia,serif;font-style:normal;flex:none}.ill .ed .inp em svg{width:1em;height:1em}
.ill .ed .pub{justify-self:end;background:var(--y);font:800 1.5em/1 var(--disp);padding:.65em 1.7em;border-radius:.8em;margin-top:.3em}.ill .ed .cur{position:absolute;right:.9em;bottom:0}
.ill-r4 .ed{left:63%;top:44%;width:34%}.ill-r4 .ed .inp{background:#eef0f3}.ill-r4 .ed .top b{font-size:1.7em}.ill-r4 .ed .inp{font-size:1.25em}
.ill-r4 .trio{left:3%;top:85%;width:94%;display:flex;justify-content:space-around;align-items:center;z-index:2}
.ill-r4 .trio span{display:flex;align-items:center;gap:1.2em}.ill-r4 .trio .chip{width:4.8em;height:4.8em}.ill-r4 .trio b{font:800 1.9em/1 var(--disp)}.ill-r4 .trio span+span{padding-left:3em;border-left:.12em solid #d8d2c2}
/* ---- SIX CARDS ---- */
.ill-cards-box{container-type:inline-size;width:100%}
.ill-cards{font-size:calc(100cqw/100);display:grid;gap:1.4em}
.ic-top{display:grid;grid-template-columns:49.2fr 50.8fr;gap:1.4em}.ic-col{display:grid;gap:1.4em}
.ic-row2{display:grid;grid-template-columns:61.8fr 38.2fr;gap:1.4em}.ic-row3{display:grid;grid-template-columns:38.5fr 61.5fr;gap:1.4em}
.ic-card{position:relative;background:#fff;border-radius:2.1em;padding:2.4em 2.6em;overflow:hidden;box-shadow:0 .08em .2em rgba(10,11,14,.05),0 1.3em 2.4em -1.7em rgba(10,11,14,.3);transition:transform .45s var(--ease)}
.ic-card:hover{transform:translateY(-.4em)}
.ic-card.c1{min-height:36em}.ic-card.c2,.ic-card.c3,.ic-card.c4,.ic-card.c5,.ic-card.c6{min-height:17.6em}
.ic-i{display:grid;place-items:center;width:3.4em;height:3.4em;border-radius:1em;background:#F8E9A8;color:#0a0b0e;margin-bottom:1.1em}.ic-i svg{width:55%;height:55%;stroke-width:1.9}
.ic-tx{position:relative;z-index:3}
.ic-tx h3{font:800 2em/1.12 var(--disp)!important;letter-spacing:-.03em;color:#0a0b0e!important}.ic-tx p{font:500 1.2em/1.55 var(--body)!important;color:#454a58!important;margin-top:.5em!important}
.ic-card.c2 .ic-tx,.ic-card.c3 .ic-tx{max-width:44%}.ic-card.c4 .ic-tx{max-width:44%}.ic-card.c5 .ic-tx{max-width:52%}.ic-card.c6 .ic-tx{max-width:46%}
.art{position:absolute;z-index:2}.art .win{position:absolute}
.a1{left:1.8em;right:1.6em;top:15em;bottom:1.8em;background:#F5F0E4;border-radius:2em}
.a1 .sun{position:absolute;right:-.6em;top:-7.4em;width:13em;height:13em;border-radius:50%;background:var(--tc,#F1C91C);transition:background .4s}
.a1 .thm{left:2em;top:1.5em;width:30.5em;height:16.2em;background:#1f232b;z-index:1}.a1 .bar{background:#15181f;height:2.4em}.a1 .bar i{background:#e9e9ec}
.a1 .tb2{flex:1;display:grid;grid-template-columns:11em 1fr;min-height:0}
.a1 .files{list-style:none;margin:0;padding:.9em;display:grid;gap:.35em;font:500 1em/1.3 ui-monospace,Menlo,Consolas,monospace;color:#aeb3c0;align-content:start}.a1 .files li{padding:.4em .6em;border-radius:.4em;white-space:nowrap}.a1 .files li.on{background:rgba(241,201,28,.16);color:#fff}
.a1 .pv{background:#fff;margin:.8em .8em .8em 0;border-radius:.7em;padding:.8em;display:grid;grid-template-rows:auto 1fr auto;gap:.6em;color:#0a0b0e;min-height:0}
.a1 .pv .nv{display:flex;gap:.5em}.a1 .pv .nv i{display:block;height:.5em;width:3em;border-radius:1em;background:#d3d6dc}.a1 .pv .nv i:first-child{background:#0a0b0e;width:2em}
.a1 .pv .hero{background:var(--tc,#F1C91C);border-radius:.5em;padding:.7em;display:grid;gap:.45em;align-content:center;transition:background .4s;border:.08em solid rgba(10,11,14,.12)}.a1 .pv .hero b{display:block;height:.8em;width:70%;border-radius:1em;background:#0a0b0e}.a1 .pv .hero u{display:block;height:.5em;width:45%;border-radius:1em;background:rgba(10,11,14,.45)}
.a1 .pv .cs3{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em}.a1 .pv .cs3 span{display:block;height:1.8em;border-radius:.4em;background:#1b1f27}
.a1 .swc{position:absolute;right:1.2em;top:2.2em;width:11.4em;background:#fff;border-radius:1em;padding:1em 1.2em;box-shadow:0 1em 2em -1em rgba(10,11,14,.5);z-index:3}.a1 .swc b{font:800 1.2em/1 var(--disp);color:#0a0b0e}
.a1 .swt{display:flex;gap:.8em;margin-top:.9em}.a1 .swt button{width:2.4em;height:2.4em;border-radius:50%;background:var(--c);border:.14em solid #d3d6dc;cursor:pointer;padding:0;transition:transform .25s,border-color .25s}.a1 .swt button:hover{transform:scale(1.12)}.a1 .swt button.on{border-color:#0a0b0e;transform:scale(1.1)}
.a2{right:1.6em;top:1.4em;width:24em;height:15em}.a2 .pls{left:0;top:0;width:24em;height:15em;background:var(--ink)}.a2 .bar{height:2.4em}
.a2 .plr{flex:1;padding:.2em 1.2em .9em;display:grid;gap:.6em;align-content:center}.a2 .pr{display:flex;align-items:center;gap:.9em;background:rgba(255,255,255,.07);border-radius:.8em;padding:.45em .8em}.a2 .pr svg{width:2em;height:2em;color:var(--y);stroke-width:1.8}.a2 .pr em{flex:1;font:700 1.15em/1 var(--disp);font-style:normal;color:#fff}
.a3{right:1.6em;top:1.6em;width:26em;height:12.8em}.a3 .pgx{display:grid;grid-template-columns:repeat(3,1fr);gap:.9em;width:21em}.a3 .cartb.big{position:absolute;right:0;top:0}
.a4{right:2em;top:1.6em;width:28em;height:14.2em}.a4 .crsw{left:0;top:0;width:28em;height:14.2em}.a4 .bar{height:2.4em}
.a4 .crb{flex:1;display:grid;grid-template-columns:1fr 1.2fr;gap:1.2em;padding:.4em 1.2em 1em;align-items:center}.a4 .crs{display:grid;gap:.8em}.a4 .cover{display:block;height:5.4em;border-radius:.7em;background:linear-gradient(135deg,#F1C91C,#C9A112)}.a4 .prg{background:#3a3f4b}
.a4 .les{padding:.5em .8em}.a4 .les .tk{width:1.6em;height:1.6em}
.a5{right:2em;top:2.4em;width:15em;height:9.8em}
.a5 .nd{position:absolute;top:1.4em;width:4.2em;height:4.2em;border-radius:1.1em;background:var(--ink);color:var(--y);display:grid;place-items:center;box-shadow:0 .8em 1.4em -.8em rgba(10,11,14,.6);z-index:2}.a5 .nd svg{width:2.2em;height:2.2em;stroke-width:1.8}
.a5 .nd.a{left:0}.a5 .nd.b{left:5.4em;background:var(--y);color:#0a0b0e}.a5 .nd.c{left:10.8em}
.a5 .fl.q1{left:4.2em;top:3.3em;width:1.2em}.a5 .fl.q2{left:9.6em;top:3.3em;width:1.2em}.a5 .dt.e1{left:4.1em;top:2.85em}.a5 .dt.e2{left:9.5em;top:2.85em}
.a5 .runbtn{position:absolute;left:0;top:7em;font-size:1em;padding:.7em 1.4em}
.a6{right:2em;top:1.2em;width:17.6em;height:15.8em}.a6 .payw{left:0;top:0;width:17.6em;height:15.8em;background:var(--ink)}.a6 .bar{height:2.4em}
.a6 .payarea.cpay{padding:.4em 1.1em 1em;display:grid;gap:.8em;flex:1;align-content:center}.a6 .pms{display:grid;gap:.5em}.a6 .pm{padding:.3em .8em;background:#fff}.a6 .pm svg{width:1.6em;height:1.6em}.a6 .pm em{font-size:1em}.a6 .paybtn{width:100%;height:2.5em;font-size:1.05em}
/* ---- ambient motion + entrance (default = finished picture; JS adds .pre then .on) ---- */
@keyframes illdash{to{background-position:1.3em 0}}@keyframes illdashv{to{background-position:0 1.3em}}
@keyframes illfloat{50%{transform:translateY(-.55em)}}
@keyframes illgrow{from{transform:scaleX(0)}}
@keyframes illpop{0%{opacity:0;transform:scale(.4)}70%{transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
@keyframes illpress{0%,54%{transform:scale(1)}60%{transform:scale(.93)}68%,100%{transform:scale(1)}}
@keyframes illcur{0%{transform:translate(-9em,-7em);opacity:0}12%{opacity:1}48%,100%{transform:translate(0,0);opacity:1}}
@keyframes illprog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes illshot{from{transform:translateY(0)}to{transform:translateY(-34%)}}
@keyframes illbump{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes illrun{0%{opacity:0;transform:translateX(0)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateX(var(--run,9em))}}
@keyframes illsun{50%{transform:translateY(.7em) scale(1.04)}}
@keyframes illwedge{50%{transform:translateY(-.5em)}}
.pre .tk{opacity:0}.pre .bb u{transform:scaleX(0)}
.on .tk{animation:illpop .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*.28s + .35s)}
.on :is(.ill-r1 .lnk,.fl){animation:none}
.on .ill-r1 .lnk::after{animation:illdash 1s linear infinite}.ill-r1.on .lnk::after{animation:illdash 1s linear infinite}
.ill.on .fl{animation:illdash 1s linear infinite}.ill.on .fl.v,.ill-cards.on .fl.v,.ill.on .vl{animation:illdashv 1s linear infinite}.ill-cards.on .fl{animation:illdash 1s linear infinite}
.ill.on .vl{animation:illdashv 1s linear infinite}
.ill-r1.on .c-db{animation:illfloat 6s ease-in-out infinite}
.ill-hero.on .bch{animation:illfloat 6s ease-in-out infinite}.ill-hero.on .bc2{animation-delay:-3s}.ill-r1.on .bch{animation:illfloat 6s ease-in-out infinite}.ill-r1.on .bc2{animation-delay:-3s}
.ill-hero .pane.on .p1 .prod:nth-child(2){animation:illfloat 5s ease-in-out infinite}
.ill-r4.on .ed .pub{animation:illpress 6s ease-in-out infinite}.ill-r4.on .ed .cur{animation:illcur 6s ease-in-out infinite}
.ill.on .site .wedge{animation:illwedge 7s ease-in-out infinite}.ill-cards.on .a1 .sun{animation:illsun 8s ease-in-out infinite}
.ill-hero [data-flow].run .dt,.ill-r3.run .dt,.a5.run .dt{animation:illrun 1.1s ease-in-out both}
.ill-hero .pane.on .auto .d1,.ill-hero .pane.on .auto .d2,.ill-hero .pane.on .auto .d3{animation:illrun 2.4s ease-in-out infinite;--run:9.4em}.ill-hero .pane.on .auto .d2{animation-delay:.5s}.ill-hero .pane.on .auto .d3{animation-delay:1s;--run:5.5em}
.ill-r3 .dt{--run:6.6em}.ill-r3.run .e2{animation-delay:.5s}.a5 .dt{--run:1.1em}.a5.run .e2{animation-delay:.3s}
.ill-r3:not(.run) .dt,.a5:not(.run) .dt{opacity:0}
.ill-r3.on:not(.run) .dt{animation:illrun 3s ease-in-out infinite;--run:6.6em}.ill-r3.on:not(.run) .e2{animation-delay:1.1s}.a5.on:not(.run) .dt{animation:illrun 2.4s ease-in-out infinite;--run:1.1em}.a5.on:not(.run) .e2{animation-delay:.9s}

/* ==== v1.27 illustration kit (other service pages) ==== */
.ill-k .brands{position:absolute;left:4%;top:85%;display:flex;gap:.9em;flex-wrap:wrap;z-index:5}
.ill-k .brands.low{top:92%}
.ill-k .bch{display:inline-flex;align-items:center;gap:.6em;background:rgba(21,24,31,.94);color:#fff;border:.1em solid rgba(255,255,255,.22);border-radius:99em;padding:.55em 1.1em;font:700 1.2em/1 var(--disp);white-space:nowrap;box-shadow:0 .8em 1.6em -.8em #000}.ill-k .bch i{display:block;width:.6em;height:.6em;border-radius:50%;background:var(--y)}
/* dashboard */
.kd .kd-main{left:4%;top:6%;width:58%;height:70%;z-index:1}
.kd .kin{flex:1;padding:.4em 1.6em 1.4em;display:grid;grid-template-rows:auto 1fr auto;gap:1em;min-height:0}
.kd .seg{display:flex;gap:.5em}.kd .seg button{border:0;background:rgba(255,255,255,.09);color:#c9cedb;border-radius:99em;padding:.55em 1.2em;font:700 1.2em/1 var(--disp);cursor:pointer;transition:background .25s,color .25s}.kd .seg button:hover{background:rgba(255,255,255,.16)}.kd .seg button.on{background:var(--y);color:#0a0b0e}
.kd .kch{width:100%;height:100%;min-height:0;display:block}.kd .kch .ar{fill:rgba(241,201,28,.1)}
.kd .kch .ln{fill:none;stroke:#5a606c;stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s,stroke-width .3s}
.kd[data-s="0"] .l0,.kd[data-s="1"] .l1,.kd[data-s="2"] .l2{stroke:var(--y);stroke-width:3.6px}
.kd .kbars{display:flex;align-items:flex-end;gap:.6em;height:6.2em}.kd .kbars i{flex:1;height:var(--h);background:linear-gradient(180deg,var(--y),rgba(241,201,28,.22));border-radius:.3em .3em 0 0;transform-origin:bottom}
.kd .kd-fun{left:66%;top:6%;width:30%;height:42%;padding:1.4em 1.6em;display:grid;gap:.7em;align-content:start;z-index:2}.kd .kd-fun b{font:800 1.7em/1 var(--disp);margin-bottom:.2em}
.kd .t{display:block;background:var(--ink);color:#fff;border-radius:.8em;padding:.8em 1em;font:700 1.2em/1 var(--disp);text-align:center;margin:0 auto}.kd .t1{width:100%}.kd .t2{width:84%}.kd .t3{width:68%}.kd .t4{width:52%;background:var(--y);color:#0a0b0e}
.kd .kd-test{left:66%;top:52%;width:30%;height:24%;padding:1.2em 1.5em;display:grid;gap:.7em;align-content:center;z-index:2}.kd .kd-test b{font:800 1.5em/1 var(--disp)}
.kd .vs{display:flex;gap:.7em}.kd .var{width:3.2em;height:3.2em;border-radius:.8em;border:.14em solid #d9dce2;background:#fff;color:#0a0b0e;font:800 1.5em/1 var(--disp);cursor:pointer;padding:0;transition:background .25s,border-color .25s}.kd .var.on{background:var(--y);border-color:#0a0b0e}
.kd .win-b{display:inline-flex;align-items:center;gap:.4em;font:700 1.1em/1 var(--disp);background:#0a0b0e;color:var(--y);border-radius:99em;padding:.45em .9em;justify-self:start}.kd .win-b svg{width:1.2em;height:1.2em;stroke-width:3}
/* brand board */
.kb .kb-mark{left:4%;top:6%;width:30%;height:70%;display:grid;place-items:center;align-content:center;gap:1.6em}
.kb .mk{display:flex;gap:.9em}.kb .mk i{display:block;width:5.4em;height:5.4em;background:var(--tc);transition:background .4s}.kb .mk .m1{border-radius:50%}.kb .mk .m2{border-radius:1.3em}.kb .mk .m3{border-radius:50% 0 50% 0}
.kb .lg{font:800 2.8em/1 var(--disp);letter-spacing:-.04em}
.kb .kb-type{left:38%;top:6%;width:26%;height:33%;display:flex;align-items:center;gap:1.4em;padding:0 2em}.kb .aa{font:800 6.6em/1 var(--disp);color:var(--tc);transition:color .4s;letter-spacing:-.05em}
.kb .sp{display:grid;gap:.7em;flex:1}.kb .sp em{font:800 1.7em/1 var(--disp);font-style:normal}.kb .sp u{display:block;height:.6em;border-radius:1em;background:#d3d6dc}.kb .sp u.s{width:60%}
.kb .kb-pal{left:38%;top:43%;width:26%;height:33%;padding:1.5em 1.7em;display:grid;gap:1em;align-content:center}.kb .kb-pal b{font:800 1.7em/1 var(--disp)}
.kb .swt{display:flex;gap:1em}.kb .swt button{width:3.4em;height:3.4em;border-radius:50%;background:var(--c);border:.16em solid #d3d6dc;cursor:pointer;padding:0;transition:transform .25s,border-color .25s}.kb .swt button:hover{transform:scale(1.12)}.kb .swt button.on{border-color:#0a0b0e;transform:scale(1.1)}
.kb .kb-pack{left:68%;top:6%;width:28%;height:70%}.kb .box{flex:1;margin:.6em 1.4em 1.4em;position:relative;background:var(--tc);border-radius:1.1em;display:grid;place-items:center;transition:background .4s;overflow:hidden}
.kb .box .b1{position:absolute;left:0;top:0;width:100%;height:28%;background:rgba(10,11,14,.16)}.kb .box .b2{position:absolute;left:12%;bottom:14%;width:34%;height:.7em;border-radius:1em;background:rgba(10,11,14,.55)}.kb .box span{font:800 2.4em/1 var(--disp);color:#0a0b0e;letter-spacing:-.03em}
.kb .kb-chip{left:31.5%;top:1.5%;z-index:4}
.on.kb .mk i{animation:illbob 5s ease-in-out infinite}.on.kb .mk .m2{animation-delay:-1.6s}.on.kb .mk .m3{animation-delay:-3.2s}
/* storefront */
.ks .ks-win{left:4%;top:6%;width:64%;height:70%;z-index:1}.ks .kin{flex:1;padding:.2em 1.5em 1.5em;display:grid;grid-template-rows:auto 1fr;gap:1.1em;min-height:0}
.ks .sh{display:flex;align-items:center;gap:1.2em}.ks .sh b{font:800 1.9em/1 var(--disp);color:#fff}.ks .sh .nl{display:block;width:5em;height:.7em;border-radius:1em;background:#3a3f4b}.ks .sh .cartb{margin-left:auto;background:#0a0b0e}
.ks .pg{display:grid;grid-template-columns:repeat(4,1fr);gap:1em;align-content:center}
.ks .ks-pay{left:72%;top:6%;width:24%;height:70%;padding:1.6em;display:grid;align-content:start;gap:1.2em;z-index:2}.ks .ks-pay b{font:800 1.8em/1 var(--disp)}
.ks .payarea.cpay2{display:grid;gap:1.2em}.ks .payarea.cpay2 .pms{display:grid;gap:.8em}.ks .payarea.cpay2 .pm{padding:.9em 1em}.ks .payarea.cpay2 .paybtn{width:100%;height:3em}
/* automation/system flow reuses .ill-r3; kit variant tweaks */
.ill-k.ill-r3 .pill{top:82%}.ill-k.ill-r3 .brands{left:50%;top:91%;transform:translateX(-50%);justify-content:center}
/* feed */
.kfd .ph{left:10%;top:4%;width:34%;height:92%;background:var(--ink);border-radius:3em;box-shadow:0 0 0 .5em #2b3140,0 1.6em 3em -1em #000;padding:1.7em 1.4em;display:flex;flex-direction:column;gap:1em;overflow:hidden}
.kfd .pt{display:flex;align-items:center;gap:.8em;flex:none}.kfd .av{display:block;width:2.8em;height:2.8em;border-radius:50%;background:var(--y)}.kfd .pt b{display:block;height:.7em;flex:1;max-width:9em;border-radius:1em;background:#5a606c}
.kfd .pgd{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:.9em;flex:1;min-height:0}
.kfd .po{position:relative;border-radius:1em;background:linear-gradient(135deg,#F1C91C,#C9A112)}.kfd .p1{background:linear-gradient(135deg,#fff,#d9dce2)}.kfd .p2{background:linear-gradient(135deg,#2a2f3a,#3a3f4b)}.kfd .p3{background:linear-gradient(135deg,#fbe7a3,#F1C91C)}.kfd .p4{background:linear-gradient(135deg,#1b1f27,#2a2f3a)}.kfd .p5{background:linear-gradient(135deg,#F1C91C,#fbe7a3)}
.kfd .likebtn{position:absolute;right:.6em;bottom:.6em;width:2.6em;height:2.6em;border-radius:50%;border:0;background:rgba(10,11,14,.6);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .25s,transform .25s}.kfd .likebtn:hover{transform:scale(1.12)}.kfd .likebtn svg{width:1.4em;height:1.4em}.kfd .likebtn.on{background:var(--y);color:#0a0b0e}.kfd .likebtn.on svg{fill:#0a0b0e}
.kfd .kcal{left:50%;top:8%;width:44%;height:42%;padding:1.6em;display:grid;gap:1em;align-content:start}.kfd .kcal b{font:800 1.8em/1 var(--disp)}
.kfd .cg{display:grid;grid-template-columns:repeat(7,1fr);gap:.6em}.kfd .cg em{text-align:center;font:700 1.1em/1 var(--disp);color:#6b707c;font-style:normal}.kfd .cg span{display:block;aspect-ratio:1.5;border-radius:.6em;background:#eef0f3}.kfd .cg .p{background:var(--y)}
.kfd .pill{left:50%;top:58%}.kfd .brands.low{left:50%;top:70%;flex-direction:column;align-items:flex-start}
.pre.kfd .po,.pre.kfd .cg .p{opacity:0}.on.kfd .po,.on.kfd .cg .p{animation:illpop .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*.12s + .2s)}
/* ux */
.kx .kx-win{left:4%;top:6%;width:62%;height:74%}.kx .scr{position:relative;flex:1;margin:0 1.2em 1.2em;background:#fff;border-radius:.8em;overflow:hidden;min-height:0}
.kx .kwf,.kx .kui{position:absolute;inset:0;transition:opacity .55s}.kx .kwf i,.kx .kui i{position:absolute;display:block;border-radius:.6em}
.kx .a{left:1.6em;right:1.6em;top:1.4em;height:2.4em}.kx .b{left:1.6em;top:5.4em;width:58%;height:13em}.kx .c{right:1.6em;top:5.4em;width:32%;height:6em}.kx .d{left:1.6em;right:1.6em;bottom:1.4em;height:7em}
.kx .kwf i{border:.16em dashed #9aa0ac}.kx .kui .a{background:#0a0b0e}.kx .kui .b{background:var(--y)}.kx .kui .c{background:#1b1f27}.kx .kui .d{background:#eef0f3;border:.1em solid #d3d6dc}
.kx.showui .kui{opacity:1}.kx.showui .kwf{opacity:0}.kx:not(.showui) .kwf{opacity:1}.kx:not(.showui) .kui{opacity:0}
.kx .uxsw{left:4%;top:84%;display:inline-flex;border:0;background:var(--ink);border-radius:99em;padding:.35em;cursor:pointer}.kx .uxsw span{padding:.7em 1.4em;border-radius:99em;font:700 1.25em/1 var(--disp);color:#c9cedb;transition:background .3s,color .3s}.kx.showui .s2,.kx:not(.showui) .s1{background:var(--y);color:#0a0b0e}
.kx .kx-comp{left:70%;top:6%;width:26%;height:40%;padding:1.5em;display:grid;gap:.8em;align-content:start}.kx .kx-comp b{font:800 1.7em/1 var(--disp)}.kx .kx-comp span{display:flex;align-items:center;gap:.8em;font:700 1.3em/1 var(--disp);background:#eef0f3;border-radius:.7em;padding:.6em .8em}.kx .kx-comp i{display:block;width:1.8em;height:1.8em;border-radius:.4em;background:var(--y)}
.kx .brands{left:38%;top:85%}.kx .kxc{left:44%;top:36%;position:absolute}
.on.kx .kxc{animation:illkx 6s ease-in-out infinite}@keyframes illkx{0%{transform:translate(0,0)}30%{transform:translate(9em,3em)}60%{transform:translate(2em,12em)}100%{transform:translate(0,0)}}
/* studio */
.kst .ba{position:absolute;left:4%;top:6%;width:92%;height:70%;border-radius:1.8em;overflow:hidden;box-shadow:0 1.6em 3em -1.4em rgba(10,11,14,.6);cursor:ew-resize;user-select:none;touch-action:pan-y;--p:50%}
.kst .lay{position:absolute;inset:0}.kst .fin{clip-path:inset(0 0 0 var(--p))}.kst .raw .bg{position:absolute;inset:0;background:linear-gradient(#d3d6dc,#aeb2ba)}.kst .fin .bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,#2a2f3a,#0e1016 70%)}
.kst .glow{position:absolute;left:50%;top:50%;width:34em;height:34em;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(241,201,28,.38),transparent 62%)}
.kst .ob{position:absolute;left:50%;top:50%;width:14em;height:26em;transform:translate(-50%,-50%);border-radius:3.4em 3.4em 2.2em 2.2em}.kst .raw .ob{background:linear-gradient(90deg,#8d929c,#a4a8b1 50%,#868b95);box-shadow:inset 0 0 0 .2em rgba(0,0,0,.06)}
.kst .fin .ob{background:linear-gradient(135deg,#F6DF86,#F1C91C 50%,#b8860b);box-shadow:inset .8em .8em 1.6em rgba(255,255,255,.45),0 2.4em 3em -1em rgba(0,0,0,.7)}
.kst .lay em{position:absolute;top:1.2em;font:700 1.2em/1 var(--disp);font-style:normal;background:rgba(10,11,14,.78);color:#fff;border-radius:99em;padding:.5em 1em}.kst .raw em{left:1.4em}.kst .fin em{right:1.4em}
.kst .hd{position:absolute;top:0;bottom:0;left:var(--p);width:.3em;background:var(--y);transform:translateX(-50%);z-index:3}.kst .hd::after{content:"";position:absolute;top:50%;left:50%;width:3.6em;height:3.6em;border-radius:50%;background:var(--y);transform:translate(-50%,-50%);box-shadow:0 0 0 .5em rgba(0,0,0,.3)}
.kst .kst-c{left:88%;top:80%;z-index:4}.kst .pill{left:50%;top:81%;transform:translateX(-50%)}.kst .brands{left:50%;top:91%;transform:translateX(-50%)}
@keyframes illdraw{from{stroke-dashoffset:420}to{stroke-dashoffset:0}}@keyframes illbar2{from{transform:scaleY(.15)}}@keyframes illbob{50%{transform:translateY(-.6em)}}
.on.kd .kch .ln{stroke-dasharray:420;animation:illdraw 2s ease-out both}.on.kd .kbars i{animation:illbar2 1.2s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*.07s + .2s)}
.on.kd .kd-fun .t{animation:illpop .5s cubic-bezier(.2,.8,.2,1) both}.on.kd .t2{animation-delay:.15s}.on.kd .t3{animation-delay:.3s}.on.kd .t4{animation-delay:.45s}

/* glass project cards (v1.26) */
.eh-case.glass{background:linear-gradient(150deg,rgba(255,255,255,.085),rgba(255,255,255,.02) 60%);border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 60px -36px #000;-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border-radius:26px;padding:18px 18px 24px}
.eh-case.glass .eh-frame{border-radius:18px;margin:0 0 6px;background:#0a0a0c;border:1px solid rgba(255,255,255,.08)}
.eh-case.glass .eh-cap{background:rgba(12,13,17,.55);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);letter-spacing:.1em}
.eh-case.glass h3{font-size:clamp(20px,1.9vw,26px);margin:14px 6px 8px}.eh-case.glass p{margin:0 6px;font-size:15.5px}.eh-case.glass .eh-go{margin:14px 6px 0;color:var(--acc)}
.eh-case.glass:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.26)}
/* ---- responsive ---- */
@media(max-width:1180px){.ill-dark{font-size:calc(116cqw/110);width:116cqw;margin-left:-4cqw}}
@media(max-width:860px){
	.ill-dark{font-size:calc(100cqw/74);width:100cqw;margin-left:0;aspect-ratio:74/66}
	.ill-hero .wpside{left:1%;top:0;width:98%;height:auto;flex-direction:row;align-items:center;padding:.7em 1em;gap:.8em;border-radius:1.2em}
	.ill-hero .wph{display:none}.ill-hero .wpside .tabs{display:flex;flex:1;justify-content:space-between;gap:.3em;margin:0}
	.ill-hero .tb{flex:1;justify-content:center;padding:.7em .4em}.ill-hero .tb svg{width:2.6em;height:2.6em}
	.ill-hero .tb em{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
	.ill-hero .tb.on::before{left:20%;right:20%;top:auto;bottom:0;width:auto;height:.25em}
	.ill-hero .prog{position:absolute;left:1em;right:1em;bottom:.15em}
	.ill-hero .brw{left:2%;top:9.5em;width:96%;height:50em}
	.ill-hero .cod,.ill-hero .bc2{display:none}.ill-hero .bc1{left:2%;top:61em;font-size:1.1em}
	.ill .d1,.ill .d2,.ill .d3{transform:none}
	.ill-cards{font-size:calc(100cqw/34);gap:1.2em}.ic-top,.ic-row2,.ic-row3,.ic-col{grid-template-columns:1fr;display:grid;gap:1.2em}
	.ic-card.c1,.ic-card.c2,.ic-card.c3,.ic-card.c4,.ic-card.c5,.ic-card.c6{min-height:0;padding:2em}
	.ic-card .ic-tx{max-width:none!important}
	.ic-card .art{position:relative;right:auto;top:auto;left:auto;bottom:auto;margin:1.8em auto 0;max-width:100%}
	.ic-card .a1{width:100%;height:28em}.a1 .sun{width:10em;height:10em;top:-5em}.a1 .thm{left:1.2em;right:1.2em;width:auto;top:1.4em}.a1 .swc{left:1.2em;right:1.2em;top:19.4em;width:auto;display:flex;align-items:center;justify-content:space-between}.a1 .swt{margin-top:0}
}
@media(prefers-reduced-motion:reduce){:is(.ill,.ill-cards) *{animation:none!important}.pre .tk{opacity:1}.pre .bb u{transform:none}}