/* =========================================================
   Bakemate — نموذج عربي
   نظام تصميم 3 طبقات + RTL + الحركة الأساسية
   ========================================================= */

/* ===== الطبقة 1 — لوحة خام من هوية العميل ===== */
:root{
  --accent:#C89033;              /* دهبي البراند */
  --accent-rgb:200,144,51;
  --accent-2:#E4B85F;            /* دهبي أفتح للتدرّجات */
  --on-accent:#241708;           /* نص فوق الدهبي */

  --ink-900:#0F172A;             /* كحلي البراند */
  --ink-800:#12203C;             /* كحلي أفتح للّوحات الزخرفية */
  --ink-700:#334155;
  --ink-rgb:15,23,42;

  --paper:#FFFFFF;
  --paper-2:#FAF6EF;             /* كريمي دافئ */
  --paper-3:#F1E8D9;             /* كريمي أعمق */

  --nav-bg:rgba(250,246,239,.82);
  --nav-bg-scrolled:rgba(250,246,239,.96);

  color-scheme: light;           /* هوك الثيم (قسم 13) */

  /* مقاييس */
  --maxw:1200px;  --pad:clamp(18px,5vw,44px);  --sec-y:clamp(58px,8vw,112px);
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:100px;
  --sh-sm:0 2px 10px rgba(15,23,42,.06);
  --sh-md:0 14px 40px rgba(15,23,42,.10);
  --sh-lg:0 30px 70px rgba(15,23,42,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:.2s; --t-mid:.35s; --t-slow:.7s; --x:-1;
}
html[dir="ltr"]{ --x:1; }

/* ===== الطبقة 2 — أوضاع الأقسام ===== */
.sec-dark  { --bg:var(--ink-900); --ink:#fff;           --ink-2:rgba(255,255,255,.68); --surface:rgba(255,255,255,.055); --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(15,23,42,.10); }
.sec-tint  { --bg:var(--paper-2); --ink:var(--ink-900); --ink-2:var(--ink-700);        --surface:#fff;                   --border:rgba(15,23,42,.09); }
.sec-brand { --bg:var(--accent); --ink:var(--on-accent);--ink-2:rgba(36,23,8,.72);     --surface:rgba(255,255,255,.16);  --border:rgba(36,23,8,.18); }

/* ===== تهيئة عامة ===== */
*,*::before,*::after{ 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",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
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); }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

/* ===== الطباعة ===== */
h1,h2,h3{ line-height:1.18; margin:0; 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; }
.lead{ font-size:clamp(16px,1.7vw,19px); color:var(--ink-2); text-align:start; }
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; font-weight:700; letter-spacing:.08em;
  color:var(--accent); text-transform:none; margin-bottom:16px;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--accent); border-radius:2px; }
.muted{ color:var(--ink-2); }
.sec-head{ max-width:640px; margin-bottom:clamp(34px,5vw,54px); }
.sec-head p{ margin-top:14px; }

/* فقرات مضبوطة الطرفين (متن طويل فقط) */
.prose p{ text-align:justify; text-justify:inter-word; hyphens:none; }

