:root{
  --bg:#F3EFE9; --ink:#2A1E18; --brown:#3E2C23; --accent:#6F4E37;
  --gold:#B08D57; --card:#FFFFFF; --muted:#6b5d54;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Segoe UI",Tahoma,"Noto Naskh Arabic",system-ui,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.8; direction:rtl;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
.btn{
  display:inline-block;background:var(--brown);color:#fff;padding:12px 26px;
  border-radius:999px;font-weight:700;margin:6px;transition:.2s;
}
.btn:hover{background:var(--accent);text-decoration:none;transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--brown);border:2px solid var(--brown)}

header.hero{
  background:linear-gradient(160deg,var(--brown),#23150f);color:#fff;
  text-align:center;padding:64px 20px 72px;
}
.hero img.icon{width:120px;height:120px;border-radius:28px;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.hero h1{font-size:2.4rem;margin:18px 0 6px}
.hero p.tag{font-size:1.15rem;color:#e9ddd0;max-width:620px;margin:0 auto 22px}

nav.top{background:var(--brown);position:sticky;top:0;z-index:5}
nav.top .wrap{display:flex;gap:18px;align-items:center;justify-content:center;padding:12px 20px;flex-wrap:wrap}
nav.top a{color:#f0e6da;font-weight:600}

section{padding:54px 0}
section h2{font-size:1.7rem;color:var(--brown);text-align:center;margin-bottom:30px}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.feature{background:var(--card);border-radius:16px;padding:22px;box-shadow:0 6px 18px rgba(62,44,35,.08)}
.feature .ic{font-size:1.8rem;margin-bottom:8px}
.feature h3{color:var(--accent);font-size:1.15rem;margin-bottom:6px}
.feature p{color:var(--muted);font-size:.97rem}

.shots{display:flex;gap:16px;overflow-x:auto;padding:8px 4px 18px;scroll-snap-type:x mandatory}
.shots img{height:520px;border-radius:22px;box-shadow:0 10px 26px rgba(0,0,0,.18);scroll-snap-align:center;border:1px solid #e4d8cc}

.panel{background:var(--card);border-radius:18px;padding:30px;box-shadow:0 6px 18px rgba(62,44,35,.08);margin-top:14px}
.panel h3{color:var(--brown);margin:18px 0 6px}
.panel ul{padding-right:22px}
.center{text-align:center}

footer{background:#23150f;color:#cdbfb2;text-align:center;padding:30px 20px;font-size:.9rem;margin-top:30px}
footer a{color:#e9ddd0}
.faq dt{font-weight:700;color:var(--brown);margin-top:16px}
.faq dd{color:var(--muted);margin:4px 0 0}
@media(max-width:600px){.hero h1{font-size:1.9rem}.shots img{height:420px}}