/* SmartMy 2026-11 redesign. The look of the approved mock-ups (~/Downloads/smartmy-website-brief/design/reference),
   their stylesheet kept as it is so the pages match them; our own additions are in sm-pages.css. */
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(../fonts/inter-400.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(../fonts/inter-500.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(../fonts/inter-600.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:700;font-display:swap;src:url(../fonts/inter-700.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:800;font-display:swap;src:url(../fonts/inter-800.woff2) format("woff2")}
@font-face{font-family:Sora;font-weight:100 800;font-display:swap;src:url(../fonts/sora-var.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500 600;font-display:swap;src:url(../fonts/ibmplexmono-500-600.woff2) format("woff2")}

.scene{position:relative;margin-top:auto;height:56vh;min-height:340px}
.scene svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:100%}
.ln{fill:none;stroke:var(--line);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.bf{fill:var(--fill);stroke:var(--line);stroke-width:2;stroke-linejoin:round}
.win{fill:transparent;stroke:var(--line);stroke-width:1.6;transition:fill .8s}
.win.on{fill:#ffd166;stroke:#ffd166}
.sign rect{fill:none;stroke:var(--line);stroke-width:1.8}.sign text{fill:#fff;font:700 11px Inter,sans-serif;letter-spacing:.14em}
.cloud{fill:none;stroke:rgba(255,255,255,.5);stroke-width:2;animation:drift 60s linear infinite}
.cloud.c2{animation-duration:85s;animation-delay:-30s}
@keyframes drift{from{transform:translateX(-200px)}to{transform:translateX(1200px)}}
.sun{transition:opacity 1s}
.sunrays{animation:spin 40s linear infinite;transform-box:view-box;transform-origin:0 110px}
@keyframes spin{to{transform:rotate(360deg)}}
.stars circle{fill:#fff;animation:tw 3s ease-in-out infinite alternate}
@keyframes tw{from{opacity:.2}to{opacity:.9}}
.bus{animation:bus 16s linear infinite}
@keyframes bus{0%{transform:translateX(-180px)}100%{transform:translateX(1180px)}}
.car-x{animation:car 11s ease-in-out infinite}
@keyframes car{0%{transform:translateX(1100px)}55%{transform:translateX(905px)}75%{transform:translateX(905px)}100%{transform:translateX(905px);opacity:0}}
.wheel{animation:roll .6s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes roll{to{transform:rotate(360deg)}}
.person{animation:walk 22s linear infinite}
@keyframes walk{from{transform:translateX(560px)}to{transform:translateX(-60px)}}
.flag{animation:wave 1.6s ease-in-out infinite alternate;transform-origin:604px 92px}
@keyframes wave{to{transform:skewY(-8deg) scaleX(.92)}}
.dash{stroke-dasharray:22 18;animation:road 1.2s linear infinite}
@keyframes road{to{stroke-dashoffset:-40}}
.truck{animation:truck 21s linear infinite;animation-delay:-8s}@keyframes truck{0%{transform:translateX(2600px) scaleX(-1)}100%{transform:translateX(-300px) scaleX(-1)}}
.truck{transform-box:fill-box}
.arm{animation:arm 5s ease-in-out infinite;transform-box:fill-box;transform-origin:0% 50%}@keyframes arm{0%,40%{transform:rotate(0)}55%,80%{transform:rotate(-70deg)}100%{transform:rotate(0)}}
.jib{animation:jib 9s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:100% 0}@keyframes jib{to{transform:skewY(0) scaleX(.82)}}
.smoke circle{animation:smoke 4s ease-in-out infinite}.smoke circle:nth-child(2){animation-delay:-1.3s}.smoke circle:nth-child(3){animation-delay:-2.6s}@keyframes smoke{0%{opacity:0;transform:translateY(10px)}40%{opacity:1}100%{opacity:0;transform:translateY(-24px)}}
.flag2{animation:wave 1.4s ease-in-out infinite alternate}
.prods{max-width:640px}.prods span{font-size:11.5px;padding:4px 10px}
.bus{animation-duration:26s}@keyframes bus{0%{transform:translateX(-200px)}100%{transform:translateX(2600px)}}
/* notification cards */
.notes{position:absolute;inset:0;pointer-events:none;z-index:3}
.note{position:absolute;display:flex;gap:10px;align-items:center;padding:9px 12px 9px 9px;border-radius:12px;background:rgba(255,255,255,.96);color:#111c2d;box-shadow:0 12px 30px rgba(8,20,49,.35);font-size:13px;white-space:nowrap;transform:translate(-50%,10px) scale(.96);opacity:0;transition:opacity .45s,transform .45s}
.note.show{opacity:1;transform:translate(-50%,0) scale(1)}
.note i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;font:800 11px Sora,Inter,sans-serif;font-style:normal;flex:none}
.note b{display:block;font-weight:600}.note span{font-size:12px;color:#526b7a}
.note::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:2px}:root{--bg:#ffffff;--bg2:#f4f7fc;--sf:#ffffff;--sf2:#eef3fa;--ln:#e1e7ef;--ink:#0f1932;--ink2:#4c6372;--mut:#7b8893;--ac:#3778f5;--ac2:#00a1ff;--act:#2a63d6;--acs:#e8f0ff;--card:0 1px 2px rgba(15,25,50,.05),0 8px 24px rgba(15,25,50,.06);color-scheme:light}
:root[data-theme=dark]{--bg:#081431;--bg2:#0b1a3d;--sf:#0f1f47;--sf2:#152857;--ln:rgba(255,255,255,.09);--ink:#eef3ff;--ink2:#b3c0d3;--mut:#8394b8;--act:#7aa8ff;--acs:rgba(55,120,245,.16);--card:0 1px 2px rgba(0,0,0,.3);color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#081431;--bg2:#0b1a3d;--sf:#0f1f47;--sf2:#152857;--ln:rgba(255,255,255,.09);--ink:#eef3ff;--ink2:#b3c0d3;--mut:#8394b8;--act:#7aa8ff;--acs:rgba(55,120,245,.16);--card:0 1px 2px rgba(0,0,0,.3);color-scheme:dark}}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--act);text-decoration:none}a:hover{text-decoration:underline}
button,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ac2);outline-offset:2px}
.w{max-width:1200px;margin:0 auto;padding:0 32px}
.sora{font-family:Sora,Inter,sans-serif}
.eye{font:600 12px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--act)}
h2.t{font:700 clamp(30px,3.6vw,44px)/1.08 Sora,Inter,sans-serif;letter-spacing:-.035em;margin:12px 0 10px}
p.l{font-size:18px;color:var(--ink2);margin:0;max-width:640px}
section.s{padding:96px 0}
.btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 22px;border-radius:12px;font-weight:600;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn.p{background:#3778f5;color:#fff;box-shadow:0 8px 24px rgba(55,120,245,.35)}.btn.p:hover{background:#2a66e0}
.btn.g{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3)}.btn.g:hover{background:rgba(255,255,255,.18)}
.btn.o{background:var(--sf);color:var(--ink);border-color:var(--ln)}.btn.o:hover{background:var(--sf2)}
.wm{font:700 22px/1 Sora,Inter,sans-serif;letter-spacing:-.04em;display:inline-flex;align-items:flex-start;color:inherit}
.wm em{font-style:normal;background:linear-gradient(110deg,#00b6eb,#5c9bff 45%,#a98bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.wm svg{width:12px;height:12px;margin:-3px 0 0 1px}
/* nav */
.nav{position:absolute;top:0;left:0;right:0;z-index:20;color:#fff}
.nav .w{display:flex;align-items:center;gap:28px;height:72px}
.nav .links{display:flex;gap:4px}.nav .links a{color:rgba(255,255,255,.82);padding:8px 12px;border-radius:8px;font-weight:500;font-size:15px}.nav .links a:hover{background:rgba(255,255,255,.1);text-decoration:none;color:#fff}
.nav .sp{flex:1}.nav .si{color:#fff;font-weight:600;font-size:15px}
.nav .btn{height:40px;padding:0 16px;font-size:14px}
.mode{width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer}
.mode .sun2{display:none}:root[data-theme=dark] .mode .sun2{display:block}:root[data-theme=dark] .mode .moon2{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .mode .sun2{display:block}:root:not([data-theme=light]) .mode .moon2{display:none}}
/* hero */
.hero{position:relative;overflow:hidden;color:#fff;min-height:max(760px,100vh);display:flex;flex-direction:column;background:linear-gradient(180deg,var(--s1),var(--s2) 70%,var(--s3))}
.hero.day{--s1:#1b3aa8;--s2:#3a63d6;--s3:#5b7fe0;--line:rgba(255,255,255,.78);--fill:rgba(255,255,255,.06)}
.hero.dusk{--s1:#1d2a78;--s2:#5a3f9e;--s3:#e0806b;--line:rgba(255,255,255,.78);--fill:rgba(255,255,255,.05)}
.hero.night{--s1:#050d26;--s2:#0d1a48;--s3:#1d2f74;--line:rgba(190,210,255,.6);--fill:rgba(255,255,255,.03)}
.hc{position:relative;z-index:4;text-align:center;padding:140px 24px 0}
.hc .eye{color:rgba(255,255,255,.7)}
.hc h1{font:700 clamp(40px,5.6vw,72px)/1.02 Sora,Inter,sans-serif;letter-spacing:-.045em;margin:18px auto 18px;max-width:920px}
.hc h1 em{font-style:normal;background:linear-gradient(110deg,#5fd3ff,#a9c6ff 50%,#c9b3ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hc .lead{font-size:19px;color:rgba(255,255,255,.84);max-width:640px;margin:0 auto}
.hc .cta{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.pick{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:8px 8px 8px 18px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-weight:500}
.pick select{appearance:none;border:0;border-radius:999px;background:#fff;color:#0f1932;font-weight:600;padding:8px 34px 8px 14px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f1932' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.fits{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:14px auto 0;max-width:760px;min-height:34px}
.fits a{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 6px;border-radius:999px;background:#fff;color:#0f1932;font-weight:600;font-size:13px;box-shadow:0 6px 18px rgba(8,20,49,.25);animation:pop .35s both}
.fits a:hover{text-decoration:none;transform:translateY(-1px)}
.fits a i{width:22px;height:22px;border-radius:7px;color:#fff;display:grid;place-items:center;font:800 9px Sora,Inter,sans-serif;font-style:normal}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.96)}}
.hero .scene{position:relative;margin-top:auto;height:44vh;min-height:300px}
/* groups */
.gg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px}
.gt{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:var(--sf);border:1px solid var(--ln);box-shadow:var(--card);color:var(--ink);transition:transform .25s,box-shadow .25s}
.gt:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(15,25,50,.14);text-decoration:none}
.gt .pic{position:relative;height:170px;background:linear-gradient(180deg,#1b3aa8,#3a63d6 75%,#5b7fe0);--line:rgba(255,255,255,.8);--fill:rgba(255,255,255,.07);overflow:hidden}
:root[data-theme=dark] .gt .pic{background:linear-gradient(180deg,#071131,#13235c);--line:rgba(190,210,255,.62)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .gt .pic{background:linear-gradient(180deg,#071131,#13235c);--line:rgba(190,210,255,.62)}}
.gt .pic svg{position:absolute;inset:0;width:100%;height:100%}
.gt .pic b{position:absolute;top:14px;right:16px;font:700 13px "IBM Plex Mono",monospace;color:rgba(255,255,255,.75);letter-spacing:.1em}
.gt .bd{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.gt h3{margin:0;font:700 21px/1.2 Sora,Inter,sans-serif;letter-spacing:-.02em}
.gt p{margin:0;color:var(--ink2);font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--sf2);color:var(--ink2);display:inline-flex;align-items:center;gap:6px}
.chips span i{width:7px;height:7px;border-radius:9px}
.gt .go{margin-top:auto;padding-top:6px;color:var(--act);font-weight:600;font-size:14px}
/* joins */
.jn{background:var(--bg2)}
.jg{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px;align-items:center;margin-top:36px}
.jsel{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.jsel button{border:1px solid var(--ln);background:var(--sf);border-radius:999px;padding:8px 14px;font-weight:600;font-size:14px;cursor:pointer;color:var(--ink2)}
.jsel button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.orbit{position:relative;aspect-ratio:660/520;max-width:640px;width:100%;margin:0 auto}
.orbit svg{width:100%;height:100%}
.orbit .lk{stroke:var(--ln);stroke-width:1.5;fill:none;transition:stroke .3s,stroke-width .3s}
.orbit .lk.on{stroke:url(#lg);stroke-width:2.6}
.orbit .nd circle{fill:var(--sf);stroke:var(--ln);stroke-width:1.5;transition:all .3s}
.orbit .nd text{font:600 13px Inter,sans-serif;fill:var(--mut);transition:fill .3s}
.orbit .nd.on circle{stroke:var(--c);fill:var(--c)}.orbit .nd.on text{fill:var(--ink)}
.orbit .nd.me circle{fill:url(#lg);stroke:none}.orbit .nd.me text{fill:#fff;font-size:13px;font-weight:700}
.orbit .pulse{fill:none;stroke:#3778f5;stroke-width:2;opacity:.6;animation:pl 2.4s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pl{to{transform:scale(1.9);opacity:0}}
.jl{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.jr{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;padding:11px 12px;border-radius:14px;background:var(--sf);border:1px solid var(--ln);animation:pop .35s both}
.jr i{grid-row:span 2;width:32px;height:32px;border-radius:10px;color:#fff;display:grid;place-items:center;font:800 11px Sora,Inter,sans-serif;font-style:normal;align-self:center}
.jr b{font-size:14px}.jr span{font-size:13px;line-height:1.35;color:var(--ink2)}
.jh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}.jh b{font:700 20px Sora,Inter,sans-serif;letter-spacing:-.02em}.jh span{color:var(--mut);font-size:14px}
/* story */
.tabs{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:var(--sf2);margin-top:26px}
.tabs button{border:0;background:none;padding:9px 16px;border-radius:9px;font-weight:600;font-size:14px;cursor:pointer;color:var(--ink2)}
.tabs button[aria-pressed=true]{background:var(--sf);color:var(--ink);box-shadow:var(--card)}
.tl{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:34px;position:relative}
.tl::before{content:"";position:absolute;left:24px;right:24px;top:21px;height:2px;background:linear-gradient(90deg,#00b6eb,#3778f5,#824ae4);opacity:.35}
.st{position:relative;animation:pop .4s both}
.st .dot{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;font:800 12px Sora,Inter,sans-serif;position:relative;z-index:1;box-shadow:0 0 0 6px var(--bg)}
.st small{display:block;margin-top:16px;font:600 11px "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.st h4{margin:4px 0 6px;font:700 18px/1.25 Sora,Inter,sans-serif;letter-spacing:-.02em}
.st p{margin:0;color:var(--ink2);font-size:14.5px}
.st .by{display:inline-block;margin-top:10px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--sf2);color:var(--ink2)}
/* rules */
.rg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.rc{padding:24px;border-radius:18px;background:var(--sf);border:1px solid var(--ln)}
.rc .ic{width:44px;height:44px;border-radius:12px;background:var(--acs);color:var(--act);display:grid;place-items:center;margin-bottom:16px}
.rc h4{margin:0 0 6px;font:700 18px Sora,Inter,sans-serif;letter-spacing:-.02em}.rc p{margin:0;color:var(--ink2);font-size:15px}
/* faq */
.fq{max-width:820px;margin:36px auto 0}
.fq details{border-bottom:1px solid var(--ln);padding:4px 0}
.fq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:18px 0;font-weight:600;font-size:17px}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"+";font-size:22px;line-height:1;color:var(--mut);transition:transform .2s}
.fq details[open] summary::after{transform:rotate(45deg)}
.fq details p{margin:0 0 18px;color:var(--ink2);max-width:700px}
/* cta */
.cta2{position:relative;overflow:hidden;border-radius:28px;padding:64px 40px;text-align:center;color:#fff;background:linear-gradient(120deg,#1b3aa8,#3778f5 50%,#6a46d8)}
.cta2::after{content:"";position:absolute;inset:auto -10% -60% -10%;height:120%;background:radial-gradient(closest-side,rgba(0,182,235,.35),transparent);pointer-events:none}
.cta2 h2{font:700 clamp(30px,3.6vw,46px)/1.05 Sora,Inter,sans-serif;letter-spacing:-.035em;margin:0 0 12px;position:relative;z-index:1}
.cta2 p{margin:0 auto;max-width:560px;color:rgba(255,255,255,.85);font-size:18px;position:relative;z-index:1}
.cta2 .cta{display:flex;gap:12px;justify-content:center;margin-top:28px;position:relative;z-index:1}
.cta2 .btn.p{background:#fff;color:#1b3aa8;box-shadow:none}
/* footer */
footer{border-top:1px solid var(--ln);padding:56px 0 40px;margin-top:96px;font-size:14px}
footer .fg{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
footer h5{margin:0 0 12px;font:600 11px "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}footer ul a{color:var(--ink2)}
footer .wm{color:var(--ink)}
footer .cp{margin-top:40px;color:var(--mut);font-size:13px}
.rev{opacity:1;transform:none;transition:opacity .6s,transform .6s}.js .rev.hid{opacity:.001;transform:translateY(14px)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:980px){.nav .links{display:none}.gg,.rg{grid-template-columns:repeat(2,minmax(0,1fr))}.jg{grid-template-columns:1fr}.tl{grid-template-columns:1fr;gap:22px}.tl::before{left:21px;right:auto;top:20px;bottom:20px;width:2px;height:auto;background:linear-gradient(180deg,#00b6eb,#3778f5,#824ae4)}.st{display:grid;grid-template-columns:44px 1fr;gap:0 16px}.st small{margin-top:0}.st>div:last-child{grid-column:2}footer .fg{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.jl{grid-template-columns:1fr}.w{padding:0 18px}.nav .si,.nav .btn.p{display:none}.hc{padding-top:110px}.hc .lead{font-size:16px}.hero{min-height:auto}.hero .scene{height:220px;min-height:0}.gg,.rg{grid-template-columns:1fr}section.s{padding:64px 0}.pick{flex-wrap:wrap;justify-content:center;border-radius:18px}.cta2{padding:44px 20px}.cta2 .cta{flex-direction:column}.notes{display:none}}
.hd2{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.more{font-weight:600;white-space:nowrap;margin-bottom:12px}
.ftr{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 8px;position:sticky;top:0;z-index:5;padding:12px 0;background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ftr button{border:1px solid var(--ln);background:var(--sf);color:var(--ink2);border-radius:999px;padding:8px 14px;font-weight:600;font-size:14px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.ftr button small{font-size:11px;color:var(--mut);font-weight:600}
.ftr button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}.ftr button[aria-pressed=true] small{color:inherit;opacity:.65}
.grp{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;padding:28px 0;border-top:1px solid var(--ln)}
.grp:first-child{border-top:0}
.gh{position:sticky;top:76px;align-self:start}
.gpic{height:120px;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#1b3aa8,#3a63d6 75%,#5b7fe0);--line:rgba(255,255,255,.8);--fill:rgba(255,255,255,.07);margin-bottom:14px}
:root[data-theme=dark] .gpic{background:linear-gradient(180deg,#071131,#13235c);--line:rgba(190,210,255,.62)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .gpic{background:linear-gradient(180deg,#071131,#13235c);--line:rgba(190,210,255,.62)}}
.gpic svg{width:100%;height:100%;display:block}
.gn{font:600 11px "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--act)}
.gh h3{margin:6px 0 6px;font:700 22px/1.2 Sora,Inter,sans-serif;letter-spacing:-.02em}.gh p{margin:0;color:var(--ink2);font-size:15px}
.pg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.pg.solo{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:16px}
.pc2{position:relative;display:flex;flex-direction:column;gap:8px;padding:18px 18px 16px;border-radius:16px;background:var(--sf);border:1px solid var(--ln);color:var(--ink);transition:transform .2s,box-shadow .2s,border-color .2s;animation:pop .35s both}
.pc2:hover{text-decoration:none;transform:translateY(-3px);box-shadow:0 16px 40px rgba(15,25,50,.12);border-color:color-mix(in srgb,var(--act) 40%,var(--ln))}
.pc2:target{border-color:var(--act);box-shadow:0 0 0 3px var(--acs)}
.lg2{font:700 15px Sora,Inter,sans-serif;letter-spacing:-.03em;color:var(--ink)}.lg2 em{font-style:normal;background:linear-gradient(110deg,#00b6eb,#3778f5 45%,#824ae4);-webkit-background-clip:text;background-clip:text;color:transparent}.lg2 b{font-weight:500;color:var(--ink2)}
.pc2 .dot{position:absolute;top:20px;right:18px;width:10px;height:10px;border-radius:9px}
.pc2 h3{margin:2px 0 0;font:700 17px/1.3 Sora,Inter,sans-serif;letter-spacing:-.015em}
.pc2 p{margin:0;font-size:13.5px;color:var(--mut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc2 .url{margin-top:auto;padding-top:6px;font:600 12.5px "IBM Plex Mono",monospace;color:var(--act)}
.note2{color:var(--ink2);margin:18px 0 0}
.orbit{aspect-ratio:700/560!important;max-width:660px!important}
.orbit .nd{cursor:pointer}.orbit .nd:not(.me):hover circle{stroke:var(--act)}
.orbit .nd text.n{font:600 11px "IBM Plex Mono",monospace;fill:rgba(255,255,255,.8);letter-spacing:.08em}
.jr b{font:600 12px "IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.sub{margin:18px 0 0;font-weight:600;font-size:17px}
.tl{grid-template-columns:repeat(var(--n,5),minmax(0,1fr))!important}
.st small{letter-spacing:.1em!important}
.rg2{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;margin-top:40px;align-items:start}
.rg2 .rg{margin:0;grid-template-columns:repeat(2,minmax(0,1fr))}
.rc{padding:20px}.rc .ic{width:38px;height:38px;margin-bottom:12px}.rc h4{font-size:16px}.rc p{font-size:14px}
.one{position:sticky;top:90px;border-radius:20px;padding:26px;color:#fff;background:linear-gradient(160deg,#3778f5,#5a4fe0 60%,#824ae4);display:flex;flex-direction:column}
.one h3{margin:10px 0 8px;font:700 26px Sora,Inter,sans-serif;letter-spacing:-.03em}.one p{margin:0;color:rgba(255,255,255,.85);font-size:15px}
.steps2{list-style:none;margin:0;padding:22px 0 0;display:grid;gap:8px}
.steps2 li{padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.14);font-weight:600}.steps2 li small{display:block;font-weight:500;opacity:.75;font-size:12px}
.steps2 li.on{background:#fff;color:#1b3aa8}
.gtk{display:grid;grid-template-columns:320px minmax(0,1fr);gap:24px;margin-top:16px;padding:24px;border-radius:20px;background:var(--sf);border:1px solid var(--ln)}
.gtk h3{margin:0 0 6px;font:700 20px Sora,Inter,sans-serif;letter-spacing:-.02em}.gtk p{margin:0;color:var(--ink2);font-size:14.5px}
.gtk ul{list-style:none;margin:0;padding:0;display:grid}
.gtk li{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:12px 0;border-top:1px solid var(--ln)}.gtk li:first-child{border-top:0;padding-top:0}
.gtk li b{font-size:15px}.gtk li span{grid-column:1;font-size:14px;color:var(--ink2)}
.gtk .tg{grid-row:1/3;grid-column:2;align-self:center;font:600 11px "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;font-style:normal;padding:4px 10px;border-radius:999px}
.tg.ip{background:var(--acs);color:var(--act)}.tg.rq{background:rgba(130,74,228,.14);color:#8b5cf6}.tg.io{background:rgba(194,124,0,.14);color:#b07000}
.fpc ul{grid-template-columns:1fr 1fr;column-gap:20px}
footer .fg{grid-template-columns:1.2fr 1.6fr .8fr .7fr!important}
@media (max-width:1100px){.grp{grid-template-columns:1fr}.gh{position:static;display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:center}.gpic{margin:0}.pg.solo{grid-template-columns:repeat(3,minmax(0,1fr))}.rg2{grid-template-columns:1fr}.gtk{grid-template-columns:1fr}}
@media (max-width:980px){.tl{grid-template-columns:1fr!important}.pg,.pg.solo{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.gh{grid-template-columns:1fr}.pg,.pg.solo,.rg2 .rg{grid-template-columns:1fr}.ftr{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.ftr button{flex:none}.fpc ul{grid-template-columns:1fr}footer .fg{grid-template-columns:1fr!important}}
.jg{align-items:start!important}
.jl{grid-template-columns:1fr!important;gap:0!important;border:1px solid var(--ln);border-radius:16px;background:var(--sf);overflow:hidden}
.jr{border:0!important;border-radius:0!important;border-top:1px solid var(--ln)!important;background:none!important;grid-template-columns:30px 110px 1fr!important;align-items:center;padding:12px 16px!important}
.jr:first-child{border-top:0!important}
.jr i{grid-row:auto!important;width:28px!important;height:28px!important;font-size:9px!important;border-radius:8px!important}
.jr span{font-size:13.5px!important}
@media (max-width:640px){.jr{grid-template-columns:28px 1fr!important}.jr span{grid-column:2}}

/* hero fits the screen: town always visible */
.hero{min-height:0!important;height:100svh;max-height:1100px;min-height:640px!important}
.hc{padding-top:clamp(92px,12vh,140px)!important}
.hc h1{font-size:clamp(38px,5.2vw,68px)!important;margin:14px auto 14px!important}
.hero .scene{flex:1 1 auto;height:auto!important;min-height:200px!important;margin-top:8px}
.fits{min-height:0!important}
@media (max-height:820px){.hc .lead{display:none}}
/* custom place menu */
.pick{position:relative;z-index:30;padding:6px 6px 6px 18px!important}
.pbtn{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 14px 0 16px;border:0;border-radius:999px;background:#fff;color:#0f1932;font:600 15px Inter,sans-serif;cursor:pointer;min-width:230px;justify-content:space-between;transition:box-shadow .2s}
.pbtn:not(.set) span{color:#6b7a90;font-weight:500}
.pbtn:hover{box-shadow:0 0 0 4px rgba(255,255,255,.25)}
.pick.open .pbtn svg{transform:rotate(180deg)}.pbtn svg{transition:transform .2s;flex:none}
.pmenu{position:absolute;left:50%;top:calc(100% + 10px);width:360px;max-height:min(440px,60vh);overflow:auto;margin:0;padding:6px;list-style:none;text-align:left;
 background:rgba(255,255,255,.98);color:#0f1932;border-radius:18px;box-shadow:0 24px 60px rgba(8,20,49,.35),0 0 0 1px rgba(15,25,50,.06);
 opacity:0;visibility:hidden;transform:translate(-50%,-6px) scale(.98);transform-origin:top center;transition:opacity .16s,transform .16s,visibility .16s;outline:0}
.pick.open .pmenu{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}
.pmenu li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;cursor:pointer}
.pmenu li.act{background:#eef3ff}
.pi2{width:38px;height:38px;border-radius:11px;background:#eef3fa;color:#2a63d6;display:grid;place-items:center;flex:none}
.pmenu li.act .pi2,.pmenu li[aria-selected=true] .pi2{background:#3778f5;color:#fff}
.pt2{flex:1;min-width:0}.pt2 b{display:block;font-size:14.5px}
.dots{display:flex;align-items:center;gap:3px;margin-top:4px}.dots i{width:8px;height:8px;border-radius:9px}.dots em{font-style:normal;font-size:12px;color:#7b8893;margin-left:6px}
.pmenu .tick{color:#3778f5;opacity:0}.pmenu li[aria-selected=true] .tick{opacity:1}
:root[data-theme=dark] .pmenu{background:rgba(16,28,64,.98);color:#eef3ff;box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}
:root[data-theme=dark] .pmenu li.act{background:rgba(55,120,245,.18)}:root[data-theme=dark] .pi2{background:rgba(255,255,255,.07);color:#7aa8ff}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .pmenu{background:rgba(16,28,64,.98);color:#eef3ff;box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}:root:not([data-theme=light]) .pmenu li.act{background:rgba(55,120,245,.18)}:root:not([data-theme=light]) .pi2{background:rgba(255,255,255,.07);color:#7aa8ff}}
@media (max-width:640px){.pbtn{min-width:0;flex:1}.pmenu{width:min(340px,calc(100vw - 24px))}}
.pmenu{width:540px;display:grid;grid-template-columns:1fr 1fr;gap:2px;max-height:none}
.pmenu li{padding:9px 10px}.pi2{width:34px;height:34px;border-radius:10px}.pt2 b{font-size:14px}
@media (max-width:640px){.pmenu{grid-template-columns:1fr;max-height:min(420px,55vh);overflow:auto}}
.pick.open .pmenu{transition:opacity .16s,transform .16s,visibility 0s}

/* group pictures */
.gpic{position:relative}
.gpic .bd2{opacity:0;transform:translateY(24px);transform-box:fill-box}
.gpic.live .bd2,.gpic[data-done] .bd2{opacity:1;transform:none;transition:opacity .6s calc(var(--d)*.09s),transform .7s cubic-bezier(.2,.9,.25,1.2) calc(var(--d)*.09s)}
.gpic .win{transition:fill .7s,stroke .7s}
.gpic .mbus{opacity:0}
.gpic.live .mbus{opacity:1;animation:mbus 9s linear infinite}
@keyframes mbus{from{transform:translateX(-90px)}to{transform:translateX(var(--w))}}
.grp:hover .gpic .win{transition-duration:.25s}
.gh:hover .gpic{box-shadow:0 14px 34px rgba(27,58,168,.28)}
.gpic{transition:box-shadow .3s}
.gpic .smoke circle{animation:smoke 4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.gpic .bd2{opacity:1;transform:none}.gpic .mbus{display:none}}
.gh{top:130px!important}
/* no grey bands in light mode: white page, faint brand glow instead */
:root{--bg2:#ffffff;--sf2:#eef4ff}
:root:not([data-theme=dark]) .jn{background:
 radial-gradient(900px 420px at 12% 0%,rgba(0,182,235,.07),transparent 70%),
 radial-gradient(900px 420px at 92% 100%,rgba(130,74,228,.07),transparent 70%),#fff;
 border-top:1px solid #eaeef5;border-bottom:1px solid #eaeef5}
:root:not([data-theme=dark]) .rc,:root:not([data-theme=dark]) .gtk,:root:not([data-theme=dark]) .jl{box-shadow:0 1px 2px rgba(15,25,50,.04),0 10px 30px rgba(55,120,245,.06);border-color:#e6ecf6}
:root:not([data-theme=dark]) .rc .ic{background:linear-gradient(135deg,#e6f6ff,#efe8ff);color:#3778f5}

/* joins, redesigned */
.jpanel{margin-top:32px!important;gap:0!important;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)!important;border-radius:24px;overflow:hidden;background:var(--sf);border:1px solid var(--ln);box-shadow:0 1px 2px rgba(15,25,50,.04),0 20px 50px rgba(55,120,245,.08);align-items:stretch!important}
.jpanel .orbit{max-width:none!important;aspect-ratio:auto!important;position:relative;padding:20px 10px;background:radial-gradient(60% 60% at 50% 50%,rgba(55,120,245,.10),transparent 70%),linear-gradient(160deg,#f3f8ff,#f6f1ff);display:flex;align-items:center;justify-content:center}
:root[data-theme=dark] .jpanel .orbit{background:radial-gradient(60% 60% at 50% 50%,rgba(55,120,245,.22),transparent 70%),linear-gradient(160deg,#0b1a44,#160f3d)}
.jpanel .orbit svg{width:100%;max-width:600px;height:auto}
.hint2{position:absolute;left:0;right:0;bottom:14px;margin:0;text-align:center;font-size:12.5px;color:var(--mut)}
.orbit .ring{fill:none;stroke:color-mix(in srgb,var(--act) 18%,transparent);stroke-width:1.2;stroke-dasharray:3 6}
.orbit .ring.r2{stroke-dasharray:none;stroke:color-mix(in srgb,var(--act) 10%,transparent)}
.orbit .lk.on{stroke:var(--c)!important;stroke-width:2.4!important;fill:none;stroke-dasharray:6 6;animation:flow 1.2s linear infinite;opacity:.85}
@keyframes flow{to{stroke-dashoffset:-24}}
.orbit .nd .pt{fill:var(--sf)!important;stroke:color-mix(in srgb,var(--ink) 25%,transparent)!important;stroke-width:1.5}
.orbit .nd.on .pt{fill:var(--c)!important;stroke:#fff!important;stroke-width:2.5!important}
.orbit .nd .halo{fill:var(--c);opacity:.15}
.orbit .nd text{font:600 13px Inter,sans-serif;fill:var(--mut)}
.orbit .nd.on text{fill:var(--ink);font-weight:700}
.orbit .nd.off:hover text{fill:var(--act)}.orbit .nd.off:hover .pt{stroke:var(--act)!important}
.orbit .core .ct{font:700 17px Sora,Inter,sans-serif;fill:#fff}
.orbit .core .cn{font:600 10.5px "IBM Plex Mono",monospace;fill:rgba(255,255,255,.85);letter-spacing:.12em}
.jpanel>div:last-child{padding:28px 28px 24px;display:flex;flex-direction:column;min-width:0}
.jh{align-items:center!important;margin-bottom:14px!important}
.jh b{display:flex;align-items:center;gap:10px;font:700 20px Sora,Inter,sans-serif}
.jh b i{width:30px;height:30px;border-radius:9px;color:#fff;display:grid;place-items:center;font:800 10px Sora,Inter,sans-serif;font-style:normal}
.jl{border:0!important;box-shadow:none!important;border-radius:0!important;background:none!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;overflow:visible!important}
.jr{display:flex!important;gap:12px!important;align-items:flex-start!important;padding:14px!important;border:1px solid var(--ln)!important;border-radius:14px!important;background:var(--sf)!important;position:relative;transition:transform .2s,box-shadow .2s}
.jr::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--c)}
.jr:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,25,50,.08)}
.jr i{flex:none;width:32px!important;height:32px!important;border-radius:9px!important;background:var(--c);color:#fff;display:grid;place-items:center;font:800 10px Sora,Inter,sans-serif!important;font-style:normal}
.jr b{display:block;font:700 14px Inter,sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:var(--c)!important;margin-bottom:2px}
.jr span{font-size:13px!important;line-height:1.45;color:var(--ink2)}
@media (max-width:980px){.jpanel{grid-template-columns:1fr!important}}
@media (max-width:640px){.jl{grid-template-columns:1fr!important}.jpanel>div:last-child{padding:20px 16px}}
.jl{grid-template-columns:1fr!important;gap:6px!important}
.jr{padding:10px 12px 10px 14px!important;align-items:center!important;border-radius:12px!important}
.jr::before{top:10px;bottom:10px}
.jr>div{min-width:0}
.jr b{font-size:13.5px!important;margin:0!important;line-height:1.3}
.jr span{display:block;font-size:13px!important;line-height:1.4!important}
.jr i{width:30px!important;height:30px!important}
.jpanel .orbit svg{max-width:640px}
.jpanel .orbit{padding:10px 0 34px}
/* ===== light mode, with more colour ===== */
:root:not([data-theme=dark]){--ink2:#3f5466}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:-46px;position:relative;z-index:6;background:var(--sf);border-radius:20px;box-shadow:0 20px 50px rgba(27,58,168,.14),0 0 0 1px rgba(55,120,245,.08);padding:0 !important;max-width:1136px}
.sb{padding:24px 26px;border-left:1px solid var(--ln)}.sb:first-child{border-left:0}
.sb b{display:block;font:800 40px/1 Sora,Inter,sans-serif;letter-spacing:-.04em;background:linear-gradient(110deg,#00b6eb,#3778f5 50%,#824ae4);-webkit-background-clip:text;background-clip:text;color:transparent}
.sb span{display:block;margin-top:6px;color:var(--ink2);font-size:14px}
:root:not([data-theme=dark]) #products{background:radial-gradient(700px 360px at 100% 0,rgba(130,74,228,.06),transparent 70%),radial-gradient(700px 360px at 0 40%,rgba(0,182,235,.06),transparent 70%)}
.pc2{overflow:hidden}
.pc2::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--c);opacity:.0;transition:opacity .2s}
.pc2:hover::before{opacity:1}
.pc2:hover{border-color:color-mix(in srgb,var(--c) 40%,var(--ln))!important;box-shadow:0 18px 40px color-mix(in srgb,var(--c) 18%,transparent)!important}
.ptop{display:flex;align-items:center;gap:10px}
.badge{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;font:800 11px Sora,Inter,sans-serif;font-style:normal;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 75%,#fff),var(--c));box-shadow:0 6px 14px color-mix(in srgb,var(--c) 35%,transparent);flex:none}
.ptop .arr{margin-left:auto;width:28px;height:28px;border-radius:99px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 10%,transparent);transition:transform .2s}
.pc2:hover .arr{transform:translateX(3px);background:var(--c);color:#fff}
.pc2 .url{color:var(--c)!important}
.pc2 p{color:var(--ink2)!important}
.ftr button[aria-pressed=true]{background:linear-gradient(110deg,#3778f5,#6a46d8)!important;border-color:transparent!important;color:#fff!important}
.gh .gn{background:linear-gradient(110deg,#00b6eb,#824ae4);-webkit-background-clip:text;background-clip:text;color:transparent}
/* story: coloured panel */
:root:not([data-theme=dark]) #story{background:linear-gradient(180deg,#fff,#f5f9ff 30%,#f7f3ff 80%,#fff)}
.st>div:last-child{background:var(--sf);border-radius:16px;padding:16px;margin-top:14px;box-shadow:0 1px 2px rgba(15,25,50,.04),0 10px 28px rgba(55,120,245,.08);border:1px solid #e9eef8}
:root[data-theme=dark] .st>div:last-child{border-color:var(--ln);box-shadow:none}
.st .dot{box-shadow:0 0 0 6px color-mix(in srgb,var(--bg) 100%,transparent),0 8px 18px rgba(55,120,245,.25)!important}
.tabs{background:#fff!important;box-shadow:0 0 0 1px #e6ecf6}
:root[data-theme=dark] .tabs{background:var(--sf2)!important;box-shadow:none}
.tabs button[aria-pressed=true]{background:linear-gradient(110deg,#3778f5,#6a46d8)!important;color:#fff!important}
/* rules: each icon its own colour */
.rc .ic{background:color-mix(in srgb,var(--c) 12%,transparent)!important;color:var(--c)!important}
.rc{transition:transform .2s,box-shadow .2s}.rc:hover{transform:translateY(-3px);box-shadow:0 16px 36px color-mix(in srgb,var(--c) 16%,transparent)!important}

/* faq: two columns, cards */
.fqw{display:grid;grid-template-columns:380px minmax(0,1fr);gap:48px;align-items:start}
.fql{position:sticky;top:90px}.fql .t{margin-bottom:10px}
.ask{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px;padding:16px;border-radius:18px;background:linear-gradient(135deg,#eef6ff,#f4efff);border:1px solid #e3e9fb}
:root[data-theme=dark] .ask{background:var(--sf);border-color:var(--ln)}
.ask .av3{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#00b6eb,#824ae4);color:#fff;display:grid;place-items:center;font:800 13px Sora,Inter,sans-serif}
.ask div{flex:1;min-width:140px}.ask b{display:block}.ask span{font-size:13px;color:var(--ink2)}.ask .btn{height:40px}
.fq{margin:0!important;max-width:none!important;display:grid;gap:10px}
.fq details{border:1px solid var(--ln)!important;border-radius:16px;padding:2px 20px!important;background:var(--sf);transition:box-shadow .2s,border-color .2s}
.fq details[open]{border-color:color-mix(in srgb,#3778f5 35%,var(--ln))!important;box-shadow:0 14px 34px rgba(55,120,245,.10)}
.fq summary::after{width:28px;height:28px;border-radius:99px;display:grid;place-items:center;background:var(--acs);color:var(--act)!important;font-size:18px!important;flex:none}
.cta2{box-shadow:0 30px 70px rgba(55,120,245,.30)}
footer{background:linear-gradient(180deg,#fff,#f6f9ff)}
:root[data-theme=dark] footer{background:none}
@media (max-width:980px){.stats{grid-template-columns:1fr 1fr;margin:-30px 16px 0}.sb:nth-child(3){border-left:0}.sb:nth-child(n+3){border-top:1px solid var(--ln)}.fqw{grid-template-columns:1fr}.fql{position:static}}
@media (max-width:640px){.sb b{font-size:30px}.sb{padding:16px}}

footer{position:relative;padding-top:0!important;border-top:0!important;margin-top:120px!important}
.ftown{height:120px;margin-bottom:48px;--line:rgba(55,120,245,.35);--fill:rgba(55,120,245,.03);border-bottom:1px solid rgba(55,120,245,.25);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
:root[data-theme=dark] .ftown{--line:rgba(190,210,255,.25)}
.ftown svg{width:100%;height:100%;display:block}.ftown .sign text{fill:rgba(55,120,245,.55)}.ftown .win.on{fill:#ffd166;stroke:#ffd166}

.stats{margin:8px auto 0!important;box-shadow:0 1px 2px rgba(15,25,50,.04),0 16px 40px rgba(55,120,245,.10),0 0 0 1px rgba(55,120,245,.08)!important}
:root:not([data-theme=dark]) .jn{border:0!important;background:
 linear-gradient(180deg,#fff 0,rgba(255,255,255,0) 160px,rgba(255,255,255,0) calc(100% - 160px),#fff 100%),
 radial-gradient(900px 500px at 10% 30%,rgba(0,182,235,.07),transparent 70%),
 radial-gradient(900px 500px at 92% 70%,rgba(130,74,228,.07),transparent 70%),#fff!important}
:root:not([data-theme=dark]) #story{background:linear-gradient(180deg,#fff 0,#f6f9ff 22%,#f7f4ff 78%,#fff 100%)!important}
:root:not([data-theme=dark]) #products{background:radial-gradient(700px 360px at 100% 10%,rgba(130,74,228,.05),transparent 70%),radial-gradient(700px 360px at 0 45%,rgba(0,182,235,.05),transparent 70%)!important}
@media (max-width:980px){.stats{margin:8px 16px 0!important}}

/* ===== joins v3: picker + flow ===== */
.jx{margin-top:30px;border-radius:24px;background:var(--sf);border:1px solid var(--ln);box-shadow:0 1px 2px rgba(15,25,50,.04),0 20px 50px rgba(55,120,245,.08);overflow:hidden}
.jpick{display:flex;gap:4px;padding:14px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--ln);background:linear-gradient(180deg,color-mix(in srgb,var(--acs) 60%,var(--sf)),var(--sf))}
.jpick button{flex:1 0 74px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 8px;border:0;border-radius:14px;background:none;cursor:pointer;position:relative;color:var(--ink2);font:600 12px Inter,sans-serif;transition:background .2s,opacity .2s}
.jpick button:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.jpick button em{position:absolute;top:4px;right:10px;font:700 10px Inter;font-style:normal;color:var(--mut)}
.jpick button[aria-selected=true]{background:var(--sf);box-shadow:0 6px 18px rgba(15,25,50,.10),0 0 0 1.5px var(--act);color:var(--ink)}
.jpick button:not([aria-selected=true]):not(.lk){opacity:.45}
.app{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;font:800 11px Sora,Inter,sans-serif;font-style:normal;background:linear-gradient(140deg,color-mix(in srgb,var(--c) 65%,#fff),var(--c) 55%,color-mix(in srgb,var(--c) 80%,#000));box-shadow:0 4px 10px color-mix(in srgb,var(--c) 30%,transparent),inset 0 1px 0 rgba(255,255,255,.35);flex:none}
.app.big{width:76px;height:76px;border-radius:22px;font-size:20px;box-shadow:0 14px 30px color-mix(in srgb,var(--c) 40%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
.jflow{position:relative;display:grid;grid-template-columns:280px 140px minmax(0,1fr);padding:28px 28px 20px}
.jlines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ln2{fill:none;stroke-width:2;opacity:.75;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .7s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(var(--i)*.05s)}
@keyframes draw{to{stroke-dashoffset:0}}
.pk{filter:drop-shadow(0 0 4px currentColor)}
.jsrc{align-self:center;position:relative;z-index:1}
.srcc{padding:24px 22px;border-radius:22px;background:radial-gradient(120% 100% at 0 0,color-mix(in srgb,var(--c) 14%,var(--sf)),var(--sf) 70%);border:1px solid color-mix(in srgb,var(--c) 25%,var(--ln));animation:pop .35s both}
.srcc b{display:block;margin-top:16px;font:700 22px Sora,Inter,sans-serif;letter-spacing:-.02em}
.srcc span{display:block;margin-top:4px;color:var(--ink2);font-size:14px}
.srcc .cnt{margin-top:16px;display:inline-flex;align-items:baseline;gap:6px;padding:6px 12px;border-radius:999px;background:var(--sf);border:1px solid var(--ln);font-size:13px;color:var(--ink2)}
.srcc .cnt strong{font:800 18px Sora,Inter,sans-serif;color:var(--c)}
.jlist{display:grid;gap:8px;position:relative;z-index:1}
.jr2{display:flex;gap:12px;align-items:center;padding:10px 14px 10px 10px;border-radius:14px;background:var(--sf);border:1px solid var(--ln);animation:slide .45s both;animation-delay:calc(var(--i)*.05s);transition:border-color .2s,box-shadow .2s}
.jr2:hover{border-color:color-mix(in srgb,var(--c) 45%,var(--ln));box-shadow:0 10px 24px color-mix(in srgb,var(--c) 14%,transparent)}
@keyframes slide{from{opacity:0;transform:translateX(16px)}}
.jr2 .app{width:32px;height:32px;border-radius:9px;font-size:10px}
.jr2 b{display:block;font-size:14px;color:var(--c)}.jr2 span{display:block;font-size:13px;line-height:1.4;color:var(--ink2)}
.jnone{margin:0;padding:14px 28px 22px;font-size:13px;color:var(--mut);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.jnone button{border:1px dashed var(--ln);background:none;border-radius:999px;padding:3px 10px;font:600 12px Inter;color:var(--ink2);cursor:pointer}.jnone button:hover{border-color:var(--act);color:var(--act)}
@media (max-width:980px){.jflow{grid-template-columns:1fr;gap:16px}.jgap,.jlines{display:none}}
@media (prefers-reduced-motion:reduce){.pk{display:none}}

/* footer town alive */
.ftown .fbus{animation:fbus var(--t) linear infinite;animation-play-state:paused}
.ftown .fbus.b2{animation-direction:reverse;animation-delay:-12s}
.ftown .fwalk{animation:fwalk 60s linear infinite;animation-play-state:paused}
.ftown.live .fbus,.ftown.live .fwalk,.ftown.live .fdash{animation-play-state:running}
.ftown .fdash{stroke-dasharray:18 14;animation:road 1.4s linear infinite;animation-play-state:paused}
@keyframes fbus{from{transform:translateX(-120px)}to{transform:translateX(var(--w))}}
@keyframes fwalk{from{transform:translateX(var(--w))}to{transform:translateX(-40px)}}
.ftown .win{transition:fill .6s,stroke .6s}
.ftown .arm{animation:arm 5s ease-in-out infinite;transform-box:fill-box;transform-origin:0% 50%}
.ftown .smoke circle{animation:smoke 4s ease-in-out infinite}
/* story line draws, dots pop */
.tl::before{transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.4,0,.2,1)}
.tl.go::before{transform:none}
.st .dot{transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.tl:not(.go) .st .dot{transform:scale(.4)}
.tl.go .st:nth-child(2) .dot{transition-delay:.25s}.tl.go .st:nth-child(3) .dot{transition-delay:.5s}.tl.go .st:nth-child(4) .dot{transition-delay:.75s}.tl.go .st:nth-child(5) .dot{transition-delay:1s}.tl.go .st:nth-child(6) .dot{transition-delay:1.25s}
/* gentle motion elsewhere */
.rc .ic{transition:transform .3s}.rc:hover .ic{transform:rotate(-8deg) scale(1.1)}
.one .steps2 li{animation:pop .5s both}.one .steps2 li:nth-child(2){animation-delay:.15s}.one .steps2 li:nth-child(3){animation-delay:.3s}
.app{transition:transform .25s}.jpick button:hover .app{transform:translateY(-3px) rotate(-4deg)}
.badge{transition:transform .25s}.pc2:hover .badge{transform:rotate(-6deg) scale(1.08)}
.sb b{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.tl::before{transform:none}.tl .st .dot{transform:none!important}}
/* ===== shared for inner pages ===== */
.nav .links a[aria-current=page]{background:rgba(255,255,255,.14);color:#fff}
.hero.short{height:auto!important;min-height:0!important;max-height:none!important}
.hero.short .hc{padding-top:120px!important}
.hero.short .scene{height:300px!important;flex:none!important;margin-top:24px}
/* products: group jump bar */
.gjump{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:-40px!important;position:relative;z-index:6}
.gjump a{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:16px;background:var(--sf);color:var(--ink);box-shadow:0 1px 2px rgba(15,25,50,.05),0 14px 34px rgba(27,58,168,.12);border:1px solid var(--ln);transition:transform .2s}
.gjump a:hover{transform:translateY(-3px);text-decoration:none}
.gjump b{font:700 14px/1.25 Sora,Inter,sans-serif}.gjump em{font-style:normal;font-size:12px;color:var(--mut)}
.gd{display:flex;gap:3px}.gd i{width:9px;height:9px;border-radius:9px}
/* products: fit table */
.fit-wrap{margin-top:30px;overflow-x:auto;border-radius:20px;border:1px solid var(--ln);background:var(--sf);box-shadow:0 14px 40px rgba(55,120,245,.07)}
.fit{border-collapse:collapse;width:100%;min-width:860px;font-size:14px}
.fit th,.fit td{padding:8px 10px;border-bottom:1px solid var(--ln);text-align:center}
.fit thead th{position:sticky;top:0;background:var(--sf);font-size:12px;font-weight:600;color:var(--ink2);vertical-align:bottom;padding-top:16px}
.fit thead th span{display:inline-block;max-width:96px;line-height:1.25}
.fit tbody th{text-align:left;font-weight:600;white-space:nowrap}
.fit tbody th a{display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.fit tr.gr th{background:color-mix(in srgb,var(--acs) 70%,var(--sf));font:600 11px "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--act);text-align:left;padding:8px 14px}
.fit tbody tr:not(.gr):hover{background:color-mix(in srgb,var(--c) 6%,transparent)}
.fd{display:inline-block;width:12px;height:12px;border-radius:99px;background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 18%,transparent)}
.badge.sm{width:26px;height:26px;border-radius:8px;font-size:9px;--c:inherit}
.fit .badge.sm,.mxh .badge.sm{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 75%,#fff),var(--c));box-shadow:none}
/* together: matrix */
.mx-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;margin-top:30px;align-items:start}
.mx{padding:18px;border-radius:22px;background:var(--sf);border:1px solid var(--ln);box-shadow:0 14px 40px rgba(55,120,245,.07);overflow-x:auto}
.mxc{}
.mxh{border:0;background:none;cursor:pointer;color:var(--ink2);font:600 12px Inter,sans-serif;border-radius:8px;transition:background .2s,color .2s}
.mxh.top{height:96px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px}
.mxh.top span{writing-mode:vertical-rl;transform:rotate(180deg)}
.mxh.side{display:flex;align-items:center;gap:8px;padding:2px 6px;text-align:left;font-size:13px}
.mxh:hover,.mxh.mhl{background:color-mix(in srgb,var(--c) 12%,transparent);color:var(--ink)}
.mxs{aspect-ratio:1;border-radius:8px;background:color-mix(in srgb,var(--ink) 4%,transparent);display:grid;place-items:center;min-width:26px}
.mxs.self{background:repeating-linear-gradient(45deg,transparent 0 4px,color-mix(in srgb,var(--ink) 8%,transparent) 4px 5px)}
.mxs.on{cursor:pointer;background:color-mix(in srgb,var(--c) 14%,transparent)}
.mxs.on::after{content:"";width:46%;height:46%;border-radius:99px;background:linear-gradient(135deg,var(--c),var(--c2));transform:scale(0);transition:transform .4s cubic-bezier(.3,1.6,.5,1) var(--d)}
.mx.go .mxs.on::after{transform:scale(1)}
.mxs.on:hover,.mxs.on.mhl{background:color-mix(in srgb,var(--c) 30%,transparent);outline:2px solid var(--c);outline-offset:-2px}
.mx-read{position:sticky;top:90px;padding:22px;border-radius:20px;background:linear-gradient(140deg,#eef6ff,#f4efff);border:1px solid #e3e9fb;min-height:200px}
:root[data-theme=dark] .mx-read{background:var(--sf);border-color:var(--ln)}
.mx-read .pair{display:flex;align-items:center;gap:10px;margin-bottom:14px}.mx-read .plus{font:700 18px Sora;color:var(--mut)}
.mx-read b{font:700 18px Sora,Inter,sans-serif}.mx-read p{color:var(--ink2);margin:8px 0 0}
/* together: written list */
.wsearch{width:340px;max-width:100%;height:44px;margin-bottom:12px;border-radius:12px}
.fld{display:flex;align-items:center;gap:8px;padding:0 14px;border:1px solid var(--ln);background:var(--sf);color:var(--mut)}
.fld input{flex:1;border:0;background:none;outline:0;font:inherit;color:var(--ink);min-width:0}
.wl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px;align-items:start}
.wg{border:1px solid var(--ln);border-radius:16px;background:var(--sf);overflow:hidden}
.wg summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px}
.wg summary::-webkit-details-marker{display:none}
.wg summary em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);border-radius:99px;padding:2px 9px}
.wg[open] summary{border-bottom:1px solid var(--ln)}
.wr{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:10px 16px;border-top:1px solid color-mix(in srgb,var(--ln) 60%,transparent)}
.wr:first-of-type{border-top:0}.wr p{margin:0;font-size:14px;color:var(--ink2)}
.wb{font-weight:700;font-size:13px;color:var(--c)}
/* ===== Learn product page ===== */
.crumb{background:#081431;color:rgba(255,255,255,.7);font-size:13px}
.crumb .w{display:flex;justify-content:space-between;height:36px;align-items:center}.crumb a{color:#fff}
.pnav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--ln)}
.pnav .w{display:flex;align-items:center;gap:24px;height:64px}
.plogo{display:flex;align-items:center;gap:10px;color:var(--ink);font:700 19px Sora,Inter,sans-serif;letter-spacing:-.03em}.plogo:hover{text-decoration:none}
.plogo em{font-style:normal;background:linear-gradient(110deg,#00b6eb,#3778f5 45%,#824ae4);-webkit-background-clip:text;background-clip:text;color:transparent}.plogo b{font-weight:500;color:var(--ink2)}
.plogo .app{width:32px;height:32px;font-size:10px;border-radius:9px}
.links2{display:flex;gap:2px}.links2 a{color:var(--ink2);padding:8px 11px;border-radius:8px;font-weight:500;font-size:14.5px}.links2 a:hover{background:var(--sf2);color:var(--ink);text-decoration:none}
.si2{font-weight:600;color:var(--ink)}.btn.sm2{height:40px;padding:0 16px;font-size:14px}
.lhero{position:relative;overflow:hidden;padding:64px 0 72px;background:radial-gradient(900px 520px at 85% 30%,color-mix(in srgb,var(--c) 16%,transparent),transparent 70%),radial-gradient(700px 420px at 0 0,rgba(130,74,228,.08),transparent 70%)}
.lh{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
.lht h1{font:700 clamp(38px,4.6vw,60px)/1.03 Sora,Inter,sans-serif;letter-spacing:-.045em;margin:16px 0 18px}
.lht h1 em{font-style:normal;background:linear-gradient(110deg,#00a1ff,#3778f5 50%,#824ae4);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead2{font-size:17.5px;color:var(--ink2);margin:0;max-width:560px}
.cta3{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.aud{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:24px;font-size:13px;color:var(--mut)}
.aud b{font-weight:600;color:var(--ink2);background:var(--sf);border:1px solid var(--ln);border-radius:99px;padding:4px 11px}
.lhv{position:relative;padding:0 40px 40px 0}
.bw{border-radius:16px;overflow:hidden;background:var(--sf);border:1px solid var(--ln);box-shadow:0 30px 70px rgba(15,25,50,.18),0 0 0 1px rgba(15,25,50,.03);animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
.bbar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:var(--sf2);border-bottom:1px solid var(--ln)}
.bbar i{width:9px;height:9px;border-radius:9px;background:color-mix(in srgb,var(--ink) 18%,transparent)}
.bbar em{margin-left:10px;font-style:normal;font-size:11.5px;color:var(--mut);background:var(--sf);border-radius:6px;padding:3px 10px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bapp{display:grid;grid-template-columns:210px 1fr;min-height:330px}
.les{border-right:1px solid var(--ln);padding:16px 14px;font-size:12.5px}
.les b{display:block;font:700 14px Sora,Inter,sans-serif}.les .due{font-size:11.5px;color:#e2731f;font-weight:600}
.les ol{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:4px}
.les li{display:flex;gap:8px;align-items:center;padding:6px 8px;border-radius:8px;color:var(--ink2);transition:background .3s}
.les li::before{content:"";width:14px;height:14px;border-radius:99px;border:1.5px solid color-mix(in srgb,var(--ink) 25%,transparent);flex:none;transition:all .3s}
.les li.d::before{background:#00a78f;border-color:#00a78f;box-shadow:inset 0 0 0 3px var(--sf)}
.les li.c{background:color-mix(in srgb,#00a1ff 12%,transparent);color:var(--ink);font-weight:600}.les li.c::before{border-color:#00a1ff;border-width:4px}
.les li.q::before{border-radius:4px}
.player{padding:16px;display:flex;flex-direction:column;gap:12px}
.vid{position:relative;flex:1;min-height:210px;border-radius:12px;overflow:hidden;background:radial-gradient(120% 120% at 30% 20%,#1d3c8a,#0b1736 70%)}
.vid::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 220'%3E%3Cg fill='none' stroke='rgba(255,255,255,.18)' stroke-width='2'%3E%3Crect x='40' y='40' width='130' height='90' rx='8'/%3E%3Cpath d='M200 60h150M200 85h120M200 110h140M40 160h310'/%3E%3C/g%3E%3C/svg%3E") center/cover}
.wmk{position:absolute;left:0;top:0;font-size:11px;color:rgba(255,255,255,.4);white-space:nowrap;transition:transform .12s linear}
.play{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:99px;border:0;background:rgba(255,255,255,.92);color:#0b1736;font-size:18px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.vbar{position:absolute;left:14px;right:14px;bottom:30px;height:4px;border-radius:9px;background:rgba(255,255,255,.2)}.vbar i{display:block;height:100%;width:30%;border-radius:9px;background:#00a1ff}
.vt{position:absolute;left:14px;bottom:10px;font-size:11.5px;color:rgba(255,255,255,.8)}
.pmeta{display:flex;align-items:center;gap:14px}.pmeta div:first-child{font-size:12px;color:var(--mut)}.pmeta b{display:block;font:700 18px Sora,Inter,sans-serif;color:var(--ink)}
.pbar{flex:1;height:8px;border-radius:9px;background:var(--sf2);overflow:hidden}.pbar i{display:block;height:100%;width:75%;background:linear-gradient(90deg,#00a1ff,#3778f5);border-radius:9px;transition:width .6s}
.ph2{position:absolute;right:0;bottom:0;width:200px;border-radius:30px;padding:9px;background:#0b1736;box-shadow:0 30px 60px rgba(15,25,50,.3);animation:rise .9s .25s cubic-bezier(.2,.8,.2,1) both}
.phs{border-radius:22px;background:var(--bg);padding:14px 12px;min-height:300px;display:flex;flex-direction:column;gap:8px}
.ptime{font-size:10px;font-weight:700;color:var(--ink)}.phs>b{font:700 16px Sora,Inter,sans-serif;margin:4px 0}
.pc3{border-radius:12px;padding:10px;background:var(--sf);border:1px solid var(--ln)}.pc3 small{display:block;font-weight:700;font-size:11.5px}.pc3 span{font-size:11px;color:var(--ink2)}
.pc3 i{display:block;height:5px;border-radius:9px;background:var(--sf2);margin-top:6px;overflow:hidden}.pc3 i em{display:block;height:100%;background:#00a1ff;border-radius:9px}
.pc3.pok{border-color:color-mix(in srgb,#00a78f 35%,var(--ln))}.pc3.pok span{color:#00a78f;font-weight:600}
.pc3.lv{background:linear-gradient(135deg,#3778f5,#824ae4);border:0;color:#fff}.pc3.lv span{color:rgba(255,255,255,.85)}
.toast{position:absolute;left:24px;bottom:12px;display:flex;gap:10px;align-items:center;padding:10px 14px 10px 10px;border-radius:14px;background:var(--sf);box-shadow:0 16px 40px rgba(15,25,50,.2);border:1px solid var(--ln);opacity:0;transform:translateY(10px);transition:all .35s}
.toast.show{opacity:1;transform:none}.toast i{width:30px;height:30px;border-radius:9px;background:#00a78f;color:#fff;display:grid;place-items:center;font-style:normal;font-weight:700}
.toast b{display:block;font-size:13.5px}.toast span{font-size:12px;color:var(--ink2)}
/* without it */
.wo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:32px}
.woc{padding:20px;border-radius:18px;background:var(--sf);border:1px solid var(--ln);box-shadow:0 1px 2px rgba(15,25,50,.04),0 10px 26px rgba(15,25,50,.05)}
.woc p{margin:0;font-size:14.5px;display:flex;gap:10px}
.was{color:var(--ink2)}.was s{text-decoration:line-through;text-decoration-color:transparent;text-decoration-thickness:1.5px;transition:text-decoration-color .6s var(--d,0s),color .6s var(--d,0s)}
.woc.fix .was s{text-decoration-color:#e0336b;color:var(--mut)}
.x,.ok{flex:none;width:22px;height:22px;border-radius:99px;display:grid;place-items:center;font-weight:700;font-size:13px}
.x{background:#ffe9f0;color:#e0336b}.ok{background:#e0f6f2;color:#00a78f}
.now{margin-top:12px!important;font-weight:600;color:var(--ink);opacity:0;transform:translateY(6px);transition:all .5s calc(var(--d,0s) + .5s)}
.woc.fix .now{opacity:1;transform:none}
/* how it runs */
.how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;margin-top:32px;align-items:stretch}
.hs{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.hs button{width:100%;display:grid;grid-template-columns:44px 1fr;gap:4px 14px;padding:14px 16px;border:1px solid transparent;border-radius:16px;background:none;text-align:left;cursor:pointer;color:var(--ink);position:relative;overflow:hidden}
.hs .n{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font:700 13px Sora,Inter,sans-serif;background:var(--sf2);color:var(--ink2);transition:all .3s}
.hs .tx b{font:700 17px Sora,Inter,sans-serif;display:block}.hs .tx span{display:block;font-size:14px;color:var(--ink2);max-height:0;overflow:hidden;opacity:0;transition:all .4s}
.hs li.on button{background:var(--sf);border-color:var(--ln);box-shadow:0 14px 34px rgba(55,120,245,.10)}
.hs li.on .n{background:linear-gradient(135deg,#00a1ff,#3778f5);color:#fff}.hs li.dn .n{background:color-mix(in srgb,#00a1ff 16%,transparent);color:#0b6fd6}
.hs li.on .tx span{max-height:80px;opacity:1;margin-top:4px}
.hs .pr{position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,#00a1ff,#824ae4)}
.hs li.on .pr{animation:prog 4.2s linear forwards}@keyframes prog{to{width:100%}}
.hp{border-radius:22px;background:linear-gradient(150deg,#eaf6ff,#f2edff);border:1px solid #e3e9fb;display:grid;place-items:center;padding:28px;min-height:380px}
:root[data-theme=dark] .hp{background:linear-gradient(150deg,#0b1a44,#160f3d);border-color:var(--ln)}
.hpi{width:100%;max-width:400px}
.ms{background:var(--sf);border-radius:18px;padding:20px;box-shadow:0 24px 50px rgba(15,25,50,.14);display:grid;gap:12px}
.msh{font:600 11px "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#0b6fd6}
.up{border:2px dashed color-mix(in srgb,#00a1ff 40%,var(--ln));border-radius:14px;padding:22px;text-align:center;color:#00a1ff;display:grid;justify-items:center;gap:4px}.up b{color:var(--ink)}.up span{font-size:13px;color:var(--mut)}
.chips2{display:flex;gap:6px;flex-wrap:wrap}.chips2 span{font-size:12px;font-weight:600;padding:4px 10px;border-radius:99px;background:var(--sf2);color:var(--ink2)}
.rule{display:flex;gap:8px;align-items:center;font-size:14px}.rule span{padding:7px 12px;border-radius:10px;background:var(--sf2);font-weight:600}.rule b{color:var(--mut);font-weight:500}
.cntr{font-size:13px;color:var(--ink2)}.cntr b{font:700 22px Sora;color:#00a1ff;margin-right:4px}
.rel{list-style:none;margin:0;padding:0;display:grid;gap:6px}.rel li{padding:9px 12px;border-radius:10px;background:var(--sf2);font-size:13.5px;color:var(--mut)}.rel li.o{background:color-mix(in srgb,#00a78f 12%,transparent);color:#007a69;font-weight:600}
.vmini{display:flex;align-items:center;gap:10px;height:110px;border-radius:12px;background:radial-gradient(120% 120% at 30% 20%,#1d3c8a,#0b1736 70%);padding:0 16px;color:#fff;position:relative}.vmini i{position:absolute;left:16px;right:16px;bottom:14px;height:4px;border-radius:9px;background:linear-gradient(90deg,#00a1ff 62%,rgba(255,255,255,.2) 62%)}
.score{display:flex;align-items:baseline;gap:6px}.score b{font:800 48px Sora;color:#00a78f}.score span{color:var(--mut);font-size:18px}.score em{margin-left:auto;font-style:normal;font-weight:700;color:#00a78f;background:#e0f6f2;border-radius:99px;padding:4px 12px;font-size:13px}
.cert{text-align:center;justify-items:center;background:linear-gradient(180deg,var(--sf),color-mix(in srgb,#ffd166 12%,var(--sf)))}.cert>b{font:700 22px Sora}.cert>span{color:var(--ink2);font-size:14px}
.qr{width:70px;height:70px;border-radius:8px;background:repeating-conic-gradient(var(--ink) 0 25%,transparent 0 50%) 0 0/14px 14px;opacity:.85}
/* features */
.fg2{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:32px}
.fc{position:relative;padding:20px 18px;border-radius:18px;background:var(--sf);border:1px solid var(--ln);transition:transform .2s,box-shadow .2s}
.fc:hover{transform:translateY(-4px);box-shadow:0 18px 40px color-mix(in srgb,var(--c) 16%,transparent)}
.fic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);transition:transform .3s}.fc:hover .fic{transform:rotate(-8deg) scale(1.08)}
.fn{position:absolute;top:20px;right:18px;font:600 11px "IBM Plex Mono",monospace;color:var(--mut)}
.fc h3{margin:14px 0 2px;font:700 16px/1.25 Sora,Inter,sans-serif;letter-spacing:-.015em}.fs{margin:0 0 10px;color:var(--c);font-weight:600;font-size:13.5px}
.fc ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}.fc li{font-size:13px;color:var(--ink2);padding-left:16px;position:relative}.fc li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:9px;background:var(--c)}
/* highlights */
.hl{display:grid;gap:14px;margin-top:32px}
.hlr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;padding:24px;border-radius:22px;background:var(--sf);border:1px solid var(--ln)}
.hlr.rv .hlt{order:2}
.hlt .n{font:600 12px "IBM Plex Mono",monospace;color:#00a1ff;letter-spacing:.1em}.hlt h3{margin:6px 0 6px;font:700 22px/1.2 Sora,Inter,sans-serif;letter-spacing:-.02em}.hlt p{margin:0;color:var(--ink2)}
.vis{border-radius:16px;padding:22px;background:linear-gradient(150deg,#eef7ff,#f4efff);display:grid;gap:12px;min-height:140px;align-content:center}
:root[data-theme=dark] .vis{background:linear-gradient(150deg,#0b1a44,#160f3d)}
.vis small{color:var(--ink2)}
.ppl{display:flex;align-items:center}.ppl i{width:34px;height:34px;border-radius:99px;border:2px solid var(--sf);margin-left:-8px;display:grid;place-items:center;font:700 11px Inter;font-style:normal;color:#fff;background:linear-gradient(135deg,#00a1ff,#824ae4);animation:pop .4s both;animation-delay:var(--d)}.ppl i:first-child{margin-left:0}.ppl em{font-style:normal;margin-left:8px;font-weight:700;color:var(--ink2)}
.vers{display:grid;gap:8px}.vers span{padding:10px 14px;border-radius:12px;font-weight:600;font-size:14px}.v1{background:var(--sf);border:1px dashed var(--ln);color:var(--ink2)}.v2{background:linear-gradient(110deg,#00a1ff,#3778f5);color:#fff}
.acc b{display:block}.acc div{height:10px;border-radius:9px;background:var(--sf);margin:10px 0 8px;overflow:hidden}.acc i{display:block;height:100%;background:linear-gradient(90deg,#00a78f,#13c4a3);border-radius:9px}.acc span{font-size:13px;color:var(--ink2)}
.flowm{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.flowm span{padding:12px 16px;border-radius:12px;background:var(--sf);font-weight:700}.flowm b{font-size:22px;color:#00a1ff;animation:nudge 1.4s ease-in-out infinite}@keyframes nudge{50%{transform:translateX(6px)}}
.prob{display:grid;gap:4px}.prob span{font-size:13px;color:var(--mut)}.prob b{font:700 18px Sora;color:#e2731f}.prob i{font-style:normal;color:var(--ink2);font-size:13.5px}
.sec4{grid-template-columns:repeat(4,minmax(0,1fr))!important;margin:32px 0 16px!important}
@media (max-width:1100px){.fg2{grid-template-columns:repeat(3,minmax(0,1fr))}.gjump{grid-template-columns:repeat(3,minmax(0,1fr))}.mx-wrap{grid-template-columns:1fr}.mx-read{position:static}.lh{grid-template-columns:1fr}.links2{display:none}}
@media (max-width:980px){.wo,.sec4{grid-template-columns:1fr 1fr!important}.how{grid-template-columns:1fr}.hlr{grid-template-columns:1fr}.hlr.rv .hlt{order:0}.wl{grid-template-columns:1fr}}
@media (max-width:640px){.fg2,.wo,.sec4{grid-template-columns:1fr!important}.gjump{grid-template-columns:1fr 1fr;margin-top:16px!important}.bapp{grid-template-columns:1fr}.les{display:none}.lhv{padding:0 0 60px}.ph2{width:150px}.si2{display:none}.crumb span{display:none}.hero.short .scene{height:180px!important}}

.mx table{border-collapse:separate;border-spacing:3px;margin:0 auto}
.mx td{padding:0;width:38px;height:38px}.mx th{padding:0}.mx thead th{vertical-align:bottom}
.mx .mxs{width:36px;height:36px;aspect-ratio:auto;min-width:0}
.mxh.side{width:130px;height:36px}
.mx tbody td,.mx tbody th{vertical-align:middle;height:40px;line-height:0}
.mx .mxs{display:flex!important;align-items:center;justify-content:center;margin:0 auto}
.mx .mxh.side{line-height:1.2}
/* product hero: own scene */
.phero{min-height:0!important;height:auto!important;max-height:none!important}
.phero .hc{padding-top:72px!important}
.phero .hc h1{max-width:900px}
.aud2{margin:18px 0 0;color:rgba(255,255,255,.75);font-size:14px}
.pscene{position:relative;height:clamp(260px,34vw,380px);margin-top:20px}
.pscene svg{position:absolute;inset:0;width:100%;height:100%}
.pcards{position:absolute;inset:0;pointer-events:none}
.pcards .note{transform:translate(-50%,10px)}
.pcards .note::after{display:none}
.ck{fill:none;stroke:var(--line);stroke-width:1.6;transition:fill .3s,stroke .3s}
.ck.on{fill:#00d1a6;stroke:#00d1a6}
#cert{transform:translateY(60px);opacity:0;transition:transform .9s cubic-bezier(.2,.9,.3,1.2),opacity .4s}
#cert.up{transform:translateY(-18px);opacity:1}
.walker{animation:walk2 26s linear infinite}@keyframes walk2{from{transform:translateX(1240px)}to{transform:translateX(-40px)}}
.steam{animation:steam 2.4s ease-in-out infinite;opacity:.6}@keyframes steam{0%{opacity:0;transform:translateY(4px)}50%{opacity:.7}100%{opacity:0;transform:translateY(-6px)}}
.birds2{animation:fly 30s linear infinite}
.sunr2{transform-box:fill-box;transform-origin:center;animation:spin 40s linear infinite}
#lampbeam{animation:flick 4s ease-in-out infinite}@keyframes flick{50%{opacity:.6}}
.aw{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center}
.aw .lhv{margin-top:10px}
@media (max-width:980px){.aw{grid-template-columns:1fr}}
@media (max-width:640px){.phero .hc{padding-top:40px!important}.pcards{display:none}}

.pg-learn .pnav{background:#1b3aa8;border-bottom:1px solid rgba(255,255,255,.12);color:#fff}
.pg-learn.scrolled .pnav{background:color-mix(in srgb,var(--bg) 90%,transparent);color:var(--ink);border-bottom-color:var(--ln)}
.pg-learn .pnav .plogo,.pg-learn .pnav .links2 a,.pg-learn .pnav .si2{color:inherit}
.pg-learn .pnav .plogo b{color:inherit;opacity:.8}.pg-learn .pnav .links2 a:hover{background:rgba(127,127,127,.15)}
.pg-learn:not(.scrolled) .pnav .plogo em{background:linear-gradient(110deg,#5fd3ff,#a9c6ff 50%,#c9b3ff);-webkit-background-clip:text;background-clip:text}
.pg-learn .pnav .mode{border-color:color-mix(in srgb,currentColor 25%,transparent);background:transparent;color:inherit}
:root[data-theme=dark] .pg-learn .pnav{background:#050d26}
.phero{display:flex!important;flex-direction:column;height:calc(100svh - 100px)!important;min-height:640px!important;max-height:1000px!important}
.phero .hc{padding-top:clamp(36px,6vh,72px)!important}
.phero .hc h1{font-size:clamp(36px,4.6vw,62px)!important;margin:12px auto!important}
.phero .cta{margin-top:22px!important}
.pscene{flex:1 1 auto;height:auto!important;min-height:220px;margin-top:10px}
@media (max-height:860px){.phero .lead{display:none}}
@media (max-width:640px){.phero{height:auto!important;min-height:0!important}.pscene{height:220px!important;flex:none}}
.pscene svg{overflow:visible}.phero{overflow:hidden}
/* home: six group tiles */
.gt6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}
.g6{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:var(--sf);border:1px solid var(--ln);color:var(--ink);transition:transform .25s,box-shadow .25s}
.g6:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(55,120,245,.14);text-decoration:none}
.g6 .gpic{height:150px;border-radius:0;margin:0}
.g6b{padding:18px 20px 20px;display:grid;gap:8px}.g6b h3{margin:0;font:700 20px Sora,Inter,sans-serif;letter-spacing:-.02em}.g6b p{margin:0;color:var(--ink2);font-size:14.5px}
@media (max-width:980px){.gt6{grid-template-columns:1fr 1fr}}@media (max-width:640px){.gt6{grid-template-columns:1fr}}
/* together: own hero */
.thero{position:relative;overflow:hidden;color:#fff;background:linear-gradient(160deg,#1b3aa8,#3a4fd0 55%,#6a46d8);padding:120px 0 0}
:root[data-theme=dark] .thero{background:linear-gradient(160deg,#050d26,#0d1a48 55%,#241a5c)}
.thero .hc{padding-top:0!important}
.tnet{display:block;width:100%;height:260px;margin-top:20px}
.tl2{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1.6;stroke-dasharray:4 6;animation:road 2s linear infinite;animation-delay:var(--d)}
/* ===================== Learn sections v2 ===================== */
/* before / after */
.bat{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);margin-top:36px}
.bgL,.bgR{grid-row:1/8;border-radius:24px}
.bgL{grid-column:1;background:#fff5f7;border:1px solid #fbe1e8}
.bgR{grid-column:3;background:linear-gradient(160deg,#1b3aa8,#3778f5 60%,#6a46d8);box-shadow:0 30px 60px rgba(55,120,245,.25)}
:root[data-theme=dark] .bgL{background:#1d1630;border-color:#3a2440}
.bh{grid-row:1;padding:26px 30px 10px;font:600 12px "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;z-index:1}
.bh.l{grid-column:1;color:#c2335f}.bh.r{grid-column:3;color:rgba(255,255,255,.8)}
.bl,.br{z-index:1;padding:14px 30px;font-size:16px;display:flex;align-items:center;min-height:68px}
.bl{grid-column:1;color:#7b5560;opacity:.35;transition:opacity .6s var(--d)}
:root[data-theme=dark] .bl{color:#d7a9b6}
.br{grid-column:3;color:#fff;font-weight:600;opacity:0;transform:translateX(-14px);transition:all .6s var(--d)}
.ba2{grid-column:2;z-index:1;display:grid;place-items:center}
.ba2 span{width:36px;height:36px;border-radius:99px;display:grid;place-items:center;background:var(--sf);color:#3778f5;font-weight:700;box-shadow:0 6px 16px rgba(55,120,245,.25);transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1) var(--d)}
.bat.go .bl{opacity:1}.bat.go .br{opacity:1;transform:none}.bat.go .ba2 span{transform:none}
.bat>div:nth-last-child(1),.bat>div:nth-last-child(2),.bat>div:nth-last-child(3){padding-bottom:30px}
/* dark band: at work */
.band-dark{position:relative;padding:110px 0;color:#fff;background:radial-gradient(900px 500px at 80% 40%,rgba(55,120,245,.35),transparent 70%),radial-gradient(700px 400px at 10% 90%,rgba(130,74,228,.3),transparent 70%),#081431;overflow:hidden}
.band-dark .eye{color:#7fd3ff}.band-dark .t{color:#fff}.band-dark .l{color:rgba(255,255,255,.75)}
.band-dark::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.band-dark .bw{box-shadow:0 40px 90px rgba(0,0,0,.5)}
.band-dark .aw{position:relative}
/* how: track + stage */
.trk{position:relative;display:grid;grid-template-columns:repeat(6,1fr);margin-top:40px}
.trl{position:absolute;left:8.33%;right:8.33%;top:27px;height:3px;border-radius:9px;background:var(--ln)}
.trl i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,#00a1ff,#824ae4);transition:width .6s cubic-bezier(.4,0,.2,1)}
.trk button{position:relative;border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--mut);font:inherit}
.tc2{width:56px;height:56px;border-radius:99px;display:grid;place-items:center;background:var(--sf);border:2px solid var(--ln);color:var(--mut);transition:all .35s;position:relative;z-index:1}
.trk b{font:700 15px Sora,Inter,sans-serif;color:var(--ink2)}.trk small{font:600 11px "IBM Plex Mono",monospace;letter-spacing:.1em}
.trk button.dn .tc2{border-color:#00a1ff;color:#00a1ff}
.trk button.on .tc2{background:linear-gradient(135deg,#00a1ff,#3778f5);border-color:transparent;color:#fff;transform:scale(1.15);box-shadow:0 10px 26px rgba(0,161,255,.4)}
.trk button.on b{color:var(--ink)}
.stg{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:center;margin-top:40px;padding:40px;border-radius:28px;background:radial-gradient(600px 300px at 80% 50%,rgba(0,161,255,.12),transparent 70%),linear-gradient(150deg,#f3f9ff,#f6f2ff)}
:root[data-theme=dark] .stg{background:radial-gradient(600px 300px at 80% 50%,rgba(0,161,255,.18),transparent 70%),#0d1a40}
.stx{animation:pop .45s both}
.bign{font:800 72px/1 Sora,Inter,sans-serif;letter-spacing:-.05em;background:linear-gradient(110deg,#00a1ff,#824ae4);-webkit-background-clip:text;background-clip:text;color:transparent}
.stx h3{margin:8px 0 8px;font:700 30px Sora,Inter,sans-serif;letter-spacing:-.03em}.stx p{margin:0;color:var(--ink2);font-size:17px}
.tim{margin-top:22px;height:3px;border-radius:9px;background:color-mix(in srgb,var(--ink) 8%,transparent);overflow:hidden;width:160px}.tim i{display:block;height:100%;width:0;background:#00a1ff;animation:prog 5s linear forwards}
.stv{display:grid;place-items:center}
.scv{width:100%;max-width:520px;height:auto;overflow:visible}
.ln2a{fill:none;stroke:#3778f5;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
:root[data-theme=dark] .ln2a{stroke:#9fbcff}
.scv>*{animation:pop .5s both}
.dot2{fill:#f0487a}
.pp{fill:#f0487a}.pv{fill:#3778f5}
.fly{animation:fly2 2.8s ease-in infinite}.fly.f2{animation-delay:1.3s}
@keyframes fly2{0%{transform:translate(0,-10px);opacity:0}20%{opacity:1}70%{transform:translate(0,120px);opacity:1}100%{transform:translate(0,130px);opacity:0}}
.up2{animation:bob 1.6s ease-in-out infinite}
.pd{fill:color-mix(in srgb,#3778f5 14%,var(--sf));stroke:#3778f5;stroke-width:2}
.pop2{animation:pop .45s both;animation-delay:var(--d)}
.flow2{fill:none;stroke:#00a1ff;stroke-width:2;stroke-dasharray:6 6;animation:road 1s linear infinite}
.lk2{fill:#ffd166}
.unl .lock{animation:unl .5s both;animation-delay:calc(var(--d) + .6s)}@keyframes unl{to{transform:translateY(-14px);opacity:0}}
.unl>rect{animation:glow2 .5s both;animation-delay:calc(var(--d) + .6s)}@keyframes glow2{to{fill:color-mix(in srgb,#00a78f 16%,transparent);stroke:#00a78f}}
.scr{fill:#1b3aa8}
.prog2{stroke:#00a1ff;stroke-width:4;stroke-linecap:round;stroke-dasharray:186;stroke-dashoffset:186;animation:fill2 3s ease-in-out infinite}@keyframes fill2{to{stroke-dashoffset:0}}
.nm{font:600 10px Inter;fill:rgba(255,255,255,.6);animation:drift2 4s ease-in-out infinite alternate}@keyframes drift2{to{transform:translate(90px,70px)}}
.ckp{fill:none;stroke:#00a78f;stroke-width:3;stroke-linecap:round;stroke-dasharray:20;stroke-dashoffset:20;animation:ck2 .4s forwards;animation-delay:var(--d)}@keyframes ck2{to{stroke-dashoffset:0}}
.stamp{transform-box:fill-box;transform-origin:center;animation:stamp .5s cubic-bezier(.3,1.6,.5,1) 1.8s both}@keyframes stamp{from{transform:scale(2) rotate(-20deg);opacity:0}}
.qr2{fill:url(#none);fill:#0f1932;opacity:.85}
.cert2{animation:rise .7s both}.scan{animation:scan 2.2s ease-in-out 1s infinite}@keyframes scan{0%,100%{opacity:0}40%,60%{opacity:1}}
/* features: open grid, no boxes */
.soft{background:linear-gradient(180deg,#fff,#f6f9ff 30%,#f7f4ff 80%,#fff)}
:root[data-theme=dark] .soft{background:none}
.fg3{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:36px 28px;margin-top:40px}
.f3 h3{margin:14px 0 6px;font:700 16.5px/1.25 Sora,Inter,sans-serif;letter-spacing:-.015em}
.f3 p{margin:0;font-size:14px;color:var(--ink2)}
.f3i{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,color-mix(in srgb,var(--c) 65%,#fff),var(--c));box-shadow:0 10px 22px color-mix(in srgb,var(--c) 30%,transparent);transition:transform .3s}
.f3:hover .f3i{transform:translateY(-4px) rotate(-6deg)}
/* highlights: bento */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:36px}
.bt{grid-column:span 2;display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:260px;padding:26px;border-radius:24px;background:radial-gradient(120% 90% at 100% 100%,color-mix(in srgb,var(--c) 22%,transparent),transparent 60%),color-mix(in srgb,var(--c) 7%,var(--sf));overflow:hidden;transition:transform .25s}
.bt:hover{transform:translateY(-4px)}
.bt.big{grid-column:span 4;grid-row:span 1}
.bt:nth-child(2){grid-column:span 2}
.bt h3{margin:0 0 6px;font:700 21px/1.2 Sora,Inter,sans-serif;letter-spacing:-.02em}.bt p{margin:0;color:var(--ink2);font-size:15px;max-width:420px}
.hv{display:grid;gap:12px}
.hv .rule span{background:var(--sf)}
.bt .ppl i{width:40px;height:40px;opacity:0;transform:translateY(10px);transition:all .4s var(--d)}
.bt.go .ppl i{opacity:1;transform:none}
.nite{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--ink2)}.moon3{width:26px;height:26px;border-radius:99px;display:grid;place-items:center;background:#0f1932;color:#ffd166}
.vers2{display:grid;gap:8px}.vers2 span{padding:12px 14px;border-radius:12px;background:var(--sf);font-weight:600;font-size:14px;color:var(--ink2);transition:all .5s}
.vers2 span.on{background:var(--c);color:#fff;transform:translateX(0)}
.bt:not(.go) .vers2 span.on{transform:translateX(30px);opacity:0}
.ring2{position:relative;width:100px;height:100px}.ring2 svg{width:100%;height:100%;transform:rotate(-90deg)}
.rbg{fill:none;stroke:color-mix(in srgb,var(--c) 18%,transparent);stroke-width:9}.rfg{fill:none;stroke:var(--c);stroke-width:9;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1)}
.bt.go .rfg{stroke-dashoffset:6}.ring2 b{position:absolute;inset:0;display:grid;place-items:center;font:800 22px Sora}
.hv small{color:var(--ink2);font-size:13.5px}
.flow3{display:flex;align-items:center;gap:10px}.flow3 span{padding:12px 14px;border-radius:12px;background:var(--sf);font-weight:700;font-size:14px;white-space:nowrap}
.flow3 i{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--c) 0 6px,transparent 6px 12px);background-size:24px 2px;animation:dash3 .8s linear infinite}@keyframes dash3{to{background-position:24px 0}}
.steps3{display:flex;gap:6px}.steps3 i{flex:1;height:10px;border-radius:9px;background:color-mix(in srgb,var(--c) 18%,transparent)}
.steps3 i.d{background:var(--c);transform-origin:left;transform:scaleX(0);transition:transform .5s var(--d)}.bt.go .steps3 i.d{transform:none}
/* joins: blue band hub */
.band-blue{position:relative;padding:100px 0;color:#fff;text-align:center;background:linear-gradient(170deg,#1b3aa8,#3a63d6 60%,#5b7fe0);overflow:hidden}
:root[data-theme=dark] .band-blue{background:linear-gradient(180deg,var(--bg,#081230) 0,#0d1a48 22%,#1a2c6c 60%,#0d1a48 85%,var(--bg,#081230) 100%)}
.band-blue .eye{color:rgba(255,255,255,.75)}.band-blue .t{color:#fff}.band-blue .l{color:rgba(255,255,255,.82);margin:0 auto}
.hub{position:relative;margin-top:44px}
.hubl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.hp2{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2;stroke-dasharray:6 7;animation:road 1.2s linear infinite}
.hubc{display:flex;flex-direction:column;align-items:center;gap:10px;position:relative}
.hubc b{font:700 20px Sora,Inter,sans-serif}
.hubc .app.big{box-shadow:0 0 0 10px rgba(255,255,255,.1),0 0 0 22px rgba(255,255,255,.05),0 20px 40px rgba(0,0,0,.25)}
.hubn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:110px;text-align:left}
.hn{position:relative;padding:44px 24px 24px;border-radius:20px;background:rgba(255,255,255,.96);color:#0f1932;box-shadow:0 20px 50px rgba(8,20,49,.25)}
:root[data-theme=dark] .hn{background:#0f1f47;color:#eef3ff}
.hn .app{position:absolute;top:-22px;left:24px;width:46px;height:46px;border-radius:14px;font-size:13px;box-shadow:0 0 0 5px rgba(255,255,255,.95),0 10px 20px rgba(0,0,0,.2)}
.hn b{display:block;font:700 17px Sora,Inter,sans-serif;color:var(--c)}.hn p{margin:6px 0 0;font-size:14.5px;color:#4c6372}
:root[data-theme=dark] .hn p{color:#b3c0d3}
/* security */
.sec2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.secart{border-radius:28px;padding:30px;background:radial-gradient(500px 300px at 60% 40%,rgba(55,120,245,.35),transparent 70%),#081431}
.secart svg{width:100%;height:auto;display:block}
.sa{fill:none;stroke:rgba(190,210,255,.7);stroke-width:2.4;stroke-linecap:round}.sb2{fill:#1b3aa8}
.wm2{font:600 12px Inter;fill:rgba(255,255,255,.45);animation:drift3 6s ease-in-out infinite alternate}@keyframes drift3{to{transform:translate(110px,90px)}}
.shd{animation:bob 3s ease-in-out infinite}.lt{font:600 12px Inter;fill:rgba(255,255,255,.75)}
.lnk circle{animation:tw 1.2s ease-in-out infinite alternate}
.secl{display:grid;gap:22px;margin-top:26px}
.si3{display:flex;gap:16px}.si3>span{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.si3 b{font:700 17px Sora,Inter,sans-serif}.si3 p{margin:4px 0 0;color:var(--ink2);font-size:15px}
.gtk2{display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px;margin-top:80px;padding-top:40px;border-top:1px solid var(--ln)}
.gtk2 h3{margin:0 0 8px;font:700 24px Sora,Inter,sans-serif;letter-spacing:-.02em}.gtk2>div>p{margin:0;color:var(--ink2)}
.gtk2 ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:28px 32px}
.gtk2 li{display:grid;gap:6px;align-content:start}.gtk2 li b{font-size:16px}.gtk2 li span{color:var(--ink2);font-size:14.5px}
.gtk2 .tg{justify-self:start;order:-1;font:600 11px "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;font-style:normal;padding:4px 10px;border-radius:999px}
@media (max-width:1100px){.fg3{grid-template-columns:repeat(3,minmax(0,1fr))}.stg{grid-template-columns:1fr}.sec2{grid-template-columns:1fr}}
@media (max-width:980px){.bento{grid-template-columns:1fr 1fr}.bt,.bt.big,.bt:nth-child(2){grid-column:span 1}.bt.big{grid-column:span 2}.hubn{grid-template-columns:1fr;gap:40px;margin-top:70px}.gtk2{grid-template-columns:1fr}}
@media (max-width:760px){.trk{grid-template-columns:repeat(6,minmax(64px,1fr));overflow-x:auto}.trk b{font-size:12px}.bat{grid-template-columns:1fr}.bgL,.bgR,.ba2,.bh{display:none}.bl{grid-column:1;opacity:1;padding:14px 18px 2px;min-height:0;background:#fff5f7;border-radius:14px 14px 0 0;margin-top:12px}.br{grid-column:1;opacity:1;transform:none;padding:8px 18px 14px;min-height:0;background:#3778f5;border-radius:0 0 14px 14px}}
@media (max-width:640px){.fg3,.bento,.gtk2 ul{grid-template-columns:1fr}.bt.big{grid-column:span 1}.stg{padding:22px}.bign{font-size:52px}}
@media (prefers-reduced-motion:reduce){.bl,.br,.ba2 span{opacity:1!important;transform:none!important}}
.band-dark .bw,.band-dark .phs,.band-dark .toast{color:var(--ink)}

.bat{display:grid!important;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr)!important;align-items:stretch}
.pL{border-radius:24px;background:#fff5f7;border:1px solid #fbe1e8;padding-bottom:18px}
.pR{border-radius:24px;background:linear-gradient(160deg,#1b3aa8,#3778f5 60%,#6a46d8);box-shadow:0 30px 60px rgba(55,120,245,.25);padding-bottom:18px}
:root[data-theme=dark] .pL{background:#1d1630;border-color:#3a2440}
.pL .bh,.pR .bh,.pM .bh{height:62px;display:flex;align-items:flex-end;padding:0 30px 8px}
.pL .bl,.pR .br,.pM .ba2{height:78px;min-height:0}
.pM .ba2{display:grid;place-items:center}
.pL .bl,.pR .br{padding:0 30px;display:flex;align-items:center}
.pR .br{border-top:1px solid rgba(255,255,255,.12)}.pL .bl{border-top:1px solid #fbe1e8}
:root[data-theme=dark] .pL .bl{border-top-color:#3a2440}
@media (max-width:760px){.bat{grid-template-columns:1fr!important;gap:14px}.pM{display:none}.pL .bl,.pR .br{height:auto;padding:12px 18px}.bl,.br{opacity:1!important;transform:none!important;background:none!important;margin:0!important;border-radius:0!important}}