/* ============================================================
   Fiber Tech — Gold Luxury Layer
   تحويل الهوية إلى "ليل فاخر": ذهبي شمبين على كحلي عميق
   يُحمّل بعد fiber-luxe.css ويكمله دون كسر أي بنية
   ============================================================ */

:root {
  --fx-gold: #9A45D6;
  --fx-gold-bright: #CD7CFC;
  --fx-gold-deep: #6B22A0;
  --fx-ivory: #EFE9FA;
  --fx-ink-on-gold: #0B0916;
}

/* ---------- تفاصيل معدنية عامة ---------- */
::selection {
  background: rgba(154, 69, 214, 0.9);
  color: var(--fx-ink-on-gold);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0b0824; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--fx-gold-bright), var(--fx-gold-deep));
  border-radius: 8px;
  border: 2px solid #0b0824;
}
::-webkit-scrollbar-thumb:hover { background: var(--fx-gold-bright); }

/* ---------- الأزرار الأساسية: ذهبي شمبين ---------- */
.homepage-hero-bg .main-button,
.homepage-hero-bg a.main-button {
  background: linear-gradient(135deg, var(--fx-gold-bright) 0%, var(--fx-gold) 55%, var(--fx-gold-deep) 100%) !important;
  color: var(--fx-ink-on-gold) !important;
  box-shadow: 0 16px 42px rgba(154, 69, 214, 0.38) !important;
}
.homepage-hero-bg .main-button:hover {
  box-shadow: 0 22px 56px rgba(154, 69, 214, 0.5) !important;
}

.cta-button.header-action-btn {
  background: linear-gradient(135deg, var(--fx-gold-bright), var(--fx-gold)) !important;
  color: var(--fx-ink-on-gold) !important;
  border-color: transparent !important;
  box-shadow: 0 10px 26px rgba(154, 69, 214, 0.3);
}
.cta-button.header-action-btn:hover {
  background: linear-gradient(135deg, #DCB3FF, var(--fx-gold-bright)) !important;
  color: var(--fx-ink-on-gold) !important;
}
.cta-button.header-action-btn img,
.header-action-btn img { filter: none; }

/* شارة الهيرو: حد ذهبي رفيع */
.hero-badge {
  border-color: rgba(154, 69, 214, 0.45);
  color: var(--fx-gold-bright) !important;
}

/* ---------- عناوين الأقسام: خط ذهبي أنعم ---------- */
.section-titles::after {
  width: 72px;
  height: 2px;
  background: linear-gradient(90deg, var(--fx-gold-deep), var(--fx-gold-bright), transparent);
}

/* ---------- البطاقات: حد ذهبي عند التحويم ---------- */
.fiber-value-section .feature-card,
.fiber-services-section .feature-card {
  transition: transform 0.45s var(--fx-ease), box-shadow 0.45s ease, border-color 0.45s ease;
}
.fiber-value-section .feature-card:hover,
.fiber-services-section .feature-card:hover {
  border-color: rgba(154, 69, 214, 0.5);
  box-shadow: 0 26px 56px rgba(13, 20, 80, 0.12);
}
.fiber-value-section .feature-card:hover .feature-icon {
  color: var(--fx-gold-deep);
}

/* ---------- الفوتر: خط ذهبي علوي ---------- */
.footer-section {
  border-top: 1px solid rgba(154, 69, 214, 0.28);
}
.footer-border {
  border-color: rgba(154, 69, 214, 0.35) !important;
}
.footer-nav a:hover,
.footer-section a:hover {
  color: var(--fx-gold-bright) !important;
}

/* ---------- روابط وأسعار ذهبية ---------- */
a:hover { color: var(--fx-gold-deep); }
.text-primary, .price, .product-price { color: var(--fx-gold-deep) !important; }

/* ---------- شريط التقدم: ذهبي نقي ---------- */
.fx-scroll-progress {
  background: linear-gradient(90deg, var(--fx-gold-deep), var(--fx-gold-bright));
}

/* ---------- نقاط المؤشر واللمسات الصغيرة ---------- */
.notifications-bell-btn { color: var(--fx-gold-bright) !important; }

/* ============================================================
   Gold Luxury — Deep Layer
   هيدر وفوتر أرقى، لمعان ذهبي خافت، وتباعد أكثر فخامة
   ============================================================ */

/* ---------- التنقل: خط ذهبي متحرك أسفل الروابط ---------- */
body.has-hero-bg .navbar-custom .nav-link,
.navbar-custom .nav-link { position: relative; }

body.has-hero-bg .navbar-custom .nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--fx-gold-bright), transparent);
  transform: scaleX(0);
  transition: transform 0.4s var(--fx-ease);
  pointer-events: none;
}
body.has-hero-bg .navbar-custom .nav-link:hover::after,
body.has-hero-bg .navbar-custom .nav-link.active::after { transform: scaleX(1); }

