/* ============================================================
   تنسَّق — نظام التصميم v2 (هويّة أغنى وأعلى تباينًا)
   عربيّ أوّلًا (RTL)
   ============================================================ */

:root{
  --brand:        #0F766E;
  --brand-700:    #0B5A53;
  --brand-600:    #0D9488;
  --brand-500:    #14B8A6;
  --brand-400:    #2DD4BF;
  --brand-soft:   #DCF4EF;
  --brand-glow:   rgba(13,148,136,.45);

  --gold:         #F4A91F;
  --gold-600:     #DE9412;
  --gold-soft:    #FCEFD2;

  --ink:          #07171E;
  --ink-2:        #0E2A33;
  --ink-3:        #15323B;
  --text:         #13262E;
  --muted:        #59707A;
  --line:         #E2EBE9;
  --bg:           #FFFFFF;
  --surface:      #FFFFFF;
  --surface-2:    #F1F8F6;

  --maxw:         1180px;
  --radius:       20px;
  --radius-sm:    13px;
  --radius-lg:    30px;
  --shadow-sm:    0 4px 14px -6px rgba(7,23,30,.12);
  --shadow:       0 16px 38px -16px rgba(7,23,30,.20);
  --shadow-lg:    0 40px 80px -28px rgba(7,23,30,.34);
  --shadow-brand: 0 18px 40px -14px var(--brand-glow);
  --ease:         cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  font-family:'Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--text);
  line-height:1.78; font-size:17px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none }
img,svg{ max-width:100%; display:block }
ul{ list-style:none }

/* لا باهتيّة — المحتوى يظهر كاملًا دائمًا */
.reveal{ opacity:1; transform:none }

/* ── تخطيط ─────────────────────────────────── */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:26px }
.section{ padding-block:104px }
.section-tight{ padding-block:70px }
.section.alt{ background:var(--surface-2); border-block:1px solid var(--line) }
section{ position:relative }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.84rem; font-weight:800; letter-spacing:.01em;
  color:var(--brand-700); background:var(--brand-soft);
  padding:8px 17px; border-radius:999px; margin-bottom:20px;
  border:1px solid rgba(13,148,136,.18);
}
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%;
  background:var(--brand-500); box-shadow:0 0 0 4px rgba(20,184,166,.18) }

h1,h2,h3{ line-height:1.22; color:var(--ink); font-weight:800; letter-spacing:-.015em }
h1{ font-size:clamp(2.3rem,5.2vw,4rem); font-weight:900 }
h2{ font-size:clamp(1.8rem,3.6vw,2.7rem) }
h3{ font-size:1.24rem; font-weight:800 }
.lead{ font-size:clamp(1.06rem,1.5vw,1.25rem); color:var(--muted); font-weight:500 }
.section-head{ max-width:680px; margin-bottom:58px }
.section-head.center{ margin-inline:auto; text-align:center }
.grad-text{ background:linear-gradient(120deg,var(--brand-500),var(--brand-700));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }

