/* ══════════════════════════════════════════════════════════
   ORDIZ — مؤثرات الصفحات الداخلية (هيرو + بطاقات)
   مؤثرات فقط — لا تلمس أي وظيفة
   ══════════════════════════════════════════════════════════ */
:root{
  --sfx-ease:cubic-bezier(.22,1,.36,1);
  --sfx-fast:.18s;
  --sfx-mid:.32s;
}

/* ── الهيرو: شبكة + شفق ── */
.page-hero{position:relative;overflow:hidden}
.page-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:linear-gradient(rgba(0,96,192,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,96,192,.06) 1px,transparent 1px);
  background-size:52px 52px;animation:sfxGrid 40s linear infinite;
  mask-image:radial-gradient(circle at 50% 40%,#000 10%,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000 10%,transparent 78%);
}
@keyframes sfxGrid{to{background-position:52px 52px}}
.page-hero::after{
  content:"";position:absolute;inset:-45%;pointer-events:none;z-index:0;opacity:.28;
  background:conic-gradient(from 0deg at 50% 50%,
    rgba(0,96,192,.5),transparent 25%,
    rgba(22,169,107,.42),transparent 50%,
    rgba(0,150,255,.32),transparent 74%,
    rgba(0,96,192,.5),transparent 96%);
  filter:blur(70px);animation:sfxSpin 70s linear infinite;
}
@keyframes sfxSpin{to{transform:rotate(360deg)}}
.page-hero > *{position:relative;z-index:2}

html.dark .page-hero::before{
  background-image:linear-gradient(rgba(120,190,255,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(120,190,255,.07) 1px,transparent 1px);
}
html.dark .page-hero::after{opacity:.36}

/* ── جزيئات ── */
.sfx-particles{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.6}
html.dark .sfx-particles{opacity:.8}

/* ── الشعار: هولوغرام ── */
.site-logo{position:relative;display:inline-block;border-radius:8px;overflow:hidden;
  filter:drop-shadow(0 0 10px rgba(0,96,192,.2))}
.site-logo::after{
  content:"";position:absolute;inset:-45% -60%;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.7) 48%,
             rgba(150,230,255,.55) 52%,transparent 62%);
  transform:translateX(-150%) skewX(-12deg);
  animation:sfxHolo 8.5s ease-in-out infinite;mix-blend-mode:screen;pointer-events:none;
}
@keyframes sfxHolo{0%,62%{transform:translateX(-150%) skewX(-12deg)}82%,100%{transform:translateX(150%) skewX(-12deg)}}

/* ── بطاقات زجاجية ── */
.card,
.feature-landing,
.pricing-card,
.faq-item-landing,
.content-card{
  backdrop-filter:blur(10px) saturate(125%);
  -webkit-backdrop-filter:blur(10px) saturate(125%);
  transition:transform var(--sfx-mid) var(--sfx-ease),
             box-shadow var(--sfx-mid) var(--sfx-ease),
             border-color var(--sfx-fast) var(--sfx-ease);
  position:relative;
}
.card:hover,.feature-landing:hover,.pricing-card:hover,.content-card:hover{
  box-shadow:0 22px 44px -26px rgba(0,31,82,.45),
             0 0 0 1px rgba(0,96,192,.16),
             0 0 28px -10px rgba(0,96,192,.25);
}
html.dark .card:hover,html.dark .feature-landing:hover,
html.dark .pricing-card:hover,html.dark .content-card:hover{
  box-shadow:0 22px 44px -26px rgba(0,0,0,.9),
             0 0 0 1px rgba(120,190,255,.2),
             0 0 30px -8px rgba(0,150,255,.3);
}

/* حدّ متوهّج يتبع المؤشر */
.card::after,.feature-landing::after,.pricing-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  transition:opacity var(--sfx-mid) var(--sfx-ease);
  background:radial-gradient(320px 160px at var(--sfx-mx,50%) var(--sfx-my,0%),
             rgba(22,169,107,.1),transparent 70%);
}
.card:hover::after,.feature-landing:hover::after,.pricing-card:hover::after{opacity:1}

/* ── إمالة ── */
.sfx-tilt{transform-style:preserve-3d;will-change:transform}

/* ── الأزرار ── */
.site-btn{transition:transform var(--sfx-fast) var(--sfx-ease),
                      box-shadow var(--sfx-mid) var(--sfx-ease),
                      background var(--sfx-fast) var(--sfx-ease)}
.site-btn-green:hover{box-shadow:0 14px 28px -14px rgba(22,169,107,.85),0 0 20px -8px rgba(22,169,107,.45)}
.site-btn-primary:hover{box-shadow:0 14px 28px -14px rgba(0,96,192,.85),0 0 20px -8px rgba(0,96,192,.45)}

/* ── استجابة ── */
@media(max-width:700px){
  .sfx-particles{opacity:.4}
  .sfx-tilt{transform:none !important}
  .page-hero::after{opacity:.18}
}
@media(prefers-reduced-motion:reduce){
  .sfx-particles{display:none}
  .page-hero::before,.page-hero::after,.site-logo::after{animation:none !important}
  .sfx-tilt{transform:none !important}
}
/* ══════ ملصقان على جانبي عنوان كل صفحة ══════ */
.sfx-hero-label{
  position:absolute;top:50%;width:clamp(84px,9vw,132px);height:auto;
  z-index:1;pointer-events:none;user-select:none;border-radius:12px;
  filter:drop-shadow(0 16px 28px rgba(0,31,82,.28));
  opacity:.96;
}
.sfx-hero-label--r{
  inset-inline-end:max(1.5%,calc((100% - 1180px) / 2 - 34px));
  transform:translateY(-50%) rotate(7deg);
  animation:sfxLabR 9.5s ease-in-out infinite;
}
.sfx-hero-label--l{
  inset-inline-start:max(1.5%,calc((100% - 1180px) / 2 - 34px));
  transform:translateY(-50%) rotate(-7deg);
  animation:sfxLabL 9.5s ease-in-out infinite;
  animation-delay:-4.7s;
}
@keyframes sfxLabR{
  0%,100%{transform:translateY(-50%) rotate(7deg)}
  50%{transform:translateY(calc(-50% - 10px)) rotate(5deg)}
}
@keyframes sfxLabL{
  0%,100%{transform:translateY(-50%) rotate(-7deg)}
  50%{transform:translateY(calc(-50% - 10px)) rotate(-5deg)}
}
html.dark .sfx-hero-label{filter:drop-shadow(0 16px 28px rgba(0,0,0,.6))}

@media(max-width:1180px){.sfx-hero-label{width:clamp(70px,8vw,104px)}}
@media(max-width:820px){.sfx-hero-label{display:none}}
@media(prefers-reduced-motion:reduce){.sfx-hero-label{animation:none}}


/* ══════ مسار التنقل (breadcrumbs) ══════ */
.bcrumbs{
  max-width:1180px;margin:0 auto;padding:14px 22px 0;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12.5px;color:var(--text-muted,#61788D);
}
.bcrumbs a{color:var(--text-muted,#61788D);text-decoration:none;transition:.16s}
.bcrumbs a:hover{color:var(--brand-blue,#0060C0);text-decoration:underline}
.bcrumbs .sep{opacity:.45;font-size:14px;line-height:1}
.bcrumbs .cur{color:var(--text,#0A1B2A);font-weight:600}
html.dark .bcrumbs,html.dark .bcrumbs a{color:#9DB3C7}
html.dark .bcrumbs .cur{color:#E7F0F8}
@media(max-width:600px){.bcrumbs{padding:10px 16px 0;font-size:11.8px}}