/* ===========================================================================
 * Jazeel — index.php "علبة الشوكولاتة" layer
 * نفس طابع صفحتي البكجات وتفاصيل البكج: إطار ذهبي بارز كعلبة هدية،
 * أرقام بلون ورق الذهب، أزرار شوكولاتة تنضغط، أيقونات مرسومة لجزيل.
 * يُحمَّل بعد home.css ولا يغيّر أي منطق.
 * =========================================================================== */

:root{
  --foil-hi:#fbf0d2;--foil:#dcb563;--foil-mid:#b98b36;--foil-lo:#7d5a1c;
  --choc-1:#4a2d17;--choc-2:#2e1a0c;--choc-3:#1b0e05;--choc-edge:#120902;
  --ivory:#fffaf1;
  --foil-grad:linear-gradient(160deg,var(--foil-hi) 0%,var(--foil) 30%,var(--foil-mid) 55%,var(--foil-hi) 78%,var(--foil) 100%);
}

.ico{width:1em;height:1em;display:inline-block;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- الهيرو: يظهر من أول رسم (بدون انتظار الجافاسكربت) ---------- */
/* translate (لا transform) حتى لا يتعارض مع ميلان صورة الهيرو */
@keyframes jzRise{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
.hero-content{animation:jzRise .7s cubic-bezier(.16,.84,.44,1) both}
.hero-image{animation:jzRise .8s .12s cubic-bezier(.16,.84,.44,1) both}

/* زخرفة ذهبية تحت شعار جزيل */
.jz-brand-wrap{flex-direction:column;align-items:flex-start;gap:14px}
.jz-brand-wrap::after{
  content:'';width:150px;height:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='12' viewBox='0 0 150 12'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' x2='150'%3E%3Cstop offset='0' stop-color='%23dcb563' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23b98b36'/%3E%3Cstop offset='1' stop-color='%23dcb563' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 6h66M84 6h66' stroke='url(%23g)' stroke-width='1.5'/%3E%3Cpath d='M75 1l5 5-5 5-5-5z' fill='%23b98b36'/%3E%3Cpath d='M75 3.2l2.8 2.8L75 8.8 72.2 6z' fill='%23fbf0d2'/%3E%3C/svg%3E") no-repeat;
}

/* صورة الهيرو: علبة هدية بحافة ذهبية تميل مع المؤشر */
.hero-image{
  margin-inline-end:10px; /* مساحة للحافة الذهبية حتى لا يقصّها overflow الهيرو */
  --rx:0deg;--ry:0deg;--mx:50%;--my:50%;
  border-radius:28px;
  transform:perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .5s cubic-bezier(.25,.46,.45,.94),box-shadow .5s;
  box-shadow:
    0 0 0 2px rgba(255,250,241,.9),
    0 0 0 5px var(--foil),
    -1px 2px 0 5px var(--foil-mid),
    -2px 4px 0 5px #a67a2c,
    -3px 6px 0 5px #93691f,
    -4px 8px 0 5px var(--foil-lo),
    -12px 36px 56px -12px rgba(60,30,10,.42);
}
html[dir="ltr"] .hero-image{
  box-shadow:
    0 0 0 2px rgba(255,250,241,.9),0 0 0 5px var(--foil),
    1px 2px 0 5px var(--foil-mid),2px 4px 0 5px #a67a2c,3px 6px 0 5px #93691f,4px 8px 0 5px var(--foil-lo),
    12px 36px 56px -12px rgba(60,30,10,.42);
}
.hero-image:hover{transform:perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry))}
.hero-image.tilting{transition:transform .08s linear}
.hero-image::before{ /* لمعة تتبع المؤشر */
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:radial-gradient(460px circle at var(--mx) var(--my),rgba(255,248,230,.26),transparent 45%);
  opacity:0;transition:opacity .4s;
}
.hero-image.tilting::before{opacity:1}
.hero-image picture{display:contents}

