:root{--ink:#16141a;--ink2:#3d3943;--mut:#625e68;--line:#ebe8ee;--soft:#f7f6f8;--plum:#714B67;--plum-d:#5c3c54;--plum-l:#f4eef3;--teal:#017E84;--teal-l:#e6f3f3;
--r:18px;--sh:0 1px 2px rgba(22,20,26,.04),0 12px 32px -12px rgba(22,20,26,.12);--sh-lg:0 2px 4px rgba(22,20,26,.04),0 40px 80px -30px rgba(60,30,55,.28);
font-family:"Plus Jakarta Sans",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;font-size:16px}
img{max-width:100%;height:auto}a{color:var(--plum)}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}.narrow{max-width:800px}.center{text-align:center}.left{text-align:left}
.muted{color:var(--mut)}.small{font-size:.875rem}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:99}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:8px}
.i{flex:none}
.sandbox-bar{background:#fff6dc;color:#6b4e00;text-align:center;font-size:.8rem;padding:6px 12px;font-weight:600}
/* nav */
.nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.scrolled{border-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:36px;height:68px}.brand img{display:block;height:28px;width:auto}
.nav-links{display:flex;gap:28px}.nav-links a{color:var(--ink2);text-decoration:none;font-weight:500;font-size:.94rem}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink)}
.nav-cta{margin-left:auto;display:flex;gap:6px;align-items:center}
.lang{border:0;background:transparent;border-radius:8px;padding:8px;font:inherit;font-weight:600;font-size:.8rem;cursor:pointer;color:var(--mut)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:10px 18px;font:inherit;font-weight:600;font-size:.94rem;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.btn .i{width:17px;height:17px}
.btn-primary{background:var(--plum);color:#fff}.btn-primary:hover{background:var(--plum-d)}.btn-primary:disabled{opacity:.6;cursor:wait}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:#2c2931}
.btn-quiet{color:var(--ink)}.btn-quiet:hover{background:var(--soft)}
.btn-outline,.btn-ghost{background:#fff;color:var(--ink);border-color:#dcd7df}.btn-outline:hover,.btn-ghost:hover{border-color:#bdb6c1}
.btn-light{background:#fff;color:var(--plum-d)}.btn-light:hover{background:#f4eef3}
.btn-ghost-light{color:#fff;border-color:rgba(255,255,255,.4)}.btn-ghost-light:hover{background:rgba(255,255,255,.1)}
.btn-lg{padding:14px 24px;font-size:1rem;border-radius:14px}.btn-block{width:100%}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}.cta-row.center{justify-content:center}
/* type */
h1{font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.035em;font-weight:800;margin:0 0 22px}
h2{font-weight:700;letter-spacing:-.03em}
.h1{font-size:clamp(2rem,4vw,2.8rem);line-height:1.1;letter-spacing:-.035em;font-weight:800;margin:0 0 12px}
.h2{font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.15;margin:0 0 28px;letter-spacing:-.03em;font-weight:700}
.h3{font-size:1.1rem;margin:0 0 14px;font-weight:700}
.sub{font-size:clamp(1.08rem,1.6vw,1.28rem);color:var(--mut);max-width:34em;margin:0 auto 34px;line-height:1.55}
.lead{font-size:1.1rem;color:var(--mut);margin:0 0 28px}
/* hero */
.hero{padding:72px 0 40px;background:radial-gradient(900px 500px at 50% -10%,#f6eff5 0,rgba(255,255,255,0) 70%)}
.hero-copy{text-align:center;max-width:860px;margin:0 auto}.hero-copy .cta-row{justify-content:center}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;font-size:.84rem;font-weight:600;color:var(--ink2);margin:0 0 26px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px var(--teal-l)}
.stage{margin:52px auto 0;max-width:1060px}
.win{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-lg);overflow:hidden}
.win-bar{display:flex;align-items:center;gap:7px;height:42px;padding:0 16px;border-bottom:1px solid var(--line);background:#fcfbfc}
.win-bar span{width:11px;height:11px;border-radius:50%;background:#e6e1e7}.win-bar em{font-style:normal;margin:0 auto;font-size:.8rem;color:var(--mut);font-weight:500;padding-right:50px}
.win-body{display:grid;grid-template-columns:1fr 420px;min-height:440px}
.odoo-list{padding:22px 26px;background:#fff}
.ol-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:1.02rem}
.ol-btn{background:var(--plum);color:#fff;font-size:.78rem;font-weight:600;padding:5px 12px;border-radius:8px}
.ol-row{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:10px;padding:13px 4px;border-top:1px solid var(--line);font-size:.86rem;color:var(--ink2)}
.st{font-size:.74rem;font-weight:600;border-radius:999px;padding:2px 10px;justify-self:start}.st.late{background:#fdecea;color:#a3261b}.st.ok{background:var(--soft);color:var(--mut)}
.chat{border-left:1px solid var(--line);background:#fbfafc;display:flex;flex-direction:column}
.chat-head{display:flex;align-items:center;gap:8px;padding:14px 18px;font-weight:700;border-bottom:1px solid var(--line);background:#fff}
.chat-body{flex:1;padding:18px;display:flex;flex-direction:column;gap:12px}
.msg{font-size:.9rem;line-height:1.5;max-width:92%}.msg.me{align-self:flex-end;background:var(--ink);color:#fff;padding:10px 14px;border-radius:16px 16px 4px 16px}
.msg.bot{color:var(--ink2)}
.typing{display:flex;gap:5px;padding:4px 0}.typing i{width:7px;height:7px;border-radius:50%;background:#b9b2bd;animation:blink 1.1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:.3}}
.apcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--sh);font-size:.86rem}
.ap-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.ap-kind{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;color:var(--plum);background:var(--plum-l);padding:3px 9px;border-radius:7px}.ap-kind .i{width:13px;height:13px}
.ap-n{font-size:.76rem;color:var(--mut)}.ap-to{font-weight:600;margin-bottom:8px}
.ap-mail{background:var(--soft);border-radius:10px;padding:10px 12px}.ap-mail p{margin:4px 0 0;color:var(--mut);font-size:.8rem}
.ap-act,.pu-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.b1,.b2{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;padding:7px 13px;border-radius:10px}.b1 .i,.b2 .i{width:14px;height:14px}
.b1{background:var(--plum);color:#fff}.b2{border:1px solid var(--line);background:#fff;color:var(--ink2)}
.chat-input{margin:0 14px 14px;border:1px solid var(--line);background:#fff;border-radius:14px;padding:11px 14px;display:flex;justify-content:space-between;align-items:center;color:#8d8792;font-size:.86rem}
.chat-input i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--ink);color:#fff}.chat-input .i{width:15px;height:15px}
.caption{font-size:.8rem;color:var(--mut);margin:14px 0 0;text-align:center}
.a1,.a2,.a3,.a4{opacity:0;animation:pop .5s cubic-bezier(.2,.7,.2,1) forwards}
.a1{animation-delay:.4s}.a2{animation:pop .3s .9s forwards,gone .2s 2s forwards}.a3{animation-delay:2.1s}.a4{animation-delay:2.6s}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes gone{to{opacity:0;height:0;padding:0;margin:-6px 0}}
/* trust */
.trust{padding:56px 0 24px}.trust-in{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.trust-in>div{display:flex;gap:14px;align-items:flex-start;color:var(--mut);font-size:.95rem}.trust-in b{color:var(--ink);display:block}
.trust-in .i{width:22px;height:22px;color:var(--plum);margin-top:2px}
/* showcases */
.show{padding:96px 0}.show.alt{background:var(--soft)}
.show-in{display:grid;grid-template-columns:.9fr 1.25fr;gap:72px;align-items:center}.show-in.flip{grid-template-columns:1.25fr .9fr}.show-in.flip .show-copy{order:2}
.kicker{font-size:.82rem;font-weight:700;color:var(--teal);letter-spacing:.06em;text-transform:uppercase;margin:0 0 14px}
.show-copy h2{font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.08;margin:0 0 18px}
.show-copy p{color:var(--mut);font-size:1.08rem;margin:0 0 22px;max-width:30em}
.show-copy .ask{display:inline-block;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 16px;font-weight:500;font-size:.98rem;box-shadow:var(--sh)}
.panel-ui{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-lg);padding:22px;max-width:480px;margin:0 auto}
.pu-head{display:flex;align-items:center;gap:8px;font-weight:700;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:6px;font-size:.95rem}.pu-head .i{color:var(--plum)}
.pu-badge{margin-left:auto;font-size:.74rem;background:var(--teal-l);color:#014a4e;padding:3px 10px;border-radius:999px}
.pu-row{display:flex;gap:12px;align-items:center;padding:11px 2px;border-bottom:1px solid var(--line);font-size:.9rem}
.pu-row small{display:block;color:var(--mut);font-size:.8rem}
.cb{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--plum);color:#fff}.cb .i{width:13px;height:13px}
.pu-sum{background:linear-gradient(135deg,#fbf3f2,#fff);border:1px solid #f3dcd9;border-radius:14px;padding:18px;margin-bottom:8px}
.pu-sum small{color:#a3261b;font-weight:700;font-size:.78rem}.pu-sum b{display:block;font-size:1.9rem;letter-spacing:-.02em}.pu-sum span{color:var(--mut);font-size:.85rem}
.pu-line{display:grid;grid-template-columns:1fr auto auto;gap:16px;padding:12px 2px;border-bottom:1px solid var(--line);font-size:.9rem;align-items:center}
.late{font-size:.75rem;color:#a3261b;background:#fdecea;padding:2px 9px;border-radius:999px}
.diff{margin:14px 0}.diff small{color:var(--mut);font-weight:600}
.diff .old{margin-top:8px;padding:12px 14px;border-radius:12px;background:#fdf1f0;color:#8a3a33;text-decoration:line-through}
.diff .new{margin-top:8px;padding:12px 14px;border-radius:12px;background:var(--teal-l);color:#014a4e;font-weight:600}
.img2web{display:grid;grid-template-columns:.8fr auto 1.2fr;gap:16px;align-items:center}
.sketch{background:#fff;border:1px dashed #cfc8d3;border-radius:16px;padding:14px;font-size:.78rem;color:var(--mut);display:flex;flex-wrap:wrap;gap:6px;align-items:center;transform:rotate(-2deg)}
.sketch .i{width:16px;height:16px}.sk{width:100%;display:flex;flex-direction:column;gap:7px;margin-top:8px}
.sk>i{display:block;height:7px;border-radius:4px;background:#e4dee7}.sk .big{height:18px}.w60{width:60%}.w90{width:90%}.w40{width:40%}
.sk .g{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.sk .g i{height:30px;border-radius:6px;background:#efeaf1}
.arrowc{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:var(--sh);color:var(--plum)}
.page{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-lg);overflow:hidden;font-size:.74rem}
.pg-nav{display:flex;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);color:var(--mut)}.pg-nav b{color:var(--ink);margin-right:auto}.cart{color:var(--plum);font-weight:600}
.pg-hero{padding:26px 16px;background:linear-gradient(135deg,#f6e9ee,#eef6f3);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.pg-hero b{font-size:1.15rem;letter-spacing:-.02em}.pg-btn{background:var(--ink);color:#fff;padding:5px 12px;border-radius:8px}
.pg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px}.pg-grid i{height:54px;border-radius:8px;background:var(--soft)}
#contoh>.caption{padding:24px 28px 0}
/* price teaser + final */
.price-teaser{padding:110px 0}
.pt-in{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:center}
.pt-in h2{font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.08;margin:0 0 14px}.pt-in p{color:var(--mut);font-size:1.08rem;margin:0}
.pt-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pt-card{border:1px solid var(--line);border-radius:18px;padding:22px;text-decoration:none;color:var(--ink);transition:.2s;background:#fff}
.pt-card:hover{border-color:#cdc5d0;transform:translateY(-2px);box-shadow:var(--sh)}
.pt-card span{display:block;font-weight:600;color:var(--mut);font-size:.9rem;margin-bottom:10px}.pt-card b{font-size:1.25rem;letter-spacing:-.02em}.pt-card small{color:var(--mut)}
.pt-card.f{border:1.5px solid var(--plum);box-shadow:0 18px 40px -24px rgba(113,75,103,.45)}
.final{background:radial-gradient(800px 400px at 50% 120%,#8d5f80 0,var(--plum) 45%,#4f3349 100%);color:#fff;padding:110px 0}
.final h2{font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.04em;margin:18px 0 10px;line-height:1.05}.final p{color:#efe3ec;font-size:1.1rem;margin:0 0 32px}
/* pricing page */
.p-hero{padding:80px 0 40px}.p-hero h1{font-size:clamp(2.3rem,5vw,3.8rem)}
.toggle{display:inline-flex;background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:4px;margin:0 0 48px}
.toggle button{border:0;background:transparent;padding:9px 18px;border-radius:10px;font:inherit;font-weight:600;cursor:pointer;color:var(--mut);font-size:.92rem}
.toggle button[aria-checked=true]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.toggle em{font-style:normal;color:var(--teal);font-size:.78rem;margin-left:6px}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.tier{border:1px solid var(--line);border-radius:22px;padding:30px;background:#fff;display:flex;flex-direction:column}
.tier.featured{border:1.5px solid var(--plum);box-shadow:var(--sh-lg);background:linear-gradient(180deg,#fdfafc,#fff 40%)}
.t-top{display:flex;align-items:center;justify-content:space-between}.tier h2{margin:0;font-size:1.2rem}
.badge{background:var(--plum);color:#fff;font-size:.74rem;font-weight:700;padding:4px 11px;border-radius:999px}
.t-tag{color:var(--mut);margin:8px 0 22px;min-height:3.2em;font-size:.95rem}
.price{display:flex;align-items:baseline;flex-wrap:wrap}.amt{font-size:2.3rem;letter-spacing:-.04em;font-weight:800}.per{color:var(--mut);font-size:.95rem}
.yr-note{color:var(--mut);font-size:.84rem;margin:4px 0 22px;min-height:1.4em}
.checks{list-style:none;padding:22px 0 0;margin:24px 0 0;display:grid;gap:12px;font-size:.93rem;border-top:1px solid var(--line)}
.checks li{display:flex;gap:10px;align-items:flex-start;color:var(--ink2)}.checks .i{width:18px;height:18px;color:var(--teal);margin-top:2px}
.addons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.addons div{display:flex;gap:14px;align-items:baseline;border:1px solid var(--line);border-radius:14px;padding:12px 18px;font-size:.92rem;color:var(--ink2)}.addons small{color:var(--mut);font-weight:400}
.p-sec{padding:72px 0}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px}
.cmp{width:100%;border-collapse:collapse;font-size:.92rem;min-width:620px}
.cmp th,.cmp td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.cmp tbody th{font-weight:500;color:var(--mut)}.cmp tr:last-child>*{border-bottom:0}.cmp thead th{font-size:.85rem;color:var(--mut)}
.cmp .hl{background:#fbf8fb;font-weight:600;color:var(--ink)}.cmp thead .hl{color:var(--plum)}
.note{font-size:.82rem;color:var(--mut);margin-top:12px}
.faq{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line);padding:20px 0}summary{font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font-size:1.02rem}
summary::-webkit-details-marker{display:none}summary::after{content:"+";color:var(--mut);font-size:1.4rem;line-height:1;font-weight:400;transition:transform .2s}details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--mut);margin:12px 0 0;max-width:42em}
/* shared app pages */
.sec{padding:72px 0}.sec.alt{background:var(--soft)}
.co{display:grid;grid-template-columns:1fr 370px;gap:32px;align-items:start;margin-top:24px}
fieldset{border:1px solid var(--line);border-radius:var(--r);padding:24px;margin:0 0 20px}
legend{font-weight:700;padding:0 8px;display:flex;align-items:center;gap:8px}
.n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:.78rem}
.plan-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.opt{position:relative;display:block;cursor:pointer}.opt input{position:absolute;opacity:0}
.opt span{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;padding:14px 16px;transition:.15s}
.opt small{color:var(--mut)}.opt input:checked+span{border:1.5px solid var(--plum);padding:13.5px 15.5px;background:#fcf9fb}
.opt input:focus-visible+span{outline:2px solid var(--teal);outline-offset:2px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.span2{grid-column:1/-1}
.fgrid label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.9rem}
input,select,textarea{font:inherit;font-weight:400;border:1px solid #d7d1da;border-radius:12px;padding:11px 13px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(1,126,132,.16)}
[aria-invalid=true]{border-color:#b42318}.ferr{color:#b42318;font-size:.8rem;font-weight:500}
.summary{position:sticky;top:92px;border:1px solid var(--line);border-radius:20px;padding:24px;background:var(--soft)}
.summary dl{margin:0 0 16px}.summary dl div{display:flex;justify-content:space-between;padding:8px 0}.summary dd{margin:0}
.summary .tot{border-top:1px solid var(--line);margin-top:6px;padding-top:14px;font-weight:700;font-size:1.15rem}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;margin:16px 0}.chk input{margin-top:4px}.chk span{flex:1}
.err{color:#b42318;font-size:.9rem;min-height:1em}.alert{background:#fff6dc;color:#5c4300;border-radius:14px;padding:12px 16px;margin:12px 0 24px}
.panel{border:1px solid var(--line);border-radius:20px;padding:28px;background:#fff;margin:24px 0}
.kv{display:grid;grid-template-columns:140px 1fr;gap:10px;margin:16px 0}.kv dt{color:var(--mut)}.kv dd{margin:0}
.ok-ic{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;background:var(--teal-l);color:#014a4e;font-size:2rem;display:grid;place-items:center}
.next{max-width:520px;margin:0 auto 24px}.next li{margin:6px 0}
.tag{font-size:.7rem;font-weight:700;letter-spacing:.06em;color:var(--plum);background:var(--plum-l);padding:3px 8px;border-radius:6px}.tag.warn{color:#6b4e00;background:#fff1c7}
.hp{position:absolute;left:-9999px}.prose h2{font-size:1.15rem;margin-top:28px}
/* footer */
.foot{padding:64px 0 32px;border-top:1px solid var(--line)}
.foot-in{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot-brand img{display:block;height:26px;width:auto}.foot-brand p{color:var(--mut);font-size:.9rem;margin:12px 0 0;max-width:22em}
.foot-links{display:flex;gap:64px;flex-wrap:wrap}.foot-links div{display:flex;flex-direction:column;gap:10px;font-size:.9rem}
.foot-links b{font-size:.82rem;color:var(--ink)}.foot-links a{color:var(--mut);text-decoration:none}.foot-links a:hover{color:var(--ink)}
.foot-note{margin-top:48px;font-size:.8rem;color:var(--mut)}
/* reveal */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}.js .reveal.in{opacity:1;transform:none}
/* responsive */
@media (max-width:1000px){.show-in.flip{grid-template-columns:1fr}.win-body{grid-template-columns:1fr}.odoo-list{display:none}.chat{border-left:0}
.show-in,.pt-in{grid-template-columns:1fr;gap:40px}.show-in.flip .show-copy{order:0}.co{grid-template-columns:1fr}.summary{position:static}
.tiers{grid-template-columns:1fr;max-width:520px;margin:0 auto}.t-tag{min-height:0}}
@media (max-width:680px){.nav-links,.hide-sm{display:none}.wrap{padding:0 20px}.hero{padding:56px 0 24px}.stage{margin-top:40px}
.trust-in{grid-template-columns:1fr;gap:18px}.show{padding:64px 0}.price-teaser,.final{padding:72px 0}.pt-plans{grid-template-columns:1fr}
.img2web{grid-template-columns:1fr}.arrowc{transform:rotate(90deg);margin:0 auto}.fgrid,.plan-pick{grid-template-columns:1fr}.kv{grid-template-columns:110px 1fr}
.foot-links{gap:32px}.sub{font-size:1.05rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.a1,.a3,.a4{opacity:1}.a2{display:none}.js .reveal{opacity:1;transform:none}}

.show-vis{position:relative;border-radius:28px;padding:56px 40px;background:radial-gradient(120% 120% at 0% 0%,#f6edf3 0,#fbf8fa 45%,#eef6f6 100%)}
.show.alt .show-vis{background:radial-gradient(120% 120% at 100% 0%,#ffffff 0,#f8f3f7 50%,#edf5f5 100%)}
.panel-ui{max-width:500px}
@media (max-width:680px){.show-vis{padding:28px 16px;border-radius:22px}}
.price.ent .amt{font-size:1.75rem}.price.ent{flex-wrap:nowrap;white-space:nowrap}
.pill-link{border-left:1px solid var(--line);padding-left:10px;margin-left:2px;color:var(--plum);text-decoration:none;font-weight:700}
.night{margin:56px 0 0;padding:110px 0;color:#fff;background:radial-gradient(900px 500px at 15% 0%,#3b2a4f 0,rgba(0,0,0,0) 60%),linear-gradient(180deg,#0f1530 0,#1b1838 55%,#2a1d36 100%)}
.night-head{max-width:640px;margin:0 auto 56px;text-align:center}
.night-head h2{font-size:clamp(2.4rem,5.4vw,4rem);line-height:1.02;letter-spacing:-.04em;margin:0 0 18px;font-weight:800}
.night-head p{color:#d6d0e2;font-size:1.1rem;margin:0}.kicker.light{color:#8fd3d6}
.night-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px}
.sky,.morning{border-radius:24px;padding:32px;position:relative;overflow:hidden}
.sky{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1)}
.moon{position:absolute;top:26px;right:30px;width:54px;height:54px;border-radius:50%;box-shadow:-12px 6px 0 0 #f3e7c4;transform:rotate(-15deg)}
.stars{position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 20% 18%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 62% 12%,#fff9 50%,transparent 51%),radial-gradient(1.5px 1.5px at 78% 40%,#fff6 50%,transparent 51%),radial-gradient(1px 1px at 40% 30%,#fff7 50%,transparent 51%),radial-gradient(1px 1px at 88% 70%,#fff5 50%,transparent 51%);animation:tw 4s ease-in-out infinite alternate}
@keyframes tw{to{opacity:.5}}
.clock{position:relative;font-size:2.6rem;font-weight:800;letter-spacing:-.03em;color:#fff;margin-bottom:22px;font-variant-numeric:tabular-nums}
.tl{list-style:none;margin:0;padding:0 0 0 4px;position:relative;display:grid;gap:18px}
.tl:before{content:"";position:absolute;left:56px;top:8px;bottom:8px;width:1px;background:rgba(255,255,255,.18)}
.tl li{display:grid;grid-template-columns:52px 1fr;gap:22px;align-items:start;position:relative}
.tl li:after{content:"";position:absolute;left:48.5px;top:6px;width:9px;height:9px;border-radius:50%;background:#8fd3d6;box-shadow:0 0 0 4px rgba(143,211,214,.18)}
.tl .t{font-size:.8rem;color:#b9b2c9;font-variant-numeric:tabular-nums;padding-top:2px}
.tl div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 14px}
.tl b{display:block;font-size:.95rem}.tl small{color:#c9c2d6;font-size:.82rem}
.tl .soon div{border-style:dashed;opacity:.85}.tl .soon:after{background:#f3e7c4;box-shadow:0 0 0 4px rgba(243,231,196,.15)}
.tl em{font-style:normal;font-size:.68rem;font-weight:700;background:#f3e7c4;color:#3a2a10;padding:2px 8px;border-radius:999px;margin-left:6px;vertical-align:2px}
.morning{background:linear-gradient(180deg,#fff6ea,#fff 60%);color:var(--ink)}
.sun-row{display:flex;align-items:center;gap:12px;margin-bottom:22px;font-size:1.05rem}
.sun{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,#ffcf6b 55%,#ffe7b0 56%);box-shadow:0 0 0 8px rgba(255,207,107,.18)}
.stack{display:grid;gap:12px}
.mc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--sh);display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center}
.mc .ap-kind{grid-column:1/-1;justify-self:start}.mc b{font-size:.95rem}.mc-act{display:flex;gap:6px}.mc-act i{font-style:normal}
.mc.ghost{height:18px;padding:0;margin:-8px 14px 0;box-shadow:none;background:#faf8fa}
.safe{display:flex;gap:10px;align-items:flex-start;color:var(--mut);font-size:.9rem;margin:22px 0 0}.safe .i{color:var(--plum);margin-top:2px}
@media (max-width:1000px){.night-grid{grid-template-columns:1fr}}
@media (max-width:680px){.night{padding:72px 0}.sky,.morning{padding:22px}.mc{grid-template-columns:1fr}.pill-link{display:none}}
/* landing v2: features, security, versions, home pricing */
.sec-head{max-width:680px;margin:0 auto 52px;text-align:center}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.08;margin:0 0 16px}
.sec-head p{color:var(--mut);font-size:1.08rem;margin:0}
.feat{padding:110px 0 40px}
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.fc{border:1px solid var(--line);border-radius:20px;padding:26px;background:#fff;transition:border-color .2s,box-shadow .2s}
.fc:hover{border-color:#ddd3dc;box-shadow:var(--sh)}
.fc .i{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--plum-l);color:var(--plum);margin-bottom:18px}
.fc h3{font-size:1.02rem;margin:0 0 8px;letter-spacing:-.01em}.fc p{margin:0;color:var(--mut);font-size:.92rem;line-height:1.55}.fc b{color:var(--ink2)}
.how{padding:110px 0;background:var(--soft)}
.steps{list-style:none;margin:0 0 40px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.steps li{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;position:relative}
.sn{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--plum);color:#fff;font-weight:700;font-size:.85rem;margin-bottom:14px}
.steps h3{font-size:1.02rem;margin:0 0 6px}.steps p{margin:0;color:var(--mut);font-size:.92rem}
.sec-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sc{display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px}
.sc .i{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--teal-l);color:var(--teal)}
.sc h3{font-size:1.02rem;margin:0 0 6px}.sc p{margin:0;color:var(--mut);font-size:.93rem}
.ver{padding:110px 0 40px}
.vt{min-width:0}.vt td{text-align:center;width:22%}.vt thead th:not(:first-child){text-align:center}
.vt .i{width:18px;height:18px;color:var(--teal)}.dash{color:#c3bcc6}
.hp-price{padding:110px 0 40px}
.hp-price .tier h3{margin:0;font-size:1.2rem}.hp-price .price{margin-bottom:22px}
@media (max-width:1000px){.feat-grid{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}.sec-grid{grid-template-columns:1fr}}
@media (max-width:680px){.feat,.how,.ver,.hp-price{padding:72px 0 24px}.how{padding-bottom:72px}.feat-grid,.steps{grid-template-columns:1fr}.sec-head{margin-bottom:36px}
.sc{flex-direction:column;gap:12px;padding:22px}.vt th,.vt td{padding:12px 10px;font-size:.86rem}.ap-act{flex-wrap:wrap}}
/* knowledge */
.kn{padding:96px 0 72px;background:linear-gradient(180deg,#fff 0,var(--plum-l) 100%)}
.kn-in{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center}
.kn-copy h2{font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.08;letter-spacing:-.03em;margin:0 0 18px}
.kn-copy>p{color:var(--mut);font-size:1.08rem;margin:0 0 24px;max-width:32em}
.kn-asks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.kn-asks li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:9px 14px;font-size:.95rem;font-weight:500;box-shadow:var(--sh)}
.kn-vis{border-radius:28px;padding:48px 36px;background:radial-gradient(120% 120% at 100% 0%,#fff 0,#f6edf3 50%,#eef6f6 100%)}
.kn-card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-lg);overflow:hidden}
.kn-head{display:flex;align-items:center;gap:8px;padding:14px 18px;font-weight:700;border-bottom:1px solid var(--line)}
.kn-head .i{color:var(--plum)}
.kn-body{padding:20px;display:flex;flex-direction:column;gap:14px;background:#fbfafc}
.kn-q{align-self:flex-end;max-width:85%;background:var(--ink);color:#fff;border-radius:16px 16px 4px 16px;padding:10px 14px;font-size:.95rem}
.kn-a{max-width:92%;background:#fff;border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:14px 16px;font-size:.95rem}
.kn-a p{margin:0 0 8px}.kn-a .kn-a2{color:var(--mut)}
.kn-src{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.kn-src span{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--plum-d);background:var(--plum-l);border-radius:999px;padding:5px 10px}
.kn-src .i{width:14px;height:14px}
.kn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:56px}
.kc{display:flex;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px}
.kc>.i{flex:none;color:var(--plum);margin-top:3px}.kc h3{margin:0 0 6px;font-size:1rem}.kc p{margin:0;color:var(--mut);font-size:.92rem}
.kn-note{margin-top:20px;text-align:center}
@media (max-width:980px){.kn-in{grid-template-columns:1fr;gap:40px}.kn-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.kn{padding:64px 0 48px}.kn-vis{padding:24px 14px;border-radius:20px}.kn-grid{grid-template-columns:1fr}.kn-asks li{font-size:.9rem}}