/* غُزار — هوية الموقع العام. نفس توكنات التطبيق (ثيم Onyx). */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&family=Cinzel:wght@600&display=swap');

:root{
  --bg:#0A0805; --surface:#151009; --surface2:#1C150C;
  --gold:#D4AF37; --gold-soft:rgba(212,175,55,.12); --gold-line:rgba(212,175,55,.28);
  --text:#F4EBD2; --text-2:#C9BE9F; --text-3:#8C8267;
  --hairline:rgba(255,255,255,.07);
  --danger:#E07B6B;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Cairo,system-ui,sans-serif; font-size:16px; line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gold); text-decoration:none}
a:hover{text-decoration:underline}

/* خلفية بنسيج النقاط زي التطبيق */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(circle, rgba(212,175,55,.08) 1px, transparent 1px);
  background-size:26px 26px; background-position:13px 13px;
}

.wrap{max-width:820px; margin:0 auto; padding:0 20px}

/* الترويسة */
header{padding:44px 0 30px; text-align:center; border-bottom:1px solid var(--hairline)}
.mark{display:inline-flex; flex-direction:column; align-items:center; gap:12px}
.cart{position:relative; width:62px; height:96px}
.cart-box{position:absolute; inset:0; border:2px solid var(--gold); border-radius:31px;
  box-shadow:0 0 14px rgba(212,175,55,.35), inset 0 0 8px rgba(212,175,55,.1)}
.cart-in{position:absolute; inset:6px; border:1px solid rgba(212,175,55,.55); border-radius:26px}
.cart img{position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); width:38px; height:40px; object-fit:contain}
.cart-base{position:absolute; left:50%; bottom:-11px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:2px}
.cart-base i{display:block; height:2px; background:var(--gold); border-radius:2px}
.cart-base i:nth-child(1){width:32px}
.cart-base i:nth-child(2){width:24px; opacity:.8}
.cart-base i:nth-child(3){width:17px; opacity:.6}
.brand{font-size:34px; font-weight:700; margin-top:16px; letter-spacing:-.5px}
.brand-en{font-family:Cinzel,serif; font-size:11px; letter-spacing:.4em; color:var(--gold); opacity:.8; padding-right:.4em}

/* المحتوى */
main{padding:36px 0 20px}
h1{font-size:27px; font-weight:700; margin:0 0 8px}
.meta{color:var(--text-3); font-size:13.5px; margin:0 0 30px}
.lead{color:var(--text-2); font-size:17px; margin:0 0 32px}

section{margin:0 0 30px; padding:22px 24px; background:var(--surface);
  border:1px solid var(--hairline); border-radius:14px}
section h2{font-size:19px; font-weight:700; margin:0 0 10px; color:var(--gold)}
section p{margin:0; color:var(--text-2)}
section p + p{margin-top:12px}

.note{padding:18px 22px; background:var(--gold-soft); border:1px solid var(--gold-line);
  border-radius:14px; margin:0 0 30px; color:var(--text-2); font-size:15px}
.warn{background:rgba(224,123,107,.09); border-color:rgba(224,123,107,.3)}

ul{margin:10px 0 0; padding-inline-start:22px; color:var(--text-2)}
li{margin:6px 0}
li::marker{color:var(--gold)}

.mail{display:inline-block; padding:11px 20px; background:var(--gold);
  color:#1A1206; border-radius:10px; font-weight:700; margin-top:14px}
.mail:hover{text-decoration:none; opacity:.92}

/* أزرار الرئيسية */
.links{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.links a{padding:13px 22px; background:var(--surface2); border:1px solid var(--gold-line);
  border-radius:11px; font-weight:600}

footer{padding:34px 0 46px; margin-top:30px; border-top:1px solid var(--hairline);
  text-align:center; color:var(--text-3); font-size:13.5px}
footer a{color:var(--text-2)}

@media (max-width:560px){
  body{font-size:15px}
  h1{font-size:23px}
  .brand{font-size:29px}
  section{padding:18px 18px}
}