/* ===== الأزرار ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font:inherit; font-weight:700; cursor:pointer; border:0;
  padding:14px 26px; border-radius:var(--r-pill); min-height:52px;
  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), color var(--t-mid) var(--ease);
  text-align:start; line-height:1.2;
}
.btn-primary{ background:var(--accent); color:var(--on-accent); box-shadow:0 8px 24px rgba(var(--accent-rgb),.28); }
.btn-ghost{ background:transparent; border:1px solid var(--border); color:var(--ink); }
.btn-lg{ padding:16px 32px; min-height:58px; font-size:17px; }
.btn .arrow{ transition:transform var(--t-mid) var(--ease); }

/* ===== الهيدر (كريمي فاتح ثابت) ===== */
.site-header{
  position:sticky; inset-block-start:0; z-index:60;
  background:var(--nav-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-block-end:1px solid rgba(15,23,42,.08);
  transition:background var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.site-header.scrolled{ background:var(--nav-bg-scrolled); box-shadow:var(--sh-sm); }
.nav{ display:flex; align-items:center; gap:22px; min-height:74px; }
.brand{ display:flex; align-items:center; gap:10px; margin-inline-end:auto; }
.brand img{ height:38px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{
  padding:9px 14px; border-radius:var(--r-pill); font-weight:600; font-size:15px;
  color:var(--ink-700); transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-phone{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px;
  color:var(--ink-900); padding:9px 12px; border-radius:var(--r-pill);
}
.nav-phone svg{ width:18px; height:18px; color:var(--accent); }
.lang{ font-weight:700; font-size:14px; padding:8px 12px; border:1px solid rgba(15,23,42,.14); border-radius:var(--r-pill); color:var(--ink-700); }
@media (hover:hover){
  .nav-links a:hover{ background:rgba(var(--accent-rgb),.12); color:var(--ink-900); }
  .nav-phone:hover{ background:rgba(var(--accent-rgb),.10); }
  .lang:hover{ border-color:var(--accent); color:var(--accent); }
}
.burger{ display:none; width:46px; height:46px; border:1px solid rgba(15,23,42,.14); background:var(--paper); border-radius:12px; cursor:pointer; align-items:center; justify-content:center; }
.burger span{ display:block; width:20px; height:2px; background:var(--ink-900); position:relative; transition:transform .3s var(--ease), opacity .3s var(--ease); }
.burger span::before,.burger span::after{ content:""; position:absolute; inset-inline-start:0; width:20px; height:2px; background:var(--ink-900); transition:transform .3s var(--ease); }
.burger span::before{ inset-block-start:-6px; } .burger span::after{ inset-block-start:6px; }
.nav.open .burger span{ background:transparent; }
.nav.open .burger span::before{ transform:translateY(6px) rotate(45deg); }
.nav.open .burger span::after{ transform:translateY(-6px) rotate(-45deg); }

/* ===== الهيرو ===== */
.hero{ position:relative; overflow:hidden; isolation:isolate; padding-block:clamp(66px,11vw,140px); }
.hero::before{
  content:""; position:absolute; inset:-25%; z-index:-1; pointer-events:none;
  background:radial-gradient(42% 42% at 26% 28%, rgba(var(--accent-rgb),.42), transparent 70%),
             radial-gradient(38% 38% at 78% 66%, rgba(228,184,95,.22), transparent 72%);
  filter:blur(46px); animation:drift 20s ease-in-out infinite alternate;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:26px 26px; mask-image:linear-gradient(to bottom, rgba(0,0,0,1), transparent 85%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1), transparent 85%);
}
@keyframes drift{ to{ transform:translate3d(4%,-3%,0) scale(1.1); } }
.hero-inner{ max-width:760px; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.chip{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  padding:8px 14px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--border); color:var(--ink-2);
}
.chip b{ color:var(--accent); font-weight:800; }
.hero h1{ margin-bottom:20px; }
.hero h1 .g{ color:var(--accent); }
.hero p{ max-width:600px; margin-bottom:30px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }
.hero-stats{ display:flex; flex-wrap:wrap; gap:34px; margin-top:48px; padding-top:34px; border-block-start:1px solid var(--border); }
.hero-stats .st{ min-width:96px; }
.hero-stats .num{ font-size:clamp(28px,4vw,40px); font-weight:800; color:var(--ink); line-height:1; }
.hero-stats .num .u{ color:var(--accent); }
.hero-stats .lb{ font-size:13.5px; color:var(--ink-2); margin-top:8px; }

/* ===== الشبكات والكروت ===== */
.grid{ display:grid; gap:22px; }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,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 h3{ margin-bottom:10px; }
.card p{ color:var(--ink-2); font-size:15px; }
.card .arrow{ transition:transform var(--t-mid) var(--ease); color:var(--accent); }
.card-link{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-weight:700; font-size:14.5px; color:var(--accent); }
@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(6px * var(--x))); }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(var(--accent-rgb),.36); }
  .btn-ghost:hover{ transform:translateY(-2px); border-color:var(--accent); color:var(--accent); }
  .btn:hover .arrow{ transform:translateX(calc(6px * var(--x))); }
}

/* أيقونة داخل كارت */
.ic{
  width:54px; height:54px; border-radius:15px; display:grid; place-items:center; margin-bottom:18px;
  background:rgba(var(--accent-rgb),.14); color:var(--accent);
}
.ic svg{ width:27px; height:27px; }

/* كارت الفئة: رقم كبير خلفي */
.cat-card .idx{
  position:absolute; inset-block-start:14px; inset-inline-end:18px;
  font-size:46px; font-weight:800; line-height:1; color:var(--ink);
  opacity:.06;
}