/* ---------- الأزرار: تنضغط فعليًا ---------- */
.hero-buttons .btn{transition:transform .15s ease,box-shadow .15s ease,background .2s,color .2s}
.btn-primary{
  background:
    radial-gradient(120% 160% at 85% 0%,rgba(220,181,99,.25),transparent 55%),
    linear-gradient(165deg,var(--choc-1),var(--choc-3));
  color:var(--foil-hi);
  box-shadow:0 5px 0 var(--choc-edge),0 18px 30px -14px rgba(29,16,7,.7),inset 0 1px 0 rgba(255,230,190,.22);
}
.btn-primary i{color:var(--foil)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--choc-edge),0 24px 34px -14px rgba(29,16,7,.72),inset 0 1px 0 rgba(255,230,190,.22)}
.btn-primary:active{transform:translateY(4px);box-shadow:0 1px 0 var(--choc-edge),0 8px 14px -8px rgba(29,16,7,.6)}
.btn-secondary{
  background:linear-gradient(180deg,#fff,var(--ivory));
  border:1.5px solid rgba(185,139,54,.55);color:var(--choc-2);
  box-shadow:0 4px 0 rgba(185,139,54,.55),0 14px 22px -14px rgba(60,30,10,.4);
}
.btn-secondary:hover{background:linear-gradient(180deg,#fff,#f7eede);color:var(--choc-2);border-color:var(--foil-mid);transform:translateY(-2px)}
.btn-secondary:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(185,139,54,.55)}

/* ---------- الإحصائيات: قطع شوكولاتة بأرقام ذهبية ---------- */
.stats{
  background:
    radial-gradient(900px 300px at 80% 0%,rgba(220,181,99,.14),transparent 60%),
    linear-gradient(165deg,var(--choc-2) 0%,var(--choc-3) 100%);
  border-top:1px solid rgba(220,181,99,.35);border-bottom:1px solid rgba(220,181,99,.35);
}
.stats-container{perspective:900px}
.stat-item{
  position:relative;border:0;border-radius:20px;padding:1.6rem 1rem 1.4rem;
  background:
    radial-gradient(120% 90% at 30% 0%,rgba(255,236,200,.13),transparent 55%),
    linear-gradient(165deg,var(--choc-1) 0%,var(--choc-2) 60%,var(--choc-3) 100%);
  box-shadow:inset 0 1px 0 rgba(255,230,190,.2),inset 0 -2px 0 rgba(0,0,0,.35),
    0 6px 0 var(--choc-edge),0 24px 30px -16px rgba(0,0,0,.7);
  transition:transform .35s cubic-bezier(.25,.46,.45,.94),box-shadow .35s;
}
.stat-item::before{
  content:'';position:absolute;inset:7px;border-radius:14px;pointer-events:none;
  border:1px solid rgba(255,225,170,.1);
}
.stat-item:hover{
  transform:translateY(-5px) rotateX(8deg);background:
    radial-gradient(120% 90% at 30% 0%,rgba(255,236,200,.16),transparent 55%),
    linear-gradient(165deg,var(--choc-1) 0%,var(--choc-2) 60%,var(--choc-3) 100%);
  box-shadow:inset 0 1px 0 rgba(255,230,190,.2),inset 0 -2px 0 rgba(0,0,0,.35),
    0 10px 0 var(--choc-edge),0 32px 36px -16px rgba(0,0,0,.75);
}
.stat-icon{
  width:48px;height:48px;margin:0 auto .9rem;border-radius:50%;
  display:grid;place-items:center;font-size:1.45rem;color:var(--choc-3);
  background:var(--foil-grad);
  box-shadow:0 0 0 3px rgba(27,14,5,.55),0 0 0 4px rgba(220,181,99,.45),
    inset 0 2px 1px rgba(255,255,255,.65),inset 0 -3px 4px rgba(125,90,28,.55),0 8px 14px -4px rgba(0,0,0,.6);
}
.stat-icon .ico{stroke-width:1.8}
.stat-item h3{
  background:var(--foil-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.45));
}
.stat-item p{color:rgba(251,240,210,.8)}

/* ---------- عناوين الأقسام ---------- */
.section-heading > span{
  display:flex;width:fit-content;margin-inline:auto;
  border-radius:999px;padding:.45rem 1.3rem;
  background:linear-gradient(165deg,var(--choc-1),var(--choc-3));color:var(--foil-hi);
  border:1px solid rgba(220,181,99,.45);
  box-shadow:0 3px 0 var(--choc-edge),inset 0 1px 0 rgba(255,230,190,.2);
}

/* ---------- كروت الخدمات: علب بحافة ذهبية ---------- */
.cards-grid .card{
  border:0;border-radius:24px;
  background:linear-gradient(#fff,#fff) padding-box,var(--foil-grad) border-box;
  border:2px solid transparent;
  box-shadow:0 6px 0 #c9a45a,0 7px 0 var(--foil-lo),0 26px 40px -20px rgba(60,30,10,.4);
}
.cards-grid .card::before{background:var(--foil-grad);height:3px}
.cards-grid .card:hover{
  border-color:transparent;
  box-shadow:0 10px 0 #c9a45a,0 11px 0 var(--foil-lo),0 40px 56px -22px rgba(60,30,10,.46);
}
.cards-grid .card-image{border-radius:22px 22px 0 0}
.cards-grid .card-image picture{display:contents}
.cards-grid .card-label{
  background:linear-gradient(180deg,#fff,#f7eede);color:var(--foil-lo);
  border:1px solid rgba(185,139,54,.4);box-shadow:0 2px 0 rgba(185,139,54,.35);
}
.cards-grid .card-link{color:var(--choc-1)}
.cards-grid .card-link i{color:var(--foil-mid)}

/* ---------- الدعوة للتواصل ---------- */
.cta-section{
  background:
    radial-gradient(900px 340px at 20% 0%,rgba(220,181,99,.18),transparent 60%),
    linear-gradient(165deg,var(--choc-1) 0%,var(--choc-3) 100%);
  border-top:1px solid rgba(220,181,99,.35);
}
.cta-section h2{color:var(--foil-hi)}
.cta-button{
  background:var(--foil-grad);color:var(--choc-3);
  box-shadow:0 5px 0 var(--foil-lo),0 20px 34px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .15s ease,box-shadow .15s ease;
}
.cta-button:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--foil-lo),0 26px 38px -14px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.6)}
.cta-button:active{transform:translateY(4px);box-shadow:0 1px 0 var(--foil-lo)}

