:root{
  --bg:#0b1220; --card:rgba(255,255,255,.06); --line:rgba(255,255,255,.14);
  --text:#eef2ff; --muted:#aab4d0; --a:#22d3a6; --b:#6366f1;
  --grad:linear-gradient(135deg,var(--a),var(--b));
}
@media (prefers-color-scheme: light){
  :root{--bg:#f4f6fb; --card:rgba(255,255,255,.8); --line:rgba(15,23,42,.12); --text:#0f172a; --muted:#475569}
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Segoe UI","Noto Sans Arabic","Geeza Pro","Tahoma",system-ui,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.8;
  display:grid; place-items:center; overflow-x:hidden;
}
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.45}
.orb-1{width:420px;height:420px;background:var(--a);top:-120px;inset-inline-start:-100px}
.orb-2{width:480px;height:480px;background:var(--b);bottom:-160px;inset-inline-end:-120px}
.grid{position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:48px 48px;opacity:.35;
  mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%)}
.wrap{width:100%;max-width:720px;padding:24px 16px;display:flex;flex-direction:column;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:14px}
.brand img{border-radius:16px}
.brand-name{font-size:2rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.card{
  width:100%;padding:clamp(24px,5vw,48px);text-align:center;
  background:var(--card);border:1px solid var(--line);border-radius:28px;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.55);
  animation:rise .7s ease both;
}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border:1px solid var(--line);border-radius:999px;font-size:.85rem;color:var(--muted);margin-bottom:20px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--a);box-shadow:0 0 0 4px rgba(34,211,166,.2)}
h1{font-size:clamp(1.7rem,5vw,2.6rem);line-height:1.4;font-weight:800;margin-bottom:14px}
h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--muted);font-size:1.08rem;max-width:520px;margin-inline:auto}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:30px 0}
.notice{
  display:flex;align-items:center;gap:16px;text-align:start;
  padding:20px 22px;border-radius:18px;border:1px solid transparent;
  background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--grad) border-box;
}
.notice svg{flex:none;color:var(--a)}
.notice p{font-weight:700;font-size:1.1rem}
.badges{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.badges li{padding:6px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:.85rem;color:var(--muted)}
.foot{font-size:.8rem;color:var(--muted)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.card{animation:none}}