:root{
  --red:#D9301C; --red-dark:#A81E10; --orange:#F2711C; --yellow:#FFB21E;
  --cream:#FFF7EE; --ink:#2A1510; --muted:#7A5A50; --card:#FFFFFF;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  font-family:'Tajawal',system-ui,sans-serif; color:var(--ink);
  background:var(--cream);
  background-image:radial-gradient(circle at 20% 0%, #FFE3C8 0, transparent 45%),
                   radial-gradient(circle at 100% 30%, #FFE9D6 0, transparent 40%);
  -webkit-tap-highlight-color:transparent;
}
.page{max-width:480px;margin:0 auto;padding:0 16px 120px;position:relative;z-index:1}

/* الهيدر */
.hero{
  text-align:center; color:#fff; margin:0 -16px; padding:28px 16px 64px;
  background:linear-gradient(160deg,var(--red) 0%,var(--red-dark) 100%);
  border-radius:0 0 36px 36px; position:relative; overflow:hidden;
}
.hero::after{ /* لمعة خفيفة */
  content:""; position:absolute; inset:-40% -20% auto auto; width:260px; height:260px;
  background:radial-gradient(circle,rgba(255,178,30,.45),transparent 70%);
}
.logo-ring{
  width:132px; height:132px; margin:0 auto; border-radius:50%; padding:5px;
  background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.25); position:relative; z-index:1;
  animation:pop .6s cubic-bezier(.2,1.4,.4,1) both;
}
.logo-ring img{width:100%;height:100%;border-radius:50%;display:block}
.tagline{font-family:'Lalezar',sans-serif;font-size:20px;color:var(--yellow);margin-top:10px;position:relative;z-index:1}
.hero h1{font-family:'Lalezar',sans-serif;font-weight:400;font-size:44px;line-height:1.15;position:relative;z-index:1;text-shadow:0 3px 0 rgba(0,0,0,.18)}
.hero h1 span:not(.n1){display:block;font-size:26px;color:#FFE1C2}
.welcome{margin-top:8px;font-size:16px;opacity:.92;position:relative;z-index:1}

/* المربعات */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:-40px;position:relative;z-index:2}
.tile{
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  padding:16px; min-height:128px; border-radius:22px; border:0;
  background:var(--card); color:var(--ink); text-decoration:none; font:inherit; text-align:right;
  box-shadow:0 6px 18px rgba(120,40,20,.10); cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  animation:rise .5s ease both;
}
.tile:active{transform:scale(.97)}
.tile:hover{box-shadow:0 10px 24px rgba(120,40,20,.16)}
.icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;color:#fff;flex:none}
.icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon svg .fill{fill:currentColor;stroke:none}
.text{display:flex;flex-direction:column;gap:2px}
.text b{font-size:19px;font-weight:800}
.text small{font-size:13px;color:var(--muted);font-weight:500}

.tile-menu{grid-column:1/-1;flex-direction:row;align-items:center;min-height:auto;padding:18px;
  background:linear-gradient(135deg,var(--orange),var(--red));color:#fff}
.tile-menu .icon{background:rgba(255,255,255,.22);width:60px;height:60px;border-radius:18px}
.tile-menu .icon svg{width:32px;height:32px}
.tile-menu .text b{font-size:26px;font-family:'Lalezar',sans-serif;font-weight:400}
.tile-menu .text small{color:#FFE6D3;font-size:14px}
.tile-menu .arrow{margin-inline-start:auto;width:28px;height:28px;fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:.9}

.tile-wa .icon{background:#25D366}
.tile-call .icon{background:#1E88E5}
.tile-map .icon{background:var(--red)}
.tile-admin{grid-column:1/-1;flex-direction:row;align-items:center;min-height:auto;background:#2A1510;color:#fff}
.tile-admin .icon{background:rgba(255,255,255,.14)}
.tile-admin .text small{color:#D9BFB5}
.tiles .tile:nth-child(6){animation-delay:.4s}
.back{grid-column:1/-1;flex-direction:row;align-items:center;min-height:auto}
.tile-share .icon,.back .icon{background:var(--yellow);color:var(--ink)}

.tiles .tile:nth-child(1){animation-delay:.05s}
.tiles .tile:nth-child(2){animation-delay:.12s}
.tiles .tile:nth-child(3){animation-delay:.19s}
.tiles .tile:nth-child(4){animation-delay:.26s}
.tiles .tile:nth-child(5){animation-delay:.33s}

.foot{text-align:center;color:var(--muted);font-size:13px;margin-top:26px}

/* لهب أسفل الشاشة مثل اللوحة */
.flames{
  position:fixed; left:0; right:0; bottom:0; height:70px; pointer-events:none; z-index:0;
  background:
    radial-gradient(18px 46px at 10px 100%, var(--yellow) 60%, transparent 62%) 0 100%/28px 70px repeat-x,
    radial-gradient(22px 64px at 14px 100%, var(--orange) 60%, transparent 62%) 7px 100%/36px 70px repeat-x,
    linear-gradient(to top, rgba(217,48,28,.35), transparent);
  opacity:.55; animation:flicker 1.6s ease-in-out infinite alternate;
}

.toast{position:fixed;bottom:90px;left:50%;transform:translate(-50%,20px);background:var(--ink);color:#fff;
  padding:10px 18px;border-radius:999px;font-size:14px;opacity:0;transition:.25s;z-index:5}
.toast.show{opacity:1;transform:translate(-50%,0)}

@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes rise{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@keyframes flicker{from{transform:scaleY(1)}to{transform:scaleY(1.12)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* زر اللغة */
.lang-btn{position:absolute;top:14px;inset-inline-end:14px;z-index:3;border:1.5px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.14);color:#fff;font:700 14px 'Tajawal',sans-serif;padding:7px 14px;border-radius:999px;cursor:pointer}
.lang-btn:active{transform:scale(.95)}
html[dir=ltr] .tile{text-align:left}
html[dir=ltr] .arrow{transform:scaleX(-1)}
html[dir=ltr] .back .icon svg{transform:scaleX(-1)}
html[lang=en] .hero h1{font-size:38px}