/* ============================================================
   شركة ألبان نجران المحدودة — نموذج
   الألوان من اللوجو الفعلي: برتقالي + أزرق ملكي
   ============================================================ */

/* ===== الطبقة 1 — لوحة خام من الهوية ===== */
:root{
  color-scheme: light;                 /* هوك الثيم (قسم 13) */

  --accent:#F7941D;                    /* برتقالي اللوجو */
  --accent-2:#FFB24D;
  --accent-rgb:247,148,29;
  --on-accent:#3A2400;

  --blue-900:#14357F;                  /* أزرق عميق — مرساة داكنة */
  --blue-800:#1C3B8B;
  --blue-700:#274CA6;
  --blue-rgb:20,53,127;

  --ink-900:#111826;  --ink-700:#3A4658;
  --ink-rgb:17,24,38;
  --paper:#FFFFFF;  --paper-2:#F2F6FC;  --paper-3:#E6EEF8;

  --nav-bg:transparent;
  --nav-bg-scrolled:rgba(var(--blue-rgb),.90);

  /* مقاييس */
  --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),.06);
  --sh-md:0 14px 40px rgba(var(--ink-rgb),.10);
  --sh-lg:0 30px 70px rgba(var(--ink-rgb),.16);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ===== الطبقة 2 — أوضاع الأقسام ===== */