/* ── أزرار ─────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:inherit; font-size:1.02rem; font-weight:800; cursor:pointer;
  padding:15px 32px; border-radius:14px; border:1.5px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px) scale(.99) }
.btn svg{ width:19px; height:19px }
.btn-primary{ background:linear-gradient(135deg,var(--brand-500),var(--brand-700)); color:#fff; box-shadow:var(--shadow-brand) }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 26px 52px -16px var(--brand-glow) }
.btn-ghost{ background:#fff; color:var(--ink); border-color:var(--line) }
.btn-ghost:hover{ border-color:var(--brand-400); color:var(--brand-700); transform:translateY(-3px); box-shadow:var(--shadow-sm) }
.btn-gold{ background:linear-gradient(135deg,#FFC758,var(--gold-600)); color:#3a2a05 }
.btn-gold:hover{ transform:translateY(-3px); box-shadow:0 22px 44px -16px rgba(244,169,31,.55) }
.btn-lg{ padding:18px 40px; font-size:1.08rem; border-radius:16px }
.btn-block{ width:100% }

/* ── الرأس ─────────────────────────────────── */
.site-header{ position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.85); backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:78px; gap:24px }
.brand{ display:flex; align-items:center; gap:11px; font-weight:900; font-size:1.32rem; color:var(--ink) }
.brand .logo{ width:40px; height:40px; filter:drop-shadow(0 6px 12px rgba(13,148,136,.28)) }
.brand b{ color:var(--brand-600) }
.nav-links{ display:flex; align-items:center; gap:4px }
.nav-links a{ padding:10px 16px; border-radius:11px; font-weight:700; color:var(--text); font-size:.97rem; transition:.18s }
.nav-links a:hover{ background:var(--brand-soft); color:var(--brand-700) }
.nav-cta{ display:flex; align-items:center; gap:10px }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px }
.nav-toggle span{ display:block; width:24px; height:2.5px; background:var(--ink); border-radius:2px; transition:.25s }
.nav-toggle span+span{ margin-top:5px }

/* ── الواجهة ───────────────────────────────── */
.hero{ position:relative; overflow:hidden; padding-block:96px 86px;
  background:
    radial-gradient(60% 80% at 88% -8%,rgba(20,184,166,.16),transparent 60%),
    radial-gradient(50% 60% at 2% 108%,rgba(244,169,31,.10),transparent 55%),
    linear-gradient(180deg,#F4FBF9,#FFFFFF 60%); }
.hero-grid{ display:grid; grid-template-columns:1.06fr .94fr; gap:60px; align-items:center }
.hero h1{ margin-top:6px }
.hero .lead{ margin-top:24px; max-width:540px }
.hero-actions{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap }
.hero-trust{ display:flex; gap:30px; margin-top:42px; flex-wrap:wrap }
.hero-trust .t b{ font-size:1.7rem; color:var(--ink); font-weight:900; display:block; line-height:1.1 }
.hero-trust .t span{ font-size:.9rem; color:var(--muted) }
.hero-content{ animation:rise .7s var(--ease) both }
.hero-visual{ animation:rise .7s .12s var(--ease) both }
@keyframes rise{ from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none} }

/* بطاقة معاينة محسّنة */
.mock{ position:relative; background:linear-gradient(165deg,var(--ink-2),var(--ink));
  border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.07) }
.mock::before{ content:""; position:absolute; inset:0; border-radius:var(--radius-lg);
  background:radial-gradient(80% 50% at 80% 0%,rgba(20,184,166,.18),transparent 60%); pointer-events:none }
