/* =================================================================
   /scale — لاندنج بيدج (ترافيك مدفوع)
   -----------------------------------------------------------------
   ستراكشر مبني على مرجع acquisitionlabs.net، بألوان صدوق.
   الملف ده بيتحمّل من /scale وبس. كل الكلاسات بادئتها sc-
   وأي كلاس عام متسكوب تحت .sc-page فمايأثّرش على أي صفحة تانية.
   ================================================================= */

/* ---------- خط العناوين: Cairo 900 (self-hosted، بديل Anton العربي) ---------- */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/cairo-900-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/cairo-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =================================================================
   التوكنز — دارك دايمًا، بنفس متغيّرات الدارك مود بتاعة styles.css
   (نفس ألوان صدوق بالظبط — مفيش لون جديد، الأخضر مكان الدهبي)
   ================================================================= */
.sc-page {
  --bg:        #0b0e0d;
  --bg-soft:   #101514;
  --panel:     #151a18;
  --ink:       #f2f5f2;
  --ink-2:     #d3d9d6;
  --muted:     #98a29d;
  --line:      rgba(255, 255, 255, 0.13);
  --line-soft: rgba(255, 255, 255, 0.07);
  --green:        #22c977;
  --green-strong: #16b364;
  --green-tint:   rgba(34, 201, 119, 0.12);
  --font-display: 'Cairo', var(--font-ar);

  background: var(--bg);
  color: var(--ink);
}
/* الصفحة دارك دايمًا — التوجل مش موجود هنا */
.sc-page .section--tint { background: var(--bg-soft); }

/* ---------- الأيقونات ----------
   SVG حقيقي (stroke) متركّب كـ mask — مش جليفات ✓/✕ اللي الـ OS
   بيرندرها كإيموجي ملوّن. اللون بييجي من background-color فبيتحكم فيه
   بالتوكنز، والحجم vector فبيفضل حاد على أي شاشة. */
.sc-page {
  --ico-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
  --ico-x: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18'/><path d='M6 6l12 12'/></svg>");
  --ico-play: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M8 5.2v13.6L19 12z'/></svg>");
}

/* الحاوية + الأيقونة (::before = الخلفية · ::after = الشكل) */
.sc-ico, .sc-ba__col li, .sc-get { position: relative; }
.sc-ba__col li::before, .sc-ba__col li::after,
.sc-get::before, .sc-get::after {
  content: ""; position: absolute; inset-inline-start: 0;
  width: 22px; height: 22px; border-radius: 7px;
}
.sc-ba__col li::before, .sc-ba__col li::after { top: 2px; }
.sc-get::before, .sc-get::after { top: 18px; inset-inline-start: 20px; }

.sc-ba__col li::after, .sc-get::after {
  -webkit-mask: var(--ico) center / 12px 12px no-repeat;
          mask: var(--ico) center / 12px 12px no-repeat;
  border-radius: 0;
}

/* موجب — أخضر */
.sc-ba__col--after li::before, .sc-get::before {
  background: var(--green-tint);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 34%, transparent);
}
.sc-ba__col--after li::after, .sc-get::after { --ico: var(--ico-check); background: var(--green); }

/* سالب — رمادي محايد (مش أحمر صارخ، ومفيش لون بره البالتة) */
.sc-ba__col--before li::before {
  background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 0 0 1px var(--line);
}
.sc-ba__col--before li::after { --ico: var(--ico-x); background: var(--muted); }

/* ---------- عناوين ---------- */
.sc-page h1, .sc-page h2 { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.015em; }
.sc-hl { color: var(--green); }

.sc-kicker {
  display: block; text-align: center;
  font-size: 13px; font-weight: 700; color: var(--green);
  margin-bottom: 12px;
}
.sc-h2 { font-size: clamp(1.7rem, 4.2vw, 3rem); line-height: 1.2; text-align: center; }
.sc-sub {
  text-align: center; color: var(--muted); font-size: 17px; line-height: 1.85;
  max-width: 60ch; margin: 14px auto 0;
}
.sc-secthead { margin-bottom: clamp(34px, 5vw, 52px); }

/* =================================================================
   هيدر + بار العدّاد
   ================================================================= */
