/* CF site identity "Signal" (2026-10-26): navy + electric blue, Readex Pro + IBM Plex Sans Arabic.
   A layer over stylecf.css: it changes the look only, never markup or text. To go back to the
   previous look, remove its <link> from templates/cf_layout.html. Fonts are self-hosted. */

@font-face { font-family: 'Readex Pro'; font-style: normal; font-weight: 500; font-display: swap;
	src: url('/assets/cf/fonts/readex-500-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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: 'Readex Pro'; font-style: normal; font-weight: 500; font-display: swap;
	src: url('/assets/cf/fonts/readex-500-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; }
@font-face { font-family: 'Readex Pro'; font-style: normal; font-weight: 700; font-display: swap;
	src: url('/assets/cf/fonts/readex-700-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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: 'Readex Pro'; font-style: normal; font-weight: 700; font-display: swap;
	src: url('/assets/cf/fonts/readex-700-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; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap;
	src: url('/assets/cf/fonts/plexar-400-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap;
	src: url('/assets/cf/fonts/plexar-400-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; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: swap;
	src: url('/assets/cf/fonts/plexar-500-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: swap;
	src: url('/assets/cf/fonts/plexar-500-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; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap;
	src: url('/assets/cf/fonts/plexar-600-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap;
	src: url('/assets/cf/fonts/plexar-600-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; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap;
	src: url('/assets/cf/fonts/plexar-700-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap;
	src: url('/assets/cf/fonts/plexar-700-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; }

/* ------------------------------------------------------------------ tokens */
:root {
    --bg0: #F7F9FC;
    --bg1: #EEF3F9;
    --stroke: #DCE4EF;
    --text: #0B1B33;
    --text-dark: #1E2D45;
    --muted: #4A5B73;
    --primary: #0B1B33;
    --primary-rgb: 11, 27, 51;
    --accent: #0066E6;
    --accent-ink: #0052B8;
    --accent-light: #E8F1FF;
    --glass-bg: #FFFFFF;
    --glass-border: #DCE4EF;
    --glass-shadow: 0 1px 2px rgba(11, 27, 51, .04);
    --shadow: 0 1px 2px rgba(11, 27, 51, .04), 0 12px 32px rgba(11, 27, 51, .06);
    --radius: 14px;
    --cf-display: "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif;
    --cf-body: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

body {
    font-family: var(--cf-body);
    background: var(--bg0);
    line-height: 1.8;
}
h1, h2, h3, h4,
.hero h2, .section-head h2, .card h3, .badge h3, .f-col h4, .stat .n {
    font-family: var(--cf-display);
    font-weight: 700;
    letter-spacing: 0;
}

/* the old theme used 800–1000 weights for body copy; the new pair reads best lighter */
.card p, .list li, .badge p, .footer-desc, .hint, .stat .t, .legal-list, .legal-list li { font-weight: 400; }
.brand p, .footer-links a, .footer-sub, .footer-bottom, .input, textarea, select { font-weight: 500; }
.btn, .mini, .pill, .kicker, summary, .legal-badge, .lang-toggle { font-weight: 600; }

/* ------------------------------------------------------------------ header */
header {
    background: #FFFFFF;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--stroke);
}
.logo {
    border-radius: 10px;
    border-color: var(--stroke);
    box-shadow: none;
}
.brand p { color: var(--muted); }
.link {
    color: var(--text-dark);
    font-weight: 500;
    font-size: .9rem;
    border-radius: 8px;
}
.link:hover { color: var(--accent-ink); background: var(--bg1); }
.link.active { color: var(--accent-ink); background: var(--accent-light); border-color: transparent; }
.lang-toggle { border-radius: 8px; border-color: var(--stroke); color: var(--text); }
.mobile a { color: var(--text-dark); font-weight: 500; }

.btn {
    border-radius: 8px;
    border-color: var(--stroke);
    box-shadow: none;
}
header .actions .btn { border-radius: 8px; }
.btn:hover { background: var(--bg1); transform: none; }
.btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #FFFFFF;
    box-shadow: none;
}
.btn.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); filter: none; box-shadow: none; }
.hamburger { border-radius: 8px; }

/* ------------------------------------------------------------------ hero: light, text first, panel beside */
.hero { padding: 64px 0 40px; }
.hero-grid { gap: 40px; align-items: center; }
.hero-card {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    color: var(--text);
    animation: none;
    overflow: visible;
}
.kicker {
    padding: 0;
    border: 0;
    background: none;
    backdrop-filter: none;
    color: var(--accent-ink);
    font-size: .92rem;
}
.kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}
.kicker b { color: var(--accent-ink); }
.hero h2 {
    color: var(--text);
    font-size: 2.9rem;
    line-height: 1.3;
}
.hero h2 span { color: var(--accent); text-decoration: none; }
/* the English translation keeps the span on "that", which is not worth highlighting */
html[data-cf-lang="en"] .hero h2 span { color: inherit; }
.hero p { color: var(--muted); font-size: 1.12rem; max-width: 36rem; }
.stats { margin-top: 32px; }
.stat {
    background: #FFFFFF;
    border: 1px solid var(--stroke);
    backdrop-filter: none;
    border-radius: 10px;
}
.stat .n { color: var(--text); font-size: 1.05rem; }
.stat .t { color: var(--muted); }

.hero-side {
    border-radius: 16px;
    border-color: var(--stroke);
    box-shadow: var(--shadow);
}
.badge {
    background: var(--bg0);
    border-color: #E6ECF4;
    border-radius: 12px;
}
.ico {
    border: 0;
    border-radius: 10px;
    background: var(--accent-light);
    color: var(--accent);
}

/* ------------------------------------------------------------------ sections and cards */
.section-head h2 { color: var(--text); font-size: 2rem; }
.section-head p { color: var(--muted); margin: 6px 0 0; }

.card {
    background: #FFFFFF;
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    box-shadow: var(--glass-shadow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 12px 28px rgba(11, 27, 51, .08);
}
.card h3 { color: var(--text); }
.card p { color: var(--muted); }
.card-anim-container {
    background: #F3F7FC;
    border: 0;
    border-radius: 10px;
    color: var(--accent);
}
.pill { background: var(--bg0); border-color: var(--stroke); color: var(--muted); }
.pill.ok { background: #E3F6EC; border-color: transparent; color: #0B6B42; }
.mini { border-radius: 8px; border-color: var(--stroke); color: var(--text-dark); }
.mini:hover { background: var(--bg1); color: var(--text); }
.mini.primary { border-color: var(--accent-light); background: var(--accent-light); color: var(--accent-ink); }
.mini.primary:hover { background: #D6E6FF; }

details {
    background: #FFFFFF;
    border-color: var(--stroke);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 10px;
}

.partner {
    background: #FFFFFF;
    border: 1px solid var(--stroke);
    border-radius: 12px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.partner:hover { border-color: var(--accent); transform: translateY(-2px); }

.input, textarea, select { border-radius: 10px; border-color: var(--stroke); }
.input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }

/* ------------------------------------------------------------------ footer: stays light so the logo and badges keep their colours */
.site-footer { background: #FFFFFF; border-top: 1px solid var(--stroke); }
.f-col h4 { color: var(--text); font-size: 1.05rem; }
.footer-brand img { filter: none; opacity: 1; }
.footer-sub, .footer-desc, .footer-links a, .legal-list { color: var(--muted); }
.footer-links a:hover { color: var(--accent-ink); transform: none; }
.legal-box { background: var(--bg0); border-color: var(--stroke); border-radius: 12px; }
.legal-badge { background: var(--accent-light); border-color: transparent; color: var(--accent-ink); }
.footer-bottom { border-top-color: var(--stroke); color: var(--muted); }

.cf-cookie { border-radius: 12px; border-color: var(--stroke); }
.cf-cookie a { color: var(--accent-ink); }
.cf-cookie button { background: var(--text); }

@media (max-width: 560px) {
    .hero { padding: 40px 0 28px; }
    .hero h2 { font-size: 2rem; }
    .section-head h2 { font-size: 1.6rem; }
}

/* English pages: the product's Arabic summary line comes from item data and has no translation */
html[data-cf-lang="en"] .pd-ar { display: none; }

/* Off-screen helpers (the contact form's spam trap sits at left:-9999px) stretched right-to-left pages
   sideways on phones. clip keeps the page width without breaking the sticky header. */
html, body { overflow-x: clip; }
/* the spam trap stays invisible, but no longer 9999px out to the side */
#leadForm input[name="trap"] { left: 0 !important; top: 0; clip-path: inset(50%); pointer-events: none; }