/* ============================================================
   Screen2ipcam — magicweb.win  |  MagicWeb theme (blue → green)
   Logical properties used throughout so RTL (Arabic) mirrors itself.
   ============================================================ */
:root{
  --blue:#1b4fd6; --blue-dk:#163faE; --green:#16a34a; --green-dk:#0f7a37;
  --navy:#0d1b3a; --ink:#16223a; --muted:#5b6b86; --line:#e6ecf6;
  --bg:#ffffff; --soft:#f4f7fc; --soft2:#eef3fb;
  --grad:linear-gradient(100deg,#1b4fd6,#16a34a);
  --grad-soft:linear-gradient(135deg,#eef3ff,#eafaf0);
  --shadow:0 10px 30px rgba(20,40,90,.08);
  --shadow-lg:0 24px 60px rgba(20,40,90,.16);
  --r:14px; --r-sm:10px; --maxw:1160px;
  --fs:'Inter','Segoe UI',system-ui,Arial,sans-serif;
}
html[dir="rtl"]{ --fs:'Tajawal','Segoe UI',Tahoma,system-ui,sans-serif; }

*{box-sizing:border-box}
/* overflow-x:clip (مش hidden) — بيمنع السكرول الأفقي من غير ما يكسر position:sticky بتاع الهيدر */
/* 96px كانت بتسيب فراغ زيادة فوق عنوان القسم (شريط 66 + 30 + حشو القسم نفسه).
   72 = ارتفاع الشريط + 6، والقسم بيجيب تنفّسه من حشوه الداخلي. */
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:72px}
/* أثناء الانتقال من التبويبات: بلا أنيميشن عشان الأقسام ما تزحلقش مكان الوقوف */
html.navjump .reveal{transition:none!important}
body{
  margin:0;font-family:var(--fs);color:var(--ink);background:var(--bg);
  line-height:1.65;-webkit-font-smoothing:antialiased;font-size:16px;overflow-x:clip;
  overflow-wrap:break-word;
}
h1,h2,h3,h4{color:var(--navy);line-height:1.2;margin:0 0 .4em}
h1{font-size:clamp(30px,5vw,52px);font-weight:800;letter-spacing:-.5px}
h2{font-size:clamp(24px,3.4vw,36px);font-weight:800;letter-spacing:-.3px}
h3{font-size:19px;font-weight:700}
p{margin:0 0 1em}
a{color:var(--blue);text-decoration:none}
img{height:auto;max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:22px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;
  padding:13px 24px;border-radius:11px;cursor:pointer;border:1px solid transparent;
  transition:transform .15s ease,box-shadow .15s ease,background .15s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(27,79,214,.28)}
.btn-primary:hover{box-shadow:0 12px 28px rgba(27,79,214,.38);transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--blue);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--blue);background:var(--soft)}
.btn-lg{padding:16px 30px;font-size:16px}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- header / nav ---------- */
header.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.85);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:18px;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--navy);font-size:18px}
.brand .logo{width:34px;height:34px;flex:none}
.brand small{font-weight:600;color:var(--muted);font-size:12px}
.nav-links{display:flex;gap:6px;margin-inline-start:auto;align-items:center}
.nav-links a{color:var(--ink);font-weight:600;font-size:14.5px;padding:8px 12px;border-radius:8px}
.nav-links a:hover{background:var(--soft);color:var(--blue)}
.nav-actions{display:flex;align-items:center;gap:10px}
.lang-btn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 12px;
  font-weight:700;color:var(--ink);cursor:pointer;font-family:var(--fs);font-size:14px}
.lang-btn:hover{border-color:var(--blue);color:var(--blue)}

/* ═══ قائمة اللغات (ثلاث لغات) — 2026-08-17 ═══
   خصائص منطقية بس (inset-inline / margin-inline) عشان تتعكس لوحدها في RTL. */
.lang-wrap{position:relative;display:inline-block}
.lang-btn{display:inline-flex;align-items:center;gap:6px}
.lang-ico{width:15px;height:15px;flex:none;opacity:.75}
.lang-menu{position:absolute;inset-block-start:calc(100% + 6px);inset-inline-end:0;
  min-width:150px;background:#fff;border:1px solid var(--line);border-radius:11px;
  box-shadow:0 12px 30px rgba(13,27,58,.16);padding:5px;z-index:80;
  display:none;flex-direction:column}
.lang-menu.open{display:flex}
.lang-menu button{appearance:none;border:0;background:transparent;width:100%;
  text-align:start;padding:9px 12px;border-radius:8px;font:inherit;font-size:14px;
  color:var(--ink);cursor:pointer;white-space:nowrap}
.lang-menu button:hover{background:#f2f6fd;color:var(--blue)}
.lang-menu button[aria-current="true"]{background:#eef4fd;color:var(--blue);font-weight:700}
.lang-menu button[aria-current="true"]::after{content:"✓";margin-inline-start:8px;font-weight:700}

/* أعلام قائمة اللغات — SVG مضمّن (ويندوز مابيرسمش إيموجي الأعلام) */
.lang-flag{width:18px;height:12px;flex:none;border-radius:2px;
  box-shadow:0 0 0 1px rgba(13,27,58,.14);display:inline-block;vertical-align:-1px}
.lang-menu button{display:flex;align-items:center;gap:9px}
.lang-cur-flag{display:inline-flex;align-items:center;flex:none}
.lang-btn .lang-ico{display:none}          /* العلم بيغني عن أيقونة الكرة */

/* على الموبايل: العلم بس بدل «العلم + اسم اللغة».
   السبب المقيس (2026-08-17): زرار اللغة بالاسم عرضه 85-91px، فزرار المنيو ☰
   كان بيطلع برّه الشاشة بـ22px على عرض 360. بالعلم وحده بيرجع جوّه بأمان. */
@media(max-width:640px){
  .lang-btn #langCur{display:none}
  .lang-btn{padding-inline:9px;gap:0}
  .lang-cur-flag .lang-flag{width:20px;height:14px}
}

@media (max-width:640px){
  .lang-menu{min-width:132px}
  .lang-menu button{padding:8px 10px;font-size:13px}
}

.menu-btn{display:none;background:none;border:0;cursor:pointer;padding:6px}
.menu-btn svg{width:26px;height:26px;color:var(--navy)}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--grad-soft);overflow:hidden}
.hero::before{content:"";position:absolute;inset-block-start:-120px;inset-inline-end:-120px;
  width:480px;height:480px;background:radial-gradient(circle,rgba(27,79,214,.14),transparent 65%);pointer-events:none}
.hero::after{content:"";position:absolute;inset-block-end:-160px;inset-inline-start:-120px;
  width:480px;height:480px;background:radial-gradient(circle,rgba(22,163,74,.14),transparent 65%);pointer-events:none}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:46px;
  align-items:center;padding-block:64px 72px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  color:var(--blue);font-weight:700;font-size:13px;padding:7px 14px;border-radius:99px;box-shadow:var(--shadow)}
.hero p.lead{font-size:18.5px;color:#33425e;max-width:540px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-block:24px 18px}
.hero-meta{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:13.5px;font-weight:600}
.hero-meta b{color:var(--ink)}
.hero-shot{border-radius:16px;box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.6);overflow:hidden}
/* ---------- hero standards badges (Windows / ONVIF / RTSP / Softpedia) ---------- */
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.hbadge{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:9px;
  font-weight:800;font-size:12.5px;letter-spacing:.3px;line-height:1;color:#fff;text-decoration:none;
  box-shadow:0 3px 10px rgba(13,27,58,.16)}