.sc-topbar { border-bottom: 1px solid var(--line-soft); }
.sc-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 62px; }
.sc-topbar__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.sc-count {
  position: sticky; top: 0; z-index: 100;
  background: var(--green-strong);
  color: #04140b;
}
.sc-count__inner {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px 14px; padding: 11px 0;
}
.sc-count__label { font-size: 14px; font-weight: 700; }
.sc-count__clock { display: flex; gap: 7px; }
.sc-count__unit {
  background: #04140b; color: #eafff3;
  border-radius: 8px; padding: 4px 9px; min-width: 46px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.sc-count__n { display: block; font-family: var(--font-en); font-size: 17px; font-weight: 700; line-height: 1.15; }
.sc-count__u { display: block; font-size: 9.5px; color: #7fd6a5; margin-top: 1px; }
.sc-count .btn { background: #04140b; border-color: #04140b; color: #eafff3; }
.sc-count .btn:hover { background: #000; border-color: #000; }

/* =================================================================
   HERO
   ================================================================= */
.sc-hero { padding: clamp(40px, 6vw, 76px) 0 clamp(34px, 5vw, 60px); position: relative; overflow: hidden; text-align: center; }
.sc-hero::before {
  content: ""; position: absolute; inset-inline: 0; top: -30%;
  height: 70vh; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 50%, var(--green-tint), transparent 70%);
}
.sc-hero > .wrap { position: relative; }
.sc-eyebrow {
  display: inline-block; border: 1px solid var(--line);
  background: var(--bg-soft); border-radius: 999px;
  padding: 8px 18px; font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.sc-hero__h1 {
  font-size: clamp(2rem, 5.4vw, 4rem); line-height: 1.18;
  margin: 22px auto 0; max-width: 20ch;
}
.sc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px 0 0; }
.sc-chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: var(--bg-soft);
  border-radius: 999px; padding: 8px 16px; font-size: 14px; color: var(--ink-2);
}
.sc-chip::before {
  content: ""; width: 13px; height: 13px; flex: 0 0 auto; background: var(--muted);
  -webkit-mask: var(--ico-x) center / 13px 13px no-repeat;
          mask: var(--ico-x) center / 13px 13px no-repeat;
}
.sc-hero__sub { color: var(--muted); font-size: clamp(1rem, 1.8vw, 1.12rem); line-height: 1.85; max-width: 58ch; margin: 24px auto 0; }
.sc-hero__cta { margin-top: 30px; }
.sc-hero__micro { margin-top: 14px; font-size: 14.5px; color: var(--muted); }

/* ---------- مكان الفيديو (VSL) ---------- */
.sc-vsl {
  margin: 34px auto 0; max-width: 860px;
  aspect-ratio: 16 / 9;
  border: 2px dashed var(--line); border-radius: var(--radius);
  background: var(--bg-soft);
  display: grid; place-items: center; gap: 8px; padding: 20px; text-align: center;
}
.sc-vsl__ico {
  width: 62px; height: 62px; border-radius: 50%;
  border: 2px solid var(--green); background: var(--green-tint);
  display: grid; place-items: center;
}
.sc-vsl__ico::before {
  content: ""; width: 22px; height: 22px; background: var(--green);
  margin-inline-start: 3px; /* توازن بصري للمثلث */
  -webkit-mask: var(--ico-play) center / 22px 22px no-repeat;
          mask: var(--ico-play) center / 22px 22px no-repeat;
}
.sc-vsl__t { font-weight: 700; font-size: 16px; color: var(--ink-2); }
.sc-vsl__d { font-size: 13.5px; color: var(--muted); max-width: 44ch; }

/* =================================================================
   شريط اللوجوهات
   ================================================================= */
.sc-logos { padding: 34px 0; background: var(--bg-soft); border-block: 1px solid var(--line-soft); }
.sc-logos__label { text-align: center; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 20px; }
.sc-page .marquee::before { background: linear-gradient(to right, var(--bg-soft), transparent); }
.sc-page .marquee::after  { background: linear-gradient(to left,  var(--bg-soft), transparent); }

/* =================================================================
   كروت (المشكلة · الميثود)
   ================================================================= */
.sc-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sc-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sc-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 24px;
}
.sc-card--edge { border-inline-start: 3px solid color-mix(in srgb, var(--muted) 60%, transparent); }
.sc-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; color: var(--ink); }
.sc-card p { color: var(--muted); font-size: 15px; line-height: 1.78; }
.sc-punch {
  text-align: center; color: var(--green); font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.22rem); line-height: 1.75;
  max-width: 62ch; margin: 34px auto 0;
}
.sc-step__no {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 12px; background: var(--green); color: #04140b;
  font-family: var(--font-en); font-size: 19px; font-weight: 700; margin-bottom: 16px;
}
.sc-step__tag { display: block; font-size: 12px; font-weight: 700; color: var(--green); margin-bottom: 6px; }