/* شريط علوي زجاجي مع حد ذهبي عند التمرير */
body.fx-scrolled .navbar-custom.header-top-nav,
body.fx-scrolled .header-top-nav {
  border-bottom: 1px solid rgba(154, 69, 214, 0.28) !important;
}

/* ---------- الهيرو: عنوان بهيّ ولمسة معدنية ---------- */
.homepage-hero-bg .fx-brand-hero {
  font-weight: 900;
  background: linear-gradient(115deg, #ffffff 25%, var(--fx-gold-bright) 55%, var(--fx-gold) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--fx-gold-bright);
}
.homepage-hero-bg .hero-subtitle,
.homepage-hero-bg .hero-tagline {
  color: rgba(235, 228, 250, 0.92) !important;
}

/* ---------- الأزرار: لمعان ذهبي سائل خافت ---------- */
@keyframes fx-gold-shine {
  0%, 100% { background-position: 130% 0; }
  50% { background-position: -30% 0; }
}
.homepage-hero-bg .main-button,
.homepage-hero-bg a.main-button {
  background-image: linear-gradient(115deg,
    var(--fx-gold-deep) 0%, var(--fx-gold) 32%,
    #E9C8FF 50%,
    var(--fx-gold) 68%, var(--fx-gold-deep) 100%) !important;
  background-size: 230% 100% !important;
  animation: fx-gold-shine 6s ease-in-out infinite;
}
.homepage-hero-bg .main-button:hover,
.homepage-hero-bg a.main-button:hover { animation-play-state: paused; }

/* ---------- العناوين: حرف أوزان أثقل وهوامش أوسع ---------- */
.section-titles { font-weight: 900 !important; }
.fiber-value-section .section-titles::after,
.fiber-services-section .section-titles::after {
  width: 88px;
  height: 2px;
}

/* ---------- روابط الأقسام التحريرية ---------- */
.fx-editorial-link { color: var(--fx-gold-deep) !important; }
.fx-editorial-link:hover { color: var(--fx-gold-bright) !important; }

/* ---------- الفوتر: خلفية أعمق وأيقونات ذهبية ---------- */
#footer-section {
  background: linear-gradient(180deg, #060418 0%, #040210 100%) !important;
  border-top: 1px solid rgba(154, 69, 214, 0.3);
}
#footer-section p { color: var(--fx-champagne) !important; }
.social-link img {
  transition: transform 0.35s var(--fx-ease), filter 0.35s ease;
}
.social-link:hover img {
  transform: translateY(-4px);
  filter: drop-shadow(0 6px 14px rgba(154, 69, 214, 0.5));
}
.fiber-map-section { background: #f6f4ee; }
.fiber-map-section .section-titles { color: #1b1f3b !important; }

/* ---------- حلقات التركيز الذهبية ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(154, 69, 214, 0.65) !important;
  outline-offset: 2px;
}

/* ---------- أرقام الإحصائيات: ذهبي مبهر ---------- */
.fiber-stats-section .stat-number,
.stats-number,
.counter-value { color: var(--fx-gold-deep) !important; }

/* ============================================================
   Gold Luxury — Typography Fix
   إلغاء التدرج النصي الأزرق وإعادة العناوين للّون الفاخر
   ============================================================ */

/* عناوين الأقسام: إيقاف قصّ النص بالتدرج الأزرق المتحرك */
.section-titles {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  animation: none !important;
}

/* عنوان الهيرو: ذهبي دافئ متدرج أبيض → شمبين */
.homepage-hero-bg .section-titles,
.homepage-hero-bg .fx-hero-lead.section-titles {
  color: var(--fx-champagne) !important;
  text-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
}
.homepage-hero-bg .fx-hero-lead.section-titles {
  background: linear-gradient(115deg, #ffffff 30%, var(--fx-gold-bright) 70%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* عناوين الأقسام الفاتحة: كحلي عميق صلب */
.fiber-value-section .section-titles,
.fiber-services-section .section-titles,
.container > .row .section-titles {
  color: #101736 !important;
}

/* ============================================================
   Gold Luxury — Footer Grid / Forms / Micro-interactions
   ============================================================ */

/* ---------- شبكة الفوتر الفاخرة ---------- */
.footer-luxe-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: 2.75rem;
  padding: 3.25rem 0 2rem;
}
.fl-brand .footer-logo img { width: 150px; height: auto; }
.fl-blurb {
  color: var(--fx-champagne);
  opacity: 0.78;
  font-size: 0.92rem;
  line-height: 1.9;
  margin: 1rem 0 1.25rem;
  max-width: 36ch;
}
.fl-social { display: flex; gap: 0.9rem; }
.fl-social .social-link img { width: 20px; height: 20px; margin: 0; }

.fl-col h4 {
  color: var(--fx-gold-bright);
  font-family: var(--fx-display);
  font-size: 1.02rem;
  font-weight: 800;
  margin-bottom: 1.05rem;
}
.fl-col a {
  display: block;
  color: #cfd6e4;
  text-decoration: none;
  font-size: 0.92rem;
  padding: 0.32rem 0;
  transition: color 0.3s ease, padding-inline-start 0.3s var(--fx-ease);
}
.fl-col a:hover {
  color: var(--fx-gold-bright);
  padding-inline-start: 0.4rem;
}
.fl-contact { color: #cfd6e4; font-size: 0.92rem; margin: 0.45rem 0; }
.fl-contact span { color: var(--fx-champagne); }

.fl-divider {
  border: 0;
  height: 1px;
  margin: 0;
  background: linear-gradient(90deg, transparent, rgba(154, 69, 214, 0.38), transparent);
}

@media (max-width: 991px) {
  .footer-luxe-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 575px) {
  .footer-luxe-grid { grid-template-columns: 1fr; gap: 1.8rem; padding-top: 2.25rem; }
}

/* ---------- نماذج التواصل: تركيز ذهبي ---------- */
.contact-us-form-section .form-control:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--fx-gold) !important;
  box-shadow: 0 0 0 0.2rem rgba(154, 69, 214, 0.22) !important;
}
.contact-us-form-section .form-control::placeholder { color: #9aa3b8; }

/* ---------- بطاقات المنتجات: تكبير صورة ناعم ---------- */
.product-card .prodImg {
  transition: transform 0.7s var(--fx-ease);
}
.product-card:hover .prodImg { transform: scale(1.07); }
.product-card { transition: transform 0.45s var(--fx-ease), box-shadow 0.45s ease; }
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(13, 20, 80, 0.12);
}
.prodDiscountLbl {
  background: linear-gradient(135deg, var(--fx-gold-bright), var(--fx-gold)) !important;
  color: var(--fx-ink-on-gold) !important;
}

/* ---------- زر العودة للأعلى: ذهبي ---------- */
.back-to-top {
  background: linear-gradient(135deg, var(--fx-gold-bright), var(--fx-gold)) !important;
  color: var(--fx-ink-on-gold) !important;
  border-radius: 50% !important;
  box-shadow: 0 14px 30px rgba(154, 69, 214, 0.4) !important;
}

/* ============================================================
   Gold Luxury — Max Layer
   أقصى درجات الفخامة: أزرار ذهبية عامة، مؤشر تمرير، توهجات
   ============================================================ */

/* ---------- الأزرار الرئيسية: ذهبية في كل الموقع ---------- */
.main-button,
a.main-button,
button.main-button {
  background-image: linear-gradient(135deg, var(--fx-gold-bright) 0%, var(--fx-gold) 55%, var(--fx-gold-deep) 100%) !important;
  color: var(--fx-ink-on-gold) !important;
  border: none !important;
  font-weight: 800 !important;
  box-shadow: 0 12px 30px rgba(154, 69, 214, 0.32) !important;
  transition: transform 0.35s var(--fx-ease), box-shadow 0.35s ease, filter 0.35s ease !important;
}
.main-button:hover,
a.main-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 18px 40px rgba(154, 69, 214, 0.45) !important;
}
.main-button img { filter: none !important; }

/* ---------- مؤشر التمرير الذهبي في الهيرو ---------- */
.fx-scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 44px;
  border: 1.5px solid rgba(154, 69, 214, 0.55);
  border-radius: 14px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
  z-index: 5;
  pointer-events: none;
}
.fx-scroll-hint-wheel {
  width: 3px;
  height: 8px;
  border-radius: 3px;
  background: var(--fx-gold-bright);
  box-shadow: 0 0 8px rgba(205, 124, 252, 0.8);
  animation: fx-wheel-drop 1.9s ease-in-out infinite;
}
@keyframes fx-wheel-drop {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(13px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}
@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  .fx-scroll-hint { display: none; }
}

/* ---------- الهيدر: انكماش أنيق عند التمرير ---------- */
body.fx-scrolled .navbar-custom.header-top-nav,
body.fx-scrolled .header-top-nav {
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
}
.navbar-custom .nav-link span {
  transition: color 0.25s ease, letter-spacing 0.3s ease;
}
.navbar-custom .nav-link:hover span { letter-spacing: 0.03em; }

/* ---------- الأقسام الداكنة: توهّج ذهبي علوي ---------- */
body.fx-luxe .fiber-services-section.fx-stage-dark,
.fiber-services-section.fx-stage-dark {
  background:
    radial-gradient(ellipse 75% 45% at 50% 0%, rgba(154, 69, 214, 0.12), transparent 62%),
    #080618 !important;
}

/* ---------- أيقونات المزايا: أوسمة ذهبية ---------- */
.fiber-value-section .feature-icon,
.fiber-services-section .feature-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: linear-gradient(135deg, rgba(154, 69, 214, 0.18), rgba(154, 69, 214, 0.04));
  border: 1px solid rgba(154, 69, 214, 0.38);
  color: var(--fx-gold-deep) !important;
  transition: transform 0.4s var(--fx-ease), box-shadow 0.4s ease;
}
.fiber-value-section .feature-card:hover .feature-icon,
.fiber-services-section .feature-card:hover .feature-icon {
  transform: translateY(-3px) rotate(-4deg);
  box-shadow: 0 10px 24px rgba(154, 69, 214, 0.3);
}