/* ---------- تركيز واضح ---------- */
.btn:focus-visible,.cta-button:focus-visible,.card-link:focus-visible{outline:2px solid var(--foil-mid);outline-offset:4px}

/* ---------- الوضع الداكن ---------- */
body.dark-mode .btn-secondary{background:transparent;color:var(--foil-hi);border-color:rgba(220,181,99,.55)}
body.dark-mode .cards-grid .card{background:linear-gradient(#2b221a,#2b221a) padding-box,var(--foil-grad) border-box}
body.dark-mode .cards-grid .card-title{color:var(--foil-hi)}
body.dark-mode .cards-grid .card-link{color:var(--foil)}

/* ---------- الجوال ---------- */
@media (max-width:640px){
  .hero-image,html[dir="ltr"] .hero-image{
    border-radius:22px;
    box-shadow:0 0 0 2px rgba(255,250,241,.9),0 0 0 4px var(--foil),0 6px 0 4px var(--foil-lo),0 24px 36px -14px rgba(60,30,10,.42);
  }
  .stat-item{border-radius:16px;padding:1.2rem .5rem 1.1rem}
  .stat-icon{width:40px;height:40px;font-size:1.2rem}
  .cards-grid .card{border-radius:20px}
  .cards-grid .card-image{border-radius:18px 18px 0 0}
}
@media (prefers-reduced-motion:reduce){
  .hero-content,.hero-image{animation:none}
  .hero-image{transform:none!important}
}