/* =================================================================
   قبل / بعد
   ================================================================= */
.sc-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sc-ba__col { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; }
.sc-ba__col--after { border-color: color-mix(in srgb, var(--green) 45%, transparent); background: color-mix(in srgb, var(--green-tint) 55%, var(--panel)); }
.sc-ba__col h3 { font-size: 19px; font-weight: 700; margin-bottom: 20px; }
.sc-ba__col--after h3 { color: var(--green); }
.sc-ba__col ul { display: grid; gap: 14px; }
.sc-ba__col li { position: relative; padding-inline-start: 34px; color: var(--ink-2); font-size: 15.5px; line-height: 1.7; }

/* =================================================================
   تايلز الأرقام
   ================================================================= */
.sc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sc-stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 22px; text-align: center; }
.sc-stat__v {
  display: block; font-family: var(--font-en); font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 700; color: var(--green); line-height: 1;
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate;
}
.sc-stat__k { display: block; margin-top: 12px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }

/* =================================================================
   الإثبات (لقطات لوحات التحكم — بيستخدم .proof-card من styles.css)
   ================================================================= */
/* شريط لقطات الإثبات — بيلف أوتوماتيك زي شريط اللوجوهات
   (بيستخدم .marquee/.marquee__track من styles.css) */
.sc-proof__marquee { margin-top: 4px; }
.sc-proof__marquee .marquee__track { animation-duration: 120s; }
/* بيقف على الهوفر (من styles.css) وكمان على فوكس الكيبورد */
.sc-proof__marquee:focus-within .marquee__track { animation-play-state: paused; }

.sc-page .proof-card { background: var(--panel); border-color: var(--line); }
.sc-proof__marquee .proof-card {
  flex: 0 0 auto; width: 500px; margin-right: 18px; direction: rtl;
}
/* كل اللقطات على نسبة واحدة عشان الشريط يبقى متساوي —
   contain مش cover عشان مايتقصّش أي رقم، والخلفية بيضا زي الداشبورد نفسه */
.sc-proof__marquee .proof-card img {
  aspect-ratio: 2.7 / 1; height: auto;
  object-fit: contain; object-position: center; background: #fff;
}
.sc-page .proof-card__head { border-color: var(--line); }
.sc-page .proof-card__month { color: var(--ink); }
.sc-proof__note { text-align: center; font-size: 13.5px; color: var(--muted); margin-top: 22px; line-height: 1.8; }

/* =================================================================
   اللي بتاخده — تشيك ليست
   ================================================================= */
.sc-gets { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 940px; margin-inline: auto; }
.sc-get {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px; padding-inline-start: 50px; position: relative;
}

.sc-get h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.sc-get p { font-size: 14px; color: var(--muted); line-height: 1.7; }

/* =================================================================
   التايم لاين
   ================================================================= */
.sc-tl { display: grid; gap: 12px; max-width: 900px; margin-inline: auto; }
.sc-tl__row {
  display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: start;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px 24px;
}
.sc-tl__when { font-size: 13.5px; font-weight: 700; color: var(--green); padding-top: 2px; }
.sc-tl__b h3 { font-size: 17px; font-weight: 700; margin-bottom: 5px; }
.sc-tl__b p { font-size: 14.5px; color: var(--muted); line-height: 1.75; }

/* =================================================================
   بوكس الضمان
   ================================================================= */