/* ---------- عناوين المنتجات: تحويم ذهبي ---------- */
.prodTitle a { transition: color 0.3s ease; }
.prodTitle a:hover { color: var(--fx-gold-deep) !important; }

/* ---------- الأسعار القديمة: مشطوبة باهتة ---------- */
.price s, .old-price, .prodOldPrice { color: #98a0b3 !important; opacity: 0.75; }

/* ---------- اتزان تباعد العناوين ---------- */
h1, h2, h3, h4, h5, h6, .section-titles { text-wrap: balance; }

/* ============================================================
   Violet Noir — Motion Layer
   حركات حية غير رسمية: إمالة، لمعان، حدود متوهجة، هالات عائمة
   ============================================================ */

/* ---------- بطاقات بطبقة لمعان تنزلق عند التحويم ---------- */
.fiber-value-section .feature-card,
.fiber-services-section .feature-card,
.product-card,
.price-card,
.service-card,
.team-member-card,
.catalog-card {
  position: relative;
  overflow: hidden;
}
.fiber-value-section .feature-card::after,
.fiber-services-section .feature-card::after,
.product-card::after,
.price-card::after,
.service-card::after,
.team-member-card::after,
.catalog-card::after {
  content: "";
  position: absolute;
  inset: -60% -30%;
  background: linear-gradient(105deg, transparent 42%, rgba(205, 124, 252, 0.16) 50%, transparent 58%);
  transform: translateX(-70%) rotate(8deg);
  transition: transform 0.9s var(--fx-ease);
  pointer-events: none;
  z-index: 1;
}
.fiber-value-section .feature-card:hover::after,
.fiber-services-section .feature-card:hover::after,
.product-card:hover::after,
.price-card:hover::after,
.service-card:hover::after,
.team-member-card:hover::after,
.catalog-card:hover::after {
  transform: translateX(70%) rotate(8deg);
}

/* ---------- البطاقات الداكنة: حد بنفسجي متوهج عند التحويم ---------- */
.fiber-value-section .feature-card:hover,
.fiber-services-section .feature-card:hover,
.price-card:hover,
.service-card:hover,
.team-member-card:hover,
.catalog-card:hover {
  border-color: rgba(154, 69, 214, 0.55);
  box-shadow:
    0 26px 60px rgba(20, 8, 45, 0.35),
    0 0 0 1px rgba(154, 69, 214, 0.22),
    0 0 34px rgba(154, 69, 214, 0.18);
}

/* ---------- الإمالة ثلاثية الأبعاد (تُدار من JS) ---------- */
.fx-tilt {
  transform-style: preserve-3d;
  transition: transform 0.18s ease-out, box-shadow 0.45s ease, border-color 0.45s ease;
  will-change: transform;
}
.fx-tilt .feature-icon,
.fx-tilt img {
  transform: translateZ(28px);
}
.fx-tilt.is-tilting {
  transition: transform 0.06s linear, box-shadow 0.45s ease, border-color 0.45s ease;
}

/* ---------- الهيرو: هالات بنفسجية حية تتنفس ---------- */
@keyframes fx-blob-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(46px, -34px) scale(1.14); }
  66%      { transform: translate(-38px, 26px) scale(0.92); }
}
.homepage-hero-bg .fx-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  animation: fx-blob-drift 16s ease-in-out infinite;
}
.homepage-hero-bg .fx-hero-blob.b1 {
  width: 420px; height: 420px;
  top: -8%; inset-inline-start: -6%;
  background: radial-gradient(circle, rgba(154, 69, 214, 0.4), transparent 68%);
}
.homepage-hero-bg .fx-hero-blob.b2 {
  width: 360px; height: 360px;
  bottom: -12%; inset-inline-end: -4%;
  background: radial-gradient(circle, rgba(127, 45, 175, 0.42), transparent 68%);
  animation-delay: -6s;
  animation-duration: 19s;
}
.homepage-hero-bg .fx-hero-blob.b3 {
  width: 240px; height: 240px;
  top: 34%; inset-inline-start: 44%;
  background: radial-gradient(circle, rgba(205, 124, 252, 0.26), transparent 70%);
  animation-delay: -11s;
  animation-duration: 13s;
}
@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  .homepage-hero-bg .fx-hero-blob { display: none; }
}

