/* ══════════════════════════════════════════════════════════
   ORDIZ — طبقة المؤثرات البصرية للصفحة الرئيسية
   لا تغيّر أي وظيفة — مؤثرات فقط
   ══════════════════════════════════════════════════════════ */

:root{
  --fx-ease:cubic-bezier(.22,1,.36,1);
  --fx-fast:.18s;
  --fx-mid:.32s;
  --fx-slow:.6s;
}

/* ── 1 · الهيرو: شبكة + شفق ── */
.landing-hero{position:relative;overflow:hidden}
.landing-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background-image:linear-gradient(rgba(0,96,192,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,96,192,.055) 1px,transparent 1px);
  background-size:54px 54px;
  animation:fxGrid 38s linear infinite;
  mask-image:radial-gradient(circle at 50% 30%,#000 12%,transparent 76%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000 12%,transparent 76%);
}
@keyframes fxGrid{to{background-position:54px 54px}}

.landing-hero::after{
  content:"";position:absolute;inset:-40%;pointer-events:none;z-index:0;opacity:.34;
  background:conic-gradient(from 0deg at 50% 50%,
    rgba(0,96,192,.55),transparent 24%,
    rgba(22,169,107,.45),transparent 48%,
    rgba(0,150,255,.35),transparent 72%,
    rgba(0,96,192,.55),transparent 96%);
  filter:blur(70px);animation:fxSpin 64s linear infinite;
}
@keyframes fxSpin{to{transform:rotate(360deg)}}

.landing-hero > .container{position:relative;z-index:2}

html.dark .landing-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 .landing-hero::after{opacity:.4}

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

/* ── 3 · الشعار: هولوغرام ── */
.site-logo{position:relative;display:inline-block;border-radius:8px;overflow:hidden;
  filter:drop-shadow(0 0 10px rgba(0,96,192,.22))}
.site-logo::after{
  content:"";position:absolute;inset:-45% -60%;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.75) 48%,
             rgba(150,230,255,.6) 52%,transparent 62%);
  transform:translateX(-150%) skewX(-12deg);
  animation:fxHolo 8s ease-in-out infinite;mix-blend-mode:screen;pointer-events:none;
}
@keyframes fxHolo{0%,60%{transform:translateX(-150%) skewX(-12deg)}80%,100%{transform:translateX(150%) skewX(-12deg)}}
.site-logo img{transition:filter var(--fx-mid) var(--fx-ease)}
.site-logo:hover img{filter:brightness(1.08) saturate(1.08)}

/* ── 4 · بطاقات زجاجية ── */
.feature-landing,
.step-landing,
.report-card-landing,
.card{
  backdrop-filter:blur(12px) saturate(130%);
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  transition:transform var(--fx-mid) var(--fx-ease),
             box-shadow var(--fx-mid) var(--fx-ease),
             border-color var(--fx-fast) var(--fx-ease);
  position:relative;
}
.feature-landing:hover,
.step-landing:hover,
.report-card-landing:hover{
  box-shadow:0 22px 44px -26px rgba(0,31,82,.45),
             0 0 0 1px rgba(0,96,192,.18),
             0 0 30px -8px rgba(0,96,192,.28);
}
html.dark .feature-landing:hover,
html.dark .step-landing:hover,
html.dark .report-card-landing:hover{
  box-shadow:0 22px 44px -26px rgba(0,0,0,.9),
             0 0 0 1px rgba(120,190,255,.22),
             0 0 34px -8px rgba(0,150,255,.35);
}

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

/* ── 5 · إمالة ثلاثية الأبعاد ── */
.fx-tilt{transform-style:preserve-3d;will-change:transform}
.fx-tilt > *{transform:translateZ(10px)}

/* ── 6 · أزرار ── */
.site-btn{
  transition:transform var(--fx-fast) var(--fx-ease),
             box-shadow var(--fx-mid) var(--fx-ease),
             background var(--fx-fast) var(--fx-ease);
  will-change:transform;
}
.site-btn-green:hover{box-shadow:0 14px 28px -14px rgba(22,169,107,.85),0 0 22px -8px rgba(22,169,107,.5)}
.site-btn-primary:hover{box-shadow:0 14px 28px -14px rgba(0,96,192,.85),0 0 22px -8px rgba(0,96,192,.5)}