/* ===== الجودة / الشهادات ===== */
.certs{ display:flex; flex-wrap:wrap; gap:14px; }
.cert{
  display:flex; align-items:center; gap:12px; padding:16px 20px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); flex:1 1 220px;
}
.cert svg{ width:26px; height:26px; color:var(--accent); flex:0 0 auto; }
.cert b{ display:block; font-size:15px; }
.cert span{ font-size:13px; color:var(--ink-2); }
.stats-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:44px; }
.stat{ text-align:center; padding:22px 12px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border); }
.stat .num{ font-size:clamp(30px,5vw,46px); font-weight:800; color:var(--accent); line-height:1; }
.stat .lb{ font-size:14px; color:var(--ink-2); margin-top:10px; }

/* ===== قسم صف (نص + قائمة) ===== */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,64px); align-items:center; }
.feat-list{ display:grid; gap:16px; margin-top:26px; }
.feat{ display:flex; gap:14px; align-items:flex-start; }
.feat .fi{ flex:0 0 auto; width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:rgba(var(--accent-rgb),.14); color:var(--accent); }
.feat .fi svg{ width:20px; height:20px; }
.feat b{ display:block; margin-bottom:3px; }
.feat p{ color:var(--ink-2); font-size:14.5px; }

/* لوحة زخرفية بدل الصورة (مؤقتة لحد صور العميل) */
.showpanel{
  border-radius:var(--r-xl); min-height:360px; position:relative; overflow:hidden;
  background:linear-gradient(150deg,var(--ink-800),var(--ink-900) 60%);
  border:1px solid var(--border); display:grid; place-items:center;
}
.showpanel::before{
  content:""; position:absolute; inset:-30%;
  background:radial-gradient(40% 40% at 30% 30%, rgba(var(--accent-rgb),.42), transparent 70%),
             radial-gradient(35% 35% at 72% 68%, rgba(228,184,95,.22), transparent 72%);
  filter:blur(30px); animation:drift 22s ease-in-out infinite alternate;
}
.showpanel .mark{ position:relative; z-index:1; text-align:center; color:rgba(255,255,255,.9); padding:24px; }
.showpanel .mark svg{ width:64px; height:64px; color:var(--accent); margin:0 auto 16px; }
.showpanel .mark b{ font-size:20px; display:block; }
.showpanel .mark span{ font-size:13.5px; color:rgba(255,255,255,.6); }

/* ===== CTA التصدير (برند) ===== */
.cta-band{ text-align:center; }
.cta-band .wrap{ max-width:760px; }
.cta-band h2{ text-align:center; }
.cta-band p{ margin:16px auto 30px; text-align:center; }
.cta-band .hero-actions{ justify-content:center; }
.cta-band .btn-ghost{ border-color:rgba(36,23,8,.3); }

/* ===== تواصل ===== */
.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:12px; }
.cinfo{ display:flex; gap:14px; align-items:flex-start; padding:22px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); }
.cinfo .fi{ flex:0 0 auto; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(var(--accent-rgb),.14); color:var(--accent); }
.cinfo .fi svg{ width:22px; height:22px; }
.cinfo b{ display:block; margin-bottom:4px; }
.cinfo a,.cinfo span{ color:var(--ink-2); font-size:14.5px; }
.ltr{ direction:ltr; unicode-bidi:isolate; display:inline-block; }

