/* =========================================================
   شركة العشب المميز التجارية (S.A.G) — نموذج عرض
   نظام تصميم 3 طبقات: لوحة خام ← أوضاع أقسام ← مكوّنات دلالية
   ========================================================= */

/* ===== الطبقة 1 — لوحة خام من هوية العميل (مستنبطة من اللوجو الرسمي) ===== */
:root{
  --accent:#14532B;
  --accent-rgb:20,83,43;
  --accent-2:#7CB342;
  --accent-2-rgb:124,179,66;
  --on-accent:#fff;

  --ink-900:#0F1710;  --ink-700:#3A473C;
  --ink-rgb:15,23,16;
  --paper:#FFFFFF;  --paper-2:#F4F8F1;  --paper-3:#E7EFE1;

  --nav-bg:transparent;
  --nav-bg-scrolled:rgba(var(--ink-rgb),.78);

  /* مقاييس */
  --maxw:1200px;  --pad:clamp(18px,5vw,44px);  --sec-y:clamp(56px,8vw,110px);
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:100px;

  --sh-sm:0 2px 10px rgba(var(--ink-rgb),.08);
  --sh-md:0 14px 40px rgba(var(--ink-rgb),.12);
  --sh-lg:0 30px 70px rgba(var(--ink-rgb),.16);

  --ease:cubic-bezier(.22,.61,.36,1); --t-fast:.2s; --t-mid:.35s; --t-slow:.7s; --x:-1;
  /* شريط النموذج التوضيحي — خارج هوية العميل عمدا */
  --demo-bg:#1A1200; --demo-ink:#FFD76B;

  color-scheme: light;
}
html[dir="ltr"]{ --x:1; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-padding-block-start:100px; }
body{
  margin:0; background:var(--paper); color:var(--ink-900);
  font-family:"SF Arabic","Geeza Pro","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  line-height:1.7; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
section{ background:var(--bg); color:var(--ink); padding-block:var(--sec-y); }
.site-footer{ background:var(--bg); color:var(--ink); }

h1,h2,h3{ margin:0; font-weight:800; line-height:1.2; }
h1{ font-size:clamp(32px,6vw,58px); }
h2{ font-size:clamp(26px,4vw,40px); }
h3{ font-size:clamp(19px,2.4vw,24px); }
p{ margin:0; text-align:justify; text-justify:inter-word; hyphens:none; }
.lead{ font-size:clamp(16px,1.7vw,19px); }
h1,h2,h3,.lead,.btn,li{ text-align:start; }

/* ===== الطبقة 2 — أوضاع الأقسام ===== */
.sec-dark  { --bg:var(--ink-900); --ink:#fff;          --ink-2:rgba(255,255,255,.68); --surface:rgba(255,255,255,.06); --border:rgba(255,255,255,.14); }
.sec-light { --bg:var(--paper);   --ink:var(--ink-900);--ink-2:var(--ink-700);        --surface:var(--paper-2);        --border:rgba(var(--ink-rgb),.10); }
.sec-tint  { --bg:var(--paper-2); --ink:var(--ink-900);--ink-2:var(--ink-700);        --surface:#fff;                  --border:rgba(var(--ink-rgb),.10); }
.sec-brand { --bg:var(--accent);  --ink:var(--on-accent);--ink-2:rgba(255,255,255,.85);--surface:rgba(255,255,255,.12); --border:rgba(255,255,255,.24); }

/* ===== الطبقة 3 — مكوّنات دلالية ===== */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--accent); font-weight:700; font-size:14px; letter-spacing:.02em;
  margin-block-end:14px;
}
.sec-dark .eyebrow, .sec-brand .eyebrow{ color:var(--accent-2); }
.eyebrow::before{ content:""; width:22px; height:2px; background:currentColor; border-radius:2px; }

.muted{ color:var(--ink-2); }

.card{
  background:var(--surface); border:1px solid var(--border); color:var(--ink);
  border-radius:var(--r-lg); padding:clamp(20px,3vw,28px);
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--border); color:var(--ink);
  border-radius:var(--r-pill); padding:8px 16px; font-size:14px; font-weight:700;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:var(--r-pill); font-weight:700; font-size:15px;
  min-height:52px; white-space:nowrap;
}
.btn-primary{ background:var(--accent-2); color:var(--ink-900); }
.btn-ghost{ border:1px solid var(--border); color:var(--ink); background:transparent; }
.sec-brand .btn-ghost{ border-color:rgba(255,255,255,.55); }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }
.arrow{ display:inline-block; transition:transform var(--t-mid) var(--ease); }

.tel{ font-weight:800; letter-spacing:.02em; }

/* ===== الهيدر ===== */
.top-fixed{ position:fixed; inset-block-start:0; inset-inline:0; z-index:50; }
.site-header{
  background:var(--nav-bg);
  transition:background var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.site-header.scrolled{ background:var(--nav-bg-scrolled); backdrop-filter:blur(14px); box-shadow:var(--sh-sm); }
.header-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:14px; }
.brand{ display:flex; align-items:center; }
.brand img{ height:46px; width:auto; }

