/* =========================================================
   ELGOLD STUDIO — Responsive
   ========================================================= */

/* تابلت + موبايل (≤1024): تدفّق طبيعي (كل المحتوى ظاهر + سكرول سلس) + إحساس "قلب الصفحة":
   كل قسم بحافة مدوّرة وظل وتداخل بسيط فيبان وهو بيغطّي اللي قبله — زي تكديس الصفحات. */
@media (max-width: 1024px) {
  .page { position: relative; min-height: 0; }
  /* بدون تداخل (margin سالب) عشان مفيش معلومات تتخبّى عند حدود الأقسام — كل قسم كامل */
  .trusted, .services, .work, .process, .techstack, .why, .about, .testi, .faq, .cta, .contact {
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: 0 -14px 36px -22px rgba(0,0,0,.4);
    margin-top: 0;
  }
  .hero { border-radius: 0; box-shadow: none; margin-top: 0; }
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-48); }
  .hero__visual { max-width: 460px; margin-inline: auto; order: -1; width: 100%; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .why-cards { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; gap: var(--s-40); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-32); }
  .about__grid { grid-template-columns: 1fr; gap: var(--s-40); justify-items: center; text-align: center; }
  .about__media { margin-inline: auto; }
  .about__points { text-align: start; }
  .about__points li { justify-content: flex-start; }
}

/* موبايل */
@media (max-width: 720px) {
  :root { --nav-h: 72px; }

  .nav__links, .nav__right .btn { display: none; }
  .burger { display: flex; }

  .menu.is-open + * , .nav.menu-open .burger span:nth-child(1) { }
  .nav.menu-open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav.menu-open .burger span:nth-child(2) { opacity: 0; }
  .nav.menu-open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .hero { padding-top: calc(var(--nav-h) + var(--s-24)); padding-bottom: var(--s-40); min-height: 84vh; min-height: 84svh; justify-content: center; }
  .hero__title { font-size: clamp(2.2rem, 9vw, 3.2rem); }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }
  .hero__stats { gap: var(--s-32); flex-wrap: wrap; }
  .cards { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  .work-card--wide { grid-column: auto; }
  .work-card--wide .work-card__media { aspect-ratio: 16/10; }
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: var(--s-32); }
  .stats-panel { padding: var(--s-24); }
  .services, .work, .why, .process, .techstack, .contact, .cta, .faq, .testi { padding: var(--s-80) 0; }
  .field-row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; text-align: center; padding-bottom: 76px; }
  .testi-card { flex-basis: 300px; width: 300px; }

  .scroll-hint { display: none; }
  .wm__scroll { width: 100vw; margin: 0; max-height: 100vh; border-radius: 0; border: 0; }
  .wm__body, .wm__head { padding: var(--s-24); }
  .wm__close { top: 12px; inset-inline-end: 12px; }
}

/* شاشات صغيرة (≤380) — تقليل أحجام عشان ما يبقاش مزحوم */
@media (max-width: 380px) {
  .brand { font-size: 1.05rem; letter-spacing: 0; }
  .hero__stats { gap: var(--s-20); }
  .hero__stats .n { font-size: 1.5rem; }
  .svc-chip { font-size: .82rem; padding: 8px 12px; }
  .testi-card { flex-basis: 260px; width: 260px; }
  .wm__metrics { grid-template-columns: 1fr 1fr; }
  .menu a { font-size: 1.7rem; }
}

/* الوضع الأفقي للموبايل (ارتفاع قصير) — تقليل المسافات الرأسية */
@media (orientation: landscape) and (max-height: 540px) {
  .hero { min-height: auto; padding-top: calc(var(--nav-h) + var(--s-24)); padding-bottom: var(--s-48); }
  .services, .work, .why, .process, .techstack, .contact, .cta, .faq, .testi, .about { padding: var(--s-48) 0; }
  .sec-head { margin-bottom: var(--s-32); }
  .menu { gap: var(--s-12); overflow-y: auto; }
}

/* =========================================================
   باس الأداء — تخفيف التأثيرات التقيلة (موبايل/لمس + تقليل الحركة)
   الهدف: 60fps على الموبايل
   ========================================================= */

/* أجهزة اللمس: الـblur الكبير و backdrop-filter بيقتلوا أداء الموبايل */
@media (hover: none), (pointer: coarse) {
  .bg__blob { animation: none; }                     /* بقت radial-gradient رخيصة — تفضل بس بدون حركة */
  .bg__aurora { animation: none; }
  .bg__noise { display: none; }
  .cta__glow { animation: none; }
  .glass-card::after { animation: none; }            /* conic-gradient بيعمل repaint كل فريم */
  .hero__gallery { filter: blur(20px); gap: 12px; }  /* blur أخف على اللمس */
  .orb-ring, .orb-ring--2 { animation: none; }

  /* شيل backdrop-filter من العناصر المتكررة (أكبر مكسب أداء على الموبايل) */
  .card, .stats-panel, .testi-card, .glass-card,
  .btn--ghost, .chip, .work-card__tag, .nav, .nav__inner, .menu {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  /* تعويض الوضوح في حبّة النافبار/القائمة بعد ما الـblur اتشال */
  .nav__inner { background: rgba(10, 19, 48, .9); }
  .nav.is-scrolled .nav__inner { background: rgba(10, 19, 48, .96); }
  .menu { background: rgba(7, 12, 32, .98); }

  /* تنضيف طبقات الـcompositor الدايمة (التلت/الماجنتيك متقفلين على اللمس أصلاً) */
  .card, .btn { will-change: auto; }
}

/* احترام إعداد "تقليل الحركة" — يوقف كل أنيميشن CSS الزخرفي */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}