:root{--bg:#0b0d12;--panel:#12151c;--text:#e8eaf0;--muted:#9aa3b2;--line:#232835;--accent:#7c9cff;--accent2:#5ad1b3;color-scheme:dark}
@media (prefers-color-scheme:light){:root{--bg:#f7f8fb;--panel:#fff;--text:#141821;--muted:#5b6474;--line:#e3e6ee;--accent:#3a5bd9;--accent2:#138a6e;color-scheme:light}}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent)}.wrap{max-width:960px;margin:0 auto;padding:0 20px}
header{border-bottom:1px solid var(--line)}header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;text-decoration:none;color:var(--text)}
.brand svg{width:28px;height:28px}nav{display:flex;gap:18px;flex-wrap:wrap}nav a{color:var(--muted);text-decoration:none;font-size:15px}nav a:hover{color:var(--text)}
.hero{padding:88px 0 56px}.hero h1{font-size:clamp(34px,6vw,56px);line-height:1.08;margin:0 0 18px;letter-spacing:-.02em}
.hero p{font-size:19px;color:var(--muted);max-width:640px;margin:0 0 28px}
.btn{display:inline-block;padding:11px 18px;border-radius:10px;background:var(--accent);color:#fff;text-decoration:none;font-weight:600}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line);margin-left:8px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;padding:16px 0 72px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px}.card h3{margin:0 0 6px;font-size:17px}.card p{margin:0;color:var(--muted);font-size:15px}
.tag{display:inline-block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent2);margin-bottom:14px;font-weight:600}
.doc{padding:56px 0 80px;max-width:760px}.doc h1{font-size:36px;margin:0 0 6px}.doc .meta{color:var(--muted);margin:0 0 32px}
.doc h2{font-size:21px;margin:36px 0 8px}.doc li{margin:4px 0}
footer{border-top:1px solid var(--line);color:var(--muted);font-size:14px}footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:24px 20px}
footer a{color:var(--muted)}

.brand img{width:28px;height:28px;display:block}.jerry{display:flex;align-items:center;gap:14px;margin:0 0 22px}.jerry img{width:112px;height:112px;filter:drop-shadow(0 8px 18px rgba(109,62,232,.25))}.jerry figcaption{background:var(--panel,#fff);border:1px solid var(--line,#e3e6ee);border-radius:14px 14px 14px 4px;padding:10px 14px;font-size:15px;color:var(--muted)}
.hero .btn+.btn{margin-left:10px}
.wrap{max-width:1080px}
nav{align-items:center}nav .btn.sm,.btn.sm{padding:7px 14px;font-size:14px;color:#fff}
h2.sec{font-size:28px;letter-spacing:-.01em;margin:64px 0 6px}.lede{color:var(--muted);font-size:17px;margin:0 0 20px;max-width:680px}
.shot{margin:8px 0 0}.shot img,.split img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line);box-shadow:0 18px 50px rgba(20,24,33,.18);display:block}
.shot p{color:var(--muted);text-align:center;font-size:15px;margin:12px 0 0}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:0 0 12px}
.thumb{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--text);font-weight:600;font-size:15px}
.thumb img{width:100%;height:auto;aspect-ratio:16/10;border-radius:10px;border:1px solid var(--line);background:var(--panel);transition:transform .15s}
.thumb:hover img{transform:translateY(-2px);border-color:var(--accent)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:18px}
.steps .n{display:inline-flex;width:30px;height:30px;border-radius:50%;align-items:center;justify-content:center;background:var(--accent);color:#fff;margin-bottom:10px}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:600}.faq details p{color:var(--muted);margin:10px 0 0}
.cta-band{margin:64px 0 72px;text-align:center;padding:36px 22px}.cta-band h2{margin:0 0 6px}.cta-band p{margin:0 auto 18px;max-width:520px}
.tour{padding:48px 0 0}.tour h1{font-size:clamp(32px,5vw,46px);margin:0 0 8px;letter-spacing:-.02em}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:32px;align-items:center;margin:56px 0}
.split h2{margin:4px 0 8px;font-size:24px}.split p{color:var(--muted);margin:0}
@media (max-width:760px){.split{grid-template-columns:1fr;gap:16px}nav a:not(.btn){display:none}.hero{padding:48px 0 32px}.btn.ghost{margin-left:0;margin-top:8px}.hero .btn+.btn{margin-left:6px}}