.mock-bar{ display:flex; gap:7px; margin-bottom:18px; position:relative }
.mock-bar i{ width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.2) }
.mock-bar i:first-child{ background:#FF5F57 } .mock-bar i:nth-child(2){ background:#FEBC2E } .mock-bar i:nth-child(3){ background:#28C840 }
.mock-screen{ background:#06141A; border-radius:16px; padding:16px; position:relative }
.mock-row{ display:flex; align-items:center; gap:13px; padding:13px 14px; border-radius:12px;
  background:rgba(255,255,255,.045); margin-bottom:10px; border:1px solid rgba(255,255,255,.05) }
.mock-row .dot{ width:38px; height:38px; border-radius:11px; flex:none;
  background:linear-gradient(135deg,var(--brand-400),var(--brand-700));
  display:grid; place-items:center; box-shadow:0 6px 14px -6px var(--brand-glow) }
.mock-row .dot svg{ width:20px; height:20px; color:#fff }
.mock-row .ln{ height:8px; border-radius:6px; background:rgba(255,255,255,.12); flex:1 }
.mock-row .ln.s{ max-width:55% }
.mock-row .val{ color:var(--brand-400); font-weight:800; font-size:.96rem; font-variant-numeric:tabular-nums }
.float-badge{ position:absolute; inset-inline-start:-20px; bottom:34px; background:#fff;
  box-shadow:var(--shadow-lg); border-radius:16px; padding:14px 18px; display:flex; align-items:center; gap:13px; border:1px solid var(--line) }
.float-badge .ic{ width:42px; height:42px; border-radius:12px; background:var(--brand-soft); display:grid; place-items:center; color:var(--brand-700) }
.float-badge .ic svg{ width:22px; height:22px }
.float-badge b{ display:block; font-size:.98rem; color:var(--ink) }
.float-badge span{ font-size:.82rem; color:var(--muted) }

/* ── شريط الثقة ─────────────────────────────── */
.trustbar{ border-block:1px solid var(--line); background:#fff }
.trustbar .container{ display:flex; align-items:center; justify-content:center; gap:42px; flex-wrap:wrap; padding-block:28px }
.trustbar .ti{ display:flex; align-items:center; gap:10px; color:var(--text); font-weight:700; font-size:.97rem }
.trustbar .ti svg{ width:22px; height:22px; color:var(--brand-600); flex:none }

/* ── شبكات وبطاقات ──────────────────────────── */
.grid{ display:grid; gap:26px }
.grid-3{ grid-template-columns:repeat(3,1fr) }
.grid-2{ grid-template-columns:repeat(2,1fr) }
.grid-4{ grid-template-columns:repeat(4,1fr) }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  position:relative; box-shadow:var(--shadow-sm) }
.card:hover{ transform:translateY(-7px); box-shadow:var(--shadow); border-color:transparent }
.card .ic{ width:58px; height:58px; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--brand-500),var(--brand-700)); color:#fff;
  margin-bottom:20px; box-shadow:0 12px 24px -10px var(--brand-glow) }
.card .ic svg{ width:28px; height:28px }
.card h3{ margin-bottom:10px }
.card p{ color:var(--muted); font-size:1.01rem }

.feature-list{ display:grid; gap:15px; margin-top:8px }
.feature-list li{ display:flex; align-items:flex-start; gap:13px; color:var(--text); font-weight:500 }
.feature-list li svg{ width:23px; height:23px; color:var(--brand-500); flex:none; margin-top:3px }

/* ── قسم داكن ──────────────────────────────── */
.dark{ background:linear-gradient(165deg,var(--ink-2),var(--ink)); color:#cfe0dd; overflow:hidden }
.dark::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(50% 60% at 85% 0%,rgba(20,184,166,.16),transparent 60%); pointer-events:none }
.dark>*{ position:relative }
.dark h2,.dark h3{ color:#fff }
.dark .lead{ color:#9fb6b2 }
.dark .eyebrow{ background:rgba(20,184,166,.14); color:var(--brand-400); border-color:rgba(45,212,191,.22) }
.dark .card{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.09); box-shadow:none }
.dark .card:hover{ border-color:rgba(45,212,191,.38); background:rgba(255,255,255,.06) }
.dark .card h3{ color:#fff } .dark .card p{ color:#9fb6b2 }

/* ── خطوات ─────────────────────────────────── */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; counter-reset:s }
.step{ position:relative; padding:34px 30px 30px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm) }
.step::before{ counter-increment:s; content:counter(s); position:absolute; inset-block-start:-20px; inset-inline-start:28px;
  width:50px; height:50px; border-radius:15px; background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
  color:#fff; font-weight:900; font-size:1.3rem; display:grid; place-items:center; box-shadow:var(--shadow-brand) }
.step h3{ margin:16px 0 9px } .step p{ color:var(--muted) }

/* ── دعوة لإجراء ───────────────────────────── */
.cta-band{ position:relative; overflow:hidden; border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--brand-600),var(--brand-700)); color:#fff;
  padding:66px; text-align:center; box-shadow:var(--shadow-lg) }
