/* r3 perf (02427552): landing only - Plex with font-display:optional so the hero never jumps when the web font arrives late (CLS); fonts are preloaded in index.html */
@font-face{font-family:'Plex';font-weight:400;font-display:optional;src:url(/fonts/plex-ar-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}@font-face{font-family:'Plex';font-weight:400;font-display:optional;src:url(/fonts/plex-ar-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}@font-face{font-family:'Plex';font-weight:700;font-display:optional;src:url(/fonts/plex-ar-arabic-700.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}@font-face{font-family:'Plex';font-weight:700;font-display:optional;src:url(/fonts/plex-ar-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}

.lnav{display:flex;align-items:center;gap:12px;padding:14px 22px;max-width:1160px;margin:0 auto}
.lnav .sp{flex:1}
.lh{max-width:1160px;margin:0 auto;padding:36px 22px 20px;display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center}
.lh h1{font-size:clamp(30px,4.6vw,52px);line-height:1.15;margin:0 0 14px;letter-spacing:-.01em}
.lh h1 em{font-style:normal;background:linear-gradient(135deg,#3b1366,#8650d6);-webkit-background-clip:text;background-clip:text;color:transparent}
.lh p.sub{font-size:18px;color:var(--ink2);margin:0 0 22px;max-width:30em}
.lh .cta{display:flex;gap:10px;flex-wrap:wrap}.lh .cta .btn{min-height:50px;padding:0 22px;font-size:16px;border-radius:14px}
.trust{display:flex;gap:16px;flex-wrap:wrap;margin-top:20px;color:var(--mut);font-size:13px}.trust span{display:flex;gap:6px;align-items:center}
.lfeat{max-width:1160px;margin:0 auto;padding:30px 22px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.lfeat .f{padding:20px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.lfeat .f .i{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--p1);color:var(--p7);margin-bottom:10px}
.lfeat h3{margin:0 0 4px;font-size:16px}.lfeat p{margin:0;color:var(--mut);font-size:14px}
.lband{max-width:1160px;margin:20px auto;padding:30px;border-radius:26px;background:var(--grad);color:#fff;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.lband h2{margin:0;font-size:24px}.lband .btn{background:#fff;color:var(--p8);border:0;min-height:48px}
.lsteps{max-width:1160px;margin:0 auto;padding:30px 22px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.lsteps div{padding:18px;border-inline-start:3px solid var(--p3)}.lsteps b{display:block;margin-bottom:4px}
.lsteps div::before{counter-increment:s;content:counter(s);display:inline-flex;width:28px;height:28px;border-radius:50%;background:var(--p2);color:var(--p8);font-weight:700;align-items:center;justify-content:center;margin-bottom:8px}
.lfoot{max-width:1160px;margin:20px auto 0;padding:24px 22px 40px;border-top:1px solid var(--line);display:flex;gap:14px;flex-wrap:wrap;color:var(--mut);font-size:13px}
.lfoot a{color:var(--mut)}
@media (max-width:900px){.lh{grid-template-columns:1fr;padding-top:18px;gap:26px}.lfeat{grid-template-columns:1fr 1fr}.lsteps{grid-template-columns:1fr}.lband{margin:20px 16px}}
@media (max-width:520px){.lfeat{grid-template-columns:1fr}.lnav{padding:12px 14px}.lh{padding-inline:16px}.lh .cta .btn{flex:1}}
/* meet hero art */
.mart{position:relative;aspect-ratio:4/3.1;border-radius:28px;background:#1b0f2e;padding:14px;box-shadow:0 30px 80px rgba(59,19,102,.35);overflow:hidden}
.mart .g{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;height:calc(100% - 58px)}
.mart .tl{border-radius:16px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mart .tl b{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px}
.mart .tl i{position:absolute;bottom:8px;inset-inline-start:8px;background:rgba(20,8,36,.6);color:#fff;font-style:normal;font-size:12px;padding:1px 8px;border-radius:7px}
.mart .t1{background:linear-gradient(140deg,#4f1d86,#8650d6)}.mart .t2{background:linear-gradient(140deg,#174d42,#18a383);animation:spk 2.4s infinite}.mart .t3{background:linear-gradient(140deg,#3b1366,#6a2fb0)}.mart .t4{background:linear-gradient(140deg,#6a2fb0,#c9b3f0)}
@keyframes spk{0%,100%{box-shadow:inset 0 0 0 3px #3ee0b8}50%{box-shadow:inset 0 0 0 0 transparent}}
.mart .hand{position:absolute;top:10px;inset-inline-start:10px;background:#f5c542;color:#3b1366;border-radius:9px;padding:2px 8px;font-size:12px;font-weight:700;animation:pop 3s infinite}
@keyframes pop{0%,60%{transform:scale(0)}70%,100%{transform:scale(1)}}
.mart .bar{height:44px;margin-top:14px;display:flex;justify-content:center;gap:8px}
.mart .bar span{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;color:#fff}
.mart .bar span.l{width:76px;border-radius:20px;background:linear-gradient(135deg,#3b1366,#6a2fb0)}
.mart .bub{position:absolute;inset-inline-end:-6px;bottom:70px;background:#fff;color:var(--ink);border-radius:14px 14px 4px 14px;padding:8px 12px;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:60%;animation:slide 4s infinite}
@keyframes slide{0%,30%{opacity:0;transform:translateY(8px)}40%,90%{opacity:1;transform:none}100%{opacity:0}}

/* r8 d45360ad: feature titles are h2 (heading order after the h1) */
.lfeat h2{margin:0 0 4px;font-size:16px}