.hbadge.win{background:#0078D6}
.hbadge.onvif{background:#16a34a}
.hbadge.rtsp{background:#1b4fd6}
.hbadge.sp{background:var(--navy);color:#fbbf24;border:1px solid #f59e0b}
a.hbadge.sp:hover{background:#132a56}
[dir="rtl"] .hero-badges{justify-content:flex-end}
/* ---------- hero brand wordmark ---------- */
.hero-brandwrap{position:relative;z-index:1;text-align:center;padding-block-start:34px}
.brandmark{display:inline-block;font-weight:800;font-size:clamp(30px,7.4vw,74px);line-height:1;
  letter-spacing:-.01em;text-transform:uppercase;
  background:linear-gradient(95deg,#1b4fd6 0%,#2166d4 46%,#16a34a 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero-brandwrap + .hero-in{padding-block-start:30px}

/* ---------- trust / brands band ---------- */
.trust{border-block:1px solid var(--line);background:#fff}
.trust .wrap{padding-block:34px 30px}
.trust-title{text-align:center;color:var(--muted);font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}
.onvif-plate{display:flex;align-items:center;justify-content:center;gap:14px 26px;flex-wrap:wrap;
  max-width:780px;margin:0 auto 24px;padding:16px 24px;border:1.5px solid #cfe0ff;border-radius:16px;
  background:linear-gradient(120deg,#f2f7ff,#f0fdf4);text-decoration:none;box-shadow:0 8px 22px rgba(27,79,214,.08);
  transition:transform .15s, box-shadow .15s}
.onvif-plate:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(27,79,214,.14)}
.ov-mark{display:inline-flex;align-items:center;gap:14px}
.ov-logo{height:46px;width:auto;display:block}
.ov-ps{font-size:11.5px;font-weight:800;letter-spacing:.24em;color:#16a34a;text-transform:uppercase;
  border:1.5px solid #16a34a;border-radius:8px;padding:5px 10px}
.ov-note{color:#33425e;font-size:14px;font-weight:600;max-width:340px;line-height:1.55}
.brand-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:10px 12px}
.bchip{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;background:#fff;border:1px solid var(--line);
  border-radius:12px;font-weight:800;font-size:15px;color:var(--ink);
  box-shadow:0 2px 8px rgba(13,27,58,.06);transition:transform .15s, box-shadow .15s}
.bchip:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(13,27,58,.12)}
.bchip img{width:auto;height:24px;width:auto;max-width:150px;object-fit:contain;display:block}
.bchip .bi-ico{height:26px}
.bi-t{color:#1d4ed8}
.bchip .inv{filter:brightness(0);opacity:.82;height:22px}
.bchip .sq{height:58px;margin:-17px -10px}
.vlc-ico{height:30px !important}
.vlc-t{color:#e8850c;font-size:17.5px}
.xm-ico{height:32px !important;border-radius:8px}
.xm-t{color:#2b98e8;font-size:17.5px}
.trust-note{text-align:center;color:var(--muted);font-weight:700;font-size:13.5px;margin-top:18px}
.trust-note b{color:var(--navy)}

/* ---------- sections ---------- */
section{padding-block:78px}
.sec-head{text-align:center;max-width:680px;margin-inline:auto;margin-block-end:46px}
.sec-head .kicker{color:var(--green-dk);font-weight:800;letter-spacing:1px;text-transform:uppercase;font-size:13px}
.sec-head p{color:var(--muted);font-size:17px}
.alt{background:var(--soft)}

/* ---------- how it works ---------- */
.flow{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow);margin-block-end:38px}
.flow .node{font-weight:800;color:var(--navy);background:var(--soft);border:1px solid var(--line);
  padding:12px 18px;border-radius:11px;font-size:15px}
.flow .arrow{color:var(--blue);font-size:22px;font-weight:800}
[dir="rtl"] .flow .arrow{display:inline-block;transform:scaleX(-1)}   /* السهم يأشّر يسار مع اتجاه التدفّق في العربي */
.how-figure{margin:0 auto 34px;max-width:940px;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);background:#0a1533}
.how-figure img{display:block;width:100%;height:auto}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)}
.step .num{width:38px;height:38px;border-radius:10px;background:var(--grad);color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center;margin-block-end:14px;font-size:17px}

/* ---------- features grid ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;
  box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.ficon{width:46px;height:46px;border-radius:12px;background:var(--grad-soft);color:var(--blue);
  display:flex;align-items:center;justify-content:center;margin-block-end:14px}
.ficon svg{width:24px;height:24px}
.card p{color:var(--muted);font-size:14.5px;margin:0}

/* ---------- comparison ---------- */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:880px;margin-inline:auto}
.cmp .col{border-radius:var(--r);padding:26px;border:1px solid var(--line)}
.cmp .bad{background:#fff}
.cmp .good{background:linear-gradient(135deg,#eef3ff,#eafaf0);border-color:#bfe3cb}
.cmp h3{display:flex;align-items:center;gap:9px}
.cmp ul{list-style:none;margin:0;padding:0}
.cmp li{display:flex;gap:10px;align-items:flex-start;margin-block:11px;font-size:15px;color:var(--ink)}
.cmp li svg{width:20px;height:20px;flex:none;margin-block-start:2px}
.tick{color:var(--green)} .cross{color:#c33}

/* ---------- use cases ---------- */
.uses{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.use{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;text-align:center}
.use .emoji{font-size:28px;display:block;margin-block-end:8px}
.use b{display:block;color:var(--navy);font-size:15px;margin-block-end:4px}
.use span{color:var(--muted);font-size:13px}

/* ---------- screenshots ---------- */
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.shot{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
/* contain بدل cover: صور نسبتها مش 16:9 كانت بتتقصّ (لحد 60%). اللي نسبتها
   مطابقة مش بيتغيّر فيها حاجة. — إصلاح 2026-08-17 */
.shot img{height:auto;width:100%;aspect-ratio:16/10;object-fit:contain;object-position:top;background:#0d1b3a}
.shot .cap{padding:14px 18px}
.shot .cap b{color:var(--navy)} .shot .cap p{margin:2px 0 0;color:var(--muted);font-size:13.5px}
/* لقطات تسويقية (16:9، العنوان مطبوع داخل الصورة، الأولى بعرض كامل) */
.shots-marketing .shot img{height:auto;aspect-ratio:16/9;object-fit:contain;object-position:center;background:#123a8c}
.shots-marketing .shot:first-child{grid-column:1 / -1}
.shots-marketing .shot.shot-wide{grid-column:1 / -1}   /* البوستر عرض كامل في الإنجليزي والعربي */
.status-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-block-start:24px}
.status-shots figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.status-shots img{height:auto;width:100%}
.status-shots figcaption{padding:10px 14px;color:var(--muted);font-size:13px;text-align:center}

/* ---------- pricing ---------- */
.ms-cert{display:inline-flex;align-items:center;gap:11px;margin-block:22px 4px;background:linear-gradient(180deg,#f2fbf5,#fff);
  border:2px solid #9edcb4;border-radius:99px;padding:13px 24px;text-decoration:none;color:var(--navy);
  font-size:18px;font-weight:700;line-height:1.35;box-shadow:0 8px 22px rgba(22,163,74,.16);transition:transform .15s ease,box-shadow .15s ease}
.ms-cert:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(22,163,74,.24)}
.ms-cert svg{flex:none}
.ms-cert b{color:#116b34;font-weight:800}
/* فقرة الثقة في قسم التنزيل — بادج ملوّن + نص */
.ms-note{display:flex;align-items:center;gap:11px;max-width:720px;margin:0 auto 22px;
  background:linear-gradient(180deg,#f2fbf5,#fff);border:1.5px solid #bfe6cd;border-radius:14px;
  padding:14px 22px;color:var(--ink);font-size:15.5px;font-weight:600;line-height:1.6;box-shadow:0 6px 18px rgba(22,163,74,.12)}
.ms-note svg{flex:none}
.ms-note b{color:#116b34;font-weight:800}
@media(max-width:600px){ .ms-note{font-size:14px;padding:12px 16px;gap:9px} }
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.tier{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 26px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;position:relative}
.tier.best{border:2px solid transparent;background:
  linear-gradient(#fff,#fff) padding-box, var(--grad) border-box;box-shadow:var(--shadow-lg);transform:scale(1.03)}
.tier .badge{position:absolute;inset-block-start:-13px;inset-inline-start:50%;transform:translateX(-50%);
  background:var(--grad);color:#fff;font-weight:700;font-size:12px;padding:5px 14px;border-radius:99px;white-space:nowrap}
html[dir="rtl"] .tier .badge{transform:translateX(50%)}
.tier h3{font-size:18px;color:var(--muted);font-weight:700}
.tier .price{font-size:44px;font-weight:800;color:var(--navy);line-height:1;margin-block:6px}
.tier .price span{font-size:16px;color:var(--muted);font-weight:600}
.tier .price .old{font-size:23px;color:var(--muted);font-weight:600;text-decoration:line-through;opacity:.6;margin-inline-end:11px}
.tier .price-egp{color:var(--muted);font-size:15px;font-weight:700;margin-block:3px 2px}
[dir="rtl"] .tier .price-egp{color:var(--navy);font-size:23px;font-weight:800;margin-block:5px 3px}   /* سعر الجنيه أوضح وأكبر للزوّار المصريين */
.tiers.tiers-single{grid-template-columns:1fr;max-width:470px;margin-inline:auto}
.tiers.tiers-single .tier.best{transform:none}
.tier .sub{color:var(--muted);font-size:14px;min-height:40px}
.tier ul{list-style:none;padding:0;margin:18px 0 22px}
.tier li{display:flex;gap:9px;align-items:flex-start;margin-block:9px;font-size:14.5px}
.tier li svg{width:18px;height:18px;color:var(--green);flex:none;margin-block-start:2px}
.tier .btn{margin-block-start:auto;justify-content:center}
.pay-note{text-align:center;color:var(--muted);font-size:14px;margin-block-start:26px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;max-width:760px;margin-inline:auto}
.pay-note b{color:var(--navy)}

/* ---------- license assurance (under the buy button) ---------- */
.lic-assure{margin-block-start:16px;padding-block-start:14px;border-block-start:1px solid var(--line);
  text-align:start;display:flex;flex-direction:column;gap:5px}
.lic-assure b{color:var(--navy);font-size:14px;font-weight:750;line-height:1.45}
.lic-assure > span{color:var(--muted);font-size:13px;line-height:1.6}
.lic-assure em{font-style:normal;color:var(--green);font-weight:650;font-size:12.5px;
  display:flex;flex-direction:column;gap:2px;margin-block-start:5px}

/* ---------- checklist inside the FAQ answer ---------- */
.qa .a-p{display:block;margin-block-start:10px}
.lic-checks{list-style:none;padding:13px 16px;margin-block-start:14px;margin-block-end:0;
  background:#f2f9f4;border:1px solid #cfe8d8;border-radius:11px;
  display:flex;flex-direction:column;gap:7px}
.lic-checks li{font-size:14px;font-weight:650;color:#0f5c30;display:flex;gap:9px;align-items:center}
.lic-checks li::before{content:"\2714";color:var(--green);font-weight:800;flex:none;font-size:13px}

/* ---------- buy steps ---------- */
.buy{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.buy .s{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}
.buy .s .n{font-weight:800;color:var(--blue);font-size:13px}
.buy .s b{display:block;color:var(--navy);margin-block:6px 4px}
.buy .s p{margin:0;color:var(--muted);font-size:14px}

/* ---------- download ---------- */
.dl{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:820px;margin-inline:auto}
.dl .card{display:flex;gap:16px;align-items:center}
.dl .os{width:54px;height:54px;border-radius:13px;background:var(--grad-soft);display:flex;
  align-items:center;justify-content:center;flex:none}
.dl .os svg{width:30px;height:30px;color:var(--blue)}
.dl .meta{flex:1;min-width:0}.dl .meta b{color:var(--navy);font-size:16px}.dl .meta p{margin:2px 0 0;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.dl-extra{text-align:center;margin-block-start:22px;color:var(--muted);font-size:14px}
.note{background:#fff7ed;border:1px solid #fdba74;border-radius:var(--r);padding:14px 18px;
  color:#9a4d12;font-size:13.5px;max-width:820px;margin:22px auto 0}

/* ---------- faq ---------- */
.faq{max-width:820px;margin-inline:auto}
.qa{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);margin-block-end:12px;overflow:hidden}
.qa summary{cursor:pointer;padding:18px 22px;font-weight:700;color:var(--navy);list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-size:22px;color:var(--blue);font-weight:400}
.qa[open] summary::after{content:"\2212"}
.qa .a{padding:0 22px 18px;color:var(--muted);font-size:15px}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:34px;align-items:start;max-width:980px;margin-inline:auto}
.contact-info p{color:var(--muted)}
.contact-info .row{display:flex;gap:12px;align-items:center;margin-block:14px;font-weight:600;color:var(--ink)}
.contact-info .row svg{width:22px;height:22px;color:var(--blue);flex:none}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)}
.form label{display:block;font-weight:700;font-size:13.5px;color:var(--navy);margin-block:12px 6px}
.form input,.form textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  font-family:var(--fs);font-size:15px;color:var(--ink);background:var(--soft);transition:border .15s}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--blue);background:#fff}
.form textarea{min-height:96px;resize:vertical}
.form .btn{width:100%;justify-content:center;margin-block-start:18px}
.form .hint{font-size:12.5px;color:var(--muted);margin-block-start:6px}
.form-msg{margin-block-start:14px;padding:12px 16px;border-radius:10px;font-weight:600;font-size:14px;display:none}
.form-msg.ok{display:block;background:#f0fdf4;border:1px solid #86efac;color:#166534}
.form-msg.err{display:block;background:#fef2f2;border:1px solid #fca5a5;color:#b91c1c}

/* ---------- footer ---------- */
footer{background:var(--navy);color:#c7d2e6;padding-block:50px 26px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;margin-block-end:30px}
footer h4{color:#fff;font-size:15px;margin-block-end:14px}
footer a{color:#c7d2e6;display:block;margin-block:7px;font-size:14px}
footer a:hover{color:#fff}
/* سطر روابط النسخ العربية (روابط داخلية ثابتة يقراها Googlebot) */
.foot-alt{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;justify-content:center;margin:18px 0 2px;font-size:13px;color:#9fb2d0;text-align:center}
.foot-alt a{display:inline;margin-block:0;font-size:13px;color:#cfe0ff}
.foot-alt a:hover{color:#fff}
.foot-alt .sep{opacity:.45}
@media (max-width:640px){.foot-alt .sep{display:none}.foot-alt{gap:2px 12px;line-height:1.9}}

footer .brand{color:#fff}footer .brand small{color:#8ea3c4}
footer .legal{border-block-start:1px solid rgba(255,255,255,.12);padding-block-start:20px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:#8ea3c4;font-size:13px}

/* ---------- floating contact ---------- */
.fab{position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:70;background:var(--grad);
  color:#fff;border-radius:99px;padding:13px 20px;font-weight:700;box-shadow:var(--shadow-lg);
  display:flex;align-items:center;gap:9px;cursor:pointer;border:0;font-family:var(--fs);font-size:15px}
.fab svg{width:20px;height:20px}
.fab:hover{transform:translateY(-2px)}

/* زرار واتساب العائم — دائري أخضر فوق زرار التواصل (inset-inline يعكسه تلقائيًا مع العربي) */
.wa-fab{position:fixed;inset-block-end:84px;inset-inline-end:22px;z-index:70;width:52px;height:52px;
  background:#25D366;color:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(37,211,102,.45);
  transition:transform .18s ease,box-shadow .18s ease}
.wa-fab svg{width:27px;height:27px}
.wa-fab:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(37,211,102,.55)}

/* زرار العودة لأعلى — دائري صغير فوق زرار واتساب، يظهر بعد النزول */
.totop{position:fixed;inset-block-end:150px;inset-inline-end:24px;z-index:70;width:46px;height:46px;
  background:var(--navy);color:#fff;border:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 22px rgba(13,43,107,.38);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease,visibility .25s,background .2s}
.totop.show{opacity:1;visibility:visible;transform:translateY(0)}
.totop svg{width:22px;height:22px}
.totop:hover{background:var(--blue);transform:translateY(-3px)}

/* ---------- reveal anim ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero-in{grid-template-columns:1fr;gap:30px}
  .hero-visual{order:-1}   /* الموبايل: صورة الـNVR فوق خالص وتحتها الكلام */
  .steps,.grid3,.uses,.buy{grid-template-columns:1fr 1fr}
  .tiers{grid-template-columns:1fr;max-width:440px;margin-inline:auto}
  .tier.best{transform:none}
  .cmp,.contact-grid{grid-template-columns:1fr}
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;inset-block-start:66px;inset-inline:0;background:#fff;
    flex-direction:column;padding:14px 22px;border-block-end:1px solid var(--line);gap:2px}
  .menu-btn{display:block}
}
@media(max-width:600px){
  section{padding-block:54px}
  .steps,.grid3,.buy,.shots,.dl,.status-shots{grid-template-columns:1fr}
  .uses{grid-template-columns:1fr 1fr;gap:12px}
  footer .cols{grid-template-columns:1fr;gap:22px}
  .hero-meta{gap:10px 16px}
  .guide{grid-template-columns:1fr}
  .dl .card{flex-wrap:wrap}
  .dl .card .btn{flex-basis:100%;justify-content:center;margin-block-start:4px}
  .flow{padding:18px 14px;gap:8px}
  .flow .node{font-size:13.5px;padding:9px 12px}
  h1{font-size:30px}
  .pay-note,.note,.dl-extra{font-size:13px}
  .ms-cert{font-size:15px;padding:11px 16px;gap:9px;border-radius:20px;margin-block:16px 2px}
  .ms-cert svg.ok{width:24px;height:24px}
  .ms-cert svg.mslogo{width:27px;height:27px}
  .dl-sf-badge img{width:auto;height:56px !important}
  .dl-sf-badge a[aria-label="Download from SourceForge"]{height:56px !important;padding:11px 20px !important}
  /* compact header so it never crowds on narrow phones */
  .nav-in{gap:8px}
  .brand small{display:none}
  .brand{font-size:15px;gap:8px}
  .brand .logo{width:30px;height:30px}
  .nav-actions{gap:7px}
  .lang-btn{padding:7px 9px;font-size:13px}
  .nav-actions .btn{padding:9px 13px;font-size:13.5px}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
}

/* ---------- lightbox (click to enlarge) ---------- */
.zoomable{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:200;background:rgba(8,15,30,.93);display:none;
  align-items:center;justify-content:center;padding:30px;cursor:zoom-out}
.lb.open{display:flex;animation:lbin .18s ease}
@keyframes lbin{from{opacity:0}to{opacity:1}}
.lb img{height:auto;max-width:95vw;max-height:92vh;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb .x{position:absolute;inset-block-start:16px;inset-inline-end:24px;color:#fff;font-size:38px;
  cursor:pointer;line-height:1;opacity:.85;font-weight:300}
.lb .x:hover{opacity:1}
.lb .hint{position:absolute;inset-block-end:18px;inset-inline:0;text-align:center;color:#9fb2d0;font-size:13px}
/* معرض اللقطات: أسهم + عدّاد (2026-08-14) */
/* رابط «الجديد في هذا الإصدار» تحت أزرار التحميل (2026-08-14)
   برتقالي مش أحمر: الأحمر في الويب = خطأ/تحذير، وتحت أزرار التحميل مباشرةً
   العين بتقراه إنذار. البرتقالي بيلفت بنفس القوة، وبيكرّر لون بادج الجائزة فوق. */
.dl-whatsnew{margin-block-start:14px}
.dl-whatsnew a{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
  padding:11px 20px;border-radius:999px;border:1.5px solid #f0b360;background:#fff5e6;
  color:#8a4b06;text-decoration:none;font-size:15px;font-weight:700;
  box-shadow:0 1px 3px rgba(180,110,20,.12);transition:background .15s,border-color .15s,transform .15s}
.dl-whatsnew a:hover{background:#ffecd2;border-color:#e39a3c;transform:translateY(-1px)}
.dl-whatsnew a::before{content:attr(data-new);flex:0 0 auto;
  background:#e2700c;color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.04em;
  padding:3px 9px;border-radius:999px;text-transform:uppercase}
.dl-whatsnew b{font-weight:800;color:#7a3f04}
.dl-whatsnew span{color:#9a6220;font-weight:600}

/* 🏆 شارة جائزة SourceForge في الهيرو (2026-08-14) */
/* ⚠️ الهيرو **فاتح** — فالألوان لازم داكنة. أول محاولة كتبت نصًا
   أبيض على خلفية شبه شفافة فطلع شبه مقروء (اتمسكت في الفحص البصري). */
/* طلب أحمد 2026-08-14: النسخة البرتقالي من أصول الجائزة الرسمية،
   على كارت فاتح بحافة برتقالي خفيفة — البادج نفسه أوضح وأقوى في العين. */
.sf-award{display:inline-flex;align-items:center;gap:13px;margin-block-start:18px;
  padding:14px 28px 14px 14px;border:1.5px solid #f3c99a;border-radius:18px;
  background:linear-gradient(180deg,#fffaf4,#fff3e4);
  box-shadow:0 2px 12px rgba(214,110,20,.12);
  text-decoration:none;transition:box-shadow .15s,transform .15s,border-color .15s}
.sf-award:hover{box-shadow:0 10px 26px rgba(214,110,20,.24);border-color:#ec9a4c;transform:translateY(-1px)}
.sf-award img{width:auto;display:block;width:110px;height:110px;flex:0 0 auto}
.sf-award-t{display:flex;flex-direction:column;line-height:1.35}
.sf-award-t b{font-size:21px;font-weight:900;color:#b45309;letter-spacing:.01em}
.sf-award-t small{font-size:13.5px;color:#7c5424}
@media (max-width:560px){ .sf-award{padding:10px 15px 10px 10px} .sf-award img{width:80px;height:80px}
  .sf-award-t b{font-size:16px} .sf-award-t small{font-size:12px} }

.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:52px;height:52px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.10);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:background .15s,transform .15s}
.lb-nav:hover{background:rgba(255,255,255,.22)}
.lb-nav:active{transform:translateY(-50%) scale(.94)}
.lb-nav svg{width:28px;height:28px}
.lb-prev{left:18px}
.lb-next{right:18px}
.lb-count{position:absolute;inset-block-end:44px;inset-inline:0;text-align:center;
  color:#dbe6f7;font-size:13px;font-weight:700;letter-spacing:.04em;
  direction:ltr;unicode-bidi:isolate}
@media (max-width:640px){
  .lb-nav{width:42px;height:42px}
  .lb-nav svg{width:22px;height:22px}
  .lb-prev{left:6px} .lb-next{right:6px}
}

/* ---------- setup guide ---------- */
.guide{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.guide .g{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.guide .g.wide{grid-column:1 / -1}
.guide h3{display:flex;align-items:center;gap:10px;margin-block-end:12px;font-size:17px}
.guide h3 .gn{width:30px;height:30px;border-radius:8px;background:var(--grad);color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center;font-size:15px;flex:none}
.guide ol{margin:0;padding-inline-start:20px}
.guide ol li{margin-block:6px;font-size:14.5px;color:var(--ink)}
.guide p{color:var(--muted);font-size:14.5px;margin:0}
.guide table{width:100%;border-collapse:collapse;margin-block:4px}
.guide th,.guide td{border:1px solid var(--line);padding:8px 10px;text-align:start;font-size:13.5px}
.guide th{background:var(--soft2);color:var(--navy)}
.guide code{background:var(--soft2);padding:1px 6px;border-radius:5px;font-size:13px;direction:ltr;display:inline-block;color:var(--blue)}



/* ===== مربعا الدفع: خارج مصر / داخل مصر ===== */
.pay-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;align-items:stretch;max-width:1000px;margin-inline:auto}
.pay-box{display:flex;flex-direction:column;min-width:0}
.pay-box .tier{flex:1}
.pay-box-h{align-self:center;display:inline-flex;align-items:center;gap:9px;font-size:20px;font-weight:800;
  color:var(--navy);background:#fff;border:2px solid var(--line);border-radius:999px;padding:10px 22px;margin-block-end:34px}
.pay-box-h.eg{color:#0e7a38;background:#eafaf0;border-color:var(--green);box-shadow:0 6px 18px rgba(31,168,85,.18)}
.tier.eg{border:2px solid var(--green);text-align:center;align-items:center}
.tier.eg h3{text-align:center;font-size:20px}
.tier.eg .sub{font-size:16.5px;line-height:1.8;min-height:auto;margin-block-start:6px}
.eg-price{font-size:32px;font-weight:800;color:var(--navy);line-height:1.3;margin-block:14px 6px}
.eg-logos{display:flex;gap:14px;align-items:stretch;width:100%;margin-block:26px 20px}
.eg-logos img{flex:1 1 0;width:100%;height:auto;min-width:0;border-radius:10px;border:1px solid var(--line);background:#fff;object-fit:contain}
.eg-logos img:nth-child(1){height:auto;flex-grow:1.88}  /* فودافون - أعرض */
.eg-logos img:nth-child(2){height:auto;flex-grow:1.17}  /* إنستاباي */
.eg-note{color:var(--muted);font-size:16.5px;font-weight:600;line-height:1.8;margin-block-end:24px}
.tier.eg .btn{width:100%}
@media(max-width:860px){.pay-two{grid-template-columns:minmax(0,1fr);max-width:470px}.pay-box-h{font-size:18px;padding:9px 18px}}

/* سطر «الدفع + التسليم» جوّه شبكة الكارتين:
   ديسكتوب → صف كامل تحتيهم · موبايل → بين الكارتين (بعد الدولي وقبل المصري) */
.pay-two > .pay-delivery{grid-column:1/-1;order:9;margin-block-start:2px}
@media(max-width:860px){
  .pay-two > .pay-box:nth-of-type(1){order:1}
  .pay-two > .pay-delivery{order:2;margin-block:14px}
  .pay-two > .pay-box:nth-of-type(2){order:3}
}

/* ===== بطاقات الدفع المقبولة عبر PayPal ===== */
/* بعد إعادة الترتيب: الزرار جه لاصق في سطر «بلا إعادة تفعيل» — نفصله */
.tier.best .btn.pay{margin-block-start:20px}

/* داخل كارت السعر: أضيق، فنصغّر الشعارات ونضبط المسافات */
.pp-secure.in-tier{margin-block:14px 0!important;gap:10px!important;width:100%}
.pp-secure.in-tier img{width:auto;height:28px!important}
.pp-secure.in-tier > span{font-size:13px!important}
.cards-row.in-tier{margin-block-start:10px;gap:5px;width:100%;flex-wrap:nowrap}
.cards-row.in-tier img{width:auto;width:46px;height:29px;flex:0 0 auto}
.cards-note.in-tier{font-size:12.5px;line-height:1.7;margin-block:8px 4px;max-width:none}
/* الموبايل: صف واحد بتمن شعارات بيتعدّى عرض الكارت → سطرين × 4 */
@media(max-width:640px){
  .cards-row.in-tier{flex-wrap:wrap;gap:6px;max-width:236px;margin-inline:auto}
  .cards-row.in-tier img{width:auto;width:54px;height:34px}
  .cards-note.in-tier{font-size:12px}
}
/* عنوان «للدفع من خارج مصر» اتشال — بنسيب مكانه على الديسكتوب عشان الكارتين يفضلوا متحاذيين */
.pay-box-h:not(.eg){visibility:hidden}
@media(max-width:860px){ .pay-box-h:not(.eg){display:none} }

.cards-row{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;margin-block-start:16px;direction:ltr}
.cards-row img{width:auto;width:58px;height:37px;display:block;border-radius:6px;border:1px solid var(--line);
  background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.06)}
.cards-note{text-align:center;color:var(--muted);font-size:14px;line-height:1.8;
  max-width:620px;margin-inline:auto;margin-block-start:12px}
@media(max-width:520px){
  .cards-row{gap:7px}
  .cards-row img{width:auto;width:52px;height:33px}
  .cards-note{font-size:13px}
}

/* ===== عرض الإطلاق: سعر مشطوب + نسبة خصم + بريق على البادج ===== */
.eg-price .old{font-size:22px;color:var(--muted);font-weight:600;text-decoration:line-through;opacity:.55;margin-inline-end:11px}
.save-line{margin-block:4px 8px}
.save-pill{display:inline-block;background:#fee2e2;color:#b91c1c;font-weight:800;font-size:13px;letter-spacing:.2px;border-radius:999px;padding:4px 13px;border:1px solid #fecaca}
/* 2026-08-17: كان white-space:nowrap + overflow:hidden فالنصّ العربي (أطول من
   الإنجليزي) بيتقصّ على الديسكتوب. السماح باللفّ مع حدّ أقصى للعرض بيحلّها
   في كل اللغات من غير المساس بالنصوص نفسها. */
.tier .badge{overflow:hidden;white-space:normal;text-align:center;
  max-width:min(92%,340px);line-height:1.3}
.tier .badge::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);animation:badgeShine 4.5s ease-in-out infinite;pointer-events:none}
@keyframes badgeShine{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@media(prefers-reduced-motion:reduce){.tier .badge::after{animation:none}}

/* ===== ضبط الموبايل لمربعي الدفع ===== */
@media(max-width:560px){
  .pay-two{gap:20px}
  .pay-box-h{font-size:15.5px;padding:8px 15px;gap:6px;max-width:100%;line-height:1.45;text-align:center;white-space:normal}
  .tier{padding:26px 16px}
  .tier .badge{white-space:normal;font-size:10.5px;line-height:1.35;max-width:90%;text-align:center;padding:5px 11px}
  .tier .price{font-size:37px}
  .tier .price .old{font-size:19px;margin-inline-end:8px}
  .eg-price{font-size:25px;line-height:1.4;margin-block:12px 6px}
  .eg-price .old{font-size:17px;margin-inline-end:8px}
  .tier.eg h3{font-size:18px}
  .tier.eg .sub,.eg-note{font-size:14.5px;line-height:1.7}
  .eg-logos{gap:10px;margin-block:18px 14px}
  .save-pill{font-size:12px;padding:3px 11px}
}

/* ===== هواتف ضيقة جدًا (<=380px) ===== */
@media(max-width:380px){
  .nav-in{gap:6px}
  .brand{font-size:14px;gap:6px}
  .brand .logo{width:26px;height:26px}
  .lang-btn{padding:6px 8px;font-size:12px}
  .nav-actions{gap:5px}
  .nav-actions .btn{padding:8px 10px;font-size:12.5px}
  .menu-btn{padding:3px}
  .menu-btn svg{width:22px;height:22px}
}

/* ===== سطر الخصوصية: fine print (صغير ومحايد) ===== */
.fineprint{font-size:10.5px;opacity:.62;letter-spacing:.1px;line-height:1.5}
@media(max-width:600px){.fineprint{font-size:9.5px}}


/* ═════ بروفة الأفكار الأربعة (2026-07-27) ═════ */

/* 1) خانة «استلم رخصتك أسرع» فوق زرار الدفع */
.ckbox{width:100%;margin-block-start:18px;padding:13px 14px;border:1px dashed var(--line);
  border-radius:12px;background:#f7faff;display:flex;flex-direction:column;gap:8px}
.ckbox-h{font-weight:800;font-size:13.5px;color:var(--navy)}
.ckbox input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;
  font:inherit;font-size:13.5px;background:#fff;color:var(--ink)}
.ckbox input:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:transparent}
.ckbox .hint{font-size:11.5px;color:var(--muted);line-height:1.65;margin:0}

/* 2) قائمة سبب التواصل */
.form select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:15px;background:#fff;color:var(--ink);margin-block-end:12px}
.form select:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:transparent}

/* 3) كارت الشركات */
.tier.biz{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;
  margin-block-start:20px;border:2px solid var(--line);background:
  linear-gradient(180deg,#fbfdff,#fff);text-align:start}
.tier.biz h3{font-size:20px;margin:0 0 6px}
.tier.biz p{color:var(--muted);font-size:15px;line-height:1.8;margin:0 0 12px;max-width:62ch}
.biz-ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.biz-ul li{position:relative;padding-inline-start:20px;font-size:14.5px;font-weight:600;color:var(--ink)}
.biz-ul li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--green);font-weight:800}
.biz-r{text-align:center;display:flex;flex-direction:column;gap:10px;min-width:190px}
.biz-price{font-weight:800;font-size:19px;color:var(--navy)}
.tier.biz .btn{width:100%}
@media(max-width:760px){
  .tier.biz{grid-template-columns:minmax(0,1fr);gap:16px;text-align:center}
  .tier.biz p{margin-inline:auto}
  .biz-ul{justify-content:center}
  .biz-r{min-width:0}
}


/* عنوان صغير جوّه خانة الشراء */
.ckbox .ck-lbl{font-size:12px;font-weight:700;color:var(--muted);margin-block-start:2px}
/* صورة توضيحية في كارت الدفع المحلي — بتملأ الفراغ وبتشرح الفكرة */
.eg-shot{width:100%;margin-block:6px 14px}
.eg-shot img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--line);background:#fff}
.eg-cap{font-size:12.5px;color:var(--muted);line-height:1.7;margin-block-start:8px;text-align:center}

/* صورة الهيرو كانت بتطلع بمقاسها الأصلي جوّه عمود أعرض منها → تملأ العمود */
.hero-shot{width:100%;height:auto;display:block}
@media(min-width:861px){ .hero-in{grid-template-columns:1fr 1.12fr;gap:40px} }

/* ═══ شاشات عريضة: الصورة تكبر، والنصّ زي ما هو ═══
   طلب أحمد 2026-08-17: «الصورة صغيرة على الشاشة العريضة، الخطّ كويس».
   ⚠️ min-width مقصودة: كل نقاط التوقّف التانية max-width (≤980px)، فالقاعدة دي
   مستحيل تلمس لابتوب (1366) أو تابلت أو موبايل — التغيير معزول تمامًا.
   عمود النصّ متثبّت على 520px (عرض القراءة المريح) والزيادة كلها للصورة. */
@media(min-width:1400px){
  .hero .wrap{max-width:1320px}
  .hero-in{grid-template-columns:minmax(0,520px) 1fr;gap:48px}
}
@media(min-width:1750px){
  .hero .wrap{max-width:1440px}
  .hero-in{gap:56px}
}

/* زرار «شوف الأسعار» بسطرين: العنوان + السعر تحته في نفس المربع */
.btn.cta-stack{flex-direction:column;gap:3px;line-height:1.25;padding-block:12px}
.cta-stack .cta-main{font-size:inherit;font-weight:800}
.cta-stack .cta-sub{display:flex;flex-direction:column;gap:1px;font-size:12.5px;font-weight:600;color:var(--muted)}
.cta-stack .cta-sub b{color:var(--navy);font-weight:800;font-size:13px}
.hero-cta{align-items:stretch}
.hero-cta .btn{display:inline-flex;align-items:center;justify-content:center}

/* صورة العلبة في آخر قسم التنزيل — ضغطة = تنزيل نسخة 64-بت */
.packshot{margin-block-start:30px;text-align:center}
/* الصورة الجديدة خلفيتها فاتحة زي الصفحة، فمحتاجة تعوم من غير أي إطار */
.packshot a{display:block;max-width:430px;margin-inline:auto;border-radius:14px;
  transition:transform .25s ease, filter .25s ease;
  filter:drop-shadow(0 12px 26px rgba(16,24,40,.14))}
.packshot a:hover{transform:translateY(-5px);filter:drop-shadow(0 22px 40px rgba(16,24,40,.22))}
.packshot a:focus-visible{outline:3px solid var(--blue);outline-offset:6px;border-radius:14px}
.packshot img{width:100%;height:auto;display:block;border-radius:14px}
.packshot-cap{margin-block-start:6px;font-size:13.5px;font-weight:600;color:var(--muted)}
@media(max-width:520px){ .packshot{margin-block-start:24px} .packshot a{max-width:300px} }

/* جدول استهلاك المساحة داخل الأسئلة الشائعة (2026-08-15).
   overflow-x على الحاوية: الجدول 5 أعمدة ولازم يتزحلق جوّه نفسه على الموبايل
   بدل ما يمدّ الصفحة كلها أفقيًا. */
.sto-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:12px 0}
.sto{border-collapse:collapse;width:100%;min-width:520px;font-size:13.5px;
  font-variant-numeric:tabular-nums}
.sto th,.sto td{border:1px solid var(--line);padding:8px 10px;text-align:start}
.sto th{background:#f2f6fc;font-weight:800;color:var(--navy);white-space:nowrap}
.sto td:not(:first-child){white-space:nowrap}
.sto tr.sto-cap td{background:#fff5e6;color:#7a3f04}
.sto-note{margin:10px 0 0;font-size:13.5px;line-height:1.7}

/* ===== شريط العرض في الصفحة الرئيسية (2026-08-15) ===== */
.mk-band{padding-block:46px}
.mk-head{text-align:center;max-width:760px;margin-inline:auto;margin-block-end:22px}
.mk-new{display:inline-block;background:#e2700c;color:#fff;font-size:12px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;padding:4px 12px;border-radius:999px;margin-block-end:12px}
.mk-head h2{margin:0 0 8px;font-size:clamp(22px,3vw,31px);line-height:1.25;text-wrap:balance}
.mk-head p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.65}
.mk-fig{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:#0d1b3a}
.mk-fig img{display:block;width:100%;height:auto;cursor:zoom-in}
.mk-fig figcaption{padding:10px 16px;background:#fff;border-top:1px solid var(--line);
  color:var(--muted);font-size:12.5px;text-align:center}
@media (max-width:640px){ .mk-band{padding-block:32px} }

/* أيقونة الحركة جنب شارة «جديد» في باند 2.0.5 + رابط الصفحة الداخلية */
.mk-icon-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-block-end:12px}
.mk-icon-row img{display:block;flex:0 0 auto}
.mk-icon-row .mk-new{margin-block-end:0}
.mk-more{margin:14px 0 0;text-align:center}
.mk-more a{color:var(--blue);font-weight:800;text-decoration:none;font-size:15px}
.mk-more a:hover{text-decoration:underline}

/* قائمة مميزات تحت صورة الباند (2.0.5) — 3 أعمدة على الديسكتوب، عمود واحد على الموبايل */
.mk-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-block-start:16px;list-style:none;padding:0}
.mk-list li{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.mk-list li b{display:block;color:var(--navy);font-size:15px;margin-block-end:2px}
.mk-list li svg{flex:0 0 auto;width:20px;height:20px;margin-block-start:2px;color:#16a34a}
@media (max-width:900px){ .mk-list{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .mk-list{grid-template-columns:1fr} }

/* ===== مراجعة Softpedia تحت صورة الهيرو (spr- عشان .sp محجوزة) ===== */
.spr-box{margin:18px 0 0;padding:16px 18px;border:1px solid #dbe4f2;border-radius:16px;
  background:linear-gradient(180deg,#fbfdff,#f4f8ff);box-shadow:0 4px 14px rgba(13,43,107,.05)}
.spr-q{margin:0;font-size:15.5px;line-height:1.75;color:#22314d;font-style:italic}
.spr-by{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px;font-size:13px;color:#5b6b86}
.spr-by b{color:#0d2b6b;font-style:normal}
.spr-by a{color:#1b4fd6;font-weight:700;text-decoration:none}
.spr-by a:hover{text-decoration:underline}
html[dir="rtl"] .spr-q{font-style:normal}
@media(max-width:900px){.spr-box{margin-top:14px}}

/* شارة Softpedia الرسمية داخل مربّع المراجعة */
.spr-head{display:flex;align-items:center;gap:14px;margin:0 0 12px;flex-wrap:wrap}
.spr-ico{width:87px;height:87px;display:block;border-radius:19px;
  box-shadow:0 3px 10px rgba(13,43,107,.20)}
.spr-badge{display:block;width:132px;height:auto;margin:0;border-radius:6px}

/* ═══ ترتيب الموبايل (طلب أحمد 2026-08-24) ═══
   المشكلة: .spr-box متداخل جوّه .hero-visual اللي بياخد order:-1 على الموبايل،
   فالمراجعة كانت بتظهر قبل ما الزائر يعرف المنتج أصلاً.
   الحل: display:contents يشيل صندوق العمود فأطفاله يبقوا عناصر شبكة مباشرة،
   ساعتها نقدر نرتّبهم: الصورة فوق، الكلام، والمراجعة آخر حاجة بعد شارة سورس فورج.
   ⚠️ مقصور على ≤980px — الديسكتوب مايتلمسش نهائيًا. */
@media(max-width:980px){
  .hero-visual{display:contents}
  .hero-shot{order:-1}
  .spr-box{order:9;margin-top:4px}
}

/* ═══ فيديو «تجربة من أرض الواقع» — أول عنصر في اللقطات (كلاس مستقل عن .shot
   عشان لايت بوكس المعرض مايفتحش على الصورة، والضغط يشغّل الفيديو بس) ═══ */
.shotv{grid-column:1 / -1;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow)}
.shotv-fr{position:relative;display:flex;align-items:center;justify-content:center;width:100%;
  height:min(560px,120vw);border:0;padding:0;cursor:pointer;background:#0d1b3a}
.shotv-fr img{height:100%;width:auto;max-width:100%;object-fit:contain;display:block}
.shotv-fr iframe{height:100%;width:auto;aspect-ratio:9/16;max-width:100%;flex:0 0 auto;border:0;display:block}
.shotv-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.38));transition:background .18s}
.shotv-fr:hover .shotv-play{background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.52))}
.shotv-play span{width:62px;height:44px;border-radius:12px;background:rgba(220,38,38,.94);
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .18s}
.shotv-fr:hover .shotv-play span{transform:scale(1.08)}
.shotv-cap{padding:13px 18px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;justify-content:center;text-align:center}
.shotv-cap b{color:var(--navy);font-size:15.5px}
.shotv-cap small{color:var(--muted);font-size:12px}
@media(max-width:640px){.shotv-fr{height:min(600px,158vw)}}

/* 2026-08-26: سطر نسخة VPN تحت أزرار التحميل — مميز ومضغوط، مايشتّتش المشتري العادي */
.dl-vpnline{margin-top:14px;text-align:center}
.dl-vpnline a{display:inline-block;background:linear-gradient(90deg,#eef4ff,#f2fbf5);border:1.5px solid #b9cff3;border-radius:12px;padding:11px 20px;color:#173a7a;text-decoration:none;font-size:15px}
.dl-vpnline a:hover{border-color:#1b4fd6;box-shadow:0 6px 16px rgba(27,79,214,.14)}
.dl-vpnline b{color:#1b4fd6}
.dl-vpnline .vpnarrow{font-weight:800;color:#16a34a}
[dir="rtl"] .dl-vpnline .vpnarrow{display:inline-block;transform:scaleX(-1)}

/* 2026-09-26: روابط الهيدر ماتتكسرش على سطرين. قبل كده «How it works» و«Cómo funciona» كانوا بيتكسروا
   على شاشة 1024، والألماني كان بيزق زرار التحميل برّه الشاشة بـ62px. في المدى ده بنصغّر المسافات بس. */
.nav-links a{white-space:nowrap}
@media(min-width:981px) and (max-width:1180px){
  .nav-in{gap:12px}
  .nav-links{gap:2px}
  .nav-links a{padding:8px 8px;font-size:13.5px}
}

/* 2026-09-26: رابط «مزيد من الفيديوهات» جنب عنوان الفيديو في الرئيسية */
.shotv-more{color:var(--blue);font-weight:700;font-size:13.5px;text-decoration:none}
.shotv-more:hover{text-decoration:underline}

/* ================= 2026-10: الهيكل الجديد (هيدر بقايمة منسدلة، فوتر 4 أعمدة، كارت مصر) ================= */
/* قايمة «الأدلة» */
.nav-dd{position:relative}
.nav-dd-btn{appearance:none;border:0;background:none;font:inherit;color:var(--ink);font-weight:600;font-size:14.5px;
  padding:8px 12px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.nav-dd-btn:hover,.nav-dd.open .nav-dd-btn{background:var(--soft);color:var(--blue)}
.nav-dd-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.nav-dd-btn svg{width:14px;height:14px;flex:none;transition:transform .15s}
.nav-dd.open .nav-dd-btn svg{transform:rotate(180deg)}
.nav-dd-menu{display:none;position:absolute;inset-block-start:100%;inset-inline-start:0;min-width:250px;padding:8px;
  background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px rgba(20,40,90,.14);z-index:70}
.nav-links .nav-dd-menu a{display:block;padding:9px 12px;font-size:14px;border-radius:8px}
.nav-dd.open .nav-dd-menu{display:block}
@media (hover:hover) and (min-width:981px){
  .nav-dd:hover .nav-dd-menu{display:block}
  .nav-dd:hover .nav-dd-btn{background:var(--soft);color:var(--blue)}
  .nav-dd:hover .nav-dd-btn svg{transform:rotate(180deg)}
}
@media(min-width:981px) and (max-width:1180px){ .nav-dd-btn{padding:8px 8px;font-size:13.5px} }
@media(max-width:980px){
  .nav-links.open{max-height:calc(100vh - 66px);overflow-y:auto}
  .nav-links .nav-dd{width:100%}
  .nav-links .nav-dd-btn{width:100%;justify-content:space-between}
  .nav-links .nav-dd-menu{position:static;min-width:0;box-shadow:none;border:0;border-radius:0;padding:0 0 6px;
    margin-inline-start:12px;padding-inline-start:10px;border-inline-start:2px solid var(--line)}
  .nav-links .nav-dd-menu a{white-space:normal}
}

/* الفوتر: 4 أعمدة (العلامة · المنتج · الأدلة · الدعم) */
footer .cols.cols4{grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px}
@media(max-width:980px){ footer .cols.cols4{grid-template-columns:1fr 1fr 1fr} footer .cols.cols4 > .foot-brand{grid-column:1/-1} }
@media(max-width:600px){ footer .cols.cols4{grid-template-columns:1fr 1fr;gap:22px 18px} }
@media(max-width:380px){ footer .cols.cols4{grid-template-columns:1fr} }

/* كارت الدفع من مصر: الـ1000 جنيه هي أوضح حاجة في الكارت */
.eg-flag{width:26px;height:auto;flex:none;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.eg-price2{display:flex;align-items:baseline;justify-content:center;gap:10px;margin-block:12px 4px;line-height:1}
.eg-price2 .old{font-size:22px;color:var(--muted);font-weight:600;text-decoration:line-through;opacity:.6}
.eg-price2 b{font-family:'Inter',sans-serif;font-size:64px;font-weight:800;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.eg-price2 .cur{font-size:22px;font-weight:800;color:var(--navy)}
.tier.eg .eg-logos{justify-content:center;margin-block:18px 18px}
.tier.eg .eg-logos img{flex:0 1 auto;width:240px;max-width:100%}
.tier.eg .eg-note{margin-block:10px 18px;font-size:15px}
@media(max-width:560px){
  .eg-price2 b{font-size:54px}
  .eg-price2 .old,.eg-price2 .cur{font-size:19px}
  .tier.eg .eg-logos img{width:200px}
}

/* لينك نافذة «نسخة متجر مايكروسوفت» تحت الأسعار */
.store-help{text-align:center;margin:22px auto 4px;font-size:14.5px}
.store-help a{display:inline-flex;align-items:center;gap:8px;color:var(--blue);font-weight:700;
  text-decoration:underline;text-underline-offset:3px}
.store-help svg{flex:none}

/* كارت مصر: الزرار تحت فودافون كاش على طول، وأي مساحة فاضية (لما الكارتين جنب بعض) تروح فوق الصورة التوضيحية */
.tier.eg .eg-go{margin-block-start:0}
.tier.eg .eg-shot{margin-block:4px 18px}
.tier.eg ul{margin:8px 0 2px;text-align:start}
/* قايمة الموبايل: كل البنود بعرض القايمة ومن أول السطر (بدل التوسيط)، عشان تتماشى مع «الأدلة» */
@media(max-width:980px){
  .nav-links.open{align-items:stretch}
  .nav-links.open > a,.nav-links .nav-dd-btn{padding:11px 12px}
}
/* الزائر من مصر (توقيت الجهاز Africa/Cairo): كارت الجنيه قبل كارت الدولار لما الكارتين فوق بعض (app.js بيضيف eg-first) */
@media(max-width:860px){ .pay-two.eg-first > .pay-box:nth-of-type(2){order:0} }
/* شريط «بتدفع من مصر؟» فوق فورم التواصل للي جاي من كود البرنامج وجهازه في مصر (app.js بيضيفه) */
.eg-qrbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:900px;margin:0 auto 22px;padding:14px 18px;
  background:#eafaf0;border:2px solid var(--green);border-radius:14px;color:var(--navy);font-family:'Tajawal','Inter',sans-serif;
  font-size:16.5px;box-shadow:0 8px 20px rgba(22,163,74,.14)}
.eg-qrbar:hover{background:#dff6e8}
.eg-qrbar-t{flex:1 1 260px}
.eg-qrbar-t b{color:#0e7a38}
.eg-qrbar-go{flex:none;background:var(--grad);color:#fff;font-weight:800;border-radius:10px;padding:9px 18px}
/* كارت مصر للي جاي من مصر بس (html.is-eg من app.js). برّه مصر: كارت الدولار لوحده في النص */
.pay-box.pay-eg{display:none}
/* جوّه مصر: في العربي والإنجليزي بس (أحمد 2026-10-08) */
html.is-eg:is([lang="ar"],[lang="en"]) .pay-box.pay-eg{display:flex}
html:not(.is-eg) .pay-two,html.is-eg:not([lang="ar"]):not([lang="en"]) .pay-two{grid-template-columns:minmax(0,520px);justify-content:center}
/* الكارتين جنب بعض: من غير تكبير كارت الدولار، عشان الزرارين يقفوا على نفس الخط (app.js: mwAlignPay) */
@media(min-width:861px){ html.is-eg:is([lang="ar"],[lang="en"]) .pay-two .tier.best{transform:none} }
/* «مش محتاج حساب PayPal» تحت لوجوهات البطاقات: عريض وغامق وتحته خط (طلب أحمد 2026-10-08)، والباقي سطر صغير تحته */
.cards-note .cn-key{color:var(--navy);font-weight:800;font-size:14.5px;line-height:1.75;
  text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:5px}
.cards-note .cn-fine{display:block;margin-block-start:4px;color:var(--muted)}
a.cn-key{cursor:pointer}a.cn-key:hover{color:var(--blue);text-decoration-thickness:3px}
a.cn-key:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
@media(max-width:560px){ .cards-note .cn-key{font-size:13.5px} }
/* خطوات الدفع تحت «ادفع من مصر»: بتشرح اللي جاي وبتملا مكان معلومات PayPal في الكارت التاني (أحمد: «مسافة فاضية») */
.tier.eg .eg-note{margin-block:12px 10px}
.tier.eg .eg-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px;width:100%;text-align:start}
.tier.eg .eg-steps li{display:flex;align-items:center;gap:10px;margin:0;padding:9px 12px;font-size:14.5px;font-weight:600;
  color:var(--ink);background:var(--soft);border:1px solid var(--line);border-radius:10px}
.eg-sn{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--grad);
  color:#fff;font-size:13.5px;font-weight:800;font-family:'Inter',sans-serif}
/* «Windows Server» مميز + نجمة NEW! جنبه (طلب أحمد 2026-10-08، شبه الصورة اللي بعتها) */
.nav-links a.nav-ws{display:inline-flex;align-items:center;gap:3px;font-weight:800;color:var(--navy)}
.ws-new{flex:none;width:62px;height:33px;position:relative;inset-block-start:-7px;
  filter:drop-shadow(0 2px 2px rgba(107,50,0,.28));transform:rotate(-6deg);transform-origin:50% 60%;animation:wsPop 2.6s ease-in-out infinite}
@keyframes wsPop{0%,72%,100%{transform:rotate(-6deg) scale(1)}82%{transform:rotate(4deg) scale(1.12)}91%{transform:rotate(-3deg) scale(1.04)}}
@media (prefers-reduced-motion:reduce){.ws-new{animation:none}}
@media(min-width:981px) and (max-width:1180px){.nav-links .ws-new{width:50px;height:27px}}
@media(max-width:980px){.nav-links .ws-new{inset-block-start:0}}
footer a.foot-ws{display:flex;align-items:center;gap:6px;color:#fff;font-weight:700}
footer .ws-new{width:52px;height:28px;inset-block-start:0}
/* من 981 لـ1100: اسم اللغة بيستخبّى (العلم كفاية) عشان نجمة NEW! تكفي في سطر الهيدر */
@media(min-width:981px) and (max-width:1100px){ #langCur{display:none} }
/* اللغات اللي كلماتها أطول (ألماني وروسي وبرتغالي وإسباني) من 981 لـ1060: اللوجو من غير الاسم، عشان سطر الهيدر يكفي */
@media(min-width:981px) and (max-width:1060px){ html:is([lang="de"],[lang="ru"],[lang="pt-BR"],[lang="es"]) .nav .brand > span{display:none} }
/* «For Windows Server» أطول (أحمد 2026-10-08): المقاسات الضيقة لحد 1340، و6px بس من 981 لـ1100 */
@media(min-width:1181px) and (max-width:1340px){
  .nav-in{gap:12px}
  .nav-links{gap:2px}
  .nav-links a,.nav-dd-btn{padding:8px 9px;font-size:13.5px}
  .nav-links .ws-new{width:54px;height:29px}
}
@media(min-width:981px) and (max-width:1100px){
  .nav-links a,.nav-dd-btn{padding:8px 6px}
  .nav-links .ws-new{width:44px;height:24px}
}
/* الألماني والروسي: «Für/Для Windows Server» + NEW! أطول، فاسم اللغة يستخبّى لحد 1180 */
@media(min-width:1101px) and (max-width:1180px){ html:is([lang="de"],[lang="ru"]) #langCur{display:none} }
/* نجمة NEW! على كارتي التنزيل (أحمد 2026-10-08: «حط نجمة نيو هنا كمان»): استيكر على الركن، شوية برّه الكارت من فوق */
.dl-card{position:relative;overflow:visible}
.dl-card .dl-new{position:absolute;inset-block-start:-16px;inset-inline-end:10px;width:74px;height:39px;z-index:2;
  transform:rotate(8deg);animation-name:dlPop;animation-delay:.9s}
@keyframes dlPop{0%,72%,100%{transform:rotate(8deg) scale(1)}82%{transform:rotate(-3deg) scale(1.12)}91%{transform:rotate(6deg) scale(1.04)}}
@media(max-width:560px){ .dl-card .dl-new{width:64px;height:34px;inset-block-start:-14px} }
/* سطر الميزة الجديدة جوّه كارت التنزيل (أحمد 2026-10-08): خط مميز بتدرّج الهوية + أيقونة حركة */
.dl-card{flex-wrap:wrap}
.dl-card .dl-feat{flex-basis:100%;display:flex;align-items:center;gap:8px;margin-block-start:10px;padding-block-start:10px;
  border-block-start:1px dashed var(--line);font-size:14px;font-weight:800;line-height:1.5;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.dl-card .dl-feat::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:var(--grad);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:560px){ .dl-card .dl-feat{font-size:13.5px} }
/* بانر «يعمل بشكل ذكي ليوفر مساحة التخزين» فوق كارتي التنزيل (أحمد 2026-10-08: «بشكل مبهر للعميل») */
.dl-smart{position:relative;overflow:hidden;max-width:820px;margin:0 auto 18px;padding:16px 22px 16px 70px;border-radius:16px;
  background:linear-gradient(100deg,#0d1b3a 0%,#1b4fd6 55%,#16a34a 100%);color:#fff;font-weight:800;font-size:18px;line-height:1.5;
  text-align:start;box-shadow:0 14px 34px rgba(27,79,214,.28);text-shadow:0 1px 2px rgba(0,0,0,.25)}
html[dir="rtl"] .dl-smart{padding:16px 70px 16px 22px}
.dl-smart::before{content:"";position:absolute;inset-block-start:50%;inset-inline-start:18px;width:38px;height:38px;margin-block-start:-19px;border-radius:12px;
  background:rgba(255,255,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 2.4 1.2 4.5 3 5.7V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.3c1.8-1.2 3-3.3 3-5.7a7 7 0 0 0-7-7z'/%3E%3Cpath d='M10 21h4'/%3E%3Cpath d='M9 9h6M9 12h6'/%3E%3C/svg%3E") center/24px no-repeat;
  box-shadow:0 0 0 2px rgba(255,255,255,.22)}
.dl-smart::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  transform:translateX(-120%);animation:dlShine 4.5s ease-in-out infinite}
html[dir="rtl"] .dl-smart::after{animation-name:dlShineR}
@keyframes dlShine{0%,65%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes dlShineR{0%,65%{transform:translateX(120%)}100%{transform:translateX(-120%)}}
@media (prefers-reduced-motion:reduce){.dl-smart::after{animation:none}}
.dl-smart b{color:#bbf7d0}
@media(max-width:560px){ .dl-smart{font-size:15.5px;padding:14px 16px 14px 60px} html[dir="rtl"] .dl-smart{padding:14px 60px 14px 16px} .dl-smart::before{inset-inline-start:12px} }
/* الدفعة C (2026-10-09): الكلمات الطويلة في الألماني/الروسي/البرتغالي/الإسباني كانت بتوسّع أعمدة الشبكة على الموبايلات الصغيرة
   (1fr = minmax(auto,1fr) بياخد عرض أطول كلمة). minmax(0,1fr) + كسر الكلمة عند الحاجة، وعمود واحد تحت 400px */
@media(max-width:600px){
  .uses{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps,.grid3,.buy{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide{grid-template-columns:minmax(0,1fr)}
  .use,.guide .g,.step,.feature,.buy .s{min-width:0;overflow-wrap:anywhere}
  .use b,.use span,.guide .g h3,.guide .g li{overflow-wrap:anywhere;hyphens:auto}
}
@media(max-width:400px){ .uses{grid-template-columns:minmax(0,1fr)} }