.sc-guar {
  max-width: 980px; margin-inline: auto; text-align: center;
  border: 1px solid color-mix(in srgb, var(--green) 45%, transparent);
  border-radius: 22px; padding: clamp(34px, 5vw, 56px) clamp(22px, 4vw, 54px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--green-tint) 70%, var(--panel)), var(--panel));
}
.sc-guar__pill {
  display: inline-block; border: 1px solid var(--green); color: var(--green);
  border-radius: 999px; padding: 6px 18px; font-size: 12.5px; font-weight: 700; margin-bottom: 20px;
}
.sc-guar h2 { font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.28; }
.sc-guar__p { color: var(--muted); font-size: 16px; line-height: 1.85; max-width: 60ch; margin: 18px auto 0; }
.sc-guar__hi { color: var(--green); font-weight: 700; margin-top: 16px; }
.sc-guar .btn { margin-top: 28px; }
.sc-guar__micro { margin-top: 14px; font-size: 13.5px; color: var(--muted); }

/* =================================================================
   FAQ (بيستخدم .faq من styles.css)
   ================================================================= */
.sc-page .lightbox__close { display: grid; place-items: center; }

.sc-page .faq { background: var(--panel); border-color: var(--line); }
.sc-page .faq summary { color: var(--ink); }

/* =================================================================
   CTA الأخير
   ================================================================= */
.sc-final { max-width: 760px; margin-inline: auto; text-align: center; }
.sc-final__steps { display: grid; gap: 14px; margin: 34px 0; text-align: start; counter-reset: scstep; list-style: none; }
.sc-final__step {
  counter-increment: scstep; position: relative;
  padding: 18px 22px; padding-inline-start: 64px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
  color: var(--ink-2); font-size: 15.5px; line-height: 1.75;
}
.sc-final__step::before {
  content: counter(scstep);
  position: absolute; inset-inline-start: 20px; top: 17px;
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font-family: var(--font-en); font-size: 14px; font-weight: 700;
  color: #04140b; background: var(--green);
}
.sc-final__note { margin-top: 16px; font-size: 14.5px; color: var(--muted); line-height: 1.8; }

/* ---------- فوتر ---------- */
.sc-page .site-footer { border-color: var(--line-soft); }
.sc-footnote { border-top: 1px solid var(--line-soft); padding: 24px 0 0; font-size: 13.5px; line-height: 1.85; color: var(--muted); max-width: 70ch; margin-inline: auto; text-align: center; }

/* ---------- شريط CTA ثابت (موبايل) ---------- */
.sc-sticky {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 96; display: none;
  padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: saturate(1.5) blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(120%); transition: transform .32s var(--ease);
}
.sc-sticky.is-on { transform: none; }
.sc-sticky .btn { width: 100%; justify-content: center; }
#scHeroEnd { display: block; width: 100%; height: 1px; }

/* =================================================================
   ريسبونسيف
   ================================================================= */
@media (max-width: 1080px) {
  .sc-grid4 { grid-template-columns: 1fr 1fr; }
  .sc-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .sc-grid3 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sc-proof__marquee .proof-card { width: 360px; }
  .sc-ba { grid-template-columns: 1fr; }
  .sc-gets { grid-template-columns: 1fr; }
  .sc-tl__row { grid-template-columns: 1fr; gap: 8px; }
  .sc-topbar__tag { display: none; }
  .sc-count__inner { gap: 8px 10px; padding: 9px 0; }
  .sc-count__label { width: 100%; text-align: center; font-size: 12.5px; }
  .sc-sticky { display: block; }
  .sc-page .site-footer { padding-bottom: 100px; }
}
@media (max-width: 560px) {
  .sc-proof__marquee .proof-card { width: 300px; margin-right: 12px; }
  .sc-proof__marquee .marquee__track { animation-duration: 80s; }
  .sc-grid4 { grid-template-columns: 1fr; }
  .sc-stats { grid-template-columns: 1fr 1fr; }
  .sc-hero__cta .btn, .sc-guar .btn { width: 100%; justify-content: center; }
  .sc-count .btn { display: none; }
  .sc-final__step { padding-inline-start: 58px; }
}
@media (prefers-reduced-motion: reduce) { .sc-sticky { transition: none; } }