/* SX landing showcase (SX-owned) */
.sxl{position:relative;overflow:hidden;color:#fff;font-family:inherit;background:radial-gradient(1100px 600px at 8% 0%,rgba(236,72,153,.35),transparent 60%),radial-gradient(1000px 700px at 100% 45%,rgba(34,211,238,.28),transparent 60%),linear-gradient(180deg,#2a0e5c,#1c0b45 50%,#2a0e5c)}
.sxl *{box-sizing:border-box}
.sxl-conf{position:absolute;inset:0;pointer-events:none;opacity:.55;background-image:radial-gradient(#ff4fa3 1.5px,transparent 2px),radial-gradient(#22d3ee 1.5px,transparent 2px),radial-gradient(#facc15 1.5px,transparent 2px);background-size:140px 160px,190px 210px,230px 170px;background-position:0 0,60px 90px,120px 30px;animation:sxl-cf 40s linear infinite}
@keyframes sxl-cf{to{background-position:0 1600px,60px 2190px,120px 1730px}}
.sxl-marq{overflow:hidden;white-space:nowrap;padding:13px 0;background:linear-gradient(90deg,rgba(236,72,153,.22),rgba(139,92,246,.22),rgba(34,211,238,.22));border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);position:relative}
.sxl-marq>div{display:inline-block;animation:sxl-mq 45s linear infinite}.sxl-marq span{margin:0 24px;font-weight:600;font-size:15px}.sxl-marq b{color:#f9a8d4}
@keyframes sxl-mq{to{transform:translateX(-50%)}}
.sxl-stats{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;padding:40px 16px 0;position:relative}
.sxl-st{min-width:190px;text-align:center;padding:16px 20px;border-radius:20px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);box-shadow:0 0 30px rgba(139,92,246,.2)}
.sxl-st b{display:block;white-space:nowrap;font-size:36px;line-height:1.1;background:linear-gradient(90deg,#f472b6,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}.sxl-st span{white-space:nowrap;color:#efe6ff;font-size:15px}
.sxl-sec{position:relative;max-width:1180px;margin:0 auto;padding:76px 24px;display:flex;align-items:center;gap:60px}
.sxl-sec.sxl-rev{flex-direction:row-reverse}
.sxl-txt{flex:1;min-width:0}
.sxl-pill{display:inline-block;padding:8px 16px;border-radius:999px;font-weight:700;font-size:15px;white-space:nowrap;color:#fff;box-shadow:0 0 18px rgba(255,255,255,.2)}
.sxl h2{font-size:40px;line-height:1.15;margin:18px 0 12px;font-weight:800;color:#fff;white-space:nowrap}
.sxl-l{font-size:18px;line-height:1.55;color:#f1eaff;max-width:480px;margin:0}
.sxl-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.sxl-chips span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:6px 12px;font-size:14px;white-space:nowrap;color:#fff}
.sxl-phones{display:flex;gap:22px;flex:none}
.sxl-ph{width:260px;border-radius:38px;padding:9px;background:linear-gradient(145deg,#ff4fa3,#8b5cf6,#22d3ee);box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 40px rgba(139,92,246,.35);position:relative;transform:rotate(-4deg);animation:sxl-fl 6s ease-in-out infinite}
.sxl-ph+.sxl-ph{--r:5deg;transform:rotate(5deg);animation-delay:-3s;width:220px;margin-top:60px}
@keyframes sxl-fl{0%,100%{translate:0 0}50%{translate:0 -14px}}
.sxl-ph img{display:block;width:100%;height:auto;border-radius:30px}
.sxl-pop{position:absolute;font-size:30px;animation:sxl-pop 3.4s ease-in-out infinite;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));pointer-events:none}
@keyframes sxl-pop{0%{transform:translateY(20px) scale(.4);opacity:0}20%{opacity:1;transform:translateY(0) scale(1.1)}80%{opacity:1}100%{transform:translateY(-60px) scale(.9);opacity:0}}
.sxl-bub{position:absolute;background:#fff;color:#3b0d6b;font-weight:700;font-size:13px;padding:8px 12px;border-radius:16px 16px 16px 4px;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.sxl-g1{background:linear-gradient(90deg,#ec4899,#f97316)}.sxl-g2{background:linear-gradient(90deg,#8b5cf6,#6366f1)}.sxl-g3{background:linear-gradient(90deg,#f59e0b,#f97316)}.sxl-g4{background:linear-gradient(90deg,#d946ef,#a855f7)}.sxl-g5{background:linear-gradient(90deg,#06b6d4,#3b82f6)}.sxl-g6{background:linear-gradient(90deg,#22c55e,#14b8a6)}
.sxl-cta{text-align:center;padding:80px 20px 90px;position:relative}
.sxl-cta h2{font-size:42px}.sxl-cta .sxl-l{margin:0 auto}
.sxl-btns{display:flex;gap:16px;justify-content:center;margin-top:26px}
.sxl-b{display:inline-block;padding:15px 30px;border-radius:12px;font-weight:700;font-size:17px;color:#fff!important;text-decoration:none!important;white-space:nowrap;cursor:pointer}
.sxl-b1{background:linear-gradient(90deg,#ec4899,#8b5cf6);box-shadow:0 0 24px rgba(236,72,153,.55)}.sxl-b2{border:2px solid #22d3ee;background:rgba(28,11,69,.5)}
.sxl-app{position:relative;max-width:980px;margin:10px auto 0;padding:26px 24px;display:flex;align-items:center;gap:22px;border-radius:26px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);box-shadow:0 0 40px rgba(139,92,246,.3)}
.sxl-app-ic{width:72px;height:72px;border-radius:18px;flex:none;box-shadow:0 10px 24px rgba(0,0,0,.45)}
.sxl-app-t{flex:1;min-width:0}.sxl-app h2{font-size:28px;margin:10px 0 6px}.sxl-app .sxl-l{font-size:16px}
.sxl-app-b{display:flex;flex-direction:column;gap:10px;flex:none;align-items:stretch;text-align:center}
.sxl-app-ios{background:rgba(255,255,255,.06);border:2px dashed rgba(255,255,255,.35);color:#cfc3ea!important;cursor:not-allowed;font-size:15px}
.sxl-app-more{font-size:13px;color:#f9a8d4!important;text-decoration:none!important;white-space:nowrap}
@media(max-width:900px){.sxl h2{font-size:32px}.sxl-sec{gap:36px}}
@media(max-width:700px){.sxl-sec,.sxl-sec.sxl-rev{flex-direction:column;padding:52px 16px;gap:28px;text-align:center}
 .sxl h2{font-size:26px}.sxl-l{font-size:16px;margin:0 auto}.sxl-chips{justify-content:center}.sxl-chips span{font-size:13px}
 .sxl-ph{width:230px}.sxl-ph+.sxl-ph{display:none}.sxl-cta h2{font-size:21px}.sxl-b{padding:13px 22px;font-size:16px}
 .sxl-st{min-width:100px;padding:12px 10px;flex:1}.sxl-st b{font-size:22px}.sxl-st span{font-size:13px}.sxl-bub{left:auto!important;right:-6px;font-size:12px}}
@media(max-width:700px){.sxl-app{flex-direction:column;margin:10px 12px 0;padding:22px 14px;text-align:center;gap:14px}.sxl-app h2{font-size:22px}.sxl-app-b{width:100%}.sxl-app-b .sxl-b{font-size:15px;padding:13px 10px}}
@media(max-width:360px){.sxl h2{font-size:22px}.sxl-app h2{font-size:20px}.sxl-app-b .sxl-b{font-size:14px}}
@media(prefers-reduced-motion:reduce){.sxl *,.sxl-conf{animation:none!important}}