/* ROADKING welcome: isolated from all legacy jiqi styles. */
.moto-welcome { color-scheme:dark; margin:0; min-width:280px; background:#0a0f1f; color:#fff; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
.moto-welcome, .moto-welcome * { box-sizing:border-box; }
.moto-welcome .moto-onboard { position:relative; isolation:isolate; display:flex; flex-direction:column; width:100%; max-width:440px; min-height:852px; min-height:max(852px,100svh); margin:0 auto; padding:max(46px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom)); background:#0a0f1f url("./1.jpg") center / cover no-repeat; overflow:hidden; }
.moto-welcome .moto-onboard::before { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background:linear-gradient(180deg,#00071260,#00071214 36%,transparent 53%,#0007124d 68%,#000712f0 91%,#020b16); }
.moto-welcome .moto-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; }
.moto-welcome .moto-brand { display:flex; align-items:center; gap:8px; color:#fff; text-decoration:none; }
.moto-welcome .moto-brand img { width:62px; height:auto; }
.moto-welcome .moto-brand-copy { display:flex; flex-direction:column; gap:4px; }
.moto-welcome .moto-brand strong { font-size:23px; line-height:1; letter-spacing:.4px; font-weight:900; }
.moto-welcome .moto-brand small { color:#b3dcff; font-size:8px; letter-spacing:2.1px; white-space:nowrap; }
.moto-welcome .moto-skip { flex-shrink:0; padding:7px 15px; border:1px solid #6685a7; border-radius:24px; color:#d7e7fa; background:#03102080; font-size:14px; text-decoration:none; box-shadow:inset 0 0 0 2px #020b16; }
.moto-welcome .moto-intro { margin-top:32px; }
.moto-welcome .moto-intro h1 { margin:0; font-size:clamp(48px,16.2vw,70px); font-weight:950; font-style:italic; line-height:.94; letter-spacing:-2.8px; transform:skewX(-5deg); transform-origin:left; }
.moto-welcome .moto-intro h1 span { display:block; width:fit-content; color:#f8fbff; text-shadow:0 2px 1px #78a7cf55; }
.moto-welcome .moto-intro h1 span + span { background:linear-gradient(180deg,#f2fcff 4%,#78e5ff 28%,#00c8ff 58%,#0066ff 100%); color:#00d4ff; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 2px 0 #00468d) drop-shadow(0 0 8px #0066ff65); }
.moto-welcome .moto-subtitle { margin:16px 0 8px; color:#00e0ff; font-size:clamp(16px,5.1vw,22px); font-weight:800; line-height:1.22; letter-spacing:-.3px; text-shadow:0 2px 5px #001221; }
.moto-welcome .moto-topics { display:flex; justify-content:space-between; align-items:center; gap:7px; margin:0; padding-top:10px; border-top:1px solid #4090c84d; color:#d7e5ff; font-size:11px; letter-spacing:.25px; }
.moto-welcome .moto-topics i { font-style:normal; }
.moto-welcome .moto-landscape { flex:1 0 228px; }
.moto-welcome .moto-bottom { position:relative; }
.moto-welcome .moto-benefits { display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:12px; margin:0 0 24px; padding:0; list-style:none; }
.moto-welcome .moto-benefits li { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; font-size:13px; line-height:1.25; font-weight:500; text-shadow:0 2px 4px #000; }
.moto-welcome .moto-icon-wrap { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:linear-gradient(145deg,#003f7877,#00152d55); }
.moto-welcome .moto-icon { width:30px; height:30px; fill:#74e8ff; stroke:#b5f2ff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 5px #009dff); }
.moto-welcome .moto-icon-outline { fill:none; }
.moto-welcome .moto-start { display:flex; align-items:center; justify-content:center; gap:14px; min-height:60px; padding:15px 24px; border:1px solid #65efff; border-radius:20px; color:#fff; background:linear-gradient(120deg,#00d4ff,#0066ff 43%,#0066ff 73%,#00baff); box-shadow:inset 0 0 12px #67efff,0 0 18px #0066ff80,0 8px 24px #0006; font-size:18px; font-weight:700; text-decoration:none; transition:filter .2s,transform .2s; -webkit-tap-highlight-color:transparent; }
.moto-welcome .moto-start svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.moto-welcome .moto-start:hover { filter:brightness(1.12); }
.moto-welcome .moto-start:active { transform:translateY(1px); }
.moto-welcome .moto-signin { display:flex; justify-content:center; flex-wrap:wrap; gap:7px; margin:24px 0 22px; color:#8bdaff; font-size:14px; line-height:1.5; }
.moto-welcome .moto-signin a { color:#00d4ff; font-weight:600; text-decoration:none; }
.moto-welcome .moto-signin a span { margin-left:5px; font-size:19px; line-height:1; }
.moto-welcome .moto-pagination { display:flex; justify-content:center; gap:9px; }
.moto-welcome .moto-pagination span { width:9px; height:9px; border:1px solid #39506b; border-radius:50%; background:#23364e; }
.moto-welcome .moto-pagination .is-active { border-color:#00e5ff; background:#00d4ff; box-shadow:0 0 8px #00d4ff33; }
.moto-welcome a:focus-visible { outline:2px solid #00d4ff; outline-offset:5px; }
@media (min-width:520px) {
    .moto-welcome { padding:24px 0; background:radial-gradient(ellipse at 50% 60%,#102c50,#0a0f1f 70%); }
    .moto-welcome .moto-onboard { min-height:max(852px,calc(100svh - 48px)); border:1px solid #294562; border-radius:28px; box-shadow:0 24px 80px #0009,0 0 32px #0066ff18; }
}
@media (max-width:359px) {
    .moto-welcome .moto-onboard { padding-right:16px; padding-left:16px; }
    .moto-welcome .moto-brand img { width:48px; }
    .moto-welcome .moto-brand strong { font-size:20px; }
    .moto-welcome .moto-brand small { font-size:7px; letter-spacing:1.5px; }
    .moto-welcome .moto-skip { padding:7px 11px; font-size:12px; }
    .moto-welcome .moto-topics { font-size:9px; }
    .moto-welcome .moto-benefits { gap:6px; }
    .moto-welcome .moto-benefits li, .moto-welcome .moto-signin { font-size:12px; }
}
@media (max-height:740px) and (max-width:519px) {
    .moto-welcome .moto-onboard { min-height:max(700px,100svh); padding-top:max(24px,env(safe-area-inset-top)); }
    .moto-welcome .moto-intro { margin-top:24px; }
    .moto-welcome .moto-landscape { flex-basis:140px; }
}
@media (prefers-reduced-motion:reduce) { .moto-welcome .moto-start { transition:none; } }