/* ---------- الأزرار: توهج بنفسجي نابض عند التحويم ---------- */
.main-button:hover,
a.main-button:hover {
  box-shadow:
    0 18px 44px rgba(154, 69, 214, 0.5),
    0 0 24px rgba(205, 124, 252, 0.35) !important;
}

/* ---------- شارة الهيرو: نقطة نابضة ---------- */
.hero-badge::after {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #CD7CFC;
  margin-inline-start: 8px;
  box-shadow: 0 0 0 0 rgba(205, 124, 252, 0.6);
  animation: fx-badge-pulse 2.2s ease-out infinite;
}
@keyframes fx-badge-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(205, 124, 252, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(205, 124, 252, 0); }
  100% { box-shadow: 0 0 0 0 rgba(205, 124, 252, 0); }
}

/* ---------- مؤشر التمرير: توهج بنفسجي ---------- */
.fx-scroll-hint { border-color: rgba(205, 124, 252, 0.55); }
.fx-scroll-hint-wheel {
  background: #CD7CFC;
  box-shadow: 0 0 10px rgba(205, 124, 252, 0.9);
}

/* ============================================================
   Violet Noir — Mega Menu (قائمة منسدلة ضخمة بالصور)
   ============================================================ */
.navbar-custom .navbar-nav .nav-item { position: relative; }
.navbar-custom .navbar-nav .nav-item.has-mega > .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.fx-mega-caret { transition: transform 0.3s var(--fx-ease); opacity: 0.75; }
.has-mega.is-open > .nav-link .fx-mega-caret { transform: rotate(180deg); }

