/* Emad Afandi — Design System v2 (موحد مع موقع المنيو) */
:root{
  --bg:#000; --card:#1a1d1f; --card2:#22262a;
  --gold:#d4af37; --gold-2:#f1dd9a; --gold-dim:rgba(212,175,55,.16);
  --cream:#F5EFE6; --muted:#9CA3AF;
  --font-arabic:"Noto Kufi Arabic","Inter",system-ui,sans-serif;
  --font-latin:"Outfit","Noto Kufi Arabic",system-ui,sans-serif;
  --font-body:"Inter","Noto Kufi Arabic",system-ui,sans-serif;
  --r:20px; --border:1px solid rgba(212,175,55,.25);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--font-body);color:var(--cream);background:var(--bg);
  min-height:100vh;display:flex;justify-content:center;-webkit-tap-highlight-color:transparent;
}
.bg-glow{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(700px 340px at 50% -80px,rgba(212,175,55,.30),transparent 70%),
             radial-gradient(560px 420px at 88% 42%,rgba(212,175,55,.10),transparent 70%),
             radial-gradient(620px 500px at 8% 92%,rgba(212,175,55,.12),transparent 70%)}
.bg-pattern{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.7;
  background:url("./assets/waves.svg") center top / 170% auto no-repeat;
  filter:blur(1px) saturate(1.15);
  -webkit-mask-image:radial-gradient(ellipse 125% 78% at 50% 0%,#000 8%,transparent 86%);
  mask-image:radial-gradient(ellipse 125% 78% at 50% 0%,#000 8%,transparent 86%);
  animation:waveDrift 22s ease-in-out infinite alternate}
@keyframes waveDrift{from{background-position:46% 0}to{background-position:56% 0}}
.phone{width:100%;max-width:430px;padding:28px 18px 60px;position:relative;z-index:1}

/* reveal animation */
.reveal{opacity:0;transform:translateY(22px);filter:blur(6px);transition:opacity .65s ease var(--d,0s),transform .65s ease var(--d,0s),filter .65s ease var(--d,0s)}
.reveal.in{opacity:1;transform:none;filter:blur(0)}
@media (prefers-reduced-motion:reduce){.reveal{transition:none;opacity:1;transform:none;filter:none}}

/* HERO */
.hero{text-align:center;margin-bottom:16px}
.logo-wrap{display:flex;justify-content:center;margin-bottom:14px}
.logo-shine{position:relative;display:inline-block;animation:float 5s ease-in-out infinite}
.logo-glow{position:absolute;inset:-28px;background:radial-gradient(closest-side,rgba(212,175,55,.38),transparent 72%);filter:blur(16px);pointer-events:none}
.logo-alone{position:relative;z-index:1;display:block;width:190px;height:auto}
.logo-fallback-alone{display:flex;flex-direction:column;align-items:center;gap:4px}
.logo-ar{font-family:var(--font-arabic);font-weight:900;font-size:28px;color:#fff;line-height:1.4}
.logo-en{font-family:var(--font-latin);font-size:10px;letter-spacing:3px;color:var(--gold)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.tagline-wrap{display:flex;align-items:center;justify-content:center;gap:12px;margin:4px 0 10px;min-height:26px}
.rule{width:36px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.rule.flip{background:linear-gradient(90deg,var(--gold),transparent)}
.tagline-live{font-family:var(--font-arabic);font-weight:700;font-size:15px;color:var(--gold-2);letter-spacing:.5px;transition:opacity .45s ease,transform .45s ease}
.tagline-live.swap{opacity:0;transform:translateY(8px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* buttons + cards */
.row-2{display:flex;gap:10px;margin:14px 0}
.btn-gold{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#1a1408;font-weight:800;font-size:15px;
  padding:14px;border-radius:16px;transition:transform .15s}
.btn-gold:active{transform:scale(.97)}
.btn-ghost{width:56px;border-radius:16px;border:var(--border);background:var(--card);color:var(--gold);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform .15s}
.btn-ghost:active{transform:scale(.94)}
.card{background:linear-gradient(180deg,var(--card2),var(--card));border:var(--border);border-radius:var(--r);padding:18px;margin:14px 0}
.card-flat{background:#0A0A0A;border:1px solid rgba(212,175,55,.38);box-shadow:0 12px 36px rgba(0,0,0,.55),0 0 24px rgba(212,175,55,.07)}
.card-flat .soc{background:#0B0D0F}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.card-head h2{font-size:17px;font-weight:800}
.pill{font-size:11px;color:var(--gold-2);background:var(--gold-dim);border:1px solid rgba(212,175,55,.28);padding:4px 10px;border-radius:999px;font-weight:700}

.pay{display:flex;align-items:center;gap:12px;background:rgba(0,0,0,.35);border:1px solid rgba(212,175,55,.5);
  box-shadow:0 6px 18px rgba(0,0,0,.45),0 0 14px rgba(212,175,55,.06),inset 0 1px 0 rgba(255,255,255,.05);
  border-radius:16px;padding:12px;margin-bottom:10px;transition:transform .15s,border-color .2s}
.pay:last-child{margin-bottom:0}
.pay:active{transform:scale(.98)}
.pay-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:22px;flex-shrink:0}
.pay-icon img{width:34px;height:34px;object-fit:contain}
.pay-icon.voda{background:#E60000}
.pay-hint{font-size:12px;color:var(--muted);font-weight:700}
.stars-row{color:#FBBC04;font-size:12px;letter-spacing:2px;line-height:1}
.pay-info{flex:1;display:flex;flex-direction:column;gap:2px}
.pay-info strong{font-family:var(--font-latin);font-size:15px}
.pay-num{font-family:var(--font-latin);font-size:14px;color:var(--gold-2);font-weight:600;letter-spacing:1px}
.pay-actions{display:flex;gap:6px}
.btn-open{min-width:96px;padding:12px 22px;font-size:14px;text-align:center}
.mini{font-family:inherit;font-size:12.5px;font-weight:800;padding:9px 13px;border-radius:11px;cursor:pointer;text-decoration:none;border:none}
.mini.gold{background:var(--gold);color:#1a1408}
.mini.ghost{background:rgba(255,255,255,.08);color:var(--cream);border:1px solid rgba(255,255,255,.1)}
.social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.soc{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 10px;border-radius:16px;text-decoration:none;
  font-size:11.5px;font-weight:700;color:var(--cream);background:rgba(0,0,0,.3);border:1px solid rgba(212,175,55,.48);box-shadow:0 6px 18px rgba(0,0,0,.45),0 0 14px rgba(212,175,55,.07),inset 0 1px 0 rgba(255,255,255,.06);transition:transform .15s;min-height:112px}
.soc-top{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;min-height:0}
.nowrap{white-space:nowrap;font-size:10.5px;letter-spacing:.2px;text-align:center}
.soc svg{width:40px;height:40px}
.soc img{width:40px;height:40px;object-fit:contain}
.soc img.soc-logo{width:44px;height:44px}
.soc img.soc-logo-menu{width:60px;height:auto}
.soc img,.soc-logo,.soc svg{-webkit-box-reflect:below 4px linear-gradient(transparent 62%,rgba(255,255,255,.20));animation:logoFloat 4s ease-in-out infinite}
.social-grid .soc:nth-child(2) img,.social-grid .soc:nth-child(2) .soc-logo,.social-grid .soc:nth-child(2) svg{animation-delay:1.3s}
.social-grid .soc:nth-child(3) img,.social-grid .soc:nth-child(3) .soc-logo,.social-grid .soc:nth-child(3) svg{animation-delay:2.6s}
.pay-icon img,.pay-icon svg{-webkit-box-reflect:below 3px linear-gradient(transparent 60%,rgba(255,255,255,.18));animation:logoFloat 4s ease-in-out infinite}
#payVoda .pay-icon img,#payVoda .pay-icon svg{animation-delay:2s}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.soc img,.soc-logo,.soc svg,.pay-icon img,.pay-icon svg,.logo-shine,.bg-pattern{animation:none}}
.soc:active{transform:scale(.93)}

.toast{position:fixed;bottom:26px;right:50%;transform:translateX(50%) translateY(20px);opacity:0;z-index:50;
  background:var(--gold);color:#1a1408;font-weight:800;font-size:14px;padding:12px 22px;border-radius:999px;
  transition:all .3s;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.toast.show{opacity:1;transform:translateX(50%) translateY(0)}