/* ── 7 · عدّادات الإحصاء ── */
.stat-num{
  background:linear-gradient(120deg,var(--brand-blue,#0060C0),var(--brand-green,#16A96B),var(--brand-blue,#0060C0));
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:fxHue 9s linear infinite;
}
@keyframes fxHue{to{background-position:220% 0}}

/* ── 8 · نبض الأيقونات ── */
.feature-icon-landing{position:relative;transition:transform var(--fx-mid) var(--fx-ease)}
.feature-landing:hover .feature-icon-landing{transform:scale(1.07)}
.feature-icon-landing::after{
  content:"";position:absolute;inset:-6px;border-radius:16px;pointer-events:none;
  border:1px solid rgba(22,169,107,.35);opacity:0;animation:fxRing 3.8s ease-out infinite;
}
@keyframes fxRing{0%{transform:scale(.92);opacity:0}40%{opacity:.55}100%{transform:scale(1.35);opacity:0}}

/* ── 9 · استجابة ── */
@media(max-width:700px){
  .fx-particles{opacity:.5}
  .fx-tilt{transform:none !important}
  .landing-hero::after{opacity:.22}
}
@media(prefers-reduced-motion:reduce){
  .fx-particles{display:none}
  .landing-hero::before,.landing-hero::after,
  .site-logo::after,.feature-icon-landing::after,.stat-num{animation:none !important}
  .fx-tilt{transform:none !important}
}

/* ══════ أقسام v11 المضافة ══════ */
.fx-sec{position:relative}
.fx-result-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:start}
.fx-result{
  background:linear-gradient(160deg,rgba(0,96,192,.07),rgba(22,169,107,.05));
  border:1px solid rgba(0,96,192,.22);border-radius:18px;padding:22px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.fx-result-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.fx-ok{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(22,169,107,.14);border:1px solid rgba(22,169,107,.42);
  color:#16A96B;font-size:19px;font-weight:800;
  animation:fxOkPulse 2.8s ease-in-out infinite;
}
@keyframes fxOkPulse{0%,100%{box-shadow:0 0 0 0 rgba(22,169,107,.32)}50%{box-shadow:0 0 0 10px rgba(22,169,107,0)}}
.fx-result-top b{display:block;font-size:16px}
.fx-result-top span{font-size:12px;opacity:.7}
.fx-result-cells{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fx-cell{background:rgba(255,255,255,.55);border:1px solid rgba(0,31,82,.09);border-radius:10px;padding:9px 11px}
html.dark .fx-cell{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.fx-cell span{display:block;font-size:10.5px;opacity:.6;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.fx-cell b{font-size:13.5px}
.fx-socials{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.fx-socials a{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:100px;font-size:11.5px;
  background:rgba(0,96,192,.08);border:1px solid rgba(0,96,192,.18);color:var(--brand-blue,#0060C0);
  transition:.18s;
}
.fx-socials a:hover{background:rgba(0,96,192,.15);transform:translateY(-1px)}
.fx-result-side{display:grid;gap:12px}

.fx-journey{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.fx-jstep{
  position:relative;text-align:center;padding:14px 10px;border-radius:12px;
  background:var(--card,#fff);border:1px solid rgba(0,31,82,.09);
  transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s;
}
.fx-jstep:hover{transform:translateY(-3px);box-shadow:0 16px 32px -22px rgba(0,31,82,.5)}
.fx-jstep .fx-n{position:absolute;top:7px;inset-inline-start:9px;font-size:9.5px;opacity:.45;font-weight:800}
.fx-ji{font-size:19px;margin-bottom:5px}
.fx-jstep b{display:block;font-size:12.3px;margin-bottom:2px}
.fx-jstep span{font-size:10.8px;opacity:.62}

.fx-label-wrap{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:22px;align-items:center;
  background:var(--card,#fff);border:1px solid rgba(0,31,82,.09);border-radius:18px;padding:22px;
}
.fx-label-prev{background:rgba(0,31,82,.05);border-radius:14px;padding:18px;display:grid;place-items:center}
html.dark .fx-label-prev{background:rgba(255,255,255,.04)}
.fx-label-prev svg{max-width:210px}
.fx-label-specs{display:flex;flex-direction:column;gap:2px}
.fx-spec{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid rgba(0,31,82,.08);font-size:13.2px}
html.dark .fx-spec{border-color:rgba(255,255,255,.09)}
.fx-spec span{opacity:.62}
.fx-spec b{text-align:end}

.fx-app{
  display:grid;grid-template-columns:1fr .7fr;gap:24px;align-items:center;
  background:linear-gradient(150deg,rgba(0,96,192,.09),rgba(22,169,107,.07));
  border:1px solid rgba(0,96,192,.2);border-radius:20px;padding:26px;
}
.fx-stores{display:flex;gap:10px;flex-wrap:wrap}
.fx-store{
  display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:11px;
  background:rgba(0,31,82,.06);border:1px solid rgba(0,31,82,.12);transition:.18s;
}
.fx-store:hover{background:rgba(0,31,82,.11);transform:translateY(-2px)}
html.dark .fx-store{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.fx-store i{font-size:17px;font-style:normal}
.fx-store b{display:block;font-size:12.5px;line-height:1.2}
.fx-store span{font-size:10px;opacity:.6}
.fx-app-art{display:grid;place-items:center}
.fx-mini{width:132px;background:#050E18;border-radius:22px;padding:7px;box-shadow:0 22px 44px -22px rgba(0,0,0,.5)}
.fx-mini-scr{background:var(--card,#fff);border-radius:16px;padding:12px;text-align:center}

.fx-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fx-quotes .feature-landing p{font-size:13.4px;line-height:1.9;margin-bottom:14px}
.fx-who{display:flex;align-items:center;gap:9px}
.fx-who i{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,#0060C0,#16A96B);color:#fff;font-style:normal;font-size:11.5px;font-weight:800;
}
.fx-who b{display:block;font-size:12.8px}
.fx-who span{font-size:11.2px;opacity:.6}

@media(max-width:1000px){
  .fx-result-grid,.fx-label-wrap,.fx-app{grid-template-columns:1fr}
  .fx-journey{grid-template-columns:repeat(3,1fr)}
  .fx-quotes{grid-template-columns:1fr}
}
@media(max-width:600px){
  .fx-journey{grid-template-columns:1fr 1fr}
  .fx-result-cells{grid-template-columns:1fr}
}
/* ══════ صورة الملصق + الشرح ══════ */
.fx-label-prev{display:flex;flex-direction:column;align-items:center;gap:16px}

.fx-label-figure{
  position:relative;display:inline-block;width:min(260px,72vw);
  border-radius:16px;transform:rotate(-1.2deg);
  transition:transform .45s cubic-bezier(.22,1,.36,1),filter .45s;
  filter:drop-shadow(0 22px 34px rgba(0,31,82,.28));
}
.fx-label-figure:hover{transform:rotate(0deg) translateY(-5px) scale(1.03);
  filter:drop-shadow(0 28px 46px rgba(0,31,82,.36))}
.fx-label-figure img{width:100%;height:auto;display:block;border-radius:16px}

/* أرقام على الصورة */
.pin{
  position:absolute;width:25px;height:25px;border-radius:50%;
  display:grid;place-items:center;font-size:11.5px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#0060C0,#16A96B);
  border:2px solid #fff;box-shadow:0 4px 12px rgba(0,31,82,.35);
  animation:pinPulse 2.6s ease-in-out infinite;
}
.pin-1{top:24%;inset-inline-start:-10px;animation-delay:0s}
.pin-2{top:66%;inset-inline-start:-10px;animation-delay:.5s}
.pin-3{top:8%;inset-inline-end:-10px;animation-delay:1s}
@keyframes pinPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* مفتاح الشرح */
.fx-label-legend{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;
  width:100%;max-width:340px;font-size:12.3px;
}
.fx-label-legend li{display:flex;align-items:center;gap:8px;opacity:.85}
.fx-label-legend b{
  width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:10.5px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#0060C0,#16A96B);
}

html.dark .fx-label-figure{filter:drop-shadow(0 22px 34px rgba(0,0,0,.6))}
html.dark .fx-label-legend li{opacity:.9}

@media(max-width:600px){
  .fx-label-figure{width:min(220px,70vw)}
  .fx-label-legend{font-size:11.8px}
}
@media(prefers-reduced-motion:reduce){
  .pin{animation:none}
  .fx-label-figure,.fx-label-figure:hover{transform:none}
}

/* ══════ ملصقان على جانبي عنوان الهيرو ══════ */
.landing-hero{position:relative;overflow:hidden}

.fx-hero-label{
  position:absolute;top:50%;width:clamp(96px,10.5vw,146px);height:auto;
  z-index:1;pointer-events:none;user-select:none;
  border-radius:12px;
  filter:drop-shadow(0 18px 30px rgba(0,31,82,.30));
  opacity:.94;
}
.fx-hero-label--r{
  inset-inline-end:max(2%,calc((100% - 1180px) / 2 - 40px));
  transform:translateY(-50%) rotate(7deg);
  animation:labFloatR 9s ease-in-out infinite;
}
.fx-hero-label--l{
  inset-inline-start:max(2%,calc((100% - 1180px) / 2 - 40px));
  transform:translateY(-50%) rotate(-7deg);
  animation:labFloatL 9s ease-in-out infinite;
  animation-delay:-4.5s;
}
@keyframes labFloatR{
  0%,100%{transform:translateY(-50%) rotate(7deg)}
  50%{transform:translateY(calc(-50% - 12px)) rotate(5deg)}
}
@keyframes labFloatL{
  0%,100%{transform:translateY(-50%) rotate(-7deg)}
  50%{transform:translateY(calc(-50% - 12px)) rotate(-5deg)}
}

/* الشعار اللمّاع توهّج خفيف حول الملصقين */
.fx-hero-label:hover{opacity:1}

/* على الشاشات المتوسطة: تصغير */
@media(max-width:1180px){
  .fx-hero-label{width:clamp(80px,9vw,120px)}
}
/* على الهاتف: إخفاء */
@media(max-width:860px){
  .fx-hero-label{display:none}
}

html.dark .fx-hero-label{filter:drop-shadow(0 18px 30px rgba(0,0,0,.65))}

@media(prefers-reduced-motion:reduce){
  .fx-hero-label{animation:none}
}

/* ══════════════════════════════════════════════════════════
   تكثيف الصفحة — تقليل الفراغات
   ══════════════════════════════════════════════════════════ */

/* المسافات العمودية للأقسام */
.page-content{padding:34px 0 42px !important}
.page-content-tight{padding:26px 0 34px !important}
.landing-hero{padding:38px 0 46px !important}
.stats-bar{padding:20px 0 !important}

/* رؤوس الأقسام */
.section-head{margin-bottom:26px !important}
.section-title{margin-bottom:8px !important}
.section-sub{margin-bottom:0 !important}

/* الهيرو */
.landing-hero h1{margin-bottom:12px !important}
.landing-hero .lead{margin-bottom:18px !important}
.landing-hero-badge{margin-bottom:16px !important}
.landing-hero-cta{margin-top:18px !important;gap:10px !important}

/* الشبكات */
.features-grid{gap:14px !important;margin-bottom:18px !important}
.feature-landing{padding:20px 18px !important}
.feature-icon-landing{width:44px !important;height:44px !important;font-size:20px !important;margin-bottom:12px !important}
.report-cards{gap:14px !important;margin-bottom:0 !important}
.steps-grid-landing,.how-grid-landing{gap:14px !important}

/* الأسئلة */
.faq-list-landing{gap:8px !important;margin-top:14px !important}
.faq-item-landing,.faq-q-landing{padding-top:12px !important;padding-bottom:12px !important}

/* الأقسام الجديدة */
.fx-sec{padding-block:0 !important}
.fx-result-grid,.fx-journey,.fx-label-wrap,.fx-app,.fx-quotes{gap:12px !important}

/* الخطوات في «كيف يعمل» */
.step-landing{padding:18px 16px !important}

/* بطاقة الإحصاءات */
.stats-grid-landing{gap:14px !important}
.stat-num{font-size:clamp(22px,3vw,30px) !important}

/* تقليل فراغ الشاشات الصغيرة أيضاً */
@media(max-width:760px){
  .page-content{padding:26px 0 32px !important}
  .landing-hero{padding:28px 0 34px !important}
  .section-head{margin-bottom:20px !important}
  .features-grid,.report-cards,.fx-journey,.fx-quotes{gap:10px !important}
}

/* الوضع الداكن: لا تغيير */


/* شبكة المزايا: 9 بطاقات = 3×3 بلا فراغ */
.features-grid{grid-template-columns:repeat(3,1fr) !important}
@media(max-width:980px){.features-grid{grid-template-columns:repeat(2,1fr) !important}}
@media(max-width:620px){.features-grid{grid-template-columns:1fr !important}}