@font-face{font-family:'UKIJ Ekran';src:url('https://asar.yarkin.top/font/UKIJEkran.ttf') format('truetype');font-display:swap;}
:root{
    --bg:#f6f7fc; --surface:#fff; --ink:#0f172a; --ink-2:#3f4a63; --muted:#7b88a3;
    --line:#e9edf6; --brand:#5b5bd6; --brand-2:#8b5cf6; --brand-3:#ec4899;
    --ok:#10b981; --danger:#e11d48;
    --ease:cubic-bezier(.2,.8,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{
    font-family:'UKIJ Ekran','Segoe UI','Noto Naskh Arabic','Microsoft YaHei',system-ui,sans-serif;
    background:var(--bg);color:var(--ink);min-height:100vh;direction:rtl;
    display:flex;align-items:center;justify-content:center;padding:22px;overflow-x:hidden;
}
.bg-layer{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;}
.blob.b1{width:400px;height:400px;top:-150px;left:-110px;background:radial-gradient(circle,#ddd6fe,#c7d2fe 60%,transparent 72%);animation:f1 24s var(--ease) infinite;}
.blob.b2{width:340px;height:340px;bottom:-130px;right:-110px;background:radial-gradient(circle,#fde68a,#fef3c7 60%,transparent 72%);opacity:.45;animation:f2 28s var(--ease) infinite;}
@keyframes f1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(30px,50px) scale(1.12);}}
@keyframes f2{0%,100%{transform:translate(0,0) scale(1.05);}50%{transform:translate(-40px,-40px) scale(1);}}

.wrap{position:relative;z-index:1;width:100%;max-width:410px;animation:rise .6s var(--ease) both;}
@keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

.logo-area{text-align:center;margin-bottom:20px;}
.logo-icon{
    width:58px;height:58px;margin:0 auto 12px;border-radius:19px;display:grid;place-items:center;
    color:#fff;font-size:24px;font-weight:700;
    background:linear-gradient(135deg,var(--brand),var(--brand-2) 55%,var(--brand-3));
    box-shadow:0 22px 40px -22px rgba(91,91,214,1);position:relative;overflow:hidden;
}
.logo-icon::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.75) 48%,transparent 62%);
    transform:translateX(-120%);animation:shine 4.5s ease-in-out infinite;
}
@keyframes shine{0%,55%{transform:translateX(-120%);}80%,100%{transform:translateX(120%);}}
.logo-area h1{font-size:20px;font-weight:800;}
.logo-area p{font-size:12.5px;color:var(--muted);margin-top:4px;}

.free-note{
    display:flex;gap:9px;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#eefaf3,#e8f7ff);border:1px solid #cdeee0;
    color:#0d8a63;font-size:12px;font-weight:700;border-radius:999px;
    padding:7px 14px;margin:0 auto 14px;width:fit-content;
}
.free-note .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);}

.card{
    background:var(--surface);border:1px solid var(--line);border-radius:24px;
    padding:26px 22px;box-shadow:0 2px 6px rgba(15,23,42,.05),0 30px 60px -34px rgba(79,70,229,.5);
}
.grp{margin-bottom:15px;}
.grp label{display:block;font-size:13px;font-weight:700;margin-bottom:7px;}
.opt{display:inline-block;background:#f1f4fa;color:var(--muted);font-size:10.5px;padding:2px 8px;border-radius:8px;margin-inline-start:6px;font-weight:600;}
.inp{
    width:100%;padding:13px 15px;border:1px solid var(--line);background:#fbfcff;
    border-radius:14px;font-family:inherit;font-size:15px;color:var(--ink);
    outline:none;transition:all .25s var(--ease);
}
.inp::placeholder{color:#a9b3c7;}
.inp:focus{border-color:#cfcffa;background:#fff;box-shadow:0 0 0 4px rgba(91,91,214,.1);}

.msg{border-radius:13px;padding:11px 13px;font-size:13px;text-align:center;margin-bottom:15px;}
.msg.err{background:#fff1f2;border:1px solid #fecdd3;color:var(--danger);}
.btn{
    width:100%;padding:15px;border:none;border-radius:15px;cursor:pointer;
    font-family:inherit;font-size:16px;font-weight:800;color:#fff;
    background:linear-gradient(135deg,var(--brand),var(--brand-2));
    box-shadow:0 20px 34px -22px rgba(91,91,214,1);
    transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 26px 40px -22px rgba(91,91,214,1);}
.btn:active{transform:scale(.98);}
.btn-ghost{
    display:block;width:100%;margin-top:10px;padding:13px;text-align:center;text-decoration:none;
    border-radius:15px;border:1px solid var(--line);background:#fff;color:var(--ink-2);
    font-size:14px;font-weight:700;transition:all .25s var(--ease);
}
.btn-ghost:hover{border-color:#dcdcfb;color:var(--brand);transform:translateY(-1px);}

.links{text-align:center;margin-top:16px;font-size:13.5px;}
.links a{color:var(--brand);text-decoration:none;font-weight:600;}
.links a:hover{text-decoration:underline;}

.perks{list-style:none;display:grid;gap:8px;margin-top:16px;}
.perks li{display:flex;gap:9px;align-items:flex-start;background:#f8faff;border:1px solid var(--line);border-radius:13px;padding:10px 12px;font-size:12.5px;color:var(--ink-2);}
.perks .ck{flex:none;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#34d399,#10b981);color:#fff;font-size:11px;font-weight:800;margin-top:2px;}

.video-btn{
    display:block;width:100%;margin-top:12px;padding:12px;border-radius:14px;cursor:pointer;
    border:1px dashed #e0d9f7;background:#faf8ff;color:#6d28d9;
    font-family:inherit;font-size:13px;font-weight:700;transition:all .25s var(--ease);
}
.video-btn:hover{background:#f4f0ff;border-color:#cdbdf7;}
.foot{text-align:center;margin-top:16px;font-size:11.5px;color:var(--muted);line-height:1.9;}
.foot .wx{color:#be185d;font-weight:600;}

.video-modal{display:none;position:fixed;inset:0;z-index:999;background:rgba(15,23,42,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);align-items:center;justify-content:center;padding:14px;}
.video-modal.active{display:flex;}
.video-box{background:#fff;border-radius:20px;padding:12px;width:100%;max-width:600px;position:relative;box-shadow:0 30px 70px -30px rgba(15,23,42,.5);}
.video-box video{width:100%;border-radius:12px;display:block;}
.video-close{position:absolute;top:-12px;inset-inline-end:-12px;width:34px;height:34px;border-radius:50%;border:none;background:#e11d48;color:#fff;font-size:18px;cursor:pointer;}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;}}