/* ========= ARTA — Modern Minimal + Dark Mode + Parallax ========= */
/* Theme (Light) */
:root{
  --brand:#0C2D48;   /* ARTA Blue */
  --accent:#25D366;  /* WhatsApp Green */
  --text:#0f172a;    /* Slate 900 */
  --muted:#64748b;   /* Slate 500 */
  --bg:#ffffff;
  --bg-alt:#f8fafc;  /* Slate 50 */
  --border:#e5e7eb;  /* Light borders */
}

/* Theme (Dark) via attribute */
:root[data-theme="dark"]{
  --text:#e5e7eb;
  --muted:#94a3b8;
  --bg:#0b1220;
  --bg-alt:#0e1626;
  --border:#1f2638;
  /* نحتفظ بالـ brand كما هو حفاظًا على الهوية */
}

/* Reset / Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Noto Sans',Arial;
  background:var(--bg); color:var(--text);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* Layout helpers */
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
.rtl{direction:rtl;text-align:right}
.mono{font-family:ui-monospace,Menlo,Monaco,Consolas,"Courier New",monospace}
.muted{color:var(--muted)}
.lead{color:var(--muted)}
.meta{color:var(--muted);margin-top:.6rem}

/* Header / Nav */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
  transition:all .2s ease;
}
:root[data-theme="dark"] .header{
  background:rgba(11,18,32,.78);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0;transition:padding .2s ease}
