@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@500;700;800&family=Tajawal:wght@400;500;700&family=Spectral:wght@500;600&family=IBM+Plex+Mono:wght@500;600&family=Inter:wght@400;500;600&display=swap');

:root{
  --ink:        #0D1B2A;
  --ink-2:      #16263D;
  --ink-3:      #1E2F44;
  --parchment:  #F3EEE1;
  --parchment-2:#EAE2CE;
  --brass:      #B8925A;
  --brass-light:#D8B788;
  --stamp-green:#3F6652;
  --line:       rgba(184,146,90,0.35);
  --shadow:     0 20px 60px rgba(0,0,0,0.35);

  --font-ar-display: 'Cairo', sans-serif;
  --font-ar-body:    'Tajawal', sans-serif;
  --font-en-display: 'Spectral', serif;
  --font-en-body:    'Inter', sans-serif;
  --font-mono:       'IBM Plex Mono', monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(184,146,90,0.10), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(63,102,82,0.10), transparent 55%),
    var(--ink);
  color: var(--parchment);
  font-family: var(--font-en-body);
  line-height:1.6;
}
body[dir="rtl"]{ font-family: var(--font-ar-body); }
body[dir="rtl"] .display{ font-family: var(--font-ar-display); }
body[dir="ltr"] .display{ font-family: var(--font-en-display); }

.wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }

/* ---------- topbar ---------- */
header.topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(13,27,42,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--parchment); }
.brand img{ width:40px; height:40px; }
.brand-name{ font-family:var(--font-en-display); font-size:1.15rem; letter-spacing:0.06em; color:var(--parchment); }
body[dir="rtl"] .brand-name{ font-family:var(--font-ar-display); font-weight:700; }
.brand-tag{ font-family:var(--font-mono); font-size:0.62rem; color:var(--brass-light); letter-spacing:0.08em; display:block; }

nav.mainnav{ display:flex; align-items:center; gap:28px; }
nav.mainnav a{ color:var(--parchment); text-decoration:none; font-size:0.92rem; opacity:0.85; }
nav.mainnav a:hover{ opacity:1; color:var(--brass-light); }
.lang-pill{
  border:1px solid var(--line); border-radius:999px; padding:6px 16px;
  color:var(--brass-light); font-family:var(--font-mono); font-size:0.75rem;
  text-decoration:none; letter-spacing:0.04em;
}
.lang-pill:hover{ background:rgba(184,146,90,0.12); }

/* ---------- hero ---------- */
.hero{ padding:96px 0 64px; position:relative; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center; }
@media(max-width:860px){ .hero-grid{ grid-template-columns:1fr; } }

.eyebrow{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.12em;
  color:var(--brass-light); border:1px solid var(--line); display:inline-block;
  padding:6px 14px; border-radius:999px; margin-bottom:22px;
}
.hero h1{ font-size:3rem; line-height:1.15; margin:0 0 22px; color:var(--parchment); }
body[dir="rtl"] .hero h1{ font-size:2.85rem; font-weight:800; }
.hero p.lead{ font-size:1.08rem; color:#CBD3D8; max-width:52ch; margin:0 0 34px; }

.cta-row{ display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:14px 26px;
  border-radius:10px; text-decoration:none; font-weight:600; font-size:0.95rem;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-primary{ background:var(--brass); color:var(--ink); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(184,146,90,0.35); }
.btn-ghost{ border:1px solid var(--line); color:var(--parchment); }
.btn-ghost:hover{ border-color:var(--brass-light); color:var(--brass-light); }

/* the seal / stamp signature element */
.seal-wrap{ display:flex; justify-content:center; position:relative; }
.seal{
  width:260px; height:260px; position:relative;
  animation: cx-stamp 900ms cubic-bezier(.2,.9,.25,1.2) both;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.45));
}
.seal img{ width:100%; height:100%; }
@keyframes cx-stamp{
  0%{ transform:scale(2.4) rotate(-14deg); opacity:0; }
  60%{ transform:scale(0.94) rotate(2deg); opacity:1; }
  100%{ transform:scale(1) rotate(0deg); opacity:1; }
}
.seal::after{
  content:""; position:absolute; inset:-30px; border-radius:50%;
  background:radial-gradient(circle, rgba(184,146,90,0.16), transparent 70%);
  z-index:-1;
}