/* ===== الفوتر ===== */
.site-footer{ background:var(--ink-900); color:#fff; padding-block:clamp(48px,7vw,76px) 26px; }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:34px; }
.foot-brand .chipbox{ background:var(--paper-2); border-radius:var(--r-md); padding:12px 16px; display:inline-block; margin-bottom:16px; }
.foot-brand .chipbox img{ height:34px; }
.foot-brand p{ color:rgba(255,255,255,.6); font-size:14.5px; max-width:300px; }
.foot-col h4{ font-size:14px; letter-spacing:.06em; color:var(--accent); margin:0 0 16px; font-weight:700; }
.foot-col a,.foot-col span{ display:block; color:rgba(255,255,255,.7); font-size:14.5px; padding:6px 0; transition:color var(--t-fast) var(--ease); }
@media (hover:hover){ .foot-col a:hover{ color:var(--accent); } }
.foot-social{ display:flex; gap:10px; margin-top:6px; }
.foot-social a{ width:40px; height:40px; border-radius:11px; border:1px solid rgba(255,255,255,.14); display:grid; place-items:center; padding:0; }
.foot-social svg{ width:18px; height:18px; }
.foot-bottom{ margin-top:40px; padding-top:22px; border-block-start:1px solid rgba(255,255,255,.12); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; }
.foot-bottom p{ color:rgba(255,255,255,.5); font-size:13.5px; }
.foot-note{ font-size:12.5px; color:rgba(255,255,255,.4); }

/* ===== أدوات وبدائل inline ===== */
.lead-tight{ margin-top:16px; }
.sec-more{ margin-top:clamp(28px,4vw,42px); display:flex; }
.sec-more.center{ justify-content:center; }
.more-link{
  display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:15.5px;
  color:var(--accent); padding:12px 22px; border:1px solid var(--border); border-radius:var(--r-pill);
  transition:background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.more-link .arrow{ transition:transform var(--t-mid) var(--ease); }
@media (hover:hover){
  .more-link:hover{ background:rgba(var(--accent-rgb),.12); border-color:var(--accent); transform:translateY(-2px); }
  .more-link:hover .arrow{ transform:translateX(calc(6px * var(--x))); }
}
.card-cta{ background:var(--ink-900); border-color:transparent; color:var(--paper); display:flex; flex-direction:column; justify-content:center; }
.card-cta h3{ color:var(--paper); }
.card-cta p{ color:rgba(255,255,255,.72); }
.card-cta .card-link{ color:var(--accent-2); }
.btn-dark{ background:var(--ink-900); color:var(--paper); box-shadow:0 8px 24px rgba(15,23,42,.28); }
@media (hover:hover){ .btn-dark:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(15,23,42,.36); } }
.soon-hero{ min-height:64vh; display:grid; align-items:center; }
.soon-hero .lead{ margin:18px 0 30px; }
.foot-bottom.bare{ margin-top:0; border:0; }

/* =========================================================
   الحركة — الطبقة الأساسية (قسم 8.2)
   ========================================================= */
.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(6){transition-delay:.45s}
[data-stagger].in > *:nth-child(n+7){transition-delay:.5s}

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

/* درور الموبايل */
.nav-drawer{ display:contents; }

@media (max-width:900px){
  .g-4{ grid-template-columns:repeat(2,1fr); }
  .foot-top{ grid-template-columns:1fr 1fr; gap:28px; }
  .split{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .stats-row{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  .burger{ display:flex; }
  .nav-links, .nav-cta .nav-phone, .nav-cta .lang{ }
  .nav-drawer{
    display:flex; flex-direction:column; gap:6px;
    position:fixed; inset-block-start:74px; inset-inline:0; z-index:55;
    background:var(--nav-bg-scrolled); backdrop-filter:blur(16px);
    padding:16px var(--pad) 26px; border-block-end:1px solid rgba(15,23,42,.1);
    transform:translateY(-14px); opacity:0; pointer-events:none;
    transition:transform var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease);
    box-shadow:var(--sh-md); max-height:calc(100vh - 74px); overflow:auto;
  }
  .nav.open .nav-drawer{ transform:none; opacity:1; pointer-events:auto; }
  .nav-drawer .nav-links{ flex-direction:column; align-items:stretch; gap:2px; }
  .nav-drawer .nav-links a{ padding:13px 14px; font-size:16px; }
  .nav-drawer .nav-cta{ flex-direction:column; align-items:stretch; gap:10px; margin-top:10px; }
  .nav-drawer .nav-phone{ justify-content:center; border:1px solid rgba(15,23,42,.12); }
  .nav-drawer .btn{ width:100%; }
}
@media (max-width:600px){
  .g-2,.g-3{ grid-template-columns:1fr; }
  .hero-stats{ gap:24px; }
}
@media (max-width:480px){
  .stats-row{ grid-template-columns:1fr 1fr; gap:14px; }
  .g-4{ grid-template-columns:1fr; }
}

/* الحارس — reduce motion */
@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; }
}

/* انتقال الصفحات (HTTP فقط) */
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){ animation:.4s cubic-bezier(.65,0,.35,1) both pg-out; }
  ::view-transition-new(root){ animation:.4s cubic-bezier(.65,0,.35,1) both pg-in; }
  @keyframes pg-out{ to{ opacity:0; transform:translateY(-14px); } }
  @keyframes pg-in{ from{ opacity:0; transform:translateY(14px); } }
}