/* ===================================================================
   برنامج-محاسبة.com  —  ERP.TAX SEO Funnel
   Design system v2 — Modern: gradient mesh, glass, soft depth, RTL
   =================================================================== */

:root {
  --blue-900: #0a1f44;
  --blue-700: #123a85;
  --blue-600: #1450c6;
  --blue-500: #2563ff;
  --blue-400: #4f86ff;
  --indigo:   #6d5cff;
  --cyan:     #22b8ff;
  --blue-100: #e6efff;
  --blue-50:  #f2f7ff;
  --ink:      #0c1730;
  --slate:    #45526b;
  --muted:    #6b7896;
  --line:     #e8edf6;
  --bg:       #ffffff;
  --bg-soft:  #f6f9ff;
  --white:    #ffffff;
  --green:    #14b86a;
  --amber:    #f59e0b;

  --grad-brand: linear-gradient(120deg, #2563ff 0%, #6d5cff 55%, #22b8ff 100%);
  --grad-brand-soft: linear-gradient(120deg, #2563ff, #6d5cff);
  --grad-ink: linear-gradient(120deg, #0a1f44, #1450c6 60%, #6d5cff);

  --radius:    16px;
  --radius-lg: 26px;
  --radius-xl: 34px;

  --shadow-sm: 0 1px 2px rgba(12,23,48,.05), 0 2px 8px rgba(12,23,48,.05);
  --shadow:    0 14px 40px rgba(20,80,198,.10);
  --shadow-lg: 0 32px 80px rgba(20,80,198,.18);
  --shadow-color: 0 18px 44px rgba(37,99,255,.30);

  --container: 1160px;
  --font: "Tajawal", "Segoe UI", Tahoma, "Cairo", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.85;
  font-size: 17px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-600); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--blue-700); }

h1, h2, h3, h4 { line-height: 1.3; color: var(--blue-900); margin: 0 0 .6em; font-weight: 800; letter-spacing: -.4px; }
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.55rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
p  { margin: 0 0 1.1em; color: var(--slate); }

/* gradient text helper (applied to hero h1 / section headings) */
.grad-text, .hero h1, .page-hero h1, .cta-band h2 {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.section--blue .cta-band h2, .section--blue h2 { -webkit-text-fill-color: #fff; color:#fff; background:none; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.section { padding: 92px 0; position: relative; }
.section--soft { background: var(--bg-soft); }
.section--blue {
  background:
    radial-gradient(700px 320px at 12% 0%, rgba(109,92,255,.45), transparent 60%),
    radial-gradient(700px 360px at 90% 100%, rgba(34,184,255,.35), transparent 60%),
    linear-gradient(135deg, #0f2d6e, #0a1f44);
  color: #fff;
  overflow: hidden;
}
.section--blue h2, .section--blue h3 { color: #fff; }
.section--blue p { color: rgba(255,255,255,.82); }

.center { text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .82rem; letter-spacing: .2px;
  color: var(--blue-700);
  background: rgba(37,99,255,.09);
  border: 1px solid rgba(37,99,255,.18);
  padding: 7px 16px; border-radius: 999px; margin-bottom: 18px;
  backdrop-filter: blur(6px);
}
.section-lead { max-width: 720px; margin: 0 auto 52px; font-size: 1.13rem; color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: inherit; font-weight: 700; font-size: 1.02rem;
  padding: 15px 30px; border-radius: 999px; white-space: nowrap;
  border: 1.5px solid transparent; cursor: pointer; overflow: hidden;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background .25s ease, border-color .25s;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary {
  background: var(--grad-brand-soft); color: #fff;
  box-shadow: var(--shadow-color);
  background-size: 160% 160%; background-position: 0% 50%;
}
.btn-primary::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .6s ease;
}
.btn-primary:hover { color:#fff; transform: translateY(-3px); box-shadow: 0 24px 50px rgba(37,99,255,.42); background-position: 100% 50%; }
.btn-primary:hover::after { transform: translateX(120%); }
.btn-secondary {
  background: rgba(255,255,255,.7); color: var(--blue-700);
  border-color: var(--line); box-shadow: var(--shadow-sm); backdrop-filter: blur(8px);
}
.btn-secondary:hover { border-color: var(--blue-400); color: var(--blue-700); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-ghost { background: rgba(255,255,255,.14); color:#fff; border-color: rgba(255,255,255,.4); backdrop-filter: blur(8px); }
.btn-ghost:hover { background: rgba(255,255,255,.26); color:#fff; transform: translateY(-2px); }
.btn-lg { padding: 18px 40px; font-size: 1.1rem; }

/* ---------- Header (glass) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(232,237,246,.9);
}
.nav { display:flex; align-items:center; justify-content:space-between; height:74px; gap:18px; }
.brand { display:flex; align-items:center; gap:11px; font-weight:800; color:var(--blue-900); font-size:1.18rem; white-space:nowrap; flex-shrink:0; }
.brand img, .brand svg { width:36px; height:36px; filter: drop-shadow(0 6px 12px rgba(37,99,255,.28)); }
.brand span b { background: var(--grad-brand-soft); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.nav-links { display:flex; align-items:center; gap:22px; list-style:none; margin:0; padding:0; flex-wrap:nowrap; }
.nav-links a { color:var(--slate); font-weight:600; font-size:.95rem; position:relative; white-space:nowrap; }
.nav-cta .btn { flex-shrink:0; }
.nav-links a::after { content:""; position:absolute; inset-inline:0; bottom:-6px; height:2px; background:var(--grad-brand-soft); border-radius:2px; transform:scaleX(0); transition:transform .25s ease; }
.nav-links a:hover { color:var(--blue-600); }
.nav-links a:hover::after { transform:scaleX(1); }
.nav-cta { display:flex; align-items:center; gap:12px; }
.nav-toggle { display:none; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--blue-900); margin:5px 0; border-radius:2px; transition:.3s; }

/* ---------- Hero ---------- */
.hero { position:relative; padding: 100px 0 110px; overflow:hidden; background: var(--bg); }
.hero::before, .hero::after {
  content:""; position:absolute; border-radius:50%; filter: blur(70px); z-index:0; opacity:.55;
  animation: float 14s ease-in-out infinite;
}
.hero::before { width:540px; height:540px; top:-160px; inset-inline-end:-120px; background: radial-gradient(circle at 30% 30%, #6d5cff, transparent 70%); }
.hero::after  { width:520px; height:520px; bottom:-200px; inset-inline-start:-140px; background: radial-gradient(circle at 30% 30%, #22b8ff, transparent 70%); animation-delay:-7s; }
.hero .container { position:relative; z-index:1; }
@keyframes float { 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(0,-26px) scale(1.05);} }

.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; }
.hero h1 { margin-bottom: 20px; }
.hero .lead { font-size:1.24rem; color:var(--slate); max-width:560px; margin-bottom:32px; }
.hero-cta { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:28px; }
.hero-trust { display:flex; flex-wrap:wrap; gap:16px 26px; color:var(--muted); font-size:.95rem; }
.hero-trust span { display:inline-flex; align-items:center; gap:8px; }
.hero-trust svg { color:var(--green); flex-shrink:0; }

/* Hero visual: glass app card */
.hero-visual {
  position:relative;
  background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(242,247,255,.85));
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  backdrop-filter: blur(10px);
}
.hero-visual::before {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: linear-gradient(150deg, rgba(109,92,255,.5), transparent 40%, rgba(34,184,255,.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
}
.hero-visual .bar { display:flex; gap:7px; margin-bottom:16px; }
.hero-visual .bar i { width:11px; height:11px; border-radius:50%; background:#dbe3ee; display:inline-block; }
.hero-visual .bar i:first-child{background:#ff5f57;} .hero-visual .bar i:nth-child(2){background:#febc2e;} .hero-visual .bar i:nth-child(3){background:#28c840;}
.mini-stat { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
.mini-stat div { background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; box-shadow:var(--shadow-sm); }
.mini-stat b { display:block; font-size:1.4rem; background:var(--grad-brand-soft); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.mini-stat small { color:var(--muted); }
.mini-chart { display:flex; align-items:flex-end; gap:10px; height:120px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; }
.mini-chart i { flex:1; background:var(--grad-brand); border-radius:7px 7px 0 0; display:block; opacity:.85; }

/* ---------- Cards / grids ---------- */
.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 {
  position:relative;
  background:#fff; border:1px solid var(--line);
  border-radius: var(--radius-lg); padding:32px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .28s cubic-bezier(.34,1.3,.64,1), box-shadow .28s ease, border-color .28s;
  overflow:hidden;
}
.card::before {
  content:""; position:absolute; inset-inline-start:0; top:0; height:3px; width:100%;
  background:var(--grad-brand); transform:scaleX(0); transform-origin:right; transition:transform .35s ease;
}
.card:hover { transform:translateY(-8px); box-shadow:var(--shadow); border-color:transparent; }
.card:hover::before { transform:scaleX(1); }
.card .ic {
  width:56px; height:56px; border-radius:16px;
  background: linear-gradient(150deg, rgba(37,99,255,.14), rgba(109,92,255,.14));
  color:var(--blue-600); display:grid; place-items:center; margin-bottom:20px;
  transition: transform .3s ease;
}
.card:hover .ic { transform: rotate(-6deg) scale(1.06); }
.card h3 { margin-bottom:8px; }
.card p { margin:0; font-size:.98rem; }
a.card:hover h3 { color: var(--blue-600); }

/* ---------- Stats band ---------- */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; position:relative; z-index:1; }
.stats .num { font-size:clamp(2.1rem,4vw,3rem); font-weight:800; color:#fff; letter-spacing:-1px;
  background:linear-gradient(120deg,#fff,#bcd4ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stats .lbl { color:rgba(255,255,255,.8); }

/* ---------- Badges ---------- */
.badges { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.badge {
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.8); border:1px solid var(--line); border-radius:999px;
  padding:11px 19px; font-weight:700; color:var(--blue-900); font-size:.92rem;
  box-shadow:var(--shadow-sm); backdrop-filter:blur(8px); transition:transform .2s ease, box-shadow .2s ease;
}
.badge:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.badge svg { color:var(--blue-600); }

/* ---------- Prose ---------- */
.prose { max-width:820px; margin-inline:auto; }
.prose h2 { margin-top:1.7em; position:relative; padding-inline-start:18px; }
.prose h2::before { content:""; position:absolute; inset-inline-start:0; top:.18em; bottom:.18em; width:5px; border-radius:5px; background:var(--grad-brand); }
.prose h3 { margin-top:1.4em; }
.prose ul, .prose ol { padding-inline-start:1.4em; margin:0 0 1.2em; color:var(--slate); }
.prose li { margin-bottom:.55em; }
.prose blockquote {
  margin:1.5em 0; padding:20px 24px;
  background:linear-gradient(120deg, rgba(37,99,255,.06), rgba(109,92,255,.06));
  border-inline-start:4px solid var(--blue-500); border-radius:14px; color:var(--blue-900); font-weight:500;
}
.prose table { width:100%; border-collapse:separate; border-spacing:0; margin:1.5em 0; font-size:.96rem; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); }
.prose th, .prose td { border-bottom:1px solid var(--line); padding:14px 16px; text-align:right; }
.prose th { background:linear-gradient(120deg, rgba(37,99,255,.10), rgba(109,92,255,.08)); color:var(--blue-900); }
.prose tbody tr:last-child td { border-bottom:0; }
.prose tbody tr:nth-child(even){ background:#fafcff; }

/* ---------- FAQ ---------- */
.faq { max-width:820px; margin-inline:auto; }
.faq details {
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:4px 24px; margin-bottom:14px; box-shadow:var(--shadow-sm);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.faq details[open] { box-shadow:var(--shadow); border-color:rgba(37,99,255,.25); }
.faq summary { cursor:pointer; font-weight:700; color:var(--blue-900); padding:17px 0; list-style:none; position:relative; padding-inline-start:34px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::before {
  content:"+"; position:absolute; inset-inline-start:0; top:14px;
  width:24px; height:24px; border-radius:8px; background:var(--grad-brand-soft); color:#fff;
  display:grid; place-items:center; font-weight:800; transition:transform .25s ease;
}
.faq details[open] summary::before { content:"−"; transform:rotate(180deg); }
.faq details p { padding-bottom:18px; margin:0; }

/* ---------- CTA band ---------- */
.cta-band { text-align:center; }
.cta-band .btns { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:28px; }

/* ---------- Page hero / breadcrumb ---------- */
.page-hero {
  padding:84px 0 48px; position:relative; overflow:hidden;
  background:
    radial-gradient(640px 280px at 88% -30%, rgba(109,92,255,.18), transparent 60%),
    radial-gradient(560px 260px at 5% 0%, rgba(34,184,255,.14), transparent 60%),
    var(--bg);
}
.crumbs { font-size:.9rem; color:var(--muted); margin-bottom:18px; }
.crumbs a { color:var(--muted); }
.crumbs a:hover { color:var(--blue-600); }

/* ---------- Blog list ---------- */
.post-card { display:flex; flex-direction:column; height:100%; }
.post-card .tag { font-size:.78rem; font-weight:700; color:var(--blue-600); margin-bottom:10px; display:inline-block; background:rgba(37,99,255,.08); padding:4px 12px; border-radius:999px; align-self:flex-start; }
.post-card h3 { font-size:1.2rem; }
.post-card .meta { margin-top:auto; padding-top:16px; color:var(--muted); font-size:.86rem; }
.post-card .more { font-weight:700; margin-top:12px; display:inline-block; color:var(--blue-600); }
article.prose img { border-radius:var(--radius); margin:1.2em 0; }
.post-meta { color:var(--muted); font-size:.95rem; margin-bottom:8px; }

/* ---------- Footer ---------- */
.site-footer {
  background: radial-gradient(800px 400px at 90% 0%, rgba(109,92,255,.18), transparent 55%), var(--blue-900);
  color:#c4d3ee; padding:72px 0 30px;
}
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px; }
.site-footer h4 { color:#fff; font-size:1rem; margin-bottom:16px; }
.site-footer a { color:#c4d3ee; display:block; padding:6px 0; font-size:.95rem; }
.site-footer a:hover { color:#fff; padding-inline-start:5px; }
.footer-brand { display:flex; align-items:center; gap:11px; color:#fff; font-weight:800; font-size:1.25rem; margin-bottom:14px; }
.footer-brand img, .footer-brand svg { width:36px; height:36px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); margin-top:44px; padding-top:24px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; color:#7e93ba; font-size:.88rem; }

/* ---------- Helpers ---------- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.tick { color:var(--green); }

/* ---------- Scroll reveal (enabled only when JS adds .js-reveal to <html>) ---------- */
.js-reveal .card,
.js-reveal .badge,
.js-reveal .section > .container > .center,
.js-reveal .hero-visual,
.js-reveal .faq details,
.js-reveal .stats > div {
  opacity:0; transform:translateY(22px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.js-reveal .is-in { opacity:1 !important; transform:none !important; }
/* stagger cards within a grid */
.js-reveal .grid .card:nth-child(2){ transition-delay:.06s; }
.js-reveal .grid .card:nth-child(3){ transition-delay:.12s; }
.js-reveal .grid .card:nth-child(4){ transition-delay:.18s; }
.js-reveal .grid .card:nth-child(5){ transition-delay:.24s; }
.js-reveal .grid .card:nth-child(6){ transition-delay:.30s; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns:1fr; gap:44px; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .stats { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
/* Collapse the full nav to a hamburger before the links get cramped */
@media (max-width: 1024px) {
  .nav-links, .nav-cta .btn-secondary { display:none; }
  .nav-toggle { display:block; }
  .nav.open .nav-links {
    display:flex; flex-direction:column; gap:4px;
    position:absolute; top:74px; inset-inline:0;
    background:rgba(255,255,255,.98); border-bottom:1px solid var(--line);
    padding:12px 24px 20px; box-shadow:var(--shadow); backdrop-filter:blur(12px);
  }
  .nav.open .nav-links a { padding:12px 0; border-bottom:1px solid var(--line); width:100%; }
  .nav.open .nav-links a::after { display:none; }
}
@media (max-width: 760px) {
  .section { padding:64px 0; }
  .hero { padding:72px 0 80px; }
  .grid-3, .grid-2 { grid-template-columns:1fr; }
  .hero-cta .btn, .cta-band .btn { width:100%; justify-content:center; }
}
@media (max-width: 480px) {
  .grid-4 { grid-template-columns:1fr; }
  .stats { grid-template-columns:repeat(2,1fr); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
  .js-reveal .card, .js-reveal .badge, .js-reveal .hero-visual,
  .js-reveal .faq details, .js-reveal .stats > div,
  .js-reveal .section > .container > .center { opacity:1 !important; transform:none !important; }
}