.main-nav{ display:flex; align-items:center; gap:4px; }
.main-nav a{
  color:rgba(255,255,255,.86); font-weight:600; font-size:15px;
  padding:10px 13px; border-radius:var(--r-pill);
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
@media (hover:hover){ .main-nav a:hover{ background:rgba(255,255,255,.12); color:var(--on-accent); } }
.header-cta{ display:flex; align-items:center; gap:12px; }
.header-cta .btn{ padding:11px 22px; min-height:44px; font-size:14px; }

.burger{
  display:none; width:44px; height:44px; border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.3); background:transparent; cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.burger span{ width:20px; height:2px; background:var(--on-accent); border-radius:2px; }

/* ===== الهيرو ===== */
.hero{ position:relative; overflow:hidden; isolation:isolate; padding-block-start:clamp(150px,18vw,200px); }
.hero::before{
  content:""; position:absolute; inset:-20%; z-index:-1; pointer-events:none;
  background:radial-gradient(40% 40% at 25% 30%, rgba(var(--accent-2-rgb),.34), transparent 70%),
             radial-gradient(35% 35% at 75% 65%, rgba(var(--accent-rgb),.5), transparent 70%);
  filter:blur(40px);
  animation:drift 18s ease-in-out infinite alternate;
}
@keyframes drift{ to{ transform:translate3d(4%,-3%,0) scale(1.1) } }

.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,60px);
  align-items:center; padding-block-end:clamp(50px,8vw,90px);
}
.hero h1{ margin-block-end:18px; margin-block-start:20px; }
.hero .lead{ max-width:48ch; margin-block-end:30px; color:var(--ink-2); }

.hero-media{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  aspect-ratio:4/3; border:1px solid var(--border); box-shadow:var(--sh-lg);
}
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-stats{
  position:absolute; inset-inline-start:18px; inset-block-end:18px;
  display:flex; gap:10px; flex-wrap:wrap;
}
.hero-stats .badge{ background:rgba(var(--ink-rgb),.62); border-color:rgba(255,255,255,.3); color:var(--on-accent); backdrop-filter:blur(8px); }

.trust-strip{ display:flex; gap:28px; flex-wrap:wrap; padding-block-start:22px; border-block-start:1px solid var(--border); }
.trust-item{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; color:var(--ink-2); }
.trust-item .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent-2); flex:none; }

/* ===== الشبكات العامة ===== */
.section-head{ max-width:62ch; margin-block-end:clamp(30px,5vw,50px); }
.section-head .lead{ margin-block-start:14px; }
.grid{ display:grid; gap:22px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }

/* ===== كروت الخدمات (بصور حقيقية) ===== */
.service-card{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.service-card .ph{ aspect-ratio:16/10; overflow:hidden; }
.service-card .ph img{ width:100%; height:100%; object-fit:cover; }
.service-card .body{ padding:clamp(18px,2.4vw,24px); display:flex; flex-direction:column; gap:10px; flex:1; }
.service-card .more{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--accent); font-size:14px; margin-block-start:auto; padding-block-start:6px; }

.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-block-start:clamp(24px,3vw,34px); }

/* ===== لماذا نحن ===== */
.why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,60px); align-items:center; }
.why-list{ display:grid; gap:18px; margin-block-start:26px; }
.why-item{ display:flex; gap:14px; align-items:flex-start; }
.why-item .ic{
  flex:none; width:46px; height:46px; border-radius:var(--r-sm);
  background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}
.why-item .ic svg{ width:22px; height:22px; }
.why-item h3{ font-size:17px; margin-block-end:4px; }
.why-item p{ font-size:15px; }
.branch-row{ display:flex; gap:14px; flex-wrap:wrap; margin-block-start:28px; }

/* ===== معرض الأعمال ===== */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.shot{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  border:1px solid var(--border); aspect-ratio:4/3; background:var(--surface);
}
.shot img{ width:100%; height:100%; object-fit:cover; }
.shot figcaption{
  position:absolute; inset-inline:0; inset-block-end:0;
  padding:26px 16px 14px; font-size:14px; font-weight:700; color:var(--on-accent);
  background:linear-gradient(to top, rgba(var(--ink-rgb),.88), transparent);
}

/* ===== خطوات العمل ===== */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:step; }
.step{ position:relative; padding-block-start:14px; border-block-start:2px solid var(--border); }
.step .n{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; background:var(--accent); color:var(--on-accent);
  font-weight:800; font-size:16px; margin-block-end:12px;
}
.step h3{ font-size:18px; margin-block-end:6px; }
.step p{ font-size:15px; }

/* ===== الأرقام ===== */
.stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; text-align:center; }
.stat .num{ font-size:clamp(34px,5vw,54px); font-weight:800; color:var(--accent-2); }
.stat p{ margin-block-start:8px; text-align:center; }