.sec-dark  { --bg:var(--blue-900); --ink:#fff;           --ink-2:rgba(255,255,255,.72); --surface:rgba(255,255,255,.06); --border:rgba(255,255,255,.16); }
.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:#fff;           --ink-2:rgba(255,255,255,.9);  --surface:rgba(255,255,255,.16); --border:rgba(255,255,255,.34); }

/* ===== الأساس ===== */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
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;
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
section{ background:var(--bg); color:var(--ink); padding-block:var(--sec-y); position:relative; }
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

h1,h2,h3{ line-height:1.18; margin:0 0 .5em; font-weight:800; letter-spacing:-.01em; text-align:start; }
h1{ font-size:clamp(32px,6vw,58px); }
h2{ font-size:clamp(26px,4vw,40px); }
h3{ font-size:clamp(19px,2.4vw,24px); font-weight:700; }
p{ margin:0 0 1em; text-align:justify; text-justify:inter-word; hyphens:none; }
.lead{ font-size:clamp(16px,1.7vw,19px); color:var(--ink-2); text-align:start; }

.eyebrow{ display:inline-block; color:var(--accent); font-weight:700; font-size:14px;
  letter-spacing:.02em; margin-bottom:12px; text-align:start; }
.sec-dark .eyebrow, .sec-brand .eyebrow{ color:var(--accent-2); }
.sec-brand .eyebrow{ color:#fff; opacity:.9; }
.muted{ color:var(--ink-2); }
.center{ text-align:center; }
.center .eyebrow,.center h2,.center .lead{ text-align:center; }
.center .lead{ max-width:660px; margin-inline:auto; }

/* ===== الأزرار ===== */
.btn{ display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:16px;
  padding:14px 26px; border-radius:var(--r-pill); border:1px solid transparent; cursor:pointer;
  min-height:52px; line-height:1; text-align:start;
  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); }
.btn-primary{ background:var(--accent); color:var(--on-accent); box-shadow:0 8px 22px rgba(var(--accent-rgb),.35); }
.btn-ghost{ border-color:var(--border); color:var(--ink); background:transparent; }
.sec-brand .btn-primary{ background:#fff; color:var(--accent); box-shadow:0 8px 22px rgba(var(--ink-rgb),.18); }
.btn .arrow{ transition:transform var(--t-mid) var(--ease); }
@media (hover:hover){
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(var(--accent-rgb),.45); }
  .btn-ghost:hover{ transform:translateY(-2px); border-color:var(--accent); color:var(--accent); }
  .sec-dark .btn-ghost:hover{ color:#fff; border-color:#fff; }
  .btn:hover .arrow{ transform:translateX(calc(6px * var(--x))); }
}

/* ===== الهيدر ===== */
.site-header{ position:sticky; inset-block-start:0; z-index:50;
  background:var(--blue-900); border-bottom:1px solid rgba(255,255,255,.10);
  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-md); }
.nav{ display:flex; align-items:center; gap:22px; padding-block:14px; }
.brand{ display:flex; align-items:center; gap:12px; margin-inline-end:auto; }
.brand .logo{ height:52px; width:auto; border-radius:12px; box-shadow:0 4px 14px rgba(var(--ink-rgb),.18); background:#fff; }
.brand .brand-txt{ display:flex; flex-direction:column; line-height:1.2; color:#fff; }
.brand .brand-txt b{ font-size:16px; font-weight:800; }
.brand .brand-txt span{ font-size:12px; color:rgba(255,255,255,.72); }
.nav-links{ display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0; }
.nav-links a{ color:#fff; font-weight:600; font-size:15px; padding:9px 14px; border-radius:var(--r-pill);
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
@media (hover:hover){ .nav-links a:hover{ background:rgba(255,255,255,.14); } }
.nav-links a.active{ color:var(--accent-2); }
.nav-cta{ display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:var(--on-accent);
  font-weight:700; padding:10px 18px; border-radius:var(--r-pill); font-size:15px; white-space:nowrap;
  transition:transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease); }
@media (hover:hover){ .nav-cta:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(var(--accent-rgb),.4); } }
.lang{ color:#fff; font-weight:700; font-size:14px; padding:9px 12px; border:1px solid rgba(255,255,255,.28);
  border-radius:var(--r-pill); }
.burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.burger span{ width:24px; height:2px; background:#fff; border-radius:2px; transition:transform var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease); }

/* ===== الهيرو ===== */
.hero{ overflow:hidden; isolation:isolate; padding-block:clamp(48px,7vw,96px) clamp(40px,6vw,80px); }
.hero::before{ content:""; position:absolute; inset:-25%; z-index:0; pointer-events:none;
  background:radial-gradient(42% 42% at 26% 28%, rgba(var(--accent-rgb),.42), transparent 70%),
             radial-gradient(38% 38% at 78% 62%, rgba(39,76,166,.55), transparent 72%);
  filter:blur(46px); animation:drift 18s ease-in-out infinite alternate; }
@keyframes drift{ to{ transform:translate3d(4%,-3%,0) scale(1.1); } }
.hero .wrap{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:center; }
/* دخول الهيرو عند التحميل (مش عند التمرير) — CSS مستقل عن JS */
.hero-anim{ animation:heroIn .8s var(--ease) both; }
.hero-anim.d2{ animation-delay:.15s; } .hero-anim.d3{ animation-delay:.32s; }
@keyframes heroIn{ from{ opacity:0; transform:translateY(32px); } }
.hero h1{ margin-bottom:.35em; }
.hero .lead{ color:rgba(255,255,255,.82); margin-bottom:26px; max-width:44ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; }
.hero-media{ position:relative; }
.hero-media .plate{ background:linear-gradient(180deg,#fff, #EAF2FF); border-radius:var(--r-xl);
  padding:26px 22px; box-shadow:var(--sh-lg); border:1px solid rgba(255,255,255,.6); }
.hero-media .plate img{ border-radius:12px; }
.hero-media .cap{ margin-top:14px; text-align:center; color:var(--ink-700); font-size:13px; font-weight:600; }
.badge-float{ position:absolute; inset-block-start:-16px; inset-inline-start:-16px; background:var(--accent);
  color:var(--on-accent); font-weight:800; font-size:14px; padding:12px 18px; border-radius:var(--r-pill);
  box-shadow:0 10px 26px rgba(var(--accent-rgb),.45); }

/* شريط الثقة تحت الهيرو */
.trust-strip{ position:relative; z-index:1; margin-top:clamp(30px,4vw,52px); display:flex; flex-wrap:wrap;
  gap:14px 30px; justify-content:center; border-top:1px solid rgba(255,255,255,.14); padding-top:26px; }
.trust-strip div{ display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.86); font-weight:600; font-size:15px; }
.trust-strip svg{ width:22px; height:22px; flex:none; color:var(--accent-2); }

/* ===== الشبكات والكروت ===== */
.grid{ display:grid; gap:22px; }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }

.card{ background:var(--surface); border:1px solid var(--border); color:var(--ink);
  border-radius:var(--r-lg); padding:26px; position:relative; overflow:hidden;
  transition:transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease); }
.card .ico{ width:54px; height:54px; border-radius:14px; display:grid; place-items:center; margin-bottom:16px;
  background:rgba(var(--accent-rgb),.14); color:var(--accent); }
.card .ico svg{ width:28px; height:28px; }
.card h3{ margin-bottom:.35em; }
.card p{ margin:0; color:var(--ink-2); font-size:15px; }
.card .arrow{ margin-top:16px; display:inline-flex; color:var(--accent); font-weight:700; font-size:14px; gap:6px; transition:transform var(--t-mid) var(--ease); }
@media (hover:hover){
  .card:hover{ transform:translateY(-6px); box-shadow:var(--sh-md); border-color:rgba(var(--accent-rgb),.4); }
  .card:hover .arrow{ transform:translateX(calc(5px * var(--x))); }
}

/* كروت المنتجات بصورة */
.prod{ background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;
  transition:transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease); }