/* اللوحة الضخمة */
.fx-mega {
  position: absolute;
  top: calc(100% + 14px);
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(14px) scale(0.98);
  min-width: 640px;
  max-width: 860px;
  width: max-content;
  background: linear-gradient(160deg, #120b26 0%, #0a0716 100%);
  border: 1px solid rgba(154, 69, 214, 0.35);
  border-radius: 20px;
  box-shadow:
    0 34px 80px rgba(5, 2, 18, 0.65),
    0 0 44px rgba(154, 69, 214, 0.16),
    inset 0 1px 0 rgba(205, 124, 252, 0.12);
  padding: 1.4rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.34s cubic-bezier(0.22, 1.2, 0.36, 1), visibility 0.28s;
  z-index: 1040;
}
/* سهم صغير أعلى اللوحة */
.fx-mega::before {
  content: "";
  position: absolute;
  top: -7px;
  inset-inline-start: 50%;
  width: 14px; height: 14px;
  background: #120b26;
  border-inline-start: 1px solid rgba(154, 69, 214, 0.35);
  border-top: 1px solid rgba(154, 69, 214, 0.35);
  transform: translateX(-50%) rotate(45deg);
}
.has-mega.is-open > .fx-mega,
.has-mega:hover > .fx-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

.fx-mega-inner { display: flex; gap: 1.3rem; align-items: stretch; }

/* العمود الجانبي التعريفي */
.fx-mega-side {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.6rem 1rem 0.6rem 0.2rem;
  border-inline-end: 1px solid rgba(154, 69, 214, 0.18);
}
[dir="ltr"] .fx-mega-side { padding: 0.6rem 0.2rem 0.6rem 1rem; border-inline-end: 0; border-inline-start: 0; }
.fx-mega-side-kicker {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--fx-gold-bright), var(--fx-gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--fx-gold-bright);
}
.fx-mega-side-title {
  color: #f1ecfd;
  font-size: 1.15rem;
  font-weight: 900;
  margin: 0.4rem 0 0.5rem;
  line-height: 1.5;
}
.fx-mega-side-text { color: #b7aed4; font-size: 0.82rem; line-height: 1.9; margin: 0 0 1rem; }
.fx-mega-side-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fx-gold-bright);
  font-weight: 800;
  font-size: 0.85rem;
  text-decoration: none;
  transition: gap 0.3s var(--fx-ease), color 0.3s ease;
}
.fx-mega-side-link:hover { gap: 10px; color: #e9d6ff; }

/* شبكة العناصر */
.fx-mega-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 0.55rem;
}
.fx-mega-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem;
  border-radius: 14px;
  border: 1px solid transparent;
  text-decoration: none !important;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s var(--fx-ease);
}
.fx-mega-item:hover {
  background: rgba(154, 69, 214, 0.12);
  border-color: rgba(154, 69, 214, 0.35);
  transform: translateY(-2px);
}
.fx-mega-thumb {
  flex: 0 0 52px;
  width: 52px; height: 52px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(205, 124, 252, 0.22);
  display: flex; align-items: center; justify-content: center;
}
.fx-mega-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--fx-ease); }
.fx-mega-item:hover .fx-mega-thumb img { transform: scale(1.12); }
.fx-mega-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fx-mega-title {
  color: #ece6fb;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fx-mega-desc {
  color: #9c92bd;
  font-size: 0.72rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fx-mega-price {
  color: var(--fx-gold-bright);
  font-size: 0.78rem;
  font-weight: 800;
}

/* عند تمرير الصفحة: خلفية الهيدر تغطي اللوحة؟ ارفع الزد فوقه */
body.fx-scrolled .fx-mega { z-index: 2000; }

/* الهواتف: إخفاء اللوحة الضخمة (يبقى الرابط المباشر) */
@media (max-width: 991px) {
  .fx-mega { display: none !important; }
}

/* ===== قسم الأسئلة الشائعة في الصفحة الرئيسية ===== */
.fx-faq-section { position: relative; }
.fx-faq-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 300px at 85% 0%, rgba(154, 69, 214, .10), transparent 60%);
  pointer-events: none;
}
.fx-faq-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
}
.fx-faq-cat {
  background: linear-gradient(160deg, #171029 0%, #100b1e 100%);
  border: 1px solid rgba(154, 69, 214, .22);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.fx-faq-cat:hover {
  border-color: rgba(205, 124, 252, .45);
  box-shadow: 0 18px 40px -18px rgba(107, 34, 160, .5);
}
.fx-faq-cat-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
  background: transparent;
  border: none;
  color: #f4f0ff;
  font-family: 'Alexandria', 'IBM Plex Sans Arabic', sans-serif;
  font-weight: 800;
  font-size: 1.02rem;
  text-align: start;
  cursor: pointer;
}
.fx-faq-cat-icon {
  font-size: 1.35rem;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(154, 69, 214, .5));
}
.fx-faq-cat-name { flex: 1; }
.fx-faq-cat-caret { color: var(--fx-gold-bright); transition: transform .35s ease; flex: 0 0 auto; }
.fx-faq-cat.is-open .fx-faq-cat-caret { transform: rotate(180deg); }
.fx-faq-items {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.4, 0, .2, 1);
}
.fx-faq-cat.is-open .fx-faq-items { grid-template-rows: 1fr; }
.fx-faq-items-inner { overflow: hidden; }
.fx-faq-item { border-top: 1px solid rgba(154, 69, 214, .14); }
.fx-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .85rem 1.25rem;
  background: transparent;
  border: none;
  color: #cfc6ea;
  font-size: .9rem;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
  transition: color .25s ease, background .25s ease;
}
.fx-faq-q:hover { color: #fff; background: rgba(154, 69, 214, .08); }
.fx-faq-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(205, 124, 252, .5);
  color: var(--fx-gold-bright);
}
.fx-faq-toggle::before,
.fx-faq-toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transition: transform .35s ease;
}
.fx-faq-toggle::before { width: 10px; height: 1.6px; transform: translate(-50%, -50%); }
.fx-faq-toggle::after { width: 1.6px; height: 10px; transform: translate(-50%, -50%); }
.fx-faq-item.is-open .fx-faq-toggle::after { transform: translate(-50%, -50%) scaleY(0); }
.fx-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1);
}
.fx-faq-item.is-open .fx-faq-a { grid-template-rows: 1fr; }
.fx-faq-a-inner { overflow: hidden; }
.fx-faq-a-inner p {
  margin: 0;
  padding: 0 1.25rem 1rem;
  color: #9c92bd;
  font-size: .85rem;
  line-height: 1.9;
}
.fx-faq-more-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--fx-gold-bright);
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(205, 124, 252, .4);
  padding: .6rem 1.4rem;
  border-radius: 999px;
  transition: background .3s ease, box-shadow .3s ease;
}
.fx-faq-more-link:hover {
  background: rgba(154, 69, 214, .12);
  box-shadow: 0 8px 24px -10px rgba(154, 69, 214, .6);
  color: #fff;
}

