:root{
  --g-orange:#d4af37;
  --g-orange-2:#c9a227;
  --g-text:#101826;
  --g-muted:#6b7285;
  --g-line:#e7ebf2;
  --g-bg:#f3f5f8;
}
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;min-height:100%;
  background:#0b1220;color:var(--g-text);
  font-family:'Tajawal',sans-serif;
  -webkit-font-smoothing:antialiased;
  touch-action:manipulation;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
input,select,textarea{font-size:16px}
.motion-bg{
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:linear-gradient(120deg,#08111d,#1b2740,#c56a18,#0f1a2b,#1e3a5f);
  background-size:400% 400%;
  animation:fxShift 18s ease infinite;
}
.motion-bg:before,.motion-bg:after{
  content:"";position:absolute;border-radius:50%;filter:blur(52px);opacity:.5;
}
.motion-bg:before{
  width:340px;height:340px;background:#f08a2a;top:-80px;right:-60px;
  animation:fxBlob 10s ease-in-out infinite;
}
.motion-bg:after{
  width:280px;height:280px;background:#3b82f6;bottom:-90px;left:-50px;
  animation:fxBlob 13s ease-in-out infinite reverse;
}
@keyframes fxShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes fxBlob{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(36px,28px) scale(1.14)}
}
@keyframes logoFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
button,input{font-family:inherit}
.gate{
  max-width:430px;margin:0 auto;min-height:100dvh;
  display:flex;flex-direction:column;
  padding:calc(18px + env(safe-area-inset-top)) 22px calc(18px + env(safe-area-inset-bottom));
  position:relative;overflow:hidden;z-index:1;
  background:transparent;color:#fff;
}
.gate:before{
  content:"";position:absolute;inset:8% -10% 28%;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 220' fill='none'><path d='M0 160 C40 140 50 90 90 110 C130 130 140 70 180 95 C220 120 240 50 280 80 C320 110 340 60 400 90 L400 220 L0 220 Z' fill='%23f3f4f6'/><path d='M0 150 C50 120 70 80 110 100 C150 120 170 55 210 85 C250 115 270 40 320 75 C350 95 370 70 400 85' stroke='%23e5e7eb' stroke-width='3'/></svg>") center 40%/120% no-repeat;
  opacity:.9;pointer-events:none;
}
.gate-logo{
  margin:auto 0 0;text-align:center;position:relative;z-index:1;padding-top:8vh;
}
.gate-logo img{
  width:min(86%,340px);border-radius:18px;display:block;margin:0 auto 14px;
  box-shadow:0 18px 40px rgba(16,24,38,.28);
  animation:logoFloat 5s ease-in-out infinite;
}
.gate-name{font-weight:900;font-size:18px;line-height:1.45;margin:0;color:#fff;text-shadow:0 8px 24px rgba(0,0,0,.35)}
.gate-actions{position:relative;z-index:1;margin-top:auto;padding-top:28px}
.btn-fill,.btn-line{
  display:flex;align-items:center;justify-content:center;
  width:100%;border-radius:14px;padding:15px 16px;
  font-weight:900;font-size:16px;font-family:inherit;text-decoration:none;
  margin-bottom:12px;
}
.btn-fill{background:linear-gradient(180deg,#f0d078,#c9a227);color:#1a1406;border:0}
.btn-line{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.75)}
.gate-foot{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  margin-top:10px;font-weight:800;font-size:13px;color:#fff;
}
.gate-foot a{color:#fff;text-decoration:none}
.gate-foot a b{color:var(--g-orange)}
.flag{font-size:18px}

.auth-shell{
  min-height:100dvh;
  background:transparent;
  display:flex;align-items:center;justify-content:center;
  padding:calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
  position:relative;z-index:1;
}
.auth-wrap{
  width:min(920px,100%);
  display:grid;
  grid-template-columns:1fr;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.4);
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(16,24,38,.22);
  backdrop-filter:blur(16px);
}
.auth-brand{
  display:none;
  background:
    linear-gradient(180deg, rgba(16,24,38,.08), rgba(16,24,38,.28)),
    #101826;
  color:#fff;
  padding:36px 32px;
  position:relative;
}
.auth-brand img{
  width:100%;max-height:220px;object-fit:cover;border-radius:18px;
  box-shadow:0 16px 40px rgba(0,0,0,.25);
}
.auth-brand h2{margin:22px 0 8px;font-size:26px;line-height:1.45}
.auth-brand p{margin:0;color:#dbe3ee;line-height:1.8;font-weight:700}
.auth-brand .pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.auth-brand .pills span{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);
  border-radius:999px;padding:7px 12px;font-size:12px;font-weight:800;
}
.auth{
  max-width:none;margin:0;min-height:auto;background:#fff;
  padding:28px 24px 26px;
}
.auth-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.auth-top img{height:42px;width:auto;max-width:160px;border-radius:10px;object-fit:cover}
.back{
  width:40px;height:40px;border:1px solid var(--g-line);border-radius:12px;background:#fff;
  display:flex;align-items:center;justify-content:center;color:#334155;text-decoration:none;
}
.auth-kicker{
  color:var(--g-orange);font-weight:900;font-size:12px;letter-spacing:.4px;margin:10px 0 4px;
}
.auth h1{font-size:26px;margin:0 0 8px;letter-spacing:-.3px}
.auth .lead{margin:0 0 18px;color:var(--g-muted);font-weight:700;line-height:1.7;font-size:14px}
.auth .field{margin-bottom:14px}
.auth label{display:block;font-weight:800;font-size:13px;color:#5b6472;margin-bottom:7px}
.auth .control{
  position:relative;
}
.auth .control i{
  position:absolute;top:50%;transform:translateY(-50%);
  right:14px;color:#94a3b8;font-size:14px;pointer-events:none;
}
.auth .control input{
  padding-right:42px;
}
html[dir="rtl"] .auth .control i{right:auto;left:14px}
html[dir="rtl"] .auth .control input{padding-right:14px;padding-left:42px}
.auth input{
  width:100%;border:1px solid var(--g-line);background:#f8fafc;border-radius:14px;
  padding:13px 14px;font:inherit;font-weight:800;font-size:16px;outline:none;color:var(--g-text);
}
.auth input:focus{border-color:var(--g-orange);box-shadow:0 0 0 4px rgba(240,138,42,.14);background:#fff}
.auth .go{
  width:100%;border:0;border-radius:14px;padding:14px;margin-top:6px;
  background:linear-gradient(180deg, #f0d078, var(--g-orange-2));
  color:#1a1406;font-weight:900;font-size:16px;font-family:inherit;cursor:pointer;
  box-shadow:0 10px 18px rgba(201,162,39,.28);
}
.auth .go:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}
.auth .ghost{
  width:100%;border:1.5px solid #eadfd3;background:#fff;color:#334155;
  border-radius:14px;padding:13px;margin-top:10px;font-weight:900;font-family:inherit;cursor:pointer;
}
.auth .hint{text-align:center;margin-top:16px;color:#64748b;font-weight:800;font-size:13px}
.auth .hint a{color:var(--g-orange);font-weight:900;text-decoration:none;cursor:pointer}
.auth-sec{display:none}
.auth-sec.on{display:block}
.alert-message{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  background:#111827;color:#fff;border-radius:14px;padding:10px 14px;
  opacity:0;pointer-events:none;transition:.2s;z-index:50;font-weight:800;font-size:13px;max-width:90%;
}
.alert-message.show{opacity:1;transform:translateX(-50%) translateY(0)}
.check{display:flex;align-items:center;gap:8px;margin:4px 0 10px;font-weight:800;font-size:13px;color:#64748b}
.check input{width:16px;height:16px;accent-color:var(--g-orange)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.otp-mail{
  display:flex;align-items:center;gap:10px;
  background:#f8fafc;border:1px solid var(--g-line);border-radius:14px;
  padding:10px 12px;margin:0 0 16px;font-weight:800;font-size:13px;color:#334155;
}
.otp-mail i{color:var(--g-orange)}
.otp-boxes{
  display:flex;justify-content:space-between;gap:8px;direction:ltr;margin:4px 0 14px;
}
.otp-boxes input{
  width:100%;max-width:52px;height:56px;text-align:center;font-size:22px;font-weight:900;
  border-radius:14px;padding:0;letter-spacing:0;
}
.resend{
  background:none;border:0;color:var(--g-orange);font-weight:900;font-family:inherit;
  cursor:pointer;padding:0;font-size:13px;
}
.resend:disabled{color:#94a3b8;cursor:not-allowed}
.secure-note{
  display:flex;align-items:center;gap:8px;color:#7b8494;font-size:12px;font-weight:800;margin-top:12px;
}
.secure-note i{color:#16a34a}
@media (min-width:860px){
  .auth-wrap{grid-template-columns:.92fr 1.08fr;min-height:620px}
  .auth-brand{display:flex;flex-direction:column;justify-content:space-between}
  .auth{padding:40px 42px}
}
@media (max-width:520px){
  .row2{grid-template-columns:1fr}
  .auth-wrap{border:0;border-radius:0;box-shadow:none;background:rgba(255,255,255,.92)}
  .auth-shell{padding:0;background:transparent;align-items:stretch}
  .auth{min-height:100dvh;padding:calc(14px + env(safe-area-inset-top)) 18px 28px;background:transparent}
}

.land-page{
  min-height:100dvh;background:#070b16;color:#fff;
}
.land-stars{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(212,175,55,.28), transparent 55%),
    radial-gradient(900px 420px at 80% 20%, rgba(56,189,248,.12), transparent 50%),
    #070b16;
}
.land-stars:before{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 42%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 62% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 58%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 70%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 12%, #fff 50%, transparent 51%);
  opacity:.7;animation:starPulse 6s ease-in-out infinite;
}
.land-stars:after{
  content:"";position:absolute;left:-20%;right:-20%;bottom:-8%;height:58%;
  background:
    linear-gradient(transparent, rgba(7,11,22,.2) 10%, transparent 11%),
    repeating-linear-gradient(to right, rgba(96,165,250,.18) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(to top, rgba(96,165,250,.14) 0 1px, transparent 1px 42px);
  transform:perspective(420px) rotateX(62deg);
  transform-origin:bottom center;
  mask-image:linear-gradient(to top, rgba(0,0,0,.9), transparent 78%);
  animation:gridDrift 16s linear infinite;
}
@keyframes starPulse{0%,100%{opacity:.55}50%{opacity:.9}}
@keyframes gridDrift{0%{background-position:0 0,0 0,0 0}100%{background-position:0 0,42px 0,0 42px}}
.land-top{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(12px + env(safe-area-inset-top)) 18px 8px;
}
.land-brand{display:flex;align-items:center;gap:8px;font-weight:900}
.land-brand img{width:36px;height:36px;border-radius:10px;object-fit:cover;animation:logoFloat 5s ease-in-out infinite}
.land-menu{
  width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;background:rgba(255,255,255,.06)
}
.land{position:relative;z-index:2;max-width:430px;margin:0 auto;padding:8px 20px 28px}
.land-hero{text-align:center;padding-top:2.2vh}
.land-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(232,193,90,.12);border:1px solid rgba(232,193,90,.35);
  color:#e8c15a;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:800;
  margin-bottom:14px
}
.land-hero h1{
  font-size:30px;line-height:1.35;margin:0 0 12px;letter-spacing:-.4px;
  text-shadow:0 10px 30px rgba(0,0,0,.35)
}
.land-hero h1 em{font-style:normal;color:#e8c15a}
.land-hero p{
  margin:0 auto 18px;max-width:340px;color:#c9d4e5;font-weight:700;line-height:1.85;font-size:14px
}
.land-cta{
  display:flex;align-items:center;justify-content:center;
  width:100%;max-width:360px;margin:0 auto;
  background:linear-gradient(180deg,#f0d078,#c9a227);
  color:#1a1406;text-decoration:none;border-radius:999px;padding:15px 18px;
  font-weight:900;font-size:16px;box-shadow:0 14px 30px rgba(201,162,39,.35)
}
.land-analytics{
  margin-top:22px;background:rgba(10,16,28,.9);border:1px solid rgba(255,255,255,.1);
  border-radius:22px;padding:14px 14px 12px;box-shadow:0 18px 40px rgba(0,0,0,.28);
  backdrop-filter:blur(12px)
}
.an-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.an-head b{display:block;font-size:14px}
.an-head span{display:block;color:#94a3b8;font-size:11px;font-weight:700;margin-top:2px}
.an-live{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(52,211,153,.12);color:#34d399;border:1px solid rgba(52,211,153,.35);
  border-radius:999px;padding:6px 10px;font-size:11px;font-weight:800
}
.an-live i{font-size:7px;animation:livePulse 1.4s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:.45}50%{opacity:1}}
.an-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.an-stat{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:14px;padding:10px 8px;text-align:center
}
.an-stat span{display:block;color:#94a3b8;font-size:10px;font-weight:700;margin-bottom:4px}
.an-stat strong{display:block;font-size:16px;font-weight:900;letter-spacing:-.3px}
.an-stat em{display:block;margin-top:3px;font-style:normal;font-size:10px;font-weight:800}
.an-stat .up,.an-tags .up,.people-row em.up{color:#34d399}
.an-chart{position:relative;margin-top:4px}
.an-chart svg{width:100%;height:110px;display:block;overflow:visible}
.an-chart .an-grid{stroke:rgba(148,163,184,.18);stroke-width:1}
#anLine{filter:drop-shadow(0 0 8px rgba(232,193,90,.55));animation:lineDraw 2.4s ease-out}
@keyframes lineDraw{from{opacity:.2}to{opacity:1}}
.an-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.an-tags span{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800;color:#cbd5e1
}
.an-tags b{margin-right:4px}
.land-people{
  margin-top:16px;background:rgba(12,18,32,.88);border:1px solid rgba(255,255,255,.08);
  border-radius:22px;padding:14px;overflow:hidden
}
.people-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.people-head b{display:block;font-size:13px}
.people-head span{display:block;color:#94a3b8;font-size:11px;font-weight:700;margin-top:2px}
.people-head .stars{margin-right:auto;color:#fbbf24;letter-spacing:1px;font-size:11px;white-space:nowrap}
.faces{display:flex}
.faces span{
  width:28px;height:28px;border-radius:50%;border:2px solid #0f172a;margin-left:-8px;
  background:linear-gradient(180deg,#f08a2a,#7c2d12)
}
.faces-lg span{width:30px;height:30px}
.faces span:nth-child(2){background:linear-gradient(180deg,#38bdf8,#1e3a8a)}
.faces span:nth-child(3){background:linear-gradient(180deg,#fbbf24,#92400e)}
.faces span:nth-child(4){background:linear-gradient(180deg,#34d399,#065f46)}
.faces span:nth-child(5){background:linear-gradient(180deg,#a78bfa,#4c1d95)}
.faces span:nth-child(6){background:linear-gradient(180deg,#fb7185,#9f1239)}
.people-feed{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow:hidden}
.people-row{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:14px;padding:9px 10px;animation:rowIn .45s ease
}
.people-row.in{animation:rowIn .45s ease}
@keyframes rowIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.people-row .p-av{
  width:36px;height:36px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  color:#0b1220;font-weight:900;font-size:12px
}
.people-row b{display:block;font-size:13px}
.people-row span{display:block;color:#94a3b8;font-size:11px;font-weight:700;margin-top:1px}
.people-row em{margin-right:auto;font-style:normal;color:#64748b;font-size:10px;font-weight:800;white-space:nowrap}
.land-card{
  margin-top:18px;background:rgba(12,18,32,.88);border:1px solid rgba(255,255,255,.08);
  border-radius:28px;padding:22px 18px 20px;text-align:center
}
.land-card h2{margin:0 0 8px;font-size:20px;color:#e8c15a}
.land-card p{margin:0 0 16px;color:#c9d4e5;font-weight:700;line-height:1.8}
.land-ghost{
  display:block;margin:12px auto 0;color:#e2e8f0;font-weight:800;text-decoration:none;font-size:14px
}