.header.shrink .nav{padding:.5rem 0}
.nav-links{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}
.nav a{
  color:var(--muted); padding:.35rem .6rem; border-radius:10px;
}
.nav a:hover{color:var(--brand);background:rgba(255,255,255,.06)}
.brand{display:flex;align-items:center;gap:.6rem}
.brand img{height:44px}
.badge{
  display:inline-block; background:#eef2ff; border:1px solid var(--border);
  color:#0f172a; border-radius:999px; padding:.15rem .6rem; font-size:.75rem;
}
:root[data-theme="dark"] .badge{background:#0f172a;color:#e5e7eb}
.lang-toggle,.theme-toggle{
  border:1px solid var(--border); background:transparent; color:var(--text);
  border-radius:12px; padding:.4rem .7rem; cursor:pointer;
}
.btn{
  display:inline-block; padding:.7rem 1rem; border-radius:14px;
  border:1px solid var(--border); transition:transform .15s ease,opacity .15s ease, background .15s ease, color .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.primary:hover{opacity:.92}
.btn.ghost:hover{background:rgba(255,255,255,.06)}

/* Hero */
.hero{
  position:relative; isolation:isolate;
  background:
    radial-gradient(60rem 40rem at 70% -20%, #c7d2fe40, transparent),
    var(--bg-alt);
  padding:4rem 0 2.2rem;
}
:root[data-theme="dark"] .hero{
  background:
    radial-gradient(60rem 40rem at 70% -20%, #1e293b66, transparent),
    var(--bg-alt);
}
.hero-cta{margin-top:1rem;display:flex;gap:.6rem;flex-wrap:wrap}
.hero-points{
  margin:.9rem 0 0; display:flex; gap:.6rem; flex-wrap:wrap;
  padding:0; list-style:none;
}
.hero-points li{
  background:var(--bg); border:1px solid var(--border); border-radius:999px;
  padding:.35rem .7rem; font-size:.9rem;
}

/* Hero art (animated blobs + mock) */
/* Parallax-ready: نستخدم var(--py) بدل translate مباشرة */
.parallax{will-change:transform; transform:translate3d(0,var(--py,0),0)}
.hero-art{position:relative;min-height:360px}
.blob{position:absolute;filter:blur(16px);opacity:.6;z-index:-1}
.blob.b1{
  width:320px;height:320px;right:0;top:-40px;border-radius:40% 60% 50% 50%;
  background:conic-gradient(from 120deg,#93c5fd66,#c4b5fd66,#fca5a566,#93c5fd66);
  animation:floatY 9s ease-in-out infinite;
}
.blob.b2{
  width:220px;height:220px;right:120px;bottom:-30px;border-radius:60% 40% 50% 50%;
  background:conic-gradient(from -20deg,#86efac66,#93c5fd66,#c7d2fe66,#86efac66);
  animation:floatY 11s ease-in-out infinite reverse;
}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

.mock{
  padding:1rem; border-radius:20px; border:1px solid var(--border); background:var(--bg);
  box-shadow:0 18px 40px rgba(0,0,0,.06);
}
.mock-row{display:flex;gap:.5rem;align-items:flex-end;height:130px;margin:.2rem 0 1rem}
.bar{--h:50%;width:14%;height:var(--h);background:#0c2d48;opacity:.12;border-radius:8px;animation:grow 1.2s ease forwards;transform-origin:bottom}
.bar:nth-child(2){animation-delay:.05s}
.bar:nth-child(3){animation-delay:.1s}
.bar:nth-child(4){animation-delay:.15s}
.bar:nth-child(5){animation-delay:.2s}
@keyframes grow{from{height:10%}to{height:var(--h)}}
.spark{width:100%;height:60px;color:#0C2D48}
.spark path{stroke-dasharray:300;stroke-dashoffset:300;animation:draw 1.8s ease forwards .2s}
@keyframes draw{to{stroke-dashoffset:0}}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.stat{background:var(--bg-alt);border:1px solid var(--border);border-radius:16px;padding:.6rem;text-align:center}
.stat .v{font-weight:800;font-size:1.4rem;color:var(--text)}
.stat .l{font-size:.8rem;color:var(--muted)}

/* Grid & Cards */
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:1fr}
@media(min-width:900px){.grid-2{grid-template-columns:1fr 1fr}}
.grid-3{grid-template-columns:1fr}
@media(min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.grid-4{grid-template-columns:1fr 1fr}
@media(min-width:1000px){.grid-4{grid-template-columns:repeat(4,1fr)}}

.card{
  background:var(--bg); border:1px solid var(--border); border-radius:20px; padding:1rem;
  box-shadow:0 8px 20px rgba(0,0,0,.04);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.06)}

/* Sections */
.section{padding:2.2rem 0}
.section.alt{background:var(--bg-alt)}
.section-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:1rem;
}
.section h2{color:var(--brand);font-size:1.7rem;margin:.2rem 0}
.section-clients-top{padding-top:1.2rem}

/* Services numbered */
.services-grid .svc{position:relative;padding-top:2.2rem}
.services-grid .svc .step{
  position:absolute; top:1rem; inset-inline-start:1rem;
  background:#e8eef6; color:#0C2D48; border-radius:10px; padding:.15rem .5rem; font-weight:700;
}
:root[data-theme="dark"] .services-grid .svc .step{background:#0d213a;color:#cfe3ff}

/* Process steps */
.process-grid .step-card{position:relative;padding-top:1.8rem}
.process-grid .step-card .step{
  position:absolute; top:.8rem; inset-inline-start:.9rem;
  background:#e8eef6; color:#0C2D48; border-radius:10px; padding:.15rem .5rem; font-weight:700;
}
:root[data-theme="dark"] .process-grid .step-card .step{background:#0d213a;color:#cfe3ff}

/* Gallery (Ken Burns on hover) */
.gallery img{
  width:100%; height:180px; object-fit:cover;
  border-radius:16px; border:1px solid var(--border);
}
.gallery .ken{transform-origin:center;transition:transform 8s ease}
.gallery .ken:hover{transform:scale(1.07)}

/* Pricing */
.prices .price-head{font-weight:700;margin-bottom:.4rem;color:#0C2D48}
:root[data-theme="dark"] .prices .price-head{color:#cfe3ff}
.prices .money{font-weight:800;font-size:1.6rem}
.prices .money span{font-weight:500;color:var(--muted);font-size:.9rem}
.price.featured{outline:2px solid var(--brand)}

/* ===== Clients: Marquee + Grid Fallback (Bigger, Colored, Spaced) ===== */
.logo-wall{
  display:none; position:relative; overflow:hidden; padding-block:.9rem;
  background:
    radial-gradient(18rem 6rem at 10% 0%, #cbd5e180, transparent 60%),
    radial-gradient(18rem 6rem at 90% 100%, #cbd5e180, transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-alt));
  mask-image: linear-gradient(to left, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to left, transparent, #000 8%, #000 92%, transparent);
}
@media(min-width:700px){ .logo-wall{display:block} }

.logo-track{
  display:flex; gap:5rem; align-items:center; min-width:max-content;
  animation: logos-scroll 25s linear infinite;
}
/* مسافة بين صفّي الماركيه */
.logo-wall .logo-track + .logo-track{ margin-top:1.2rem; }

.logo-track img{
  height:72px; width:auto; object-fit:contain;
  padding:.9rem 1.2rem; background:var(--bg); border:1px solid var(--border); border-radius:16px;
  filter:none !important; opacity:1 !important;
  box-shadow:0 0 0 rgba(0,0,0,0); transition:transform .2s ease, box-shadow .2s ease;
}
@media(max-width:1000px){ .logo-track img{ height:64px } }

.logo-track img:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.08) }

@keyframes logos-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.logo-wall:hover .logo-track{ animation-play-state:paused }

.clients-grid--fallback{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1rem;
}
.clients-grid--fallback img{
  background:var(--bg); border:1px solid var(--border); border-radius:16px;
  padding:.9rem 1.2rem; max-height:72px; object-fit:contain; width:100%;
}
@media(min-width:700px){ .clients-grid--fallback{ display:none } }

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce){
  .logo-wall{ display:none !important }
  .clients-grid--fallback{ display:grid !important }
  .blob,.bar,.spark path{ animation:none !important }
}

/* Footer */
.footer{background:var(--brand);color:#fff;padding:1.6rem 0;margin-top:2rem}
.foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.foot-left{display:flex;align-items:center;gap:.6rem}
.foot-left img{height:40px}
.foot-links{display:flex;gap:.8rem;flex-wrap:wrap}
.foot a{color:#fff;text-decoration:underline}

/* Floating WhatsApp */
.float-wa{
  position:fixed; right:18px; bottom:18px;
  background:var(--accent); color:#fff; border-radius:999px;
  padding:.8rem 1.1rem; font-weight:700;
  box-shadow:0 10px 18px rgba(0,0,0,.18);
}

/* Reveal on scroll */
[data-animate]{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease}
.reveal-in{opacity:1;transform:none}