/* ===== مبدّل اللغة ===== */
.fx-lang-switch { position: relative; }
.fx-lang-btn {
  display: flex; align-items: center; gap: 6px;
  background: rgba(10, 14, 42, .55);
  border: 2px solid #6552C8;
  color: #e9e4ff;
  padding: 0 12px;
  height: 45px;
  border-radius: 10px;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .4px;
  transition: all .3s ease;
}
.fx-lang-btn:hover, .fx-lang-switch.is-open .fx-lang-btn {
  background: linear-gradient(135deg, #6552C8, #9a45d6);
  border-color: #9a45d6;
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(101, 82, 200, .7);
}
.fx-lang-btn-flag { font-size: 1.05rem; line-height: 1; }
.fx-lang-btn-code { font-weight: 800; }
.fx-lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  min-width: 190px;
  background: linear-gradient(160deg, #0d1132 0%, #141a45 100%);
  border: 1px solid rgba(154, 69, 214, .35);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255,255,255,.03) inset;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.97);
  transform-origin: top center;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  z-index: 1080;
}
.fx-lang-switch.is-open .fx-lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.fx-lang-option {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  color: #cfd0e8;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
  transition: background .2s ease, color .2s ease;
}
.fx-lang-option:hover { background: rgba(154, 69, 214, .18); color: #fff; }
.fx-lang-option.active { background: rgba(101, 82, 200, .28); color: #fff; }
.fx-lang-flag { font-size: 1.1rem; line-height: 1; }
.fx-lang-name { flex: 1; }
.fx-lang-check { color: #d4af37; flex-shrink: 0; }

/* ===== اتجاه RTL للأردية ===== */
html[lang="ur"] body, [lang="ur"] body { direction: rtl; }
html[lang="ur"] .hero-image-mode .hero-copy-left,
html[lang="ur"] .fx-mega-side { text-align: right; }

/* ===== تأثيرات عرض الخدمات: لمعة ساحبة + توهج إطار ===== */
.fx-editorial-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 236, 180, .28) 48%, rgba(255, 255, 255, .42) 50%, rgba(255, 236, 180, .28) 52%, transparent 65%);
  transform: translateX(-130%);
  pointer-events: none;
  z-index: 3;
}
.fx-editorial-row:hover .fx-editorial-media::after {
  animation: fx-shine-sweep 1.1s var(--fx-ease, cubic-bezier(.22,.8,.28,1)) forwards;
}
@keyframes fx-shine-sweep {
  from { transform: translateX(-130%); }
  to   { transform: translateX(130%); }
}