/* ===== CTA ===== */
.cta-box{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.cta-box .lead{ margin-block-start:10px; max-width:54ch; }

/* ===== الفوتر ===== */
.site-footer .wrap{ padding-block:clamp(50px,7vw,80px) 30px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:36px; margin-block-end:40px; }
.footer-brand .brand{ margin-block-end:14px; }
.footer-brand img{ height:44px; }
.footer-col h3{ font-size:15px; margin-block-end:16px; color:var(--on-accent); }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.footer-col li, .footer-col a{ color:var(--ink-2); font-size:14px; }
@media (hover:hover){ .footer-col a:hover{ color:var(--on-accent); } }
.social-row{ display:flex; gap:10px; margin-block-start:16px; }
.social-row a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}
.social-row svg{ width:16px; height:16px; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-block-start:26px; border-block-start:1px solid var(--border);
  font-size:13px; color:var(--ink-2);
}

/* ===== شريط نموذج توضيحي ===== */
.demo-banner{
  background:var(--demo-bg); color:var(--demo-ink); text-align:center; font-size:13px; font-weight:700;
  padding:10px var(--pad);
}

/* =========================================================
   الحركة — الطبقة الأساسية (إلزامية، قسم 8)
   ========================================================= */
.reveal      { opacity:0; transform:translateY(44px);
               transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.reveal-fade { opacity:0; transition:opacity .8s var(--ease); }
.reveal.in, .reveal-fade.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{transition-delay:.1s} .reveal[data-d="2"]{transition-delay:.2s}
.reveal[data-d="3"]{transition-delay:.3s} .reveal[data-d="4"]{transition-delay:.4s}

[data-stagger] > *   { opacity:0; transform:translateY(40px);
                       transition:opacity .68s var(--ease), transform .68s var(--ease); }
[data-stagger].in > *{ opacity:1; transform:none; }
[data-stagger].in > *:nth-child(2){transition-delay:.1s}
[data-stagger].in > *:nth-child(3){transition-delay:.2s}
[data-stagger].in > *:nth-child(4){transition-delay:.3s}
[data-stagger].in > *:nth-child(5){transition-delay:.4s}
[data-stagger].in > *:nth-child(n+6){transition-delay:.5s}

.card,.btn,.shot{
  transition:transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease),
             background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.card .ph img, .shot img{ transition:transform .5s var(--ease); }
@media (hover:hover){
  .card:hover        { transform:translateY(-6px); box-shadow:var(--sh-md); }
  .btn:hover         { transform:translateY(-2px); box-shadow:var(--sh-sm); }
  .shot:hover        { transform:translateY(-5px); box-shadow:var(--sh-md); }
  .card:hover .ph img,
  .shot:hover img    { transform:scale(1.06); }
  .card:hover .arrow,
  .btn:hover .arrow  { transform:translateX(calc(6px * var(--x))); }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .reveal,.reveal-fade,[data-stagger] > *{ opacity:1!important; transform:none!important; }
}

/* حارس الـ no-js */
.no-js .reveal,.no-js .reveal-fade,.no-js [data-stagger] > *{ opacity:1; transform:none; }

/* ===== ريسبونسف ===== */
@media (max-width:1024px){
  .hero-grid{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:768px){
  .main-nav, .header-cta .btn{ display:none; }
  .burger{ display:flex; }
  .grid-3, .grid-2, .stats-grid, .gallery, .steps{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .cta-box{ flex-direction:column; align-items:flex-start; }
  .brand img{ height:38px; }
}
@media (max-width:480px){
  .btn-row{ flex-direction:column; align-items:stretch; }
}

/* ===== درور الموبايل ===== */
.mobile-drawer{
  position:fixed; inset:0; z-index:60; background:var(--ink-900);
  display:flex; flex-direction:column; padding:24px var(--pad);
  transform:translateX(calc(100% * var(--x) * -1)); transition:transform var(--t-mid) var(--ease);
}
.mobile-drawer.open{ transform:translateX(0); }
.mobile-drawer .top{ display:flex; justify-content:space-between; align-items:center; margin-block-end:30px; }
.mobile-drawer .top img{ height:40px; width:auto; }
.mobile-drawer nav{ display:grid; gap:6px; }
.mobile-drawer a{ color:var(--on-accent); font-size:20px; font-weight:700; padding:14px 6px; border-block-end:1px solid rgba(255,255,255,.1); }
.mobile-drawer .close{
  width:44px; height:44px; border-radius:var(--r-sm); border:1px solid rgba(255,255,255,.3);
  background:transparent; color:var(--on-accent); font-size:20px; cursor:pointer;
}

/* ===== صفحة قريبا ===== */
.soon{ padding-block:clamp(160px,20vw,220px) clamp(90px,14vw,160px); text-align:center; }
.soon .eyebrow{ justify-content:center; }
.soon h1{ margin-block-start:10px; text-align:center; }
.soon .lead{ margin-inline:auto; margin-block-start:16px; max-width:48ch; text-align:center; }
.soon .btn{ margin-block-start:30px; }
.mobile-drawer .close svg{ width:20px; height:20px; }
body.no-scroll{ overflow:hidden; }