/* ---------- trust strip ---------- */
.trust{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:22px 0; display:flex; gap:40px; flex-wrap:wrap; justify-content:center;
}
.trust-item{ display:flex; align-items:center; gap:10px; font-size:0.86rem; color:#C9CFD4; }
.trust-item .dot{ width:7px; height:7px; border-radius:50%; background:var(--brass); flex:none; }

/* ---------- services (license-ledger table look) ---------- */
.section{ padding:88px 0; }
.section-head{ max-width:640px; margin:0 auto 48px; text-align:center; }
.section-head .eyebrow{ margin-inline:auto; }
.section-head h2{ font-size:2.1rem; margin:14px 0 12px; }
body[dir="rtl"] .section-head h2{ font-weight:800; }
.section-head p{ color:#B7C0C6; }

.ledger{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:rgba(255,255,255,0.02); }
.ledger-row{
  display:grid; grid-template-columns:110px 1fr 170px 160px;
  gap:18px; align-items:center; padding:26px 28px;
  border-bottom:1px solid var(--line);
}
.ledger-row:last-child{ border-bottom:none; }
.ledger-row:hover{ background:rgba(184,146,90,0.05); }
@media(max-width:760px){
  .ledger-row{ grid-template-columns:1fr; text-align:center; }
}

.ref{ font-family:var(--font-mono); color:var(--brass-light); font-size:0.82rem; letter-spacing:0.03em; }
.svc-name{ font-size:1.14rem; margin:0 0 6px; color:var(--parchment); }
body[dir="rtl"] .svc-name{ font-weight:700; }
.svc-desc{ font-size:0.92rem; color:#AEB8BE; margin:0; max-width:56ch; }
.price-block{ text-align:center; }
.price-label{ font-size:0.68rem; color:#8A939A; text-transform:uppercase; letter-spacing:0.08em; }
.price-value{ font-family:var(--font-mono); font-size:1.1rem; color:var(--brass-light); font-weight:600; }
.status-active{
  font-family:var(--font-mono); font-size:0.7rem; color:var(--stamp-green);
  border:1px solid rgba(63,102,82,0.5); border-radius:6px; padding:4px 10px;
  display:inline-block; letter-spacing:0.06em;
}
.order-link{
  display:inline-block; margin-top:10px; text-decoration:none; color:var(--ink);
  background:var(--brass); padding:9px 18px; border-radius:8px; font-size:0.86rem; font-weight:600;
}
.order-link:hover{ background:var(--brass-light); }

/* ---------- about ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
@media(max-width:820px){ .about-grid{ grid-template-columns:1fr; } }
.about-card{
  border:1px solid var(--line); border-radius:16px; padding:32px;
  background:linear-gradient(180deg, rgba(184,146,90,0.06), transparent);
}
.about-card .k{ font-family:var(--font-mono); font-size:0.72rem; color:var(--brass-light); display:block; margin-bottom:6px; letter-spacing:0.06em; }
.about-card .v{ font-size:0.98rem; margin:0 0 18px; color:#D6DDE1; }

/* ---------- contact / footer cta ---------- */
.contact-box{
  border:1px solid var(--line); border-radius:18px; padding:54px 40px; text-align:center;
  background:radial-gradient(700px 300px at 50% 0%, rgba(184,146,90,0.10), transparent 60%);
}
.contact-box h2{ margin:0 0 12px; font-size:1.9rem; }
.contact-box p{ color:#B7C0C6; margin:0 0 28px; }

footer{ border-top:1px solid var(--line); padding:34px 0; }
.footer-inner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:0.82rem; color:#8A939A; }
.footer-inner .mono{ font-family:var(--font-mono); }

/* ---------- checkout / success / cancel pages ---------- */
.simple-page{ min-height:70vh; display:flex; align-items:center; }
.card-panel{
  max-width:560px; margin:0 auto; width:100%;
  border:1px solid var(--line); border-radius:18px; padding:40px;
  background:rgba(255,255,255,0.02);
}
.card-panel h1{ font-size:1.8rem; margin:0 0 8px; }
.summary-row{ display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line); }
.summary-row:last-child{ border-bottom:none; }
.summary-row .label{ color:#AEB8BE; }
.summary-row .val{ font-family:var(--font-mono); color:var(--brass-light); }
.big-total{ font-size:1.5rem; font-family:var(--font-mono); color:var(--brass-light); }