/* KADR landing page: the platform's own palette (white, black, one blue). Motion is CSS only and stays quiet. Sizes are in em so the interface-size scale (--fz) still applies. */
.lp{font-size:calc(16px*var(--fz));line-height:1.55;color:var(--tx);background:var(--bg);overflow:hidden}
.lp *{box-sizing:border-box}.lp p{margin:0;max-width:none}.lp h1,.lp h2,.lp h3,.lp h4{margin:0;color:var(--tx)}.lp .mut{color:var(--tx2)}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;z-index:99;background:#fff;padding:.5em 1em;border-radius:.5em}
.top{display:flex;justify-content:space-between;align-items:center;padding:.9em clamp(1em,4vw,3.5em);position:sticky;top:0;z-index:30;background:rgba(250,249,246,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--bd)}
.top .brand{padding:0}.top nav{display:flex;gap:1.5em;align-items:center}.top nav a:not(.btn){color:var(--tx2);text-decoration:none;font-weight:500;font-size:.92em}.top nav a:not(.btn):hover{color:var(--tx)}
.lp .btn{display:inline-flex;align-items:center;justify-content:center;padding:.62em 1.2em;border-radius:.7em;font-weight:600;font-size:.95em;text-decoration:none;border:1px solid var(--bd2);background:var(--bg2);color:var(--tx);cursor:pointer;transition:transform .2s var(--ease),background .2s,box-shadow .2s}
.lp .btn:hover{transform:translateY(-1px);box-shadow:var(--sh2)}.lp .btn.sm{padding:.42em 1em;font-size:.85em}.lp .btn.lg{padding:.85em 1.7em;font-size:1.02em}
.lp .btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}.lp .btn.primary:hover{background:var(--acc-ink);border-color:var(--acc-ink)}
.lp .btn:focus-visible,.lp a:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
/* hero */
.hero{max-width:72em;margin:0 auto;padding:clamp(3em,8vw,6em) 1.25em 3em;text-align:center}
.hero h1{font-size:clamp(2.3em,6.2vw,4.8em);letter-spacing:-.04em;line-height:1.03;font-weight:750;max-width:13em;margin:0 auto}
.lp .lead{max-width:36em;margin:1.4em auto 0;font-size:clamp(1em,1.6vw,1.2em);color:var(--tx2)}
.cta{display:flex;gap:.8em;justify-content:center;flex-wrap:wrap;margin-top:2em}.lp .fine{font-size:.82em;color:var(--tx3);margin-top:1.1em}
.hero .rv{animation:rise .8s var(--ease) both}.d1{animation-delay:.08s!important}.d2{animation-delay:.16s!important}.d3{animation-delay:.24s!important}.d4{animation-delay:.36s!important}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
/* the animated editor */
.stage{position:relative;margin:3.4em auto 0;max-width:62em;perspective:1400px;text-align:start}
.win{border:1px solid var(--bd2);border-radius:1em;background:var(--bg2);box-shadow:0 30px 70px -30px rgba(21,21,27,.35);overflow:hidden;transition:transform .25s ease-out;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.wbar{display:flex;align-items:center;gap:.45em;padding:.7em 1em;border-bottom:1px solid var(--bd);font-size:.75em;color:var(--tx2);background:var(--bg3)}.wbar i{width:.7em;height:.7em;border-radius:50%;background:var(--bg5)}
.wbar span{margin-inline-start:.8em}.wbar .live{margin-inline-start:auto;display:flex;align-items:center;gap:.5em;font-weight:500;color:var(--acc-ink)}.live u{width:.5em;height:.5em;border-radius:50%;background:var(--acc);animation:blink 1.4s infinite}@keyframes blink{50%{opacity:.25}}
.wbody{display:grid;grid-template-columns:15em 1fr;gap:.9em;padding:.9em}
.ag{background:var(--bg3);border:1px solid var(--bd);border-radius:.7em;padding:1em}.ag h4{font-size:.72em;letter-spacing:.04em;color:var(--tx3);margin-bottom:.9em;font-weight:600}
.ag ol{list-style:none;margin:0;padding:0;display:grid;gap:.75em;font-size:.82em}.ag li{display:flex;gap:.7em;align-items:center;opacity:.4;animation:stp 12s infinite;animation-delay:calc(var(--i)*1.7s)}
.ag li s{flex:none;width:1.1em;height:1.1em;border-radius:50%;border:1.5px solid var(--tx3);animation:chk 12s infinite;animation-delay:calc(var(--i)*1.7s)}
@keyframes stp{0%{opacity:.4}4%,82%{opacity:1}94%,100%{opacity:.4}}@keyframes chk{0%{background:transparent;border-color:var(--tx3)}4%,82%{background:var(--acc);border-color:var(--acc)}94%,100%{background:transparent;border-color:var(--tx3)}}
.mon{position:relative;border-radius:.7em;overflow:hidden;aspect-ratio:16/8.6;background:var(--video);animation:beat .469s ease-in-out infinite}@keyframes beat{50%{transform:scale(1.008)}}
.scn{position:absolute;inset:-6%;opacity:0;animation:cut 12s infinite}.scn:nth-child(2){animation-delay:3s}.scn:nth-child(3){animation-delay:6s}.scn:nth-child(4){animation-delay:9s}
.s1{background:radial-gradient(60% 70% at 70% 30%,#7f95ff,transparent 62%),linear-gradient(160deg,#16205c,#080b1f)}
.s2{background:radial-gradient(60% 70% at 30% 40%,#c9d1ff,transparent 64%),linear-gradient(200deg,#2a3150,#0b0d17)}
.s3{background:radial-gradient(60% 60% at 60% 60%,#3555f0,transparent 62%),linear-gradient(120deg,#0e1330,#05060d)}
.s4{background:radial-gradient(60% 70% at 25% 55%,#e6e8f2,transparent 62%),linear-gradient(180deg,#3a3d4d,#0c0d14)}
@keyframes cut{0%{opacity:0;transform:scale(1.02)}1%{opacity:1}25%{opacity:1;transform:scale(1.14) translateX(-2%)}26%,100%{opacity:0;transform:scale(1.14)}}
.vig{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.6))}
.flash{position:absolute;inset:0;background:#fff;opacity:0;mix-blend-mode:overlay;animation:fl 3s infinite}@keyframes fl{0%{opacity:.4}8%,100%{opacity:0}}
.sub{position:absolute;left:0;right:0;bottom:11%;text-align:center}.sub span{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;width:0;padding:.3em .8em;background:rgba(0,0,0,.6);color:#fff;border-radius:.4em;font-weight:650;font-size:clamp(.8em,1.9vw,1.25em);animation:typ 6s steps(19) infinite}
@keyframes typ{0%{width:0}45%,85%{width:15.2em}95%,100%{width:0}}
.tc{position:absolute;top:.8em;right:.9em;font:.72em/1 var(--mono);color:#fff;opacity:.85;background:rgba(0,0,0,.45);padding:.35em .6em;border-radius:.4em}
.tl{position:relative;margin:0 .9em .9em;padding:.7em;border:1px solid var(--bd);border-radius:.7em;background:var(--bg3);display:grid;gap:.55em;overflow:hidden}
.ruler{display:flex;justify-content:space-between;height:.5em}.ruler i{width:1px;background:var(--bd2)}
.trk{display:flex;gap:.3em;height:2.6em}.trk b{flex:1;border-radius:.4em}.trk .c1{background:var(--acc)}.trk .c2{background:#15151b}.trk .c3{background:#7f95ff}.trk .c4{background:#565662}
.wav{display:flex;align-items:center;gap:.18em;height:2.2em}.wav i{flex:1;height:100%;border-radius:2px;background:var(--acc);opacity:.55;transform-origin:center;animation:wv .94s ease-in-out infinite alternate}
.wav i:nth-child(3n){animation-duration:.7s;animation-delay:-.2s}.wav i:nth-child(4n){animation-duration:1.1s;animation-delay:-.5s}.wav i:nth-child(5n){animation-delay:-.35s}.wav i:nth-child(7n){animation-duration:.55s}
@keyframes wv{from{transform:scaleY(.18)}to{transform:scaleY(1)}}
.ph{position:absolute;top:0;bottom:0;width:2px;background:var(--tx);left:.7em;animation:play 12s linear infinite}.ph:before{content:"";position:absolute;top:0;left:-.35em;border:.4em solid transparent;border-top-color:var(--tx)}
@keyframes play{to{left:calc(100% - .7em)}}
/* strip */
.strip{border-block:1px solid var(--bd);overflow:hidden;padding:1.1em 0;background:var(--bg2)}
.mq{display:flex;width:max-content;animation:mq 40s linear infinite}.mq div{display:flex;gap:3em;padding-inline-end:3em}.mq span{white-space:nowrap;color:var(--tx2);font-weight:550}.mq span:before{content:"";display:inline-block;width:.35em;height:.35em;border-radius:50%;background:var(--acc);margin-inline-end:3em;vertical-align:middle}
@keyframes mq{to{transform:translateX(-50%)}}[dir=rtl] .mq{animation-direction:reverse}
/* sections */
.wrap{max-width:68em;margin:0 auto;padding:clamp(4em,9vw,7em) 1.25em 0}
.lp .wrap h2{font-size:clamp(1.7em,4vw,2.7em);letter-spacing:-.035em;line-height:1.1;max-width:16em;margin-bottom:1.1em}.lp .sub2{margin:-.4em 0 2em;max-width:34em}
.lp .wrap .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}.lp .wrap .rv.in,.lp .final.rv.in{opacity:1;transform:none}
.lp .wrap .rv.d1{transition-delay:.1s}.lp .wrap .rv.d2{transition-delay:.2s}
.card{position:relative;border:1px solid var(--bd);border-radius:1em;padding:1.6em;background:var(--bg2);overflow:hidden;transition:border-color .2s,box-shadow .3s,transform .3s var(--ease)}
.card:hover{border-color:var(--acc-bd);box-shadow:var(--sh2);transform:translateY(-3px)}
.lp .card h3{font-size:1.2em;margin-bottom:.5em;letter-spacing:-.02em}.card p{font-size:.95em}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:1em}.bento .card{grid-column:span 2}.bento .wide{grid-column:span 4}.bento .half{grid-column:span 3}
.viz{margin-top:1.4em;height:5.5em;position:relative;display:flex;align-items:flex-end;gap:.25em}
.beats i{flex:1;background:var(--acc);border-radius:3px;height:30%;animation:bt 1.2s ease-in-out infinite}.beats i:nth-child(odd){height:55%;animation-delay:-.3s}.beats i:nth-child(4n){height:90%;animation-delay:-.6s;background:var(--tx)}.beats i:nth-child(3n){animation-delay:-.9s}
@keyframes bt{50%{transform:scaleY(.55)}}.beats u{position:absolute;top:0;bottom:0;width:2px;background:var(--tx);animation:sw 4s linear infinite}@keyframes sw{from{left:0}to{left:100%}}
.scan{gap:.5em;align-items:stretch}.scan i{flex:1;border-radius:.5em}.scan i:nth-child(1){background:#16205c}.scan i:nth-child(2){background:#3555f0}.scan i:nth-child(3){background:#15151b}.scan i:nth-child(4){background:#7f95ff}
.scan u{position:absolute;left:0;right:0;height:2px;background:var(--acc);animation:sc 2.6s ease-in-out infinite alternate}@keyframes sc{from{top:0}to{top:100%}}
.lyr{align-items:center;flex-wrap:wrap;gap:.5em;font-weight:650;font-size:1.05em}.lyr span{padding:.25em .6em;border-radius:.5em;background:var(--bg3);color:var(--tx2)}.lyr .hit{color:#fff;background:var(--acc);animation:hit 3s ease-in-out infinite}.lyr .hit+.hit{animation-delay:.25s}
@keyframes hit{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.sw{gap:.5em;align-items:stretch}.sw i{flex:1;border-radius:.6em;animation:sh 3s ease-in-out infinite}.sw i:nth-child(1){background:linear-gradient(160deg,#c9d1ff,#3555f0)}.sw i:nth-child(2){background:linear-gradient(160deg,#e6e8f2,#565662);animation-delay:.2s}.sw i:nth-child(3){background:linear-gradient(160deg,#7f95ff,#16205c);animation-delay:.4s}.sw i:nth-child(4){background:linear-gradient(160deg,#bdbdc8,#15151b);animation-delay:.6s}.sw i:nth-child(5){background:linear-gradient(160deg,#fff,#6d6d79);animation-delay:.8s;border:1px solid var(--bd)}
@keyframes sh{50%{transform:translateY(-.4em)}}
/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(15em,1fr));gap:2em}
.steps li{position:relative;padding-top:.5em}.steps .n{display:grid;place-items:center;width:2.4em;height:2.4em;border-radius:50%;background:var(--tx);color:#fff;font-weight:700;margin-bottom:1em}.lp .steps h3{margin-bottom:.4em;font-size:1.15em}
.steps li:not(:last-child):after{content:"";position:absolute;top:1.7em;inset-inline-start:3.4em;inset-inline-end:-1.6em;height:1px;background:var(--bd2)}
/* plans */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(15em,1fr));gap:1em;align-items:stretch}
.plan{position:relative;border:1px solid var(--bd);border-radius:1em;padding:1.7em;background:var(--bg2);display:flex;flex-direction:column;gap:1em}.plan h3{font-size:1.1em;color:var(--tx2)}
.plan .price{font-size:2.6em;font-weight:750;letter-spacing:-.04em;line-height:1}.plan .price small{font-size:.3em;font-weight:500;color:var(--tx2);letter-spacing:0}
.plan ul{list-style:none;margin:0 0 .6em;padding:0;display:grid;gap:.6em;font-size:.92em;color:var(--tx2);flex:1}.plan li:before{content:"✓";color:var(--acc);margin-inline-end:.6em;font-weight:700}
.plan.hot{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),var(--sh2)}.plan.hot h3{color:var(--tx)}
.tag{position:absolute;top:-.8em;inset-inline-start:1.5em;padding:.25em .8em;border-radius:999px;background:var(--acc);color:#fff;font-size:.72em;font-weight:700}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(16em,1fr));gap:1em}
/* final */
.final{max-width:68em;margin:clamp(4em,9vw,7em) auto 0;text-align:center;padding:clamp(3em,7vw,5em) 1.5em;border-radius:1.4em;background:var(--video);color:#fff;opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);width:calc(100% - 2.5em)}
.lp .final h2{font-size:clamp(1.8em,4.6vw,3.1em);letter-spacing:-.04em;margin:0 auto .4em;max-width:14em;color:#fff}.lp .final p{margin-bottom:1.8em;color:#b9bccf}
footer{display:flex;justify-content:space-between;gap:1em;flex-wrap:wrap;padding:2.5em clamp(1em,4vw,3.5em);margin-top:4em;border-top:1px solid var(--bd);color:var(--tx3);font-size:.9em}footer nav{display:flex;gap:1.5em}footer a{text-decoration:none;color:var(--tx2)}footer a:hover{color:var(--tx)}
@media(max-width:900px){.bento{grid-template-columns:1fr 1fr}.bento .card,.bento .wide,.bento .half{grid-column:span 2}.wbody{grid-template-columns:1fr}.ag{display:none}.steps li:after{display:none}}
@media(max-width:700px){.top nav a:not(.btn){display:none}.tl .wav i:nth-child(n+26){display:none}}
@media(prefers-reduced-motion:reduce){.lp *,.lp *:before,.lp *:after{animation:none!important;transition:none!important}.lp .wrap .rv,.final{opacity:1!important;transform:none!important}.scn.s1{opacity:1}.ag li{opacity:1}.ag li s{background:var(--acc)}.sub span{width:auto}.ph{left:40%}}