.prod .ph{ overflow:hidden; background:var(--paper-3); aspect-ratio:16/10; }
.prod .ph img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.prod .body{ padding:18px 20px; }
.prod .body h3{ margin:0 0 4px; font-size:18px; }
.prod .body p{ margin:0; font-size:14px; color:var(--ink-700); }
@media (hover:hover){
  .prod:hover{ transform:translateY(-6px); box-shadow:var(--sh-md); }
  .prod:hover .ph img{ transform:scale(1.06); }
}

/* ===== قسم عن الشركة (صورة + نص) ===== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center; }
.split .media img{ border-radius:var(--r-xl); box-shadow:var(--sh-md); width:100%; object-fit:cover; }
.checklist{ list-style:none; margin:22px 0 26px; padding:0; display:grid; gap:12px; }
.checklist li{ display:flex; align-items:flex-start; gap:12px; color:var(--ink-2); }
.checklist svg{ width:22px; height:22px; flex:none; color:var(--accent); margin-top:2px; }

/* ===== الأرقام ===== */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.stat{ text-align:center; padding:8px; }
.stat .num{ font-size:clamp(34px,5vw,52px); font-weight:800; color:#fff; line-height:1; letter-spacing:-.02em; }
.stat .num .sfx{ color:var(--accent-2); }
.stat .lbl{ margin-top:10px; color:rgba(255,255,255,.72); font-size:15px; font-weight:600; }

/* ===== CTA ===== */
.cta-band{ text-align:center; }
.cta-band h2{ text-align:center; }
.cta-band .lead{ color:rgba(255,255,255,.92); text-align:center; margin-inline:auto; margin-bottom:26px; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* ===== الفوتر ===== */
.site-footer{ background:var(--blue-900); color:rgba(255,255,255,.72); padding-block:clamp(46px,6vw,72px) 26px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.site-footer .logo{ height:56px; width:auto; border-radius:12px; background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.25); margin-bottom:16px; }
.site-footer p{ font-size:14px; color:rgba(255,255,255,.66); text-align:start; max-width:34ch; }
.site-footer h4{ color:#fff; font-size:15px; margin:0 0 16px; font-weight:700; }
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.site-footer a{ color:rgba(255,255,255,.72); font-size:14px; transition:color var(--t-fast) var(--ease); }
@media (hover:hover){ .site-footer a:hover{ color:var(--accent-2); } }
.site-footer .contact-row{ display:flex; align-items:center; gap:10px; margin-bottom:11px; font-size:14px; }
.site-footer .contact-row svg{ width:18px; height:18px; color:var(--accent-2); flex:none; }
.footer-bottom{ margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; font-size:13px; color:rgba(255,255,255,.5); }

/* ===== شريط النموذج ===== */
.demo-bar{ background:var(--ink-900); color:#fff; text-align:center; font-size:13px; font-weight:600;
  padding:9px 16px; }
.demo-bar span{ color:var(--accent-2); }

/* رقم لاتيني */
[dir="ltr"]{ unicode-bidi:isolate; }

/* ============================================================
   الحركة — الطبقة الأساسية (قسم 8.2)
   ============================================================ */
:root{ --t-fast:.2s; --t-mid:.35s; --t-slow:.7s; --x:-1; }
html[dir="ltr"]{ --x:1; }

.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 .65s var(--ease), transform .65s var(--ease); }
[data-stagger].in > *{ opacity:1; transform:none; }
[data-stagger].in > *:nth-child(2){transition-delay:.09s}
[data-stagger].in > *:nth-child(3){transition-delay:.18s}
[data-stagger].in > *:nth-child(4){transition-delay:.27s}
[data-stagger].in > *:nth-child(5){transition-delay:.36s}
[data-stagger].in > *:nth-child(n+6){transition-delay:.45s}

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

/* ===== الريسبونسف ===== */
@media (max-width:1024px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-media{ max-width:560px; margin-inline:auto; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); gap:30px 22px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:768px){
  .nav-links,.nav .lang{ display:none; }
  .nav-links.open{ display:flex; position:absolute; inset-inline:0; inset-block-start:100%;
    flex-direction:column; align-items:stretch; gap:2px; background:var(--blue-900); padding:14px;
    box-shadow:var(--sh-md); }
  .nav-links.open a{ padding:13px 16px; }
  .burger{ display:flex; }
  .nav .nav-cta{ margin-inline-start:auto; }
  .split{ grid-template-columns:1fr; }
  .split .media{ order:-1; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
}
@media (max-width:480px){
  .grid-4,.grid-3,.grid-2{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .brand .brand-txt{ display:none; }
  .hero-cta .btn{ width:100%; justify-content:center; }
}

/* الحارس — حركة مخففة */
@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; }
}