.cta-band::after{ content:""; position:absolute; inset-block-start:-45%; inset-inline-end:-8%;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle,rgba(244,169,31,.4),transparent 62%) }
.cta-band::before{ content:""; position:absolute; inset-block-end:-50%; inset-inline-start:-6%;
  width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle,rgba(45,212,191,.4),transparent 62%) }
.cta-band>*{ position:relative }
.cta-band h2{ color:#fff }
.cta-band p{ color:rgba(255,255,255,.9); max-width:580px; margin:16px auto 32px }
.cta-band .hero-actions{ justify-content:center; margin-top:0 }
.cta-band .btn-ghost{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.32) }
.cta-band .btn-ghost:hover{ background:rgba(255,255,255,.2); color:#fff }

/* ── الأسئلة الشائعة ───────────────────────── */
.faq{ max-width:840px; margin-inline:auto }
.qa{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:14px; overflow:hidden; box-shadow:var(--shadow-sm) }
.qa summary{ cursor:pointer; padding:23px 27px; font-weight:800; color:var(--ink); font-size:1.08rem;
  display:flex; align-items:center; justify-content:space-between; list-style:none; gap:16px }
.qa summary::-webkit-details-marker{ display:none }
.qa summary::after{ content:"+"; font-size:1.6rem; color:var(--brand-600); font-weight:400; transition:.25s; flex:none }
.qa[open] summary::after{ transform:rotate(45deg) }
.qa[open] summary{ color:var(--brand-700) }
.qa .a{ padding:0 27px 25px; color:var(--muted) }

/* ── التذييل ───────────────────────────────── */
.footer{ background:var(--ink); color:#9fb6b2; padding-block:70px 32px }
.footer h4{ color:#fff; font-size:1rem; margin-bottom:17px; font-weight:800 }
.footer-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:44px; margin-bottom:48px }
.footer .brand{ color:#fff; margin-bottom:15px }
.footer .brand b{ color:var(--brand-400) }
.footer p{ color:#86a09b; font-size:.97rem; max-width:310px }
.footer ul li{ margin-bottom:12px }
.footer ul a{ color:#9fb6b2; font-size:.97rem; transition:.18s }
.footer ul a:hover{ color:var(--brand-400) }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.09); padding-top:26px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.9rem; color:#7a948f }

/* ── أدوات ─────────────────────────────────── */
.text-center{ text-align:center }
.mt-s{ margin-top:14px } .mt-m{ margin-top:30px } .mt-l{ margin-top:50px }
.badge-zatca{ display:inline-flex; align-items:center; gap:9px; background:var(--gold-soft); color:#7a5a12;
  font-weight:800; padding:9px 17px; border-radius:999px; font-size:.9rem; border:1px solid #f1dca6 }
.badge-zatca svg{ width:18px; height:18px }

/* ── الاستجابة ─────────────────────────────── */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; gap:48px }
  .hero-content{ order:1 } .hero-visual{ order:2; max-width:460px; margin-inline:auto }
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr) }
  .steps{ grid-template-columns:1fr; gap:40px }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:34px }
  .section{ padding-block:80px }
}
@media (max-width:760px){
  .nav-links,.nav-cta .btn-ghost{ display:none }
  .nav-toggle{ display:block }
  .nav.open .nav-links{ display:flex; position:absolute; inset-block-start:78px; inset-inline:0;
    flex-direction:column; align-items:stretch; background:#fff;
    border-bottom:1px solid var(--line); padding:14px 26px; gap:4px; box-shadow:var(--shadow) }
  .nav.open .nav-links a{ padding:13px 12px }
  .section{ padding-block:66px }
  .grid-3,.grid-2,.grid-4{ grid-template-columns:1fr }
  .cta-band{ padding:44px 26px }
  .footer-grid{ grid-template-columns:1fr 1fr }
  .footer-bottom{ flex-direction:column; text-align:center }
  body{ font-size:16px }
}
@media (max-width:430px){
  .footer-grid{ grid-template-columns:1fr }
  .hero-trust{ gap:22px }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important }
}