/* توهج بنفسجي ذهبي نابض حول إطار البطاقة عند الهوفر */
.fx-editorial-row::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(120deg, rgba(101, 82, 200, 0), rgba(212, 175, 55, .65), rgba(154, 69, 214, .65), rgba(101, 82, 200, 0));
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
  animation: fx-border-flow 3.2s linear infinite;
}
.fx-editorial-row { position: relative; }
.fx-editorial-row:hover::before { opacity: 1; }
@keyframes fx-border-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* نقاط المعرض المتحرك: لمسة ذهبية */
.fiber-svc-dots button {
  background: rgba(235, 228, 250, .25);
  transition: all .3s ease;
}
.fiber-svc-dots button.is-active {
  background: linear-gradient(135deg, #d4af37, #f0d98c);
  box-shadow: 0 0 10px rgba(212, 175, 55, .55);
  transform: scale(1.25);
}

/* أزرار تنقّل المعرض */
.fiber-svc-nav {
  background: rgba(13, 17, 50, .72);
  border: 1px solid rgba(154, 69, 214, .45);
  color: #e9e4ff;
  backdrop-filter: blur(6px);
  transition: all .3s ease;
}
.fiber-svc-nav:hover {
  background: linear-gradient(135deg, #6552C8, #9a45d6);
  border-color: #d4af37;
  color: #fff;
  box-shadow: 0 6px 20px -6px rgba(101, 82, 200, .8);
}