/* ===== الواجهة الرئيسية ===== */
.hero{position:relative;overflow:hidden;min-height:100svh;display:flex;align-items:center;padding-top:var(--nav-h)}
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;perspective:1100px}
.hero__orbs .orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55}
.orb.o1{width:42vw;height:42vw;background:#E4762C;top:-12vw;inset-inline-end:-8vw;animation:orb1 18s ease-in-out infinite}
.orb.o2{width:34vw;height:34vw;background:#8C4B1E;bottom:-14vw;inset-inline-start:-6vw;animation:orb2 22s ease-in-out infinite}
.orb.o3{width:22vw;height:22vw;background:#FFAE5C;top:38%;inset-inline-start:44%;opacity:.22;animation:orb1 26s ease-in-out infinite}
@keyframes orb1{50%{transform:translate3d(-6vw,5vw,-120px) scale(1.18)}}
@keyframes orb2{50%{transform:translate3d(7vw,-6vw,90px) scale(.84)}}
.hero__grid3d{position:absolute;inset-inline:0;bottom:0;height:58%;perspective:620px;mask-image:linear-gradient(transparent,#000 46%)}
.hero__grid3d i{position:absolute;inset:-30% -60% 0;transform-origin:bottom center;transform:rotateX(74deg);
  background-image:linear-gradient(rgba(255,174,92,.20) 1px,transparent 1px),linear-gradient(90deg,rgba(255,174,92,.20) 1px,transparent 1px);
  background-size:70px 70px;animation:grid 5.5s linear infinite}
@keyframes grid{to{background-position:0 70px,0 0}}
.hero__depth,.hero__embers{position:absolute;inset:0}
.hero__depth{transform-style:preserve-3d}
.bean3d{position:absolute;inset-inline-start:var(--x);top:var(--y);width:13px;height:18px;border-radius:50%/58%;
  background:linear-gradient(140deg,#4A2E19,#160D06);box-shadow:inset 0 0 0 1px rgba(255,174,92,.28),0 12px 22px rgba(0,0,0,.65);
  transform:translate3d(0,0,var(--z)) scale(var(--s));animation:beanF var(--d) ease-in-out var(--dl) infinite;opacity:.85}
@keyframes beanF{50%{transform:translate3d(0,-34px,var(--z)) rotate(28deg) scale(var(--s))}}
.ember{position:absolute;bottom:-6vh;inset-inline-start:var(--x);width:var(--sz);height:var(--sz);border-radius:50%;
  background:var(--ember2);box-shadow:0 0 12px var(--ember),0 0 26px rgba(228,118,44,.6);opacity:0;animation:rise var(--d) linear var(--dl) infinite}
@keyframes rise{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.6)}
  12%{opacity:.95}
  82%{opacity:.5}
  100%{opacity:0;transform:translate3d(var(--drift),-94vh,140px) scale(.35)}}

.hero__in{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(20px,3.4vw,54px);align-items:center;width:100%}
.hero__copy{display:flex;flex-direction:column;gap:1.15rem;transform-style:preserve-3d}
.hero [data-z]{transform:translate3d(calc(var(--mx,0) * (var(--z,10) * .5px)),calc(var(--my,0) * (var(--z,10) * .3px)),calc(var(--z,10) * 1px));
  transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.hero__title{font-size:var(--fs-h1);line-height:1.06;transform-style:preserve-3d}
.hero__title .w{display:block;text-shadow:0 26px 60px rgba(0,0,0,.75)}
.hero__title .w:last-child{margin-inline-start:clamp(8px,3vw,42px)}
.hero__lead{max-width:52ch;font-size:clamp(1rem,1.15vw,1.12rem)}
.hero__lead b{color:var(--gold)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.4rem}
.hero__stats{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;margin-top:1.2rem;
  padding-top:1.3rem;border-top:1px solid var(--line)}
.hero__stats li{display:flex;flex-direction:column;gap:.15rem}
.hero__stats b{font-size:clamp(1.35rem,2.4vw,1.9rem);color:var(--gold);font-weight:900}
.hero__stats span{font-size:.82rem;color:var(--muted);line-height:1.5}
.kicker{display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;font-family:var(--f-head);font-weight:700;font-size:.82rem;
  padding:.5rem 1rem;border-radius:999px;background:var(--glass);border:1px solid var(--line2);color:var(--ink2);backdrop-filter:blur(12px)}
.kicker svg{width:1em;height:1em;color:var(--ember2)}
/* ===== منصّة الماكينات 3D ===== */
.hero__stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:.9rem;perspective:1250px}
.stage3d{position:relative;width:min(100%,560px);aspect-ratio:1/.86;transform-style:preserve-3d;cursor:grab;touch-action:pan-y;
  transform:rotateX(calc(var(--my,0) * -7deg)) rotateY(calc(var(--mx,0) * 11deg));transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.stage3d.is-drag{cursor:grabbing}
.stage3d__pad{position:absolute;inset-inline:5%;bottom:2%;height:40%;transform:rotateX(75deg);border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,rgba(228,118,44,.34),transparent 72%);
  border:1px solid rgba(255,174,92,.30);box-shadow:0 0 80px rgba(228,118,44,.45),inset 0 0 60px rgba(255,174,92,.25)}
.stage3d__pad span{position:absolute;inset:14%;border-radius:50%;border:1px dashed rgba(255,174,92,.35);animation:spinPad 26s linear infinite}
@keyframes spinPad{to{transform:rotate(360deg)}}
.stage3d__halo{position:absolute;inset:6% 4%;border-radius:50%;filter:blur(10px);
  background:radial-gradient(circle at 50% 44%,rgba(255,174,92,.26),transparent 68%)}
.stage3d__shadow{position:absolute;inset-inline:22%;bottom:12%;height:9%;border-radius:50%;filter:blur(14px);background:rgba(0,0,0,.75)}
.carousel{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.face{position:absolute;top:50%;left:50%;translate:-50% -50%;width:clamp(108px,19vw,190px);aspect-ratio:1/1;padding:0;border:0;background:none;
  cursor:pointer;backface-visibility:hidden;transform-style:preserve-3d;will-change:transform}
.face img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 26px 30px rgba(0,0,0,.85)) saturate(.85) brightness(.72);
  transition:filter var(--t),transform var(--t)}
.face.is-active img{filter:drop-shadow(0 30px 46px rgba(0,0,0,.9)) drop-shadow(0 0 26px rgba(255,174,92,.55));transform:scale(1.1) translateZ(30px)}
.face__meta{position:absolute;inset-inline:0;bottom:-14%;text-align:center;opacity:0;transform:translateY(10px);transition:opacity var(--t),transform var(--t)}
.face.is-active .face__meta{opacity:1;transform:none}
.face__meta b{display:block;font-size:.92rem;color:var(--ink)}
.face__meta small{display:block;font-size:.74rem;color:var(--ember2)}
.stage3d__meta{text-align:center;display:flex;flex-direction:column;gap:.3rem;min-height:62px}
.stage3d__meta b{font-size:1.25rem} .stage3d__meta span{font-size:.85rem;color:var(--muted);max-width:44ch}
.stage3d__nav{display:flex;align-items:center;gap:1rem}
.rbtn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink);
  background:var(--glass);border:1px solid var(--line2);backdrop-filter:blur(12px);transition:transform var(--t-fast),background var(--t-fast),border-color var(--t-fast)}
.rbtn:hover{transform:translateY(-3px);border-color:var(--ember);background:var(--glass2)}
.rbtn svg{width:20px;height:20px}
.dots{display:flex;gap:.45rem}
.dot{width:9px;height:9px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.22);transition:all var(--t-fast)}
.dot.is-active{width:26px;border-radius:99px;background:linear-gradient(90deg,var(--ember),var(--gold))}
.stage3d__hint{display:flex;align-items:center;gap:.45rem;font-size:.78rem;color:var(--muted)}
.stage3d__hint svg{width:1em;height:1em;color:var(--ember2)}