/* Home hero: six-step "how easy it is" slideshow. Pure CSS (CSP allows no JS or inline styles). One 24s cycle, 4s per slide. */
.hero2{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:48px;align-items:center;padding:64px 0 40px}
.hero2 h1{font-size:clamp(34px,4.6vw,50px)}.hero2 .hero-copy>p{font-size:18px;margin-bottom:24px}
.hero2 .jerry img{width:88px;height:88px}
.hero2 .hero-cta{display:flex;flex-wrap:wrap;gap:10px}.hero2 .hero-cta .btn{margin:0}
.vh,.show input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;opacity:0}
.show{--cyc:24s;--sc-paper:#1a1f2e;--sc-bar:#232a3d;--sc-ink:#e8ecf6;--sc-mute:#98a2b8;--sc-line:#323b55;--sc-dev:#06080d;--sc-screen:#141a2b;--sc-soft:#222a3e;--sc-field:#141a28;--sc-ok:#4fdca5;--sc-okbg:#123a2d;--sc-track:#39425c;position:relative;min-width:0}
@media (prefers-color-scheme:light){.show{--sc-paper:#fff;--sc-bar:#eef1f8;--sc-ink:#1b2233;--sc-mute:#6b7489;--sc-line:#dde2ee;--sc-dev:#1f2637;--sc-screen:#eef2ff;--sc-soft:#f1f4fa;--sc-field:#f7f8fb;--sc-ok:#0f7a54;--sc-okbg:#e3f7ee;--sc-track:#d5dbe7}}
.stage{border-radius:22px;border:1px solid var(--line);background:radial-gradient(120% 90% at 85% 0%,rgba(109,62,232,.22),transparent 60%),radial-gradient(90% 80% at 0% 100%,rgba(47,111,224,.2),transparent 60%),var(--panel);box-shadow:0 24px 60px rgba(20,24,40,.28);overflow:hidden}
.slides{list-style:none;margin:0;padding:0;display:grid}
.slide{grid-area:1/1;opacity:0;display:flex;flex-direction:column;min-width:0}
.slide svg{display:block;width:100%;height:auto}
.n5 svg{border-radius:21px 21px 0 0}
.show .cap{padding:6px 24px 22px}.show .cap h3{margin:0 0 4px;font-size:21px;letter-spacing:-.01em;line-height:1.25}
.show .cap p{margin:0;font-size:15.5px;line-height:1.5;color:var(--muted);max-width:none}
.slide .mono{font:15px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.slide text{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}.slide text.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.k-paper{fill:var(--sc-paper)}.k-edge{stroke:var(--sc-line);stroke-width:1.5}.k-bar{fill:var(--sc-bar)}.k-ink{fill:var(--sc-ink)}.k-ink-s{stroke:var(--sc-ink)}.k-mute{fill:var(--sc-mute)}
.k-lines{stroke:var(--sc-line);stroke-width:1.5}.k-dev{fill:var(--sc-dev)}.k-screen{fill:var(--sc-screen)}.k-soft{fill:var(--sc-soft)}.k-track{fill:var(--sc-track)}
.k-field{fill:var(--sc-field);stroke:var(--sc-line);stroke-width:1.5}.k-ok{fill:var(--sc-ok)}.k-okbg{fill:var(--sc-okbg);stroke:var(--sc-ok);stroke-width:1.5}.k-ring{stroke:var(--sc-ink)}
.k-slot rect{fill:none;stroke:var(--sc-mute);stroke-width:1.5;stroke-dasharray:5 5;opacity:.6}
.slide .out{opacity:0}
.dots{display:flex;justify-content:center;align-items:center;gap:2px;margin-top:14px}
.dots label{display:block;padding:8px 4px;cursor:pointer}
.dots i{position:relative;display:block;width:9px;height:9px;border-radius:99px;background:var(--line);overflow:hidden;transition:width .25s}
.dots i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#2f6fe0,#6d3ee8);transform:scaleX(0);transform-origin:left}
.dots label:hover i{background:var(--muted)}
.dots .play{display:none;margin-left:8px;padding:4px 12px;border:1px solid var(--line);border-radius:99px;font-size:13px;color:var(--muted)}
.dots .play:hover{color:var(--text)}
.show:has(input:focus-visible) .dots{outline:2px solid var(--accent);outline-offset:2px;border-radius:99px}
/* chosen step (a dot was clicked): show it, stop auto-play */
#sh1:checked~.stage .n1,#sh2:checked~.stage .n2,#sh3:checked~.stage .n3,#sh4:checked~.stage .n4,#sh5:checked~.stage .n5,#sh6:checked~.stage .n6,#sh0:checked~.stage .n1{opacity:1}
#sh1:checked~.dots [for=sh1] i,#sh2:checked~.dots [for=sh2] i,#sh3:checked~.dots [for=sh3] i,#sh4:checked~.dots [for=sh4] i,#sh5:checked~.dots [for=sh5] i,#sh6:checked~.dots [for=sh6] i{width:28px}
#sh1:checked~.dots [for=sh1] i::after,#sh2:checked~.dots [for=sh2] i::after,#sh3:checked~.dots [for=sh3] i::after,#sh4:checked~.dots [for=sh4] i::after,#sh5:checked~.dots [for=sh5] i::after,#sh6:checked~.dots [for=sh6] i::after{transform:none}
#sh0:not(:checked)~.dots .play{display:block}
.n1{--d:0s}.n2{--d:4s}.n3{--d:8s}.n4{--d:12s}.n5{--d:16s}.n6{--d:20s}
.dots [for=sh1]{--d:0s}.dots [for=sh2]{--d:4s}.dots [for=sh3]{--d:8s}.dots [for=sh4]{--d:12s}.dots [for=sh5]{--d:16s}.dots [for=sh6]{--d:20s}
.slide .t1{--o:.4s}.slide .t2{--o:.8s}.slide .t3{--o:1.2s}.slide .t4{--o:1.6s}.slide .t5{--o:2s}.slide .t6{--o:2.4s}.slide .t7{--o:2.8s}
@media (prefers-reduced-motion:no-preference){
#sh0:checked~.stage .slide{animation:sh-slide var(--cyc) linear infinite;animation-delay:calc(var(--d) - var(--cyc))}
#sh0:checked~.dots i{animation:sh-dot var(--cyc) linear infinite;animation-delay:calc(var(--d) - var(--cyc))}
#sh0:checked~.dots i::after{animation:sh-fill var(--cyc) linear infinite;animation-delay:inherit}
#sh0:checked~.stage .a{transform-box:fill-box;transform-origin:center;animation:var(--k,none) var(--cyc) ease-out infinite;animation-delay:calc(var(--d) + var(--o,0s) - var(--cyc))}
.slide .rise{--k:sh-rise}.slide .pop{--k:sh-pop}.slide .out{--k:sh-out}.slide .fade{--k:sh-fade}.slide .scroll{--k:sh-scroll}
.slide .grow{--k:sh-grow;--o:.2s}#sh0:checked~.stage .grow{transform-origin:left center}
.slide .fly{--k:sh-fly}.f1{--fx:-170px;--fy:-50px;--fr:-20deg}.f2{--fx:170px;--fy:-60px;--fr:18deg}.f3{--fx:-200px;--fy:10px;--fr:-12deg}.f4{--fx:200px;--fy:20px;--fr:14deg}.f5{--fx:-180px;--fy:90px;--fr:-16deg}
.slide .popup{--k:sh-popup}#sh0:checked~.stage .popup{transform-origin:0% 100%}
.slide .popup2{--k:sh-popup}#sh0:checked~.stage .popup2{transform-origin:100% 100%}
.slide .point{--k:sh-point}.slide .tap{--k:sh-tap}.slide .press{--k:sh-press}.slide .ripple{--k:sh-ripple}
#sh0:checked~.stage .spin{animation:sh-spin 14s linear infinite}
#sh0:checked~.stage .wave{animation:sh-wave 3s ease-in-out infinite alternate}
#sh0:checked~.stage .ping{animation:sh-ping 1.6s ease-out infinite}
.show:hover *,.show:hover *::after,.show:focus-within *,.show:focus-within *::after{animation-play-state:paused}
}
@keyframes sh-slide{0%{opacity:0;transform:translateX(16px)}1.6%,16.2%{opacity:1;transform:none}17.6%,100%{opacity:0;transform:translateX(-16px)}}
@keyframes sh-dot{0%,16.4%{width:28px}17.4%,100%{width:9px}}
@keyframes sh-fill{0%{transform:scaleX(0)}16.6%{transform:scaleX(1);opacity:1}17.4%,100%{transform:scaleX(1);opacity:0}}
@keyframes sh-rise{0%{opacity:0;transform:translateY(10px)}1.6%,80%{opacity:1;transform:none}81%,100%{opacity:0;transform:translateY(10px)}}
@keyframes sh-fade{0%{opacity:0}1.6%,80%{opacity:1}81%,100%{opacity:0}}
@keyframes sh-pop{0%{opacity:0;transform:scale(.4)}1.2%{opacity:1;transform:scale(1.15)}2%,80%{opacity:1;transform:none}81%,100%{opacity:0;transform:scale(.4)}}
@keyframes sh-out{0%{opacity:1}1%,82%{opacity:0}84%,100%{opacity:1}}
@keyframes sh-scroll{0%{transform:translateY(34px)}12%,80%{transform:none}81%,100%{transform:translateY(34px)}}
@keyframes sh-grow{0%{transform:scaleX(0)}11%,80%{transform:scaleX(1)}81%,100%{transform:scaleX(0)}}
@keyframes sh-fly{0%{opacity:0;transform:translate(var(--fx),var(--fy)) rotate(var(--fr))}.6%{opacity:1}2.4%{transform:translate(0,0) scale(1.06)}3%,80%{opacity:1;transform:none}81%,100%{opacity:0;transform:translate(var(--fx),var(--fy)) rotate(var(--fr))}}
@keyframes sh-popup{0%{opacity:0;transform:scale(.15)}2.4%{opacity:1;transform:scale(1.04)}3.2%,80%{opacity:1;transform:none}81%,100%{opacity:0;transform:scale(.15)}}
@keyframes sh-point{0%{opacity:0;transform:translate(70px,40px)}1%{opacity:1}4.5%,6%{transform:none}6.8%{transform:scale(.85)}7.6%,80%{opacity:1;transform:none}81%,100%{opacity:0}}
@keyframes sh-tap{0%{opacity:0;transform:translate(70px,110px)}1%{opacity:1}5%,6%{transform:none}7%{transform:scale(.88)}8%,80%{opacity:1;transform:none}81%,100%{opacity:0}}
@keyframes sh-press{0%,1%{transform:none}2%{transform:scale(.94)}3%,100%{transform:none}}
@keyframes sh-ripple{0%{opacity:0;transform:scale(.3)}.5%{opacity:.9}4%,100%{opacity:0;transform:scale(2.2)}}
@keyframes sh-spin{to{transform:rotate(360deg)}}
@keyframes sh-wave{from{transform:translateX(0)}to{transform:translateX(-40px)}}
@keyframes sh-ping{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(4)}}
@media (prefers-reduced-motion:reduce){
.hero2{grid-template-columns:1fr}
.stage{background:none;border:0;box-shadow:none;border-radius:0;overflow:visible}
.slides{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.slide{grid-area:auto;opacity:1;background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.dots{display:none}
}
@media (max-width:900px){.hero2{grid-template-columns:1fr;gap:32px;padding:40px 0 24px}}
@media (max-width:760px){.show .cap{padding:4px 16px 18px}.show .cap h3{font-size:19px}.hero2 .jerry img{width:72px;height:72px}}
.thumbs.small{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));max-width:820px}